/* ════════════════════════════════════════════════════════════════════
   FOLDFALL — UI stylesheet
   Hand-drawn notebook aesthetic: paper cards, washi tape, sticky notes,
   wobbly pencil borders (SVG filters in index.html), marker headings.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #fbf6e6;
  --paper-2: #f2e9cf;
  --paper-edge: #d9ceb0;
  --rule: rgba(84, 132, 214, .28);
  --margin: rgba(222, 76, 76, .45);
  --graphite: #34333b;
  --graphite-2: #5b5a63;
  --muted: #7c7a82;
  --blue: #2546b8;
  --blue-soft: #8fb0ff;
  --red: #d2332f;
  --red-soft: #ff9d93;
  --gold: #e7a52a;
  --green: #2f9b57;
  --sticky: #ffe77a;
  --sticky-2: #ffd84d;
  --pink: #ffb5c8;
  --mint: #bff0b0;
  --sky: #a9d6ff;
  --desk: #2d2a33;
  --desk-2: #3a3542;
  --shadow: 0 .15rem .3rem rgba(0, 0, 0, .18), 0 .6rem 1.4rem rgba(0, 0, 0, .22);
  --shadow-sm: 0 .1rem .2rem rgba(0, 0, 0, .2), 0 .3rem .7rem rgba(0, 0, 0, .15);
  --font-hand: "Patrick Hand", "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Neue", "Comic Sans MS", cursive;
  --font-marker: "Permanent Marker", "Marker Felt", "Chalkboard SE", "Segoe Print", "Comic Sans MS", cursive;
  --anim-speed: 1;
  --side: clamp(15rem, 23vw, 24rem);
  --ease-out: cubic-bezier(.2, .9, .25, 1.15);
  --ease-squish: cubic-bezier(.3, 1.6, .5, 1);
  color-scheme: light;
  font-size: clamp(13px, calc(.95vmin + 6px), 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(120% 90% at 50% 40%, var(--desk-2) 0%, var(--desk) 70%, #1f1d24 100%);
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 1.15rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
kbd {
  font-family: var(--font-hand);
  font-size: .8em;
  padding: 0 .35em;
  border: 1.5px solid currentColor;
  border-radius: .3em;
  border-bottom-width: 3px;
  opacity: .7;
}
.hidden { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.blue-ink { color: var(--blue); }
.red-ink { color: var(--red); }

/* ───────────────────────── stage / board ───────────────────────── */
#stage { position: fixed; inset: 0; }
#board-wrap {
  position: absolute; inset: 0;
  transition: filter .5s ease;
}
#board { display: block; width: 100%; height: 100%; touch-action: none; }
body.in-menu #board-wrap { filter: saturate(.75) brightness(.72) blur(1.2px); }
body.in-menu #board { pointer-events: none; }

/* ───────────────────────── boot splash / fatal ───────────────────────── */
#boot-splash {
  position: fixed; inset: 0; display: grid; place-content: center; text-align: center;
  background: var(--desk); z-index: 100; transition: opacity .6s ease;
}
#boot-splash.gone { opacity: 0; pointer-events: none; }
.boot-logo { font-family: var(--font-marker); font-size: 4rem; color: var(--paper); letter-spacing: .05em; transform: rotate(-3deg); }
.boot-sub { color: var(--paper-edge); margin-top: .5rem; animation: blink 1.2s infinite; }
#fatal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(20, 18, 24, .85); padding: 1rem; }
.fatal-card { background: var(--paper); max-width: 44rem; width: 100%; padding: 1.5rem 2rem; border-radius: .4rem; box-shadow: var(--shadow); transform: rotate(-.6deg); }
.fatal-card h2 { font-family: var(--font-marker); color: var(--red); margin: 0 0 .5rem; }
.fatal-detail { white-space: pre-wrap; font-size: .8rem; max-height: 14rem; overflow: auto; background: rgba(0, 0, 0, .05); padding: .6rem; border-radius: .3rem; user-select: text; }
.fatal-card button { font-family: var(--font-marker); font-size: 1.1rem; padding: .4rem 1.2rem; cursor: pointer; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--paper); font-size: 2rem; }

