/* Pixelify Sans (SIL Open Font License 1.1, see fonts/OFL.txt), bundled so the game works offline */
@font-face { font-family: 'Pixelify Sans'; src: url(fonts/pixelify-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; src: url(fonts/pixelify-latin-ext.woff2) format('woff2'); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ============ Olympus Survivors — pixel UI (navy & gold) ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0d0e1c; --panel: #14141a; --panel2: #1c1c24; --tile: #2a2a33; --tileh: #383844;
  --line: #4a5290; --gold: #e0b450; --gold2: #ffe08a; --text: #f4ecd8; --muted: #a9a7c8; --ok: #8fe07f; --bad: #ff7a6a;
  --px: 'Pixelify Sans', 'Courier New', monospace;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 11H6V1H16V8H10V5' fill='none' stroke='%23e0b450' stroke-width='2'/%3E%3Cpath d='M16 11H20' stroke='%23e0b450' stroke-width='2'/%3E%3C/svg%3E");
  font-size: clamp(14px, 0.55vw + 9px, 18px);
}
html, body {
  width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--px);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
  -webkit-font-smoothing: none;
}
button { font-family: var(--px); color: inherit; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
b { color: var(--gold2); font-weight: 700; }

/* ---------- Screens & panels ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(6, 6, 16, 0.6); overflow: auto;
}
#menu { background: radial-gradient(ellipse at center, rgba(6,6,16,0) 30%, rgba(6,6,16,0.75)); }
.panel {
  position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow: auto; text-align: center;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 3px solid var(--gold); padding: 30px 22px 20px;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #2a2a33, 10px 10px 0 6px rgba(0,0,0,.45), inset 0 0 0 3px #17171e;
}
.panel.wide { max-width: 980px; }
.panel.xl { max-width: 1180px; }
.panel.lu { max-width: 640px; }
.panel::before, .panel::after { content: ''; position: absolute; left: 10px; right: 10px; height: 12px; pointer-events: none; background: var(--meander) repeat-x; background-size: 20px 12px; opacity: .8; }
.panel::before { top: 7px; }
.panel::after { bottom: 5px; transform: scaleY(-1); }
.panel::-webkit-scrollbar { width: 10px; } .panel::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--panel); }
h1 {
  font-size: clamp(46px, 8.5vw, 104px); font-weight: 700; letter-spacing: 6px; line-height: .95; text-transform: uppercase;
  color: var(--gold2); text-shadow: 4px 4px 0 #b8701e, 8px 8px 0 #3a1e06, 0 0 40px rgba(255,200,90,.35);
}
h1 span { display: block; font-size: .42em; letter-spacing: .5em; padding-left: .5em; color: #fff; text-shadow: 3px 3px 0 #2a2a40, 6px 6px 0 rgba(0,0,0,.6); margin-top: 10px; }
.logo { animation: float 4s ease-in-out infinite; margin: 8px 0 14px; }
@keyframes float { 50% { transform: translateY(-6px); } }
h2 { font-size: clamp(24px, 3.2vw, 36px); color: var(--gold2); text-shadow: 3px 3px 0 #6a3a08, 5px 5px 0 rgba(0,0,0,.5); margin: 2px 0 10px; letter-spacing: 2px; }
h3 { font-size: 1rem; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin: 4px 0 8px; text-align: left; border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.tag, .sub { color: var(--muted); font-size: .95rem; line-height: 1.5; margin-bottom: 14px; }
.controls { color: var(--muted); font-size: .85rem; margin-top: 16px; text-shadow: 2px 2px 0 #000; }
.controls b { color: var(--text); }
.best { margin-top: 12px; font-size: .9rem; color: var(--gold); min-height: 1em; text-shadow: 2px 2px 0 #000; }
.menuwrap { width: 100%; max-width: 640px; text-align: center; position: relative; }
.menuwrap .tag { text-shadow: 2px 2px 0 #000; color: #d8d4f0; }
.mainnav { display: flex; flex-direction: column; gap: 4px; max-width: 380px; margin: 0 auto; }

/* ---------- Wallet & badges ---------- */
.wallet { font-size: 1.05rem; color: var(--gold2); display: inline-flex; align-items: center; gap: 6px; }
.wallet.top { position: absolute; top: 14px; right: 18px; z-index: 2; background: #0d0e1c; border: 2px solid var(--gold); box-shadow: 0 0 0 2px #000; padding: 3px 10px; }
.menuwrap .wallet.top { top: -10px; right: 0; }
.coin, .drach { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: 4px; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
.badge { display: inline-block; padding: 0 6px; margin-left: 6px; background: #c0392b; color: #fff; font-size: .75rem; line-height: 1.5; border: 2px solid #000; }

/* ---------- Buttons ---------- */
.btn {
  display: block; width: 100%; margin: 10px auto 0; padding: 12px 16px; font-size: 1.15rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #2a1606; background: linear-gradient(180deg, #ffe9a8 0 45%, #f0c050 45% 100%); border: 3px solid #000; cursor: pointer;
  box-shadow: inset -4px -4px 0 #b8801e, inset 4px 4px 0 #fff7d8, 0 4px 0 #000; touch-action: manipulation; position: relative;
  transition: transform .05s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: inset 4px 4px 0 #b8801e, 0 1px 0 #000; }
.btn.big { font-size: 1.35rem; padding: 14px 18px; }
.btn.alt { color: var(--text); background: linear-gradient(180deg, #4a4a58 0 45%, #383844 45% 100%); box-shadow: inset -4px -4px 0 #22222a, inset 4px 4px 0 #5a5a6a, 0 4px 0 #000; }
.btn.small { font-size: .9rem; padding: 9px 10px; }
.btn.danger { color: #ffb0a0; }
.btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.6); transform: none; }
.row { display: flex; gap: 12px; align-items: stretch; }
.row .btn { flex: 1; }
.row.foot { margin-top: 6px; }
#shopFoot { flex: 1; display: flex; }
#shopFoot:empty { display: none; }
#shopFoot .btn { margin-top: 10px; }
.tabs { display: flex; gap: 6px; justify-content: center; margin: 2px 0 10px; flex-wrap: wrap; }
.tabs button { background: var(--tile); color: var(--muted); border: 3px solid #000; padding: 7px 16px; font-size: .95rem; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.tabs button.on { background: var(--gold); color: #2a1606; box-shadow: inset 0 -3px 0 #b8801e, inset 0 3px 0 #ffe9a8; }

/* ---------- Tile grid + detail panel (heroes, shop) ---------- */
.split { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 14px; text-align: left; align-items: start; }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.tile {
  position: relative; background: var(--tile); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 8px 4px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 112px; touch-action: manipulation;
}
.tile:hover { background: var(--tileh); }
.tile.sel { box-shadow: inset 0 0 0 3px var(--gold2), 0 0 0 2px var(--gold); background: var(--tileh); }
.tile img { width: 48px; height: 48px; object-fit: contain; }
.tile img.port { width: 54px; height: 76px; }
.tile .tn { font-size: .78rem; line-height: 1.15; color: var(--text); }
.tile .tl { font-size: .72rem; color: var(--gold2); }
.tile .pips { font-size: .6rem; letter-spacing: 1px; color: var(--gold); }
.tile.locked img { filter: brightness(.35) grayscale(1); }
.tile.locked .tn { color: var(--muted); }
.tile.owned::after { content: '✔'; position: absolute; top: 2px; right: 5px; color: var(--ok); font-size: .8rem; }
.tile.maxed { box-shadow: inset 0 0 0 2px var(--ok); }
.tile.sel.maxed { box-shadow: inset 0 0 0 3px var(--gold2), 0 0 0 2px var(--gold); }
.detail {
  position: sticky; top: 0; background: #17171e; border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--gold); padding: 14px; min-height: 340px;
  display: flex; flex-direction: column; gap: 8px;
}
.detail .dhead { display: flex; gap: 12px; align-items: center; }
.detail .dimg { width: 84px; height: 84px; object-fit: contain; background: var(--panel2); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 4px; flex: none; }
.detail .dimg.port { width: 92px; height: 128px; }
.detail .dn { font-size: 1.35rem; color: var(--gold2); text-shadow: 2px 2px 0 #000; line-height: 1.1; }
.detail .dt { font-size: .85rem; color: var(--muted); }
.detail .dd { font-size: .95rem; line-height: 1.45; }
.detail .dbox { background: var(--panel2); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 8px; display: flex; gap: 8px; align-items: center; font-size: .85rem; line-height: 1.35; }
.detail .dbox img { width: 40px; height: 40px; flex: none; }
.detail .dbox small { color: var(--muted); display: block; }
.detail .lvl { color: var(--gold); letter-spacing: 3px; font-size: 1rem; }
.detail .price { font-size: 1.2rem; color: var(--gold2); margin-top: auto; }
.detail .note { font-size: .8rem; color: var(--muted); }
.detail .btn { margin-top: 4px; }
.recipe { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
.recipe img { width: 24px; height: 24px; }

/* ---------- Stage cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.cards.stages { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card {
  position: relative; background: var(--tile); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line), 5px 5px 0 rgba(0,0,0,.4); padding: 10px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.card:hover { background: var(--tileh); box-shadow: inset 0 0 0 3px var(--gold2), 5px 5px 0 rgba(0,0,0,.4); }
.card.locked { filter: saturate(.3) brightness(.7); }
.card .nm { font-size: 1.1rem; color: var(--gold2); text-shadow: 2px 2px 0 #000; }
.card .tt { font-size: .8rem; color: var(--muted); }
.card .ds { font-size: .85rem; margin-top: 6px; line-height: 1.35; }
.card .ds.dim { color: var(--muted); font-size: .8rem; }
.card .price { margin-top: 6px; font-size: .9rem; color: var(--gold2); }
.card.stage .prev { height: 120px; background-size: 100% 100%; image-rendering: pixelated; margin-bottom: 8px; border: 3px solid #000; position: relative; }
.card.stage .cleared { position: absolute; top: 6px; left: 6px; background: #3f8a3a; color: #fff; font-size: .75rem; padding: 1px 8px; border: 2px solid #000; }
.card.stage .walled { position: absolute; top: 6px; right: 6px; background: #6a3a8a; color: #fff; font-size: .75rem; padding: 1px 8px; border: 2px solid #000; }

/* ---------- Lists: achievements, codex ---------- */
#achList, #codexList { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; text-align: left; }
.quest, .crow { display: flex; gap: 12px; align-items: center; background: var(--tile); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 8px 12px; }
.quest.done { box-shadow: inset 0 0 0 2px var(--ok); background: #1f3a2a; }
.quest .aico { width: 44px; height: 44px; flex: none; }
.quest:not(.done) .aico { filter: grayscale(.8) brightness(.7); }
.quest .qt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.quest b, .crow b { font-size: 1rem; display: block; }
.quest span, .quest small { font-size: .82rem; color: var(--muted); }
.quest .bar { height: 8px; background: #000; border: 2px solid #000; }
.quest .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c99a3a, #ffe08a); }
.quest .rew { flex: none; font-size: .85rem; color: var(--gold2); text-align: right; max-width: 170px; }
.quest .rew.ok { color: var(--ok); }
.crow > img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.crow span { font-size: .85rem; color: #dcd8f0; line-height: 1.5; }
.crow small { color: var(--muted); }
.crow.dim { opacity: .55; }
.optlist { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }

/* ---------- Level-up choices ---------- */
.choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 6px; }
.choice {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--text); font: inherit;
  background: var(--tile); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line), 4px 4px 0 rgba(0,0,0,.4); padding: 10px 12px;
  touch-action: manipulation; animation: pop .25s steps(3) backwards;
}
.choice:nth-child(2) { animation-delay: .05s; } .choice:nth-child(3) { animation-delay: .1s; } .choice:nth-child(4) { animation-delay: .15s; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.choice:hover, .choice:focus-visible { background: var(--tileh); box-shadow: inset 0 0 0 3px var(--gold2), 4px 4px 0 rgba(0,0,0,.4); outline: none; }
.choice.evo { box-shadow: inset 0 0 0 3px #ffb030, 0 0 18px rgba(255,176,48,.5); background: #3a2a40; }
.choice.boon { box-shadow: inset 0 0 0 3px var(--rc), 4px 4px 0 rgba(0,0,0,.4); }
.choice.r-legendary { box-shadow: inset 0 0 0 3px #ffb020, 0 0 22px rgba(255,176,32,.55); }
.choice.sold { opacity: .4; }
.choice > img { width: 64px; height: 64px; flex: none; border: 2px solid #000; }
.choice .ctext { flex: 1; min-width: 0; }
.choice .ct { font-size: 1.1rem; color: var(--gold2); text-shadow: 2px 2px 0 #000; }
.choice .tag { font-size: .7rem; color: #1a0e04; background: var(--gold); padding: 1px 6px; margin-left: 8px; vertical-align: 2px; border: 2px solid #000; }
.choice .tag.new { background: var(--ok); }
.choice .tag.evo { background: linear-gradient(90deg, #ff9a3a, #ffe36b); }
.choice .cd { font-size: .9rem; color: #e4e0f4; margin-top: 3px; line-height: 1.35; }
.choice .key { font-size: .8rem; color: var(--muted); border: 2px solid var(--line); padding: 1px 7px; flex: none; }
.pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pair { display: inline-flex; align-items: center; gap: 2px; font-size: .75rem; color: var(--muted); background: #17171e; padding: 2px 6px; border: 2px solid #000; }
.pair img { width: 20px; height: 20px; }
.pair em { font-style: normal; margin-left: 4px; }
.pair.own { color: #c8f0c0; box-shadow: inset 0 0 0 1px var(--ok); }
.mprice { font-size: 1rem; color: var(--gold2); flex: none; }
.mprice.no { color: var(--bad); }
.buildbar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 8px; margin-top: 6px; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); }
.buildbar:empty { display: none; }
.buildbar .bi { position: relative; width: 36px; height: 36px; }
.buildbar .bi img { width: 36px; height: 36px; }
.buildbar .bi b { position: absolute; right: 1px; bottom: -2px; font-size: .7rem; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.buildbar .sep { width: 2px; background: var(--line); margin: 0 4px; }
@media (hover: none) { .choice .key { display: none; } }

/* ---------- Stats / results ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; margin: 6px 0; }
.statgrid { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: .9rem; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 10px 12px; }
.statgrid span:nth-child(even) { text-align: right; color: var(--gold2); }
.statgrid .rw { color: var(--muted); font-size: .85rem; }
.statgrid .tot { font-size: 1.05rem; border-top: 2px solid var(--line); padding-top: 6px; }
#overWeapons, #pauseBuild { display: flex; flex-direction: column; gap: 4px; }
.dmgrow { display: flex; align-items: center; gap: 10px; font-size: .88rem; background: var(--tile); border: 2px solid #000; padding: 4px 8px; }
.dmgrow img { width: 30px; height: 30px; }
.dmgrow img.mini { width: 20px; height: 20px; vertical-align: middle; }
.dmgrow span { flex: 1; }
.dmgrow small { color: var(--muted); }
.dmgrow small.ok { color: var(--ok); }
.dmgrow .bar { flex: 0 0 70px; height: 8px; background: #000; }
.dmgrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a3a, #ffe08a); }
.questready { color: var(--gold2); margin-top: 8px; min-height: 1em; font-size: .9rem; }
.achchip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; background: #17171e; padding: 2px 6px; margin: 2px; border: 2px solid #000; }
.achchip img { width: 18px; height: 18px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#xpbar { position: relative; height: 18px; background: #0a0a0e; border-bottom: 3px solid #000; box-shadow: 0 3px 0 rgba(224,180,80,.5); }
#xpfill { height: 100%; width: 0; background: linear-gradient(180deg, #a8e4ff 0 35%, #3a8ae0 35% 100%); }
#lvl { position: absolute; right: 10px; top: 0; font-size: .85rem; line-height: 18px; color: #fff; text-shadow: 2px 2px 0 #000; }
#hudrow { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 8px 0; gap: 8px; }
.hudbox { background: rgba(10,10,14,.72); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(224,180,80,.55); padding: 5px; }
#slots { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#wslots, #pslots { display: flex; gap: 3px; flex-wrap: wrap; }
.slot { position: relative; width: 34px; height: 34px; }
.slot img { width: 34px; height: 34px; display: block; }
.slot.empty { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 2px rgba(160,160,180,.35); }
.slot.evo img:first-child { filter: drop-shadow(0 0 3px #ffb030); }
.slot b { position: absolute; right: 1px; bottom: -1px; font-size: .65rem; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.slot img.pr { position: absolute; left: -3px; bottom: -3px; width: 14px; height: 14px; opacity: .5; border: 1px solid #000; }
.slot img.pr.own { opacity: 1; box-shadow: 0 0 0 1px var(--ok); }
.slot.ready img:first-child { animation: ready .8s steps(2) infinite; }
@keyframes ready { 50% { filter: drop-shadow(0 0 4px #ffb030) brightness(1.5); } }
#center { text-align: center; position: absolute; left: 50%; transform: translateX(-50%); top: calc(24px + env(safe-area-inset-top)); }
#timer { font-size: 2rem; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; letter-spacing: 2px; }
#stageName { font-size: .75rem; color: var(--gold2); text-shadow: 2px 2px 0 #000; }
#stats { display: flex; flex-direction: column; gap: 2px; margin-right: 46px; font-size: .95rem; min-width: 96px; }
#stats .stat { display: flex; align-items: center; gap: 6px; justify-content: flex-end; text-shadow: 2px 2px 0 #000; }
#stats .stat.dim { font-size: .75rem; color: var(--muted); }
.hico { width: 18px; height: 18px; }
#pausebtn {
  position: absolute; top: calc(26px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 40px; height: 40px;
  pointer-events: auto; background: #383844; color: var(--gold2); border: 3px solid #000; box-shadow: inset -3px -3px 0 #22222a, inset 3px 3px 0 #5a5a6a; font-size: 1rem; cursor: pointer;
}
#minimap { position: absolute; right: calc(8px + env(safe-area-inset-right)); top: calc(112px + env(safe-area-inset-top)); width: 120px; height: 120px; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(224,180,80,.55), 0 0 0 2px rgba(224,180,80,.4); }
#bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top)); width: min(560px, 60vw); text-align: center; }
#bossname { color: #ffb0a0; text-shadow: 2px 2px 0 #000; font-size: 1rem; letter-spacing: 1px; }
#bosshp { height: 14px; background: #1a0606; border: 3px solid #000; box-shadow: 0 0 0 2px #8a1a10; margin-top: 3px; }
#bossfill { height: 100%; width: 100%; background: linear-gradient(180deg, #ff8a6a 0 35%, #c0201a 35% 100%); }
#banner {
  position: absolute; left: 50%; top: 32%; width: 92%; transform: translate(-50%, -50%) scale(.92); text-align: center;
  font-size: clamp(20px, 3.6vw, 40px); color: var(--gold2); text-shadow: 3px 3px 0 #6a3a08, 5px 5px 0 rgba(0,0,0,.6);
  opacity: 0; transition: opacity .4s, transform .4s;
}
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#prompt { position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(10,10,14,.85); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000; padding: 8px 14px; text-align: center; min-width: 260px; max-width: 92vw; }
#prompt.deny { border-color: var(--bad); }
#promptText { font-size: .9rem; color: var(--text); }
#promptBar { height: 8px; background: #000; margin-top: 6px; border: 1px solid #000; }
#promptFill { height: 100%; width: 0; background: linear-gradient(90deg, #7ac8ff, #f3d98a); }
#toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(150px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 6; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 3px solid var(--gold2); box-shadow: 0 0 0 2px #000, 5px 5px 0 rgba(0,0,0,.5); padding: 6px 12px 6px 6px; animation: tin .3s steps(4); min-width: 280px; }
.toast.out { animation: tout .5s steps(4) forwards; }
.toast img { width: 44px; height: 44px; }
.toast small { display: block; font-size: .65rem; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; }
.toast b { display: block; font-size: 1rem; }
.toast span { font-size: .8rem; color: #c8f0c0; }
@keyframes tin { from { transform: translateY(-20px); opacity: 0; } }
@keyframes tout { to { transform: translateY(-20px); opacity: 0; } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .detail { position: static; min-height: 0; order: -1; }
  .tilegrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .tile { min-height: 96px; } .tile img.port { width: 42px; height: 60px; } .tile img { width: 40px; height: 40px; }
  .cols { grid-template-columns: 1fr; }
  .panel { --pt: 26px; --px: 12px; --pb: 16px; }
  .cards.stages { grid-template-columns: 1fr; }
  .wallet.top { position: static; margin-bottom: 4px; }
  .menuwrap .wallet.top { display: inline-flex; }
  #minimap { width: 84px; height: 84px; top: calc(100px + env(safe-area-inset-top)); }
  .slot, .slot img { width: 26px; height: 26px; }
  #timer { font-size: 1.5rem; }
  #stats { min-width: 0; font-size: .8rem; }
  .choice > img { width: 48px; height: 48px; }
}

/* ================= v5: bigger, clearer text · two currencies · unlock help · level-up fixes ================= */
:root { font-size: clamp(16px, 0.7vw + 10px, 22px); }
.sub, .tag { font-size: 1rem; }
.cur { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; white-space: nowrap; }
.cur.gold { color: #ffd84a; }
.cur.silver { color: #e4ecff; }
.cur small { font-size: .78em; color: #b8c4e0; font-weight: 400; margin-left: 3px; }
.coin, .drach { width: 1.35em; height: 1.35em; vertical-align: -.3em; margin-right: 5px; }
.wallet.top { padding: 5px 12px; border-color: #c8ccd8; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #3a4060; background: #101326; font-size: 1.1rem; }
/* level-up cards */
.choice { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
.choice > img { width: 72px; height: 72px; }
.choice .ct { font-size: 1.3rem; line-height: 1.25; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.choice .tag { display: inline-block; font-size: .78rem; line-height: 1.25; padding: 2px 8px; margin-left: 0; vertical-align: middle; text-transform: uppercase; letter-spacing: 1px; text-shadow: none; }
.choice .cd { font-size: 1.05rem; margin-top: 5px; color: #f0ecff; }
.choice .key { font-size: .95rem; padding: 2px 9px; }
.pairs { flex-basis: 100%; margin-top: 0; display: flex; flex-direction: column; gap: 6px; }
.pair { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: #dcd8f0; background: #0e1026; padding: 6px 10px; border: 2px solid #000; box-shadow: inset 0 0 0 2px #3a4070; flex-wrap: wrap; }
.pair img { width: 32px; height: 32px; }
.pair .pl { color: var(--gold); text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; min-width: 7.5em; }
.pair .op { color: var(--gold2); font-size: 1.1rem; }
.pair em { font-style: normal; color: #fff; margin-left: 6px; }
.pair .okk { font-style: normal; color: var(--ok); margin-left: auto; font-size: .85rem; }
.pair.own { box-shadow: inset 0 0 0 2px var(--ok); }
.panel.lu { max-width: 760px; }
.buildbar .bi, .buildbar .bi img { width: 42px; height: 42px; }
/* tiles & detail */
.tile .tn { font-size: .9rem; }
.tile .tl { font-size: .85rem; }
.tile img.port { width: 64px; height: 92px; }
.detail .dn { font-size: 1.6rem; }
.detail .dd { font-size: 1.05rem; }
.detail .dbox { font-size: .95rem; }
.detail .note { font-size: .9rem; }
.unlock { background: #1a1020; border: 2px solid #000; box-shadow: inset 0 0 0 2px #8a4a6a; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.unlock .uh { color: #ffb0c8; font-size: 1.05rem; }
.unlock .how { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.4; }
.unlock .hn { flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; background: var(--gold); color: #1a0e04; border: 2px solid #000; font-weight: 700; }
.unlock .or { text-align: center; color: var(--muted); font-size: .85rem; }
.unlock .bar { height: 8px; background: #000; margin-top: 5px; } .unlock .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c99a3a, #ffe08a); }
.unlock small { font-size: .85rem; color: var(--muted); }
small.ok { color: var(--ok) !important; } small.bad { color: var(--bad) !important; }
.lockreq { margin-top: 8px; font-size: .95rem; line-height: 1.4; background: #1a1020; border: 2px solid #000; box-shadow: inset 0 0 0 2px #8a4a6a; padding: 8px; color: #ffd8e4; }
.card .nm { font-size: 1.3rem; } .card .tt, .card .ds { font-size: .95rem; } .card .ds.dim { font-size: .9rem; }
/* lists */
.quest b, .crow b { font-size: 1.15rem; } .quest span, .crow span { font-size: .95rem; } .quest .rew { font-size: .95rem; }
.statgrid, .dmgrow { font-size: 1rem; }
/* HUD */
#stats { font-size: 1.15rem; min-width: 120px; }
#stats .stat.dim { font-size: .85rem; }
.hico { width: 24px; height: 24px; }
#timer { font-size: 2.3rem; }
#stageName { font-size: .9rem; }
#lvl { font-size: 1rem; }
#xpbar { height: 22px; } #lvl { line-height: 22px; }
.slot, .slot img { width: 40px; height: 40px; }
.slot b { font-size: .8rem; }
#promptText { font-size: 1.05rem; }
#bossname { font-size: 1.2rem; }
.btn { font-size: 1.25rem; } .btn.big { font-size: 1.45rem; } .btn.small { font-size: 1rem; }
@media (max-width: 760px) { .slot, .slot img { width: 30px; height: 30px; } #stats { font-size: .95rem; min-width: 0; } .choice > img { width: 54px; height: 54px; } .pair .pl { min-width: 0; } }
#minimap { top: calc(150px + env(safe-area-inset-top)); }
@media (max-width: 760px) { #minimap { top: calc(130px + env(safe-area-inset-top)); } }
/* Footer buttons stay reachable while long panels scroll */
.panel > .row.foot { position: sticky; bottom: -20px; z-index: 3; background: linear-gradient(180deg, rgba(20,20,26,0), var(--panel) 30%); padding: 14px 0 10px; margin-bottom: -10px; }
/* Phone HUD: timer below the top row, compact stats */
@media (max-width: 560px) {
  #center { top: calc(84px + env(safe-area-inset-top)); }
  #timer { font-size: 1.5rem; }
  #stageName { font-size: .75rem; }
  #stats { font-size: .9rem; padding: 4px 6px; margin-right: 44px; }
  #stats .stat.dim { display: none; }
  .hico { width: 18px; height: 18px; }
  #bossbar { top: calc(128px + env(safe-area-inset-top)); width: 84vw; }
  #bossname { font-size: .9rem; }
  #minimap { top: calc(84px + env(safe-area-inset-top)); width: 76px; height: 76px; }
  #banner { top: 36%; }
  #toasts { top: calc(170px + env(safe-area-inset-top)); }
  .toast { min-width: 0; max-width: 92vw; }
}
@media (max-width: 560px) { #bossbar { top: calc(168px + env(safe-area-inset-top)); } #toasts { top: calc(205px + env(safe-area-inset-top)); } }

/* ---- player name + leaderboard ---- */
.namebox { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px auto 10px; font-size: .95rem; color: var(--muted); }
.namebox input, .postbox input { font: inherit; font-family: var(--px); color: var(--text); background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line);
  padding: 6px 10px; width: 12em; max-width: 60vw; outline: none; }
.namebox input:focus, .postbox input:focus { box-shadow: inset 0 0 0 2px var(--gold); }
.postbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 4px; padding: 10px; background: #17171e;
  border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); }
.postbox .pscore { font-size: 1.1rem; color: var(--muted); }
.postbox .pscore b { color: var(--gold2); font-size: 1.35rem; margin-left: 6px; }
.postbox .pmsg { flex-basis: 100%; text-align: center; color: var(--gold2); min-height: 1.2em; font-size: .9rem; }
.lb { display: flex; flex-direction: column; gap: 3px; max-height: 58vh; overflow-y: auto; }
.lbrow { display: grid; grid-template-columns: 2.4em 40px minmax(6em, 1fr) 6.5em 9em 3em 5em 4.2em; align-items: center; gap: 8px; padding: 4px 8px;
  background: var(--tile); border: 2px solid #000; font-size: .9rem; }
.lbrow.head { background: none; border-color: transparent; color: var(--muted); font-size: .8rem; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.lbrow img { width: 36px; height: 54px; object-fit: contain; image-rendering: pixelated; margin: -10px 0 -8px; }
.lbrow .rk { color: var(--muted); text-align: right; }
.lbrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbrow .sc { color: var(--gold2); text-align: right; }
.lbrow.top0 { box-shadow: inset 0 0 0 2px #ffd84a; } .lbrow.top0 .rk { color: #ffd84a; }
.lbrow.top1 { box-shadow: inset 0 0 0 2px #d8dce8; } .lbrow.top1 .rk { color: #d8dce8; }
.lbrow.top2 { box-shadow: inset 0 0 0 2px #d08a4a; } .lbrow.top2 .rk { color: #d08a4a; }
.lbrow.me { background: #3a3a1e; }
@media (max-width: 700px) { .lbrow { grid-template-columns: 2em 32px 1fr 5.5em; } .lbrow .lbx { display: none; } }
.postbox .btn { width: auto; flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }

/* ---- treasures ---- */
.itembar { display: flex; flex-wrap: wrap; gap: 3px; max-width: 280px; margin-top: 4px; }
.itembar .it { position: relative; width: 26px; height: 26px; border: 2px solid #000; background: #17171e; }
.itembar .it img { width: 22px; height: 22px; image-rendering: pixelated; display: block; }
.itembar .it b { position: absolute; right: -3px; bottom: -5px; font-size: .62rem; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.itembar .r0 { box-shadow: inset 0 0 0 1px #d8d4c8; } .itembar .r1 { box-shadow: inset 0 0 0 1px #5aa8ff; }
.itembar .r2 { box-shadow: inset 0 0 0 1px #c070ff; } .itembar .r3 { box-shadow: inset 0 0 0 1px #ffb030; }
.tag.r-common { background: #8a867a; color: #fff; } .tag.r-rare { background: #2a6ac0; color: #fff; }
.tag.r-epic { background: #7a2ab0; color: #fff; } .tag.r-legendary { background: #d08a10; color: #fff; }

/* ---- keyboard menu selection (WASD / arrows + Enter / Space) ---- */
button:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; position: relative; z-index: 2; }
.btn:focus-visible { filter: brightness(1.18); }
.tile:focus-visible { box-shadow: inset 0 0 0 3px var(--gold2); outline-offset: 0; }

/* ---- story headers in realm select ---- */
.storyhead { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; padding: 8px 12px; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); }
.storyhead:first-child { margin-top: 0; }
.storyhead img { width: 40px; height: 40px; image-rendering: pixelated; }
.storyhead b { display: block; color: var(--gold2); font-size: 1.15rem; }
.storyhead span { color: var(--muted); font-size: .85rem; }
.storyhead em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.storyhead > div { text-align: left; }

/* ---- interface size option (scales menus and HUD; the game view is unaffected) ---- */
#hud, .screen { zoom: var(--ui, 1); }

/* ---- panel frame: gold only along the top and bottom; the meander bands stay pinned to the
   panel edges while its content scrolls (background layers don't scroll, unlike ::before/::after) ---- */
:root { --meanderB: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' shape-rendering='crispEdges'%3E%3Cg transform='matrix(1 0 0 -1 0 12)'%3E%3Cpath d='M0 11H6V1H16V8H10V5' fill='none' stroke='%23e0b450' stroke-width='2'/%3E%3Cpath d='M16 11H20' stroke='%23e0b450' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
/* footers: a lone Back button keeps a normal width */
.row.foot > .btn:only-child { flex: 0 1 320px; margin: 0 auto; }

/* ---- panel frame: gold only along the top and bottom. The meander bands are sticky strips at the
   start and end of the scrolling panel, so they stay on its edges (above the content) while it scrolls. ---- */
.panel { --pt: 30px; --px: 22px; --pb: 20px; padding: var(--pt) var(--px) var(--pb); border-left-color: #2a2a33; border-right-color: #2a2a33; }
.panel::before, .panel::after {
  content: ''; display: block; position: sticky; left: auto; right: auto; z-index: 4; pointer-events: none; opacity: 1; transform: none;
  margin-left: calc(-1 * var(--px)); margin-right: calc(-1 * var(--px));
}
.panel::before { top: calc(-1 * var(--pt)); height: 24px; margin-top: calc(-1 * var(--pt)); margin-bottom: calc(var(--pt) - 24px);
  background: var(--meander) left 10px top 7px / 20px 12px repeat-x, var(--panel2); }
.panel::after { bottom: calc(-1 * var(--pb)); height: var(--pb); margin-top: 0; margin-bottom: calc(-1 * var(--pb));
  background: var(--meanderB) left 10px bottom 4px / 20px 12px repeat-x, var(--panel); }
.panel > .row.foot { bottom: 0; margin-bottom: 0; padding-bottom: 4px; }
/* a lone Back button keeps a normal width */
.row.foot > .btn:only-child { flex: 0 1 320px; margin: 0 auto; }
@media (max-width: 760px) { .panel { --pt: 26px; --px: 12px; --pb: 16px; } }

/* ================= v7: icons everywhere · daily challenge · leaderboard filters · fates · cursed ================= */
/* stat chips: icon + value, green when it helps, red when it hurts */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; margin: 2px 4px 2px 0; border: 2px solid #000; font-size: .95rem; white-space: nowrap; }
.chip img { width: 24px; height: 24px; }
.chip.up { background: #1f3a24; color: #b8f0a8; box-shadow: inset 0 0 0 1px #4a8a3a; }
.chip.down { background: #3a1a1e; color: #ffb0a8; box-shadow: inset 0 0 0 1px #8a3a3a; }
.hstat { margin: 2px 0; }
.hstat.grow { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--gold2); }
.hstat.grow img { width: 24px; height: 24px; }
.hstat.grow small { color: var(--muted); }
.sico { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.statgrid span:nth-child(odd) { display: flex; align-items: center; }
/* map legend in the pause screen */
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.legend .lg { display: flex; gap: 8px; align-items: center; background: #17171e; border: 2px solid #000; padding: 4px 6px; }
.legend .lg img { width: 34px; height: 34px; flex: none; }
.legend .lg b { display: block; font-size: .9rem; }
.legend .lg small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.25; }
@media (max-width: 760px) { .legend { grid-template-columns: 1fr; } }
/* interaction prompt with an icon */
#prompt .prow { display: flex; align-items: center; gap: 10px; justify-content: center; }
#promptIco { width: 36px; height: 36px; flex: none; }
/* fates + cursed tags */
.choice .tag.fate { background: linear-gradient(90deg, #e8e0f0, #ffd040); }
.tag.r-cursed { background: #a0104a; color: #fff; }
.itembar .r4 { box-shadow: inset 0 0 0 1px #ff4a8a; }
.ctag, .rtag, .dtag { font-style: normal; font-size: .7rem; padding: 0 6px; border: 2px solid #000; color: #fff; vertical-align: 2px; }
.ctag { background: #a0104a; } .dtag { background: #3a6ab0; }
/* realm cards: boss thumbnails */
.card .ds .bthumb { display: inline-flex; flex-direction: column; align-items: center; margin: 2px 6px 0 0; vertical-align: top; max-width: 6.5em; }
.card .ds .bthumb img { height: 62px; image-rendering: pixelated; margin: -6px 0 -4px; }
.card .ds .bthumb small { font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.1; }
/* codex */
.crow.beast > img { width: 64px; height: 64px; }
.crow.realm > img { width: 120px; height: 58px; object-fit: cover; border: 2px solid #000; }
#codexList .storyhead { margin-top: 10px; }
/* daily challenge */
.dailybody { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 6px 0 4px; }
.dline { display: flex; gap: 12px; align-items: center; background: var(--tile); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 6px 10px; }
.dline img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.dline img.port { width: 42px; height: 60px; }
.dline img.dprev { width: 96px; height: 46px; object-fit: cover; border: 2px solid #000; }
.dline small { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; }
.dline b { display: block; font-size: 1.1rem; }
.dline span { font-size: .9rem; color: var(--muted); }
.dline.best { box-shadow: inset 0 0 0 2px var(--gold); }
#btnDaily .badge { background: #3a6ab0; }
/* leaderboard filters */
.lbfilters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: -4px 0 10px; }
.lbfilters button, .lbfilters label { background: var(--tile); color: var(--muted); border: 3px solid #000; padding: 5px 12px; font-size: .9rem; cursor: pointer; font-family: var(--px); display: inline-flex; align-items: center; gap: 6px; }
.lbfilters .on { background: var(--gold); color: #2a1606; }
.lbfilters select { font-family: var(--px); font-size: .9rem; background: #17171e; color: var(--text); border: 2px solid #000; padding: 2px 4px; max-width: 12em; }
.lbi { width: 16px !important; height: 16px !important; margin: 0 !important; vertical-align: -3px; }
.optnote { font-size: .85rem; color: var(--muted); margin: 8px 0 2px; line-height: 1.4; }

/* ================= v8: account, ads, privacy, mobile ================= */
.acct { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 4px auto 12px; }
.acct small { flex-basis: 100%; color: var(--muted); font-size: .85rem; text-shadow: 2px 2px 0 #000; }
.acct .who { font-size: 1.1rem; text-shadow: 2px 2px 0 #000; }
.acct .btn { width: auto; margin: 0; padding: 7px 16px; }
.gbtn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1f1f1f; border: 3px solid #000; box-shadow: 0 4px 0 #000; padding: 8px 18px; font: 600 1rem var(--px); cursor: pointer; touch-action: manipulation; }
.gbtn .g { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; font-weight: 700; border-radius: 50%; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.gbtn.big { font-size: 1.15rem; padding: 12px 22px; margin: 6px auto; }
.gbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.acctbody { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.acctbody .gbtn { align-self: center; }
.acctbody .note { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.acctbody .note a, .legal a { color: var(--gold2); }
.nlabel { font-size: 1rem; color: var(--gold); } .nlabel small { color: var(--muted); font-size: .8rem; }
.nrow { display: flex; gap: 8px; } .nrow .btn { width: auto; margin: 0; }
.nrow input { flex: 1; min-width: 0; font: 1.1rem var(--px); color: var(--text); background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 8px 10px; outline: none; }
.nrow input:focus { box-shadow: inset 0 0 0 2px var(--gold); } .nrow input:disabled { opacity: .6; }
.legal { margin-top: 10px; font-size: .85rem; color: var(--muted); text-shadow: 2px 2px 0 #000; }
.toast.msg { min-width: 0; max-width: 92vw; padding: 8px 14px; }
.adbox { display: flex; justify-content: center; margin: 6px 0; } .adbox .btn { width: auto; }
#revive .btn { max-width: 380px; }
.postbox .who { color: var(--muted); }
/* touch devices: bigger targets, no long-press menus */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .tabs button, .lbfilters button, .lbfilters label { min-height: 42px; }
  #pausebtn { width: 52px; height: 52px; font-size: 1.2rem; }
  .choice { min-height: 76px; }
  * { -webkit-touch-callout: none; }
}
a.btn { text-decoration: none; text-align: center; color: var(--text); }

/* cloud save */
.cloudbox { display: flex; flex-direction: column; gap: 3px; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px #3a6ab0; padding: 8px 12px; }
.cloudbox b { color: #9ad0ff; } .cloudbox span { font-size: .95rem; } .cloudbox small { color: var(--muted); font-size: .82rem; }
.cloudbox .btn { align-self: flex-start; width: auto; margin-top: 4px; }
.cpbody { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cpcard { display: flex; flex-direction: column; gap: 2px; background: var(--tile); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 8px 12px; }
.cpcard b { font-size: 1.15rem; color: var(--gold2); } .cpcard small { color: var(--muted); } .cpcard span { font-size: .95rem; }
.cpbody .btn { margin: 0 0 10px; }

/* ================= co-op ================= */
.coslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; }
@media (max-width: 760px) { .coslots { grid-template-columns: 1fr 1fr; } }
.coslot { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--tile); border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 10px 6px; min-height: 200px; }
.coslot.empty { justify-content: center; color: var(--muted); font-size: .85rem; text-align: center; }
.coslot.empty b { color: var(--muted); font-size: 1rem; }
.coslot.ready { box-shadow: inset 0 0 0 3px var(--pc), 0 0 14px var(--pc); }
.coslot small { color: var(--muted); font-size: .75rem; }
.coslot .cohero { display: flex; align-items: center; gap: 4px; }
.coslot .cohero img { width: 54px; height: 78px; image-rendering: pixelated; }
.coslot .cyc { background: var(--panel2); color: var(--gold2); border: 2px solid #000; width: 30px; height: 40px; font-size: 1rem; cursor: pointer; }
.coslot .hn { font-size: .95rem; }
.coslot .btn { margin-top: 2px; width: auto; padding: 6px 14px; }
kbd { font-family: var(--px); background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); padding: 0 5px; color: var(--gold2); }
#coop .btn small { font-size: .7em; text-transform: none; letter-spacing: 0; opacity: .8; }
#coop .note, .netbox .note { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.partybar { position: absolute; left: 8px; top: calc(118px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.partybar .pm { display: flex; gap: 6px; align-items: center; background: rgba(10,10,14,.78); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--pc); padding: 3px 8px 3px 3px; min-width: 150px; }
.partybar .pm.me { box-shadow: inset 0 0 0 2px var(--pc), 0 0 8px var(--pc); }
.partybar .pm.down { filter: grayscale(.8) brightness(.7); }
.partybar img { width: 24px; height: 34px; image-rendering: pixelated; }
.partybar b { display: block; font-size: .8rem; color: var(--pc); line-height: 1; }
.partybar small { display: block; font-size: .65rem; color: var(--muted); }
.partybar i { display: block; width: 100px; height: 5px; background: #300; margin-top: 2px; }
.partybar u { display: block; height: 100%; background: #d33; }
@media (max-width: 560px) { .partybar { top: calc(100px + env(safe-area-inset-top)); } .partybar .pm { min-width: 0; } .partybar i { width: 60px; } }
/* online */
.netbox { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.netcode { font: 700 2.6rem var(--px); letter-spacing: .35em; color: var(--gold2); text-align: center; background: #17171e; border: 3px solid #000; box-shadow: inset 0 0 0 2px var(--gold); padding: 6px 0 6px .35em; user-select: text; -webkit-user-select: text; }
.netcode.input { width: 100%; text-transform: uppercase; outline: none; }
.netplayers { display: flex; flex-direction: column; gap: 4px; }
.netplayer { display: flex; align-items: center; gap: 10px; background: var(--tile); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--pc, var(--line)); padding: 4px 10px; }
.netplayer img { width: 30px; height: 44px; image-rendering: pixelated; }
.netplayer b { color: var(--pc); } .netplayer span { flex: 1; } .netplayer em { font-style: normal; color: var(--muted); font-size: .85rem; }
.netplayer .cyc { background: var(--panel2); color: var(--gold2); border: 2px solid #000; width: 30px; height: 34px; cursor: pointer; }
.netstatus { color: var(--gold2); text-align: center; min-height: 1.3em; }
.waitnote { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); background: rgba(10,10,14,.85); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000; padding: 10px 18px; color: var(--text); font-size: 1.05rem; text-align: center; pointer-events: none; }
.netplayer .rdy { font-style: normal; font-size: .85rem; color: var(--muted); border: 2px solid #000; padding: 0 6px; background: #17171e; }
.netplayer .rdy.on { color: #1a3a12; background: var(--ok); }
#netReady.alt { color: var(--text); }

/* option sliders */
.optlist h3 { margin: 10px 0 2px; }
.slider { display: grid; grid-template-columns: 9.5em 1fr 3.6em; align-items: center; gap: 10px; background: linear-gradient(180deg, #4a4a58 0 45%, #383844 45% 100%); border: 3px solid #000;
  box-shadow: inset -4px -4px 0 #22222a, inset 4px 4px 0 #5a5a6a, 0 4px 0 #000; padding: 8px 12px; margin-top: 8px; color: var(--text); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; text-align: left; }
.slider b { text-align: right; color: var(--gold2); font-size: .95rem; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; touch-action: none; }
.slider input[type=range]:focus { outline: none; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); }
.slider input[type=range]::-moz-range-track { height: 10px; background: #17171e; border: 2px solid #000; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 24px; margin-top: -9px; background: linear-gradient(180deg, #ffe9a8 0 45%, #f0c050 45% 100%); border: 3px solid #000; box-shadow: inset -2px -2px 0 #b8801e; }
.slider input[type=range]::-moz-range-thumb { width: 14px; height: 20px; background: #f0c050; border: 3px solid #000; border-radius: 0; }
.slider:focus-within { box-shadow: inset 0 0 0 3px var(--gold2), 0 4px 0 #000; }
@media (max-width: 560px) { .slider { grid-template-columns: 1fr 3.2em; } .slider span { grid-column: 1 / -1; } }

/* controller / keyboard selection highlight */
.navsel { outline: 3px solid var(--gold2) !important; outline-offset: 2px; position: relative; z-index: 2; box-shadow: 0 0 0 6px rgba(255,224,138,.25), 0 0 18px rgba(255,224,138,.55) !important; }
.btn.navsel { filter: brightness(1.18); }
.choice.navsel, .card.navsel, .tile.navsel { background: var(--tileh); }
.choice.navsel::before { content: '▶'; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--gold2); font-size: 1.1rem; text-shadow: 2px 2px 0 #000; animation: navp .6s steps(2) infinite; }
.choice { position: relative; }
input[type=range].navsel { outline: none !important; box-shadow: none !important; }
.slider:has(.navsel) { box-shadow: inset 0 0 0 3px var(--gold2), 0 0 18px rgba(255,224,138,.55); }
@keyframes navp { 50% { transform: translate(4px, -50%); } }

/* weapon upgrade cards: rarity frame + rolled boosts */
.choice.wr-rare { box-shadow: inset 0 0 0 3px #5aaaff, 4px 4px 0 rgba(0,0,0,.4); }
.choice.wr-epic { box-shadow: inset 0 0 0 3px #c07aff, 0 0 14px rgba(192,122,255,.45); }
.choice.wr-legendary { box-shadow: inset 0 0 0 3px #ffb020, 0 0 22px rgba(255,176,32,.55); }
.chip.lvl { background: #1c1c24; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); padding-left: 8px; font-size: .82rem; }
/* health warning + report */
.warnbody { text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; line-height: 1.5; max-height: 52vh; overflow: auto; padding-right: 4px; }
.warnbody .warnsmall { color: var(--muted); font-size: .85rem; }
.lbrow .report { margin-left: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .85rem; padding: 0 2px; }
.lbrow .report:hover { color: var(--bad); }

/* drachmas chip on the main menu Shop button (where they are spent) */
.wallet.chip { margin-left: 8px; padding: 0 7px; font-size: .8rem; line-height: 1.6; letter-spacing: 0; vertical-align: middle; background: #101326; color: var(--gold2); border: 2px solid #000; box-shadow: inset 0 0 0 1px #c8ccd8; }
.wallet.chip .drach { width: 1em; height: 1em; }
/* auto-pick: the card about to be chosen */
.choice.autosel { animation: autosel .25s steps(2) infinite; box-shadow: 0 0 0 3px var(--gold2), 0 0 18px 4px rgba(255,224,138,.6); }
@keyframes autosel { 50% { filter: brightness(1.35); } }

/* ================= phones · foldables · tablets ================= */
/* notches and rounded corners: keep menus clear of them in landscape */
.screen { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
/* touch screens don't need the keyboard hint; they get their own */
@media (pointer: coarse) { .menuwrap .controls { display: none; } }

/* narrow portrait phones and folded foldables (cover screens down to ~340 px) */
@media (max-width: 560px) {
  .logo { margin: 2px 0 6px; }
  .menuwrap .tag { font-size: .85rem; margin: 4px 0 8px; }
  .mainnav { gap: 2px; }
  .panel.lu { --pt: 22px; --px: 10px; }
  .choice { padding: 8px 10px; gap: 8px; row-gap: 6px; }
  .choice > img { width: 52px; height: 52px; }
  .choice .ct { font-size: 1.1rem; gap: 6px; }
  .choice .cd { font-size: .92rem; margin-top: 2px; }
  .choice .key { display: none; }
  .pair { font-size: .7rem; padding: 1px 5px; } .pair img { width: 18px; height: 18px; }
  .buildbar { padding: 5px; } .buildbar .bi { width: 28px; height: 28px; }
}
@media (max-width: 380px) {
  :root { font-size: 15px; }
  .slot, .slot img { width: 27px; height: 27px; }
  #stats { margin-right: 40px; }
}

/* landscape phones: very little height, so go wide instead of tall */
@media (orientation: landscape) and (max-height: 520px) {
  :root { font-size: 15px; }
  .screen { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .panel { --pt: 18px; --px: 14px; --pb: 10px; padding: 18px 14px 10px; }
  .panel h2 { margin: 0 0 2px; }
  /* main menu: title on the left, buttons in two columns on the right */
  .menuwrap { max-width: 900px; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 18px; align-items: center; }
  .menuwrap > * { grid-column: 1; }
  .menuwrap > .mainnav { grid-column: 2; grid-row: 1 / span 6; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mainnav #btnPlay { grid-column: 1 / -1; }
  .mainnav .btn { min-height: 42px; padding-top: 6px; padding-bottom: 6px; font-size: 1rem; margin: 0; }
  .mainnav .btn.big { font-size: 1.25rem; }
  .logo { margin: 0 0 4px; }
  .menuwrap .tag { font-size: .8rem; margin: 2px 0 6px; }
  .menuwrap .best, .legal { font-size: .75rem; margin-top: 4px; }
  /* level-up: cards side by side */
  .panel.lu { max-width: 980px; }
  .panel.lu .sub { margin: 0 0 4px; font-size: .85rem; }
  .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 4px 0; }
  .choice { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; padding: 8px 10px; gap: 4px; min-height: 0; }
  .choice .pairs { flex-basis: auto; width: 100%; }
  .pair em, .pair .okk { display: none; }
  .choice > img { width: 40px; height: 40px; position: absolute; right: 8px; top: 8px; }
  .choice .ctext { padding-right: 44px; }
  .choice .ct { font-size: 1rem; gap: 4px; }
  .choice .tag { font-size: .65rem; padding: 1px 5px; }
  .choice .cd { font-size: .85rem; }
  .choice .key { display: none; }
  .pairs { gap: 3px; } .pair { font-size: .65rem; padding: 1px 4px; } .pair img { width: 16px; height: 16px; }
  .buildbar { padding: 4px; margin-top: 4px; } .buildbar .bi { width: 24px; height: 24px; }
  .btn.small { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  /* HUD */
  .slot, .slot img { width: 28px; height: 28px; }
  #hudrow { padding: 6px 6px 0; }
  #timer { font-size: 1.4rem; } #stageName { font-size: .7rem; }
  #center { top: calc(20px + env(safe-area-inset-top)); }
  #stats { font-size: .85rem; padding: 3px 6px; }
  #stats .stat.dim { display: none; }
  #minimap { width: 78px; height: 78px; top: calc(92px + env(safe-area-inset-top)); }
  #bossbar { top: calc(66px + env(safe-area-inset-top)); width: 46vw; }
  #bossname { font-size: .85rem; } #bosshp { height: 10px; }
  #toasts { top: calc(64px + env(safe-area-inset-top)); }
  .toast { min-width: 0; padding: 4px 10px 4px 4px; } .toast img { width: 32px; height: 32px; }
  #banner { top: 28%; font-size: 22px; }
  #prompt { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 5px 10px; }
  .partybar { top: calc(92px + env(safe-area-inset-top)); }
}

/* unfolded foldables and small tablets (≈ square, 600–900 px): roomy but not desktop-wide */
@media (min-width: 600px) and (max-width: 900px) and (min-height: 600px) {
  .panel.lu { max-width: 640px; }
  #minimap { width: 104px; height: 104px; }
}
/* tablets: touch targets a bit larger, menus centred with breathing room */
@media (pointer: coarse) and (min-width: 768px) and (min-height: 600px) {
  .mainnav { max-width: 440px; gap: 6px; }
  .slot, .slot img { width: 38px; height: 38px; }
  #pausebtn { width: 58px; height: 58px; }
}
/* medium-height screens (landscape tablets, 768 px laptops): tighter level-up cards so the buttons stay visible */
@media (min-height: 521px) and (max-height: 840px) {
  .panel.lu { padding-top: 22px; padding-bottom: 12px; }
  .panel.lu h2 { margin-bottom: 0; }
  .choices { gap: 6px; margin: 4px 0; }
  .choice { padding: 7px 12px; row-gap: 5px; }
  .choice > img { width: 54px; height: 54px; }
  .choice .ct { font-size: 1.15rem; }
  .choice .cd { font-size: .95rem; margin-top: 2px; }
  .pairs { gap: 4px; }
  .buildbar { padding: 4px; margin-top: 4px; }
}
@media (orientation: landscape) and (min-height: 521px) and (max-height: 840px) and (min-width: 900px) {
  .panel.lu { max-width: 1120px; }
  .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
  .choice { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; padding: 10px 12px; }
  .choice > img { position: absolute; right: 10px; top: 10px; width: 52px; height: 52px; }
  .choice .ctext { padding-right: 58px; min-height: 52px; }
  .choice .key { position: absolute; left: 8px; bottom: 6px; display: none; }
  .choice .pairs { flex-basis: auto; width: 100%; margin-top: auto; }
}

/* ================= run setup: Oaths + Trials of Olympus ================= */
.runsetup { text-align: left; background: #17171e; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); padding: 10px 12px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.rshead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rshead b { color: var(--gold2); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 1px; }
.rshead small { color: var(--muted); font-size: .8rem; }
.oaths { display: flex; flex-wrap: wrap; gap: 6px; }
.oath { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--tile); color: var(--text); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: inherit; font-size: .9rem; }
.oath img, .oath .oi { width: 26px; height: 26px; display: inline-grid; place-items: center; color: var(--muted); }
.oath.on { background: var(--tileh); box-shadow: inset 0 0 0 2px var(--gold2), 0 0 10px rgba(255,224,138,.4); color: var(--gold2); }
.oath.locked { opacity: .45; cursor: default; }
.rsdesc { margin: 0; font-size: .9rem; color: #e4e0f4; } .rsdesc b { color: var(--gold2); }
.trials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.trial { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 6px 10px; background: var(--tile); color: var(--text); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: inherit; }
.trial .ti { font-size: 1.5rem; line-height: 1; width: 1.4em; text-align: center; color: var(--muted); }
.trial b { font-size: .95rem; } .trial em { font-style: normal; color: #8fe07f; font-size: .8rem; } .trial small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; margin-top: 2px; }
.trial.on { background: #3a1e2a; box-shadow: inset 0 0 0 2px #ff7a5a, 0 0 12px rgba(255,110,80,.35); } .trial.on .ti { color: #ffb070; } .trial.on b { color: #ffd0b0; }
.rsbonus { margin: 0; text-align: right; color: #8fe07f; font-size: .9rem; } .rsbonus b { color: #b8ff9a; }
.ttag { font-style: normal; font-size: .8em; color: #ffb070; margin-left: 2px; }
@media (orientation: landscape) and (max-height: 520px) { .runsetup { padding: 6px 8px; gap: 4px; } .trial small { display: none; } .oath { font-size: .8rem; } }

/* ---------- local co-op: a HUD panel in each player's corner, minimap bottom centre ---------- */
#hud.localco #slots, #hud.localco #partybar { display: none !important; }
#hud.localco #stats { position: absolute; left: 50%; transform: translateX(-50%); top: calc(78px + env(safe-area-inset-top)); flex-direction: row; gap: 12px; margin: 0; min-width: 0; font-size: .9rem; padding: 3px 8px; }
#hud.localco #stats .stat.dim { display: flex; }
#hud.localco #bossbar { top: calc(112px + env(safe-area-inset-top)); }
#hud.localco #minimap { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom)); width: 110px; height: 110px; }
#hud.localco #prompt { bottom: calc(132px + env(safe-area-inset-bottom)); }
.pq { position: absolute; background: rgba(10,10,14,.74); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--pc); padding: 4px; max-width: min(300px, 38vw); pointer-events: none; }
.pq.q0 { left: calc(8px + env(safe-area-inset-left)); top: calc(30px + env(safe-area-inset-top)); }
.pq.q1 { right: calc(8px + env(safe-area-inset-right)); top: calc(74px + env(safe-area-inset-top)); }
.pq.q2 { left: calc(8px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); }
.pq.q3 { right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
.pq.down { filter: grayscale(.8) brightness(.75); }
.pqh { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.pqp { width: 22px; height: 32px; image-rendering: pixelated; }
.pqn b { display: block; font-size: .78rem; color: var(--pc); line-height: 1.1; white-space: nowrap; }
.pqn small { display: block; font-size: .65rem; color: var(--muted); }
.pqn i { display: block; width: 110px; height: 5px; background: #300; margin-top: 2px; }
.pqn u { display: block; height: 100%; background: #d33; }
.pqs { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 2px; }
.pq .slot, .pq .slot img { width: 26px; height: 26px; }
.pq .itembar { max-width: 100%; }
.pq .itembar .it { width: 20px; height: 20px; }
.pq .itembar .it img { width: 16px; height: 16px; }
@media (max-height: 560px) { .pq .slot, .pq .slot img { width: 20px; height: 20px; } .pq .itembar { display: none; } }
/* FPS counter */
#fps { position: fixed; left: calc(6px + env(safe-area-inset-left)); bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 60; font: 600 11px "Pixelify Sans", monospace; color: #9fe07f; background: rgba(0,0,0,.55); padding: 1px 5px; pointer-events: none; }
#fps.mid { color: #ffd86b; } #fps.bad { color: #ff7a6a; }
#fps.hidden { display: none; }
body:has(#hud.localco:not(.hidden)) #fps { left: 50%; transform: translateX(-50%); bottom: auto; top: calc(2px + env(safe-area-inset-top)); }
@media (min-width: 1200px) and (min-height: 700px) { .pq .slot, .pq .slot img { width: 32px; height: 32px; } .pqp { width: 28px; height: 40px; } .pqn b { font-size: .9rem; } .pqn i { width: 140px; height: 6px; } .pq .itembar .it { width: 24px; height: 24px; } .pq .itembar .it img { width: 20px; height: 20px; } }

/* ---------- skins ---------- */
.skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 8px; }
.skc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #23232c; border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--rc); color: #fff; cursor: pointer; font: inherit; }
.skc img { width: 38px; height: 58px; image-rendering: pixelated; }
.skc b { font-size: .7rem; line-height: 1.1; text-align: center; }
.skc small { font-size: .6rem; color: var(--rc); }
.skc.lock img { filter: brightness(0) opacity(.55); }
.skc.lock b { color: var(--muted); }
.skc.on { background: #383844; box-shadow: inset 0 0 0 2px var(--rc), 0 0 10px var(--rc); }
.skchest { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: rgba(10,10,14,.7); border: 2px solid #000; box-shadow: inset 0 0 0 2px #ffb030; padding: 8px 10px; width: 100%; }
.skci { font-size: 2rem; }
.skct { flex: 1 1 220px; } .skct b { display: block; color: var(--gold2); } .skct small { font-size: .7rem; color: var(--muted); }
.skcb { display: flex; flex-direction: column; gap: 4px; } .sknote { font-size: .65rem; color: var(--muted); max-width: 220px; }
.skinreveal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(5,4,12,.85); }
.skinreveal.hidden { display: none; }
.srbox { text-align: center; padding: 16px; }
.srcard, .srwin { width: 120px; height: 170px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #23232c; border: 3px solid #000; box-shadow: inset 0 0 0 3px var(--rc), 0 0 18px var(--rc); }
.srcard img, .srwin img { width: 76px; height: 116px; image-rendering: pixelated; }
.srwin { width: 160px; height: 220px; animation: srpop .5s ease-out; } .srwin img { width: 100px; height: 152px; }
@keyframes srpop { 0% { transform: scale(.3) rotateY(180deg); } 70% { transform: scale(1.1) rotateY(0); } 100% { transform: scale(1); } }
.srname { margin-top: 10px; font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 8px currentColor; }
.srres h2 { margin: 4px 0 10px; }
.srres .row { display: flex; gap: 8px; justify-content: center; }
.srres.hidden, .srcards.hidden { display: none; }
/* ---------- temple offerings ---------- */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.offer { display: flex; gap: 6px; align-items: center; text-align: left; padding: 5px 7px; background: #23232c; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(160,160,180,.4); color: #fff; font: inherit; cursor: pointer; }
.offer img { width: 28px; height: 28px; image-rendering: pixelated; }
.offer b { display: block; font-size: .75rem; } .offer small { display: block; font-size: .62rem; color: var(--muted); } .offer em { font-style: normal; font-size: .65rem; color: var(--gold2); }
.offer.on { background: #383844; box-shadow: inset 0 0 0 2px var(--gold), 0 0 8px rgba(224,180,80,.5); }
.rsbonus.bad b { color: var(--bad); }
.skchest { margin-bottom: 10px; } .skchest .btn { margin-top: 0; width: 100%; } .skcb { width: 100%; }
.skcb .btn .cur { color: inherit; } .skcb .btn .cur.silver { color: #2a1a00; text-shadow: none; }
@media (max-width: 700px) { .skc img { width: 30px; height: 46px; } .skgrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } }

/* ================= v1.0.7: Megabonk-style theme =================
   Charcoal glass panels with rounded corners, chunky outlined white text, bright rounded buttons,
   rarity colours (common / uncommon / rare / epic / legendary) on cards. Colours only: layout rules above stay. */
:root {
  --bg: #0e0e12; --panel: rgba(20,20,26,.94); --panel2: #1c1c24; --tile: #2a2a33; --tileh: #383844;
  --line: #4b4b5a; --gold: #ffc531; --gold2: #ffe066; --text: #ffffff; --muted: #b9b9c9; --ok: #6fe36a; --bad: #ff5a4f;
  --ol: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
  --ols: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  --rc-common: #d9d9e0; --rc-uncommon: #5fd35a; --rc-rare: #3fa2ff; --rc-epic: #b45cff; --rc-legendary: #ffb52e;
  --rad: 12px;
}
b { color: var(--gold2); }
.screen { background: rgba(4,4,8,.55); }
#menu { background: radial-gradient(ellipse at 30% 50%, rgba(4,4,8,0) 20%, rgba(4,4,8,.8)); }
.panel {
  background: var(--panel); border: 3px solid #000; border-radius: var(--rad);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 14px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  border-left-color: #000; border-right-color: #000;
}
.panel::before { background: var(--panel2); border-radius: var(--rad) var(--rad) 0 0; }
.panel::after { background: var(--panel2); border-radius: 0 0 var(--rad) var(--rad); }
.panel::-webkit-scrollbar-thumb { background: #555566; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.panel > .row.foot { background: linear-gradient(180deg, rgba(20,20,26,0), rgba(20,20,26,.97) 30%); }
h1 { color: #fff; text-shadow: var(--ol), 0 6px 0 #000, 0 10px 0 rgba(0,0,0,.35), 0 0 40px rgba(255,200,60,.35); }
h1 span { color: var(--gold2); text-shadow: var(--ol), 0 5px 0 #000; }
h2 { color: #fff; text-transform: uppercase; letter-spacing: 2px; text-shadow: var(--ol), 0 4px 0 #000, 0 6px 0 rgba(0,0,0,.35); }
h3 { color: var(--gold2); border-bottom-color: rgba(255,255,255,.12); text-shadow: var(--ols); }
.sub, .tag { color: var(--muted); }

/* buttons: rounded, outlined, a darker lip at the bottom */
.btn {
  color: #2a1400; border: 3px solid #000; border-radius: 10px; text-shadow: none;
  background: linear-gradient(180deg, #ffe066 0%, #ffc531 55%, #f39b16 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(150,60,0,.55), 0 4px 0 #000;
}
.btn:active { box-shadow: inset 0 3px 0 rgba(150,60,0,.4), 0 1px 0 #000; }
.btn.alt {
  color: #fff; text-shadow: var(--ols);
  background: linear-gradient(180deg, #4a4a58 0%, #383844 55%, #2c2c36 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.14), inset 0 -4px 0 rgba(0,0,0,.4), 0 4px 0 #000;
}
.btn.alt:hover { background: linear-gradient(180deg, #56566a 0%, #44444f 55%, #33333e 100%); }
.btn.big { background: linear-gradient(180deg, #8af06a 0%, #4fcf3c 55%, #2f9c26 100%); color: #fff; text-shadow: var(--ol);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,70,0,.5), 0 4px 0 #000; }
.btn.big:active { box-shadow: inset 0 3px 0 rgba(0,70,0,.4), 0 1px 0 #000; }
.btn[disabled] { filter: grayscale(.9) brightness(.7); }
.tabs button { border-radius: 9px; border: 3px solid #000; background: #2a2a33; color: var(--muted); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.tabs button.on { background: var(--gold); color: #2a1400; box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(150,60,0,.5); }
.badge { border-radius: 6px; background: #e8392b; }
.wallet { text-shadow: var(--ols); }

/* tiles, detail, cards, rows */
.tile, .card, .quest, .crow, .choice, .detail, .statgrid, .dmgrow, .buildbar, .runsetup, .offer, .oath, .trial, .lbrow, .toast, #prompt, .hudbox, .storyhead, .pair, .achchip {
  border-radius: 10px;
}
.tile { background: #2a2a33; border: 3px solid #000; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.tile:hover { background: #363642; }
.tile.sel { background: #3d3d4a; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--gold), 0 0 16px rgba(255,197,49,.45); }
.tile .tn { text-shadow: var(--ols); font-weight: 700; }
.detail { background: #17171e; box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.detail .dimg { background: radial-gradient(ellipse at 50% 85%, rgba(255,197,49,.35), rgba(255,197,49,0) 60%), #23232c; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.detail .dn { color: #fff; text-shadow: var(--ol), 0 3px 0 #000; text-transform: uppercase; }
.detail .dbox { background: #23232c; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.card { background: #2a2a33; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 5px 0 rgba(0,0,0,.4); }
.quest, .crow { background: #2a2a33; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.quest.done { background: #1f3322; box-shadow: inset 0 0 0 2px var(--ok); }
.quest .bar, .quest .bar i, .dmgrow .bar, .dmgrow .bar i { border-radius: 5px; }
.statgrid, .buildbar, .runsetup { background: #17171e; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.statgrid span:nth-child(even) { color: #fff; text-shadow: var(--ols); }

/* level-up cards: the rarity colours the whole card, like Megabonk */
.choice { --rc: var(--rc-common); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 26%, #22222a) 0%, #22222a 70%); border: 3px solid #000;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 70%, transparent), 0 4px 0 rgba(0,0,0,.45); }
.choice:hover, .choice:focus-visible, .choice.navsel { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 40%, #2c2c36) 0%, #2c2c36 75%);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--rc), 0 4px 0 rgba(0,0,0,.45); }
.choice.wr-uncommon, .choice.r-uncommon { --rc: var(--rc-uncommon); }
.choice.wr-rare, .choice.r-rare { --rc: var(--rc-rare); box-shadow: inset 0 0 0 2px var(--rc), 0 4px 0 rgba(0,0,0,.45); }
.choice.wr-epic, .choice.r-epic { --rc: var(--rc-epic); box-shadow: inset 0 0 0 2px var(--rc), 0 0 14px color-mix(in srgb, var(--rc) 45%, transparent); }
.choice.wr-legendary, .choice.r-legendary { --rc: var(--rc-legendary); box-shadow: inset 0 0 0 3px var(--rc), 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent); }
.choice.evo { --rc: #ff8a2a; box-shadow: inset 0 0 0 3px #ffb030, 0 0 22px rgba(255,150,40,.55); }
.choice > img { border-radius: 8px; background: rgba(0,0,0,.35); border: 2px solid #000; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); }
.choice .ct { color: #fff; text-shadow: var(--ol); text-transform: uppercase; letter-spacing: .5px; }
.choice .cd { color: #e8e8f0; text-shadow: 1px 1px 0 #000; }
.choice .tag { border-radius: 6px; text-shadow: none; }
.choice .key { border-radius: 6px; border-color: rgba(255,255,255,.2); }

/* HUD */
#xpbar { height: 16px; background: rgba(0,0,0,.7); border-bottom: 3px solid #000; box-shadow: none; }
#xpfill { background: linear-gradient(180deg, #9ff3ff 0 30%, #2fb6ff 30% 75%, #1a7fd0 75%); box-shadow: inset -2px 0 0 #fff; }
#lvl { left: 50%; right: auto; transform: translateX(-50%); font-weight: 700; text-shadow: var(--ol); letter-spacing: 1px; }
.hudbox { background: rgba(10,10,14,.6); border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
#timer { font-weight: 700; text-shadow: var(--ol), 0 4px 0 #000; }
#stageName { color: #fff; text-shadow: var(--ols); }
#stats .stat { text-shadow: var(--ols); font-weight: 700; }
#pausebtn { border-radius: 10px; background: #383844; color: #fff; box-shadow: inset 0 3px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.4); }
#minimap { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
#bosshp { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px #000; height: 18px; }
#bossname { color: #fff; text-shadow: var(--ol); text-transform: uppercase; font-weight: 700; }
#banner { color: #fff; text-shadow: var(--ol), 0 5px 0 #000; }
#hpbar { position: relative; height: 22px; min-width: 200px; margin-bottom: 4px; background: #2a0a0a; border: 2px solid #000; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
#hpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#hplag { background: #fff3e0; opacity: .8; }
#hpfill { background: linear-gradient(180deg, #ff9a8a 0 28%, #ee2b2b 28% 72%, #b31515 72%); box-shadow: inset -2px 0 0 rgba(255,255,255,.6); }
#hptxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: var(--ols); }
#hpbar.low { animation: hplow .6s steps(2) infinite; }
@keyframes hplow { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 10px 2px rgba(255,40,40,.7); } }
#hud.localco #hpbar { display: none; }
@media (max-width: 560px) { #hpbar { min-width: 140px; height: 18px; } #hptxt { font-size: .7rem; } }
.slot img, .slot.empty { border-radius: 6px; }

/* ---------- Realm select: maps · map + tiers · run modifiers ---------- */
.panel.realmpanel { max-width: 1240px; }
.realms { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(260px, 330px); gap: 12px; text-align: left; align-items: start; }
.storylist { display: flex; flex-direction: column; gap: 5px; max-height: 64vh; overflow: auto; padding: 2px; }
.mapbtn { display: flex; gap: 8px; align-items: center; padding: 6px 8px; background: #2a2a33; border: 3px solid #000; border-radius: 10px; color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.07); touch-action: manipulation; }
.mapbtn:hover { background: #363642; }
.mapbtn.sel { background: #3d3d4a; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--gold); }
.mapbtn img { width: 34px; height: 34px; flex: none; }
.mapbtn b { display: block; font-size: .85rem; color: #fff; text-shadow: var(--ols); line-height: 1.15; }
.mapbtn small { display: flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.mapbtn small i { width: 9px; height: 9px; border-radius: 3px; background: #15151b; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.mapbtn small i.on { background: var(--ok); }
.mapbtn.done b { color: var(--gold2); }
.realmview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rvart { position: relative; aspect-ratio: 2 / 1; background-size: 100% 100%; image-rendering: pixelated; border: 3px solid #000; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.14); overflow: hidden; }
.rvart.locked { filter: grayscale(.85) brightness(.55); }
.rvname { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); }
.rvname b { display: block; font-size: 1.6rem; color: #fff; text-transform: uppercase; text-shadow: var(--ol), 0 4px 0 #000; line-height: 1.05; }
.rvname small { color: #e6e6ee; font-size: .85rem; text-shadow: var(--ols); }
.rvbadges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; }
.bdg { font-size: .72rem; padding: 2px 8px; border: 2px solid #000; border-radius: 6px; color: #fff; text-shadow: var(--ols); }
.bdg.ok { background: #2f9c26; } .bdg.wall { background: #7a4a9a; } .bdg.dark { background: #2a2a40; }
.rvlock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.rvstory { display: flex; gap: 8px; align-items: center; }
.rvstory img { width: 30px; height: 30px; }
.rvstory b { display: block; font-size: .95rem; } .rvstory small { color: var(--muted); font-size: .78rem; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.tier { position: relative; padding: 8px 8px 7px; border: 3px solid #000; border-radius: 10px; background: #2a2a33; color: #fff; font: inherit; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 3px 0 rgba(0,0,0,.5); touch-action: manipulation; }
.tier b { display: block; font-size: 1rem; color: #fff; text-shadow: var(--ol); text-transform: uppercase; }
.tier small { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; line-height: 1.15; }
.tier i { position: absolute; top: 3px; right: 6px; font-style: normal; color: var(--ok); font-size: .8rem; text-shadow: var(--ols); }
.tier:hover { background: #363642; }
.tier.sel { background: linear-gradient(180deg, #ffe066, #f3a518); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 2px #fff, 0 3px 0 #000; }
.tier.sel small { color: #3a1e00; }
.tier.locked { filter: grayscale(1) brightness(.6); }
.rvnote { font-size: .75rem; color: var(--muted); margin: 0; }
.rvrows { display: flex; flex-direction: column; gap: 4px; background: #17171e; border-radius: 10px; padding: 8px 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.rvrow { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.rvrow > span { flex: 0 0 5.5em; color: var(--muted); text-transform: uppercase; font-size: .75rem; letter-spacing: 1px; }
.rvrow .diff { color: #ff6a4f; letter-spacing: 2px; } .rvrow .diff em { color: var(--muted); font-style: normal; letter-spacing: 0; font-size: .8rem; }
.rvbosses { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rvbosses .bthumb { display: inline-flex; flex-direction: column; align-items: center; max-width: 6.5em; }
.rvbosses .bthumb img { height: 54px; image-rendering: pixelated; margin: -4px 0 -2px; }
.rvbosses .bthumb small { font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.1; }
.realmview .lockreq { margin: 0; }
.rsside { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rstabs { margin: 0; justify-content: stretch; flex-wrap: nowrap; }
.rstabs button { flex: 1; padding: 6px 6px; font-size: .8rem; position: relative; }
.rstabs button em { font-style: normal; margin-left: 5px; padding: 0 5px; border-radius: 5px; background: #e8392b; color: #fff; font-size: .7rem; text-shadow: none; }
.rsside .runsetup { margin: 0; max-height: 58vh; overflow: auto; }
.rsside .offers, .rsside .trials { grid-template-columns: 1fr; }
.rssec { display: flex; flex-direction: column; gap: 6px; }
#stages .row.foot .btn.big { flex: 1.4; }
@media (max-width: 1050px) {
  .realms { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); }
  .rsside { grid-column: 1 / -1; }
  .rsside .runsetup { max-height: none; }
  .rsside .offers { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .rsside .trials { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 700px) {
  .realms { grid-template-columns: 1fr; }
  .storylist { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .mapbtn { flex: 0 0 auto; max-width: 190px; }
  .rvname b { font-size: 1.2rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .realms { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(220px, 280px); gap: 8px; }
  .rsside { grid-column: auto; }
  .storylist, .rsside .runsetup { max-height: 52vh; }
  .rvart { aspect-ratio: 2.6 / 1; }
  .rvnote, .rvstory { display: none; }
  .tier { padding: 4px; } .tier small { display: none; }
  .rvbosses .bthumb img { height: 36px; }
}
.choice.wr-cursed { --rc: #ff4a8a; box-shadow: inset 0 0 0 3px var(--rc), 0 0 18px rgba(255,74,138,.5); }
/* hero select: a big hero on a lit pedestal, like a character screen */
#heroDetail .dimg.port { width: 132px; height: 184px; padding: 8px 10px 14px; }
#heroDetail .dhead { align-items: flex-end; }
#heroDetail .dn { font-size: 1.6rem; }
@media (max-width: 760px) { #heroDetail .dimg.port { width: 92px; height: 128px; } #heroDetail .dn { font-size: 1.3rem; } }
html, body, button, input { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
.storylist, .rsside .runsetup { scrollbar-width: thin; scrollbar-color: #555566 transparent; } .storylist::-webkit-scrollbar, .rsside .runsetup::-webkit-scrollbar { width: 6px; height: 6px; } .storylist::-webkit-scrollbar-thumb, .rsside .runsetup::-webkit-scrollbar-thumb { background: #555566; border-radius: 4px; } .storylist::-webkit-scrollbar-track, .rsside .runsetup::-webkit-scrollbar-track { background: transparent; }
/* main menu on short desktop/laptop windows: everything fits without scrolling */
@media (min-width: 700px) and (max-height: 1100px) {
  #menu .logo { margin: 0 0 6px; }
  #menu h1 { font-size: clamp(38px, 7.5vh, 84px); }
  #menu h1 span { margin-top: 4px; }
  #menu .tag { margin-bottom: 6px; font-size: .85rem; line-height: 1.35; }
  #menu .mainnav { gap: 2px; }
  #menu .mainnav .btn { margin-top: 5px; padding: 7px 14px; font-size: 1rem; }
  #menu .mainnav .btn.big { padding: 9px 14px; font-size: 1.15rem; }
  #menu .best { margin-top: 6px; }
  #menu .controls { margin-top: 6px; }
}
@media (min-width: 700px) and (max-height: 760px) { #menu .tag, #menu .controls { display: none; } }
/* v1.0.12: mastery, run card, realm event chip */
.mastbox { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; text-align: left; }
.mastbox:empty { display: none; }
.mrow { display: flex; gap: 10px; align-items: center; background: #17171e; border-radius: 10px; padding: 6px 10px; box-shadow: inset 0 0 0 2px rgba(255,197,49,.35); }
.mrow img.port { width: 34px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.mtx { flex: 1; min-width: 0; } .mtx b { display: block; font-size: .95rem; color: #fff; text-shadow: var(--ols); }
.mtx small { display: block; font-size: .78rem; color: var(--muted); } .mtx small em { font-style: normal; color: var(--ok); }
.mtx i, .mastdet i { display: block; height: 8px; margin-top: 4px; background: #000; border-radius: 5px; overflow: hidden; }
.mtx i u, .mastdet i u { display: block; height: 100%; background: linear-gradient(90deg, #ffc531, #ffe066); text-decoration: none; }
.mastdet { background: #23232c; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,197,49,.25); padding: 8px; font-size: .85rem; }
.mastdet .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mastdet .mh small { color: var(--muted); font-size: .75rem; }
.mrw { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.mrw span { font-size: .68rem; padding: 1px 6px; border-radius: 5px; background: #15151b; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mrw span.on { background: #24401f; color: #b8ff9a; box-shadow: inset 0 0 0 1px var(--ok); }
.mrw span.next { color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
.mnote { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; }
.tile .mbadge { position: absolute; top: 3px; left: 4px; font-size: .62rem; padding: 0 4px; border-radius: 4px; background: #ffc531; color: #2a1400; font-weight: 700; }
.cardmodal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(4,4,8,.8); }
.cardmodal img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.15); image-rendering: auto; -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
#evchip { margin-top: 4px; display: inline-block; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: var(--ols); background: rgba(10,10,14,.7); border: 2px solid #ffe066; border-radius: 8px; padding: 1px 10px; animation: evp 1.2s ease-in-out infinite; }
@keyframes evp { 50% { box-shadow: 0 0 12px rgba(255,220,120,.6); } }

/* Game version, bottom-right corner of the main menu (clear of the menu's own links) */
#menu .ver { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); margin: 0; font-size: .75rem; color: var(--muted); text-shadow: 2px 2px 0 #000; }
/* screens taller than the window scroll from the top instead of losing their top edge */
.screen { align-items: safe center; justify-content: safe center; }