.arcade-section { padding-block: 36px 76px; scroll-margin-top: 20px; }
.arcade-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.arcade-heading h2 { font-size:clamp(38px,4.4vw,64px); margin:0; }
.arcade-heading > p { color:#b1bdbc; font-size:14px; line-height:1.7; margin:0 0 5px; }
.arcade-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.arcade-card { min-width:0; overflow:hidden; border:1px solid #a3c1cc30; background:linear-gradient(140deg,#1c282e,#0e171b); border-radius:14px; }
.arcade-art { position:relative; overflow:hidden; background:#102124; }
.arcade-art img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .7s; }
.arcade-card:hover .arcade-art img { transform:scale(1.035); }
.arcade-art::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#172126); pointer-events:none; }
.arcade-tag { position:absolute; left:24px; top:22px; padding:8px 10px; color:#e2eeea; background:#071417b8; border:1px solid #cee7e323; border-radius:4px; font-size:9px; font-weight:600; letter-spacing:1.5px; }
.arcade-number { position:absolute; right:22px; top:12px; color:#ecffe91f; font:700 62px Oswald,sans-serif; }
.arcade-card-copy { padding:26px 28px 28px; }
.arcade-card-copy h3 { font-size:34px; margin-bottom:12px; }
.arcade-card-copy p { color:#b7c3c3; font-size:14px; line-height:1.8; max-width:40em; min-height:76px; margin-bottom:24px; }
.arcade-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.arcade-card-bottom .primary { min-height:48px; padding:12px 22px; font-size:14px; }
.arcade-best { color:#b4c9c2; font-size:11px; font-variant-numeric:tabular-nums; }
.arcade-card-runner .primary { background:linear-gradient(120deg,#a5d4af,#75ad94); color:#0c241b; border-color:#ccebd3; box-shadow:0 6px 24px #68a88c18; }
.arcade-board { margin-top:24px; padding:28px; }
.arcade-board-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.arcade-board-heading .eyebrow { font-size:9px; letter-spacing:2.6px; margin-bottom:7px; }
.arcade-board h3 { margin-bottom:0; font-size:30px; }
.arcade-board-tabs { display:flex; padding:4px; border:1px solid #ffffff1f; border-radius:8px; background:#08101380; }
.arcade-board-tabs button { padding:11px 20px; font-size:12px; border-radius:5px; }
.arcade-board-tabs button[aria-pressed="true"] { background:#334342; color:#fff4e3; }
.arcade-board-table { margin-top:25px; }
.arcade-board table { width:100%; border-collapse:collapse; font-size:13px; }
.arcade-board th { font-weight:400; color:#94a6a9; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; text-align:left; padding:12px; }
.arcade-board td { padding:15px 12px; border-top:1px solid #ffffff12; overflow-wrap:anywhere; }
.arcade-board td:first-child { width:78px; color:#9aadae; }
.arcade-board td:last-child,.arcade-board th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.arcade-board tbody tr:first-child td:first-child { color:#ffc873; }
.arcade-player-kind { display:inline-block; font-size:9px; color:#98b0a8; margin-left:10px; border:1px solid #8eb6a32b; border-radius:3px; padding:2px 5px; vertical-align:middle; }
.arcade-board-foot { border-top:1px solid #ffffff12; margin-top:9px; padding-top:15px; display:flex; justify-content:space-between; gap:24px; }
.arcade-board-foot p { font-size:11px; color:#a0b1b3; line-height:1.8; margin:0; }
.arcade-board-foot p:last-child { max-width:550px; }
.arcade-board-foot a { color:#e4eddc; text-decoration:underline; text-underline-offset:3px; }
.arcade-notice { font-size:13px; color:#dec6a6; }
.arcade-notice:empty { display:none; }
/* Game typography scales with the display, independently of the homepage. */
body.arcade-open { overflow:hidden; }
#arcade-dialog {
 --game-copy:clamp(16px,.95vw,20px); --game-hint:clamp(14px,.8vw,18px);
 --game-small:clamp(13px,.7vw,16px); --game-skill-title:clamp(16px,.9vw,20px);
 padding:0; margin:auto; width:min(1440px,96vw); max-width:100vw; max-height:96dvh;
 border:1px solid #6e959451; border-radius:15px; background:#0c1519; color:#f7efdf;
 overflow:auto; box-shadow:0 30px 130px #000b; font-size:var(--game-copy); font-weight:600; line-height:1.45;
}
#arcade-dialog::backdrop { background:#030a10dc; backdrop-filter:blur(10px); }
#arcade-dialog[open] { display:flex; }
#arcade-dialog .game-shell { width:100%; height:min(1100px,96dvh); display:flex; flex-direction:column; min-height:0; }
#arcade-dialog button { font-weight:700; }
.game-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 24px; flex-shrink:0; }
.game-toolbar > div:first-child { min-width:0; }
.game-brand { font-size:var(--game-small); font-weight:700; color:#adc5c2; letter-spacing:2px; }
.game-toolbar h2 { font-size:clamp(28px,1.7vw,38px); font-weight:700; line-height:1.15; margin:5px 0 0; letter-spacing:0; }
.game-toolbar-actions { display:flex; gap:10px; flex-shrink:0; }
.game-toolbar-actions button { border:1px solid #ffffff42; background:#1c2b3080; border-radius:7px; width:44px; height:44px; font-size:26px; line-height:1; }
.game-toolbar-actions button:hover { background:#314541; }
.game-stage { position:relative; min-height:240px; overflow:hidden; background:#101c1f; flex:1; }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-4px; }

/* Health, score and progress remain legible against a moving scene. */
.game-hud { position:absolute; inset:0 0 auto; padding:18px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:16px; pointer-events:none; background:linear-gradient(#041014e6,transparent); font-size:var(--game-copy); font-weight:700; font-variant-numeric:tabular-nums; text-shadow:0 2px 5px #000; }
.game-hud strong { font:700 clamp(34px,2.2vw,48px)/1.15 Oswald,sans-serif; text-align:center; }
.game-hud > span:last-child { text-align:right; padding-top:7px; }
.game-vitals { width:210px; max-width:100%; min-width:0; }
#game-hud-left { font-size:var(--game-hint); font-weight:700; letter-spacing:.5px; }
.game-health { margin-top:7px; padding:8px 10px 10px; border:1px solid #9ccc9d70; border-radius:7px; background:#081b19e0; box-shadow:0 4px 16px #0002; }
.game-health-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; color:#e6f5e1; font-size:var(--game-hint); font-weight:700; }
#game-health-value { white-space:nowrap; }
#game-health-meter { display:block; width:100%; height:11px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:#07110f; }
#game-health-meter::-webkit-progress-bar { background:#07110f; }
#game-health-meter::-webkit-progress-value { background:linear-gradient(90deg,#459b70,#b0ef91); }
#game-health-meter::-moz-progress-bar { background:#9be58d; }
.game-health.is-low { border-color:#f09c7699; background:#2c1313e8; }
.game-health.is-low #game-health-meter::-webkit-progress-value { background:linear-gradient(90deg,#d95743,#ffc581); }
.game-health.is-low #game-health-meter::-moz-progress-bar { background:#f78b64; }
.game-health.is-dead { border-color:#cc776778; opacity:.8; }
.game-status-strip { position:absolute; left:24px; right:24px; bottom:16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; pointer-events:none; font-size:var(--game-hint); font-weight:700; text-shadow:0 1px 4px #000; }
#game-mode-label { color:#d1e2c6; letter-spacing:1px; font-size:var(--game-small); }
#game-detail { text-align:right; color:#e1f2ee; }
#game-progress { grid-column:1/-1; width:100%; height:6px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:#111d22d9; }
#game-progress::-webkit-progress-bar { background:#111d22d9; }
#game-progress::-webkit-progress-value { background:linear-gradient(90deg,#668d8b,#a8e8c7); }
#game-progress::-moz-progress-bar { background:#a8e8c7; }

/* Auto margins centre short panels; tall results start at the scrollable top. */
.game-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:24px; background:#091519d9; backdrop-filter:blur(6px); overflow:auto; overscroll-behavior:contain; }
.game-overlay[hidden],#arcade-dialog [hidden],.arcade-section [hidden] { display:none; }
.game-overlay-card { width:100%; max-width:660px; text-align:center; margin:auto; flex-shrink:0; }
.game-overlay-card .eyebrow { font-size:var(--game-small); font-weight:700; letter-spacing:1.8px; }
.game-overlay-card h3 { font-size:clamp(34px,3vw,54px); font-weight:700; line-height:1.15; margin:12px 0 16px; }
.game-overlay-card > p:not(.eyebrow) { font-size:var(--game-copy); font-weight:600; line-height:1.6; color:#d6e3df; }
.game-overlay-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:24px; }
.game-overlay-actions .primary,.game-overlay-actions .secondary { min-height:48px; padding:12px 24px; font-size:var(--game-copy); }
.game-overlay-actions .text-link { font-size:var(--game-copy); }
#game-result-status { color:#c9e6bb; font-size:var(--game-hint); font-weight:600; min-height:22px; }
#game-name-form { margin-top:18px; text-align:left; }
#game-name-form label { display:block; font-size:var(--game-copy); font-weight:600; margin-bottom:8px; }
#game-name-form > div { display:flex; gap:10px; }
#game-name-form input { min-width:0; width:100%; background:#081217; border:1px solid #71918b; border-radius:5px; padding:11px 13px; color:#fff; font-size:16px; }
#game-name-form button { padding:10px 16px; font-size:var(--game-hint); }
#game-name-form small { display:block; color:#b8cec5; margin-top:8px; font-size:var(--game-small); }
#game-breakdown { font-size:var(--game-hint); font-weight:600; color:#c6dfd2; }

/* Confirmed arcade rewards share the Fortune wallet. */
.game-overlay-card > .game-reward-rules { font-size:var(--game-hint); color:#decba5; margin:12px 0 0; }
.game-reward { margin-top:16px; padding:16px 18px; border:1px solid #d8b66c75; border-radius:10px; background:radial-gradient(ellipse at top left,#b47c2929,transparent 80%),#20291f; text-align:left; }
.game-reward-heading { display:flex; align-items:center; gap:10px; }
.game-coin-mark { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border:2px solid #efcd7a; border-radius:50%; background:#967033; color:#fff0bb; font:700 18px/1 Oswald,sans-serif; box-shadow:inset 0 0 0 2px #372c16; }
.game-reward h4 { margin:0; font:700 clamp(20px,1.2vw,26px)/1.2 Oswald,sans-serif; color:#f4dfac; }
#game-reward-earned { margin-left:auto; color:#ffe39a; font:700 clamp(28px,1.8vw,38px)/1 Oswald,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; }
.game-reward p { margin:7px 0 0; font-size:var(--game-hint); font-weight:600; line-height:1.5; color:#e5dfc9; }
.game-reward #game-reward-message { color:#f2dfa9; }
.game-reward-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }
.game-reward-links a { display:inline-block; color:#ffdf91; font-size:var(--game-hint); font-weight:700; line-height:1.5; text-decoration:underline; text-underline-offset:3px; padding-block:4px; }
.game-reward-links a:focus-visible { outline:2px solid #ffe4a5; outline-offset:4px; border-radius:2px; }

/* Ability deck and touch controls. */
.game-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 20px; padding:14px 24px; flex-shrink:0; }
.game-controls > p { grid-column:1/-1; font-size:var(--game-hint); font-weight:600; color:#c7d8d8; margin:0; line-height:1.5; }
.game-skills { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:1080px; width:100%; }
.game-skill { --skill-glow:#387d8540; position:relative; overflow:hidden; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:1fr auto; align-items:center; gap:4px 10px; border:1px solid #91b7bf80; border-radius:9px; padding:12px; min-width:0; min-height:84px; background:radial-gradient(ellipse at 0 0,var(--skill-glow),transparent 85%),#15232c; box-shadow:inset 0 1px #ffffff0b,0 3px 8px #0002; text-align:left; touch-action:none; user-select:none; }
.game-skill::after { content:""; position:absolute; z-index:2; inset:auto 0 0; height:var(--cooldown,0%); background:#02080a9e; pointer-events:none; }
.game-skill > * { position:relative; z-index:3; }
.game-skill .skill-icon { z-index:1; grid-column:1; grid-row:1/3; width:48px; height:48px; border-radius:8px; box-shadow:0 2px 9px #0006; }
.game-skill kbd { position:absolute; top:4px; left:4px; display:grid; place-items:center; width:24px; height:24px; border:1px solid #b8d9e180; border-radius:4px; background:#0c181ff5; font:700 16px Oswald,sans-serif; color:#eaf9fc; box-shadow:0 2px 4px #0005; }
.game-skill span { grid-column:2; font-size:var(--game-skill-title); font-weight:700; line-height:1.25; }
.game-skill small { grid-column:2; font-size:var(--game-small); font-weight:600; color:#d0e3e5; line-height:1.25; }
.game-skill[data-skill="w"] { --skill-glow:#338ac45c; }
.game-skill[data-skill="e"] { --skill-glow:#b28a3557; }
.game-skill[data-skill="r"] { --skill-glow:#9254bc5c; }
.game-skill.skill-locked { filter:saturate(.4); opacity:.85; }
.game-skill:active { border-color:#d8fcff; transform:translateY(1px); }
.game-skill:focus-visible { outline:2px solid #d8fcff; outline-offset:3px; }
.game-touch-controls { display:flex; align-items:center; gap:8px; justify-content:end; }
.game-dpad { display:grid; grid-template-columns:repeat(3,42px); grid-template-rows:repeat(2,36px); gap:4px; }
#game-dpad { display:none; }
.game-dpad button { border:1px solid #7ca09a70; border-radius:5px; background:#263a3c; touch-action:none; user-select:none; }
.game-dpad button:first-child { grid-column:2; }
.game-dpad button:nth-child(2) { grid-column:1; grid-row:2; }
.game-dpad button:nth-child(3) { grid-column:2; grid-row:2; }
.game-dpad button:nth-child(4) { grid-column:3; grid-row:2; }
.game-lanes { display:flex; gap:6px; }
.game-lanes button { width:46px; height:48px; border:1px solid #83b4a480; border-radius:7px; background:#243c35; font-size:26px; touch-action:none; }
.game-action { padding:14px 20px; min-height:48px; border-radius:8px; background:#c74434; border:1px solid #f98158; color:#fff; font-size:var(--game-copy); font-weight:700; touch-action:none; user-select:none; white-space:nowrap; }
.game-dash-icon,.game-dash-key { display:none; }
.game-action:active,.game-dpad button:active { background:#719080; }
#game-duck { background:#243d3d; border-color:#749286; }

/* The same cards serve level choices and longer progression panels. */
.game-upgrades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.game-overlay-card:has(.game-upgrades:not([hidden])) { max-width:1040px; }
.game-upgrade { --upgrade-glow:#4d9d9440; position:relative; display:flex; flex-direction:column; align-items:start; gap:12px; min-width:0; min-height:248px; padding:20px; text-align:left; border-radius:12px; border:1px solid #819fa280; background:radial-gradient(ellipse at 15% 0,var(--upgrade-glow),transparent 80%),linear-gradient(145deg,#21333e,#101b23); box-shadow:inset 0 1px #d7efeb10,0 8px 20px #0003; transition:transform .15s,border-color .15s; }
.game-upgrade[data-upgrade="w"] { --upgrade-glow:#367dc55c; }
.game-upgrade[data-upgrade="e"],.game-upgrade[data-upgrade="projectile"] { --upgrade-glow:#aa853855; }
.game-upgrade[data-upgrade="r"] { --upgrade-glow:#9254bc5c; }
.game-upgrade[data-upgrade="health"] { --upgrade-glow:#42965b5c; }
.game-upgrade:hover,.game-upgrade:focus-visible { transform:translateY(-3px); border-color:#c3e5c5; }
.game-upgrade:focus-visible { outline:2px solid #d8fcff; outline-offset:3px; }
.upgrade-key { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:30px; height:30px; border:1px solid #aac9c190; border-radius:5px; color:#e1eee2; background:#0c182199; font-size:var(--game-hint); font-weight:700; }
.upgrade-icon { display:block; width:64px; height:64px; border-radius:12px; box-shadow:0 6px 20px #0005; }
.game-upgrade strong { font:700 clamp(24px,1.4vw,30px)/1.2 Oswald,sans-serif; color:#fbf2df; }
.game-upgrade small { color:#d3e5e1; line-height:1.5; font-size:var(--game-copy); font-weight:600; }

/* Persistent mastery uses a compact, scroll-safe postgame panel. */
.game-overlay-card:has(.game-mastery:not([hidden])) { max-width:960px; }
.game-mastery { margin-top:24px; padding-top:20px; border-top:1px solid #a2c6bc4d; text-align:left; }
.game-mastery h4 { margin:0 0 8px; color:#f5edda; font:700 clamp(26px,1.6vw,34px)/1.2 Oswald,sans-serif; }
.game-mastery > p { font-size:var(--game-copy); font-weight:600; line-height:1.5; margin:7px 0; color:#d2e4dc; }
#game-mastery-points { color:#d8efb5; font-weight:700; }
#game-mastery-notice { color:#efd099; }
#game-mastery-notice:empty { display:none; }
.game-mastery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.mastery-upgrade { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:start; gap:6px 12px; min-width:0; padding:16px; border:1px solid #8aaea966; border-radius:10px; background:linear-gradient(135deg,#203841,#13232c); box-shadow:inset 0 1px #ffffff0b; text-align:left; }
.mastery-icon { grid-column:1; grid-row:1/4; width:48px; height:48px; border-radius:9px; box-shadow:0 3px 10px #0004; }
.mastery-upgrade strong { grid-column:2; font:700 clamp(20px,1.2vw,25px)/1.25 Oswald,sans-serif; color:#f5edda; }
.mastery-rank { grid-column:3; align-self:center; padding:2px 6px; border:1px solid #8aaea94d; border-radius:4px; font-size:var(--game-small); font-weight:700; color:#d8e6da; white-space:nowrap; }
.mastery-description { grid-column:2/4; color:#ccded8; font-size:var(--game-hint); font-weight:600; line-height:1.5; }
.mastery-action { grid-column:2/4; justify-self:start; padding:5px 9px; margin-top:2px; border-radius:4px; background:#38574b; color:#e8f6d0; font-size:var(--game-hint); font-weight:700; line-height:1.3; }
.mastery-upgrade:hover:not(:disabled) { border-color:#c3e5c5; background:linear-gradient(135deg,#294b50,#183034); }
.mastery-upgrade:focus-visible { outline:2px solid #d8fcff; outline-offset:3px; }
.mastery-upgrade:disabled { opacity:1; cursor:default; border-color:#80999440; background:#16282e; }
.mastery-upgrade:disabled .mastery-action { color:#b6cac3; background:#243b3b; }

/* Shared world menus use the same readable type scale. */
.world-panel { padding:0 24px; background:#0c191df2; border-block:1px solid #b1d8c540; font-size:var(--game-copy); flex-shrink:0; }
.world-panel summary { cursor:pointer; padding:12px 0; color:#f1e9cf; font-weight:700; }
.world-panel summary span { float:right; font-size:var(--game-hint); color:#c0e4c8; }
.world-menu { max-height:min(320px,32dvh); overflow:auto; padding-bottom:12px; overscroll-behavior:contain; }
.world-menu p { color:#c1d6cd; font-size:var(--game-hint); font-weight:600; line-height:1.5; }
.world-menu a { text-decoration:underline; }
.world-upgrades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.world-upgrades button,.world-build button { padding:10px 12px; border:1px solid #7fae957a; background:#243b38; border-radius:5px; font-size:var(--game-hint); }
.world-upgrades button { display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 10px; align-items:center; text-align:left; min-width:0; }
.world-upgrades img { grid-row:1/3; width:40px; height:40px; border-radius:6px; }
.world-upgrades span { font-size:var(--game-copy); font-weight:700; }
.world-upgrades small { grid-column:2; display:block; color:#c6dfd0; font-size:var(--game-small); font-weight:600; }
.world-upgrades button:disabled { opacity:.6; }
.world-build { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-block:14px; }
.world-build label { display:grid; gap:6px; font-size:var(--game-hint); font-weight:600; flex:1 1 180px; }
.world-build input,.world-build select { min-width:0; width:100%; padding:10px; border:1px solid #759c8b80; background:#132728; color:#f1eee0; border-radius:5px; font-size:16px; font-weight:600; }
.world-notice { margin:0; padding:9px 24px; color:#f2d497; font-size:var(--game-hint); font-weight:600; }
.world-notice:empty { display:none; }

#arcade-dialog:fullscreen,#arcade-dialog.game-expanded { width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
#arcade-dialog:fullscreen .game-shell,#arcade-dialog.game-expanded .game-shell,#arcade-dialog .game-shell:fullscreen { width:100vw; height:100dvh; }
.game-shell:fullscreen { background:#0c1519; color:#f7efdf; display:flex; flex-direction:column; }
#arcade-dialog:fullscreen .game-stage,#arcade-dialog.game-expanded .game-stage,.game-shell:fullscreen .game-stage { height:auto; min-height:0; }

/* Homepage elements outside the game dialog. */
.arcade-name-form { max-width:600px; margin-top:20px; }
.arcade-name-form label { display:block; font-size:13px; margin-bottom:10px; }
.arcade-name-form > div { display:flex; gap:12px; }
.arcade-name-form input { min-width:0; width:100%; padding:12px; background:#101b20; border:1px solid #54736c; color:#fff; border-radius:6px; }
.arcade-name-form button { padding:10px 18px; font-size:12px; white-space:nowrap; }
.arcade-world-card { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:30px; margin-top:24px; background:radial-gradient(ellipse at 80% 70%,#35645c44,transparent 65%),#132022; border:1px solid #82b4a848; }
.arcade-world-card h3 { font-size:34px; margin:8px 0 12px; }
.arcade-world-card p:not(.eyebrow) { max-width:680px; font-size:14px; line-height:1.8; color:#b8c9c5; }
.arcade-world-card span { font-size:11px; color:#a7c8b5; }
.arcade-world-card button { flex-shrink:0; }

@media(max-width:1000px) and (min-width:681px) {
 .game-skill { grid-template-columns:36px minmax(0,1fr); padding:10px 8px; gap:4px 7px; }
 .game-skill .skill-icon { width:36px; height:36px; }
 .game-skills { gap:7px; }
 .game-touch-controls .game-action { padding-inline:14px; }
}
@media(max-width:900px) {
 .arcade-card-copy { padding:22px; } .arcade-card-copy h3 { font-size:29px; }
 .arcade-card-bottom { align-items:start; flex-direction:column; } .arcade-card-copy p { min-height:100px; }
 .arcade-heading > p { max-width:200px; } .desktop-nav { gap:20px; }
}
@media(max-width:680px) {
 #arcade-dialog { --game-copy:15px; --game-hint:12px; --game-small:12px; --game-skill-title:13px; width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
 #arcade-dialog .game-shell { height:100dvh; }
 .game-toolbar { padding:10px 12px; gap:8px; }
 .game-brand { font-size:11px; letter-spacing:1.2px; }
 .game-toolbar h2 { font-size:23px; }
 .game-toolbar-actions { gap:5px; }
 .game-toolbar-actions button { width:36px; height:40px; font-size:23px; }
 .game-stage { min-height:180px; }
 .game-hud { padding:12px; gap:7px; grid-template-columns:minmax(124px,1fr) minmax(0,1fr) auto; font-size:12px; }
 .game-vitals { width:148px; }
 .game-hud strong { font-size:25px; }
 .game-health { padding:6px 7px 7px; margin-top:5px; }
 .game-health-label { font-size:12px; gap:5px; }
 #game-health-meter { height:9px; }
 .game-status-strip { left:12px; right:12px; bottom:10px; gap:5px 8px; font-size:12px; }
 #game-mode-label { font-size:11px; letter-spacing:.5px; }
 .game-overlay { padding:18px 14px; }
 .game-overlay-card h3 { font-size:32px; margin:10px 0; }
 .game-overlay-card > p:not(.eyebrow) { line-height:1.5; }
 .game-overlay-actions { gap:10px; margin-top:18px; }
 .game-reward { padding:12px; margin-top:12px; }
 .game-reward-heading { gap:8px; }
 .game-reward h4 { font-size:20px; }
 .game-reward p,.game-reward-links a { font-size:13px; }
 .game-reward-links { gap:6px 14px; }
 .game-overlay-actions .primary,.game-overlay-actions .secondary { padding:11px 18px; }
 .game-controls { padding:10px 12px max(10px,env(safe-area-inset-bottom)); gap:8px; }
 .game-controls > p { line-height:1.45; }
 .game-skills { grid-column:1/-1; gap:5px; max-width:none; }
 .game-skill { padding:8px 4px; gap:4px; grid-template-columns:minmax(0,1fr); grid-template-rows:32px 1fr auto; min-height:100px; text-align:center; }
 .game-skill .skill-icon { grid-column:1; grid-row:1; width:32px; height:32px; justify-self:center; }
 .game-skill kbd { width:20px; height:20px; font-size:14px; }
 .game-skill span { grid-column:1; grid-row:2; }
 .game-skill small { grid-column:1; grid-row:3; font-size:11px; }
 .game-touch-controls { grid-column:1/-1; justify-content:center; width:100%; }
 .game-action { min-width:0; min-height:44px; padding:11px 14px; font-size:14px; }
 .game-lanes button { height:44px; }
 .game-upgrades { grid-template-columns:1fr; gap:10px; margin-top:14px; }
 .game-upgrade { display:grid; grid-template-columns:44px minmax(0,1fr); min-height:112px; padding:14px 35px 14px 12px; gap:6px 10px; }
 .game-upgrade .upgrade-key { top:10px; right:8px; width:22px; height:22px; font-size:12px; }
 .game-upgrade .upgrade-icon { grid-column:1; grid-row:1/3; width:44px; height:44px; border-radius:9px; align-self:center; }
 .game-upgrade strong,.game-upgrade small { grid-column:2; }
 .game-upgrade strong { font-size:22px; }
 .game-upgrade small { font-size:14px; }
 .game-overlay-card:has(.game-upgrades:not([hidden])) h3 { font-size:30px; }
 .game-mastery { margin-top:20px; padding-top:16px; }
 .game-mastery-grid { grid-template-columns:1fr; gap:8px; }
 .mastery-upgrade { grid-template-columns:40px minmax(0,1fr); padding:12px; gap:6px 9px; }
 .mastery-rank { grid-column:2; justify-self:start; }
 .mastery-description,.mastery-action { grid-column:2; }
 .mastery-icon { width:40px; height:40px; }
 .mastery-upgrade strong { font-size:21px; }
 .mastery-description { font-size:14px; }
 .mastery-action { font-size:13px; }
 .world-panel { padding-inline:12px; }
 .world-panel summary { font-size:15px; }
 .world-panel summary span { display:block; float:none; margin-top:4px; }
 .world-menu { max-height:180px; }
 .world-upgrades { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .world-upgrades button { padding:8px; grid-template-columns:32px minmax(0,1fr); gap:3px 7px; }
 .world-upgrades img { width:32px; height:32px; }
 .world-upgrades span { font-size:14px; }
 .world-notice { padding:8px 12px; }
 .arcade-section { padding-block:24px 42px; }
 .arcade-heading { display:block; margin-bottom:24px; }
 .arcade-heading > p { margin-top:14px; max-width:none; font-size:13px; }
 .arcade-heading > p br { display:none; }
 .arcade-cards { grid-template-columns:1fr; gap:18px; }
 .arcade-tag { top:16px; left:16px; font-size:8px; }
 .arcade-card-copy p { min-height:0; font-size:13px; }
 .arcade-card-bottom { align-items:center; flex-direction:row; }
 .arcade-best { font-size:10px; }
 .arcade-board { padding:20px 16px; }
 .arcade-board-heading { align-items:start; flex-direction:column; }
 .arcade-board-tabs { width:100%; }
 .arcade-board-tabs button { flex:1; }
 .arcade-board-foot { flex-direction:column; gap:10px; }
 .arcade-board td,.arcade-board th { padding:12px 6px; }
 .arcade-board td:first-child { width:58px; }
 .arcade-world-card { display:block; padding:24px; }
 .arcade-world-card button { margin-top:22px; }
}
@media(max-width:360px) {
 #arcade-dialog { --game-skill-title:12px; }
 .game-toolbar h2 { font-size:21px; }
 .game-toolbar-actions button { width:33px; }
 .game-hud { grid-template-columns:124px minmax(0,1fr) auto; gap:5px; }
 .game-hud strong { font-size:22px; }
 #game-clock { font-size:11px; }
 .game-upgrade { grid-template-columns:36px minmax(0,1fr); gap:6px 8px; }
 .game-upgrade .upgrade-icon { width:36px; height:36px; }
 #game-name-form > div { flex-direction:column; }
}
@media(max-width:430px) { .arcade-name-form > div { flex-direction:column; } }
@media(max-height:500px) and (orientation:landscape) {
 #arcade-dialog { --game-copy:15px; --game-hint:12px; --game-small:12px; --game-skill-title:14px; }
 .game-toolbar { padding:6px 12px; }
 .game-brand { display:none; }
 .game-toolbar h2 { font-size:22px; margin:0; }
 .game-toolbar-actions button { height:32px; width:36px; font-size:23px; }
 .game-controls { grid-template-columns:minmax(0,1fr) auto; padding:7px 12px; gap:5px 10px; }
 .game-controls > p { display:none; }
 .game-skills { grid-column:1; gap:6px; }
 .game-touch-controls { grid-column:2; grid-row:1; width:auto; }
 .game-skill { min-height:62px; padding:7px 5px; grid-template-columns:28px minmax(0,1fr); grid-template-rows:1fr auto; gap:2px 5px; text-align:left; }
 .game-skill .skill-icon { grid-column:1; grid-row:1/3; width:28px; height:28px; }
 .game-skill span { grid-column:2; grid-row:1; font-size:13px; }
 .game-skill small { grid-column:2; grid-row:2; font-size:11px; }
 .game-skill kbd { top:2px; left:2px; width:18px; height:18px; font-size:12px; }
 .game-action { padding:10px; min-height:42px; font-size:14px; }
 .game-stage { min-height:120px; }
 .game-hud { padding:8px 12px; font-size:13px; }
 .game-hud strong { font-size:26px; }
 .game-vitals { width:154px; }
 .game-health { padding:5px 7px 7px; margin-top:4px; }
 .game-health-label { font-size:12px; margin-bottom:4px; }
 #game-health-meter { height:8px; }
 .game-status-strip { bottom:7px; font-size:12px; }
 .game-overlay { padding:14px; }
 .game-overlay-card h3 { font-size:28px; margin:8px 0; }
 .game-overlay-card > p { margin-bottom:8px; }
 .game-overlay-actions { margin-top:12px; }
 .game-upgrades { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; gap:8px; }
 .game-upgrade { display:flex; min-height:180px; padding:12px; gap:8px; }
 .game-upgrade .upgrade-icon { align-self:start; width:40px; height:40px; }
 .game-upgrade strong { font-size:21px; }
 .game-upgrade small { font-size:14px; }
 .game-mastery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mastery-upgrade { grid-template-columns:36px minmax(0,1fr) auto; padding:12px; gap:6px 8px; }
 .mastery-icon { width:36px; height:36px; }
 .mastery-upgrade strong { font-size:20px; }
 .mastery-description { font-size:13px; }
 .world-panel summary { padding-block:7px; }
 .world-panel summary span { float:right; display:inline; margin:0; }
 .world-menu { max-height:130px; }
}
@media(prefers-reduced-motion:reduce) { .game-upgrade { transition:none; } }

/* Objective-led expedition: large, persistent guidance outside the playfield. */
.expedition-hud { padding:12px 24px 10px; border-block:1px solid #bda66c38; background:linear-gradient(110deg,#26312b,#101e25); flex:none; }
.expedition-goal { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.expedition-caption { display:block; color:#ceba84; font-size:12px; font-weight:800; letter-spacing:1.5px; margin-bottom:4px; }
#expedition-objective { display:block; font-size:clamp(16px,1.2vw,22px); line-height:1.3; color:#fff2d3; }
.expedition-counters { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:0 7px; white-space:nowrap; color:#d8e6db; }
#expedition-count { font:700 26px/1.2 Oswald,sans-serif; color:#efcf84; }
#expedition-materials { grid-column:1/-1; font-size:14px; font-weight:700; }
.expedition-route { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:9px 0 6px; gap:8px; font-size:13px; font-weight:800; color:#879c9a; }
.expedition-route li { padding:5px 8px; border:1px solid #82948c35; border-radius:5px; }
.expedition-route .is-active { border-color:#c6a85d; background:#c6a85d20; color:#ffe2a7; }
.expedition-route .is-complete { color:#9ee6bc; border-color:#579c7766; background:#579c771c; }
#expedition-progress { display:block; width:100%; height:5px; border:0; background:#071216; border-radius:3px; overflow:hidden; appearance:none; }
#expedition-progress::-webkit-progress-bar { background:#071216; }
#expedition-progress::-webkit-progress-value { background:linear-gradient(90deg,#bea35d,#efce89); }
#expedition-progress::-moz-progress-bar { background:#d7b568; }
.expedition-boss { position:absolute; top:100px; left:25%; width:50%; padding:7px 12px; pointer-events:none; background:#210f20dc; border:1px solid #f1899755; border-radius:7px; }
.expedition-boss > div { display:flex; justify-content:space-between; gap:12px; color:#ffe1d9; font-size:16px; font-weight:700; }
#expedition-boss-meter { width:100%; height:8px; appearance:none; border:0; overflow:hidden; background:#441e28; border-radius:3px; }
#expedition-boss-meter::-webkit-progress-bar { background:#441e28; }
#expedition-boss-meter::-webkit-progress-value { background:linear-gradient(90deg,#ba4252,#f1a17c); }
#expedition-boss-meter::-moz-progress-bar { background:#e16c72; }
.game-control-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.game-control-heading p { flex:1; }
.forge-open { flex:none; padding:10px 14px; border:1px solid #ad914b; border-radius:7px; background:#393324; color:#ffe5a4; font-size:16px; font-weight:800; }
.game-skill.skill-evolved { border-color:#dcb969; box-shadow:inset 0 0 20px #b882292b; }
.game-skill.skill-evolved span { color:#ffe3aa; }
.game-forge-panel { margin-top:24px; text-align:left; }
.game-overlay-card:has(.game-forge-panel:not([hidden])) { max-width:1000px; }
.forge-materials { color:#ffe5a4; font-size:24px; font-weight:800; }
#forge-notice,#forge-equipment,#forge-relics { color:#d2e3db; font-size:16px; font-weight:600; line-height:1.5; }
.forge-recipes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.forge-recipes button { position:relative; display:flex; flex-direction:column; gap:12px; align-items:start; padding:18px; min-width:0; border:1px solid #bea05b88; border-radius:10px; background:linear-gradient(140deg,#383b2b,#17242a); text-align:left; }
.forge-recipes button:disabled { opacity:.7; cursor:default; }
.forge-recipes button:not(:disabled):hover { border-color:#ffe4a2; background:#35463a; }
.forge-recipes img { border-radius:9px; }
.forge-recipes kbd { position:absolute; right:16px; top:16px; color:#dfc58b; }
.forge-recipes strong { font:700 24px/1.2 Oswald,sans-serif; color:#ffedca; }
.forge-recipes small { font-size:16px; line-height:1.45; font-weight:600; color:#d1e2d9; }
.forge-cost { margin-top:auto; color:#ffe6aa; font-weight:800; font-size:16px; }
@media(max-width:700px) {
 .expedition-hud { padding:8px 12px; }
 .expedition-caption { font-size:10px; letter-spacing:.8px; }
 .expedition-goal { gap:10px; }
 #expedition-objective { font-size:15px; }
 #expedition-count { font-size:22px; }
 #expedition-materials { font-size:11px; }
 .expedition-counters small { font-size:11px; }
 .expedition-route { gap:4px; font-size:10px; margin:7px 0 5px; }
 .expedition-route li { padding:4px 3px; white-space:nowrap; }
 .expedition-boss { top:78px; left:15%; width:70%; padding:4px 8px; }
 .expedition-boss > div { font-size:12px; }
 .forge-open { padding:8px 10px; font-size:13px; }
 .game-control-heading { align-items:start; gap:8px; }
 .forge-recipes { grid-template-columns:1fr; }
 .forge-recipes button { display:grid; grid-template-columns:42px 1fr; gap:6px 10px; padding:12px; }
 .forge-recipes img { grid-column:1; grid-row:1/4; width:42px; height:42px; }
 .forge-recipes strong,.forge-recipes small,.forge-cost { grid-column:2; padding-right:14px; }
 .forge-recipes strong { font-size:21px; }
 .forge-recipes small,.forge-cost { font-size:14px; }
 .forge-recipes kbd { right:10px; top:12px; }
}
@media(max-height:600px) and (min-width:701px) {
 .expedition-hud { padding:5px 16px; }
 .expedition-caption { display:none; }
 .expedition-route { margin:4px 0; }
 .expedition-route li { padding:2px 6px; }
 #expedition-objective { font-size:15px; }
 .expedition-boss { top:65px; }
}
.game-control-heading { grid-column:1/-1; }
.game-control-heading p { margin:0; font-size:var(--game-hint); line-height:1.45; color:#c7d8d8; }
@media(max-height:500px) and (orientation:landscape) {
 .game-control-heading { grid-column:2; grid-row:1; align-self:start; }
 .game-control-heading p { display:none; }
 .game-control-heading .forge-open { padding:5px 8px; font-size:11px; }
 .game-controls:has(.forge-open:not([hidden])) .game-touch-controls { padding-top:32px; }
}

/* Separate game mixer; stays inside the fullscreen game shell. */
.game-shell { position:relative; }
.game-toolbar-actions #game-audio-toggle { width:auto; min-width:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; font-size:16px; font-weight:800; }
#game-audio-toggle[data-muted="true"] { color:#e6ae9b; }
.game-audio-panel { position:absolute; top:78px; right:16px; z-index:40; width:min(360px,calc(100% - 32px)); padding:20px; border:1px solid #7fa79a85; border-radius:14px; background:#102025f5; box-shadow:0 18px 70px #000b; backdrop-filter:blur(18px); color:#edf5eb; }
.game-audio-panel[hidden] { display:none; }
.game-audio-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.game-audio-heading h3 { margin:0; font:700 26px/1.2 Oswald,sans-serif; color:#fff1d7; }
.game-audio-heading button { width:44px; height:44px; border:1px solid #78968c70; border-radius:8px; background:#22353b; color:#fff; font-size:26px; }
.game-audio-panel label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:16px; font-weight:700; }
.game-audio-panel output { color:#ead297; font-variant-numeric:tabular-nums; }
.game-audio-panel input[type="range"] { width:100%; height:36px; min-height:36px; margin:5px 0 17px; padding:0; cursor:pointer; accent-color:#e0c386; touch-action:pan-y; }
#game-audio-mute { width:100%; min-height:44px; padding:10px 14px; border:1px solid #78968c85; border-radius:8px; background:#263a3f; color:#f8efdc; font:700 15px/1.3 Inter,sans-serif; }
#game-audio-mute[aria-pressed="true"] { background:#60453b; border-color:#d3aa83; }
#game-audio-status { margin:12px 0 0; color:#b9d1cd; font-size:13px; line-height:1.5; }
.game-audio-panel :focus-visible,#game-audio-toggle:focus-visible { outline:3px solid #efd494; outline-offset:3px; }
@media(max-width:600px) {
 .game-audio-label { display:none; }
 .game-toolbar-actions #game-audio-toggle { padding:0; width:38px; min-width:38px; font-size:20px; }
 .game-toolbar > div:first-child { min-width:0; }
 .game-toolbar-actions { flex-shrink:0; }
 .game-toolbar h2 { max-width:36vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .game-audio-panel { top:65px; right:10px; width:min(340px,calc(100% - 20px)); padding:16px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .game-audio-panel { top:50px; max-height:calc(100dvh - 65px); overflow:auto; padding:12px 16px; }
 .game-audio-heading { margin-bottom:8px; }
 .game-audio-panel input[type="range"] { margin-bottom:6px; }
}

/* Expedition v4: readable growth and separate in-run crafting currency. */
.expedition-tempo { margin:4px 0; color:#a9dfcf; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
#expedition-gold { color:#ffe0a0; }
#game-health-gain { display:block; min-height:1em; font-size:13px; font-weight:850; color:#adffcc; }
#game-health-gain:empty { display:none; }
@media (max-width:600px) { .expedition-tempo { font-size:12px; } .expedition-counters { flex-wrap:wrap; } }

.dungeon-map-wrap { position:absolute; right:14px; bottom:66px; z-index:2; pointer-events:none; border:1px solid #90b6bc66; border-radius:7px; background:#0d1929d9; overflow:hidden; }
#dungeon-map { display:block; width:176px; height:110px; }
.dungeon-map-wrap small { display:block; text-align:center; padding:3px 5px; color:#e6f2ed; font-size:10px; font-weight:800; }
@media (max-width:600px) { .dungeon-map-wrap { right:7px; bottom:62px; } #dungeon-map { width:112px; height:70px; } .dungeon-map-wrap small { font-size:8px; padding:2px; } }
/* Runner progression is outside the canvas so obstacles remain unobscured. */
.arcade-board-heading { flex-wrap:wrap; }
.arcade-board-tabs { flex-wrap:wrap; }
.runner-hud { flex-shrink:0; padding:10px 24px 9px; background:linear-gradient(110deg,#17372f,#12252e); border-top:1px solid #a5e8b42b; }
.runner-hud > div { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.runner-hud strong { font-size:var(--game-hint); font-weight:800; color:#d7f5c0; }
.runner-hud span,.runner-hud p { font-size:var(--game-small); font-weight:700; }
.runner-hud p { margin:3px 0 0; color:#c4d5d5; }
.runner-hud progress { display:block; width:100%; height:7px; margin:5px 0; border:0; border-radius:10px; overflow:hidden; background:#ffffff12; accent-color:#b6ed8c; }
.runner-hud progress::-webkit-progress-bar { background:#ffffff12; }
.runner-hud progress::-webkit-progress-value { background:linear-gradient(90deg,#52c2af,#d2f39a); }
#runner-save-status { color:#e8d2a6; }
.runner-modes { border:0; padding:0; margin:20px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.runner-modes legend { padding:0 0 8px; font-size:var(--game-hint); color:#b5ccbf; }
.runner-modes label { position:relative; display:flex; gap:10px; padding:15px; border:1px solid #91baab59; border-radius:10px; background:#142c2b; cursor:pointer; align-items:flex-start; }
.runner-modes label:has(input:checked) { border-color:#c5e6a6; background:#2c4434; box-shadow:inset 0 0 0 1px #c5e6a6; }
.runner-modes input { accent-color:#bdeba3; margin-top:5px; width:18px; height:18px; flex:none; }
.runner-modes strong,.runner-modes small { display:block; }
.runner-modes strong { font-size:var(--game-copy); font-weight:800; }
.runner-modes small { margin-top:4px; color:#c6d4cc; font-size:var(--game-small); line-height:1.4; }
@media(max-width:620px) { .runner-hud { padding:8px 12px; } .runner-hud > div { flex-wrap:wrap; gap:3px 10px; } .runner-modes label { padding:10px; gap:7px; } .arcade-board-tabs button { padding:10px 12px; flex:1 1 40%; } }
@media(max-height:640px) { .runner-hud { padding:5px 12px; } .runner-hud p { display:none; } .runner-hud progress { margin:3px 0; height:5px; } }

#arcade-dialog[data-game="runner"] .game-overlay-card > .game-reward-rules { font-size:14px; line-height:1.45; margin:10px 0; }
#arcade-dialog[data-game="runner"] .game-overlay-card > p:not(.eyebrow) { margin-bottom:12px; }
#arcade-dialog[data-game="runner"] .game-overlay-actions { margin-top:16px; }

/* Shared-world progression is always visible, independent of the build menu. */
.world-progression { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 24px; flex:none; border-block:1px solid #9ccc9d45; background:linear-gradient(110deg,#17382e,#10242b); }
.world-xp { min-width:0; }
.world-xp > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:3px 12px; font-size:var(--game-hint); }
#world-level { color:#e3f7cb; }
#world-xp-value { color:#c0dfc8; font-variant-numeric:tabular-nums; }
#world-xp-meter { display:block; width:100%; height:7px; margin-block:5px; border:0; border-radius:4px; overflow:hidden; appearance:none; background:#081d20; }
#world-xp-meter::-webkit-progress-bar { background:#081d20; }
#world-xp-meter::-webkit-progress-value { background:linear-gradient(90deg,#6ac49b,#d3ed8b); }
#world-xp-meter::-moz-progress-bar { background:#b4e7a6; }
#world-objective { display:block; color:#bdd0c8; font-size:var(--game-small); line-height:1.3; }
#world-upgrade-toggle { min-width:190px; padding:10px 16px; min-height:54px; border:1px solid #98c9a166; border-radius:8px; background:#233d36; text-align:left; }
#world-upgrade-toggle strong,#world-upgrade-toggle small { display:block; }
#world-upgrade-toggle strong { font-size:var(--game-copy); line-height:1.2; }
#world-upgrade-toggle small { color:#c2d5c5; font-size:var(--game-small); margin-top:4px; }
#world-upgrade-toggle.has-points { background:linear-gradient(110deg,#a9da8a,#e7d99b); color:#15271a; border-color:#e5f6bc; box-shadow:0 0 18px #b8e27630; }
#world-upgrade-toggle.has-points small { color:#23422a; }
#world-upgrade-toggle:focus-visible,.world-upgrade-drawer button:focus-visible { outline:2px solid #e8f9cd; outline-offset:3px; }
.world-upgrade-drawer { position:absolute; z-index:4; right:14px; bottom:12px; width:min(740px,calc(100% - 28px)); max-height:calc(100% - 24px); display:block; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scroll-padding-top:86px; box-sizing:border-box; padding:14px; border:1px solid #b8df9e99; border-radius:12px; background:#102421f5; box-shadow:0 15px 45px #0009; backdrop-filter:blur(12px); }
.world-upgrade-drawer header { position:sticky; top:0; z-index:2; padding:4px 0 8px; background:#102421; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.world-upgrade-drawer header strong { display:block; font:700 clamp(22px,1.6vw,30px)/1.1 Oswald,sans-serif; color:#f1f7d5; }
#world-upgrade-points { display:block; color:#c6e1bc; font-size:var(--game-small); margin-top:4px; }
#world-upgrade-close { flex:none; width:40px; height:40px; padding:0; border:1px solid #bedab577; border-radius:6px; background:#263f36; font-size:28px; }
.world-live-warning { margin:9px 0; flex:none; color:#f2d796; font-size:var(--game-small); line-height:1.35; }
.world-upgrade-drawer .world-upgrades { overflow:visible; padding:3px; margin:-3px; counter-reset:world-skill; }
.world-scroll-hint { display:none; color:#e6dba1; font-size:12px; line-height:1.3; margin-top:4px; }
.world-upgrade-drawer .world-upgrades button { position:relative; counter-increment:world-skill; grid-template-columns:36px minmax(0,1fr); align-content:start; gap:6px 8px; padding:10px; border-radius:7px; min-height:114px; }
.world-upgrade-drawer .world-upgrades button::before { content:counter(world-skill); position:absolute; top:5px; left:5px; padding:0 4px; border:1px solid #aecbb877; border-radius:3px; background:#10241df2; color:#e6f3da; font:700 12px/1.4 sans-serif; }
.world-upgrade-drawer .world-upgrades img { width:36px; height:36px; grid-row:1/3; }
.world-upgrade-drawer .world-upgrades span { font-size:var(--game-hint); line-height:1.2; }
.world-upgrade-drawer .world-upgrades small { grid-column:1/-1; font-size:var(--game-small); line-height:1.4; }
.world-upgrade-cost { grid-column:1/-1; color:#d7eca9; font-size:var(--game-small); }
.world-upgrade-drawer .world-upgrades button:hover:not(:disabled) { background:#355743; border-color:#d6edb4; }
.world-upgrade-drawer .world-upgrades button:disabled { opacity:.7; }
.world-upgrade-help,#world-last-reward,#world-upgrade-notice { flex:none; margin:8px 0 0; font-size:var(--game-small); line-height:1.35; color:#bcd2c5; }
#world-upgrade-notice { color:#dff3b7; }
#world-upgrade-notice:empty { display:none; }
#world-last-reward { border-top:1px solid #a7c99630; padding-top:7px; }
.world-reward-toast { position:absolute; z-index:3; bottom:56px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 28px); padding:12px 20px; border:1px solid #e5ce8599; border-radius:9px; background:#192c20f2; box-shadow:0 7px 25px #0005; text-align:center; pointer-events:none; animation:world-reward-in .25s ease-out; }
.world-reward-toast strong,.world-reward-toast span { display:block; }
.world-reward-toast strong { color:#f8e4a4; font-size:var(--game-copy); }
.world-reward-toast span { color:#e2e8cb; font-size:var(--game-hint); margin-top:3px; }
.game-stage:has(.world-upgrade-drawer:not([hidden])) .world-reward-toast { display:none; }
.game-overlay { z-index:5; }
#game-action { display:grid; gap:3px; text-align:center; }
#game-dash-timer { color:#fff4d8; font-size:var(--game-small); font-weight:600; line-height:1.3; }
#game-dash-meter { width:100%; height:5px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:#3e201f; }
#game-dash-meter::-webkit-progress-bar { background:#3e201f; }
#game-dash-meter::-webkit-progress-value { background:#ffdc9a; }
#game-dash-meter::-moz-progress-bar { background:#ffdc9a; }
#game-action.dash-empty { background:#503333; border-color:#bd7961; }
@keyframes world-reward-in { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
@media(max-width:680px) {
 .world-progression { padding:8px 12px; gap:10px; grid-template-columns:minmax(0,1fr) minmax(135px,.85fr); }
 .world-xp > div { font-size:12px; }
 #world-objective { font-size:11px; }
 #world-upgrade-toggle { min-width:0; min-height:56px; padding:8px 9px; }
 #world-upgrade-toggle strong { font-size:14px; }
 #world-upgrade-toggle small { font-size:11px; }
 .world-upgrade-drawer { width:calc(100% - 16px); right:8px; bottom:8px; max-height:calc(100% - 16px); padding:10px; }
 .world-upgrade-drawer .world-upgrades { grid-template-columns:1fr; }
 .world-upgrade-drawer .world-upgrades button { grid-template-columns:36px minmax(0,1fr); min-height:80px; padding:9px; gap:3px 9px; }
 .world-upgrade-drawer .world-upgrades small,.world-upgrade-cost { grid-column:2; font-size:12px; }
 .world-upgrade-drawer .world-upgrades img { grid-row:1/4; align-self:center; }
 .world-upgrade-drawer header strong { font-size:22px; }
 .world-scroll-hint { display:block; }
 /* Give the shared-world playfield more room; solo and Dino keep their layout. */
 #arcade-dialog:has(#world-progression:not([hidden])) .world-panel summary { padding-block:8px; font-size:13px; }
 #arcade-dialog:has(#world-progression:not([hidden])) .world-panel summary span { display:inline; float:right; margin:0; font-size:11px; }
 #arcade-dialog:has(#world-progression:not([hidden])) .world-notice { padding:4px 12px; font-size:12px; }
 #arcade-dialog:has(#world-progression:not([hidden])) #game-instructions { font-size:11px; line-height:1.35; }
 .world-upgrade-help,#world-last-reward { font-size:11px; }
 .world-live-warning,#world-upgrade-points { font-size:12px; }
 .world-upgrade-help { display:none; }
 .world-reward-toast { padding:9px 12px; bottom:62px; }
 .world-reward-toast span { font-size:12px; }
 #game-dash-timer { font-size:11px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .world-progression { padding:5px 12px; }
 #world-upgrade-toggle { min-height:40px; padding:5px 12px; }
 #world-objective,#world-upgrade-toggle small { display:none; }
 .world-upgrade-drawer { padding:8px; }
 .world-scroll-hint { display:block; }
 .world-upgrade-drawer .world-upgrades { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .world-upgrade-drawer .world-upgrades button { min-height:88px; }
 .world-upgrade-help { display:none; }
 .world-live-warning { margin:5px 0; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .world-reward-toast { animation:none; } }

/* Arena HUD: controls float over the field and reserve no footer height.
   Keep this scoped: Dino still uses the original instructions and lane controls. */
.game-help { min-width:0; flex:1; }
.game-help > summary { display:none; }
#arcade-dialog[data-game="arena"] { --arena-slot:clamp(52px,3vw,64px); --arena-edge:12px; overflow:hidden; }
#arcade-dialog[data-game="arena"] .game-toolbar { padding:7px 14px; gap:12px; }
#arcade-dialog[data-game="arena"] .game-brand { display:none; }
#arcade-dialog[data-game="arena"] .game-toolbar h2 { margin:0; font-size:22px; }
#arcade-dialog[data-game="arena"] .game-toolbar-actions { gap:6px; }
#arcade-dialog[data-game="arena"] .game-toolbar-actions button { height:36px; width:36px; }
#arcade-dialog[data-game="arena"] .game-toolbar-actions #game-audio-toggle { width:auto; min-width:36px; font-size:14px; }
#arcade-dialog[data-game="arena"] .expedition-hud { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; padding:7px 14px 5px; }
#arcade-dialog[data-game="arena"] .expedition-goal { display:contents; }
#arcade-dialog[data-game="arena"] .expedition-goal > div:first-child { min-width:0; display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; }
#arcade-dialog[data-game="arena"] .expedition-caption { font-size:12px; line-height:1.2; margin-bottom:0; letter-spacing:.5px; }
#arcade-dialog[data-game="arena"] #expedition-objective { font-size:16px; }
#arcade-dialog[data-game="arena"] .expedition-counters { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:end; font-size:13px; }
#arcade-dialog[data-game="arena"] #expedition-count { font-size:20px; }
#arcade-dialog[data-game="arena"] #expedition-materials { font-size:13px; margin-left:10px; }
#arcade-dialog[data-game="arena"] #expedition-gold { font-size:13px; margin-left:10px; }
#arcade-dialog[data-game="arena"] .expedition-route { display:flex; gap:6px; margin:0; font-size:11px; }
#arcade-dialog[data-game="arena"] .expedition-route li { padding:1px 7px; }
#arcade-dialog[data-game="arena"] .expedition-tempo { margin:0; font-size:12px; text-align:right; align-self:center; }
#arcade-dialog[data-game="arena"] #expedition-progress { grid-column:1/-1; height:3px; }
#arcade-dialog[data-game="arena"] .game-hud { padding:10px 14px; gap:10px; }
#arcade-dialog[data-game="arena"] .game-hud strong { font-size:28px; }
#arcade-dialog[data-game="arena"] .game-vitals { width:180px; }
#arcade-dialog[data-game="arena"] .game-health { margin-top:3px; padding:5px 8px; }
#arcade-dialog[data-game="arena"] .game-health-label { margin-bottom:3px; font-size:14px; }
#arcade-dialog[data-game="arena"] #game-health-meter { height:7px; }
#arcade-dialog[data-game="arena"] .expedition-boss { top:78px; }
#arcade-dialog[data-game="arena"] .game-controls { position:absolute; inset:0; z-index:3; display:block; padding:0; margin:0; background:none; border:0; pointer-events:none; }
#arcade-dialog[data-game="arena"] .game-skills { position:absolute; bottom:var(--arena-edge); left:50%; transform:translateX(-50%); display:flex; width:max-content; max-width:none; gap:6px; }
#arcade-dialog[data-game="arena"] .game-skill-slot { position:relative; flex:none; width:var(--arena-slot); height:var(--arena-slot); }
#arcade-dialog[data-game="arena"] .game-skill-slot.autocast-on::after { content:""; position:absolute; inset:-1px; z-index:4; border:2px solid #edc56d; border-radius:8px; box-shadow:0 0 6px #e8b54b55,inset 0 0 5px #edc56d44; pointer-events:none; }
#arcade-dialog[data-game="arena"] .skill-autocast-toggle { position:absolute; top:-4px; right:-4px; z-index:5; display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid #78949c; border-radius:50%; color:#a7bdc4; background:#13242b; box-shadow:0 1px 4px #0008; pointer-events:auto; touch-action:manipulation; }
#arcade-dialog[data-game="arena"] .skill-autocast-toggle[aria-pressed="true"] { border-color:#f3d68b; color:#ffdf8c; background:#3a3020; }
#arcade-dialog[data-game="arena"] .skill-autocast-toggle:focus-visible { outline:2px solid #fff0c3; outline-offset:2px; }
#arcade-dialog[data-game="arena"] .skill-autocast-toggle:active { transform:scale(.94); }
#arcade-dialog[data-game="arena"] .game-skill { display:block; flex:none; width:var(--arena-slot); height:var(--arena-slot); min-height:0; padding:0; border-radius:7px; overflow:visible; pointer-events:auto; }
#arcade-dialog[data-game="arena"] .game-skill .skill-icon { display:block; width:100%; height:100%; border-radius:6px; box-shadow:none; }
#arcade-dialog[data-game="arena"] .game-skill kbd { top:2px; left:2px; width:19px; height:20px; font-size:14px; }
#arcade-dialog[data-game="arena"] .game-skill::after { border-radius:0 0 6px 6px; max-height:100%; }
#arcade-dialog[data-game="arena"] .game-skill::before { content:attr(data-level); position:absolute; z-index:3; right:2px; bottom:2px; min-width:16px; padding:0 3px; background:#08151eed; border-radius:3px; color:#f3e8cc; text-align:center; font:700 12px/18px sans-serif; }
#arcade-dialog[data-game="arena"] .game-skill.skill-cooling::before { content:attr(data-timer); inset:50% auto auto 50%; transform:translate(-50%,-50%); font-size:18px; line-height:24px; background:#07131de6; }
/* Names/status stay available to assistive tech; title exposes the full evolution on hover. */
#arcade-dialog[data-game="arena"] .game-skill > span,
#arcade-dialog[data-game="arena"] .game-skill > small { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#arcade-dialog[data-game="arena"] .game-touch-controls { position:absolute; bottom:var(--arena-edge); right:var(--arena-edge); padding:0; width:auto; }
#arcade-dialog[data-game="arena"] #game-action { position:relative; display:block; flex:none; pointer-events:auto; width:var(--arena-slot); height:var(--arena-slot); min-height:0; padding:0; overflow:hidden; border:1px solid #91b7bf80; background:#15232c; border-radius:7px; }
#arcade-dialog[data-game="arena"] .game-dash-icon { display:block; width:100%; height:100%; }
#arcade-dialog[data-game="arena"] .game-dash-key { position:absolute; top:2px; left:2px; display:grid; place-items:center; width:19px; height:20px; border:1px solid #b8d9e180; border-radius:4px; background:#0c181ff5; color:#eaf9fc; font:700 17px/1 sans-serif; }
#arcade-dialog[data-game="arena"] #game-action::after { content:attr(data-charges); position:absolute; right:2px; bottom:4px; padding:0 3px; border-radius:3px; background:#08151eed; color:#f3e8cc; font:700 12px/18px sans-serif; }
#arcade-dialog[data-game="arena"] #game-action.dash-empty .game-dash-icon { filter:saturate(.3) brightness(.6); }
#arcade-dialog[data-game="arena"] #game-action.dash-empty::after { content:attr(data-timer); inset:50% auto auto 50%; transform:translate(-50%,-50%); font-size:18px; line-height:24px; }
#arcade-dialog[data-game="arena"] #game-action-label,
#arcade-dialog[data-game="arena"] #game-dash-timer { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#arcade-dialog[data-game="arena"] #game-dash-meter { position:absolute; bottom:0; left:0; height:3px; border-radius:0; }
#arcade-dialog[data-game="arena"] .game-control-heading { position:absolute; left:var(--arena-edge); bottom:calc(var(--arena-edge) + var(--arena-slot) + 12px); display:flex; flex-direction:row; align-items:center; gap:8px; }
#arcade-dialog[data-game="arena"] .forge-open { pointer-events:auto; width:40px; height:40px; padding:0; font-size:0; }
#arcade-dialog[data-game="arena"] .forge-open::after { content:'F'; font:700 18px/1 Oswald,sans-serif; }
#arcade-dialog[data-game="arena"] .game-help { position:relative; pointer-events:auto; }
#arcade-dialog[data-game="arena"] .game-help > summary { display:grid; place-items:center; width:32px; height:32px; border:1px solid #abc7c466; border-radius:6px; background:#102329e8; cursor:pointer; list-style:none; font-size:17px; }
#arcade-dialog[data-game="arena"] .game-help > summary::-webkit-details-marker { display:none; }
#arcade-dialog[data-game="arena"] .game-help p { position:absolute; bottom:calc(100% + 8px); left:0; width:min(360px,calc(96vw - 48px)); margin:0; padding:12px; border:1px solid #91b7bf80; border-radius:8px; background:#0d2029f5; font-size:14px; box-shadow:0 5px 20px #0008; }
#arcade-dialog[data-game="arena"] .game-status-strip { bottom:calc(var(--arena-slot) + 22px); left:50%; right:auto; transform:translateX(-50%); width:min(520px,calc(100% - 360px)); display:flex; flex-direction:column; gap:4px; font-size:13px; text-align:center; }
#arcade-dialog[data-game="arena"] #game-mode-label { display:none; }
#arcade-dialog[data-game="arena"] #game-detail { text-align:center; }
#arcade-dialog[data-game="arena"] #game-progress { height:3px; }
#arcade-dialog[data-game="arena"] .dungeon-map-wrap { top:auto; right:var(--arena-edge); bottom:var(--arena-edge); }
#arcade-dialog[data-game="arena"] .world-reward-toast { bottom:calc(var(--arena-slot) + 80px); }
#arcade-dialog[data-game="arena"] .world-progression { padding:6px 14px; gap:12px; }
#arcade-dialog[data-game="arena"] #world-upgrade-toggle { padding:5px 10px; min-height:40px; }
#arcade-dialog[data-game="arena"] #world-upgrade-toggle strong { font-size:15px; }
#arcade-dialog[data-game="arena"] #world-upgrade-toggle small { margin-top:2px; font-size:12px; }
#arcade-dialog[data-game="arena"] .world-panel summary { padding-block:6px; font-size:13px; }
@media(max-width:700px) {
 #arcade-dialog[data-game="arena"] { --arena-slot:44px; --arena-edge:8px; }
 #arcade-dialog[data-game="arena"] .game-toolbar { padding:5px 8px; gap:8px; }
 #arcade-dialog[data-game="arena"] .game-toolbar h2 { font-size:18px; }
 #arcade-dialog[data-game="arena"] .game-toolbar-actions { gap:4px; }
 #arcade-dialog[data-game="arena"] .game-toolbar-actions button { width:32px; height:32px; }
 #arcade-dialog[data-game="arena"] .expedition-hud { padding:5px 8px; gap:4px 8px; }
 #arcade-dialog[data-game="arena"] .expedition-counters { max-width:130px; gap:0 4px; font-size:11px; }
 #arcade-dialog[data-game="arena"] #expedition-count { font-size:16px; }
 #arcade-dialog[data-game="arena"] #expedition-materials,
 #arcade-dialog[data-game="arena"] #expedition-gold { font-size:10px; margin-left:0; }
 #arcade-dialog[data-game="arena"] .expedition-goal > div:first-child { display:block; }
 #arcade-dialog[data-game="arena"] .expedition-caption { font-size:10px; }
 #arcade-dialog[data-game="arena"] #expedition-objective { font-size:13px; }
 #arcade-dialog[data-game="arena"] .expedition-route { grid-column:1/-1; gap:4px; font-size:10px; }
 #arcade-dialog[data-game="arena"] .expedition-route li { flex:1; padding:1px 3px; text-align:center; }
 #arcade-dialog[data-game="arena"] .expedition-tempo { display:none; }
 #arcade-dialog[data-game="arena"] .game-hud { padding:7px 8px; }
 #arcade-dialog[data-game="arena"] .game-hud strong { font-size:22px; }
 #arcade-dialog[data-game="arena"] .game-vitals { width:140px; }
 #arcade-dialog[data-game="arena"] .game-health-label { font-size:12px; }
 #arcade-dialog[data-game="arena"] .game-health-label > span:first-child { display:none; }
 #arcade-dialog[data-game="arena"] .game-skills { gap:4px; }
 #arcade-dialog[data-game="arena"] .game-status-strip { left:104px; right:var(--arena-edge); bottom:calc(var(--arena-slot) + 32px); width:auto; transform:none; font-size:11px; text-align:right; }
 #arcade-dialog[data-game="arena"] #game-detail { text-align:right; }
 #arcade-dialog[data-game="arena"] #dungeon-map { width:96px; height:60px; }
 #arcade-dialog[data-game="arena"] .dungeon-map-wrap small { display:none; }
 #arcade-dialog[data-game="arena"] .expedition-boss { top:64px; left:8px; width:calc(100% - 120px); }
}
/* On narrow screens the centered ability row and corner map need separate heights. */
@media(max-width:480px) {
 #arcade-dialog[data-game="arena"] .dungeon-map-wrap { bottom:calc(var(--arena-edge) + var(--arena-slot) + 12px); }
 #arcade-dialog[data-game="arena"] .game-status-strip { right:calc(clamp(56px,calc(100vw - 264px),96px) + var(--arena-edge) + 14px); }
}
@media(max-width:360px) {
 #arcade-dialog[data-game="arena"] #dungeon-map { width:clamp(56px,calc(100vw - 264px),96px); height:auto; }
 #arcade-dialog[data-game="arena"] .forge-open { width:32px; }
}
#arcade-dialog[data-game="arena"] [hidden] { display:none; }

#arcade-dialog[data-game="arena"] .game-stage { min-height:0; }
#arcade-dialog[data-game="arena"] .game-help[open] p { display:block; }
@media(max-height:500px) and (orientation:landscape) {
 #arcade-dialog[data-game="arena"] #dungeon-map { width:clamp(56px,calc(100vw - 264px),96px); height:auto; }
 #arcade-dialog[data-game="arena"] .dungeon-map-wrap small { display:none; }
}

#arena-difficulties { grid-template-columns:repeat(3,minmax(0,1fr)); }
#arena-difficulties p { grid-column:1/-1;font-size:.85rem;line-height:1.45;margin:0; }
@media(max-width:600px){#arena-difficulties {grid-template-columns:1fr;} }

/* Skywrath: optional stats disclosure, no extra full-width HUD strip. */
.game-mana{position:relative;width:132px;margin-top:4px;height:15px;color:#e6f4ff;font:700 10px/15px system-ui;text-align:center}
.game-mana progress{appearance:none;width:100%;height:100%;position:absolute;inset:0;border:1px solid #497894;border-radius:4px;background:#10293b}
.game-mana progress::-webkit-progress-bar{background:#10293b;border-radius:3px}.game-mana progress::-webkit-progress-value{background:linear-gradient(90deg,#317dc1,#8bc9ef);border-radius:3px}.game-mana progress::-moz-progress-bar{background:#398bd3}
.game-mana span{position:relative;text-shadow:0 1px 2px #001726}
.hero-stats{pointer-events:auto;margin-top:7px;font:700 11px/1.4 system-ui;position:relative;color:#d8e5df}
.hero-stats summary{cursor:pointer;background:#0e202ac9;padding:5px 7px;border:1px solid #63889b66;border-radius:5px;list-style:none}
.hero-stats summary:focus-visible{outline:2px solid #8bc9ef}.hero-stats[open] summary{color:#9ddcff}
.hero-stats-body{position:absolute;z-index:6;top:33px;left:0;width:245px;max-height:min(54vh,390px);overflow:auto;background:#0c1b24f5;border:1px solid #527487;padding:14px;box-shadow:0 10px 30px #0008;border-radius:9px;backdrop-filter:blur(12px)}
.hero-stats-body>strong{font-size:18px}.hero-stats-body>small{display:block;color:#afc8cf}.hero-stats dl{margin:10px 0}.hero-stats dl>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #ffffff0b}.hero-stats dd{margin:0;color:#a6e0ff;text-align:right}.hero-stats p{font-size:11px;white-space:normal}
.game-skill.skill-no-mana::after{background:#173756cc}.game-skill.skill-no-mana img{filter:saturate(.35) brightness(.7)}
.game-upgrades{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.game-upgrade small{line-height:1.5}
@media(max-width:600px){.game-upgrades{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.game-upgrade{padding:10px}.game-upgrade .upgrade-icon{width:36px;height:36px}.game-upgrade strong{font-size:16px}.game-upgrade small{font-size:11px}.hero-stats-body{width:230px}.hero-stats summary{font-size:10px;padding:4px}.game-mana{width:110px}}
.game-overlay-card:has(#game-upgrades:not([hidden])) .game-overlay-actions{display:none}
@media(max-width:600px){.game-upgrades{grid-template-columns:1fr}.game-upgrade{gap:7px 12px;min-height:0;grid-template-columns:40px 1fr;padding:12px}.game-upgrade strong{font-size:19px;padding-right:24px}.game-upgrade small{font-size:13px;line-height:1.4}}

/* v12: six learned spells and dash stay centered; map left, six passive items right. */
#arcade-dialog[data-game="arena"] .dungeon-map-wrap { left:var(--arena-edge);right:auto;bottom:var(--arena-edge); }
#arcade-dialog[data-game="arena"] .game-control-heading { bottom:152px; }
#arcade-dialog[data-game="arena"] .game-autocast-settings { position:relative;pointer-events:auto; }
.game-autocast-settings>summary { display:grid;place-items:center;width:32px;height:32px;border:1px solid #abc7c466;border-radius:6px;background:#102329e8;cursor:pointer;list-style:none; }
.game-autocast-settings>summary::-webkit-details-marker { display:none; }
.game-autocast-settings[open]>summary { border-color:#ebc979;color:#ffdf8c; }
.autocast-settings-body { position:absolute;left:0;bottom:calc(100% + 8px);width:min(330px,calc(96vw - 70px));padding:15px;border:1px solid #718b9b;border-radius:8px;background:#0d1c28f5;backdrop-filter:blur(10px);box-shadow:0 8px 30px #0008;color:#edf2e7;z-index:6;font:500 13px/1.5 system-ui; }
.autocast-settings-body strong { display:block;font-size:16px;margin-bottom:8px; }
.autocast-settings-body label { display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 0;font-weight:700; }
.autocast-settings-body input { accent-color:#eac574;width:17px;height:17px; }
.autocast-settings-body p { margin:3px 0 8px;color:#bdd0d4; }
#arcade-dialog[data-game="arena"] .game-inventory { position:absolute;right:var(--arena-edge);bottom:var(--arena-edge);display:grid;grid-template-columns:repeat(3,40px);gap:4px;pointer-events:auto; }
.inventory-label { grid-column:1/-1;font:700 10px/1.2 system-ui;letter-spacing:.06em;color:#b3c9c9;text-align:center; }
.inventory-slot { position:relative;display:block;padding:0;width:40px;height:40px;min-height:0;border:1px solid #77999a80;border-radius:5px;background:#10222de6;overflow:hidden; }
.inventory-slot img { display:block;width:100%;height:100%; }
.inventory-slot small { position:absolute;right:2px;bottom:1px;color:#ffe1a7;background:#0a1823e8;padding:0 3px;font:700 11px/15px system-ui;border-radius:3px; }
.inventory-slot.is-empty { border-color:#69818b4d; }
.inventory-slot:focus-visible { outline:2px solid #eac574;outline-offset:2px; }
#game-item-info { position:absolute;right:0;bottom:calc(100% + 9px);width:min(290px,calc(96vw - 40px));margin:0;padding:12px;border:1px solid #718b9b;border-radius:7px;background:#0d1c28f5;box-shadow:0 6px 24px #0008;color:#e5eadd;font:600 13px/1.5 system-ui; }
#arcade-dialog[data-evolution="true"] .game-status-strip { width:min(500px,calc(100% - 420px)); }
#arcade-dialog[data-evolution="true"] .game-skill-slot:has(.skill-locked) { opacity:.55; }
#arcade-dialog[data-evolution="true"] .game-skill-slot.autocast-on:has(.skill-evolved)::after { border-color:#ffe9ac;box-shadow:0 0 9px #edb95188,inset 0 0 5px #edc56d44; }
@media(max-width:900px) {
 #arcade-dialog[data-evolution="true"] { --arena-slot:44px; }
 #arcade-dialog[data-game="arena"] #dungeon-map { width:112px;height:70px; }
 #arcade-dialog[data-game="arena"] .dungeon-map-wrap small { display:none; }
 #arcade-dialog[data-game="arena"] .game-control-heading { bottom:92px; }
 #arcade-dialog[data-game="arena"] .game-inventory { grid-template-columns:repeat(3,34px);gap:3px; }
 .inventory-slot { width:34px;height:34px; }
 #arcade-dialog[data-evolution="true"] .game-status-strip { width:calc(100% - 280px); }
}
@media(max-width:700px) {
 #arcade-dialog[data-evolution="true"] { --arena-slot:clamp(36px,5.7vw,40px); }
 #arcade-dialog[data-game="arena"] .dungeon-map-wrap { bottom:calc(var(--arena-slot) + var(--arena-edge) + 12px); }
 #arcade-dialog[data-game="arena"] #dungeon-map { width:96px;height:60px; }
 #arcade-dialog[data-game="arena"] .game-inventory { bottom:calc(var(--arena-slot) + var(--arena-edge) + 12px);grid-template-columns:repeat(3,32px); }
 .inventory-slot { width:32px;height:32px; }
 #arcade-dialog[data-game="arena"] .game-control-heading { bottom:calc(var(--arena-slot) + var(--arena-edge) + 82px);gap:5px; }
 #arcade-dialog[data-game="arena"] .forge-open { width:32px;height:32px; }
 #arcade-dialog[data-game="arena"] .game-status-strip { left:var(--arena-edge);right:var(--arena-edge);bottom:calc(var(--arena-slot) + var(--arena-edge) + 123px);transform:none;width:auto;font-size:11px;text-align:center; }
 #arcade-dialog[data-game="arena"] #game-detail { text-align:center; }
 #arcade-dialog[data-evolution="true"] .game-skill kbd { font-size:11px;width:15px;height:16px; }
 #arcade-dialog[data-evolution="true"] .skill-autocast-toggle { width:20px;height:20px;right:-3px;top:-5px; }
 #arcade-dialog[data-evolution="true"] .game-skills { gap:4px; }
 #arcade-dialog[data-evolution="true"] .game-skill.skill-cooling::before { font-size:14px;line-height:20px; }
 #arcade-dialog[data-evolution="true"] .game-skill::before { font-size:10px;line-height:14px; }
 .autocast-settings-body { left:-37px;max-height:48vh;overflow:auto; }
}
#arcade-dialog[data-game="arena"] [hidden] { display:none; }