/* Inkfolk, die-cut on ink: the look of the start menu, the battle menu and the battle.
   A dark desk; stickers with a white die-cut outline; Anton for the loud words and
   Space Mono for the small ones; when a card is the subject, its ink floods the ground.
   Only the screens named in app.js (INK_SCREENS) wear it, through body[data-screen];
   the rest keep the paper look (style.css) until they're redone. */

:root {
  --desk: #0a0a0c;
  --ink-red: #D7263D;
  --ink-yellow: #F2B705;
  --ink-blue: #1E5AA8;
  --anton: "Anton", "Fira Sans Extra Condensed", "Commissioner", var(--scripts), Impact, system-ui, sans-serif;
  --mono2: "Space Mono", "Noto Sans Mono", var(--scripts), ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* The die-cut outline: a white edge all round, then a hard shadow under it. */
  --die: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 6px 0 #0008);
  --die-thin: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(2px 4px 0 #0008);
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --tick: polygon(0 0, 100% 6%, 98% 100%, 2% 94%);
}

/* --- the desk -------------------------------------------------------------------- */
html:has(body:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"])) { background: var(--desk); }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"]) {
  background-color: var(--desk);
  background-image: radial-gradient(#ffffff0d 1px, transparent 1.4px);
  background-size: 9px 9px;
  color: #fff;
  --focus: #ffd23f;
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"]) :focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"]) .lede { color: #ffffffcc; font: 400 13px/1.5 var(--mono2); max-width: 24rem; }

.top .top-actions { margin-left: auto; display: flex; gap: 8px; }
body:not([data-screen="start"]) .top .top-actions { display: none; }
.top .word { font: 400 14px/1 var(--mono2); letter-spacing: 0.12em; text-transform: uppercase; }
body:is([data-screen="start"]) .top .word { color: #fff; }

/* The loud headline. */
#start h1, body[data-screen="mode"] #mode .stephead h2 {
  font: 400 clamp(54px, 17vw, 84px)/0.9 var(--anton); text-transform: uppercase; letter-spacing: 0.005em; color: #fff;
}
#start h1 .hot { color: var(--ink-red); text-shadow: 0 0 0 #0000; -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; }

/* Round buttons on the dark: white discs, die-cut. */
body:is([data-screen="mode"], [data-screen="battle"]) .stephead .icon,
body[data-screen="battle"] .battle-head .icon {
  background: #fff; color: #111; border-radius: 50%; filter: var(--die-thin);
}
body[data-screen="mode"] .stephead { grid-template-columns: 44px minmax(0, 1fr) 44px; }
body[data-screen="mode"] .stephead h2 { text-align: left; font-size: clamp(54px, 17vw, 84px); padding: 8px 0 0; }
body[data-screen="mode"] #mode { gap: 12px; }
body[data-screen="battle"] .battle-head h2 { font: 400 22px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
body[data-screen="battle"] .view-toggle { background: #fff; color: #111; border: 0; border-radius: 12px; font: 700 13px/1 var(--mono2); filter: var(--die-thin); }
body[data-screen="battle"] .view-toggle[aria-pressed="true"] { background: #ffd23f; color: #111; }

/* --- the menus: stickers on the desk --------------------------------------------- */
body:is([data-screen="start"], [data-screen="mode"]) .menu,
body:is([data-screen="start"], [data-screen="mode"]) .modes {
  --slant: 0px; gap: 18px 10px; align-items: center; margin-top: 8px;
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab {
  --face: var(--ink-red); --txt: #fff; --cut: var(--tick);
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  min-height: 0; padding: 22px 16px; margin: 0;
  color: var(--txt); background: none; filter: var(--die); animation: none; transition: transform 140ms cubic-bezier(.3, 1.6, .5, 1);
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab[hidden] { display: none; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab::before { display: none; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab::after {
  inset: 0; z-index: -1; clip-path: var(--cut); box-shadow: none;
  background: radial-gradient(#00000026 1.4px, transparent 1.8px) 0 0 / 9px 9px, var(--face);
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab.left { margin-right: 0; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab .label {
  font: 400 clamp(26px, 8vw, 34px)/0.95 var(--anton); text-transform: uppercase; letter-spacing: 0.01em;
  -webkit-text-stroke: 0; paint-order: normal; transform: none; padding: 0; color: var(--txt);
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab small { font: 400 11px/1.35 var(--mono2); text-transform: none; text-shadow: none; max-width: 11rem; color: var(--txt); }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab .glyph {
  position: static; width: 46px; height: 46px; color: var(--txt); transform: none; filter: none; order: -1;
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:focus-visible { outline: 3px solid #ffd23f; outline-offset: 6px; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:focus-visible::after { box-shadow: none; }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab[data-armed]::after { box-shadow: none; outline: 4px solid #ffd23f; outline-offset: -8px; }
@media (hover: hover) {
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:not(:disabled):hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.03); }
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:not(:disabled):hover::after { box-shadow: none; }
}
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:not(:disabled):active { transform: translateY(3px) scale(0.97); }
body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab:disabled { filter: var(--die) grayscale(0.7); }

/* --- The start ground: the hero card's ink, dark, with a spotlight and ripples behind the card ---------
   body[data-ground] is the card's color (or "new": a wash of all three inks for the fan). */
:root {
  --g-red: color-mix(in srgb, var(--ink-red) 32%, #0a0a0c);
  --g-blue: color-mix(in srgb, var(--ink-blue) 40%, #0a0a0c);
  --g-yellow: color-mix(in srgb, var(--ink-yellow) 30%, #0a0a0c);
  --g-new: #0d0d12;
}
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"]) { --g: var(--g-new); --gi: #ffffff; isolation: isolate; background-color: var(--g);
  background-image: radial-gradient(#ffffff10 1px, transparent 1.4px), radial-gradient(70% 45% at 50% 24%, color-mix(in srgb, var(--gi) 38%, transparent), transparent 72%);
  background-size: 9px 9px, auto; }
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="red"] { --g: var(--g-red); --gi: var(--ink-red); }
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="blue"] { --g: var(--g-blue); --gi: var(--ink-blue); }
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="yellow"] { --g: var(--g-yellow); --gi: var(--ink-yellow); }
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="new"] {
  background-image: radial-gradient(#ffffff10 1px, transparent 1.4px),
    radial-gradient(60% 34% at 12% 10%, color-mix(in srgb, var(--ink-red) 46%, transparent), transparent 70%),
    radial-gradient(60% 34% at 92% 18%, color-mix(in srgb, var(--ink-yellow) 34%, transparent), transparent 70%),
    radial-gradient(70% 38% at 70% 62%, color-mix(in srgb, var(--ink-blue) 46%, transparent), transparent 72%);
  background-size: 9px 9px, auto, auto, auto;
}
html:has(body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="red"]) { background: var(--g-red); }
html:has(body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="blue"]) { background: var(--g-blue); }
html:has(body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="yellow"]) { background: var(--g-yellow); }
html:has(body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="new"]) { background: var(--g-new); }
/* Ripples, like a drop of ink in water, fading out from behind the card. */
body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 24%, transparent 0 58px, #ffffff14 58px 60px);
  -webkit-mask-image: radial-gradient(circle at 50% 24%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 24%, #000 0, transparent 62%);
}
@media (min-width: 760px), (orientation: landscape) and (max-height: 520px) {
  body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])::before { background: repeating-radial-gradient(circle at 26% 50%, transparent 0 58px, #ffffff14 58px 60px); -webkit-mask-image: radial-gradient(circle at 26% 50%, #000 0, transparent 55%); mask-image: radial-gradient(circle at 26% 50%, #000 0, transparent 55%); }
  body:is([data-screen="start"], [data-screen="open"], [data-screen="look"]) { background-image: radial-gradient(#ffffff10 1px, transparent 1.4px), radial-gradient(45% 70% at 26% 50%, color-mix(in srgb, var(--gi) 38%, transparent), transparent 72%); }
  body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])[data-ground="new"] { background-image: radial-gradient(#ffffff10 1px, transparent 1.4px), radial-gradient(45% 60% at 8% 15%, color-mix(in srgb, var(--ink-red) 46%, transparent), transparent 70%), radial-gradient(45% 60% at 60% 5%, color-mix(in srgb, var(--ink-yellow) 34%, transparent), transparent 70%), radial-gradient(50% 60% at 40% 95%, color-mix(in srgb, var(--ink-blue) 46%, transparent), transparent 72%); }
}
@media (forced-colors: active) { body:is([data-screen="start"], [data-screen="open"], [data-screen="look"])::before { display: none; } }

/* --- Start: the card is the hero and one state leads -------------------------------
   #start[data-state] is new (a fan of starters, Make a card leads), draft (Finish your card leads), ready
   (your card, Battle leads) or battle (a battle left open leads). The slabs all share the one cut. */
#start { --cw: min(54vw, 27vh, 260px); display: grid; gap: 14px; justify-items: center; align-content: start; padding-top: 1vh; text-align: center; }
#start .hero { display: grid; place-items: center; width: 100%; min-height: calc(var(--cw) * 1.4 + 18px); }
#start .start-card { width: var(--cw); margin: 0; border: 0; border-radius: 12px; rotate: -3deg; box-shadow: 0 0 0 3px #fff, 3px 8px 0 #0008; }
#start .start-fan { position: relative; width: calc(var(--cw) * 1.5); max-width: 100%; height: calc(var(--cw) * 1.4 + 18px); }
#start .start-fan[hidden] { display: none; }
#start .start-fan canvas { position: absolute; top: 14px; left: 50%; width: calc(var(--cw) * 0.8); height: auto; aspect-ratio: 5 / 7; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px #fff, 3px 8px 0 #0008; }
#start .start-fan canvas:nth-child(1) { transform: translateX(-84%) rotate(-8deg); transform-origin: 50% 100%; }
#start .start-fan canvas:nth-child(2) { top: 0; width: calc(var(--cw) * 0.9); transform: translateX(-50%); z-index: 2; }
#start .start-fan canvas:nth-child(3) { transform: translateX(-16%) rotate(8deg); transform-origin: 50% 100%; }
#start .head { display: grid; gap: 8px; justify-items: center; width: 100%; }
#start h1 { font-size: clamp(38px, 12vw, 60px); line-height: 0.95; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; /* (the underscore of a name hangs below the baseline) */ }
#start .lede { margin: 0; text-wrap: balance; }
#start .menu { grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 4px; }
#start .slab { grid-auto-flow: column; justify-content: center; gap: 12px; min-height: 64px; padding: 12px 16px; transform: none; }
#start .slab.main { grid-column: 1 / -1; min-height: 92px; padding: 18px 20px; transform: rotate(-1deg); }
#start .slab .glyph { width: 32px; height: 32px; order: 0; }
#start .slab:not(.main):not(.wide) .glyph { display: none; }
#start .slab.main .glyph { width: 42px; height: 42px; }
#start .slab .label { font-size: clamp(22px, 6.6vw, 28px); }
#start .slab .label { padding: 0; }
#start .slab.main .label { font-size: clamp(32px, 10vw, 42px); }
#start #battle-resume.main .label { font-size: clamp(26px, 8vw, 34px); }
#start .slab.main { order: -1; }
#start #send-card:not(.main) { order: 1; }
#start #resume:not(.main), #start #try-battle:not(.main) { order: 2; }
#start #begin { --face: var(--ink-red); }
#start #begin:not(.main) { order: 3; }
#start #resume, #start #send-card { --face: var(--ink-yellow); --txt: #111; }
#start:not([data-state="draft"]) #resume { --face: #17181b; --txt: #fff; }
#start #battle-begin, #start #try-battle { --face: var(--ink-blue); }
#start #battle-resume { --face: #f2e6d9; --txt: #111; }
#start .menu-bar { grid-column: 1 / -1; order: 9; background: none; color: #ffffffb3; font: 400 12px/1.4 var(--mono2); text-transform: none; letter-spacing: 0; padding: 4px 0 0; min-height: 0; transform: none; filter: none; clip-path: none; text-align: center; }
/* The HUD in the top bar: round white die-cut buttons (sound now; packs and cards beside it). */
.top .hud { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; filter: var(--die-thin); }
.top .hud svg { width: 22px; height: 22px; }
.top .hud:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
/* An idle tilt: the hero card breathes a little. It moves by the separate rotate and translate properties, so the card's own tilt stays. */
@keyframes idle-card { 0%, 100% { rotate: -3deg; translate: 0 0; } 50% { rotate: -1.2deg; translate: 0 -6px; } }
@keyframes idle-fan { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: 1.2deg; translate: 0 -5px; } }
#start .start-card { animation: idle-card 6s ease-in-out infinite; }
#start .start-fan canvas:nth-child(2) { animation: idle-fan 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #start .start-card, #start .start-fan canvas { animation: none; } }
/* A short phone: a smaller card so the buttons stay in reach. */
@media (max-height: 700px) and (max-width: 759px) {
  #start { --cw: min(44vw, 21vh); gap: 10px; padding-bottom: 28px; }
  #start h1 { font-size: clamp(32px, 10vw, 46px); }
  #start .slab.main { min-height: 76px; padding: 12px 16px; }
  #start .slab { min-height: 54px; padding: 8px 12px; }
}
@media (max-height: 620px) and (max-width: 759px) {
  #start { --cw: min(36vw, 16vh); }
  #start .lede { display: none; }
}
/* Room to spread: a wider screen, or a phone on its side, sets the card on the left and the words and buttons on the right. */
@media (min-width: 760px), (orientation: landscape) and (max-height: 520px) {
  body[data-screen="start"] main { max-width: 72rem; }
  #start { --cw: min(22vw, 42vh, 300px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 28px; align-items: center; align-content: center; text-align: left; padding-top: 0; }
  #start .hero { grid-row: 1 / span 2; }
  #start .head { justify-items: start; align-self: end; }
  #start .menu { align-self: start; }
  #start .menu-bar { text-align: left; }
  #start h1 { font-size: clamp(34px, 6vw, 72px); }
  #start .lede { font-size: 15px; }
  #start .menu-bar { font-size: 13px; }
  #start .slab:not(.main) .label { font-size: clamp(24px, 2.4vw, 32px); }
  #start .slab.main .label { font-size: clamp(34px, 3.6vw, 52px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  #start { --cw: min(19vw, 40vh); }
  #start h1 { font-size: clamp(30px, 6vh + 2vw, 44px); }
  #start .lede { display: none; }
  #start .slab.main { min-height: 72px; padding: 12px 16px; }
  #start .slab { min-height: 54px; padding: 8px 12px; }
}

/* Battle menu: a circle and a hexagon, big. */
#mode .modes { grid-template-columns: 1fr; gap: 14px; justify-items: start; }
#mode .slab { min-height: 0; }
#mode .slab[data-mode="computer"] { --face: var(--ink-blue); --cut: circle(50%); aspect-ratio: 1; width: min(80%, 300px); padding: 18px; transform: rotate(-3deg); }
#mode .slab[data-mode="pass"] { --face: var(--ink-red); --cut: var(--hex); aspect-ratio: 1.12; width: min(76%, 280px); justify-self: end; margin-top: -28px; transform: rotate(3deg); }
#mode .slab small { max-width: 10rem; }
#mode .slab .glyph { width: 58px; height: 58px; }

/* --- the battle ------------------------------------------------------------------ */
.board[data-mine="red"] { --me: var(--ink-red); --on-me: #fff; }
.board[data-mine="blue"] { --me: var(--ink-blue); --on-me: #fff; }
.board[data-mine="yellow"] { --me: var(--ink-yellow); --on-me: #111; }
.board[data-theirs="red"] { --opp-base: var(--ink-red); }
.board[data-theirs="blue"] { --opp-base: var(--ink-blue); }
.board[data-theirs="yellow"] { --opp-base: var(--ink-yellow); }
/* The other side is always the same ink a shade darker, so a mirror match still has two halves. */
.board { --opp: color-mix(in srgb, var(--opp-base, #444) 60%, #000); --on-me: #fff; }

body[data-screen="battle"] .board {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 12px; gap: 10px; border: 0; border-radius: 24px; color: #fff;
  background-color: var(--me, #333);
  background-image: radial-gradient(#00000026 1.6px, transparent 1.9px);
  background-size: 10px 10px;
  --focus: #ffd23f;
}
/* The flat board: the other side's ground ends at the middle band, on a slant. */
body[data-screen="battle"] .board:not(.b3d) .band::before {
  content: ""; position: absolute; z-index: -1; left: -30px; right: -30px; bottom: 50%; height: 2400px; pointer-events: none;
  background-color: var(--opp); background-image: radial-gradient(#00000026 1.6px, transparent 1.9px); background-size: 10px 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}
/* The 3D table: the same split, behind the table (which has no top of its own). */
body[data-screen="battle"] .board.b3d {
  margin: 0 -10px; padding: 8px 6px 10px;
  background-image: radial-gradient(#00000026 1.6px, transparent 1.9px), linear-gradient(177deg, var(--opp) 0 calc(50% - 22px), #0000 calc(50% - 22px));
  background-size: 10px 10px, 100% 100%;
}

.board .banner { background: none; border: 0; border-radius: 0; padding: 0; gap: 10px; }
.board .banner.theirs { color: #fff; }
.board .banner.mine { color: var(--on-me); }
.board .wname { font: 400 28px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.01em; }
.board .wsub { font: 400 11px/1.2 var(--mono2); color: inherit; opacity: 0.95; text-transform: uppercase; letter-spacing: 0.04em; }
.board .banner .tile.avatar { --tw: 60px; width: 60px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 2px 5px 0 3px #0008; }
.board .banner .tile.avatar .pic { border-radius: 50%; object-fit: cover; object-position: 50% 47%; } /* the circle shows 500 of the 700 art rows; the starters' figures are centred about row 345 (bounding boxes 335, mass 355) */
.board.b3d .banner .tile.avatar { --tw: 46px; width: 46px; }
.board .bighp { filter: drop-shadow(2px 4px 0 #0008); }
.board .inktxt { font: 400 11px/1 var(--mono2); letter-spacing: 0.04em; }

/* The middle: a white label on the seam, and the end-turn sticker. The label is a pseudo-element, not the band itself:
   a filter or transform on the band would make it a stacking context and bury the other side's ground under it. */
.board .band { position: relative; padding: 8px 10px 8px 14px; min-height: 52px; color: #111; }
.board .band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: 4px; transform: rotate(-0.6deg); box-shadow: 3px 5px 0 #0008;
}
.board .turn { font: 400 20px/1.05 var(--anton); text-transform: uppercase; letter-spacing: 0.01em; }
.board .band .end {
  background: #ffd23f; color: #111; border: 0; border-radius: 999px; font: 400 18px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em;
  min-height: 44px; padding: 10px 20px; box-shadow: 2px 3px 0 #111;
}
.board .band .end:active { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
.board .help-btn { background: #111; color: #fff; border: 0; font: 400 20px/1 var(--anton); }
.board .notes { padding: 0 4px; gap: 4px; text-align: left; }
.board .recent { font: 400 12px/1.35 var(--mono2); color: #fff; background: #111c; padding: 5px 9px; border-radius: 3px; align-self: flex-start; }
.board .coach { font: 700 12px/1.4 var(--mono2); color: #111; background: #fff; padding: 6px 10px; border-radius: 3px; align-self: flex-start; transform: rotate(-0.5deg); filter: var(--die-thin); }

.board .sametag {
  align-self: center; display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; background: #fff; color: #111;
  border-radius: 3px; transform: rotate(-3deg); filter: var(--die-thin); pointer-events: none;
}
.board .sametag svg { display: block; flex: none; }
.board .sametag .eq { font: 400 22px/1 var(--anton); }
.board .sametag .words { white-space: nowrap; font: 700 10px/1.15 var(--mono2); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.stage-host .sametag { width: max-content; position: absolute; right: 8px; top: 8px; z-index: 2; transform: rotate(3deg) scale(0.85); transform-origin: right top; }

/* On a short phone the 3D table needs every pixel: the small print goes (the live region still says it). */
@media (max-height: 700px) {
  .board.b3d .wsub, .board.b3d .notes .recent { display: none; }
  .board.b3d .notes { gap: 0; }
  .board.b3d .banner .tile.avatar { --tw: 40px; width: 40px; }
  .board.b3d .wname { font-size: 22px; }
  .board.b3d .band { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
}

/* Cards: die-cut, with yellow for what's lit. */
.board .tile { border-radius: 10px; box-shadow: 0 0 0 3px #fff, 2px 6px 0 3px #0008; }
.board .tile .brace { background: #111; }
.board .tile .abil { background: #fff; border-top: 0; font: 700 10px/1.2 var(--mono2); }
.board .tile.can { box-shadow: 0 0 0 3px #fff, 0 0 0 7px #ffd23f; }
.board .tile.picked { box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #fff; }
.board .tile.target { box-shadow: 0 0 0 5px #ffd23f, 0 0 0 8px #111; }
.board .tile.target .pic { filter: none; }
.board .tile:focus-visible { outline: 3px solid #111; outline-offset: 6px; box-shadow: 0 0 0 3px #fff, 0 0 0 7px #ffd23f; }
.board .slot { border: 2px dashed #ffffff8c; border-radius: 10px; }
.board .slot.lit { border: 3px solid #ffd23f; background: #ffd23f2e; }
.board .slot.lit::after { color: #ffd23f; }
.board .slot:focus-visible { outline: 3px solid #fff; }
.board .hand .empty { color: var(--on-me); font: 400 12px/1.4 var(--mono2); }
.board .hitchip { background: #fff; color: #111; border: 0; border-radius: 3px; font: 400 22px/1 var(--anton); box-shadow: 2px 3px 0 #111; padding: 4px 8px; text-transform: uppercase; }
.board .hitchip.lethal { background: #111; color: #ffd23f; box-shadow: 0 0 0 2px #ffd23f; }
.board .hitchip.heal { background: #1f7a3a; color: #fff; }
.board .float { font-family: var(--anton); font-weight: 400; }

/* Sheets and dialogs: white die-cut paper on the ink. */
.board .sheet, .board .overlay {
  background: #fff; color: #111; border: 0; border-radius: 3px; filter: var(--die-thin); box-shadow: none;
}
.board .sheet { padding: 12px 52px 12px 14px; gap: 6px; }
.board .sname { font: 400 28px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.01em; }
.board .ssub { font: 400 11px/1 var(--mono2); text-transform: uppercase; color: #333; }
.board .stext { font: 400 12px/1.45 var(--mono2); color: #111; }
.board .shint { font: 700 12px/1.4 var(--mono2); color: #111; }
.board .sbtns .primary { background: #111; color: #fff; border: 0; border-radius: 999px; font: 400 16px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; }
.board .sbtns .secondary { background: #fff; color: #111; border: 2px solid #111; border-radius: 999px; font: 400 16px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; }
.board .sclose { color: #111; }
.stage-host .sheet.inflow { box-shadow: none; }
.board .overlay { border-radius: 3px; }
.board .overlay.over { border-radius: 3px; border-top: 0; box-shadow: none; }
.board .overlay.help { border: 0; }
.board .overlay h2 { font: 400 clamp(34px, 11vw, 52px)/0.95 var(--anton); text-transform: uppercase; letter-spacing: 0.005em; color: #111; }
.board .overlay.over h2 { font-size: clamp(30px, 9vw, 40px); }
.board .overlay.help h2 { font-size: 34px; }
.board .overlay p { color: #333; font: 400 12px/1.5 var(--mono2); }
.board .overlay .obtns .primary { background: #111; color: #fff; border: 0; border-radius: 999px; font: 400 17px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; }
.board .overlay .obtns .secondary { background: #fff; color: #111; border: 2px solid #111; border-radius: 999px; font: 400 17px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; }
.board .overlay .wstamp { background: #fff; }
.board .wkey p, .board .howto { font-family: var(--mono2); }

@media (prefers-reduced-motion: reduce) {
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab { transition: none; }
}

/* Forced colors drop the die-cut outlines and the painted shapes: say it with borders instead. */
@media (forced-colors: active) {
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab { filter: none; border: 3px solid ButtonText; background: ButtonFace; color: ButtonText; border-radius: 12px; }
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab::after { display: none; }
  body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab .label, body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab small, body:is([data-screen="start"], [data-screen="mode"], [data-screen="journey"]) .slab .glyph { color: ButtonText; }
  #start #begin, #start #battle-begin, #mode .slab[data-mode] { aspect-ratio: auto; width: 100%; justify-self: stretch; margin-top: 0; transform: none; }
  body[data-screen="battle"] .board { border: 3px solid CanvasText; }
  .board .tile.can, .board .tile.picked, .board .tile.target { outline: 4px solid Highlight; }
  .board .band, .board .sheet, .board .overlay, .board .sametag, .board .banner .tile.avatar { filter: none; border: 2px solid CanvasText; }
}

/* --- Packs and Your cards: the same dark desk ---------------------------------------------------- */
html:has(body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) { background: var(--desk); }
body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"]) {
  background-color: var(--desk); background-image: radial-gradient(#ffffff0d 1px, transparent 1.4px); background-size: 9px 9px; color: #fff; --focus: #ffd23f;
}
body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"]) :focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"]) .stephead .icon { background: #fff; color: #111; border-radius: 50%; filter: var(--die-thin); }
body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"]) .stephead h2 { font: 400 clamp(40px, 12vw, 64px)/0.95 var(--anton); text-transform: uppercase; color: #fff; text-align: left; padding: 8px 0 0; }
body:is([data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"]) .lede { color: #ffffffcc; font: 400 13px/1.5 var(--mono2); }
.packs, .cardgrid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.pack { position: relative; width: 100%; min-height: 150px; display: grid; place-content: center; gap: 4px; text-align: center; border: 0; padding: 22px 16px; color: #fff; cursor: pointer;
  background: radial-gradient(#00000026 1.4px, transparent 1.8px) 0 0 / 9px 9px, var(--face); filter: var(--die); transform: rotate(-1deg); border-radius: 6px; clip-path: polygon(0 0, 100% 3%, 98% 100%, 2% 97%); }
.pack:nth-child(even) { transform: rotate(1deg); }
.pack.red { --face: var(--ink-red); } .pack.blue { --face: var(--ink-blue); } .pack.yellow { --face: var(--ink-yellow); color: #111; }
.pack::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22%; border-top: 3px dashed currentColor; opacity: 0.55; }
.pack .from { font: 400 12px/1 var(--mono2); text-transform: uppercase; letter-spacing: 0.12em; }
.pack .pname { font: 400 clamp(30px, 9vw, 44px)/1 var(--anton); text-transform: none; overflow-wrap: anywhere; }
.pack .tearcue { font: 700 12px/1 var(--mono2); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
@media (hover: hover) { .pack:hover { transform: translateY(-3px) rotate(-1.5deg) scale(1.02); } }
.cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
@media (min-width: 600px) { .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kept { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.kept canvas { width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px #fff, 3px 8px 0 #0008; }
.kept .kname { font: 400 20px/1 var(--anton); text-transform: none; overflow-wrap: anywhere; }
.kept .ksub { font: 400 12px/1.2 var(--mono2); color: #ffffffb3; overflow-wrap: anywhere; }
/* The dot on Packs: something is waiting. */
.top .hud .dot { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #ffd23f; border: 3px solid var(--desk); }
.top .hud .dot[hidden] { display: none; }
@keyframes dot-pulse { 50% { transform: scale(1.25); } }
.top .hud .dot { animation: dot-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .top .hud .dot { animation: none; } }
@media (forced-colors: active) { .top .hud .dot { background: Highlight; border-color: Canvas; } .pack, .kept { forced-color-adjust: auto; } }

/* --- Open a pack, Look closer: the same ink ground, the card or pack lit from behind ------------------- */
body:is([data-screen="open"], [data-screen="look"]) { color: #fff; --focus: #ffd23f; }
body:is([data-screen="open"], [data-screen="look"])::before { background: repeating-radial-gradient(circle at 50% 40%, transparent 0 58px, #ffffff14 58px 60px); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 40%, #000 0, transparent 62%); }
body:is([data-screen="open"], [data-screen="look"]):not([data-ground="new"]) { background-image: radial-gradient(#ffffff10 1px, transparent 1.4px), radial-gradient(70% 45% at 50% 40%, color-mix(in srgb, var(--gi) 38%, transparent), transparent 72%); }
body:is([data-screen="open"], [data-screen="look"]) :focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
body:is([data-screen="open"], [data-screen="look"]) .stephead .icon { background: #fff; color: #111; border-radius: 50%; filter: var(--die-thin); }
body:is([data-screen="open"], [data-screen="look"]) .stephead h2 { font: 400 clamp(20px, 6vw, 28px)/1.05 var(--anton); text-transform: none; color: #fff; overflow-wrap: break-word; text-wrap: balance; }
body:is([data-screen="open"], [data-screen="look"]) .viewer-controls .hint, body:is([data-screen="open"], [data-screen="look"]) .open-say, body:is([data-screen="open"], [data-screen="look"]) .done-say { color: #ffffffcc; font: 400 13px/1.5 var(--mono2); }
body:is([data-screen="open"], [data-screen="look"]) .drew { color: #fff; font: 400 24px/1.1 var(--anton); }
body:is([data-screen="open"], [data-screen="look"]) .primary { background: #fff; color: #111; border: 0; border-radius: 12px; font: 400 20px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.02em; filter: var(--die-thin); box-shadow: none; }
body:is([data-screen="open"], [data-screen="look"]) .secondary { background: transparent; color: #fff; border: 3px solid #fff; border-radius: 12px; font: 400 18px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.02em; box-shadow: none; }
body:is([data-screen="open"], [data-screen="look"]) .open-actions .battle-card { background: #ffd23f; color: #111; flex-basis: 100%; min-height: 56px; font-size: 24px; }
body:is([data-screen="open"], [data-screen="look"]) .open-actions .make-own { flex-basis: 100%; }
body:is([data-screen="open"], [data-screen="look"]) .open-actions .quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; font-size: 15px; padding: 6px 10px; min-height: 44px; }
body:is([data-screen="open"], [data-screen="look"]) .card-link a { color: #fff; }

.open-trust { margin: 6px 0 0; text-align: center; font: 400 11px/1.4 var(--mono2); color: #ffffff99; }
/* The moment the pack tears: a flash from behind the card. */
.reveal-flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 38%, #fff 0, color-mix(in srgb, var(--gi, #fff) 55%, #fff0) 24%, #fff0 56%); }
.reveal-flash[data-kind="daily"] { background: radial-gradient(circle at 50% 38%, #fff 0, #ffd23f99 18%, #ff5f6d66 32%, #5ec8ff44 46%, #0000 62%); }
.reveal-flash.go { animation: reveal-flash 800ms ease-out; }
@keyframes reveal-flash { 0% { opacity: 0; transform: scale(.4); } 16% { opacity: .95; } 100% { opacity: 0; transform: scale(1.7); } }
.reveal-flash.rare::after { content: ""; position: absolute; left: 50%; top: 38%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%; border: 6px solid #ffd23f; box-shadow: 0 0 40px #ffd23f, inset 0 0 40px #ffd23f88; animation: reveal-ring 1000ms ease-out; }
@keyframes reveal-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal-flash.go, .reveal-flash.rare::after { animation: none; } }
.top .hud .dot:not(:empty) { width: 20px; height: 20px; top: -6px; right: -6px; font: 700 11px/14px var(--mono2); color: #111; text-align: center; }
@media (max-height: 640px) { #open .done-card { height: max(230px, calc(100dvh - 330px - var(--sab, 0px))); } }
.kept-remove, .pack-decline { display: block; margin: 6px auto 0; padding: 8px 10px; min-height: 44px; border: 0; background: none; color: #ffffffb3; font: 400 12px/1.2 var(--mono2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kept { align-content: start; }
.cardgrid li, .packs li { display: grid; align-content: start; }

/* --- Paper screens wear the same type and chrome ---------------------------------------
   The drawing canvas, swatches and card faces stay on neutral paper; the headings and the
   buttons speak the dark screens' language: Anton for titles, Space Mono only for tiny
   labels, a die-cut slab for the one thing to press. No DOM or selector changes. */
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) {
  --slab: var(--ink-blue);
}
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) .stephead h2,
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) h1 {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em;
}
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) .stephead h2 { font-size: clamp(22px, 6.4vw, 28px); line-height: 1; }
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) h1 { font-size: clamp(38px, 11vw, 52px); line-height: 0.95; }
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) .cue { font-family: var(--mono2); font-weight: 400; }
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) :is(.primary, .next) {
  background: var(--slab); color: #fff; border: 3px solid #fff; border-radius: 6px;
  outline: 2px solid var(--ink); outline-offset: 0;
  font: 400 20px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: 3px 5px 0 #000a; clip-path: none;
}
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) .next { font-size: 17px; }
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) :is(.primary, .next):focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
body:not(:is([data-screen="start"], [data-screen="mode"], [data-screen="battle"], [data-screen="open"], [data-screen="look"], [data-screen="packs"], [data-screen="cards"], [data-screen="pick"], [data-screen="deck"])) .secondary {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: screenin 160ms ease-out; }
  @keyframes screenin { from { opacity: 0.001; } to { opacity: 1; } }
}
@media (forced-colors: active) {
  :is(.primary, .next) { forced-color-adjust: auto; border: 2px solid ButtonText !important; box-shadow: none !important; outline: 0 !important; }
}

/* --- Pick one (the daily pack's four) ------------------------------------------------ */
#pick .kept[aria-pressed="true"] canvas { box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #fff, 3px 10px 0 #0008; transform: translateY(-3px); }
#pick .kept[aria-pressed="true"] .kname { color: #ffd23f; }
#pick .pick-keep { align-self: stretch; background: #ffd23f; color: #111; border: 3px solid #fff; border-radius: 6px; font: 400 22px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 3px 5px 0 #000a; min-height: 52px; }
#pick .pick-keep:disabled { background: #ffffff22; color: #ffffff88; box-shadow: none; opacity: 1; cursor: default; }
@media (prefers-reduced-motion: reduce) { #pick .kept[aria-pressed="true"] canvas { transform: none; } }

/* A card viewer that didn't load (offline, a dropped connection): a plain message and a way to try again. */
.viewer-offline { display: grid; gap: 14px; justify-items: start; padding: 18px; border: 3px solid currentColor; border-radius: 12px; }
body:is([data-screen="open"], [data-screen="look"]) .viewer-offline { color: #fff; }
.viewer-offline p { font: 400 14px/1.5 var(--mono2); }
#deck .kept[aria-pressed="true"] canvas { box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #fff, 3px 10px 0 #0008; transform: translateY(-3px); }
#deck .kept[aria-pressed="true"] .kname { color: #ffd23f; }
#deck .deck-go { align-self: stretch; background: #ffd23f; color: #111; border: 3px solid #fff; border-radius: 6px; font: 400 22px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 3px 5px 0 #000a; min-height: 52px; }
#deck .deck-say { color: #ffd23f; font: 400 13px/1.4 var(--mono2); min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { #deck .kept[aria-pressed="true"] canvas { transform: none; } }
/* The button to go on stays in reach, however many cards there are. */
#deck .deck-go, #pick .pick-keep { position: sticky; bottom: calc(var(--sab, 0px) + 8px); z-index: 2; }

/* --- A win ----------------------------------------------------------------------------- */
.board .overlay.over.win { background: #111; border-top: 4px solid #ffd23f; overflow: hidden; isolation: isolate; padding-top: 22px; }
.board .overlay.win::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 40%; width: 180%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, #ffd23f33 0 9deg, transparent 9deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%); mask-image: radial-gradient(circle, #000 10%, transparent 62%); animation: rays 24s linear infinite; }
.board .overlay.win h2 { font-size: clamp(54px, 18vw, 78px); line-height: 0.9; color: #ffd23f; -webkit-text-stroke: 2px #111; paint-order: stroke fill; text-shadow: 3px 3px 0 #fff, 6px 6px 0 #D7263D; transform: rotate(-3deg); animation: winpop 520ms cubic-bezier(.2, 1.7, .4, 1) both; }
.board .overlay.win p { color: #ffffffcc; }
.board .overlay.win .tile.winner { --tw: 84px; width: 84px; transform: rotate(-5deg); box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #fff, 0 0 28px 8px #ffd23f88; animation: winpop 600ms 120ms cubic-bezier(.2, 1.7, .4, 1) both; }
.board .overlay.win .obtns .primary { background: #fff; color: #111; }
.board .overlay.win .obtns .primary.prize { background: #ffd23f; color: #111; box-shadow: 0 0 0 3px #fff, 3px 6px 0 #D7263D; animation: prizebeat 1.4s ease-in-out 700ms infinite; }
.board .overlay.win .obtns .secondary { background: transparent; color: #fff; border-color: #fff; }
.confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -24px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.7); background: var(--ink-red); border-radius: 1px; rotate: var(--r); animation: confall 2.6s var(--d) cubic-bezier(.3, .1, .6, 1) both; }
.confetti i:nth-child(3n+1) { background: var(--ink-yellow); }
.confetti i:nth-child(3n+2) { background: var(--ink-blue); }
.confetti i:nth-child(5n) { background: #fff; border-radius: 50%; height: var(--w); }
@keyframes confall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(calc((var(--k) - 1) * 40px), 110vh) rotate(540deg); opacity: 0; } }
@keyframes winpop { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 100% { opacity: 1; } }
@keyframes rays { to { rotate: 360deg; } }
@keyframes prizebeat { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .board .overlay.win::before, .board .overlay.win h2, .board .overlay.win .tile.winner, .board .overlay.win .prize { animation: none; } .confetti { display: none; } }
@media (forced-colors: active) { .confetti, .board .overlay.win::before { display: none; } }

/* --- A loss against the computer: quiet, cool, and kind ---------------------------------- */
.board .overlay.over.lose { background: #0d1626; border-top: 4px solid #5b7fb8; overflow: hidden; isolation: isolate; padding-top: 22px; }
.board .overlay.lose::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, #1e5aa84d, transparent 70%),
    radial-gradient(5px 12px at 12% -8%, #5b7fb8, transparent 70%), radial-gradient(4px 10px at 31% -8%, #5b7fb8, transparent 70%), radial-gradient(5px 13px at 58% -8%, #5b7fb8, transparent 70%), radial-gradient(4px 10px at 77% -8%, #5b7fb8, transparent 70%), radial-gradient(5px 12px at 92% -8%, #5b7fb8, transparent 70%);
  background-repeat: no-repeat; animation: sink 7s ease-in infinite; }
.board .overlay.lose h2 { color: #cfe0ff; font-size: clamp(44px, 14vw, 64px); line-height: 0.92; text-shadow: 3px 3px 0 #1e5aa8; transform: rotate(2deg); animation: droop 700ms cubic-bezier(.2, .8, .3, 1) both; }
.board .overlay.lose p { color: #ffffffb3; }
.board .overlay.lose .tip { color: #ffd23f; font: 400 12px/1.5 var(--mono2); max-width: 28rem; }
.board .overlay.lose .tile.fallen { --tw: 72px; width: 72px; transform: rotate(9deg); filter: grayscale(0.7) brightness(0.85); box-shadow: 0 0 0 3px #5b7fb8, 0 6px 0 #0008; animation: fall 800ms cubic-bezier(.3, 1.2, .5, 1) both; }
.board .overlay.lose .obtns .primary { background: #cfe0ff; color: #0d1626; }
.board .overlay.lose .obtns .secondary { background: transparent; color: #fff; border-color: #ffffff88; }
@keyframes droop { 0% { transform: translateY(-26px) rotate(-4deg); opacity: 0; } 100% { opacity: 1; } }
@keyframes fall { 0% { transform: translateY(-30px) rotate(-12deg); opacity: 0; } 100% { opacity: 1; } }
@keyframes sink { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0.9; } 100% { background-position: 0 0, 0 420px, 0 380px, 0 450px, 0 400px, 0 430px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .board .overlay.lose::before, .board .overlay.lose h2, .board .overlay.lose .tile.fallen { animation: none; } }
.board .overlay.lose .obtns .primary.prize { background: #ffd23f; color: #111; box-shadow: 0 0 0 3px #fff, 3px 6px 0 #5b7fb8; }

/* --- the Journey: a full-bleed pixel canvas on the dark desk --------------------------------------- */
body[data-screen="journey"] { overflow: hidden; overscroll-behavior: none; }
body[data-screen="journey"] .top { display: none; }
#journey { padding: 0; margin: 0; max-width: none; width: 100%; }
#journey .journey-host { position: fixed; inset: 0 0 var(--random-nav-h, env(safe-area-inset-bottom, 0px)) 0; background: var(--desk); }
.journey-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.journey-canvas:focus-visible { outline: 3px solid var(--focus, #ffd23f); outline-offset: -3px; }
.journey-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- the Journey's interface: the same stickers, laid over the pixel world -------- */
.jr-ui { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono2); color: #fff; }
.jr-ui > *, .jr-layer > * { pointer-events: auto; }
.jr-hud { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.jr-hud[hidden], .jr-banner[hidden] { display: none; }
.jr-goal { pointer-events: none; max-width: 70%; padding: 6px 10px; --bg: var(--ink-blue); color: #fff; font: 700 11px/1.35 var(--mono2); text-transform: uppercase; letter-spacing: 0.04em; }
body[data-screen="journey"] .jr-ui .slab { min-height: 0; padding: 8px 14px; }
body[data-screen="journey"] .jr-ui .slab .label { font-size: 20px; }
body[data-screen="journey"] .jr-menubtn { margin: 0; --face: var(--ink-red); transform: rotate(2deg); }
.jr-banner { position: absolute; top: 56px; left: 50%; translate: -50% 0; pointer-events: none; padding: 6px 16px; --bg: #ffd23f; color: #111; font: 400 22px/1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; transform: rotate(-1.5deg); white-space: nowrap; }
.jr-layer { position: absolute; inset: 0; pointer-events: none; }
.jr-layer.is-menu { pointer-events: auto; background: #0a0a0cb8; display: grid; place-items: center; padding: 16px; overflow: auto; }
.jr-dialog { min-height: 76px; margin-top: 8px; padding: 30px 18px 22px; --bg: var(--ink-blue); color: #fff; cursor: pointer; font: 400 15px/1.5 var(--mono2); }
.jr-say { margin: 0; min-height: 4.5em; }
.jr-name { position: absolute; top: -2px; left: 14px; padding: 3px 10px; background: #ffd23f; color: #111; font: 400 17px/1.1 var(--anton); text-transform: uppercase; letter-spacing: 0.03em; transform: rotate(-1.5deg); }
.jr-more { position: absolute; right: 16px; bottom: 10px; width: 0; height: 0; border: 7px solid transparent; border-top: 10px solid #ffd23f; border-bottom: 0; animation: jr-blink 700ms steps(2) infinite; }
.jr-dialog:not([data-done="1"]) .jr-more { visibility: hidden; }
@keyframes jr-blink { 50% { opacity: 0; } }
.jr-stack { position: absolute; left: 10px; right: 10px; bottom: 12px; display: grid; gap: 16px; }
.jr-choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; padding-right: 4px; }
body[data-screen="journey"] .jr-ui .slab[data-sel] { outline: 0; transform: scale(1.06) rotate(-1deg); }
body[data-screen="journey"] .jr-ui .slab[data-sel]::after { outline: 4px solid #ffd23f; outline-offset: -7px; }
body[data-screen="journey"] .jr-ui .slab:focus-visible { outline: 0; }
.jr-panel { width: min(100%, 340px); display: grid; gap: 14px; justify-items: center; }
.jr-panel > .slab { width: 100%; }
.jr-title { margin: 0 0 4px; font: 400 clamp(40px, 12vw, 56px)/0.9 var(--anton); text-transform: uppercase; color: #fff; }
.jr-note { margin: 0; font: 700 12px/1.4 var(--mono2); color: #ffd23f; }
.jr-goalline { margin: 4px 0 0; font: 400 11px/1.5 var(--mono2); color: #ffffffcc; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.jr-ledger { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.jr-ledger li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 0 8px; align-items: baseline; padding: 6px 10px; --bg: var(--ink-blue); color: #fff; }
.jr-ledger li.got { --bg: #ffd23f; color: #111; }
.jr-ledger li b { font: 400 16px/1 var(--anton); }
.jr-ledger li .who { font: 700 13px/1.2 var(--mono2); }
.jr-ledger li em { font: 700 10px/1 var(--mono2); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; }
.jr-ledger li small { grid-column: 2 / 4; font: 400 11px/1.3 var(--mono2); opacity: 0.9; }
.jr-ledger li:not(.got):not(.met) { --bg: #1c1c20; color: #ffffffb3; }
.jr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font: 700 13px/1 var(--mono2); }
.jr-nav .slab { width: auto; }
.jr-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; justify-items: center; width: 100%; }
.jr-places li { position: relative; min-width: 60%; padding: 12px 18px; text-align: center; --bg: #1c1c20; color: #ffffffb3; font: 400 22px/1 var(--anton); text-transform: uppercase; }
.jr-places li.seen { --bg: var(--ink-blue); color: #fff; }
.jr-places li.here { --bg: #ffd23f; color: #111; }
.jr-places li small { display: block; margin-top: 4px; font: 700 10px/1 var(--mono2); letter-spacing: 0.08em; }
@media (prefers-reduced-motion: reduce) { .jr-more { animation: none; } }

.jr-goal, .jr-banner, .jr-dialog, .jr-ledger li, .jr-places li { position: relative; isolation: isolate; filter: var(--die-thin); }
.jr-goal, .jr-banner { position: relative; }
.jr-banner { position: absolute; }
.jr-goal::before, .jr-banner::before, .jr-dialog::before, .jr-ledger li::before, .jr-places li::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--tick); background: radial-gradient(#00000026 1.2px, transparent 1.6px) 0 0 / 7px 7px, var(--bg); }
.jr-hud .slab { pointer-events: auto; }
body[data-screen="journey"] .jr-ui .slab.red { --face: var(--ink-red); --txt: #fff; }
body[data-screen="journey"] .jr-ui .slab.blue { --face: var(--ink-blue); --txt: #fff; }
body[data-screen="journey"] .jr-ui .slab.yellow { --face: var(--ink-yellow); --txt: #111; }
body[data-screen="journey"] .jr-ui .slab { animation: none; grid-auto-flow: row; align-content: center; }
body[data-screen="journey"] .jr-ui .slab .label { line-height: 1; padding: 0; margin: 0; font-size: 22px; }

/* Wide screens: the dialogue keeps a readable measure; a short window (landscape) packs the menu in two columns. */
.jr-stack { left: max(10px, calc(50% - 300px)); right: max(10px, calc(50% - 300px)); }
@media (max-height: 520px) {
  .jr-dialog { min-height: 52px; padding: 24px 16px 14px; font-size: 13px; }
  .jr-say { min-height: 2.6em; }
  .jr-stack { gap: 10px; }
  .jr-choices { gap: 10px; }
  .jr-layer.is-menu { place-items: start center; }
  .jr-panel { width: min(100%, 560px); grid-template-columns: 1fr 1fr; gap: 10px; }
  .jr-panel > .jr-title, .jr-panel > .jr-note, .jr-panel > .jr-goalline, .jr-panel > .jr-ledger, .jr-panel > .jr-nav, .jr-panel > .jr-places { grid-column: 1 / -1; }
  .jr-title { font-size: 34px; margin: 0; }
  .jr-ledger { grid-template-columns: 1fr 1fr; }
  body[data-screen="journey"] .jr-ui .slab { padding: 6px 12px; }
  .jr-banner { top: 8px; left: 50%; }
}

/* The Book: tabs, stamps, satchel, errands */
.jr-tabs { display: flex; gap: 8px; width: 100%; justify-content: center; flex-wrap: wrap; }
body[data-screen="journey"] .jr-tabs .slab { width: auto; padding: 4px 10px; }
body[data-screen="journey"] .jr-tabs .slab .label { font-size: 16px; }
.jr-stamps, .jr-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.jr-stamps { grid-template-columns: 1fr 1fr; }
.jr-stamps li, .jr-list li { position: relative; isolation: isolate; filter: var(--die-thin); --bg: #1c1c20; color: #ffffffb3; padding: 10px 12px; display: grid; gap: 2px; }
.jr-stamps li.got, .jr-list li.got { --bg: var(--ink-blue); color: #fff; }
.jr-stamps li.got:nth-child(3n) { --bg: var(--ink-red); }
.jr-stamps li.got:nth-child(3n+1) { --bg: #ffd23f; color: #111; }
.jr-list li.done { --bg: #1c1c20; color: #ffffff99; text-decoration: line-through; }
.jr-list li.empty { text-decoration: none; font: 400 12px/1.5 var(--mono2); text-align: center; }
.jr-stamps li::before, .jr-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--tick); background: radial-gradient(#00000026 1.2px, transparent 1.6px) 0 0 / 7px 7px, var(--bg); }
.jr-stamps b, .jr-list b { font: 400 18px/1.1 var(--anton); text-transform: uppercase; letter-spacing: 0.02em; }
.jr-stamps small, .jr-list small { font: 400 11px/1.35 var(--mono2); }

/* The Journey leads the start screen: the biggest sticker, above whatever card action is next. */
#start .slab.flagship { grid-column: 1 / -1; order: -2; min-height: 104px; padding: 16px 20px; transform: rotate(1deg); display: grid; justify-items: center; grid-auto-flow: row; gap: 4px; }
#start .slab.flagship .glyph { display: block; width: 40px; height: 40px; order: -1; }
#start .slab.flagship .label { font-size: clamp(34px, 11vw, 46px); }
#start .slab.flagship small { color: #111; font: 700 12px/1.3 var(--mono2); text-transform: none; max-width: none; }
#start #journey-begin { --face: var(--ink-yellow); --txt: #111; }

/* Journey, in forced colors: the sticker panels get borders, and the selected button is Highlight. */
@media (forced-colors: active) {
  .jr-goal, .jr-banner, .jr-dialog, .jr-ledger li, .jr-places li, .jr-stamps li, .jr-list li { filter: none; border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .jr-goal::before, .jr-banner::before, .jr-dialog::before, .jr-ledger li::before, .jr-places li::before, .jr-stamps li::before, .jr-list li::before { display: none; }
  body[data-screen="journey"] .jr-ui .slab[data-sel], body[data-screen="journey"] .jr-ui .slab:focus-visible { outline: 4px solid Highlight; outline-offset: 2px; border-color: Highlight; }
}
/* Landscape phones: the HUD and the dialogue stay clear of a notch. */
.jr-hud { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
.jr-stack { left: max(10px, env(safe-area-inset-left), calc(50% - 300px)); right: max(10px, env(safe-area-inset-right), calc(50% - 300px)); }
body[data-screen="journey"] .jr-tabs .slab { min-height: 40px; }