/* Dracutaz — landing/lobby wordmark font, subset to just the title + BEGIN glyphs (17KB vs 700KB full) */
@font-face{ font-family:"fDracutaz"; src:url("fonts/Dracutaz-Ink.woff2") format("woff2"); font-display:swap; }

:root {
  --paper:#E6DECF; --paper-2:#EFE9DC; --paper-3:#DCD3C0;
  --ink:#211B16; --ink-soft:#3A322A;
  --indigo:#294060; --indigo-soft:#3B5878;
  --vermil:#C03A2B; --vermil-deep:#9E2C20;
  --ochre:#A9863F; --taupe:#8A7E6A; --hair:#C6BBA4;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ink-dur:1.1s;   /* element-settle base (see reveal()); fade ×1.7, dry ×1.6 */
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--ink); color:var(--ink);
  font-family:var(--sans); display:flex; flex-direction:column; min-height:100%;
}
.hidden { display:none !important; }
/* In a duel, lock the board to the viewport so canvas + hud + chat + menu all fit — no page scroll */
body.playing { height:100dvh; overflow:hidden; overscroll-behavior:none; }
button { font-family:var(--sans); cursor:pointer; }
button:focus-visible, input:focus-visible { outline:3px solid var(--vermil); outline-offset:2px; }

/* ---------------- Lobby ---------------- */
#lobby {
  position:relative;
  flex:1; display:flex; align-items:center; justify-content:center; padding:2rem;
  background:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
}
#galleryC { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.lobby-card { position:relative; z-index:1; width:min(440px,100%); text-align:center; }
.seal {
  width:74px; height:74px; margin:0 auto 1.2rem; display:grid; place-items:center;
  background:var(--vermil); color:var(--paper-2); font-family:var(--serif); font-size:2.4rem;
  border-radius:6px; box-shadow:0 2px 0 var(--vermil-deep), inset 0 0 0 3px rgba(255,255,255,.14);
  transform:rotate(-3deg);
}
.lobby-card h1 { font-family:"fDracutaz",var(--serif); font-size:2.9rem; letter-spacing:.02em; margin:.2rem 0 .1rem;
  color:transparent; background:linear-gradient(180deg,#4a3d31 0%,#251d16 50%,#0d0906 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }   /* Dracutaz + G1 wet dark-ink gradient */
.lobby-card .tag { color:var(--taupe); letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; margin-bottom:2rem; }
.field { text-align:left; margin-bottom:1.1rem; }
.field label { display:block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-bottom:.4rem; }
input[type=text] {
  width:100%; padding:.75rem .9rem; font-size:1rem; font-family:var(--sans);
  border:1px solid var(--hair); border-radius:6px; background:var(--paper-2); color:var(--ink);
}
input.code { text-transform:uppercase; letter-spacing:.4em; font-family:var(--serif); font-size:1.3rem; text-align:center; }
.row { display:flex; gap:.8rem; }
.row > * { flex:1; }
.btn {
  padding:.8rem 1rem; font-size:.98rem; font-weight:600; border-radius:6px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper-2); transition:.15s;
}
.btn:hover { background:var(--ink-soft); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--paper-3); }
.divider { display:flex; align-items:center; gap:1rem; color:var(--taupe); font-size:.75rem; letter-spacing:.2em; margin:1.6rem 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--hair); }
.waiting { margin-top:1.5rem; }
.waiting .code-display { font-family:var(--serif); font-size:3rem; letter-spacing:.3em; color:var(--vermil); }
.waiting .hint { color:var(--taupe); font-size:.9rem; }
.err { color:var(--vermil-deep); font-size:.88rem; min-height:1.2em; margin-top:.6rem; }

/* ===== ink-wash chrome (painted UI) — elements opt in via data-chrome. =====
   layoutInkChrome() sets --ink-bg (a paintChrome bitmap) + a light label for
   filled styles. Non-chrome elements keep their plain styling. See DESIGN-SYSTEM.md. */
[data-chrome] {
  position:relative; z-index:0;
  background:transparent !important; border:none !important; box-shadow:none !important;
}
[data-chrome]::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink-bg) center/100% 100% no-repeat; transition:filter .18s;
}
button[data-chrome]:hover::before { filter:brightness(.9) contrast(1.06); }
button[data-chrome]:active { transform:translateY(1px); }
/* inkframe wraps a text field: brushed frame/underline behind, crisp field on top */
.inkframe input { position:relative; z-index:1; border:none !important; background:transparent !important; }
.inkframe:focus-within::before { filter:brightness(.82) contrast(1.05); }
.inkframe input:focus { outline:none; }
/* character pad gets a brushed dry-brush mount (data-chrome="pad" on the wrapper) */
.charpad-frame { position:relative; padding:8px; }
.charpad-frame #charpad { position:relative; z-index:1; border:none; }
/* base tool button (padding + dark label) — the char-pad Undo/Clear are chrome'd
   frameLite outlines via [data-chrome]; the game toolbar overrides with .tools .tbtn */
