/* Fake Dungeon 3 — base look: palette, type, buttons, panels, bars */
@font-face { font-family: 'Cinzel'; font-weight: 900; font-display: swap; src: url(../fonts/cinzel-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url(../fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url(../fonts/nunito-latin-900-normal.woff2) format('woff2'); }

:root {
  --bg0: #060814; --navy0: #0c1126; --navy1: #131a3a; --navy2: #1d2756; --navy3: #2e3b7c; --line: #3b4a94;
  --gold0: #fff4cf; --gold1: #ffe08a; --gold2: #f2b93c; --gold3: #b87a1c; --gold4: #5e3a0a;
  --teal: #3ee0c5; --teal2: #1a9c8c; --red: #ff5d6c; --red2: #a81f38; --purple: #a05cff;
  --ink: #070a18; --text: #f6f1e1; --dim: #a7b0d2;
  --grain: url(../img/grain.png);
  --scratch: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px), repeating-linear-gradient(62deg, rgba(0,0,0,.07) 0 1px, transparent 1px 11px);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --tagh: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #02030a; color: var(--text); overflow: hidden; overscroll-behavior: none;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

#app { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; height: 100dvh; overflow: hidden; background: var(--bg0);
  box-shadow: 0 0 80px #000; isolation: isolate; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* purple prototype tag — always on */
#faketag { position: absolute; top: 0; left: 0; right: 0; z-index: 70; height: calc(var(--tagh) + var(--sat)); padding-top: var(--sat);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; letter-spacing: .08em; font-weight: 900;
  background: linear-gradient(180deg, #7a35e0, #4d1aa6); color: #f3e6ff; border-bottom: 1px solid #c79bff; text-shadow: 0 1px 0 #2a0a66; }
#faketag a { color: #ffe08a; text-decoration: underline; padding: 6px 2px; margin: -6px 0; }

.screen { position: absolute; inset: calc(var(--tagh) + var(--sat)) 0 0 0; display: none; flex-direction: column; overflow: hidden; }
.screen.on { display: flex; animation: scr-in .28s ease-out; }
@keyframes scr-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

/* outlined text that stays readable over art */
.ol { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.ol3 { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.title { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .04em; }
.gold-text { color: var(--gold1); }
.dim { color: var(--dim); }

/* ---- buttons: grained metal with a pressed lip ---- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 18px;
  border-radius: 12px; font-weight: 900; font-size: 16px; letter-spacing: .03em; color: #3a2204; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background: var(--grain), var(--scratch), linear-gradient(180deg, #fff0b0 0%, #f7c64c 38%, #e09a1f 62%, #b8741a 100%);
  background-blend-mode: overlay, normal, normal;
  border: 2px solid var(--gold4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(90,50,0,.45), inset 0 0 0 1px rgba(255,236,170,.5), 0 5px 0 #4a2c06, 0 9px 14px rgba(0,0,0,.55);
  transition: transform .07s, box-shadow .07s, filter .12s; overflow: hidden; }
.btn:active, .btn.down { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(90,50,0,.45), 0 1px 0 #4a2c06, 0 3px 6px rgba(0,0,0,.5); filter: brightness(.94); }
.btn.big { min-height: 64px; font-size: 21px; border-radius: 16px; padding: 8px 26px; font-family: 'Cinzel', serif; }
.btn.small { min-height: 44px; font-size: 14px; padding: 6px 12px; border-radius: 10px; }
.btn.teal { color: #032b28; background: var(--grain), var(--scratch), linear-gradient(180deg, #c5fff3 0%, #4fe6cc 38%, #1fae9c 64%, #137567 100%);
  border-color: #063f39; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,60,55,.5), 0 5px 0 #06332e, 0 9px 14px rgba(0,0,0,.55); }
.btn.red { color: #fff0f0; text-shadow: 0 1px 0 #5a0a1a; background: var(--grain), var(--scratch), linear-gradient(180deg, #ff9aa4 0%, #f0485c 40%, #c2263f 66%, #8c1830 100%);
  border-color: #4a0817; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(70,0,15,.5), 0 5px 0 #46091a, 0 9px 14px rgba(0,0,0,.55); }
.btn.stone { color: var(--text); text-shadow: 0 1px 0 #000; background: var(--grain), var(--scratch), linear-gradient(180deg, #5766b8 0%, #36428c 40%, #252e68 68%, #1a214c 100%);
  border-color: #0b0f26; box-shadow: inset 0 2px 0 rgba(190,205,255,.45), inset 0 -3px 0 rgba(0,0,20,.5), inset 0 0 0 1px rgba(140,160,255,.25), 0 5px 0 #090c20, 0 9px 14px rgba(0,0,0,.55); }
.btn.teal:active, .btn.red:active, .btn.stone:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 #05070f, 0 3px 6px rgba(0,0,0,.5); }
.btn[disabled], .btn.off { filter: grayscale(.85) brightness(.7); pointer-events: none; }
.btn .sub { display: block; font: 700 11px 'Nunito', sans-serif; letter-spacing: .04em; opacity: .85; margin-top: 1px; }
.btn .col { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.btn img.i { width: 26px; height: 26px; margin: -6px -2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.btn.shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ---- panels: navy slab, gold double trim, corner studs ---- */
.panel { position: relative; border-radius: 16px; padding: 14px;
  background: var(--grain), radial-gradient(120% 90% at 50% 0%, #2c3a80 0%, #18214c 55%, #0e1430 100%); background-blend-mode: overlay, normal;
  border: 2px solid var(--gold3);
  box-shadow: inset 0 0 0 2px #0a0e22, inset 0 0 0 3px rgba(255,224,138,.35), inset 0 12px 24px rgba(120,150,255,.08), 0 10px 26px rgba(0,0,0,.6); }
.panel.studs::before, .panel.studs::after { content: ''; position: absolute; top: 7px; width: 9px; height: 9px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold0), var(--gold2) 45%, var(--gold3)); box-shadow: 0 0 0 1px var(--gold4), 0 1px 2px #000; }
.panel.studs::before { left: 7px; } .panel.studs::after { right: 7px; }
.plate { background: var(--grain), linear-gradient(180deg, #232e63, #121838); background-blend-mode: overlay, normal; border: 1px solid #44539e;
  border-radius: 10px; box-shadow: inset 0 1px 0 rgba(170,190,255,.25), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.4); }
.ribbon { align-self: center; padding: 5px 26px 6px; font-family: 'Cinzel', serif; font-weight: 900; font-size: 17px; color: #3a2204; letter-spacing: .08em;
  background: var(--grain), linear-gradient(180deg, #ffe9a0, #eeb23a 55%, #b8791c); background-blend-mode: overlay, normal; border: 2px solid var(--gold4);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* ---- top bar ---- */
.topbar { position: relative; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px;
  background: linear-gradient(180deg, rgba(6,8,20,.92), rgba(6,8,20,.6) 70%, transparent); }
.lvl { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.lvl .badge { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: 900 17px 'Cinzel', serif; color: #3a2204; border-radius: 9px;
  transform: rotate(45deg) scale(.82); background: var(--grain), linear-gradient(135deg, #fff0b0, #f2b93c 55%, #b8741a); background-blend-mode: overlay, normal;
  border: 2px solid var(--gold4); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 6px rgba(0,0,0,.6); }
.lvl .badge b { transform: rotate(-45deg) scale(1.2); }
.lvl .who { min-width: 0; flex: 1; }
.lvl .who .n { font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpbar { height: 8px; margin-top: 3px; max-width: 110px; border-radius: 4px; background: #070a18; border: 1px solid #44539e; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(180deg, #a6fff0, #2bc4ad); transition: width .5s; }
.cur { position: relative; flex: none; display: flex; align-items: center; height: 30px; padding: 0 8px 0 27px; min-width: 62px; justify-content: flex-end;
  font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.cur img { position: absolute; left: -7px; top: -5px; width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.cur small { font-size: 9px; color: var(--dim); margin-left: 3px; font-weight: 700; }
.cur.pop { animation: curpop .35s; }
@keyframes curpop { 40% { transform: scale(1.18); filter: brightness(1.5); } }

/* ---- bottom nav ---- */
.nav { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 8px calc(8px + var(--sab));
  background: var(--grain), linear-gradient(180deg, #1c2554, #0b0f26); background-blend-mode: overlay, normal; border-top: 2px solid var(--gold3);
  box-shadow: 0 -1px 0 #0a0e22 inset, 0 -8px 20px rgba(0,0,0,.55); }
.nav button { position: relative; height: 56px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 5px;
  font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--dim); text-transform: uppercase;
  background: var(--grain), linear-gradient(180deg, #2a3570, #171e48); background-blend-mode: overlay, normal; border: 1px solid #3b4a94;
  box-shadow: inset 0 1px 0 rgba(170,190,255,.3), 0 3px 0 #070a18; transition: transform .07s; }
.nav button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(170,190,255,.2); }
.nav button img, .nav button svg { position: absolute; top: -9px; width: 44px; height: 44px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); transition: transform .15s; }
.nav button.on { color: #3a2204; background: var(--grain), linear-gradient(180deg, #fff0b0, #f2b93c 55%, #c98a22); background-blend-mode: overlay, normal; border-color: var(--gold4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #4a2c06; }
.nav button.on img, .nav button.on svg { transform: translateY(-5px) scale(1.14); }
.nav .dot { position: absolute; top: 2px; right: 8px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--red); border: 2px solid #fff; box-shadow: 0 0 8px var(--red); }

/* ---- bars ---- */
.bar { position: relative; height: 16px; border-radius: 5px; background: #05070f; border: 2px solid #05070f; box-shadow: 0 0 0 1px #5766b8, 0 2px 4px rgba(0,0,0,.6); overflow: hidden; }
.bar i, .bar u { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
.bar u { background: #fff; opacity: .85; transition: transform .6s .25s ease-out; }
.bar i { background: linear-gradient(180deg, #ffb0a8 0%, #f24a55 35%, #b81e3c 100%); transition: transform .14s; }
.bar.green i { background: linear-gradient(180deg, #c9ffb5 0%, #4fd857 35%, #1f9a3b 100%); }
.bar i::after { content: ''; position: absolute; inset: 1px 2px auto 2px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.45); }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 900; -webkit-text-stroke: 2.5px #05070f; paint-order: stroke fill; }

/* ---- modal sheets + toast ---- */
#modal { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(3,4,12,.72); backdrop-filter: blur(3px); }
#modal.on { display: flex; animation: fade .18s; }
#modal .row .btn { padding-left: 10px; padding-right: 10px; }
#modal .panel { width: 100%; max-width: 380px; max-height: 86%; overflow: auto; animation: pop .26s cubic-bezier(.2,1.5,.4,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
#toast { position: absolute; left: 50%; bottom: calc(96px + var(--sab)); z-index: 65; transform: translateX(-50%); padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 900;
  background: rgba(8,10,24,.94); border: 1px solid var(--gold3); color: var(--gold1); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
h2 { margin: 0 0 8px; font: 900 20px 'Cinzel', serif; color: var(--gold1); letter-spacing: .05em; text-align: center; }
p { margin: 6px 0; font-size: 14px; line-height: 1.35; }