@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: 'Cinzel'; font-weight: 800; font-display: swap; src: url(fonts/cinzel-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }

:root {
  --night: #0B0E1A; --night-2: #0D1122; --indigo: #141A33; --indigo-2: #1e2649; --lapis: #2C4A9E;
  --sand: #C9A96A; --gold: #F5C242; --set: #E0452F; --udjat: #39D4C8; --text: #E9E4D6; --grey: #8b90a8;
  --you: var(--gold); --rival: var(--set);
  --r-s: 6px; --r-m: 10px;
  --f-sacred: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-ui: 'Space Grotesk', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--text); font: 15px/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(--udjat); outline-offset: 2px; }
#app { height: 100%; height: 100dvh; position: relative; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

/* ——— buttons ——— */
.btn { border: 1px solid transparent; border-radius: var(--r-s); padding: 12px 20px; font-weight: 600; letter-spacing: .01em;
  background: var(--indigo); transition: transform .08s, background .15s, border-color .15s; min-height: 46px; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); color: #1a1407; box-shadow: 0 0 0 1px #ffde84 inset, 0 6px 24px -8px rgba(245,194,66,.55); }
.btn.primary:hover { background: #ffd35e; }
.btn.primary:disabled { background: #4a442f; color: #8d8460; box-shadow: none; cursor: default; }
.btn.gold-line { background: transparent; border-color: rgba(245,194,66,.55); color: var(--gold); }
.btn.gold-line:hover { background: rgba(245,194,66,.08); }
.btn.ghost { background: transparent; border-color: var(--indigo-2); color: var(--text); }
.btn.ghost:hover { border-color: var(--lapis); }
.btn.mini { padding: 6px 12px; min-height: 34px; font-size: 13px; }

/* ——— home ——— */
#home { flex-direction: column; align-items: center; justify-content: safe center; overflow: auto; }
#heroEye { width: 240px; height: 150px; margin-bottom: -6px; pointer-events: none; }
#home { background: radial-gradient(120% 80% at 50% 18%, #18204a 0%, var(--night) 62%); }
.home-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 16px 24px; margin-top: auto; max-width: 760px; text-align: center; }
h1 { margin: 0; font-family: var(--f-sacred); font-weight: 800; line-height: 1.02; }
.t-small { display: block; font-size: 15px; font-weight: 600; color: var(--sand); letter-spacing: .32em; margin-bottom: 14px; }
.t-big { display: block; font-size: clamp(38px, 7vw, 72px); letter-spacing: .03em;
  background: linear-gradient(180deg, #fff3c9 0%, var(--gold) 55%, #a87b1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(245,194,66,.25)); }
.pitch { margin: 0; max-width: 46ch; color: #c9c6bd; font-size: 17px; }
.status { min-height: 22px; margin: 0; color: var(--udjat); }

.pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
.w-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: var(--r-m);
  background: rgba(20,26,51,.72); border: 1px solid var(--indigo-2); text-align: center; backdrop-filter: blur(6px); }
.w-card canvas { width: 64px; height: 64px; }
.w-card b { font-family: var(--f-sacred); font-size: 15px; letter-spacing: .06em; }
.w-card small { color: var(--grey); font-size: 12px; }
.w-card .perk { color: var(--text); font-size: 12.5px; line-height: 1.3; margin-top: 4px; min-height: 2.6em; }
.w-card[aria-checked="true"] { border-color: var(--hue); box-shadow: 0 0 0 1px var(--hue) inset, 0 0 28px -10px var(--hue); }
.perk-line { margin: -6px 0 0; min-height: 1.5em; color: #cfcab9; font-size: 14.5px; max-width: 52ch; }
.perk-line b { font-family: var(--f-sacred); color: var(--gold); letter-spacing: .05em; }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(640px, 100%); }
.rung { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; min-height: 66px; border-radius: var(--r-m);
  background: rgba(20,26,51,.72); border: 1px solid var(--indigo-2); }
.rung .pips { display: flex; gap: 3px; height: 7px; }
.rung .pips i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); opacity: .8; }
.rung b { font-family: var(--f-sacred); font-weight: 600; font-size: 15px; letter-spacing: .04em; line-height: 1.2; }
.rung small { font-size: 11px; color: var(--grey); line-height: 1.25; font-variant-numeric: tabular-nums; }
.rung[aria-checked="true"] { border-color: var(--gold); background: linear-gradient(180deg, rgba(245,194,66,.18), rgba(20,26,51,.88)); box-shadow: 0 0 22px -8px rgba(245,194,66,.8); }
.rung[aria-checked="true"] small { color: #e4d6ad; }
.rung:disabled { opacity: .45; cursor: default; }
.rung .ic-lock { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; }
.btn.big { min-width: min(320px, 82vw); min-height: 54px; font-size: 17px; font-family: var(--f-sacred); font-weight: 800; letter-spacing: .05em; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--indigo-2); border-radius: var(--r-s); overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 10px 14px; min-height: 46px; color: var(--grey); font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--indigo-2); color: var(--text); }
.home-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)); background: linear-gradient(0deg, var(--night) 40%, transparent); font-size: 13px; color: var(--grey); }