.tbtn { padding:.5rem .8rem; border-radius:6px; color:var(--ink); font-size:.85rem; font-weight:600; }

/* ===== ink "settle" reveal — reveal() adds .settle-in to [data-ink] children ===== */
/* The element fades (opacity); a painted ::before also does a wet→dry sharpen.
   No masks — the elements are already real brush ink; the reveal lets them arrive. */
[data-ink].settle-in {
  animation:ink-fade calc(var(--ink-dur,.5s) * 1.7) ease-in-out both;
  animation-delay:var(--ink-delay,0s);
}
.seal[data-ink].settle-in { animation-name:seal-settle; }   /* fade in upright, then tilt */
[data-ink].settle-in::before {
  animation:ink-dry calc(var(--ink-dur,.5s) * 1.6) cubic-bezier(.2,.85,.3,1) both;
  animation-delay:var(--ink-delay,0s);
}
@keyframes ink-fade { from { opacity:0; } to { opacity:1; } }
@keyframes seal-settle {
  0%   { opacity:0; transform:rotate(0deg) scale(1.05); }
  58%  { opacity:1; transform:rotate(0deg) scale(1); }
  100% { opacity:1; transform:rotate(-3deg) scale(1); }
}
@keyframes ink-dry {
  from { transform:scale(1.04); filter:blur(5px) brightness(1.16) contrast(.86) saturate(.88); }
  to   { transform:scale(1);    filter:blur(0)   brightness(1)    contrast(1)   saturate(1); }
}
@media (prefers-reduced-motion:reduce) {
  [data-ink].settle-in, [data-ink].settle-in::before { animation:none; }
}

/* ---------------- Game ---------------- */
#game { flex:1; min-height:0; display:flex; flex-direction:column; max-width:1000px; width:100%; margin:0 auto; padding:.6rem; gap:.5rem; }

.hud { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.7rem .9rem; }
.hud-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--paper); }
.ptag { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; }
.ptag .dot { width:12px; height:12px; border-radius:3px; }
.ptag.p0 .dot { background:var(--paper); }
.ptag.p1 .dot { background:var(--indigo-soft); }
.ptag .sc { font-variant-numeric:tabular-nums; color:var(--paper); opacity:.85; }
.timer { font-family:var(--serif); font-size:1.7rem; color:var(--vermil); font-variant-numeric:tabular-nums; }
.timer.low { animation:pulse .8s infinite; }
@keyframes pulse { 50% { opacity:.4; } }

/* score bar — canvas flowing ink (see tugFrame in app.js) */
.tug { position:relative; height:42px; margin-top:.7rem; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.34); box-shadow:inset 0 2px 6px rgba(0,0,0,.4); }
.tug canvas { display:block; width:100%; height:100%; }
.tug .seal { position:absolute; top:50%; transform:translate(-50%,-50%); width:24px; height:24px; display:grid; place-items:center;
  background:var(--vermil); color:var(--paper-2); font-family:var(--serif); font-size:.85rem; border-radius:5px; box-shadow:0 1px 0 var(--vermil-deep), 0 2px 8px rgba(0,0,0,.45); z-index:2; }

.wordbar { text-align:center; color:var(--paper); padding:.3rem 0 .1rem; }
.wordbar .role { font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe); }
.wordbar .word { font-family:var(--serif); font-size:1.9rem; letter-spacing:.35em; margin-top:.15rem; }
.wordbar .word.secret { color:var(--vermil); letter-spacing:.06em; }