/* ───────────────────────── paper primitives ───────────────────────── */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, transparent 2.2rem, var(--margin) 2.2rem, var(--margin) calc(2.2rem + 2px), transparent calc(2.2rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 1.55rem, var(--rule) 1.55rem calc(1.55rem + 1px)),
    linear-gradient(170deg, #fffdf3, var(--paper) 40%, var(--paper-2));
  border: 2px solid rgba(52, 51, 59, .75);
  border-radius: .35rem .6rem .45rem .3rem;
  box-shadow: var(--shadow);
  filter: url(#wobble);
}

/* Washi tape labels */
.tape {
  --tape: var(--sticky);
  display: inline-block;
  position: relative;
  margin: 0 0 .6rem -.4rem;
  padding: .1rem .9rem .15rem;
  font-family: var(--font-marker);
  font-weight: normal;
  font-size: .95rem;
  letter-spacing: .03em;
  color: rgba(40, 36, 48, .9);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 .3rem, transparent .3rem .6rem),
    var(--tape);
  opacity: .95;
  transform: rotate(-2deg);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 20% 8%, 100% 0, 97% 25%, 100% 50%, 96% 75%, 100% 100%, 90% 92%, 85% 100%, 0 100%, 3% 70%, 0 45%, 4% 25%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.tape-yellow { --tape: #ffe27a; }
.tape-blue { --tape: var(--sky); }
.tape-red { --tape: #ffaaa0; }
.tape-green { --tape: var(--mint); }
.tape-pink { --tape: var(--pink); }

/* Sticky notes */
.sticky {
  position: relative;
  background: linear-gradient(175deg, #fff2a8, var(--sticky) 30%, var(--sticky-2));
  box-shadow: 0 .5rem .9rem -.3rem rgba(0, 0, 0, .35), inset 0 -1.2rem 1.5rem -1.2rem rgba(150, 110, 0, .25);
  border-radius: .1rem .1rem .2rem 1.6rem / .1rem .1rem .2rem .8rem;
}

/* ───────────────────────── buttons ───────────────────────── */
.btn {
  --btn-bg: #fffdf5;
  --btn-ink: var(--graphite);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.6rem;
  padding: .35rem 1.2rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-marker);
  font-size: 1.05rem;
  color: var(--btn-ink);
  transition: transform .18s var(--ease-squish), opacity .2s;
  outline: none;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  border: 2.5px solid var(--btn-ink);
  border-radius: .9rem .4rem .8rem .5rem / .5rem .9rem .45rem .8rem;
  box-shadow: .18rem .22rem 0 rgba(30, 28, 36, .55);
  filter: url(#wobble);
  transition: box-shadow .15s, background .15s, transform .15s;
}
.btn:hover:not(:disabled):not(.disabled) { animation: wiggle .45s ease-in-out; }
.btn:hover:not(:disabled):not(.disabled)::before { background: #fff; box-shadow: .26rem .3rem 0 rgba(30, 28, 36, .55); }
.btn:active:not(:disabled):not(.disabled) { transform: scale(.94, .88) translateY(.12rem); animation: none; }
.btn:active:not(:disabled):not(.disabled)::before { box-shadow: .05rem .06rem 0 rgba(30, 28, 36, .55); }
.btn:focus-visible::after { content: ""; position: absolute; inset: -.35rem; border: 2px dashed var(--blue); border-radius: 1rem; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { --btn-bg: #ffe27a; }
.btn-primary:hover:not(:disabled)::before { background: #ffeb99 !important; }
.btn-danger { --btn-bg: #ffb3a8; --btn-ink: #6d1410; }
.btn-ghost { --btn-bg: transparent; }
.btn-ghost::before { box-shadow: none; border-style: dashed; }
.btn-small { min-height: 2.1rem; font-size: .92rem; padding: .2rem .9rem; }
.btn-big { min-height: 3.4rem; font-size: 1.4rem; padding: .5rem 2rem; }
.btn-icon {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: 0; background: none; cursor: pointer; padding: 0; color: var(--graphite);
  transition: transform .18s var(--ease-squish);
}
.btn-icon:hover { animation: wiggle .45s; }
.btn-icon:active { transform: scale(.88); }
.btn-icon svg { width: 75%; height: 75%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; filter: url(#wobble); }
.btn-close { font-family: var(--font-marker); font-size: 1.4rem; }

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-2.2deg) scale(1.03); }
  45% { transform: rotate(1.8deg) scale(1.03); }
  70% { transform: rotate(-1deg) scale(1.02); }
}
@keyframes blink { 50% { opacity: .35; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-.35rem) rotate(var(--rot, 0deg)); } }

/* ───────────────────────── screens ───────────────────────── */
#screens { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.screen {
  position: absolute; inset: 0;
  /* safe: content taller than the window starts at the top and scrolls,
     instead of overflowing past the top edge where it can't be reached. */
  display: grid; place-items: safe center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  pointer-events: auto;
  overflow: auto;
  opacity: 0;
  transition: opacity .32s ease;
}
.screen > * { transform: translateY(1.2rem) rotate(-1.5deg) scale(.97); transition: transform .45s var(--ease-out); }
.screen.in { opacity: 1; }
.screen.in > * { transform: none; }
.screen.out { opacity: 0; pointer-events: none; }
.screen.out > * { transform: translateY(-1rem) rotate(1.5deg) scale(.97); }
.screen.overlay { background: rgba(24, 21, 30, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

.menu-card {
  width: min(46rem, 100%);
  padding: 1.6rem 1.8rem 1.4rem 3rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.screen-title {
  font-family: var(--font-marker); font-weight: normal;
  font-size: 2.2rem; margin: 0 0 .8rem; color: var(--graphite);
  transform: rotate(-1.5deg); transform-origin: left;
}
.section-sub { margin: .1rem 0 .8rem; color: var(--graphite-2); }
.muted { color: var(--muted); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* Title */
.title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; width: min(52rem, 100%); }
.tagline {
  font-family: var(--font-hand); font-size: 1.6rem; color: var(--paper);
  margin: .2rem 0 1.2rem; opacity: 0; animation: fadeUp .8s 1.3s forwards;
  padding: .15rem 1.4rem; border-radius: 2rem;
  background: radial-gradient(closest-side, rgba(30, 27, 36, .75), rgba(30, 27, 36, .45) 70%, transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.screen-title-wrap, .screen-title { position: relative; }
.title-wrap::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(24, 21, 30, .45), transparent 75%);
}
.title-wrap { position: relative; z-index: 0; }
.title-menu { display: flex; flex-direction: column; gap: .75rem; width: min(20rem, 86vw); }
.title-menu .btn { width: 100%; }
.btn-menu { flex-direction: column; gap: 0; min-height: 3rem; font-size: 1.25rem; }
.btn-sub { font-family: var(--font-hand); font-size: .85rem; opacity: .75; }
.btn-continue { --btn-bg: var(--mint); }
.title-foot { margin-top: 1rem; color: var(--paper); opacity: .8; font-size: .95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.title-foot .sep { margin: 0 .5em; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-1.4rem) rotate(-4deg); } to { opacity: 1; transform: none; } }

/* Logo */
.logo { position: relative; display: inline-block; padding: 0 2rem; margin-top: clamp(.5rem, 3vh, 2rem); }
.logo-word { position: relative; display: flex; gap: .05em; font-family: var(--font-marker); font-size: clamp(3.6rem, 13vw, 8.5rem); line-height: 1; perspective: 30rem; }
.logo-letter {
  position: relative; display: inline-block;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  opacity: 0;
  animation: letterFold .7s var(--ease-out) forwards, letterBob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .09s + .2s), calc(var(--i) * .15s + 1.4s);
}
.logo-face {
  display: inline-block;
  color: var(--paper);
  -webkit-text-stroke: .045em var(--graphite);
  paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--blue), .1em .12em 0 rgba(0, 0, 0, .25);
  backface-visibility: hidden;
}
.logo-letter:nth-child(n+5) .logo-face { text-shadow: .06em .07em 0 var(--red), .1em .12em 0 rgba(0, 0, 0, .25); }
.logo-back { position: absolute; inset: 0; color: var(--paper-2); transform: rotateX(180deg); backface-visibility: hidden; }
.logo-crease {
  position: absolute; left: -2%; right: -2%; top: 52%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, .5) 90%, transparent);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
  transform: scaleX(0); transform-origin: left; animation: crease .6s 1.1s ease-out forwards;
}
@keyframes letterFold {
  0% { opacity: 0; transform: rotateX(-110deg) translateY(-.2em) rotate(var(--rot)); }
  60% { opacity: 1; transform: rotateX(18deg) translateY(var(--lift)) rotate(var(--rot)); }
  100% { opacity: 1; transform: rotateX(0) translateY(var(--lift)) rotate(var(--rot)); }
}
@keyframes letterBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.04em; } }
@keyframes crease { to { transform: scaleX(1); } }
.logo-underline { display: block; width: 100%; height: clamp(1.2rem, 3vw, 2.4rem); margin-top: -.3rem; overflow: visible; }
.logo-underline path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 0.9s 1s ease-out forwards; filter: url(#wobble); }
.logo-underline path.u2 { stroke: var(--blue); stroke-width: 4; animation-delay: 1.25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.logo-plane { position: absolute; right: -3.5rem; top: -1.8rem; width: clamp(4rem, 9vw, 7rem); overflow: visible; animation: planeFloat 4s ease-in-out infinite; opacity: 0; animation-delay: 1.6s; animation-fill-mode: both; }
.logo-plane path { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo-plane .body path:first-child { fill: rgba(251, 246, 230, .9); stroke: var(--graphite); }
.logo-plane .trail { stroke-dasharray: 5 6; opacity: .7; }
@keyframes planeFloat { 0% { opacity: 0; transform: translate(-2rem, 1rem) rotate(-8deg); } 15% { opacity: 1; } 50% { opacity: 1; transform: translate(0, -.5rem) rotate(4deg); } 100% { opacity: 1; transform: translate(-2rem, 1rem) rotate(-8deg); } }
.logo-small .logo-word { font-size: 3rem; }
.logo-small .logo-plane { display: none; }

/* Title floating doodles */
.title-doodles .td { position: fixed; width: 5rem; height: 5rem; opacity: .2; pointer-events: none; border: 3px solid var(--paper); filter: url(#wobble-strong); }
.td1 { left: 6vw; top: 14vh; border-radius: 50%; animation: bob 6s infinite; }
.td2 { right: 8vw; bottom: 16vh; transform: rotate(20deg); animation: bob 7s infinite reverse; --rot: 20deg; }
.td3 { left: 12vw; bottom: 10vh; width: 3rem !important; height: 3rem !important; border-radius: 40% 60% 50% 50%; animation: bob 5s infinite; }

/* Play menu */
.play-section { margin-bottom: 1.1rem; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.note {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  min-height: 8.5rem; padding: .9rem .9rem 1.6rem; text-align: left;
  border: 0; cursor: pointer;
  background: linear-gradient(175deg, #fff4b0, var(--sticky) 35%, var(--sticky-2));
  box-shadow: 0 .6rem 1rem -.4rem rgba(0, 0, 0, .4);
  border-radius: .1rem .1rem .2rem 1.4rem / .1rem .1rem .2rem .7rem;
  transform: rotate(var(--r, -1.5deg));
  transition: transform .25s var(--ease-squish), box-shadow .25s;
}
.note-0 { --r: -2deg; background: linear-gradient(175deg, #d9ffd0, var(--mint) 40%, #9fe08e); }
.note-1 { --r: 1.2deg; }
.note-2 { --r: -1deg; background: linear-gradient(175deg, #ffd6e1, var(--pink) 40%, #ff9bb5); }
.note:hover { transform: rotate(0) translateY(-.3rem) scale(1.04); box-shadow: 0 1rem 1.6rem -.5rem rgba(0, 0, 0, .45); }
.note:active { transform: scale(.95, .9); }
.note:focus-visible { outline: 2px dashed var(--blue); outline-offset: .3rem; }
.note::before { content: ""; position: absolute; top: -.55rem; left: 50%; width: 3.2rem; height: 1.1rem; translate: -50% 0; background: rgba(255, 255, 255, .55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.note-title { font-family: var(--font-marker); font-size: 1.5rem; }
.note-flavor { font-size: 1rem; color: rgba(40, 36, 48, .85); }
.stars { position: absolute; bottom: .4rem; right: .7rem; color: rgba(40, 36, 48, .7); letter-spacing: .1em; }
.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* How to play */
.howto-card { width: min(60rem, 100%); }
.howto { display: flex; flex-direction: column; gap: 1rem; }
.howto-page { min-height: 20rem; overflow: hidden; }
.page-inner { animation: pageIn .45s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 2.5rem)) rotateY(calc(var(--dir, 1) * -8deg)); } to { opacity: 1; transform: none; } }
.page-title { font-family: var(--font-marker); font-weight: normal; font-size: 1.6rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .6rem; }
.page-num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2.5px solid var(--red); border-radius: 50%; color: var(--red); font-size: 1.1rem; filter: url(#wobble); }
.page-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.6rem; align-items: start; }
.page-cols.no-art { grid-template-columns: 1fr; }
.page-art { margin: 0; display: grid; place-items: center; }
.page-text p, .page-text li { font-size: 1.15rem; margin: 0 0 .7rem; }
.page-text ul { padding-left: 1.2rem; margin: 0 0 .7rem; }
.page-text .aside { color: var(--graphite-2); font-size: 1.02rem; border-left: 3px solid var(--sticky-2); padding-left: .7rem; }
.howto-nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.page-dots { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--graphite); background: transparent; padding: 0; cursor: pointer; transition: transform .2s; }
.dot.on { background: var(--graphite); transform: scale(1.25); }

.diagram { width: 100%; max-width: 20rem; height: auto; overflow: visible; }
.d-paper { fill: #fffdf3; stroke: var(--graphite); stroke-width: 1.5; filter: url(#wobble); }
.d-grid { stroke: rgba(84, 132, 214, .45); stroke-width: 1; }
.d-shade { fill: rgba(0, 0, 0, .05); }
.d-shade.home-b { fill: rgba(37, 70, 184, .1); }
.d-shade.home-r { fill: rgba(210, 51, 47, .1); }
.d-dot { fill: var(--blue); opacity: .75; }
.d-target circle { fill: rgba(210, 51, 47, .12); stroke: var(--red); stroke-width: 2; stroke-dasharray: 4 3; }
.d-target path { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }
.d-fold { stroke: var(--graphite); stroke-width: 2.5; stroke-dasharray: 7 5; }
.d-flap { fill: rgba(255, 220, 120, .28); stroke: none; }
.d-crease { stroke: rgba(60, 50, 40, .35); stroke-width: 2; }
.d-crease.c2 { stroke: rgba(60, 50, 40, .65); stroke-width: 3; }
.d-rip-gap { fill: none; stroke: var(--desk); stroke-width: 6; stroke-linejoin: bevel; }
.d-rip { fill: none; stroke: #fff; stroke-width: 1.2; }
.d-unit circle { fill: #fffdf3; stroke-width: 2.4; }
.d-unit text { font-family: var(--font-marker); font-size: 12px; text-anchor: middle; }
.d-unit.blue circle { stroke: var(--blue); } .d-unit.blue text { fill: var(--blue); }
.d-unit.red circle { stroke: var(--red); } .d-unit.red text { fill: var(--red); }
.d-unit .sig { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.d-unit .sig-line { stroke-width: 1.5; }
.d-unit.blue .sig, .d-unit.blue .sig-line { stroke: var(--blue); }
.d-unit.red .sig, .d-unit.red .sig-line { stroke: var(--red); }
.d-unit.crushed circle { stroke-dasharray: 3 2; opacity: .6; }
.d-unit.drying circle { stroke-dasharray: 2 3; fill: rgba(169, 214, 255, .35); }
.d-unit.holds circle { fill: rgba(210, 51, 47, .12); }
.d-hp { font-family: var(--font-hand) !important; font-size: 9px !important; fill: var(--graphite) !important; }
.d-arrow { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 4; }
.d-arrow.blue { stroke: var(--blue); }
.d-arrowhead { fill: none; stroke: inherit; stroke-width: 1.8; }
marker path { stroke: var(--graphite); }
.d-splat path, .d-splat circle { fill: #231f3d; }
.d-label { font-family: var(--font-hand); font-size: 11px; fill: var(--graphite); }
.d-label.burst { font-family: var(--font-marker); font-size: 14px; fill: var(--red); transform-box: fill-box; }
.d-label.small { font-size: 10px; fill: var(--graphite-2); }
.d-label.bad { fill: var(--red); }
.d-arrow.red { stroke: var(--red); }
.d-arrow.blocked { stroke-dasharray: 2 4; opacity: .8; }
.d-hill { fill: #efe5c8; stroke: var(--graphite); stroke-width: 1.6; stroke-linejoin: round; filter: url(#wobble); }
.d-hill-shadow { fill: rgba(0, 0, 0, .18); }
.d-hill-crease { fill: none; stroke: rgba(60, 50, 40, .55); stroke-width: 1.1; stroke-linecap: round; }
.d-tape path { fill: rgba(255, 236, 160, .78); stroke: rgba(150, 120, 40, .55); stroke-width: 1; }
.d-pip { fill: #fffdf3; stroke: var(--graphite-2); stroke-width: 1; }
.d-pip.full { fill: var(--green); stroke: var(--green); }
.d-pip.full.warn { fill: var(--gold); stroke: var(--gold); }
.unit-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.unit-table th { font-family: var(--font-marker); font-weight: normal; font-size: .85rem; text-align: center; color: var(--graphite-2); padding: .2rem; }
.unit-table td { text-align: center; padding: .15rem .3rem; border-top: 1px dashed rgba(52, 51, 59, .25); }
.unit-table .u-name { text-align: left; font-family: var(--font-marker); font-size: .95rem; }
.unit-table .u-traits { font-size: .9rem; color: var(--graphite-2); }
.howto-icon { width: 2.6rem; height: 2.6rem; display: block; }
.controls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; margin-top: .6rem; }
.ctl { display: flex; align-items: center; gap: .6rem; }
.ctl kbd { min-width: 4.8rem; text-align: center; opacity: .85; }

/* Settings */
.settings-card { width: min(36rem, 100%); }
.settings-group { margin-bottom: 1rem; }
.setting { display: grid; grid-template-columns: 10rem 1fr 3.2rem; align-items: center; gap: .8rem; padding: .35rem 0; }
.setting-toggle { grid-template-columns: 1fr auto; cursor: pointer; }
.setting-label { font-size: 1.15rem; }
.setting-label small { display: block; font-size: .9rem; color: var(--muted); }
.setting:has(.segmented) { grid-template-columns: 10rem 1fr; }
.slider-val { text-align: right; font-family: var(--font-marker); font-size: .95rem; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; background: transparent; cursor: pointer; --p: 50%; }
.slider::-webkit-slider-runnable-track { height: .45rem; border-radius: 1rem; border: 2px solid var(--graphite); background: linear-gradient(90deg, var(--blue) var(--p), #fff var(--p)); }
.slider::-moz-range-track { height: .45rem; border-radius: 1rem; border: 2px solid var(--graphite); background: linear-gradient(90deg, var(--blue) var(--p), #fff var(--p)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin-top: -.5rem; border-radius: 45% 55% 50% 50%; background: var(--sticky); border: 2.5px solid var(--graphite); box-shadow: 1px 2px 0 rgba(0, 0, 0, .35); transition: transform .15s; }
.slider::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sticky); border: 2.5px solid var(--graphite); }
.slider:active::-webkit-slider-thumb { transform: scale(1.2); }
.slider:focus-visible { outline: 2px dashed var(--blue); outline-offset: 2px; }
.switch { position: relative; width: 3.4rem; height: 1.8rem; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-knob { position: absolute; inset: 0; border: 2.5px solid var(--graphite); border-radius: 1rem; background: #fff; transition: background .2s; }
.switch-knob::after { content: ""; position: absolute; top: .12rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--graphite); transition: transform .25s var(--ease-squish); }
.switch input:checked + .switch-knob { background: var(--mint); }
.switch input:checked + .switch-knob::after { transform: translateX(1.55rem); background: var(--green); }
.switch input:focus-visible + .switch-knob { outline: 2px dashed var(--blue); outline-offset: 2px; }
.segmented { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg { padding: .2rem .7rem; border: 2px solid var(--graphite); border-radius: .6rem .3rem .6rem .4rem; background: #fff; cursor: pointer; font-size: 1rem; transition: transform .15s var(--ease-squish), background .15s; }
.seg:hover { transform: rotate(-2deg); }
.seg.on { background: var(--sticky); font-family: var(--font-marker); font-size: .9rem; }

/* Credits */
.credits-roll { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.credits-roll .logo-face { color: var(--paper); }
.credit { display: flex; flex-direction: column; }
.credit-role { font-family: var(--font-marker); font-size: .9rem; color: var(--red); }
.credit-who { font-size: 1.15rem; }
.credits-thanks { margin-top: .8rem; color: var(--graphite-2); font-style: italic; }

/* Pause */
.pause-card { width: min(24rem, 100%); text-align: center; padding-left: 2.6rem; }
.pause-menu { display: flex; flex-direction: column; gap: .7rem; }
.confirm { padding: .7rem; background: rgba(255, 179, 168, .35); border: 2px dashed var(--red); border-radius: .5rem; }
.confirm p { margin: 0 0 .5rem; }
.confirm-row { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Hot-seat handoff (full cover) */
.screen.cover { background: var(--desk); backdrop-filter: none; cursor: pointer; }
.handoff { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; color: var(--paper); max-width: 40rem; }
.handoff-title { font-family: var(--font-marker); font-weight: normal; font-size: clamp(2.2rem, 6vw, 4.2rem); margin: 0; transform: rotate(-2deg); }
.handoff-blue .handoff-title { color: var(--blue-soft); }
.handoff-red .handoff-title { color: var(--red-soft); }
.handoff-sub { font-size: 1.4rem; margin: 0; opacity: .85; }
.handoff-hint { opacity: .55; animation: blink 1.6s infinite; }
.handoff-pencil {
  width: 12rem; height: 2.2rem; position: relative;
  background: linear-gradient(180deg, #ffd34d 0 33%, #f2b92a 33% 66%, #e5a51c 66%);
  border-radius: .2rem; animation: passPencil 1.6s var(--ease-out) both;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}
.handoff-pencil::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.6rem; background: #f4a3b4; border-right: .35rem solid #b9b9c2; }
.handoff-pencil::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, #f5deb3, #e6c58f); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.handoff-red .handoff-pencil { transform-origin: center; }
@keyframes passPencil { 0% { transform: translateX(-60vw) rotate(-20deg); } 70% { transform: translateX(1rem) rotate(4deg); } 100% { transform: none; } }

/* Game over */
.gameover-card { width: min(34rem, 100%); text-align: center; overflow: hidden; }
.stamp {
  display: inline-block; margin: .2rem auto .4rem;
  font-family: var(--font-marker); font-size: 2.6rem; letter-spacing: .08em;
  padding: .1rem 1.2rem; border: .3rem solid currentColor; border-radius: .5rem;
  color: var(--graphite); transform: rotate(-6deg);
  animation: stamp .55s .15s var(--ease-squish) both;
  mix-blend-mode: multiply;
}
.winner-blue .stamp { color: var(--blue); }
.winner-red .stamp { color: var(--red); }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-14deg); } 100% { opacity: .9; transform: scale(1) rotate(-6deg); } }
.go-headline { transform: none; margin-bottom: .2rem; }
.go-reason { margin: 0 0 .2rem; font-size: 1.2rem; }
.stats-table { margin: .6rem auto 0; border-collapse: collapse; min-width: 70%; font-size: 1.1rem; }
.stats-table th, .stats-table td { padding: .2rem .8rem; border-bottom: 1px dashed rgba(52, 51, 59, .3); }
.stats-table thead th { font-family: var(--font-marker); font-weight: normal; font-size: .9rem; }
.stats-table tbody th { text-align: left; font-weight: normal; color: var(--graphite-2); }
.stats-table td.best { font-family: var(--font-marker); position: relative; }
.stats-table td.best::after { content: ""; position: absolute; inset: .05rem .3rem; border: 2px solid var(--gold); border-radius: 50%; filter: url(#wobble); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -1rem; left: var(--x); width: .5rem; height: .9rem; background: hsl(var(--h) 75% 50%); border-radius: 2px; animation: confetti 2.6s var(--d) ease-in forwards; opacity: .85; }
@keyframes confetti { to { transform: translateY(40rem) rotate(var(--r)); opacity: 0; } }
.msg-card { width: min(28rem, 100%); }

/* ───────────────────────── HUD ───────────────────────── */
#hud {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
}
#hud.hidden { display: block !important; visibility: hidden; }
#hud.hidden > * { opacity: 0; }
#hud > * { transition: opacity .4s ease, transform .5s var(--ease-out); }
#hud.hidden .hud-left { transform: translateX(-2rem); }
#hud.hidden .hud-right { transform: translateX(2rem); }
.hud-left, .hud-right { position: absolute; top: max(.8rem, env(safe-area-inset-top)); bottom: max(.8rem, env(safe-area-inset-bottom)); width: var(--side); display: flex; flex-direction: column; gap: .8rem; pointer-events: none; }
.hud-left { left: max(.8rem, env(safe-area-inset-left)); }
.hud-right { right: max(.8rem, env(safe-area-inset-right)); }
.hud-left > *, .hud-right > * { pointer-events: auto; }
.hud-topline { display: flex; align-items: center; gap: .6rem; }
.hud-menu { color: var(--paper); background: rgba(255, 255, 255, .08); border-radius: .7rem; }
.turn-counter { display: flex; align-items: baseline; gap: .3rem; color: var(--paper); flex-wrap: wrap; }
.tc-round { font-family: var(--font-marker); font-size: 1.25rem; }
.tc-of { opacity: .55; }
.tc-who { margin-left: .4rem; padding: 0 .55rem; border-radius: .4rem; font-size: 1rem; background: rgba(255, 255, 255, .1); }
.turn-counter[data-player="0"] .tc-who { background: rgba(143, 176, 255, .25); }
.turn-counter[data-player="1"] .tc-who { background: rgba(255, 157, 147, .25); }

/* Player banners */
.banner { padding: .7rem .9rem .7rem 2.8rem; transition: transform .35s var(--ease-out), filter .3s; transform: rotate(-.6deg); }
.banner-red { transform: rotate(.6deg); }
.banner::before { opacity: .92; }
.banner:not(.active) { filter: saturate(.55) brightness(.92); }
.banner.active { transform: scale(1.03) rotate(-.4deg); }
.banner.active::before { box-shadow: 0 0 0 .22rem var(--team), var(--shadow); }
.banner-blue { --team: var(--blue); }
.banner-red { --team: var(--red); }
.banner-tape { position: absolute; left: -.6rem; top: .7rem; width: 2.6rem; height: 1.1rem; background: var(--team); opacity: .82; transform: rotate(-35deg); clip-path: polygon(0 10%, 8% 0, 100% 0, 92% 100%, 0 100%); }
.banner-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.banner-names { display: flex; flex-direction: column; min-width: 0; }
.banner-name { font-family: var(--font-marker); font-size: 1.15rem; color: var(--team); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-sub { font-size: .95rem; color: var(--graphite-2); }
.banner-ink { position: relative; display: flex; align-items: center; gap: .25rem; }
.ink-bottle { width: 2.2rem; height: 2.75rem; overflow: visible; }
.ink-bottle .bottle { fill: rgba(255, 255, 255, .35); stroke: var(--graphite); stroke-width: 2.5; filter: url(#wobble); }
.ink-bottle .cap { fill: var(--graphite); }
.ink-bottle .ink-fill, .ink-bottle .ink-wave { fill: var(--team); transition: y .6s var(--ease-out), transform .6s var(--ease-out); }
.ink-bottle .ink-wave { animation: wave 2.4s linear infinite; }
.ink-bottle .shine { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; }
@keyframes wave { from { translate: 0 0; } to { translate: -24px 0; } }
.ink-num { font-family: var(--font-marker); font-size: 1.7rem; min-width: 1.6em; text-align: right; color: var(--graphite); }
.banner-ink.ink-gain { animation: inkGain .8s var(--ease-squish); }
.banner-ink.ink-spend { animation: inkSpend .6s ease; }
@keyframes inkGain { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes inkSpend { 30% { transform: translateY(.2rem) scale(.92); } }
.ink-float { position: absolute; right: 0; top: -.4rem; font-family: var(--font-marker); font-size: 1.2rem; opacity: 0; pointer-events: none; }
.ink-float.up { color: var(--green); }
.ink-float.down { color: var(--red); }
.ink-float.show { animation: floatUp 1.2s ease-out; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(.4rem); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1.6rem); } }
.banner-stats { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin-top: .45rem; font-size: .98rem; }
.stat { display: flex; align-items: center; gap: .4rem; }
.stat-label { color: var(--graphite-2); }
.stat-val { font-family: var(--font-marker); font-size: .9rem; }
.stat-hq { grid-column: 1 / -1; }
.hpbar { flex: 1; height: .55rem; border: 1.8px solid var(--graphite); border-radius: .5rem; overflow: hidden; background: rgba(255, 255, 255, .6); }
.hpbar-fill { display: block; height: 100%; width: 100%; background: var(--team); transition: width .6s var(--ease-out); background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 .25rem, transparent .25rem .5rem); }
.banner.hq-danger .hpbar-fill { animation: blink .9s infinite; }
.stat-fold.used .fold-pip { display: none; }
.paper-used-icon { display: none; width: 1.25rem; height: 1.25rem; }
.stat-fold.used .paper-used-icon { display: inline-block; opacity: .7; }
.paper-used-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--graphite-2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.paper-used-icon .flap, .paper-used-icon .ball, .paper-used-icon .strip { fill: var(--paper-2); }
.fold-pip { width: 1.1rem; height: 1.1rem; border: 2px solid var(--graphite); background: #fff; clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); transition: background .3s; }
.stat-fold.charged .fold-pip { background: var(--sticky-2); animation: charge 1.6s ease-in-out infinite; }
.stat-fold.charged .fold-label { color: var(--graphite); font-family: var(--font-marker); font-size: .85rem; }
@keyframes charge { 50% { transform: rotate(-10deg) scale(1.15); } }
.banner.hq-hit { animation: hqHit .6s ease; }
@keyframes hqHit { 20% { transform: translateX(-.4rem) rotate(-2deg); } 40% { transform: translateX(.4rem) rotate(1deg); } 60% { transform: translateX(-.2rem); } }
.banner.folding { animation: wiggle .7s; }
.banner.wiggle { animation: wiggle .5s; }
.thinking { display: none; align-items: center; gap: .4rem; margin-top: .4rem; font-size: 1rem; color: var(--team); }
.banner.is-thinking .thinking { display: flex; }
.thinking-pencil { width: 1.4rem; height: .4rem; background: linear-gradient(90deg, #f4a3b4 0 18%, #ffd34d 18% 80%, #e6c58f 80%); clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); animation: scribble .5s ease-in-out infinite alternate; }
@keyframes scribble { from { transform: translate(-.2rem, .1rem) rotate(-10deg); } to { transform: translate(.2rem, -.1rem) rotate(8deg); } }
.dots i { display: inline-block; width: .3rem; height: .3rem; margin: 0 .08rem; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

/* Battle log */
.log { flex: 1; min-height: 6rem; display: flex; flex-direction: column; padding: .7rem .7rem .5rem 2.8rem; overflow: hidden; }
.log h3 { align-self: flex-start; }
.log-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 1rem; line-height: 1.55rem; scrollbar-width: thin; user-select: text; }
.log-list li { padding-left: .1rem; animation: logIn .4s var(--ease-out); }
.log-list li[data-player="0"] { color: var(--blue); }
.log-list li[data-player="1"] { color: var(--red); }
.log-list li.log-rip { font-family: var(--font-marker); font-size: .9rem; color: var(--graphite); }
.log-list li.log-info { color: var(--graphite-2); }
@keyframes logIn { from { opacity: 0; transform: translateX(-.6rem); } }

/* Right column */
.unit-panel { padding: .9rem .9rem .8rem 1rem; transform: rotate(.8deg); min-height: 9.5rem; }
.unit-panel.empty { min-height: 0; }
.unit-panel h3.tape { margin-bottom: .4rem; }
.panel-empty { margin: 0; color: rgba(52, 51, 59, .75); }
.panel-head { display: flex; gap: .7rem; align-items: center; }
.panel-icon { width: 4.2rem; height: 4.2rem; flex: none; background: rgba(255, 255, 255, .45); border-radius: .4rem; }
.panel-name { font-family: var(--font-marker); font-size: 1.15rem; line-height: 1.1; }
.panel-owner { font-size: .95rem; color: var(--graphite-2); }
.unit-panel.owner-0 .panel-name { color: var(--blue); }
.unit-panel.owner-1 .panel-name { color: var(--red); }
.hp-pips { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .2rem; }
.pip { width: .7rem; height: .7rem; border: 1.6px solid var(--graphite); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: transparent; }
.pip.full { background: var(--red); }
.unit-panel.owner-0 .pip.full { background: var(--blue); }
.panel-hp { font-size: .9rem; color: var(--graphite-2); }
.panel-stats, .tip-stats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.chip { display: inline-flex; align-items: baseline; gap: .25rem; padding: 0 .45rem; border: 1.5px solid rgba(52, 51, 59, .6); border-radius: .4rem .2rem .4rem .3rem; background: rgba(255, 255, 255, .55); }
.chip-l { font-size: .75rem; color: var(--graphite-2); letter-spacing: .04em; }
.chip-v { font-family: var(--font-marker); font-size: .9rem; }
.panel-traits { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.trait { padding: 0 .5rem; border-radius: 1rem; background: rgba(52, 51, 59, .12); font-size: .9rem; cursor: help; }
.panel-status { margin-top: .45rem; font-family: var(--font-marker); font-size: .9rem; }
.panel-status.ready { color: var(--green); }
.panel-status.moved { color: var(--gold); }
.panel-status.done, .panel-status.drying { color: var(--muted); }
.panel-status.enemy { color: var(--red); }
.panel-bounty { font-size: .9rem; color: var(--graphite-2); }

.hint-note { color: var(--paper); font-size: 1.05rem; padding: .1rem .3rem; min-height: 1.4em; opacity: .85; }
.hint-note.custom { color: #fff3a8; opacity: 1; }
.hint-note.pop { animation: fadeUp .35s ease; }
body.no-hints .hint-note:not(.custom) { visibility: hidden; }

.palette { margin-top: auto; }
.palette h3.tape { margin-left: .2rem; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: .45rem .15rem .35rem; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #fffef8, #f6efd9);
  border-radius: .45rem .3rem .5rem .35rem;
  box-shadow: 0 0 0 2px rgba(52, 51, 59, .8), .15rem .2rem 0 rgba(0, 0, 0, .35);
  transition: transform .2s var(--ease-squish), box-shadow .2s, opacity .2s, filter .2s;
  transform: rotate(var(--cr, 0deg));
}
.card:nth-child(1) { --cr: -1.5deg; } .card:nth-child(2) { --cr: 1deg; } .card:nth-child(3) { --cr: -.5deg; } .card:nth-child(4) { --cr: 1.5deg; } .card:nth-child(5) { --cr: -1deg; }
.card:hover:not(.disabled) { transform: translateY(-.35rem) rotate(0) scale(1.06); z-index: 3; }
.card:active:not(.disabled) { transform: scale(.92, .86); }
.card.active { box-shadow: 0 0 0 3px var(--gold), .15rem .2rem 0 rgba(0, 0, 0, .35); transform: translateY(-.45rem) scale(1.06); background: #fff6c8; }
.card.disabled { filter: grayscale(.9) opacity(.5); cursor: not-allowed; }
.card:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }
.card-icon { width: 100%; max-width: 3.6rem; aspect-ratio: 1; height: auto; }
.card-name { font-size: .85rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-cost { display: inline-flex; align-items: center; gap: .15rem; font-family: var(--font-marker); font-size: .95rem; }
.drop { width: .6rem; height: .6rem; background: var(--graphite); border-radius: 50% 0 50% 50%; transform: rotate(-45deg); display: inline-block; }
#hud[data-viewer="0"] .drop { background: var(--blue); }
#hud[data-viewer="1"] .drop { background: var(--red); }
.card-key { position: absolute; top: .15rem; left: .25rem; font-size: .65rem; padding: 0 .2rem; border-width: 1px; border-bottom-width: 2px; }
.card-tip {
  position: absolute; bottom: calc(100% + .7rem); right: -1rem; width: 15rem; z-index: 20;
  padding: .7rem .8rem; text-align: left; pointer-events: none;
  background: linear-gradient(175deg, #fff4b0, var(--sticky)); box-shadow: var(--shadow-sm);
  border-radius: .1rem .1rem .2rem 1rem; font-size: .95rem; color: var(--graphite);
  opacity: 0; transform: translateY(.4rem) rotate(-1deg); transition: opacity .18s, transform .2s var(--ease-out);
}
.card:nth-child(-n+2) .card-tip { right: auto; left: -1rem; }
.card:hover .card-tip, .card:focus-visible .card-tip { opacity: 1; transform: translateY(0) rotate(-1deg); }
.card-tip strong { font-family: var(--font-marker); font-weight: normal; display: block; }
.tip-traits, .tip-bounty { margin-top: .35rem; color: var(--graphite-2); font-size: .9rem; }
.card[data-why]:not([data-why=""]) .card-tip::after { content: attr(data-why); display: block; margin-top: .35rem; color: var(--red); }

.fold-info { background: rgba(255, 253, 243, .95); border: 2px dashed var(--graphite); border-radius: .5rem; padding: .55rem .7rem; font-size: 1rem; animation: fadeUp .3s ease; }
.fold-info strong { font-family: var(--font-marker); font-weight: normal; }
.fold-info .fold-dir { color: var(--graphite-2); }
.fold-sum { margin: .3rem 0 0; padding-left: 1.1rem; }
.fold-sum .good { color: var(--green); font-family: var(--font-marker); font-size: .9rem; }
.fold-sum .warn { color: var(--gold); }
.fold-sum .muted { color: var(--muted); }
.fold-info .bad { color: var(--red); margin: .3rem 0 0; }
.fold-cta { margin: .3rem 0 0; font-family: var(--font-marker); font-size: .9rem; color: var(--blue); }
#hud[data-viewer="1"] .fold-cta { color: var(--red); }

.actions { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.actions .btn { min-height: 3.2rem; padding: .3rem .6rem; }
.actions .btn-end { min-height: 2.9rem; }
/* Paper action group: Fold / Crumple / Tape share the one per-turn charge. */
.paper-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; position: relative; padding-top: 1.05rem; }
.paper-group-label { position: absolute; top: -.1rem; left: .2rem; font-size: .82rem; color: rgba(255, 253, 243, .7); white-space: nowrap; }
#hud.paper-spent .paper-group-label { opacity: .6; }
.actions .btn-paper { flex-direction: column; gap: 0; min-height: 4.1rem; padding: .3rem .2rem .25rem; font-size: .98rem; line-height: 1.05; }
.btn-paper .btn-label { white-space: nowrap; }
.btn-paper .paper-icon { width: 1.6rem; height: 1.6rem; display: inline-block; }
.btn-paper .paper-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--graphite); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.btn-paper .paper-icon .flap, .btn-paper .paper-icon .ball, .btn-paper .paper-icon .strip { fill: var(--paper-2); }
.btn-paper .paper-icon .crease { stroke-width: 1.4; }
.btn-paper .paper-icon .dash { stroke-dasharray: 4 3; stroke-width: 1.6; opacity: .6; }
.btn-paper.charged .paper-icon .ball { fill: #f3e4b8; }
.btn-paper.charged .paper-icon .strip { fill: #ffeaa0; }
.btn-paper .paper-meta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; font-family: var(--font-hand); font-size: .82rem; color: var(--graphite-2); }
.btn-paper .paper-cost { display: inline-flex; align-items: center; gap: .12rem; font-family: var(--font-marker); font-size: .8rem; }
.btn-paper .paper-cost .drop { width: .5rem; height: .5rem; }
.btn-paper.active { --btn-bg: var(--sticky); }
.btn-paper.active::before { border-style: dashed; }
.btn-crumple.active { --btn-bg: #f5e2b0; }
.btn-tape.active { --btn-bg: #fff1b8; }
.pbtn-tip {
  position: absolute; bottom: calc(100% + .7rem); left: 50%; width: 15rem; z-index: 20; margin-left: -7.5rem;
  padding: .6rem .75rem; text-align: left; pointer-events: none; white-space: normal; line-height: 1.3;
  background: linear-gradient(175deg, #fff4b0, var(--sticky)); box-shadow: var(--shadow-sm);
  border-radius: .1rem .1rem .2rem 1rem; font-size: .92rem; color: var(--graphite); font-family: var(--font-hand);
  opacity: 0; transform: translateY(.4rem) rotate(-1deg); transition: opacity .18s, transform .2s var(--ease-out);
}
.btn-fold .pbtn-tip { left: 0; margin-left: 0; }
.btn-tape .pbtn-tip { left: auto; right: 0; margin-left: 0; }
.btn-paper:hover .pbtn-tip { opacity: 1; transform: translateY(0) rotate(-1deg); }
.pbtn-tip strong { font-family: var(--font-marker); font-weight: normal; display: block; }
.pbtn-tip .tip-why { margin-top: .35rem; color: var(--red); }
/* Hover card for crumples / tape on the board */
.paper-tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; max-width: 15rem; padding: .5rem .7rem .55rem;
  background: linear-gradient(175deg, #fffdf3, #f6efd9); border: 2px solid var(--graphite); border-radius: .35rem .6rem .4rem .7rem;
  box-shadow: var(--shadow-sm); font-size: .95rem; line-height: 1.3; color: var(--graphite); }
.paper-tip.hidden { display: none; }
.paper-tip strong { font-family: var(--font-marker); font-weight: normal; display: block; }
.paper-tip .pt-owner { font-size: .88rem; }
.paper-tip.owner-0 .pt-owner { color: var(--blue); }
.paper-tip.owner-1 .pt-owner { color: var(--red); }
.paper-tip .pt-muted { color: var(--graphite-2); font-size: .85rem; margin-top: .15rem; }
.paper-tip .pt-ttl { display: flex; gap: .2rem; margin-top: .3rem; }
.paper-tip .pt-ttl .pip { width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid var(--graphite-2); }
.paper-tip .pt-ttl .pip.full { background: var(--gold); border-color: var(--gold); }
.fold-info .bad.locked { color: var(--graphite); background: rgba(255, 231, 122, .55); padding: .15rem .35rem; border-radius: .25rem; }
.fold-info .muted { color: var(--muted); margin: .25rem 0 0; }
.log-list li.log-paperInfo { opacity: .8; font-size: .92rem; }
.toast-paperInfo { opacity: .9; }
.actions kbd { font-size: .65rem; }
.btn-fold { --btn-bg: #fffdf5; }
.btn-fold .fold-icon { width: 1.8rem; height: 1.8rem; display: inline-block; }
.btn-fold .fold-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--graphite); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.btn-fold .fold-icon .flap { fill: var(--paper-2); }
.btn-fold.charged .fold-icon .flap { fill: var(--sticky-2); }
.btn-fold.charged .fold-icon { animation: charge 1.8s ease-in-out infinite; }
.btn-fold.active { --btn-bg: var(--sticky); }
.btn-fold.active::before { border-style: dashed; }
.fold-charge { display: none; }
.btn-end { --btn-bg: var(--mint); font-size: 1.15rem; }
.btn-end.nudge { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-3deg) scale(1.05); } 86% { transform: rotate(3deg) scale(1.05); } 94% { transform: rotate(-1deg); } }
#hud.busy .actions .btn, #hud.their-turn .actions .btn { opacity: .45; pointer-events: none; }
#hud.busy .card, #hud.their-turn .card { pointer-events: none; }

/* Turn sweep */
.turn-sweep { position: absolute; left: 0; right: 0; top: 42%; display: grid; place-items: center; pointer-events: none; z-index: 12; opacity: 0; }
.turn-sweep.play { animation: sweepFade calc(1.4s / var(--anim-speed)) ease forwards; }
.sweep-tape {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 4rem .6rem; transform: rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 .5rem, transparent .5rem 1rem), var(--team, #ffe27a);
  clip-path: polygon(0 6%, 3% 0, 6% 8%, 100% 0, 97% 30%, 100% 60%, 97% 100%, 0 100%, 3% 60%, 0 30%);
  box-shadow: var(--shadow);
}
.sweep-blue { --team: #b9ccff; }
.sweep-red { --team: #ffb6ad; }
.sweep-main { font-family: var(--font-marker); font-size: 2.6rem; color: var(--graphite); }
.sweep-sub { font-size: 1.15rem; color: var(--graphite-2); }
.turn-sweep.play .sweep-tape { animation: sweepIn calc(1.4s / var(--anim-speed)) var(--ease-out) forwards; }
@keyframes sweepFade { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweepIn { 0% { transform: translateX(-70vw) rotate(-8deg); } 25% { transform: translateX(0) rotate(-3deg); } 75% { transform: translateX(0) rotate(-3deg); } 100% { transform: translateX(70vw) rotate(4deg); } }

/* Toasts */
#toasts { position: fixed; left: 50%; top: max(.8rem, env(safe-area-inset-top)); translate: -50% 0; z-index: 25; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; width: min(34rem, 92vw); }
.toast {
  padding: .4rem 1rem; background: rgba(255, 253, 243, .97); color: var(--graphite);
  border-radius: .2rem .5rem .3rem .4rem; box-shadow: var(--shadow-sm); font-size: 1.1rem; text-align: center;
  border-left: .35rem solid var(--graphite);
  transform: rotate(var(--tilt, 0deg)); animation: toastIn .4s var(--ease-out);
}
.toast[data-player="0"] { border-left-color: var(--blue); }
.toast[data-player="1"] { border-left-color: var(--red); }
.toast-error { background: #ffe3dd; border-left-color: var(--red); }
.toast-kill { font-family: var(--font-marker); font-size: 1.05rem; }
.toast-rip, .toast-gameover { font-family: var(--font-marker); background: var(--sticky); }
.toast.out { animation: toastOut .45s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-1rem) scale(.9) rotate(-4deg); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-.6rem) scale(.95); } }
body.in-game #toasts { left: 50%; }

/* ───────────────────────── tutorial ───────────────────────── */
#tutorial-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#tutorial-layer.suspended { visibility: hidden; }
#tutorial-layer.modal { background: rgba(20, 18, 26, .25); pointer-events: auto; }
.tut-note { position: absolute; left: 0; top: 0; width: min(19rem, 86vw); padding: .9rem 1rem 1rem 1.1rem; pointer-events: auto; will-change: transform; }
.tut-note.pop { animation: notePop .45s var(--ease-squish); }
@keyframes notePop { from { opacity: 0; scale: .7; } }
.tut-note::before { content: ""; position: absolute; top: -.6rem; left: 40%; width: 4rem; height: 1.2rem; background: rgba(169, 214, 255, .75); transform: rotate(-4deg); }
.tut-note h3 { font-family: var(--font-marker); font-weight: normal; margin: .1rem 0 .3rem; font-size: 1.3rem; }
.tut-note p { margin: 0 0 .4rem; font-size: 1.08rem; }
.tut-sub { color: var(--red); }
.tut-step { font-size: .85rem; color: rgba(52, 51, 59, .65); }
.tut-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.tut-skip { position: absolute; right: .5rem; top: .4rem; border: 0; background: none; cursor: pointer; color: rgba(52, 51, 59, .6); font-size: .9rem; }
.tut-skip:hover { color: var(--graphite); text-decoration: underline; }
.tut-ring { position: absolute; border: .25rem solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 .3rem rgba(255, 216, 77, .35), 0 0 1.2rem rgba(255, 216, 77, .7); animation: ringPulse 1.1s ease-in-out infinite; filter: url(#wobble); }
@keyframes ringPulse { 50% { transform: scale(1.12); opacity: .75; } }
.tut-line { position: absolute; background: repeating-linear-gradient(90deg, var(--gold) 0 .8rem, transparent .8rem 1.3rem); border-radius: 1rem; box-shadow: 0 0 .8rem rgba(255, 216, 77, .8); animation: blink 1s infinite; }
.tut-line[data-axis="v"] { background: repeating-linear-gradient(180deg, var(--gold) 0 .8rem, transparent .8rem 1.3rem); }
.tut-arrow { position: absolute; height: 0; border-top: 3px dashed var(--gold); transform-origin: 0 50%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.tut-arrow::after { content: ""; position: absolute; right: -2px; top: -9px; border: 8px solid transparent; border-left: 12px solid var(--gold); border-right: 0; }
.tut-glow { animation: tutGlow 1.1s ease-in-out infinite !important; z-index: 21 !important; position: relative; }
@keyframes tutGlow { 0%, 100% { filter: drop-shadow(0 0 .2rem rgba(255, 216, 77, .9)); } 50% { filter: drop-shadow(0 0 .9rem rgba(255, 216, 77, 1)) brightness(1.08); } }

/* ───────────────────────── colorblind patterns ───────────────────────── */
body.colorblind .banner-red .banner-tape, body.colorblind .sweep-red .sweep-tape, body.colorblind .banner-red .hpbar-fill { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .35) 0 .2rem, transparent .2rem .5rem); }
body.colorblind .banner-blue .banner-tape, body.colorblind .sweep-blue .sweep-tape, body.colorblind .banner-blue .hpbar-fill { background-image: radial-gradient(rgba(0, 0, 0, .4) 25%, transparent 28%); background-size: .45rem .45rem; }
body.colorblind .banner-red .banner-name::after { content: " ////"; letter-spacing: -.1em; opacity: .6; }
body.colorblind .banner-blue .banner-name::after { content: " • • •"; opacity: .6; }
body.colorblind .log-list li[data-player="1"]::before { content: "▲ "; }
body.colorblind .log-list li[data-player="0"]::before { content: "● "; }
body.colorblind .toast[data-player="1"] { border-left-style: dashed; }
body.colorblind .toast[data-player="0"] { border-left-style: dotted; }

/* ───────────────────────── portrait / small screens ───────────────────────── */
html.portrait { font-size: clamp(13px, 2.1vw, 26px); }
body.portrait { --side: auto; font-size: 1.05rem; }
body.portrait .hud-left, body.portrait .hud-right { left: max(.5rem, env(safe-area-inset-left)); right: max(.5rem, env(safe-area-inset-right)); width: auto; gap: .45rem; }
body.portrait .hud-left { bottom: auto; top: max(.5rem, env(safe-area-inset-top)); display: grid; grid-template-columns: auto 1fr; align-items: center; }
body.portrait .hud-right { top: auto; bottom: max(.5rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "hint hint" "banner actions" "palette palette"; }
body.portrait .hud-topline { flex-direction: column; align-items: flex-start; gap: .1rem; }
body.portrait .turn-counter { flex-direction: column; gap: 0; }
body.portrait .tc-who { margin: 0; font-size: .85rem; }
body.portrait .tc-round { font-size: 1rem; }
body.portrait .log { display: none; }
body.portrait .banner { padding: .4rem .6rem .4rem 2rem; transform: none; }
body.portrait .banner.active { transform: none; }
body.portrait .banner-stats { margin-top: .15rem; grid-template-columns: 1fr auto auto; font-size: .85rem; }
body.portrait .stat-hq { grid-column: auto; }
body.portrait .stat-hq .stat-label { display: none; }
body.portrait .stat-army .stat-label { display: none; }
body.portrait .ink-bottle { width: 1.6rem; height: 2rem; }
body.portrait .ink-num { font-size: 1.35rem; }
body.portrait .banner-name { font-size: 1rem; }
body.portrait .banner-sub { font-size: .8rem; }
body.portrait .banner-blue { grid-area: banner; }
body.portrait .unit-panel { display: none; }
body.portrait .hint-note { grid-area: hint; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
body.portrait .palette { grid-area: palette; margin: 0; }
body.portrait .palette h3 { display: none; }
body.portrait .fold-info { position: absolute; bottom: calc(100% + .5rem); left: 0; right: 0; font-size: .9rem; }
body.portrait .actions { grid-area: actions; grid-template-columns: 1fr; gap: .3rem; align-self: stretch; }
body.portrait .actions .btn { min-height: 2.8rem; font-size: .95rem; }
body.portrait .paper-group { padding-top: 0; gap: .25rem; }
body.portrait .paper-group-label { display: none; }
body.portrait .actions .btn-paper { min-height: 2.9rem; padding: .15rem .15rem; font-size: .78rem; }
body.portrait .btn-paper .paper-icon { width: 1.3rem; height: 1.3rem; }
body.portrait .btn-paper .paper-meta { margin-top: 0; font-size: .72rem; }
body.portrait .actions .btn-end { min-height: 2.2rem; font-size: .9rem; }
body.portrait .pbtn-tip { display: none; }
body.portrait .actions kbd, body.portrait .card-key { display: none; }
body.portrait .btn-paper .paper-meta kbd { display: none; }
body.portrait .card-tip { display: none; }
body.portrait .card { padding: .3rem .1rem .25rem; }
body.portrait .card-icon { max-width: 2.6rem; }
body.portrait .card-name { font-size: .75rem; }
body.portrait .sweep-main { font-size: 2rem; }
body.portrait .menu-card { padding: 1.2rem 1rem 1rem 2.4rem; }
body.portrait .notes { grid-template-columns: 1fr; }
body.portrait .note { min-height: 0; }
body.portrait .play-row { grid-template-columns: 1fr; }
body.portrait .page-cols { grid-template-columns: 1fr; }
body.portrait .diagram { max-width: 15rem; }
body.portrait .setting { grid-template-columns: 1fr; gap: .2rem; }
body.portrait .setting-toggle { grid-template-columns: 1fr auto; }
body.portrait .setting:has(.segmented) { grid-template-columns: 1fr; }
body.portrait .controls-grid { grid-template-columns: 1fr; }
body.portrait .unit-table { font-size: .9rem; }
body.portrait .unit-table .u-traits { display: none; }
body.portrait #toasts { top: auto; bottom: 40%; }

/* Narrow landscape (≈1024–1200px): the side columns hit their 15rem floor, so
   tighten the banner so "Blue Ballpoint" isn't ellipsized next to the ink bottle. */
@media (max-width: 1200px) and (min-aspect-ratio: 1/1) {
  .banner { padding-left: 2.3rem; }
  .banner-name { font-size: .95rem; }
  .ink-num { min-width: 1.2em; }
}

@media (max-height: 640px) and (min-aspect-ratio: 1/1) {
  :root { font-size: 12px; }
  .log { display: none; }
  .unit-panel { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Disabled paper buttons: dim the face but keep the hover tip readable. */
.btn-paper.disabled { opacity: 1; }
.btn-paper.disabled > :not(.pbtn-tip), .btn-paper.disabled::before { opacity: .45; }
/* Portrait: size paper buttons to their labels and keep the mode card short. */
body.portrait .paper-group { grid-template-columns: repeat(3, auto); }
body.portrait .actions .btn-paper { padding: .15rem .45rem; }
body.portrait .fold-info[data-kind="crumple"] .fold-sum li.muted,
body.portrait .fold-info[data-kind="tape"] .fold-sum li.muted { display: none; }
body.portrait .fold-info[data-kind="crumple"] > p:not(.fold-cta):not(.bad),
body.portrait .fold-info[data-kind="tape"] > p:not(.fold-cta):not(.bad) { margin: .2rem 0 0; }
/* Short windows (landscape phones, small laptop windows): shrink the title so
   the whole menu fits without scrolling. */
@media (max-height: 560px) {
  .logo { margin-top: 0; }
  .logo-word { font-size: clamp(2.6rem, 15vh, 5rem); }
  .tagline { font-size: 1.15rem; margin: 0 0 .4rem; }
  .title-menu { gap: .4rem; }
  .btn-menu { min-height: 2.4rem; font-size: 1.05rem; }
  .title-foot { margin-top: .3rem; }
}

/* ───────────────────────── online 2-player ───────────────────────── */
.btn-online { --btn-bg: var(--sky); }
.online-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.online-or { color: var(--graphite-2); }
.join-code, .invite-url, .name-input, .rule-num {
  font: inherit; color: var(--graphite); background: #fff;
  border: 2px solid var(--graphite); border-radius: .5rem .3rem .55rem .35rem;
  padding: .25rem .55rem; min-height: 2.1rem;
}
.join-code { width: 6.5rem; text-transform: uppercase; letter-spacing: .15em; font-family: var(--font-marker); }
.join-code.bad { border-color: var(--red); animation: wiggle .4s; }
.join-code:focus-visible, .invite-url:focus-visible, .name-input:focus-visible, .rule-num:focus-visible { outline: 2px dashed var(--blue); outline-offset: 2px; }

.lobby-card { width: min(54rem, 100%); }
.lobby { display: flex; flex-direction: column; gap: 1rem; }
.lobby section { min-width: 0; }
.invite-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.invite-url { flex: 1 1 16rem; min-width: 0; font-size: .95rem; }
.invite-code { margin: .5rem 0 0; color: var(--graphite-2); }
.invite-code b { font-family: var(--font-marker); font-weight: normal; font-size: 1.3rem; letter-spacing: .18em; color: var(--graphite); }

.lobby-slots { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .7rem; }
.lobby-slot {
  padding: .6rem .8rem; border: 2.5px solid currentColor; border-radius: .7rem .4rem .8rem .5rem;
  background: rgba(255, 255, 255, .55); transition: background .2s, opacity .2s;
}
.slot-blue { color: var(--blue); }
.slot-red { color: var(--red); }
.lobby-slot.empty { border-style: dashed; opacity: .7; }
.lobby-slot.mine { box-shadow: 3px 4px 0 rgba(0, 0, 0, .12); }
.lobby-slot.ready { background: rgba(191, 240, 176, .55); }
.slot-title { font-family: var(--font-marker); font-size: 1rem; }
.slot-title small { font-family: var(--font-hand); font-size: .85rem; color: var(--graphite-2); }
.slot-name { font-size: 1.45rem; color: var(--graphite); overflow-wrap: anywhere; }
.lobby-slot.empty .slot-name { font-size: 1.05rem; color: var(--muted); }
.slot-tag { font-size: .9rem; color: var(--graphite-2); min-height: 1.2em; }
.vs { align-self: center; font-family: var(--font-marker); color: var(--graphite-2); }
.lobby-me { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .7rem; }
.lobby-me label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.name-input { width: 11rem; }
.lobby-status { margin: .6rem 0 0; padding: .35rem .6rem; background: rgba(255, 231, 122, .45); border-radius: .4rem; }
.lobby-status.warn { background: rgba(255, 179, 168, .45); }

.presets { margin-bottom: .6rem; }
.rule-group { margin-top: .4rem; }
.rule-group h4, .rule-group summary { font-family: var(--font-marker); font-weight: normal; font-size: 1rem; margin: .3rem 0; color: var(--graphite-2); }
.rule-group summary { cursor: pointer; }
.rule-group summary small { font-family: var(--font-hand); }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 1.2rem; }
.rule { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .15rem .35rem; border-radius: .35rem; }
.rule.changed { background: rgba(255, 231, 122, .6); }
.rule-label { font-size: 1.02rem; }
.stepper { display: inline-flex; align-items: center; gap: .2rem; }
.rule-num { width: 3.4rem; text-align: center; min-height: 1.8rem; padding: .1rem .2rem; -moz-appearance: textfield; }
.rule-num::-webkit-inner-spin-button, .rule-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rule-num:disabled { background: transparent; border-color: transparent; color: var(--graphite); opacity: 1; }
.step {
  width: 1.8rem; height: 1.8rem; padding: 0; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  border: 2px solid var(--graphite); border-radius: 50% 45% 55% 50%; background: var(--paper);
  transition: transform .12s var(--ease-squish);
}
.step:hover { transform: rotate(-6deg) scale(1.08); background: var(--sticky); }
.step:active { transform: scale(.9); }
.step:focus-visible { outline: 2px dashed var(--blue); outline-offset: 2px; }
.rule-bool { cursor: pointer; }
.rule-bool:has(input:disabled) { cursor: default; }

.lobby-foot { position: sticky; bottom: -1.4rem; margin: .4rem -1.8rem -1.4rem -3rem; padding: .8rem 1.8rem 1.1rem 3rem; background: linear-gradient(transparent, var(--paper) 30%); }
.lobby-foot-left { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-start, .btn-ready { min-width: 10rem; }

.lobby-connecting, .lobby-error { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 0; text-align: center; font-size: 1.2rem; }
.lobby-connecting .menu-foot, .lobby-error .menu-foot { align-self: stretch; }
.lobby-error-text { max-width: 30rem; color: var(--red); }
.lobby-spinner { width: 2.6rem; height: 2.6rem; border: 3px solid var(--graphite); border-right-color: transparent; border-radius: 50% 45% 55% 50%; animation: lobbySpin .9s linear infinite; }
@keyframes lobbySpin { to { transform: rotate(360deg); } }

.net-banner {
  position: absolute; left: 50%; top: max(4.2rem, calc(env(safe-area-inset-top) + 3.4rem)); translate: -50% 0; z-index: 26;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: min(36rem, 92vw); padding: .55rem .9rem;
  background: #ffd0c8; color: var(--graphite); border: 2px dashed var(--red); border-radius: .6rem .4rem .7rem .5rem;
  box-shadow: var(--shadow-sm); font-size: 1.05rem;
}

@media (max-width: 560px) {
  .lobby-slots { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .lobby-foot { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .rule-grid { grid-template-columns: 1fr; }
}