/* Thoth Arena — Pantheon · identity "Per-Ankh Night" (universe/04-IDENTITY.md) */
@font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url(fonts/cinzel-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }

:root {
  --nuit-900: #070B14; --nuit-800: #0C1322; --nuit-700: #111B2E; --nuit-600: #223050; --nuit-500: #33456B;
  --lin-100: #EDE6D6; --lin-300: #A8B2C4; --lin-500: #74829B;
  --or-500: #E5B84B; --or-600: #B98A2F; --or-300: #F5DFA0;
  --falcon: #5B8DEF; --storm: #E2593F; --cat: #3ECFB2; --croc: #8FAE44;
  --maat: #4FC98F; --isfet: #E14B5A; --veille: #D98E32;
  --f-cer: 'Cinzel', serif; --f-ui: 'Manrope', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 10px; --card-w: 104px; --card-h: 132px; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--nuit-900); color: var(--lin-100); font: 14px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--falcon); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums slashed-zero; }
#app { height: 100%; height: 100dvh; position: relative; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

.btn { border: 1px solid var(--nuit-600); border-radius: var(--r); padding: 11px 20px; min-height: 44px; font-weight: 600; background: var(--nuit-700); transition: border-color .15s, background .15s, transform .08s; }
.btn:hover:not(:disabled) { border-color: var(--nuit-500); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.gold { border-color: var(--lin-100); color: var(--nuit-900); background: var(--lin-100); } /* primary: linen (gold is earned, never a button) */
.btn.gold:hover:not(:disabled) { background: #fff7e6; }
.btn.ghost { background: transparent; }
.btn.mini { padding: 6px 12px; min-height: 34px; font-size: 13px; }
.btn[aria-pressed="true"] { border-color: var(--falcon); color: var(--falcon); }

/* ——— home ——— */
#home { flex-direction: column; align-items: center; justify-content: safe center; background: radial-gradient(90% 70% at 72% 18%, #16233C 0%, var(--nuit-800) 45%, var(--nuit-900) 100%); overflow: auto; }
.home-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px 16px 20px; max-width: 760px; margin-top: auto; }
.logo { width: 112px; height: 112px; }
.kicker { margin: 0; font-family: var(--f-cer); text-transform: uppercase; letter-spacing: .3em; color: var(--lin-300); font-size: 13px; }
h1 { margin: 0; font-family: var(--f-cer); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(44px, 9vw, 92px); line-height: 1; }
.pitch { margin: 0 0 6px; max-width: 52ch; color: var(--lin-300); font-size: 16px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.status { min-height: 20px; margin: 0; color: var(--lin-300); font-size: 13px; }
.parade { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 18px; opacity: .9; }
.parade i { display: block; width: 44px; height: 44px; }
.foot .btn.mini { min-width: 44px; min-height: 44px; }
.foot { position: relative; margin-top: auto; width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); color: var(--lin-300); font-size: 13px; }

/* ——— game layout ——— */
#game { display: none; }
#game.active { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid var(--nuit-600); background: var(--nuit-800); }
.brandmark { display: flex; align-items: center; gap: 8px; font-family: var(--f-cer); text-transform: uppercase; letter-spacing: .12em; font-size: 15px; color: var(--lin-100); }
.brandmark img { color: var(--lin-100); }
.meters { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.meter { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.meter small { color: var(--lin-300); font-size: 11.5px; }
.meter b { font-size: 18px; }
.meter.gold b { color: var(--lin-100); } /* gold only when earned */
.row { display: flex; gap: 3px; align-items: center; min-height: 22px; }
.pip { width: 16px; height: 22px; color: var(--lin-300); } .pip svg { width: 100%; height: 100%; }
.pip.lost { opacity: .22; }
.vpip { width: 9px; height: 9px; border: 1.5px solid var(--nuit-500); transform: rotate(45deg); margin: 0 2px; }
.vpip.on { background: var(--or-500); border-color: var(--or-500); }

.paths { padding: 14px 12px; border-right: 1px solid var(--nuit-600); background: var(--nuit-800); display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.path { padding: 10px; border-radius: var(--r); border: 1px solid var(--nuit-600); background: var(--nuit-700); }
.path header { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.path header i { width: 22px; height: 22px; display: block; }
.path header .n { margin-left: auto; font-family: var(--f-mono); font-size: 13px; color: var(--lin-300); }
.path p { margin: 6px 0 0; font-size: 12px; color: var(--lin-300); line-height: 1.35; }
.path.on { border-color: color-mix(in srgb, var(--pc) 70%, transparent); background: color-mix(in srgb, var(--pc) 10%, var(--nuit-700)); }
.path.on header .n { color: var(--pc); }

.field { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; min-height: 0; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 50%, rgba(91,141,239,.06), transparent 70%); }
.side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sidelbl { margin: 0; font-size: 12.5px; color: var(--lin-300); min-height: 18px; }
.formation { display: grid; grid-template-columns: repeat(4, var(--card-w)); grid-template-rows: repeat(2, var(--card-h)); gap: 10px; }
.slot { position: relative; border-radius: var(--r); border: 1px dashed var(--nuit-600); background: rgba(17,27,46,.4); }
.slot.front::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 1px; background: var(--nuit-600); }
.slot.drop { border-color: var(--falcon); background: rgba(91,141,239,.08); }
.enemy .slot { border-style: solid; border-color: transparent; background: transparent; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.verdict { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .2s; text-align: center; z-index: 5; padding: 14px 28px; border-radius: 12px; background: rgba(12,19,34,.92); border: 1px solid var(--nuit-600); box-shadow: 0 20px 50px -10px #000;
  font-family: var(--f-cer); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(24px, 4vw, 44px); text-shadow: 0 2px 18px var(--nuit-900), 0 0 2px var(--nuit-900); white-space: nowrap; }
.verdict.show { opacity: 1; }
.verdict.win { color: var(--or-500); } .verdict.loss { color: var(--lin-300); } .verdict.draw { color: var(--lin-100); }

/* ——— god cards ——— */
.god { position: absolute; inset: 0; border-radius: var(--r); border: 1px solid var(--nuit-600); background: var(--nuit-700); display: flex; flex-direction: column; align-items: center; padding: 8px 6px 6px;
  color: var(--pc); user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; transition: border-color .15s; }
.god:hover { border-color: var(--nuit-500); }
.god .art { width: 64px; height: 64px; display: block; flex: none; }
.god .art svg { width: 100%; height: 100%; display: block; }
.god .nm { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--lin-100); text-align: center; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.god .stars { position: absolute; top: 5px; left: 7px; font-size: 11px; letter-spacing: -1px; color: var(--lin-100); }
.god .tier { position: absolute; top: 5px; right: 7px; font-family: var(--f-mono); font-size: 11px; color: var(--lin-300); }
.god .st { position: absolute; bottom: 5px; left: 6px; right: 6px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.god .atk { color: var(--lin-100); } .god .hp { color: var(--maat); }
.god .hpbar { position: absolute; left: 6px; right: 6px; bottom: 24px; height: 3px; border-radius: 2px; background: var(--nuit-600); overflow: hidden; }
.god .hpbar i { display: block; height: 100%; background: var(--maat); transition: width .12s; }
.god.dead { opacity: 0; transform: scale(.9); transition: opacity .35s, transform .35s; }
.god.poisoned .hp { color: var(--croc); }
.god.stunned { filter: grayscale(.8); }
.god.dragging { opacity: .35; }
.ghostdrag { position: fixed; z-index: 50; pointer-events: none; width: var(--card-w); height: var(--card-h); transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 0 16px 40px -10px #000; }
.merged { animation: ascend .7s ease-out; }
@keyframes ascend { 0% { box-shadow: 0 0 0 0 rgba(229,184,75,.7); } 100% { box-shadow: 0 0 0 18px rgba(229,184,75,0); } }

/* ——— hall (shop) ——— */
.hall { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 22px; align-items: end; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nuit-600); background: var(--nuit-800); }
.lbl { margin: 0 0 6px; font-size: 12px; color: var(--lin-300); }
.bench, .shop { display: flex; gap: 8px; }
.bench .slot, .shop .slot { width: calc(var(--card-w) * .86); height: calc(var(--card-h) * .86); }
.shop .slot { border-style: solid; border-color: transparent; background: transparent; }
.shop .price { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 99px; background: var(--nuit-800); border: 1px solid var(--nuit-500); color: var(--lin-100); font-family: var(--f-mono); font-size: 11px; line-height: 16px; white-space: nowrap; }
.hall-acts { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.hint { grid-column: 1 / -1; margin: 0; min-height: 18px; font-size: 12.5px; color: var(--lin-300); }
.hint.warn { color: var(--veille); }
.sellzone { outline: 2px dashed var(--veille); outline-offset: 4px; }

.tip { position: fixed; z-index: 60; max-width: 240px; padding: 10px 12px; border-radius: var(--r); background: var(--nuit-800); border: 1px solid var(--nuit-500); font-size: 12.5px; color: var(--lin-100); pointer-events: none; box-shadow: 0 12px 30px -10px #000; }
.tip b { display: block; font-size: 13.5px; } .tip .pth { color: var(--pc); font-size: 11.5px; } .tip p { margin: 4px 0 0; color: var(--lin-300); }

dialog { border: 1px solid var(--nuit-600); border-radius: 14px; background: var(--nuit-800); color: var(--lin-100); padding: 24px 26px; max-width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 480px) { dialog { padding: 18px 16px; max-height: calc(100dvh - 12px); } dialog h2 { font-size: 19px; } .rules { gap: 7px; font-size: 13.5px; } }
dialog::backdrop { background: rgba(7,11,20,.75); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 12px; font-family: var(--f-cer); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 22px; }
.rules { padding-left: 20px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; color: var(--lin-300); } .rules b { color: var(--lin-100); }
#end { text-align: center; } #end h2.win { color: var(--or-500); } #endSub { color: var(--lin-300); margin: 0 0 16px; }

@media (max-width: 900px) {
  :root { --card-w: 74px; --card-h: 96px; }
  #game.active { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .paths { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--nuit-600); padding: 6px 8px; gap: 6px; overflow-x: auto; }
  .path { padding: 5px 8px; min-width: 0; flex: 1; } .path p { display: none; } .path header { font-size: 12px; gap: 4px; } .path header i { width: 16px; height: 16px; }
  .meters { gap: 10px; } .meter small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* hidden on screen, still read aloud */ .brandmark span { display: none; } .pip { width: 11px; height: 16px; } .vpip { width: 6px; height: 6px; margin: 0 1px; }
  .god .art { width: 40px; height: 40px; } .god .nm { font-size: 9.5px; } .god .st { font-size: 11px; } .god .hpbar { bottom: 20px; }
  .formation { gap: 6px; }
  .hall { grid-template-columns: 1fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .hall-acts { flex-direction: row; min-width: 0; } .hall-acts .btn { flex: 1; padding: 8px; font-size: 12.5px; }
  .bench .slot, .shop .slot { width: calc(var(--card-w) * .82); height: calc(var(--card-h) * .82); }
  .field { gap: 8px; padding: 6px; } .lbl { margin-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ——— compact cards in the Hall and Antechamber ——— */
.shop .god, .bench .god { padding: 5px 4px 4px; }
.shop .god .art, .bench .god .art { width: 46px; height: 46px; }
.shop .god .nm, .bench .god .nm { font-size: 11px; }
.shop .god .st, .bench .god .st { font-size: 11.5px; bottom: 4px; }
.shop .price { white-space: nowrap; line-height: 16px; }
.pip { width: 18px; height: 24px; }
.parade i { width: 52px; height: 52px; }
@media (min-height: 860px) and (min-width: 1200px) { :root { --card-w: 118px; --card-h: 150px; } .god .art { width: 72px; height: 72px; } }
@media (max-width: 900px) {
  .shop .god .art, .bench .god .art { width: 30px; height: 30px; }
  .shop .god .nm, .bench .god .nm { display: none; }
  .shop .god .tier, .bench .god .tier { display: none; }
  .shop .god .st, .bench .god .st { font-size: 10px; left: 3px; right: 3px; }
  .shop .price { font-size: 10px; padding: 0 5px; top: -8px; }
  .path header { flex-wrap: nowrap; white-space: nowrap; } .path header .n { font-size: 11px; }
  .pip { width: 12px; height: 18px; }
}
@media (max-width: 440px) { .path header span:not(.n) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .path { display: flex; justify-content: center; } .path header .n { margin-left: 4px; } }

/* carved marks instead of emoji (stroke icons via masks) */
.mk { display: inline-block; width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mk-atk { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 13L13 3M10 3h3v3M3 10l3 3'/%3E%3C/svg%3E"); }
.mk-hp { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 7c-2-1.5-3-3-3-4.2C5 1.6 6.3 1 8 1s3 .6 3 1.8C11 4 10 5.5 8 7zM3 8h10M8 7v8'/%3E%3C/svg%3E"); }
.mk-coin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E"); }
.god .st b, .shop .price b { font-weight: 600; }
.name { width: min(320px, 100%); min-height: 44px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--nuit-600); background: var(--nuit-800); color: var(--lin-100); font: inherit; text-align: center; }
.name::placeholder { color: var(--lin-300); }
.slot:focus-visible { outline: 2px solid var(--falcon); outline-offset: 2px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; color: var(--lin-300); }
@media (max-width: 900px) {
  .shop .god .nm, .bench .god .nm { display: block; font-size: 8.5px; line-height: 1.1; max-height: 2.2em; }
  .shop .god .art, .bench .god .art { width: 26px; height: 26px; }
  .shop-wrap .lbl { margin-bottom: 9px; }
  .top { gap: 8px; padding-left: 10px; padding-right: 10px; } .meters { gap: 8px; } #btnQuit { padding: 6px 8px; }
  .vpip { width: 5px; height: 5px; }
  .mk { width: 9px; height: 9px; margin-right: 2px; }
}

/* ——— difficulty ladder, hall of the ascended, score ——— */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(620px, 100%); }
.rung { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; min-height: 64px; border-radius: var(--r);
  background: var(--nuit-800); border: 1px solid var(--nuit-600); }
.rung .pips { display: flex; gap: 3px; height: 7px; }
.rung .pips i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--or-500); opacity: .8; }
.rung b { font-family: var(--f-cer); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; line-height: 1.2; }
.rung small { font-size: 11px; color: var(--lin-300); line-height: 1.25; font-variant-numeric: tabular-nums; }
.rung[aria-checked="true"] { border-color: var(--or-500); background: linear-gradient(180deg, rgba(229,184,75,.16), var(--nuit-800)); box-shadow: 0 0 22px -8px rgba(229,184,75,.8); }
.rung:disabled { opacity: .45; cursor: default; }
.btn.big { min-width: min(320px, 82vw); min-height: 52px; font-size: 16px; }
.hallfame { width: min(420px, 100%); text-align: left; border: 1px solid var(--nuit-600); border-radius: var(--r); background: rgba(12,19,34,.75); padding: 12px 16px 10px; }
.hallfame h2 { margin: 0 0 6px; font-family: var(--f-cer); font-weight: 600; font-size: 15px; color: var(--or-300); letter-spacing: .03em; }
.hallfame ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.hallfame li { display: list-item; } .hallfame li .who { display: inline-block; min-width: 60%; }
.hallfame li .pts { float: right; color: var(--or-500); }
.hallfame li.empty { list-style: none; margin-left: -20px; color: var(--lin-300); font-size: 13px; }
#rungTag { margin-left: 8px; white-space: nowrap; font-family: var(--f-ui); text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--or-300); border: 1px solid var(--nuit-600); border-radius: 999px; padding: 1px 8px; }
#rungTag:empty { display: none; }
.score { margin: 0 0 16px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.score b { font-family: var(--f-cer); font-size: 22px; color: var(--or-500); font-variant-numeric: tabular-nums; }
.score small { color: var(--lin-300); } .score small.rec { color: var(--maat); font-weight: 600; }
@media (max-width: 640px) {
  .ladder { gap: 4px; } .rung { min-height: 58px; padding: 7px 2px; } .rung b { font-size: 12px; letter-spacing: 0; } .rung small { font-size: 9.5px; }
}

/* phones: the header must fit 320–480 px without widening the page */
.vcount { display: none; color: var(--or-500); font-size: 16px; }
.top { min-width: 0; }
@media (max-width: 480px) {
  #mWins .vpip { display: none; } .vcount { display: inline; }
  .top .meter small { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; font-size: 9.5px; line-height: 1; } /* short labels stay readable */
  .verdict { white-space: normal; width: max-content; max-width: calc(100vw - 32px); font-size: clamp(20px, 6.2vw, 30px); padding: 12px 18px; }
  .formation .god .nm { white-space: nowrap; text-overflow: ellipsis; max-width: 100%; font-size: 9px; } /* one line: never runs under the life bar */
  .pip { width: 9px; height: 14px; }
  #rungTag { margin-left: 4px; font-size: 11px; padding: 1px 6px; }
  .meters { gap: 10px; } .meter b { font-size: 16px; }
  #btnQuit { padding: 6px 8px; font-size: 13px; }
}
@media (max-width: 380px) { #rungTag { display: none; } .meters { gap: 8px; } .top { gap: 6px; } }

/* playtest polish: battle */
.battlebar { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 8px; }
.battlebar .btn { min-height: 44px; min-width: 56px; }
.field.battling #myForm { position: relative; }
.field.battling .side.enemy .god { border-color: rgba(225,75,90,.55); background: linear-gradient(180deg, rgba(225,75,90,.08), var(--nuit-700)); }
.field.battling .side.mine .god { border-color: rgba(91,141,239,.55); }
.field.battling .side.enemy { padding-bottom: 8px; border-bottom: 1px dashed var(--nuit-500); margin-bottom: 4px; }
.sidelbl { font-weight: 600; }
.side.enemy .sidelbl { color: #e98a94; } .side.mine .sidelbl { color: #9db8f5; }
.god.dead { opacity: .22; filter: grayscale(1); transform: scale(.94); transition: opacity .35s, transform .35s, filter .35s; }
.god.poisoned .hp { color: #b67cf0; } .god.poisoned .hpbar i { background: #b67cf0; }
.verdict small { display: block; margin-top: 6px; font-family: var(--f-ui); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--lin-300); }
.ftoast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); z-index: 7; margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(12,19,34,.94); border: 1px solid var(--or-600); color: var(--or-300); font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 24px); text-align: center; }
.ftoast.show { opacity: 1; transform: translate(-50%, 0); }
.path { cursor: pointer; }
#shop.sellzone { position: relative; }
#shop.sellzone::before { content: attr(data-sell); position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: var(--veille); white-space: nowrap; background: var(--nuit-800); padding: 0 8px; z-index: 1; }
.shop-wrap:has(#shop.sellzone) .lbl { visibility: hidden; } /* the release label takes the Hall label's place */
@media (max-width: 640px) { .hint { min-height: 2.8em; line-height: 1.4; } }
/* small phones and landscape phones: never clip, scroll instead */
@media (max-width: 340px) { :root { --card-w: 62px; --card-h: 84px; } .bench, .shop { overflow-x: auto; } }
@media (max-height: 480px) and (orientation: landscape) { body { overflow: auto; } #app { height: auto; min-height: 100%; } .screen.active#game { min-height: 760px; } } /* a landscape phone scrolls: the field keeps full-size cards */

#btnMute.muted { opacity: .55; text-decoration: line-through; }
#btnQuit { min-height: 44px; } /* a 44 px target at every width */

/* audit pass: on phones the field sizes its two ranks to the room it really has (no rank cut off);
   shop and antechamber keep a fixed card; text floor 11px; 44px targets */
@media (max-width: 900px) {
  .field { container-type: size; }
  .formation { --card-h: clamp(50px, calc((100cqh - 52px) / 2), 96px); --card-w: min(74px, calc(var(--card-h) * .78)); gap: 8px; }
  .field.battling .formation { --card-h: clamp(46px, calc((100cqh - 96px) / 4), 96px); }
  .formation .god .art { width: min(40px, calc(var(--card-h) * .42)); height: min(40px, calc(var(--card-h) * .42)); }
  .bench .slot, .shop .slot { width: 61px; height: 79px; }
  .shop .god, .bench .god { padding: 6px 3px 4px; touch-action: pan-x; }
  .shop .god .art, .bench .god .art { width: 30px; height: 30px; }
  .god .nm, .formation .god .nm, .shop .god .nm, .bench .god .nm { display: block; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; max-height: none; }
  .shop .god .st, .bench .god .st, .shop .price { font-size: 11px; }
  .btn.mini { min-height: 44px; }
  .path { min-height: 44px; }
  .meter small { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; font-size: 11px; line-height: 1; }
}
@media (max-width: 640px) { .rung small { font-size: 11px; } }
@media (max-width: 480px) { .top .meter small { font-size: 11px; } }
@media (max-width: 340px) { .bench .slot, .shop .slot { width: 54px; height: 74px; } }
@media (max-width: 900px) and (max-height: 690px) and (orientation: portrait) { body { overflow: auto; } #app { height: auto; min-height: 100%; } .screen.active#game { min-height: 700px; } .screen.active#game:has(.field.battling) { min-height: 0; } .hall { gap: 4px; padding-top: 6px; } .bench .slot, .shop .slot { width: 56px; height: 72px; } .shop .god .art, .bench .god .art { width: 26px; height: 26px; } .lbl { margin-bottom: 2px; } .shop-wrap .lbl { margin-bottom: 8px; } .hint { min-height: 2.6em; } } /* short phones (640–690 px) scroll a little, with a compact Hall, rather than shrink the field's cards below a readable size */
.shop .price.poor { opacity: .55; }

/* live duels */
.btn.line { background: transparent; border-color: rgba(201,166,90,.6); color: var(--or-300); }
.duelpanel { width: min(420px, 100%); border: 1px solid var(--nuit-600); border-radius: var(--r); background: rgba(12,19,34,.85); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.duelpanel p { margin: 0; color: var(--lin-100); }
.duelpanel .share { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.duelpanel label { font-size: 13px; color: var(--lin-300); }
.duelpanel input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--nuit-600); background: var(--nuit-800); color: var(--lin-100); font: 13px var(--f-mono); text-align: center; }
#btnReady.hurry { border-color: var(--storm); box-shadow: 0 0 0 2px rgba(225,75,90,.35); }
body.duel #rungTag { display: inline-block !important; color: var(--lin-100); }
@media (max-width: 380px) { body.duel .brandmark img { display: none; } }
body.duel .meter:has(#mWins) { display: none; }

/* ——— v2 polish: readable feathers, shop affordances, ranks, battle readability, duel strip, recap ——— */
.pip { color: var(--or-500); filter: drop-shadow(0 0 3px rgba(229,184,75,.35)); }
.pip.lost { opacity: .3; color: var(--lin-500); filter: none; }
.pip.drop { animation: featherfall .9s ease-in forwards; }
@keyframes featherfall { 0% { opacity: 1; color: var(--isfet); transform: none; } 60% { transform: translateY(6px) rotate(18deg); } 100% { opacity: .3; color: var(--lin-500); transform: translateY(10px) rotate(28deg); } }
#mGold.spend { color: var(--or-500); }
#btnReady.allin:not(:disabled) { box-shadow: 0 0 0 2px rgba(229,184,75,.45), 0 0 24px -6px rgba(229,184,75,.7); }
.god .nms { display: none; }
.god.poor { filter: grayscale(.7); opacity: .55; }
.shop .price.poor { opacity: 1; color: var(--isfet); border-color: rgba(225,75,90,.6); }
.god.mergeable { border-color: var(--or-600); }
.slot.can { border-style: solid; border-color: rgba(91,141,239,.75); background: rgba(91,141,239,.1); animation: canpulse 1.4s ease-in-out infinite; }
@keyframes canpulse { 50% { background: rgba(91,141,239,.2); } }
.formation { position: relative; }
.rowlbl { position: absolute; left: -17px; width: 12px; height: var(--card-h); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lin-500); pointer-events: none; white-space: nowrap; }
.rowlbl.r0 { top: 0; } .rowlbl.r1 { bottom: 0; }
.god.pop { animation: pop .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { 0% { transform: scale(.82); } 100% { transform: none; } }
.god.hit { animation: hitflash .22s ease-out; }
@keyframes hitflash { 0% { filter: brightness(2.2) saturate(.4); } 100% { filter: none; } }
.flt { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font: 700 17px var(--f-mono); pointer-events: none; text-shadow: 0 1px 2px #070B14, 0 0 8px #070B14; z-index: 3; white-space: nowrap; }
.flt.big { font-size: 22px; }
.foe { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--nuit-600); background: rgba(12,19,34,.8); font-size: 12.5px; color: var(--lin-300); max-width: calc(100% - 16px); }
.foe .fname { color: var(--lin-100); } .foe b.fname { color: #e98a94; font-weight: 700; }
.foe .ffeath { gap: 2px; } .foe .ffeath .pip { width: 12px; height: 17px; }
.foe .fstat { color: var(--lin-300); } .foe .fstat.ok { color: var(--maat); font-weight: 600; }
.hist { margin: -8px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hist small { color: var(--lin-300); font-size: 12px; }
.hist .hrow { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.hist .h { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font: 600 12px var(--f-mono); font-style: normal; border: 1px solid var(--nuit-600); }
.hist .h.win { color: var(--nuit-900); background: var(--or-500); border-color: var(--or-500); } .hist .h.loss { color: var(--isfet); border-color: rgba(225,75,90,.5); } .hist .h.draw { color: var(--lin-300); }
@media (max-width: 900px) {
  .shop .god .nm, .bench .god .nm, .formation .god .nm { display: none; }
  .shop .god .nms, .bench .god .nms, .formation .god .nms { display: block; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--lin-100); font-weight: 600; text-align: center; margin-top: 2px; }
  .field:has(#foe:not([hidden])) .formation { --card-h: clamp(50px, calc((100cqh - 90px) / 2), 96px); }
  .foe { padding: 4px 10px; font-size: 11.5px; gap: 8px; }
  .flt { font-size: 15px; } .flt.big { font-size: 19px; }
  .rowlbl { left: -15px; width: 11px; font-size: 11px; }
}
#mGold.tick { animation: tick .35s ease-out; }
@keyframes tick { 0% { transform: scale(1.4); color: var(--or-300); } }
.verdict.show { animation: verdictIn .4s cubic-bezier(.2,.9,.3,1.15); }
@keyframes verdictIn { 0% { transform: translate(-50%, -50%) scale(.86); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ——— visual pass: cards with depth, pills, sizing that fills the field, rules fold ——— */
.god { background: radial-gradient(70% 55% at 50% 32%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 72%), linear-gradient(180deg, #152038, var(--nuit-700) 60%); box-shadow: inset 0 1px 0 rgba(237,230,214,.05), 0 6px 14px -10px #000; }
.god::before { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--pc); opacity: .75; }
.god .stars { color: var(--or-500); font-size: 12px; letter-spacing: -1.5px; text-shadow: 0 0 6px rgba(229,184,75,.5); }
.god .tier { background: rgba(7,11,20,.5); border-radius: 4px; padding: 0 4px; line-height: 15px; }
.god .hpbar { height: 4px; background: rgba(7,11,20,.7); }
.field.battling .side.enemy .god { background: radial-gradient(70% 55% at 50% 32%, color-mix(in srgb, var(--pc) 14%, transparent), transparent 72%), linear-gradient(180deg, #2a1a24, var(--nuit-700) 60%); }
.god.dead { transition: opacity .45s, transform .45s, filter .45s; transform: scale(.9) rotate(-2deg); }
.shop .price.mg { background: var(--or-500); border-color: var(--or-500); color: var(--nuit-900); font-weight: 700; gap: 4px; }
.shop .price.mg .merge { font-weight: 700; letter-spacing: -.5px; }
.shop .price.mg .mk { background: var(--nuit-900); }
.god.mergeable { box-shadow: 0 0 0 1px var(--or-600), 0 0 18px -6px rgba(229,184,75,.8); }
.slot { transition: border-color .15s, background .15s; }
.slot.front::after { background: color-mix(in srgb, var(--or-600) 40%, var(--nuit-600)); }
.rules.short { gap: 10px; color: var(--lin-100); }
.rules.short li::marker { color: var(--or-500); font-weight: 700; }
.more { margin: -6px 0 18px; } .more summary { cursor: pointer; color: var(--lin-300); font-size: 13px; padding: 6px 0; min-height: 44px; display: flex; align-items: center; } .more summary:hover { color: var(--lin-100); } .more[open] summary { color: var(--or-300); }
.more .rules { margin: 4px 0 0; font-size: 13px; }
/* desktop: the field is tall and wide — cards grow to fill it */
@media (min-width: 901px) {
  .field { container-type: size; }
  .formation { --card-h: clamp(120px, calc((100cqh - 150px) / 2), 170px); --card-w: calc(var(--card-h) * .78); }
  .field.battling .formation { --card-h: clamp(100px, calc((100cqh - 120px) / 4), 150px); --card-w: calc(var(--card-h) * .78); }
  .formation .god .art { width: calc(var(--card-h) * .46); height: calc(var(--card-h) * .46); }
  .formation .god .nm { font-size: 12px; }
  .rowlbl { left: -22px; width: 14px; font-size: 11.5px; }
}
/* phones: a little taller when the room is there */
@media (max-width: 900px) {
  .formation { --card-h: clamp(50px, calc((100cqh - 52px) / 2), 112px); --card-w: min(80px, calc(var(--card-h) * .78)); }
  .field:has(#foe:not([hidden])) .formation { --card-h: clamp(50px, calc((100cqh - 90px) / 2), 112px); }
  .field.battling .formation { --card-h: clamp(46px, calc((100cqh - 96px) / 4), 106px); }
}
@media (max-width: 370px) { .formation { --card-w: min(74px, calc(var(--card-h) * .78)); } }
@media (max-width: 480px) { .pip { width: 11px; height: 16px; } }
.more summary::before { content: '▸'; display: inline-block; margin-right: 6px; color: var(--or-500); transition: transform .15s; } .more[open] summary::before { transform: rotate(90deg); }
.more summary::-webkit-details-marker { display: none; } .more summary { list-style: none; }
.shop .slot { border-color: rgba(34,48,80,.55); border-style: dashed; }
@media (max-width: 480px) { .pitch { font-size: 15px; } }
/* laptops (901–1220 px): the Hall's three blocks do not fit side by side — the buttons take a row of their own */
@media (min-width: 901px) and (max-width: 1220px) {
  .hall { grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; }
  .hall-acts { grid-column: 1 / -1; flex-direction: row; min-width: 0; margin-top: 4px; }
  .hall-acts .btn { flex: 1; }
  .bench .slot, .shop .slot { width: calc(var(--card-w) * .8); height: calc(var(--card-h) * .8); }
  .formation { --card-h: clamp(110px, calc((100cqh - 150px) / 2), 150px); }
}