.stage { position:relative; background:var(--paper); border-radius:8px; overflow:hidden; display:flex; max-width:100%; max-height:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>"); }
/* canvas sizes to the SMALLER of available width/height, keeping its 4:3 (replaced-element sizing) */
.stage canvas { display:block; max-width:100%; max-height:100%; width:auto; height:auto; touch-action:none; cursor:crosshair; }
.stage.watching canvas { cursor:default; }

/* character fighters flanking the stage (wide screens only) */
.arena { position:relative; width:100%; flex:1 1 0; min-height:0; display:flex; align-items:stretch; justify-content:center; }
.fighter {
  position:absolute; top:50%; transform:translateY(-50%); margin:0;
  width:min(160px, calc((100vw - 1004px) / 2 - 20px));
  text-align:center; pointer-events:none; user-select:none; display:none;
  --_ink:var(--taupe);
}
.fighter.fL { right:100%; margin-right:16px; }
.fighter.fR { left:100%;  margin-left:16px; }
.fighter.ready { display:block; }
@media (max-width:1180px) { .fighter { display:none !important; } }

.fighter .fig-art {
  width:100%; aspect-ratio:1; border-radius:12px;
  background-color:var(--paper-3); border:2px solid var(--hair);
  background-size:80% 80%; background-position:center; background-repeat:no-repeat;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:2.6rem; color:var(--taupe); opacity:.92;
  transition:transform .35s cubic-bezier(.2,1.1,.4,1), box-shadow .35s, border-color .35s, background-color .35s, opacity .35s;
}
.fighter figcaption {
  margin-top:.55rem; font-size:.82rem; font-weight:600; color:var(--taupe);
  letter-spacing:.03em; line-height:1.25;
}
.fighter .turn {
  display:none; margin-top:.15rem;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--vermil);
}
.fighter .turn::before { content:"筆 "; font-family:var(--serif); }

/* active drawer — full colour on brighter paper, their ink, lifted */
.fighter.active .fig-art {
  background-color:var(--paper-2); border-color:var(--_ink); opacity:1;
  box-shadow:0 0 0 1px var(--_ink), 0 14px 34px -14px var(--_ink);
  transform:scale(1.05);
}
.fighter.active figcaption { color:var(--paper); }
.fighter.active .fig-name { color:var(--_ink); }
.fighter.active .turn { display:block; }

@media (prefers-reduced-motion:reduce) { .fighter .fig-art { transition:none; } }

/* ===== game-screen ink chrome (Phase 2): brushed frames painted in the gutter ===== */
/* drawing-canvas mount — data-chrome="mountLight" paints a stone sho frame; the tight
   6px gutter lets the stroke hug the canvas (see DESIGN-SYSTEM.md §5). */
.stage-frame { position:relative; padding:6px; max-width:100%; max-height:100%; display:flex; align-items:stretch; justify-content:center; }
.stage-frame .stage { position:relative; z-index:1; }
/* fighter portrait mount — painted dynamically by paintFighterFrames (--ink-bg) */
.fig-frame { position:relative; padding:6px; transition:transform .35s cubic-bezier(.2,1.1,.4,1); }
.fig-frame::before { content:""; position:absolute; inset:0; z-index:0; background:var(--ink-bg) center/100% 100% no-repeat; }
.fig-frame .fig-art { position:relative; z-index:1; border:none; }
.fighter.active .fig-frame { transform:scale(1.05); }
.fighter.active .fig-art { transform:none; border:none; }   /* scale lives on the frame; brush = the edge */
/* in-game Guess button = wash fill in the guesser's ink (painted by paintGuessButton) */
/* in-game Guess button = wash fill painted into a ::before (stretched to fill, like all
   chrome) — a direct background didn't scale (bg-size auto → wrong on hi-DPI). */
#guessBtn { position:relative; z-index:0; background:transparent !important; border:none !important; color:var(--paper-2); }
#guessBtn::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--ink-bg) center/100% 100% no-repeat; }
.guessrow .inkframe { flex:1; }
.guessrow input { color:var(--paper-2); }
.guessrow input::placeholder { color:var(--taupe); }

/* controls strip: reserved fixed height so the canvas never resizes between phases,
   and capped to the canvas width (set by JS as --canvas-w) so tools/guess sit under the canvas */
#controls { width:100%; max-width:var(--canvas-w, 100%); margin:0 auto; height:4.7rem; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }   /* FIXED height → canvas never resizes; capped to canvas width */
.tools { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; justify-content:center; width:100%; }
.tools .brush { width:31px; height:31px; border-radius:6px; border:1px solid var(--hair); background:var(--paper-2); display:grid; place-items:center; }
.tools .brush .dab { border-radius:50%; background:var(--ink); }
.tools .brush.active { outline:2px solid var(--vermil); }
.tools .tbtn { padding:.4rem .6rem; border-radius:6px; border:1px solid var(--hair); background:var(--paper-2); color:var(--ink); font-size:.8rem; font-weight:600; }
.tools .tbtn:hover { background:var(--paper-3); }
.tools .spacer { flex:1; }

.guessrow { display:flex; gap:.6rem; width:100%; }
.guessrow input { flex:1; }
.guessrow .btn { flex:none; padding-inline:1.4rem; }

/* chat log: FIXED height so clearing/growing it never reflows the page (no scroll jump);
   persists across the whole match with round dividers + results */
.feed { list-style:none; margin:0; padding:.4rem .5rem; height:118px; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem;
  border-top:1px solid var(--hair); scrollbar-width:thin; }
