:root {
  color-scheme: dark;
  --bg: #172a32;
  --text: #eef0f4;
  --muted: #98a5b6;
  --purple: #f2c481;
  --green: #9cddc5;
  --line: #aab9cd1c;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
[hidden] { display: none !important; }

/* A single portrait playfield, on desktop as well as on a phone. */
.game-shell { width: min(100%, 472px); margin: 0 auto; padding: 20px 16px 16px; }
.site-header { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; min-height: 64px; }
.brand { justify-self: center; text-align: center; font-weight: 900; font-size: 30px; letter-spacing: 3px; white-space: nowrap; text-shadow: 0 3px 0 #070c1880; }
.brand > span { color: var(--purple); }
.brand small { display: block; color: #a7b1c4; font-size: 8px; font-weight: 500; letter-spacing: 3px; margin-top: 5px; text-shadow: none; }
.header-actions { display: flex; justify-content: flex-end; gap: 8px; }
.presence-status { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; margin: 2px 0 3px; color: #8fa2b5; font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.6; }
.presence-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #67768b; }
.presence-status[data-state="ready"] { color: #b3d8bd; }
.presence-status[data-state="ready"] .presence-dot { background: #a1dbb3; box-shadow: 0 0 7px #a1dbb344; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #95a1b336; border-radius: 50%; background: #ffffff04; color: #bec7d6; font-size: 20px; padding: 0; }
.icon-button:hover { background: #ffffff0c; color: #fff; }
.difficulty-options { display: flex; justify-content: center; gap: 6px; margin: 12px 0 16px; }
.difficulty-options button { min-width: 60px; padding: 5px 13px; border: 1px solid transparent; border-radius: 20px; background: transparent; color: #8998ad; font-size: 11px; }
.difficulty-options button:hover { background: #ffffff07; }
.difficulty-options button.selected { background: #b8a6f114; border-color: #b8a6f13b; color: #d1c9f2; }
.game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px 8px; }
h1 { margin: 0; font-size: 11px; font-weight: 500; color: #adb8cb; letter-spacing: 1px; }
.run-stats { display: flex; gap: 16px; color: #aab4c6; font-size: 10px; font-variant-numeric: tabular-nums; }
#total { color: #738197; }
.progress-track { height: 3px; margin: 0 8px; border-radius: 2px; overflow: hidden; background: #bdc8d00b; }
#progress { height: 100%; background: #b0a5d7; transition: width .25s; }

/* The scene is open; the cards supply the structure instead of a dashboard box. */
.landscape { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 50% 22%, #67847530, transparent 65%), radial-gradient(circle at 15% 12%, #ffc87817, transparent 35%), #172a32; }
.landscape::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#a2c1bb16 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(#000, transparent 85%); }
.forest-canopy { position: absolute; inset: -140px -80px auto; height: 300px; opacity: .26; background: radial-gradient(ellipse at 10% 30%, #58865d 0 20%, transparent 21%), radial-gradient(ellipse at 80% 10%, #365f46 0 25%, transparent 26%); }
.forest-floor { position: absolute; inset: auto -15% -180px; height: 350px; border-radius: 50%; background: #43604a20; box-shadow: 0 -35px 0 #58794a0b; }
.board-area { position: relative; margin-top: 13px; }
.board { position: relative; width: 100%; aspect-ratio: 600 / 590; }
/* A slightly sliding tap must not pan the page. Keep pinch zoom and allow
   ordinary scrolling when a gesture starts outside the gameplay surfaces. */
#board, #reserve, .tools, #expedition-feather, #expedition-active { touch-action: pinch-zoom; -webkit-user-select: none; user-select: none; }
.tile { position: absolute; display: grid; place-items: center; width: 12%; height: 12.20339%; padding: 0; border: 2px solid #e9d4a8; border-radius: 7px; background: linear-gradient(145deg, #fff4d9, #d9c9a8); box-shadow: 0 4px 0 #0b1420, 0 5px 5px #0006, inset 0 1px 0 #dceaff30; transition: filter .15s, transform .15s, border-color .15s; isolation: isolate; }
.tile::after { content: ""; position: absolute; bottom: 4px; left: calc(50% - 7px); width: 14px; height: 2px; border-radius: 2px; background: var(--rarity, #c3cedd); opacity: .85; }
.tile img { width: 96%; height: 96%; object-fit: contain; border-radius: 4px; pointer-events: none; user-select: none; filter: drop-shadow(0 2px 2px #0004); }
.tile:not(:disabled):hover { border-color: #e3d5ff; box-shadow: 0 4px 0 #0b1420, 0 0 10px #c0b0ef50; transform: translateY(-2px); }
.tile:not(:disabled):active { transform: translateY(2px); }
.tile.blocked { filter: brightness(.55) saturate(.18); border-color: #263342; background: #192535; box-shadow: 0 3px 0 #101827; }
.tile.blocked::after { opacity: .35; }
.tile.fresh { animation: tile-in .55s ease both; }
.supply-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 14%; color: #8e9eaf; font-size: 9px; letter-spacing: 1px; pointer-events: none; }
.supply-labels span { width: 90px; text-align: center; }
.board-caption { display: flex; justify-content: space-between; margin: 18px 8px 11px; color: #8697aa; font-size: 9px; }
#combo { color: #d4c6ef; font-size: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; white-space: nowrap; }
#combo.show { animation: combo 1.8s ease both; }

/* The seven-slot tray and three square props stay in the same visual column. */
.inventory-label { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 7px; font-size: 10px; color: #bdc9d3; }
.inventory-copy { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 10px; }
.inventory-copy > [data-i18n] { flex-shrink: 0; }
.inventory-label strong { flex-shrink: 0; font-size: 10px; color: #d5cbee; font-weight: 500; }
.inventory-label strong span { color: #8b9bad; }
.rack { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px; border: 2px solid #161f2c; border-top-color: #677988; border-radius: 9px; background: #718291; box-shadow: 0 5px 0 #111b29, inset 0 1px 0 #c8d1d54d; }
.slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: #303e51; box-shadow: inset 0 2px 3px #1119257a, 0 1px 0 #c5d3db36; }
.slot::before { content: ""; width: 4px; height: 4px; background: #6d7c9166; border-radius: 50%; }
.slot .tile { inset: 0; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 2px 0 #1b2532; pointer-events: none; animation: tile-in .2s ease; }
.status { min-height: 15px; text-align: center; color: #a0b0c0; font-size: 10px; margin: 14px 0 13px; line-height: 1.5; }
.status.danger { color: #f2afa0; }
.rack.danger { background: #95746f; border-top-color: #d7a397; }
.reserve-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0 8px 12px; color: #c2b9dd; font-size: 10px; }
.reserve-area small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
#reserve { display: flex; gap: 7px; }
#reserve .tile { position: relative; width: 43px; height: 43px; }
.tools { display: flex; align-items: center; justify-content: center; gap: 28px; }
.tool { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 88px; height: 85px; padding: 7px 3px 15px; border: 2px solid #202937; border-top-color: #7c8294; border-radius: 12px; background: linear-gradient(#545c73, #41495f); box-shadow: 0 4px 0 #111a29, inset 0 1px 0 #c9cbe126; }
.tool-icon { color: #e0d7f9; font-size: 29px; line-height: 1; }
.tool b { font-weight: 500; font-size: 10px; }
.tool:hover:not(:disabled) { background: linear-gradient(#686582, #504e6c); }
.tool:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #111a29; }
.tool:disabled { opacity: .6; }
.tool.used { opacity: .33; }
.charge { position: absolute; bottom: -7px; border: 1px solid #394b44; border-radius: 8px; padding: 2px 8px; background: #aac7ac; color: #243c31; font-size: 8px; white-space: nowrap; }
.tool.used .charge { background: #74808c; color: #202a36; border-color: #425060; }
.free-note { text-align: center; color: #8396a8; font-size: 9px; margin: 21px 0 0; }
footer { display: flex; justify-content: space-between; gap: 10px; color: #718599; font-size: 8px; margin-top: 20px; padding: 0 5px; }
footer strong { font-weight: 500; color: #9caebf; margin-left: 3px; }
footer button { border: 0; padding: 0; margin-left: 4px; background: none; color: #a2a7c1; font-size: 8px; }

/* Existing help, credits, and end-of-round dialogs. */
dialog { width: min(440px, calc(100% - 36px)); max-height: calc(100svh - 36px); padding: 35px; background: #202a3a; color: #e7e7f1; border: 1px solid #aa99da55; border-radius: 17px; box-shadow: 0 25px 100px #0008; }
dialog::backdrop { background: #070a15b3; backdrop-filter: blur(7px); }
.modal-close { position: absolute; top: 13px; right: 13px; width: 27px; height: 27px; }
.modal-symbol { font-size: 40px; color: var(--purple); margin: 8px 0 13px; }
dialog h2 { font-size: 24px; margin: 10px 0 13px; }
dialog p, dialog li { font-size: 13px; line-height: 1.95; color: #a9b9cb; }
dialog ol { padding-left: 22px; }
dialog a { color: var(--purple); text-decoration: underline; }
.primary-button, .secondary-button { width: 100%; padding: 13px 16px; border: 0; border-radius: 8px; background: #b4a1ed; color: #1c1730; font-weight: 650; margin-top: 13px; }
.secondary-button { background: #ffffff09; border: 1px solid #aa99da44; color: #d9cff6; font-weight: 400; }
.result-stats { display: flex; gap: 26px; padding: 16px 0; margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats span { font-size: 10px; color: var(--muted); }
.result-stats b { display: block; font-size: 20px; color: #e9e3fa; font-weight: 500; margin-top: 6px; }
.modal-eyebrow { font-size: 10px; letter-spacing: 2px; color: #9890b6; }
.keyboard-note { font-size: 11px !important; }
.noscript { padding: 40px; text-align: center; }
@keyframes tile-in { from { opacity: 0; transform: translateY(-5px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes combo { 0% { opacity: 0; } 20%,65% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 501px) {
  .game-shell { width: clamp(350px, 47svh, 472px); padding-top: 12px; }
}
@media (max-width: 500px) {
  .game-shell { padding: max(8px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  .site-header { min-height: 54px; grid-template-columns: 76px 1fr 76px; }
  .brand { font-size: 27px; }
  .brand small { font-size: 7px; letter-spacing: 2px; }
  .difficulty-options { margin-top: 8px; margin-bottom: 13px; }
  .difficulty-options button { padding: 4px 12px; }
  .board-area { margin-top: 10px; }
  .tile { border-radius: 5px; }
  .tile::after { bottom: 3px; width: 12px; left: calc(50% - 6px); }
  .supply-labels { padding: 0 12%; font-size: 8px; }
  .board-caption { margin-top: 15px; }
  .tool { width: 78px; height: 74px; border-radius: 10px; }
  .tool-icon { font-size: 25px; }
  .tools { gap: 25px; }
  .status { margin-top: 12px; margin-bottom: 12px; font-size: 9px; }
  .free-note { margin-top: 18px; font-size: 8px; }
  footer { margin-top: 17px; font-size: 7px; }
  footer button { font-size: 7px; }
}
@media (max-height: 760px) {
  .game-shell { width: min(100%, 392px); padding-top: 7px; }
  .site-header { min-height: 42px; }
  .brand small { display: none; }
  .difficulty-options { margin: 4px 0 7px; }
  .difficulty-options button { padding-top: 3px; padding-bottom: 3px; }
  .board-area { margin-top: 7px; }
  .board-caption { display: none; }
  .inventory-area { margin-top: 10px; }
  .status { margin-top: 9px; margin-bottom: 9px; }
  .tool { height: 62px; width: 73px; }
  .tool-icon { font-size: 23px; }
  .free-note { margin-top: 16px; }
  footer { margin-top: 13px; }
}
@media (max-height: 620px) {
  .board-area { margin-top: 3px; }
  .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tools { margin-top: 8px; }
}
@media (max-width: 350px) {
  .site-header { grid-template-columns: 66px 1fr 66px; }
  .brand { font-size: 24px; letter-spacing: 2px; }
  .icon-button { width: 29px; height: 29px; }
  .header-actions { gap: 6px; }
  .tools { gap: 20px; }
  .supply-labels { padding: 0 10%; }
  .rack { padding: 6px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #combo.show { opacity: 1; }
}

/* Compact language and leaderboard controls keep the portrait layout intact. */
.play-menu { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 4px 16px; }
.play-menu .difficulty-options { margin: 0; gap: 2px; }
.play-menu .difficulty-options button { min-width: 0; padding: 5px 10px; }
.menu-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.text-button { background: none; border: 0; padding: 3px 0; color: #c9bedf; font-size: 10px; }
.text-button:hover { color: #eee4ff; text-decoration: underline; }
.language-button { background: #b8a6f10b; border: 1px solid #a6acc13b; border-radius: 6px; padding: 5px 8px; min-width: 34px; color: #d4d8e8; font-size: 10px; }
#modal-language { position: absolute; top: 13px; right: 51px; }
.result-button { display: block; margin: 16px auto -7px; }
.brand { font-size: 19px; letter-spacing: 1px; }
.brand small { letter-spacing: 2px; }
html[lang="en"] .supply-labels { letter-spacing: 0; }
html[lang="en"] .free-note { font-size: 8px; }
.scope-note, dialog .scope-note { color: #a8b7c9; font-size: 10px; line-height: 1.6; }
.score-entry { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 6px; }
.score-entry label { display: block; font-size: 12px; margin: 12px 0 8px; }
.score-input-row { display: flex; gap: 8px; }
.score-input-row input { width: 0; min-width: 0; flex: 1; padding: 11px; border: 1px solid #77839866; border-radius: 7px; background: #121d2b; color: #eef0fa; font: inherit; font-size: 16px; }
.score-input-row input:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
.score-input-row input[aria-invalid="true"] { border-color: #f2a796; }
.score-input-row .primary-button { width: auto; margin: 0; font-size: 11px; padding: 10px; max-width: 47%; }
.primary-button:disabled { opacity: .45; cursor: default; }
dialog .input-hint { color: #92a3b8; font-size: 10px; line-height: 1.6; margin: 8px 0; }
dialog .form-error, dialog .storage-warning { font-size: 11px; line-height: 1.7; color: #f1b1a0; }
.form-error:empty { display: none; }
dialog .save-feedback { color: #bce0be; font-size: 12px; }
dialog .ranking-rules { font-size: 11px; line-height: 1.7; }
.ranking-tabs { display: flex; gap: 6px; margin: 19px 0 15px; }
.ranking-tabs button { flex: 1; padding: 8px 4px; background: #ffffff04; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
.ranking-tabs button.selected { border-color: #b6a0ef77; background: #b6a0ef17; color: #e1d5ff; }
.ranking-scroll { max-height: 330px; overflow: auto; }
.ranking-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.ranking-table th { position: sticky; top: 0; background: #202a3a; color: #abb7ca; font-size: 10px; font-weight: 500; }
.ranking-table td, .ranking-table th { padding: 11px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.ranking-table td:nth-child(2) { max-width: 120px; overflow-wrap: anywhere; }
.ranking-table td:nth-child(3), .ranking-table th:nth-child(3) { text-align: center; }
.ranking-table td:last-child { white-space: nowrap; font-size: 10px; }
.ranking-table .own-score { color: #d8c9ff; background: #b39be80b; }
dialog .empty-ranking { padding: 22px 0; text-align: center; font-size: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 500px) {
  .play-menu { margin-top: 8px; margin-bottom: 13px; }
  .play-menu .difficulty-options button { padding: 4px 8px; font-size: 10px; }
  .brand { font-size: 17px; }
  .menu-actions { gap: 8px; }
  dialog { padding: 35px 22px 24px; }
  .result-stats { gap: 18px; }
  .result-stats b { font-size: 16px; }
}
@media (max-width: 350px) {
  .brand { font-size: 15px; letter-spacing: .3px; }
  .play-menu { gap: 4px; margin-left: 0; margin-right: 0; }
  .play-menu .difficulty-options button { padding: 4px 6px; font-size: 9px; }
  .menu-actions { gap: 6px; }
  .menu-actions .text-button { font-size: 9px; }
  .language-button { font-size: 9px; padding: 4px 6px; }
  .ranking-table td, .ranking-table th { padding-left: 3px; padding-right: 3px; }
}
@media (max-height: 760px) {
  .play-menu { margin-top: 4px; margin-bottom: 7px; }
  .play-menu .difficulty-options button { padding-top: 3px; padding-bottom: 3px; }
}

/* The soundtrack remains visible and playable without pausing the round. */
.music-panel { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #202936; }
.music-heading, .music-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; }
.music-heading { margin-bottom: 10px; color: var(--purple); }
#music-player { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.music-volume { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.music-volume input { width: 74px; accent-color: #9cddc5; }
#music-toggle { color: #f2c481; white-space: nowrap; }
.music-actions > span { color: var(--muted); }
.music-panel p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; color: var(--muted); }
.music-actions { margin-top: 8px; }
.tile.blind img, .tile.blind::after { visibility: hidden; }
.tile.blind { background: repeating-linear-gradient(135deg, #465269 0 4px, #37445a 4px 8px); }

/* Teleporter energy and recovered loot: all overlays ignore pointer input. */
.fx-layer { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; contain: strict; }
.fx-layer * { pointer-events: none !important; }
.fx-surface { z-index: -1; }
.fx-capacitor-beam { height: 4px; border-block: 1px solid #f3dfff; background: #b187f2; box-shadow: 0 0 9px #c398ff; transform-origin: left center; }
.fx-fuse-pop { display: grid !important; place-items: center; width: 44px; height: 44px; border: 3px dashed #ffd089; border-radius: 50%; color: #ffe8bd; background: #72532b55; font: 700 19px system-ui; }
.equipment-role { color: #bde5dc; font-size: 11px; font-style: normal; }
.equipment-feedback { height: 40px; overflow: auto; margin: 7px 0 0; padding: 5px 8px; border-left: 2px solid #e6c78e; background: #e6c78e0b; color: #e7d2ad; font-size: 10px; line-height: 15px; }
.fx-layer > i { position: absolute; display: block; pointer-events: none; }
.fx-loot { display: grid !important; place-items: center; border: 1px solid var(--fx-color); border-radius: 7px; background: #f3e5c7; box-shadow: 0 0 18px #bdb2f15c; }
.fx-loot img { width: 96%; height: 96%; object-fit: contain; }
.fx-ring { width: 32px; height: 32px; border: 1px solid var(--fx-color); border-radius: 50%; box-shadow: 0 0 12px var(--fx-color); }
.fx-mote { width: 4px; height: 4px; border-radius: 1px; background: var(--fx-color); box-shadow: 0 0 7px var(--fx-color); }
.fx-blast-core { border-radius: 50%; background: radial-gradient(circle, #fff5d5 0 7%, #ffd77de6 15%, #fb8b397a 35%, #c8422022 52%, transparent 68%); }
.fx-blast-core::after { content: ''; position: absolute; inset: 12%; background: #ffe6a9b0; clip-path: polygon(50% 0,56% 38%,85% 15%,62% 44%,100% 50%,62% 57%,85% 85%,56% 62%,50% 100%,43% 62%,15% 85%,38% 56%,0 50%,38% 43%,15% 15%,44% 38%); }
.fx-blast-wave { border: 2px solid #ffe6ae; border-radius: 50%; box-shadow: 0 0 12px #ffae5b99, inset 0 0 8px #ff9d4540; }
.fx-chain-wave { border-width: 3px; border-color: #e8c59a; box-shadow: 0 0 24px #f9b06160, inset 0 0 16px #ffbe6422; }
.fx-shrapnel { width: 15px; height: 3px; border-radius: 50%; background: linear-gradient(90deg, transparent, #ffbd65, #fff0c5); box-shadow: 0 0 6px #ff9c4f; }
.fx-flame { border-radius: 65% 35% 55% 45%; background: radial-gradient(ellipse at 50% 70%, #ffe6a9 0 8%, #ffae59b0 24%, #f3613770 45%, transparent 65%); }
.fx-ember { width: 4px; height: 9px; border-radius: 50%; background: #ffd789; box-shadow: 0 0 9px #ff7a38; }
.fx-hit-loot { background: #352d28; box-shadow: 0 0 16px #ffbd6580, inset 0 0 12px #ffb85a55; }
.fx-electric-hit { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle, #efffff 0 5%, #9cddff99 20%, transparent 65%); }
.fx-chain-count { padding: 3px 10px; border-right: 2px solid var(--fx-color); border-radius: 4px; background: #131d2ded; color: var(--fx-color); font-size: clamp(18px, 5vw, 26px); font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.2; text-shadow: 0 0 12px #ffba5c44; transform-origin: right top; }
.fx-portal { width: min(38vw, 150px); aspect-ratio: 1; border: 2px solid #c8b1ff; border-radius: 50%; background: radial-gradient(ellipse, #9875da05 40%, #b99aee33 65%, transparent 69%); box-shadow: 0 0 30px #b19ad360, inset 0 0 24px #b7a0eb50; }
.fx-portal::before, .fx-portal::after { content: ''; position: absolute; inset: 10px; border: 1px dashed #e3d5ff9c; border-radius: 50%; }
.fx-portal::after { inset: -14px; border-style: solid; border-color: #bda2ff28; }
.slot .tile { animation: none; }

/* A finished parts crate rolls through the workshop delivery ring. */
.result-scene { position: relative; height: 128px; margin: 10px -10px 18px; overflow: hidden; pointer-events: none; color: #cbb4fc; background: radial-gradient(ellipse at 50% 55%, #9576bc25, transparent 65%); }
.result-orbit { position: absolute; width: 105px; height: 42px; top: 67px; left: calc(50% - 52.5px); border: 2px solid #b6a1e7; border-radius: 50%; box-shadow: 0 0 14px #b6a1e754, inset 0 0 12px #b6a1e72e; transform: rotate(-8deg); }
.result-orbit.inner { width: 72px; height: 28px; top: 74px; left: calc(50% - 36px); border-width: 1px; border-color: #e0caff; transform: rotate(8deg); }
.result-beam { position: absolute; top: 0; bottom: 29px; left: calc(50% - 29px); width: 58px; background: linear-gradient(to top, #c6b1f584, #b298e026 60%, transparent); clip-path: polygon(25% 100%, 0 0, 100% 0, 75% 100%); opacity: .65; }
.result-core { position: absolute; top: 44px; left: calc(50% - 12px); width: 28px; height: 28px; transform: rotate(8deg); background: linear-gradient(120deg, #ffe3aa, #c49152); border: 2px solid #f6d49b; border-radius: 4px; }
.result-core span { position: absolute; width: 7px; height: 24px; top: 0; left: 9px; background: #568e8a; border-radius: 0; }
.result-horizon { position: absolute; bottom: 30px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #b5a1d66e, transparent); }
.result-signal { position: absolute; bottom: 5px; left: 0; width: 100%; text-align: center; font-size: 9px; letter-spacing: 1.3px; color: #cab7ed; }
.result-spark { position: absolute; left: var(--x); top: 72px; width: 2px; height: 8px; border-radius: 2px; background: #d8bfff; opacity: .35; transform: translateY(calc(var(--n) * -4px)); }
.scene-enter.escape .result-beam { animation: beam-charge 2.5s ease-out both; }
.scene-enter.escape .result-orbit { animation: orbit-charge 2s ease-out both; }
.scene-enter.escape .result-orbit.inner { animation-delay: .18s; }
.scene-enter.escape .result-core { animation: survivor-extract 2.8s cubic-bezier(.3,.1,.25,1) both; }
.scene-enter.escape .result-spark { animation: mote-rise 2.5s ease-out both; animation-delay: calc(var(--n) * 65ms); }
.scene-enter .result-signal { animation: signal-arrive 1s .4s ease-out both; }
.defeat { background: radial-gradient(ellipse at 50% 55%, #b5696320, transparent 65%); }
.defeat .result-orbit { border-color: #a97170; border-style: dashed; box-shadow: 0 0 10px #bd74631c; transform: rotate(12deg); }
.defeat .result-orbit.inner { border-color: #8e6d78; }
.defeat .result-beam { background: linear-gradient(to top, #c47e6d44, transparent); opacity: .25; }
.defeat .result-core { background: linear-gradient(120deg, #b29ba2, #52596c); transform: translate(10px, 13px) rotate(68deg); }
.defeat .result-signal { color: #d9a6a2; }
.defeat .result-spark { height: 13px; background: #9c99b8; opacity: .2; }
.scene-enter.defeat .result-core { animation: survivor-fall 1.3s ease-in both; }
.scene-enter.defeat .result-orbit { animation: orbit-collapse 1.6s ease-out both; }
.scene-enter.defeat .result-spark { animation: rain-fall 1.8s ease-in both; animation-delay: calc(var(--n) * 65ms); }
@keyframes beam-charge { 0% { opacity: 0; transform: scaleX(.1); } 45% { opacity: .9; transform: scaleX(1.15); } 100% { opacity: .65; transform: scaleX(1); } }
@keyframes orbit-charge { from { opacity: 0; scale: .25; } to { opacity: 1; scale: 1; } }
@keyframes survivor-extract { 0% { opacity: 0; transform: translateY(20px) rotate(8deg); } 25% { opacity: 1; } 80% { opacity: 1; transform: translateY(-28px) rotate(0); } 100% { opacity: 0; transform: translateY(-72px) scale(.6); } }
@keyframes mote-rise { 0% { opacity: 0; transform: translateY(18px); } 30% { opacity: .8; } 100% { opacity: .15; transform: translateY(-64px); } }
@keyframes signal-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes survivor-fall { from { transform: translate(0,-12px) rotate(8deg); } to { transform: translate(10px,13px) rotate(68deg); } }
@keyframes orbit-collapse { from { opacity: .9; scale: 1.25; } to { opacity: 1; scale: 1; } }
@keyframes rain-fall { from { opacity: 0; transform: translate(-8px,-65px); } 30% { opacity: .45; } to { opacity: .1; transform: translate(12px,20px); } }
@media (max-height: 700px) {
  .result-scene { height: 105px; margin-top: 4px; margin-bottom: 9px; }
  .result-orbit { top: 47px; }
  .result-orbit.inner { top: 54px; }
  .result-core { top: 24px; }
  .result-spark { top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none; }
  .scene-enter.escape .result-core { opacity: 1; }
}

.fx-old-board { position: absolute; pointer-events: none; transform-origin: 50% 50%; }
.fx-restart-portal { width: min(46vw, 180px); }

/* On wide screens, rankings and companions flank the playfield. */
.leaderboard-panel { width: min(calc(100% - 24px), 440px); margin: 24px auto 32px; padding: 20px; border: 1px solid #aab9cd26; border-radius: 14px; background: linear-gradient(155deg, #2b3548ed, #1d2737f5); box-shadow: 0 12px 32px #090d1726; scroll-margin: 20px; }
.leaderboard-panel:focus-visible { outline: 1px solid #bdb2f166; outline-offset: 4px; }
.leaderboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leaderboard-heading h2 { font-size: 15px; font-weight: 600; margin: 0; color: #ded8f0; letter-spacing: .3px; }
.leaderboard-heading .text-button { flex-shrink: 0; }
.leaderboard-heading .text-button:disabled { opacity: .4; text-decoration: none; }
.leaderboard-panel .scope-note { margin: 8px 0 0; font-size: 10px; }
.leaderboard-panel .ranking-tabs { margin: 18px 0 12px; }
.leaderboard-panel .ranking-tabs button { font-size: 10px; padding: 8px 2px; }
.leaderboard-panel .ranking-rules { font-size: 10px; line-height: 1.7; color: #93a4b9; margin: 0 0 12px; }
.leaderboard-panel .ranking-scroll { max-height: 380px; scrollbar-width: thin; scrollbar-color: #68758b #1e2838; }
.leaderboard-panel .ranking-table { table-layout: fixed; }
.leaderboard-panel .ranking-table th:first-child { width: 13%; }
.leaderboard-panel .ranking-table th:nth-child(2) { width: 37%; }
.leaderboard-panel .ranking-table th:nth-child(3) { width: 17%; }
.leaderboard-panel .ranking-table th:last-child { width: 33%; text-align: right; }
.leaderboard-panel .ranking-table td, .leaderboard-panel .ranking-table th { padding: 12px 3px; }
.leaderboard-panel .ranking-table td:first-child { color: #8396b0; font-size: 10px; }
.leaderboard-panel .ranking-table tr:nth-child(-n+3) td:first-child { color: #dec591; font-weight: 700; }
.leaderboard-panel .ranking-table td:last-child { text-align: right; font-size: 9px; }
.leaderboard-panel .ranking-table td:nth-child(2) { font-size: 11px; }
.leaderboard-panel .ranking-count, .ranking-browse-note { font-size: 9px; line-height: 1.6; color: #879bb3; margin: 12px 0 0; }
.ranking-browse-note { border-top: 1px solid var(--line); padding-top: 12px; }
.leaderboard-panel .empty-ranking { font-size: 11px; line-height: 1.8; color: #a1b0c5; text-align: center; padding: 24px 8px; margin: 0; }
.ranking-empty { padding: 20px 0 8px; }
.ranking-empty > span { display: block; text-align: center; font-size: 32px; color: #b4a1ed88; }
.ranking-empty .empty-ranking { padding-top: 8px; }
.leaderboard-panel .form-error { font-size: 11px; line-height: 1.8; color: #e3ada7; padding: 16px 0; }
@media (min-width: 1024px) {
  .play-space { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(350px, 472px) minmax(260px, 1fr); column-gap: 20px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
  .play-space > .game-shell { grid-column: 2; grid-row: 1; width: 100%; }
  .leaderboard-panel { grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: 24px; width: min(100%, 320px); margin: 102px 0 28px; padding: 18px 16px; }
  .leaderboard-panel .ranking-scroll { max-height: clamp(140px, calc(100svh - 330px), 430px); }
}

/* Expedition: compact loadout above the board, choices in a paused dialog. */
.expedition-panel { margin: 10px 4px 15px; padding: 12px; border: 1px solid #a594d647; border-radius: 10px; background: linear-gradient(125deg,#292b443b,#16394326); }
.expedition-panel[hidden], .expedition-controls button[hidden], .radar-preview[hidden] { display: none; }
.expedition-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: #bbc7d9; font-size: 10px; }
.expedition-heading .text-button { font-size: 10px; white-space: nowrap; }
.relic-bar { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; font-size: 11px; color: #a8b2c6; }
.relic-chip { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #c2b5ed29; border-radius: 6px; background: #b9a3ed09; text-align: left; font-size: 10px; color: #dfdbee; }
.relic-chip img, .relic-chip .shield-glyph { width: 25px; height: 25px; object-fit: contain; }
.relic-chip small { display: block; margin-top: 2px; color: #9ba8c0; font-size: 9px; }
.shield-glyph { display: grid; place-items: center; color: #c5a2ff; font-size: 29px; text-shadow: 0 0 14px #9e74f277; }
.expedition-controls { display: flex; gap: 7px; flex-wrap: wrap; }
.expedition-controls button { padding: 7px 9px; border: 1px solid #aca2ca40; border-radius: 6px; background: #a697d210; font-size: 10px; }
.expedition-controls button:disabled { opacity: .5; }
.expedition-hint { margin: 8px 0 0; color: #a9b6ce; font-size: 10px; line-height: 1.7; }
.tile.relic-target { border-color: #ccb2ff; filter: brightness(1.15); box-shadow: 0 0 0 2px #a685dd,0 0 16px #b289f270; }
.tile.feather-target { border-color: #edcf86; box-shadow: 0 0 0 2px #c0a566,0 0 16px #edcf8655; }
.tile.radar-pair { border-color: #9cdec2; }
.radar-preview { display: flex; gap: 5px; margin-top: 8px; }
.radar-preview-tile { border: 1px solid #87c4b95c; border-radius: 4px; background: #22373d; }
.radar-preview-tile:nth-child(3) { margin-left: 12px; }
.radar-preview-tile img { width: 30px; height: 30px; object-fit: contain; display: block; }
.reward-choices { display: grid; gap: 10px; margin-top: 18px; }
.reward-choice { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px; text-align: left; background: #c5b4fa0a; color: #eee9fb; border: 1px solid #b9a5e64a; border-radius: 10px; }
.reward-choice:hover, .reward-choice:focus-visible { background: #bca1f31c; border-color: #c8adee; }
.reward-choice img, .reward-choice .shield-glyph { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.reward-choice b { display: block; font-size: 14px; margin: 3px 0; }
.reward-choice small { color: #c2aedf; font-size: 10px; }
.reward-choice[data-rarity="common"] small { color: #ccd5e3; }
.reward-choice[data-rarity="uncommon"] small { color: #9be2a4; }
.reward-choice[data-rarity="equipment"] small { color: #efc077; }
.reward-choice[data-rarity="legendary"] { border-color: #f298a47a; background: linear-gradient(110deg, #ad39461c, #c5b4fa0a); }
.reward-choice[data-rarity="legendary"] small, .reward-choice[data-rarity="legendary"] b { color: #ffafb7; }
.reward-choice > div > span { display: block; color: #adbbce; font-size: 11px; line-height: 1.65; }
.relic-large img, .relic-large .shield-glyph { width: 64px; height: 64px; object-fit: contain; }
.build-summary { font-size: 11px !important; line-height: 1.7 !important; overflow-wrap: anywhere; }
.ranking-build { display: block; font-size: 9px; margin-top: 4px; color: #b8a2dc; }
.fx-lightning { position: absolute; height: 18px; margin-top: -9px; transform-origin: left center; filter: drop-shadow(0 0 4px #75caff); }
.fx-lightning::before, .fx-lightning::after { content: ''; position: absolute; inset: 0; background: #86ceff; clip-path: polygon(0 48%,23% 25%,38% 53%,56% 10%,72% 46%,87% 27%,100% 48%,87% 62%,73% 65%,57% 39%,39% 78%,23% 49%,0 56%); }
.fx-lightning::after { inset: 4px 0; background: #e9fcff; }
.fx-shield { position: absolute; border: 3px solid #c3a5ff; border-radius: 20px; box-shadow: 0 0 28px #b389f780,inset 0 0 18px #c4abff55; }
.fx-radar { position: absolute; height: 2px; background: #a4f6d5; box-shadow: 0 0 18px 5px #9ceac655; }
@media (max-width: 480px) {
  .play-menu { flex-wrap: wrap; row-gap: 8px; }
  .play-menu .difficulty-options { flex-wrap: wrap; }
  .expedition-panel { padding: 9px; }
  .relic-chip { flex: 1 0 40%; }
  .reward-choice { padding: 11px; gap: 9px; }
  dialog { padding: 32px 20px 22px; }
}
.ranking-build summary { cursor: pointer; }
.ranking-build > span { display: block; margin-top: 5px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .relic-chip { flex: 1 1 0; min-width: 0; padding: 4px; gap: 4px; }
  .relic-chip > .relic-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  .relic-chip img, .relic-chip .shield-glyph { width: 21px; height: 25px; flex-shrink: 0; }
  .relic-chip small { font-size: 8px; }
}

/* Checkpoints remain visible without obstructing the board. */
.resume-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 4px 16px; padding: 11px; border: 1px solid #b9a6ed55; border-radius: 9px; background: #b9a6ed0d; color: #c8d0e2; font-size: 10px; line-height: 1.6; }
.resume-banner button { flex-shrink: 0; }
.save-status { margin: 7px 0 0; color: #86ad9b; font-size: 9px; }
.save-status.save-warning { color: #e4b697; line-height: 1.6; }
.relic-chip.proc-flash { animation: relic-proc 1.2s ease; }
@keyframes relic-proc { 25% { border-color: #e7d3ff; box-shadow: 0 0 16px #bbaaef66; background: #bfa8ec2e; } }

/* Expedition: larger builds and the stage-ten equipment lockdown. */
.relic-chip.sealed { border: 1px dashed #d5946f; background: #a9643214; }
.relic-chip.sealed small { color: #f3b68f; }
.gasoline-glyph { width: 27px; font-size: 27px; line-height: 1; color: #f3a475; text-align: center; }
.boss-status { margin: 8px 0; padding: 9px 11px; border: 1px solid #ef987455; border-radius: 7px; background: #ef98740b; color: #f5bda2; font-size: 11px; line-height: 1.6; }
.boss-run .expedition-panel { border-color: #b87960; }
.boss-run .progress-track > div { background: #e99a73; }
.boss-victory { color: #d9c1fc; }
.ten-time { font-size: 32px; font-variant-numeric: tabular-nums; color: #d8cbff; letter-spacing: 2px; }
#expedition-ranking-tabs { margin-top: -5px; }
#relic-slots { margin: 7px 0; color: #aebbd0; }
#ten-player { width: 100%; min-width: 0; border: 1px solid #536078; border-radius: 7px; background: #151f2e; color: #f3f3fc; padding: 12px; font: inherit; }

.reward-choice .gasoline-glyph { width: 44px; flex-shrink: 0; font-size: 38px; }
.relic-large .gasoline-glyph { display: inline-block; width: 64px; font-size: 60px; }
@media (max-width: 480px) {
  .relic-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relic-chip .gasoline-glyph { width: 21px; font-size: 23px; flex-shrink: 0; }
}

/* The Sealer: ambient corners stay outside the playable cards. */
.boss-run .landscape { background: radial-gradient(ellipse at 50% 30%, #76556c50, transparent 65%), linear-gradient(#201c2c, #272333); }
.boss-run .board-area::before { content: ''; position: absolute; inset: -3px; border: 1px solid #d7a28550; border-radius: 15px; pointer-events: none; background: linear-gradient(#dfb290, #dfb290) left top / 24px 2px no-repeat, linear-gradient(#dfb290, #dfb290) right bottom / 24px 2px no-repeat; }
.boss-status { display: flex; align-items: center; gap: 12px; }
.boss-readout { flex: 1; min-width: 0; }
.boss-readout strong, #boss-energy-label { display: block; }
.boss-readout strong { font-weight: 600; font-size: 10px; }
#boss-energy-label { color: #c7b6cc; font-size: 10px; margin-top: 3px; }
.boss-sigil { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #daab85; transform: rotate(45deg); color: #ecd0aa; font-size: 27px; flex-shrink: 0; box-shadow: 0 0 15px #e5ac6b22; }
.boss-meter { display: flex; gap: 5px; margin-top: 7px; }
.boss-meter i { flex: 1; height: 4px; background: #70617545; border-radius: 2px; }
.boss-meter .charged { background: #d4baff; box-shadow: 0 0 9px #c3a5ed70; }
.boss-status.restored { border-color: #95d6c455; }
.boss-status.restored .boss-sigil { color: #a5e9dd; border-color: #a5e9dd; }
.relic-chip.partial { border-color: #c5a8f9; background: #c1a0eb15; }
.relic-chip.partial small { color: #d8c4fb; }
.boss-intro-rule { color: #d6c3ef; font-size: 12px; }
.boss-emblem { position: relative; width: 96px; height: 96px; margin: 4px auto 26px; display: grid; place-items: center; }
.boss-emblem i { position: absolute; inset: 12px; border: 1px solid #dfb593; transform: rotate(45deg); box-shadow: 0 0 22px #cd95632a, inset 0 0 20px #cc985222; animation: seal-arrival 1.8s ease both; }
.boss-emblem i:nth-child(2) { inset: 23px; border-color: #ba9fe3; animation-delay: .15s; }
.boss-emblem span { font-size: 40px; color: #e7c3a4; }
@keyframes seal-arrival { from { transform: rotate(-45deg) scale(1.3); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
.fx-seal-ring { border: 2px solid var(--fx-color); box-shadow: 0 0 20px #c2a4f240, inset 0 0 18px #c2a4f222; }
.fx-seal-ring::after { content: ''; position: absolute; inset: 12%; border: 1px dashed var(--fx-color); }
.fx-seal-shard { width: 14px; height: 5px; background: var(--fx-color); clip-path: polygon(0 0, 100% 20%, 75% 100%, 10% 75%); box-shadow: 0 0 8px var(--fx-color); }
.fx-seal-energy { width: 7px; height: 7px; border-radius: 50%; background: #eadcff; box-shadow: 0 0 12px 3px #c7a6ff80; }
.fx-seal-level { color: var(--fx-color); background: #211a32eb; border: 1px solid #c7a6ff70; border-radius: 5px; padding: 3px 7px; font-size: 11px; font-weight: 700; font-style: normal; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .boss-emblem i { animation: none; } }

/* Workshop trim. Rarity colors still identify the same equipment tiers. */
.brand > span { color: #f5d49e; }
.brand small { color: #9ab8b5; letter-spacing: 2px; }
.difficulty-options button.selected { background: #8ac9b517; border-color: #8ac9b54d; color: #bce8d8; }
#progress { background: #8ac9b5; }
.rack { background: #6a8887; border-top-color: #b5c8bc; }
.slot { background: #304e55; }
.tile:not(:disabled):hover { border-color: #fff8dc; }
.tile.blind { background: repeating-linear-gradient(135deg, #3d5c61 0 4px, #304b52 4px 8px); }
.reward-choice { background: #92c7b50a; border-color: #98bfb249; }
.reward-choice:hover, .reward-choice:focus-visible { background: #d6be8c19; border-color: #e7c48d; }
.result-orbit { border-color: #9edaca; }
.result-signal { color: #dfc494; }
.fx-portal { border-color: #f5d49e; }
.boss-run .landscape { background: radial-gradient(ellipse at 50% 30%, #ab774a25, transparent 65%), #222b31; }

/* Faceless workshop objects: generous silhouettes, quiet cards. */
.tile img { filter: none; }
.reward-choice img { width: 62px; height: 62px; filter: none; }
.relic-large img { width: 128px; height: 128px; }
.relic-chip img { width: 32px; height: 32px; }
@media (max-width: 480px) {
  .relic-chip img { width: 27px; height: 29px; }
  .reward-choice img { width: 56px; height: 56px; }
}

/* Rarity is repeated in frame, emblem and text, independent of upgrade level. */
[data-rarity="common"] { --gear-color: #e3eaf0; --gear-tint: #e3eaf012; --gear-symbol: '●'; }
[data-rarity="uncommon"] { --gear-color: #90e9a2; --gear-tint: #69d2831c; --gear-symbol: '◆'; }
[data-rarity="void"] { --gear-color: #c6a0ff; --gear-tint: #ac78ee20; --gear-symbol: '⬡'; }
[data-rarity="legendary"] { --gear-color: #ff8996; --gear-tint: #ee617a25; --gear-symbol: '★'; }
[data-rarity="equipment"] { --gear-color: #ffc36a; --gear-tint: #eba74720; --gear-symbol: 'ϟ'; }
.relic-chip[data-rarity], .reward-choice[data-rarity]:not([data-rarity="supply"]) {
  border-color: var(--gear-color); border-left-width: 4px;
  background: linear-gradient(110deg, var(--gear-tint), #182b320d);
}
.relic-chip[data-rarity] small, .reward-choice[data-rarity] small { color: var(--gear-color); }
.relic-chip .relic-copy { min-width: 0; }
.relic-chip .relic-copy small { white-space: normal; line-height: 1.45; }
.relic-chip[data-rarity="legendary"], .reward-choice[data-rarity="legendary"] { box-shadow: inset 0 0 16px #ef627a15; }
.relic-chip[data-rarity]:hover, .reward-choice[data-rarity]:hover { background-color: var(--gear-tint); }
.relic-chip:focus-visible, .reward-choice:focus-visible { outline: 2px solid #fff5d7; outline-offset: 3px; }
.relic-chip .relic-portrait, .reward-choice .relic-portrait, .relic-large .relic-portrait, .catalog-item .relic-portrait {
  display: grid; place-items: center; position: relative; flex-shrink: 0;
  width: 36px; height: 36px; border: 1px solid var(--gear-color);
  border-radius: 7px; background: var(--gear-tint); overflow: visible;
}
.relic-portrait::after {
  content: var(--gear-symbol); position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center; width: 13px; height: 13px;
  color: var(--gear-color); background: #182b32; border: 1px solid var(--gear-color);
  border-radius: 3px; font-size: 10px; line-height: 1;
}
.reward-choice .relic-portrait { width: 66px; height: 66px; border-width: 2px; border-radius: 11px; }
.reward-choice .relic-portrait::after, .relic-large .relic-portrait::after { width: 20px; height: 20px; font-size: 15px; border-radius: 5px; }
.relic-large .relic-portrait { width: 140px; height: 140px; border-width: 2px; border-radius: 20px; margin: 0 auto; }
.rarity-badge { display: inline-block; color: var(--gear-color); border: 1px solid var(--gear-color); background: var(--gear-tint); border-radius: 5px; padding: 4px 9px; font-size: 11px; }
.relic-chip.sealed { border-style: dashed; }
.relic-chip.sealed .relic-portrait img { filter: grayscale(1) brightness(.6); }
@media (max-width: 480px) {
  .relic-chip .relic-portrait { width: 29px; height: 31px; }
  .reward-choice .relic-portrait { width: 60px; height: 60px; }
  .relic-chip .relic-copy { white-space: normal; line-height: 1.45; }
}

/* A crisp attack and readable chain payoff, without covering playable tiles. */
.fx-blast-core { background: radial-gradient(circle, #fffbea 0 9%, #ffe4a7 13%, #ffb35ce6 23%, #ef633a70 42%, transparent 68%); }
.fx-blast-wave { border-width: 3px; box-shadow: 0 0 10px #ffc36b65, inset 0 0 7px #ffe3a940; }
.fx-chain-count { font-weight: 800; font-size: 20px; color: #ffe2a6; text-shadow: 0 2px 0 #172a32, 0 0 12px #ffbf6c70; }
@keyframes relic-proc { 22% { border-color: var(--gear-color, #e7d3ff); box-shadow: 0 0 16px var(--gear-color, #bbaaef66); background: var(--gear-tint, #bfa8ec2e); } }

/* Arsenal: readable triggers stay above the board, never over playable tiles. */
.equipment-library { margin-top: 7px; font-size: 11px; color: #9bded2; }
.relic-chip { max-width: 100%; min-width: 0; }
.relic-chip .relic-meter { color: #a7e9e6; font-size: 9px; max-width: 210px; white-space: normal; line-height: 1.5; }
.lightning-status { margin: 8px 0 0; padding: 7px 9px; border-left: 2px solid #70c7dc; background: #58b3c312; color: #bdeef2; font-size: 11px; line-height: 1.6; }
.lightning-status.charged { border-color: #edcf78; color: #f4dda0; }
.proc-log { margin: 7px 0 0; font-size: 10px; color: #a8bcca; line-height: 1.8; }
.proc-log summary { cursor: pointer; color: #c6d9df; }
.proc-entry { display: inline-block; margin: 3px 5px 0 0; padding: 1px 6px; border: 1px solid #91c9cb32; border-radius: 4px; background: #8acbc40a; }
.proc-entry[data-proc=ukulele], .proc-entry[data-proc=capacitor] { color: #a6eaf7; }
.proc-entry[data-proc=resin], .proc-entry[data-proc=behemoth] { color: #ffc991; }
.proc-entry[data-proc=echo] { color: #d4b5ff; }
.equipment-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.catalog-item { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #afc5cd38; border-radius: 9px; background: #2a45455e; color: #e5efeb; text-align: left; font-size: 12px; min-width: 0; }
.catalog-item .relic-portrait { width: 48px; height: 48px; flex-shrink: 0; }
.catalog-item small { display: block; margin-top: 3px; color: #a7c6bc; font-size: 10px; }
.relic-synergy, .relic-next { padding: 10px 13px; border-left: 2px solid #bba169; background: #bba1690e; font-size: 12px !important; }
.relic-next { border-color: #77b7a8; }
.reward-synergy { display: block; margin-top: 7px; color: #a8ccb9; font-size: 11px; font-style: normal; }
.tile.lightning-mark { box-shadow: inset 0 0 0 3px #84e9ff, 0 0 9px #54cde09c; }
.tile.fuse-mark { outline: 2px dashed #ffad68; outline-offset: -3px; }
.fuse-count { position: absolute; top: 1px; right: 2px; border-radius: 4px; padding: 0 3px; background: #703b20; color: #fff0c2; font: 700 11px/16px system-ui; z-index: 2; }
.fx-critical { width: 55px; height: 55px; border: 3px solid #fff1ad; box-shadow: 0 0 18px #ffce74; border-radius: 4px; }
.fx-seeker { width: 30px; height: 15px; background: #fff0cf; clip-path: polygon(0 0,100% 50%,0 100%,25% 50%); filter: drop-shadow(0 0 6px #ffab73); }
.fx-echo { width: 50px; height: 50px; border: 3px double #d9adff; border-radius: 50%; box-shadow: 0 0 13px #b994ec80; }
.fx-press { width: 58px; height: 8px; border-radius: 3px; background: #e6c38e; box-shadow: 0 0 15px #f1be8570; }
.lightning-status[hidden], .proc-log[hidden] { display: none; }
@media (max-width: 480px) {
  .catalog-item { gap: 6px; padding: 7px; font-size: 11px; }
  .catalog-item .relic-portrait { width: 37px; height: 40px; }
  .equipment-catalog { gap: 6px; }
  .relic-chip .relic-meter { max-width: 150px; }
}

.catalog-item .relic-portrait img { width: 100%; height: 100%; object-fit: contain; }
.catalog-item:focus-visible { outline: 2px solid #fff5d7; outline-offset: 2px; }


/* Keep the playfield stationary while text/counters change during a turn. */
.relic-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 78px; }
.relic-chip { width: 100%; height: 78px; padding: 5px; overflow: hidden; }
.relic-chip .relic-portrait { width: 28px; height: 30px; }
.relic-chip .relic-copy { flex: 1; overflow: hidden; }
.relic-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 28px; line-height: 14px; font-weight: 500; }
.relic-chip .relic-copy small { height: 14px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Reserve both action rows: reward/clear/ten-stage buttons must not push the
   phone playfield down or trigger browser scroll anchoring near the supply piles. */
.expedition-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46px; min-height: 99px; align-content: start; }
.expedition-controls button { min-width: 0; height: 46px; line-height: 15px; padding: 5px; overflow: auto; }
#expedition-hint { height: 51px; overflow: auto; scrollbar-width: thin; }
#lightning-status { height: 50px; overflow: auto; scrollbar-width: thin; }
#expedition-save-status { height: 29px; line-height: 14px; overflow: auto; }
#radar-preview { height: 32px; }
#radar-preview.inactive { visibility: hidden; }
.boss-status { height: 94px; overflow: auto; }
.proc-log { height: 90px; margin: 20px 4px 0; padding: 9px; overflow: auto; border: 1px solid #91c9cb32; border-radius: 6px; scrollbar-width: thin; overflow-anchor: none; }
.proc-log-title { display: block; font-weight: 500; color: #c6d9df; }
.status { height: 30px; overflow: auto; }
@media (max-width: 480px) {
  .relic-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Companion atlas windows preserve each hand-drawn evolution's proportions. */
.animal-sprite { display: block; width: 100%; height: 100%; pointer-events: none; }
.animal-sprite svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.relic-chip .relic-portrait { width: 48px; height: 48px; flex-shrink: 0; }
.relic-chip.sealed .animal-sprite { filter: grayscale(1) brightness(.55); }
[data-rarity="rare"] { --gear-color: #89c9ff; --gear-tint: #70baff20; --gear-symbol: '✦'; }
.family-bonuses { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; height: 30px; margin: 6px 0; }
.family-bonus { display: flex; justify-content: center; align-items: center; border: 1px solid #abb8c029; border-radius: 6px; font-size: 10px; color: #aebac3; white-space: nowrap; overflow: hidden; }
.family-bonus.active { color: #ffdf9f; background: #ffcc7416; border-color: #ffcc7460; }
.family-catalog { margin: 18px 0; }
.family-catalog h3 { margin: 0 0 5px; font-size: 15px; color: #ffe0a8; }
.family-catalog > p { font-size: 12px; color: #bccad4; line-height: 1.6; }
.evolution-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; padding: 16px 0; }
.evolution-strip > div { min-width: 0; text-align: center; color: var(--gear-color); }
.evolution-strip .relic-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--gear-color); border-radius: 10px; background: var(--gear-tint); }
.evolution-strip small, .evolution-strip b { display: block; font-size: 10px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.evolution-strip .relic-portrait::after { display: none; }
.tile.ward-mark::after { content: '◇'; position: absolute; top: 1px; right: 2px; color: #c0ffe5; background: #173e3e; border-radius: 3px; font-size: 13px; padding: 0 2px; pointer-events: none; }
.tile.ward-mark:not(.blocked) { outline: 2px solid #98e9ce; outline-offset: -2px; }
body[data-boss="ward"] .boss-status { border-color: #8dd5b8; color: #b1f5d2; background: #285c401f; }
body[data-boss="armor"] .boss-status { border-color: #9badff; color: #c3cbff; background: #4a3d801f; }
.boss-emblem[data-boss="ward"] { color: #9be7bb; }
.boss-emblem[data-boss="armor"] { color: #b2bdff; }
.fx-ward-shard { width: 65px; height: 65px; border: 4px solid #b0ffdd; border-radius: 12px 2px; box-shadow: 0 0 25px #73ffb877; }
.fx-armor-shard { width: 95px; height: 60px; background: #7586be55; border: 3px solid #d0daff; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.fx-critical { width: 48px; height: 64px; border: 0; box-shadow: none; border-radius: 0; background: repeating-linear-gradient(90deg,transparent 0 10px,#fff0b4 10px 14px,transparent 14px 20px); clip-path: polygon(15% 0,100% 0,85% 100%,0 100%); filter: drop-shadow(0 0 5px #ffb35d); }
@media(max-width:480px) {
  .relic-chip .relic-portrait { width: 40px; height: 40px; }
  .family-bonus { font-size: 9px; }
  .relic-name { font-size: 11px; }
  .evolution-strip { gap: 3px; }
}

.relic-portrait { position: relative; }
.animal-sprite { position: absolute; inset: 4px; width: auto; height: auto; min-width: 0; min-height: 0; }

/* Clear purpose first; precise targeting and recovery rules second. */
.companion-effect { color: #fff0cc; font-size: 15px; font-weight: 650; line-height: 1.75; }
.companion-rules { margin: 14px 0; padding: 12px 14px; background: #102a294d; border: 1px solid #91c4ae33; border-radius: 10px; }
.companion-rules > b { font-size: 11px; color: #afd6bd; }
.companion-rules p { margin: 5px 0 0; }
.companion-basics { margin: 16px 0; color: #afc5c1; font-size: 11px; }
.companion-basics summary { cursor: pointer; }
.reward-choice > div > span:first-of-type { color: #f5eedc; font-weight: 600; }
.reward-choice > div > .reward-rule { margin-top: 5px; font-size: 10px; color: #b6c6c3; }
/* A long English subtitle must not enlarge the phone header's center column. */
.site-header { grid-template-columns: 76px minmax(0, 1fr) 76px; }
.brand { min-width: 0; width: 100%; }
.brand small { white-space: normal; line-height: 1.5; letter-spacing: 1px; }
@media (max-width: 350px) {
  .site-header { grid-template-columns: 58px minmax(0, 1fr) 58px; }
  .brand small { letter-spacing: .5px; }
}

/* Boss-specific progress stays separate from companion recovery, at a fixed height. */
.boss-trial { height: 44px; overflow: auto; margin: 6px 0; padding: 6px 9px; color: #c5dbd6; background: #739bb016; border-radius: 6px; font-size: 10px; line-height: 1.6; }
.boss-status { border-color: var(--boss-color, #ddb296); }
.boss-sigil { color: var(--boss-color, #ddb296); }
.boss-special-rule { border-left: 2px solid #9badff; padding-left: 12px; }

.relic-bar { display: block; }
.relic-group { margin: 9px 0; }
.relic-group h3 { margin: 0 0 6px; color: #b8c8d2; font-size: 10px; font-weight: 600; }
.relic-group[data-kind="active"] h3 { color: #efc077; }
.relic-group-items { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 78px; gap: 5px; }
.relic-empty { font-size: 10px; color: #8599a6; border: 1px dashed #92a8af38; border-radius: 8px; padding: 12px; }
.boss-catalog section { position: relative; padding: 12px 12px 12px 46px; margin: 10px 0; border: 1px solid var(--boss-color); border-radius: 9px; }
.boss-catalog section > span { position: absolute; left: 13px; top: 15px; color: var(--boss-color); font-size: 22px; }
.boss-catalog h3 { margin: 0; font-size: 13px; }
.boss-catalog section p { font-size: 11px; margin-bottom: 0; }
.boss-emblem[data-boss] { color: var(--boss-color, #ddb296); }
.fx-boss-glyph { position: fixed; z-index: 60; border: 2px solid currentColor; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; font-size: 30px; box-shadow: 0 0 18px currentColor; }
@media (max-width: 500px) { .relic-group-items { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.relic-group-items:has(.relic-empty) { grid-auto-rows: 30px; }
.relic-empty { padding: 6px 10px; }

/* Fixed environment readout: countdown changes never move the board. */
.environment-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 64px; margin: 8px 0; padding: 9px 12px; border: 1px solid #9ebcb277; border-radius: 9px; background: #93bcb010; }
.environment-status > div { min-width: 0; }
.environment-status strong { display: block; font-size: 12px; color: #d9e9cf; }
.environment-status span { display: block; font-size: 10px; line-height: 1.6; color: #afc5c5; }
.environment-clear { color: #e6c38f !important; }
.environment-mono .tile img, .environment-mono .fx-loot img { filter: grayscale(1); }
.environment-mono .tile::after { background: #adb7b5; }
.tile.memory-mark { outline: 2px dashed #b4cacf; outline-offset: -4px; }
.tile.memory-hidden { background: #283c46; border-color: #b4cacf; }
.tile.memory-hidden img, .tile.memory-hidden .fuse-count { visibility: hidden; }
.tile.memory-hidden::after { content: '?'; inset: 0; width: auto; height: auto; display: grid; place-items: center; background: none; color: #d3e4e6; opacity: 1; font-size: 25px; font-weight: 700; }

.pressure-status { position: sticky; top: 8px; z-index: 150; background: #26383b; height: 59px; margin: 8px 0; padding: 9px 12px; border: 1px solid #dbb28680; border-radius: 9px; box-shadow: 0 3px 14px #0004; }
.pressure-readout { display: flex; align-items: center; gap: 10px; height: 24px; }
.pressure-readout strong { color: #e9ab94; letter-spacing: 3px; white-space: nowrap; }
.pressure-readout span { color: #e9d4b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.pressure-readout button { margin-left: auto; }
.pressure-track { height: 4px; margin-top: 7px; overflow: hidden; background: #80999830; border-radius: 3px; }
.pressure-track i { display: block; height: 100%; background: #c7ba86; transform-origin: left; }
.pressure-status.urgent { border-color: #e89d7f; }
.pressure-status.urgent .pressure-track i { background: #e89d7f; }
.fx-atmosphere-frame { border: 2px solid var(--fx-color); border-radius: 18px; box-shadow: 0 0 18px var(--fx-color); }

/* Desktop expedition sidebar. Phones retain the original in-game panel order. */
@media (min-width: 1024px) {
  .play-space > .expedition-panel {
    grid-column: 3; grid-row: 1; width: 100%; min-width: 0;
    position: sticky; top: 24px; margin: 102px 0 28px; padding: 16px;
    max-height: calc(100svh - 126px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #68758b #1e2838;
    background: linear-gradient(145deg, #263b42f2, #1b3038f5);
  }
  .play-space > .expedition-panel .relic-group-items { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 86px; }
  .play-space > .expedition-panel .relic-group-items:has(.relic-empty) { grid-auto-rows: 32px; }
  .play-space > .expedition-panel .relic-chip { height: 86px; padding: 8px; gap: 10px; }
  .play-space > .expedition-panel .relic-name { height: auto; font-size: 12px; line-height: 16px; }
  .play-space > .expedition-panel .relic-copy small { height: auto; white-space: normal; line-height: 15px; }
  .play-space > .expedition-panel .relic-meter { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: none; }
  .play-space > .expedition-panel .family-bonuses { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 60px; }
}

/* An immediate introduction, not a forced wait or an automatic new run. */
.play-space[hidden], .welcome-screen[hidden], #ranking-period-tabs[hidden] { display: none; }
.welcome-screen { width: min(100%, 820px); margin: 0 auto; padding: 26px 24px 42px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; color: #a9c6bf; font-size: 12px; }
.welcome-hero { text-align: center; padding: 25px 0 8px; }
.welcome-eyebrow { color: #b6d7b9; font-size: 12px; letter-spacing: 3px; }
.welcome-hero h1 { margin: 12px 0; font-size: clamp(30px, 6vw, 48px); letter-spacing: 1px; color: #f1d39c; }
.welcome-hero > p:last-of-type { color: #b4c8c9; font-size: 14px; line-height: 1.8; }
.welcome-tiles { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0; }
.welcome-tiles img { width: 56px; height: 64px; padding: 5px; object-fit: contain; border-radius: 10px; border: 2px solid #d7cba6; background: #e5dec3; box-shadow: 0 5px 0 #0b1a22; }
.welcome-tiles span { margin-left: 6px; color: #f1d39c; font-size: 30px; }
.welcome-rules { display: grid; gap: 10px; margin: 12px 0 24px; padding: 18px 22px 18px 42px; border: 1px solid #9cb8ac35; border-radius: 14px; background: #25403c60; color: #d0ded8; font-size: 13px; line-height: 1.65; }
.welcome-rules li::marker { color: #e8c883; }
.welcome-prompt { font-size: 14px; color: #d5e4cb; margin: 24px 0 14px; }
.welcome-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.welcome-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; text-align: left; padding: 22px; color: #dbe8e3; border: 1px solid #95adbc50; border-radius: 16px; background: #253b43df; }
.welcome-mode.recommended { border-color: #a6d7a3; background: linear-gradient(130deg, #375a45, #233e3c); }
.welcome-mode.expedition-choice { border-color: #b3a0d077; background: linear-gradient(130deg, #3a374b, #243c43); }
.welcome-tag { color: #a8c5c3; font-size: 11px; letter-spacing: .7px; }
.recommended .welcome-tag { color: #c5edb0; }
.welcome-mode strong { font-size: 23px; }
.welcome-mode p { margin: 0; color: #b4c8cd; font-size: 13px; line-height: 1.75; }
.welcome-go { margin-top: auto; padding-top: 8px; color: #e5d29f; font-size: 12px; }
.welcome-mode:hover { border-color: #d6e2c3; background-color: #35504f; }
.welcome-mode:focus-visible { outline: 3px solid #e5d29f; outline-offset: 4px; }
.welcome-mode:disabled { opacity: .6; }
.welcome-resume { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px; border: 1px solid #c7b1df66; background: #4a3d5338; border-radius: 14px; }
.welcome-resume[hidden] { display: none; }
.welcome-resume strong { font-size: 14px; color: #e2d6f1; }
.welcome-resume p { margin: 7px 0 0; font-size: 12px; color: #b5c5c8; line-height: 1.6; }
.welcome-resume .primary-button { width: auto; flex-shrink: 0; margin: 0; font-size: 12px; }
.welcome-loading { text-align: center; color: #a9c6bf; font-size: 12px; }
@media (max-width: 500px) {
  .welcome-screen { padding: 16px 18px 28px; }
  .welcome-hero { padding-top: 16px; }
  .welcome-modes { grid-template-columns: 1fr; gap: 12px; }
  .welcome-mode { padding: 18px; gap: 8px; }
  .welcome-resume { align-items: stretch; flex-direction: column; }
}

/* Replacement decisions show full descriptions at the actual owned level. */
.replacement-label { margin: 18px 0 9px; font-size: 13px; color: #e4d9bd; }
.replacement-incoming { border-color: #8ecdb9; }
.replacement-incoming + .replacement-label { margin-top: 24px; }
.reward-choice[data-replace] { flex-wrap: wrap; align-items: flex-start; }
.reward-choice[data-replace] > div { flex: 1; min-width: 0; }
.replace-action { flex-basis: 100%; font-size: 11px; text-align: right; color: #eac78a; }
.eclipse-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px; margin: 12px 0; border: 1px solid #ab98da66; border-radius: 10px; background: #9a7bc112; font-size: 11px; }
.eclipse-status > span { flex: 1; min-width: 160px; min-height: 32px; line-height: 16px; color: #c3c8db; }
.eclipse-choice { border-color: #ab98da66; }
.welcome-modes .expedition-choice { grid-column: 1 / -1; }