/* ——— match ——— */
#game { flex-direction: column; }
.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 6px; }
.pl { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 0; }
.pl canvas { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 2px var(--ring) inset; }
.pl .nm { font-family: var(--f-sacred); font-weight: 600; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .nm small { font-family: var(--f-ui); color: var(--grey); letter-spacing: 0; font-size: 12px; margin-left: 6px; }
.pl .meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--grey); flex-wrap: wrap; }
.pl.right { grid-template-columns: 1fr 44px; text-align: right; }
.pl.right canvas { grid-column: 2; grid-row: 1 / span 2; }
.pl.right .nm, .pl.right .meta { grid-column: 1; justify-content: flex-end; }
.pl.right .meta { flex-direction: row-reverse; justify-content: flex-start; }
.ka { color: var(--set); letter-spacing: 1px; } .ka i { font-style: normal; opacity: .22; }
.ba { display: inline-flex; gap: 3px; } .ba i { width: 7px; height: 12px; border-radius: 2px; background: var(--indigo-2); }
.ba i.on { background: var(--udjat); box-shadow: 0 0 6px rgba(57,212,200,.6); }
.sealed { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 700; }
.carry { color: var(--sand); font-variant-numeric: tabular-nums; }
.lockdot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-2); }
.lockdot.on { background: var(--udjat); box-shadow: 0 0 8px var(--udjat); }

.hour { position: relative; width: 66px; height: 66px; }
.clock { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock .seg-h { fill: none; stroke: var(--indigo-2); stroke-width: 7; }
.clock .seg-h.done { stroke: #3d3a63; } .clock .seg-h.now { stroke: var(--gold); } .clock .seg-h.shadow { stroke: #4b1d5c; }
#timerRing { fill: none; stroke: var(--udjat); stroke-width: 2.5; stroke-dasharray: 207.3; stroke-dashoffset: 0; opacity: 0; transition: stroke-dashoffset .25s linear; }
.hour-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; }
.hour-txt b { font-family: var(--f-sacred); font-size: 22px; } .hour-txt span { color: var(--grey); font-size: 11px; margin-top: 6px; }

.stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(44,74,158,.22), transparent 70%),
    radial-gradient(1px 1px at 12% 22%, rgba(233,228,214,.55), transparent), radial-gradient(1px 1px at 82% 14%, rgba(233,228,214,.45), transparent),
    radial-gradient(1.5px 1.5px at 66% 78%, rgba(245,194,66,.5), transparent), radial-gradient(1px 1px at 24% 84%, rgba(233,228,214,.4), transparent),
    radial-gradient(1px 1px at 92% 58%, rgba(233,228,214,.5), transparent), radial-gradient(1px 1px at 6% 56%, rgba(57,212,200,.5), transparent); }
#board { display: block; touch-action: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 4px;
  box-shadow: 0 0 0 2px #3a2e12, 0 0 0 4px rgba(201,169,106,.55), 0 0 0 9px #0f1326, 0 0 0 10px rgba(201,169,106,.25), 0 30px 80px -20px rgba(0,0,0,.9), 0 0 120px -30px rgba(245,194,66,.25); }
.banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); pointer-events: none; opacity: 0;
  font-family: var(--f-sacred); font-weight: 800; font-size: clamp(22px, 4.5vw, 40px); letter-spacing: .06em; text-align: center; color: var(--text);
  text-shadow: 0 0 18px rgba(0,0,0,.9), 0 2px 0 #000; transition: opacity .12s, transform .12s; white-space: nowrap; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner small { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--sand); margin-top: 6px; }

.dock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); }
.hint { margin: 0; min-height: 22px; color: #cfcab9; font-size: 14px; text-align: center; max-width: 64ch; }
.cartouches { display: flex; gap: 10px; min-height: 78px; align-items: center; justify-content: center; } /* same height while programming and revealing: the board never jumps */
.cartouches.reveal { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 10px; }
.cart.mini { height: 36px; width: 80px; }
.cart { position: relative; width: 88px; height: 50px; border-radius: 25px; border: 2px solid var(--indigo-2); background: var(--night-2);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 0 10px; }
.cart .n { position: absolute; left: 10px; top: 4px; font-size: 10px; color: var(--grey); }
.cart.cur { border-color: var(--gold); box-shadow: 0 0 16px -4px rgba(245,194,66,.6); }
.cart.filled { border-color: #4b5a9a; }
.cart .ic { width: 20px; height: 20px; }
.cart .dir { display: inline-block; font-size: 16px; color: var(--udjat); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.actions button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 76px; padding: 8px 4px 6px;
  border-radius: var(--r-m); border: 1px solid var(--indigo-2); background: var(--indigo); font-size: 13px; font-weight: 600; }
.actions button em { font-style: normal; font-size: 11px; color: var(--udjat); font-weight: 600; }
.actions button.sel { border-color: var(--gold); background: #231f17; }
.actions button:disabled { opacity: .32; cursor: default; }
.actions button:not(:disabled):hover { border-color: var(--lapis); }
.dock-row { display: flex; gap: 10px; align-items: center; width: min(100%, 420px); }
#btnLock { min-width: 0; flex: 1; }

/* action icons: chiselled 2px strokes (CSS masks with inline SVG) */
.ic { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-move  { color: var(--text);  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='miter'%3E%3Cpath d='M4 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-dive  { color: var(--gold);  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M3 4l9 9M8 4l8 8M3 9l8 8M13 13l7 7M20 13v7h-7'/%3E%3C/svg%3E"); }
.ic-parry { color: var(--udjat); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.ic-rest  { color: #9fb1ff;      --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M18 14A7 7 0 0 1 10 5a7 7 0 1 0 8 9z'/%3E%3C/svg%3E"); }
.ic-seal  { color: var(--gold);  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M2 12c4-5 16-5 20 0-4 5-16 5-20 0z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M9 16l-1 5'/%3E%3C/svg%3E"); }
.ic-stun  { color: var(--grey);  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E"); }

.ic-lock { color: var(--grey); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='12' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E"); }

.ftoast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -8px); margin: 0; z-index: 3; pointer-events: none; opacity: 0;
  padding: 8px 14px; border-radius: var(--r-s); background: rgba(13,17,34,.92); border: 1px solid rgba(57,212,200,.5); color: var(--text); font-size: 14px;
  max-width: calc(100% - 24px); text-align: center; transition: opacity .2s, transform .2s; }
.ftoast.show { opacity: 1; transform: translate(-50%, 0); }

/* ——— dialogs ——— */
dialog { border: 1px solid var(--indigo-2); border-radius: 14px; background: var(--night-2); color: var(--text); padding: 26px 26px 22px; max-width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(5,6,14,.72); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 12px; font-family: var(--f-sacred); font-weight: 800; letter-spacing: .04em; font-size: 26px; color: var(--gold); }
.rules { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.rules li { padding-left: 4px; } .rules li b { color: var(--gold); font-weight: 600; }
#end { text-align: center; } #end canvas { width: 320px; max-width: 100%; height: auto; aspect-ratio: 8 / 5; }
#endSub { color: #cfcab9; margin: 0 0 12px; }
.score { margin: 0 0 18px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.score b { font-family: var(--f-sacred); font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }
.score small { color: var(--grey); } .score small.rec { color: var(--udjat); font-weight: 600; }
.rules-more { margin: -6px 0 18px; color: var(--grey); font-size: 13.5px; } .rules-more b { color: #cfcab9; font-weight: 600; }

/* ——— responsive ——— */
@media (max-width: 640px) {
  #heroEye { width: 150px; height: 92px; }
  .t-small { font-size: 12px; margin-bottom: 8px; } .t-big { font-size: clamp(30px, 9vw, 44px); }
  .pitch { font-size: 15px; } .home-inner { gap: 14px; padding-top: 12px; }
  .pick { gap: 6px; margin-top: 0; }
  .w-card { padding: 8px 2px 7px; } .w-card canvas { width: 40px; height: 40px; } .w-card b { font-size: 12.5px; letter-spacing: .02em; } .w-card small { font-size: 11px; }
  .ladder { gap: 4px; } .rung { min-height: 58px; padding: 7px 2px; } .rung b { font-size: 12px; letter-spacing: 0; } .rung small { font-size: 9.5px; }
  .perk-line { font-size: 13.5px; }
  .pl .nm small { display: none; }
  .actions button { width: 62px; font-size: 12px; }
  .cart { width: 74px; height: 44px; }
  .hud { padding-left: 10px; padding-right: 10px; }
  .hour { width: 56px; height: 56px; }
}
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
  #game { display: none; }
  #game.active { display: grid; grid-template-columns: 1fr minmax(320px, 380px); grid-template-rows: auto 1fr; }
  #game .hud { grid-column: 1 / -1; }
  #game .dock { justify-content: center; margin: 12px 20px 20px 0; padding: 20px 18px; border-radius: 14px; gap: 14px;
    background: linear-gradient(180deg, rgba(20,26,51,.85), rgba(13,17,34,.9)); border: 1px solid var(--indigo-2); }
  #game .hint { min-height: 66px; display: flex; align-items: center; justify-content: center; }
  #game .dock-row { width: 100%; justify-content: space-between; }
  .actions { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .actions button { width: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.name { width: min(320px, 100%); padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--indigo-2); background: rgba(13,17,34,.7); color: var(--text); font: inherit; text-align: center; }
.name::placeholder { color: var(--grey); }
@media (max-height: 700px) {
  .t-big { font-size: clamp(30px, 7vw, 52px); } #heroEye { width: 160px; height: 100px; } .home-inner { gap: 12px; }
  .w-card canvas { width: 40px; height: 40px; }
  .cart { height: 40px; } .actions button { padding: 5px 4px 4px; } .dock { gap: 5px; } .hint { font-size: 12.5px; min-height: 18px; }
}

a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }

/* playtest polish */
.sealed small { margin-left: 4px; font-size: 10.5px; color: var(--grey); font-weight: 600; }
.cartouches.reveal { grid-template-columns: auto repeat(3, auto); align-items: center; }
.rowlbl { font-size: 11px; font-weight: 600; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.rowlbl.me { color: var(--gold); } .rowlbl.riv { color: var(--set); }
.hint { min-height: 2.9em; display: flex; align-items: center; justify-content: center; }
.hint.nudge { animation: nudge .35s ease-out; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rung.locked { opacity: .45; cursor: default; }
.btn.mini { min-height: 40px; }
#btnMute.muted { opacity: .55; text-decoration: line-through; }
@media (max-width: 640px) { .btn.mini { min-height: 44px; } .cart.mini { width: 70px; } }
@media (prefers-reduced-motion: reduce) { .hint.nudge { animation: none; } }

/* audit pass */
.carry { display: inline-block; min-width: 2.4em; } /* reserved: carrying a shard never reflows the HUD and shrinks the board */
.btn.mini { min-width: 44px; }
@media (max-width: 640px) { .rung small { font-size: 11px; } .rung b { font-size: 12.5px; } }
.cart .n { font-size: 11px; }
.sealed small { font-size: 11px; }
@media (max-height: 1000px) and (min-height: 701px) and (min-width: 641px) { /* laptops: name field and footer above the fold */
  .t-big { font-size: clamp(32px, 6.4vw, 60px); } #heroEye { width: 180px; height: 110px; } .home-inner { gap: 12px; padding-top: 12px; }
}
@media (max-width: 640px) and (max-height: 820px) { #heroEye { width: 120px; height: 74px; } .home-inner { gap: 10px; padding-top: 8px; } .pitch { font-size: 14px; } }
@media (max-height: 820px) and (min-width: 641px) { #heroEye { width: 130px; height: 80px; } .t-big { font-size: clamp(30px, 5vw, 46px); } .home-inner { gap: 10px; padding-top: 8px; padding-bottom: 8px; } .w-card canvas { width: 40px; height: 40px; } }
@media (max-width: 640px) and (max-height: 680px) { .w-card canvas { width: 34px; height: 34px; } .t-big { font-size: clamp(26px, 8vw, 36px); } #heroEye { width: 96px; height: 60px; } }

/* ——— v2: guided first night, private duels, 60 s online Hours ——— */
.cta-row.duo { display: grid; grid-template-columns: 1fr 1fr; width: min(420px, 100%); }
.cta-row.duo .btn { padding-left: 10px; padding-right: 10px; }
.ladder[hidden] { display: none; }

.hint-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.hint.coach { flex-wrap: wrap; gap: 2px 8px; padding: 6px 44px 6px 12px; border-radius: var(--r-m); color: var(--text);
  background: linear-gradient(180deg, rgba(245,194,66,.13), rgba(245,194,66,.05)); border: 1px solid rgba(245,194,66,.5); }
.hint.coach b { color: var(--gold); font-weight: 700; }
.hint .cstep { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.coach-skip { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--sand); font-size: 22px; line-height: 1; border-radius: var(--r-s); }
.coach-skip:hover { color: var(--text); }
.coach-skip[hidden] { display: none; }
.coach-target { position: relative; border-color: var(--gold) !important; animation: coachPulse 1.3s ease-in-out infinite; }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,194,66,.0), 0 0 0 1px var(--gold) inset; } 50% { box-shadow: 0 0 0 5px rgba(245,194,66,.28), 0 0 0 1px var(--gold) inset; } }
.actions button.off { opacity: .45; }
.actions button.off:hover { border-color: var(--indigo-2); }

.secs { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: var(--night);
  font-size: 12px; font-weight: 700; color: var(--udjat); font-variant-numeric: tabular-nums; line-height: 16px; white-space: nowrap; }
.secs.low { color: var(--set); }
.secs[hidden] { display: none; }

/* rules: six lines, the rest folded */
.rules { gap: 7px; } .rules li { line-height: 1.4; }
.rules-adv { margin: 0 0 16px; border-top: 1px solid var(--indigo-2); padding-top: 4px; }
.rules-adv summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--sand); font-weight: 600; list-style: none; }
.rules-adv summary::-webkit-details-marker { display: none; }
.rules-adv summary::before { content: '▸'; margin-right: 8px; transition: transform .15s; display: inline-block; }
.rules-adv[open] summary::before { transform: rotate(90deg); }
ul.rules-more { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #b9b6c9; font-size: 13.5px; }
#rules { max-height: calc(100dvh - 32px); overflow: auto; }

/* private duel dialog */
#duel { width: min(440px, calc(100vw - 32px)); text-align: center; }
.duel-lead { margin: 0 0 14px; color: #cfcab9; }
.share-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.share-row[hidden], .duel-lead[hidden] { display: none; }
.name.link { width: 100%; font-size: 14px; text-align: center; color: var(--gold); min-height: 44px; }
.duel-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; color: var(--udjat); }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--udjat); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach-target, .dots i { animation: none; } .log { scroll-behavior: auto; } }
@media (max-width: 640px) { .hint.coach { font-size: 13px; line-height: 1.35; } .secs { font-size: 11px; bottom: -13px; } }
html { -webkit-tap-highlight-color: transparent; }
/* the guide keeps one height (badge inline with its text): the board never jumps between steps */
.hint.coach { display: flex; min-height: 66px; text-align: center; }
.hint .ctext { display: block; }
.hint .cstep { margin-right: 8px; }
/* carried shards: a badge on the medallion, never a new HUD line */
.pl { position: relative; }
.pl .carry { position: absolute; top: 28px; left: 28px; min-width: 0; padding: 0 5px; border-radius: 8px; background: var(--gold); color: #1a1407;
  font-size: 11px; font-weight: 700; line-height: 16px; box-shadow: 0 0 0 2px var(--night); }
.pl.right .carry { left: auto; right: 28px; }
.pl .carry:empty { display: none; }
@media (max-width: 640px) {
  .home-foot { flex-wrap: nowrap; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .home-foot .btn.mini { padding: 6px 10px; }
}
@media (max-height: 760px) and (min-width: 641px) { #heroEye { width: 110px; height: 66px; } .home-inner { gap: 8px; } .t-big { font-size: clamp(28px, 4.4vw, 40px); } .w-card { padding: 6px 6px 6px; } }
.name.link { font-size: 13px; padding: 10px 8px; }
@media (max-width: 400px) { #duel { padding: 22px 16px 18px; } .name.link { font-size: 12px; } }

.hint.rival { color: var(--udjat); font-weight: 600; }

/* ——— v3: the reveal told in words, outcome marks on the revealed cartouches ——— */
.cart.hurt { border-color: var(--set) !important; background: rgba(224,69,47,.16); }
.cart.landed { box-shadow: 0 0 12px -2px rgba(245,194,66,.7); }
.cart.parried { border-color: var(--udjat) !important; background: rgba(57,212,200,.1); }
.cart.stun .ic, .cart.stun .dir, .cart.stun .n { opacity: .4; } .cart.stun { border-style: dashed; }
.cart.sealed { border-color: var(--gold) !important; background: rgba(245,194,66,.12); }
.cart .badge { position: absolute; right: -7px; top: -9px; font-size: 11px; font-weight: 700; line-height: 15px; padding: 0 5px; border-radius: 9px;
  background: var(--night); border: 1px solid currentColor; color: var(--text); font-variant-numeric: tabular-nums; }
.cart.hurt .badge { color: #ff7a66; } .cart.stun .badge { color: var(--grey); } .cart.sealed .badge, .cart.parried .badge { color: var(--gold); } .cart.parried .badge { color: var(--udjat); }
/* the hint keeps one height whatever it says (two lines, then an ellipsis): the board never resizes mid-reveal */
.hint { height: 3em; min-height: 0; line-height: 1.4; }
.hint .htxt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hint.coach { height: 66px; }
@media (max-width: 640px) { .hint { font-size: 13.5px; } }
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) { #game .hint { height: 66px; } #game .hint .htxt { -webkit-line-clamp: 3; } }

/* ——— v3 visual pass ——— */
/* home: balanced, with a sky */
#home { background: radial-gradient(120% 80% at 50% 18%, #18204a 0%, var(--night) 62%),
  radial-gradient(1px 1px at 12% 22%, rgba(233,228,214,.6), transparent), radial-gradient(1px 1px at 82% 14%, rgba(233,228,214,.5), transparent),
  radial-gradient(1.5px 1.5px at 66% 70%, rgba(245,194,66,.5), transparent), radial-gradient(1px 1px at 24% 84%, rgba(233,228,214,.4), transparent),
  radial-gradient(1px 1px at 92% 58%, rgba(233,228,214,.5), transparent), radial-gradient(1px 1px at 6% 56%, rgba(57,212,200,.5), transparent),
  radial-gradient(1px 1px at 40% 8%, rgba(233,228,214,.5), transparent), radial-gradient(1px 1px at 58% 90%, rgba(233,228,214,.35), transparent); }
.home-inner { margin: auto 0; }
.w-card { transition: transform .12s, border-color .15s, box-shadow .15s; }
.w-card:hover { transform: translateY(-2px); border-color: var(--hue); }
.rung { transition: border-color .15s, box-shadow .15s; }
@media (min-width: 641px) and (min-height: 980px) { #heroEye { width: 260px; height: 162px; } }
@media (max-width: 640px) and (min-height: 800px) { #heroEye { width: 176px; height: 110px; } .home-inner { gap: 16px; } }

/* HUD: the Hour number stays inside its ring */
.hour-txt.two b { font-size: 18px; } .hour-txt.two span { display: none; }
@media (max-width: 640px) { .hour-txt b { font-size: 20px; } .hour-txt.two b { font-size: 17px; } }

/* tall phones: the dock breathes instead of leaving a void around the board */
@media (max-width: 640px) and (min-height: 800px) {
  .dock { gap: 12px; padding-top: 8px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cart { height: 52px; width: 80px; } .cart.mini { height: 40px; }
  .actions { gap: 8px; } .actions button { width: 66px; padding: 11px 4px 9px; }
  .hint { font-size: 14.5px; }
  .hud { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 10px; }
}

/* the night's chronicle and the keyboard legend: only where the side panel has room */
.chron, .keys { display: none; }
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
  #game .dock { justify-content: flex-start; padding-top: 16px; min-height: 0; overflow: hidden; } /* the chronicle scrolls inside: the panel never pushes the board */
  .chron { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--indigo-2); }
  .chron-h { margin: 0 0 8px; font-family: var(--f-sacred); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); text-align: center; }
  .chron-h::before, .chron-h::after { content: '·'; margin: 0 8px; color: var(--indigo-2); }
  .log { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; width: 100%; list-style: none; font-size: 13px; color: var(--grey); flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .log::-webkit-scrollbar { display: none; }
  .log li { line-height: 1.35; } .log li.h { color: var(--sand); font-family: var(--f-sacred); font-weight: 600; letter-spacing: .05em; font-size: 12px; margin-top: 4px; } .log li.hr { color: #cfcab9; }
  .log li:last-child { color: var(--text); }
  .chron-empty { display: none; margin: 0; font-size: 13px; line-height: 1.45; color: var(--grey); text-align: center; padding: 6px 4px 0; }
  .log:empty + .chron-empty { display: block; }
  .keys { display: block; margin: 8px 0 0; font-size: 11.5px; color: var(--grey); text-align: center; line-height: 1.4; }
}

/* end of night: what the night did to you */
.night-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin: 4px 0 16px; }
.night-sum div { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: var(--r-s); background: rgba(20,26,51,.6); border: 1px solid var(--indigo-2); }
.night-sum b { font-family: var(--f-sacred); font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.night-sum small { font-size: 11px; color: var(--grey); line-height: 1.2; }
@media (min-width: 641px) { .night-sum { grid-template-columns: repeat(6, 1fr); } }

/* toasts sit under the board, never over the shards */
.ftoast { top: auto; bottom: 8px; transform: translate(-50%, 8px); }
.ftoast.show { transform: translate(-50%, 0); }
.btn.primary { transition: transform .08s, background .15s, box-shadow .15s; }
.btn.primary:not(:disabled):hover { box-shadow: 0 0 0 1px #ffde84 inset, 0 8px 28px -8px rgba(245,194,66,.75); }
.actions button { transition: border-color .15s, background .15s, transform .08s; }
.actions button:not(:disabled):active { transform: translateY(1px); }
#end { max-height: calc(100dvh - 24px); overflow: auto; }
@media (max-height: 700px) { #end canvas { width: 220px; } .night-sum { margin-bottom: 10px; } .night-sum div { padding: 3px 2px; } }
.home-foot { margin-top: 0; } /* the free space splits evenly above and below the content */
@media (max-width: 640px) and (min-height: 700px) { #heroEye { width: 156px; height: 96px; } }
.rules .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }
@media (max-width: 640px) { #btnRulesOk { width: 100%; } }