.feed li { color:var(--paper); font-size:.9rem; opacity:.85; }
.feed li b { color:var(--indigo-soft); }
.feed li.warm { color:var(--ochre); opacity:.62; }   /* 2 letters off — getting warm */
.feed li.close { color:var(--ochre); opacity:1; }     /* 1 letter off — so close */
.feed li.system { color:var(--vermil); font-style:italic; }
.feed li.divider { align-self:center; opacity:.4; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin:.25rem 0 .1rem; }
.feed li.result { opacity:1; font-weight:600; }
.feed li.result b { color:var(--paper); }

/* ---------------- Overlay ---------------- */
.overlay { position:fixed; inset:0; background:rgba(20,16,12,.78); display:flex; align-items:center; justify-content:center; z-index:50; padding:1.5rem; }
/* match-end spectacle canvases: ink floods the screen BEHIND the card, and stays */
.overlay #endfill, .overlay #slash { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none; z-index:0; }
.overlay .panel { position:relative; z-index:1; background:var(--paper); color:var(--ink); border-radius:12px; padding:2.2rem 2rem; text-align:center; width:min(460px,100%); box-shadow:0 30px 80px -30px #000; }
.overlay h2 { font-family:var(--serif); font-size:2rem; margin:.2rem 0 .3rem; }
/* match-end: a short accent bar under the title, in the outcome's ink (win/lose/draw) */
.panel.matchend h2::after { content:""; display:block; width:2.6rem; height:3px; margin:.5rem auto -.1rem; border-radius:2px; background:var(--out,var(--vermil)); opacity:.92; }
.overlay .reveal { color:var(--taupe); }
.overlay .reveal b { color:var(--vermil); font-family:var(--serif); font-size:1.3rem; }
.overlay .pts { display:flex; justify-content:center; gap:2rem; margin:1.3rem 0 .4rem; }
.overlay .pts div { font-size:.85rem; color:var(--taupe); }
.overlay .pts b { display:block; font-family:var(--serif); font-size:1.8rem; color:var(--ink); }
/* match-end buttons: Exit (ghost) + Rematch, with an accept-pulse when the rival asks */
.overlay .endbtns { display:flex; gap:.6rem; margin-top:1.2rem; }
.overlay .endbtns .btn { flex:1; }
.overlay .endbtns #rematchBtn { flex:1.5; }
.overlay .endnote { margin-top:.55rem; min-height:1.1em; color:var(--taupe); font-size:.85rem; }
.btn.pulse { animation:btnpulse 1.15s ease-in-out infinite; }
@keyframes btnpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(192,58,43,.55); } 50%{ box-shadow:0 0 0 7px rgba(192,58,43,0); } }
.btn[disabled] { opacity:.6; cursor:default; }

