/* Page layout + the coin field. Frame/button/merchant/talent/panel styles live in their own modules (frame, buttons, merchant, talents, panels). */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: #0b0806 url(../assets/ui/classhall-stone-tile.png) left top / 256px; background-blend-mode: multiply; color: var(--text); font: 15px/1.45 var(--font-game); -webkit-text-size-adjust: 100%; }
button { font-family: inherit; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; max-width: 1480px; margin: 0 auto; }
.top h1 { margin: 0; font: 700 26px var(--font-game); color: var(--gold); text-shadow: var(--ink), 0 2px 8px #000; letter-spacing: .03em; }
.back { color: var(--gold-dim); text-decoration: none; font-size: 14px; } .back:hover { color: var(--gold-bright); }
.save-indicator { color: var(--muted); font-size: 13px; } .save-indicator.bad { color: var(--bad); }
.save-indicator.flash { animation: savedflash 1.2s ease-out; }
@keyframes savedflash { 0% { color: var(--green); } 100% { color: var(--muted); } }

.layout { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr) minmax(420px, 480px); gap: 24px; align-items: start; max-width: 1760px; margin: 0 auto; padding: 8px 24px 40px; }
.layout > * { min-width: 0; }

/* the stage: the coin is the hero */
.stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; overflow: hidden; isolation: isolate;
  min-height: max(620px, calc(100vh - 200px)); padding: 28px 16px 24px;
  border: 2px solid #4a3a1e; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 58%, rgba(255,196,70,.28), rgba(255,160,30,.07) 45%, transparent 70%),
              linear-gradient(rgba(6,4,2,.12), rgba(6,4,2,.5)), url(../assets/stage-undermine.jpg) center / cover no-repeat, #0b0805;
  box-shadow: inset 0 0 90px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,209,0,.12), 0 14px 40px rgba(0,0,0,.65), 0 0 36px rgba(255,170,40,.07);
}
.stage__sparkles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.stage__glow { position: absolute; left: 50%; top: 56%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,205,90,.20), transparent 55%); z-index: -1; pointer-events: none; }
.bank { text-align: center; }
.gold-line { display: flex; align-items: center; justify-content: center; gap: 14px; font: 700 clamp(44px, 4.6vw, 72px)/1 var(--font-game); letter-spacing: .02em; color: var(--gold);
  text-shadow: 0 0 22px rgba(255,190,50,.55), 0 3px 0 #5a3d00, 0 4px 10px #000, var(--ink); }
.gold-line img { border: 1px solid #000; box-shadow: 0 0 14px rgba(255,200,60,.5); }
.gps { margin-top: 6px; font-size: 17px; letter-spacing: .04em; color: var(--text); text-shadow: 0 1px 2px #000; }
.coin-wrap { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 6px auto 0; display: grid; place-items: center; }
.coin-halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,110,.55), rgba(255,170,40,.18) 45%, transparent 68%); animation: breathe 4s ease-in-out infinite; pointer-events: none; }
.coin-halo.flare { animation: flare .45s ease-out; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.04); } }
@keyframes flare { 0% { opacity: 1; transform: scale(1.12); } 100% { opacity: .6; transform: scale(1); } }
button.coin { position: relative; width: 88%; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,190,60,.35)); transition: transform .1s; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
button.coin img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; display: block; }
button.coin::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../assets/coin-gold.png) center / 100% 100% no-repeat; mask: url(../assets/coin-gold.png) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; animation: shine 6s ease-in-out infinite; }
@keyframes shine { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
button.coin:hover { transform: scale(1.025); }
button.coin.hit { animation: punch .24s cubic-bezier(.2,1.4,.4,1); }
button.coin:focus-visible { outline: 3px solid #fff; outline-offset: 10px; }
@keyframes punch { 0% { transform: scale(.88) rotate(-2deg); } 55% { transform: scale(1.05) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
.stage__hint { margin: 2px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.buffs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 30px; }
.buff { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--gold-dim); background: rgba(0,0,0,.6); font-size: 13px; }
.buff em { color: var(--gold); font-style: normal; }
.rare { position: absolute; z-index: 6; border: 0; padding: 0; background: none; transform: translate(-50%, -50%); animation: bob 1.4s ease-in-out infinite; cursor: pointer; }
.rare[hidden] { display: none; }
.rare img { display: block; border: 2px solid var(--q5); box-shadow: 0 0 26px var(--q5), 0 0 8px #fff; }
.rare::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,160,0,.4) 30%, transparent 60%); animation: glint 1.2s ease-out 1; pointer-events: none; }
@keyframes bob { 0%,100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -60%) rotate(6deg); } }
@keyframes glint { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }

.float { position: fixed; pointer-events: none; transform: translate(-50%, -50%); color: var(--gold); font: 700 18px var(--font-game); text-shadow: var(--ink); animation: rise 1s ease-out forwards; z-index: 40; }
.float.big { font-size: 24px; color: var(--q5); }
.float.lucky { font-size: 30px; color: #ff9a2e; text-shadow: 0 0 12px rgba(255,150,30,.9), var(--ink); }
@keyframes rise { to { transform: translate(-50%, -140%); opacity: 0; } }
.burst { position: fixed; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 39; animation: fly .8s ease-in forwards; }
@keyframes fly { 0% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), 120px) rotate(360deg); opacity: 0; } }

.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 16px 28px; }

@media (max-width: 1250px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); }
  .stage { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .side { grid-row: 2; }
  .store { grid-row: 2; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 24px; padding: 8px 12px 32px; }
  .top { padding: 10px 14px; }
  .stage { order: 1; padding: 20px 10px 16px; }
  .store { order: 2; grid-row: auto; } .side { order: 3; grid-row: auto; }
  .gr-body { padding: 10px 14px 28px; }
  .coin-wrap { width: min(300px, 82vw); }
}
@media (prefers-reduced-motion: reduce) { .rare, button.coin.hit, button.coin::after, .coin-halo, .save-indicator.flash, .gps, .rare::after { animation: none !important; } }