/* in-game menu (☰): restart / new settings / leave, plus proposal prompts */
.gmenu { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(20,16,12,.72); }
.gmenu-card { position:relative; background:var(--paper); color:var(--ink); border-radius:12px; padding:1.8rem 1.6rem; width:min(440px,100%); max-height:86vh; overflow:auto; box-shadow:0 30px 80px -30px #000; text-align:center; }
.gmenu-x { position:absolute; top:.5rem; right:.7rem; background:none; border:none; font-size:1.1rem; color:var(--taupe); cursor:pointer; line-height:1; }
.gmenu-x:hover { color:var(--ink); }
.gmenu-title { font-family:var(--serif); font-size:1.5rem; margin:.2rem 0 1.1rem; }
.gm-item { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; margin-bottom:.7rem; }
.gm-item .gm-sub { font-size:.72rem; font-weight:500; color:var(--taupe); }
.gm-item.danger { color:var(--vermil); }
.gmenu-msg { color:var(--taupe); margin:.4rem 0 1.2rem; min-height:1.2em; }
#gmSettingsHost { text-align:left; }
#gmSettingsHost #setupSettings > div { margin-top:.5rem; }
.overlay .win-seal { width:88px; height:88px; margin:0 auto 1rem; display:grid; place-items:center; background:var(--vermil); color:var(--paper-2); font-family:var(--serif); font-size:3rem; border-radius:8px; box-shadow:0 3px 0 var(--vermil-deep); transform:rotate(-4deg); }

/* ===== overlay ink-burst (solved / victory) — two player-ink splats pop behind the
   card + scattered droplets land on the scrim (see burstOverlay/spatterBurst in app.js) */
.overlay .vsplat {
  position:absolute; width:min(620px,92vw); aspect-ratio:1; left:50%; top:50%; display:none;
  transform:translate(-50%,-50%) rotate(8deg) scale(var(--vs,1)); background:rgb(var(--rival,192,58,43)); opacity:.92;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  filter:drop-shadow(0 0 9px rgba(238,233,220,.4));   /* paper halo so dark inks read on the scrim */
  animation:splat-pop .42s cubic-bezier(.2,.8,.3,1) both; animation-delay:.06s;
}
.overlay .vsplat.back {
  width:min(760px,104vw); transform:translate(-50%,-50%) rotate(-11deg) scale(var(--vs,1));
  background:rgb(var(--rival-deep,158,44,32)); opacity:.55; animation-duration:.5s; animation-delay:0s;
}
@keyframes splat-pop { from { -webkit-mask-size:0% 0%; mask-size:0% 0%; } to { -webkit-mask-size:100% 100%; mask-size:100% 100%; } }
.overlay .spatter { position:absolute; inset:0; pointer-events:none; }
.overlay .mark {
  position:absolute; aspect-ratio:1;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  animation:splat-pop .5s cubic-bezier(.2,.8,.3,1) both;
}
.overlay .mark.plate { background:rgba(238,233,220,.24); filter:blur(4px); }   /* paper plate under dark inks */
@keyframes ko-shake { 0%,100%{transform:none} 18%{transform:translate(-6px,4px)} 38%{transform:translate(6px,-4px)} 58%{transform:translate(-5px,-5px)} 78%{transform:translate(4px,4px)} }
.overlay.shake { animation:ko-shake .34s ease-in-out; }
@media (prefers-reduced-motion:reduce) { .overlay .vsplat, .overlay .mark { animation:none; } }

/* full-screen ink flood transition (see inkTransition in app.js) */
#inkwipe { position:fixed; inset:0; width:100%; height:100%; z-index:90; pointer-events:none; display:none; }

/* live ink-brush cursor */
/* interactive surfaces hide the OS cursor so the ink brush cursor stands in for it */
#game .btn, #game .tbtn, #game .bstyle, #game .brush, #game #guessBtn,
#lobby .btn, #lobby .tbtn, #lobby .bstyle, #lobby .brush, #lobby .cat, #lobby .inkchip:not(.taken) { cursor:none; }
#brushcur { position:fixed; left:0; top:0; width:72px; height:72px; z-index:70; pointer-events:none; display:none; will-change:transform; }
#brushcur .cur-svg { position:absolute; left:0; top:0; width:72px; height:72px; transform-origin:16px 54px; transition:transform .05s linear; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
#brushcur .cur-svg svg { display:block; }
#brushcur .bring { position:absolute; left:16px; top:54px; transform:translate(-50%,-50%); border:1.5px dashed rgba(33,27,22,.28); border-radius:50%; }

/* ---------------- Splash (pre-lobby gate) ---------------- */
@property --sp-angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --sp-fill1{ syntax:"<color>"; initial-value:#2c241d; inherits:false; }
@property --sp-fill2{ syntax:"<color>"; initial-value:#181310; inherits:false; }
#splash { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1.5rem;
  background:radial-gradient(130% 120% at 50% 8%, #241d16 0%, #17120d 55%, #100c08 100%); }
.sp-inner { display:flex; flex-direction:column; align-items:center; gap:1.05rem; }
.sp-brand { display:flex; flex-direction:column; align-items:center; gap:.6rem; opacity:0; transition:opacity 1.1s; }
.sp-seal { width:60px; height:60px; display:grid; place-items:center; border-radius:8px; background:var(--vermil); color:#F3ECDD;
  font-family:var(--serif); font-size:2rem; box-shadow:0 2px 0 var(--vermil-deep), inset 0 0 0 3px rgba(255,255,255,.14); transform:rotate(-3deg); }
.sp-brand.lit .sp-seal { animation:sp-seal-settle 1.1s cubic-bezier(.2,.85,.3,1) both; }
@keyframes sp-seal-settle { 0%{opacity:0;transform:rotate(0deg) scale(1.06);} 58%{opacity:1;transform:rotate(0deg) scale(1);} 100%{opacity:1;transform:rotate(-3deg) scale(1);} }
.sp-title { font-family:"fDracutaz",var(--serif); font-weight:600; margin:0; font-size:clamp(2.4rem,7vw,4rem); letter-spacing:.02em; line-height:1;
  color:transparent; background:linear-gradient(178deg,#fdf6e6 0%,#ece0c4 50%,#c3b590 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sp-tag { font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:#C6BBA4; }
.sp-uline { display:block; width:min(620px,60vw); height:26px; }
.sp-begin { cursor:pointer; font-family:"fDracutaz",var(--serif); font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; color:#F1E9D8;
  --sp-fill1:#2c241d; --sp-fill2:#181310; padding:.72rem 2.2rem; border:2.5px solid transparent; border-radius:11px; position:relative; box-sizing:border-box;
  background:linear-gradient(168deg,var(--sp-fill1),var(--sp-fill2)) padding-box,
    conic-gradient(from var(--sp-angle,0deg), var(--ink) 0deg, var(--ink) 210deg, var(--vermil) 250deg, #f0795c 272deg, var(--vermil) 294deg, var(--ink) 334deg, var(--ink) 360deg) border-box;
  box-shadow:0 3px 0 #0c0906, 0 0 22px rgba(192,58,43,.26); animation:sp-rotate 3.6s linear infinite;
  transition:transform .18s ease, box-shadow .2s ease, --sp-fill1 .32s ease, --sp-fill2 .32s ease, color .32s ease, opacity .55s ease; }
.sp-begin:hover { --sp-fill1:#d1503c; --sp-fill2:#9E2C20; color:#FDF3E6; transform:translateY(-2px); box-shadow:0 5px 0 #0c0906, 0 0 36px rgba(192,58,43,.55); }
@keyframes sp-rotate { to { --sp-angle:360deg; } }
@media (prefers-reduced-motion:reduce) { .sp-begin { animation:none; } .sp-brand.lit .sp-seal { animation:none; } }
/* gate */
.sp-gate { position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:rgba(10,8,5,.72); backdrop-filter:blur(2px); }
.sp-gate-card { width:min(340px,88%); background:var(--paper); color:var(--ink); border-radius:14px; padding:1.4rem 1.5rem 1.5rem; box-shadow:0 24px 60px rgba(0,0,0,.6); text-align:left; }
.sp-gate-title { font-family:var(--serif); font-size:1.5rem; margin-bottom:.15rem; }
.sp-gate-sub { font-size:.82rem; color:var(--taupe); margin:0 0 .4rem; }
.sp-gate-lbl { display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin:.8rem 0 .35rem; }
.sp-cap-row { display:flex; align-items:center; gap:8px; }
.sp-cpc { width:160px; height:46px; border-radius:6px; border:1px solid var(--hair); background:#efe9dc; display:block; }
#spCpcRef { width:34px; height:34px; flex:none; border-radius:6px; border:1px solid var(--hair); background:var(--paper-2); color:var(--ink); cursor:pointer; font-size:1rem; }
#spCpcRef:hover { background:var(--paper-3); }
.sp-gate input.sp-gate-in { width:100%; padding:.6rem .7rem; font-size:1rem; font-family:var(--sans); border:1px solid var(--hair); border-radius:6px;
  background:var(--paper-2); color:var(--ink); text-transform:none; letter-spacing:.02em; text-align:left; }
.sp-gate input.sp-gate-in:focus { outline:2px solid var(--vermil); outline-offset:1px; }
#spCpcIn { text-transform:uppercase; letter-spacing:.12em; font-weight:600; }   /* captcha typed in caps to match the code */
#spCpcIn::placeholder { text-transform:none; letter-spacing:normal; font-weight:400; }
.sp-gate-err { color:var(--vermil-deep); font-size:.8rem; min-height:1.1em; margin:.6rem 0 0; }
.sp-gate-btns { display:flex; gap:.6rem; margin-top:.9rem; }
.sp-gate-btns button { flex:1; padding:.6rem; border-radius:7px; font-weight:600; font-size:.9rem; cursor:pointer; font-family:var(--sans); }
#spGateCancel { background:transparent; border:1px solid var(--ink); color:var(--ink); }
#spGateCancel:hover { background:var(--paper-3); }
#spGateGo { background:var(--ink); border:1px solid var(--ink); color:var(--paper-2); }
#spGateGo:hover { background:var(--ink-soft); }

/* identity — ink swatches */
/* ink-gate: the first, gated setup step — the picker glows until a choice is made */
#inkStep { text-align:center; }
.inks { display:inline-flex; flex-wrap:wrap; gap:.6rem; justify-content:center; padding:.45rem .6rem; border-radius:16px; vertical-align:middle; }
.inks.glow { animation:inkpulse 1.9s ease-in-out infinite; }
@keyframes inkpulse {
  0%,100% { box-shadow:0 0 0 0 rgba(192,58,43,0); }
  50% { box-shadow:0 0 0 5px rgba(192,58,43,.12), 0 0 20px 3px rgba(192,58,43,.22); }
}
.ink-hint { color:var(--vermil); font-size:.8rem; margin-top:.6rem; letter-spacing:.02em; }
@media (prefers-reduced-motion:reduce) { .inks.glow { animation:none; box-shadow:0 0 0 3px rgba(192,58,43,.18); } }
.inkchip {
  width:42px; height:42px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  position:relative; transition:transform .12s; padding:0; outline-offset:3px;
}
.inkchip::after {
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--_c);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25);
}
.inkchip:hover { transform:translateY(-2px); }
.inkchip.active { border-color:var(--vermil); }
.inkchip.taken { cursor:not-allowed; opacity:.32; }
.inkchip.taken::before {
  content:"✕"; position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  color:var(--paper-2); font-size:1.1rem; font-weight:700;
}

/* identity — character pad */
.charpad-wrap { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
#charpad {
  width:min(240px,70vw); height:auto; aspect-ratio:1; border-radius:10px; border:1px solid var(--hair);
  background:var(--paper-2); touch-action:none; cursor:crosshair;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}
.charpad-tools { display:flex; gap:.6rem; }

/* HUD avatars */
.avatar {
  width:30px; height:30px; border-radius:7px; border:2px solid var(--paper); display:inline-block; vertical-align:-9px;
  background-color:var(--paper); background-size:cover; background-position:center; background-repeat:no-repeat;
  display:inline-grid; place-items:center; font-family:var(--serif); font-size:.95rem; color:var(--ink); overflow:hidden;
  transition:opacity .3s, box-shadow .3s;
}
.avatar.active { box-shadow:0 0 0 2px rgba(255,255,255,.28); }
.avatar.muted { opacity:.45; }

/* character stamp on the round-solve overlay */
.charstamp { background:var(--paper-2) !important; overflow:hidden; border:3px solid var(--vermil); }
.charstamp img { width:100%; height:100%; object-fit:contain; }
@keyframes stampin { 0% { transform:rotate(-14deg) scale(2.4); opacity:0; } 60% { opacity:1; } 100% { transform:rotate(-4deg) scale(1); opacity:1; } }
.stamped { animation:stampin .45s cubic-bezier(.2,1.3,.4,1) both; }

/* setup — category chips */
.cats { display:flex; flex-wrap:wrap; gap:.5rem; }
.cat {
  padding:.5rem .85rem; border-radius:20px; border:1px solid var(--hair); background:var(--paper-2);
  color:var(--ink-soft); font-size:.85rem; font-weight:600; transition:.15s; cursor:pointer;
}
.cat:hover { border-color:var(--ink); }
.cat.active { background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.cat .bk { margin-right:.25rem; opacity:.85; }

/* match settings (host setup) */
#modeBlock { margin-top:.2rem; }
#modeHint { margin-top:.45rem; }
.adv-toggle { margin-top:1rem; background:none; border:none; color:var(--ink-soft); font-size:.85rem; font-weight:600; cursor:pointer; letter-spacing:.03em; }
.adv-toggle:hover { color:var(--ink); }
.adv-caret { display:inline-block; margin-left:.15rem; }
.adv { margin-top:.7rem; display:flex; flex-direction:column; gap:.85rem; padding:.9rem; border:1px solid var(--hair); border-radius:10px; background:var(--paper-2); text-align:left; }
.setrow { display:flex; flex-direction:column; gap:.4rem; }
.setlbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); }
.seg { gap:.4rem; }
.seg .cat { padding:.35rem .7rem; font-size:.8rem; }
.settoggle { display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; color:var(--ink-soft); cursor:pointer; line-height:1.35; }
.settoggle input { margin-top:.15rem; accent-color:var(--ink); cursor:pointer; }
.settoggle b { color:var(--ink); font-weight:700; }
#handiBlock { border-top:1px solid var(--hair); padding-top:.6rem; display:flex; flex-direction:column; gap:.6rem; }
#handiBlock .tag { margin:0 0 .1rem !important; }

/* "Ink in Eyes" — the drawer paints blind onto a field of the rival's ink */
#blindveil { position:absolute; inset:0; z-index:2; pointer-events:none; }

/* brush-style selector */
.bstyles { display:flex; gap:.3rem; }
.bstyle {
  display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1;
  padding:.3rem .42rem; border-radius:6px; border:1px solid var(--hair); background:var(--paper-2);
  color:var(--ink-soft); font-size:.56rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.bstyle .bk { font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.bstyle:hover { background:var(--paper-3); }
.bstyle.active { outline:2px solid var(--vermil); background:var(--paper-2); }
.tsep { width:1px; align-self:stretch; background:var(--hair); margin:0 .2rem; }

/* word choice */
.choices { display:flex; flex-direction:column; gap:.7rem; margin:1.4rem 0 .6rem; }
.choice {
  padding:.85rem 1rem; border-radius:8px; border:1px solid var(--hair); background:var(--paper-2);
  color:var(--ink); font-family:var(--serif); font-size:1.35rem; transition:.15s; text-transform:capitalize;
}
.choice:hover { background:var(--ink); color:var(--paper-2); border-color:var(--ink); }
.pickcount { color:var(--taupe); font-size:.85rem; font-variant-numeric:tabular-nums; }
.overlay .waitword { font-family:var(--serif); font-size:1.5rem; color:var(--vermil); margin:.6rem 0; }

/* disconnect banner */
.discon .win-seal { background:var(--taupe); box-shadow:0 3px 0 #6f6552; }
.discon .bignum { font-family:var(--serif); font-size:2.4rem; color:var(--vermil); font-variant-numeric:tabular-nums; }

/* ---- entry-screen music control — compact, pinned bottom-left (lobby only) ---- */
.bg-audio { position:fixed; left:14px; bottom:14px; z-index:6; display:flex; align-items:center; gap:.35rem;
  padding:.26rem .4rem; border:1px solid var(--hair); border-radius:16px;
  background:rgba(239,233,220,.72); backdrop-filter:blur(3px); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.bg-audio .bg-mute { flex:none; width:24px; height:24px; padding:0; border:0; border-radius:50%; display:inline-grid; place-items:center;
  background:transparent; line-height:0; cursor:pointer; color:var(--ink); }
.bg-audio .bg-mute svg { display:block; }
.bg-audio .bg-mute:hover { background:var(--paper-3); }
.bg-audio .bg-mute.muted { opacity:.5; }
.bg-audio .bg-vol { flex:none; width:70px; accent-color:var(--vermil); cursor:pointer; height:3px; }
/* in-game copy of the audio control: inline in the actions bar (not fixed), pushed to the left */
.bg-audio.inline { position:static; left:auto; bottom:auto; z-index:auto; margin-right:auto; }

/* ---- in-game actions: pause the round timer / leave the duel ---- */
.game-actions { display:flex; justify-content:flex-end; gap:.5rem; }
.gbtn { padding:.34rem .8rem; font-size:.78rem; font-weight:600; letter-spacing:.04em; cursor:pointer;
  color:var(--paper); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:6px; transition:.15s; }
.gbtn:hover { background:rgba(255,255,255,.14); }
.gbtn.danger { color:#e7b0a5; border-color:rgba(192,58,43,.5); }
.gbtn.danger:hover { background:rgba(192,58,43,.22); color:#f3d3cc; }
.gbtn.active { color:var(--paper); background:rgba(169,134,63,.28); border-color:rgba(169,134,63,.55); }
.timer.paused { color:var(--taupe); }
.timer.paused::after { content:" ⏸"; font-size:.9rem; color:var(--ochre); }

@media (prefers-reduced-motion:reduce) { .tug .fill, .tug .seal { transition:none; } .timer.low { animation:none; } }

/* ---------------- Mobile / small screens (portrait phones) ---------------- */
/* The game screen was built desktop-first. On narrow screens the fixed-height
   controls strip clipped the toolbar (6 styles + 3 sizes + undo/clear); here we
   let it grow to fit, enlarge tap targets, and reclaim vertical space so the
   canvas stays usable. Side fighters are already hidden (max-width:1180px). */
@media (max-width:760px) {
  #game { padding:.4rem; gap:.35rem; }

  /* HUD: tighter, smaller timer/avatars so the board gets more height */
  .hud { padding:.5rem .6rem; }
  .hud-top { gap:.6rem; }
  .ptag { font-size:.82rem; gap:.35rem; }
  .avatar { width:24px; height:24px; vertical-align:-6px; }
  .timer { font-size:1.4rem; }
  .tug { height:32px; margin-top:.5rem; }

  .wordbar { padding:.2rem 0 0; }
  .wordbar .word { font-size:1.5rem; letter-spacing:.28em; }

  /* Controls strip: let the toolbar wrap to 2 rows instead of clipping.
     The 6 brush styles take their own full-width row; sizes + undo/clear wrap
     to the next row (otherwise flexbox greedily crams sizes onto row 1 and they
     overflow off-screen). The vertical separator is pointless once rows split. */
  #controls { height:auto; min-height:4.7rem; overflow:visible; }
  .tools { gap:.35rem .3rem; }
  /* styles own a full-width row and may wrap internally (3+3) on very narrow
     screens rather than clipping the last button */
  .tools .bstyles { flex-basis:100%; flex-wrap:wrap; justify-content:center; gap:.3rem; }
  .tools .tsep { display:none; }
  .tools .brush { width:34px; height:34px; }
  .tools .tbtn { padding:.45rem .7rem; font-size:.82rem; }
  .bstyle { padding:.34rem .45rem; min-width:36px; }

  /* Chat feed: shorter so the canvas keeps more of the viewport */
  .feed { height:72px; }

  /* Compact the in-game action buttons */
  .game-actions { gap:.35rem; }
  .gbtn { padding:.3rem .6rem; font-size:.72rem; }
}