/* מי נופל — a kindergarten kid's spiral notebook, drawn in crayons and markers.
   Wooden table, lined paper (blue rules, red margin on the right because RTL, spiral on the right edge), sticky notes and
   taped cut-outs with wobbly crayon outlines. Wobble + wax grain come from the SVG filters #crayon/#crayon2/#crayon3 in
   index.html, applied to ::before "backings" so the text itself stays sharp. RTL, mobile first. */
:root {
  --ink: #2e2440; --ink-2: #4a3f5e; --muted: #6a5f7a;
  --wood: #d9a96e; --wood-d: #b8844d;
  --paper: #fffdf2; --paper-w: #fffef8; --paper2: #f6edd2; --rule: rgba(110, 160, 220, .55); --margin: rgba(226, 92, 104, .85);
  /* crayon box */
  --red: #e0443e; --orange: #f08a24; --yellow: #f4c534; --green: #5aae3c; --lime: #b9d63a; --blue: #3b82d6; --pink: #ee6aa7;
  --purple: #7b45c2; --purple-d: #4a2589; --purple-l: #dcc8f5; --lime-l: #e6f2a6; --lime-d: #7f9a14;
  --yellow-l: #fff0a8; --red-d: #a52620; --blue-d: #1f55a0; --green-d: #357a1e; --pink-d: #b83a7c; --orange-d: #b5620f;
  --f-head: "Playpen Sans Hebrew", "Rubik", sans-serif;
  --f-body: "Rubik", sans-serif;
  --f-btn: "Playpen Sans Hebrew", "Rubik", sans-serif;
  --f-small: "Rubik", "Varela Round", sans-serif;
  --wob: 11px 15px 10px 16px / 15px 10px 16px 11px;
  --wob2: 16px 10px 15px 11px / 10px 16px 11px 15px;
  --spiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cellipse cx='22' cy='15' rx='6.5' ry='5.5' fill='%235a3d28'/%3E%3Cellipse cx='21' cy='14' rx='4' ry='3' fill='%2338261a'/%3E%3Cpath d='M3 22 Q18 24 34 7' fill='none' stroke='%238b919c' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M3 21 Q18 22.500 34 6' fill='none' stroke='%23eef0f4' stroke-width='1.200' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-bg:
    var(--spiral) right top / 34px 30px repeat-y,
    linear-gradient(to left, transparent 49px, var(--margin) 49px 51px, transparent 51px),
    repeating-linear-gradient(to bottom, transparent 0 29px, var(--rule) 29px 30px) 0 18px,
    var(--paper);
  --gut: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-body); color: var(--ink); font-size: 16px; line-height: 1.45; overscroll-behavior: none;
  /* the wooden table around the notebook */
  background-color: var(--wood);
  background-image: repeating-linear-gradient(92deg, rgba(120, 70, 20, .06) 0 3px, transparent 3px 11px, rgba(255, 235, 190, .08) 11px 13px, transparent 13px 27px);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--f-head); font-weight: 700; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-head); letter-spacing: .1em; direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; justify-content: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .inp { flex: 1; min-width: 0; }

/* ---- labels: little strips of washi tape ---- */
.kicker, .set-l, .av-l, .rev-l, .mand-tag {
  font-family: var(--f-body); font-size: 13px; color: var(--ink); background: rgba(244, 197, 52, .8); padding: 1px 14px; width: fit-content; transform: rotate(-1.5deg);
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.set-l { background: rgba(130, 195, 245, .75); }
.av-l { background: rgba(244, 150, 190, .7); }
.rev-l { background: rgba(150, 215, 120, .75); }
.kicker { justify-self: center; }
.lbl { display: grid; gap: 6px; font-family: var(--f-body); font-size: 15px; color: var(--ink-2); }

/* ---- titles: written with a fat crayon ---- */
.balloon, .logo h1, .panel h2, .card-pop h2, .sc b, .timer, .bigcode { font-family: var(--f-head); font-weight: 700; color: var(--purple); }
.logo h1 {
  font-size: clamp(54px, 15vw, 80px); line-height: 1.15; transform: rotate(-2.5deg); display: inline-block; justify-self: center; padding: 0 10px;
    background: linear-gradient(transparent 64%, rgba(244, 197, 52, .75) 64% 90%, transparent 90%);
}
.panel h2, .card-pop h2 {
  font-size: 26px; line-height: 1.2; padding-bottom: 8px; color: var(--purple); width: fit-content; max-width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8'%3E%3Cpath d='M0 5 Q4.500 0 9 4 T18 4 T27 4 T36 4' fill='none' stroke='%23ee6aa7' stroke-width='2.600' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom / 36px 8px;
}
.card-pop h2 { justify-self: center; }
.card-pop h2.win { color: var(--green-d); }
.card-pop h2.lose { color: var(--red); }
.sc b { font-size: 24px; color: var(--ink); }
.timer { font-size: 26px; font-family: var(--f-btn); padding: 0 12px; direction: ltr; color: var(--ink); background: var(--yellow-l); border-radius: var(--wob); border: 3px solid var(--orange); transform: rotate(2deg); line-height: 1.1; }
.timer.urgent { color: var(--red); border-color: var(--red); background: #ffe1dc; animation: shake .3s infinite alternate; }
.timer.panic { animation: panic .12s infinite alternate; }
@keyframes panic { from { transform: rotate(-6deg) scale(1.08) translateX(-2px); } to { transform: rotate(6deg) scale(1.16) translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .timer.urgent, .timer.panic { animation: none; } }
.timer.paused { color: var(--muted); font-size: 16px; font-family: var(--f-body); border-color: var(--muted); background: var(--paper); }
@keyframes shake { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.bigcode { font-size: 54px; line-height: 1.2; padding: 0 26px; color: var(--purple); background: linear-gradient(transparent 60%, rgba(244, 197, 52, .7) 60% 88%, transparent 88%); }

/* ---- crayon backings: every box is a ::before with a wobbly coloured outline ---- */
.panel, .sheet, .card-pop, .drawer, .banner, .invite, .toast, .btn, .linkbtn, .pchip, .pcard, .rev, .sc, .conn {
  position: relative; isolation: isolate; color: var(--ink);
  --fill: var(--paper-w); --stroke: var(--ink-2); --r: var(--wob); --rot: 0deg; --bw: 3px; --cf: url(#crayon);
  --shd: 2px 4px 0 rgba(90, 55, 20, .16);
}
.panel::before, .sheet::before, .card-pop::before, .drawer::before, .banner::before, .invite::before, .toast::before, .btn::before, .linkbtn::before, .pchip::before, .pcard::before, .rev::before, .sc::before, .conn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fill); border: var(--bw) solid var(--stroke); border-radius: var(--r);
  transform: rotate(var(--rot)); filter: var(--cf); box-shadow: var(--shd); transition: transform .12s;
}
.panel:nth-child(2n), .pcard:nth-child(2n), .pchip:nth-child(2n), .btn:nth-child(2n) { --cf: url(#crayon2); --r: var(--wob2); }
.panel:nth-child(3n), .btn:nth-child(3n) { --cf: url(#crayon3); }

/* ---- buttons: crayon-coloured scribbled shapes ---- */
.btn {
  --c: var(--green); --d: var(--green-d); --fg: #fff; --fill: var(--c); --stroke: var(--d); --bw: 3px; --shd: 2px 4px 0 rgba(60, 35, 10, .28);
  appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--f-btn); font-weight: 700; font-size: 19px; line-height: 1.2;
  padding: 9px 24px; color: var(--fg); text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.btn:hover:not(:disabled) { animation: wiggle .45s; }
.btn:hover:not(:disabled)::before { transform: rotate(calc(var(--rot) - 1.5deg)) scale(1.04); }
.btn:active:not(:disabled)::before { transform: translateY(2px) rotate(var(--rot)) scale(.96); box-shadow: none; }
@keyframes wiggle { 25% { transform: rotate(-1.6deg); } 60% { transform: rotate(1.4deg); } }
.btn:focus-visible, .linkbtn:focus-visible, .chip:focus-visible, .segb:focus-visible, .tool:focus-visible, .x:focus-visible, .arr:focus-visible, .tab:focus-visible, .pcard-pw:focus-visible { outline: 3px dashed var(--blue); outline-offset: 3px; }
.btn:disabled { --c: #d9d2bf; --d: #b3a98f; --fg: #8d836f; cursor: not-allowed; text-shadow: none; }
.btn.red, .btn.yes { --c: var(--green); --d: var(--green-d); --fg: #fff; }
.btn.blue { --c: var(--purple); --d: var(--purple-d); --fg: #fff; }
.btn.gold { --c: var(--orange); --d: var(--orange-d); --fg: #fff; }
.btn.no { --c: var(--red); --d: var(--red-d); --fg: #fff; }
.btn.white { --c: var(--paper-w); --d: var(--ink-2); --fg: var(--ink); text-shadow: none; }
.btn.big { font-size: 24px; padding: 10px 28px; flex: 1; }
.btn.sm { font-size: 16px; padding: 5px 16px; }
.linkbtn { --fill: var(--yellow-l); --stroke: var(--orange); --bw: 2.500px; --rot: -.6deg; background: none; border: 0; cursor: pointer; font-family: var(--f-body); font-size: 14px; padding: 7px 16px; color: var(--ink); }
.linkbtn:hover::before { transform: rotate(1deg) scale(1.03); }
.linkbtn:active::before { transform: translateY(2px); }
.x { background: var(--paper-w); color: var(--red); border: 2.500px solid var(--red); border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; width: 34px; height: 34px; cursor: pointer; font-weight: 700; font-size: 16px; padding: 0; }
.x:hover { transform: rotate(8deg) scale(1.08); }

.inp {
  width: 100%; padding: 9px 16px; font-size: 17px; font-family: var(--f-body); border-radius: var(--wob); background: #fff; color: var(--ink);
  border: 2.500px solid var(--ink-2); outline: none; box-shadow: inset 0 -3px 0 rgba(120, 170, 225, .25);
}
.inp::placeholder { color: #9a90a8; }
.inp:focus { border-color: var(--blue); background: #fffff4; box-shadow: 0 0 0 3px rgba(59, 130, 214, .22), inset 0 -3px 0 rgba(120, 170, 225, .25); }
.inp:disabled { color: #9a90a8; background: var(--paper2); border-color: #b9ae9a; }
select.inp { appearance: auto; }
.inp.num { width: auto; flex: 1; font-size: 15px; padding: 7px 12px; }
.inp.area { resize: vertical; min-height: 120px; font-size: 15px; }
.code-inp { text-align: center; font-family: var(--f-body); font-weight: 700; font-size: 20px; letter-spacing: .25em; text-transform: uppercase; direction: ltr; }
.hint { color: var(--muted); font-size: 14px; }
.hint.warn, .warn { color: var(--red-d); font-weight: 700; }

/* ---- the notebook page: lined paper, red margin + spiral on the right, on the wooden table ---- */
.screen, .home-left { background: var(--paper-bg); box-shadow: 0 0 0 1px rgba(90, 55, 20, .25), 0 10px 30px rgba(70, 40, 10, .35); border-radius: 4px 8px 8px 4px; }
.screen {
  max-width: 660px; margin: 0 auto; min-height: 100dvh; padding: max(26px, env(safe-area-inset-top)) 18px 44px; padding-inline: 18px var(--gut); padding-inline-start: var(--gut); padding-inline-end: 18px; display: grid; gap: 22px; align-content: start;
}
.panel, .card-pop, .sheet { padding: 20px 18px 18px; --rot: -.3deg; }
.panel { display: grid; gap: 14px; }
.panel:nth-child(2n) { --rot: .3deg; }
.panel > *, .card-pop > *, .sheet > * { position: relative; }
/* a strip of tape holds each sheet to the page */
.panel::after, .card-pop::after, .sheet::after, .rev::after {
  content: ""; position: absolute; top: -12px; left: 50%; width: 78px; height: 24px; margin-left: -39px; z-index: 2; pointer-events: none;
  background: rgba(255, 213, 90, .8); transform: rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, 98% 20%, 100% 40%, 98% 60%, 100% 80%, 100% 100%, 0 100%, 2% 80%, 0 60%, 2% 40%, 0 20%);
}
.panel:nth-child(3n+2)::after { background: rgba(140, 200, 250, .78); transform: rotate(2.500deg); }
.panel:nth-child(3n+3)::after { background: rgba(245, 150, 190, .75); transform: rotate(-1.500deg); }
.card-pop::after { background: rgba(140, 200, 250, .78); }

/* home logo */
.logo { text-align: center; display: grid; gap: 4px; justify-items: center; }
.logo .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }
.logo .accent { font-family: var(--f-head); font-size: 16px; font-weight: 700; color: var(--blue); transform: rotate(1.500deg); line-height: 1; }
.logo-pieces { display: flex; gap: 10px; justify-content: center; }
.pc { position: relative; width: 36px; height: 36px; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; display: block; border: 3px solid var(--ink-2); animation: bob 2.4s ease-in-out infinite; }
.pc:nth-child(2) { animation-delay: .3s; } .pc:nth-child(3) { animation-delay: .6s; }
.pc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 34% 46%, var(--ink) 0 2.4px, transparent 3px), radial-gradient(circle at 66% 46%, var(--ink) 0 2.4px, transparent 3px), radial-gradient(ellipse at 50% 72%, var(--ink) 0 4px, transparent 4.5px); }
.pc.r { background: var(--purple); } .pc.b { background: var(--lime); } .pc.y { background: var(--yellow); }
@keyframes bob { 50% { transform: translateY(-5px); } }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%236a5f7a' stroke-width='1.600' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center; }
.join-row .btn { padding: 8px 18px; }
.invite { --fill: var(--lime-l); --stroke: var(--green); padding: 12px; display: grid; gap: 10px; text-align: center; }
.invite-t { font-weight: 700; }
.invite b { font-size: 24px; }

/* lobby */
.code-panel { text-align: center; justify-items: center; }
.lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcard { --rot: -1deg; padding: 14px 12px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.pcard:nth-child(2n) { --rot: 1deg; }
.pcard.red { --fill: var(--purple-l); --stroke: var(--purple); }
.pcard.blue { --fill: var(--lime-l); --stroke: var(--green); }
.pcard.empty { --fill: var(--paper2); --stroke: #a89f8c; --shd: none; }
.pcard.empty::before { border-style: dashed; }
.pdot { width: 30px; height: 30px; border-radius: 50%; background: #e4dccb; border: 3px dashed #a89f8c; display: block; flex: none; }
.red .pdot { background: var(--purple); } .blue .pdot { background: var(--lime); }
.pname { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.pst { font-size: 13px; color: var(--muted); }
.tag { font-family: var(--f-btn); font-size: 11px; background: var(--yellow); color: var(--ink); border-radius: 8px 10px 7px 11px; padding: 0 7px; margin-inline-start: 5px; vertical-align: middle; transform: rotate(-3deg); display: inline-block; }
.tag.me { background: #bfe0ff; }
.speaking .av svg { filter: none; }
.speaking .av { outline: 4px dotted var(--green); outline-offset: 3px; border-radius: 50%; }

.settings { gap: 14px; }
.host-note { background: var(--yellow-l); border: 2.500px dashed var(--orange); border-radius: var(--wob); padding: 6px 12px; font-weight: 700; font-size: 14px; }
.set-row { display: grid; gap: 8px; }
.set-c { display: grid; gap: 8px; }
.seg { display: flex; background: var(--paper2); border: 2.500px solid var(--ink-2); border-radius: var(--wob); padding: 3px; gap: 3px; }
.segb { flex: 1; border: 0; background: transparent; padding: 7px 4px; border-radius: 9px 12px 8px 12px; font-family: var(--f-body); font-size: 14px; cursor: pointer; color: var(--ink); }
.segb.on { background: var(--yellow); box-shadow: 0 0 0 2.500px var(--orange); font-weight: 700; }
.settings.ro .segb, .settings.ro .chip, .settings.ro .switch { cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 2.500px solid var(--ink-2); background: #fff; border-radius: 18px 22px 17px 23px / 22px 17px 23px 18px; padding: 4px 14px; font-family: var(--f-body); font-size: 14px; cursor: pointer; color: var(--ink); }
.chip.on { background: var(--purple); color: #fff; border-color: var(--purple-d); transform: rotate(-1.500deg); }
.switch { width: 60px; height: 32px; border-radius: 999px; border: 3px solid var(--ink-2); background: #fff; position: relative; cursor: pointer; }
.switch i { position: absolute; top: 2px; inset-inline-start: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transition: inset-inline-start .12s; }
.switch.on { background: var(--lime); }
.switch.on i { inset-inline-start: 30px; }
.pool { font-weight: 700; padding: 8px 14px; border-radius: var(--wob); background: var(--lime-l); border: 2.500px solid var(--green); font-size: 14px; }
.pool.low { background: #ffd3d0; border-color: var(--red); color: var(--red-d); }
.startbox { display: grid; gap: 8px; }
.startbox .hint { color: var(--ink-2); font-weight: 700; }
.chat-panel { gap: 10px; }

/* ---- chat: a lined page with speech bubbles ---- */
.chat { display: grid; grid-template-rows: 1fr auto auto; gap: 8px; min-height: 0; }
.chat-list {
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 220px; min-height: 90px; padding: 8px; border: 2.500px solid var(--ink-2); border-radius: var(--wob);
  background: repeating-linear-gradient(to bottom, #fffef8 0 27px, var(--rule) 27px 28px) local;
}
.chat-in { display: flex; gap: 8px; }
.chat-in .inp { padding: 7px 14px; font-size: 16px; }
.msg { padding: 4px 12px; border-radius: 14px 16px 14px 6px / 16px 14px 6px 14px; background: #fff; max-width: 88%; align-self: flex-start; font-size: 15px; overflow-wrap: anywhere; border: 2.500px solid var(--ink-2); }
.msg.red { background: var(--purple-l); border-color: var(--purple); } .msg.blue { background: var(--lime-l); border-color: var(--green); }
.msg.mine { align-self: flex-end; border-radius: 16px 14px 6px 14px / 14px 16px 14px 6px; }
.msg b { font-family: var(--f-btn); font-size: 13px; margin-inline-end: 6px; }
.msg .vi { font-size: 12px; margin-inline-end: 4px; }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 12px; }

/* ---- game: full-viewport scene; HUD, tools and dock float over it ---- */
.game { position: relative; width: 100%; height: 100dvh; display: block; overflow: hidden; }
.hud { display: flex; gap: 12px; position: fixed; top: 0; inset-inline: 0; max-width: 900px; width: 100%; margin-inline: auto; z-index: 6; padding: max(10px, env(safe-area-inset-top)) 12px 4px; }
.pchip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 12px; --rot: -.8deg; --shd: 2px 4px 0 rgba(60, 35, 10, .3); }
.pchip:nth-child(2n) { --rot: .8deg; }
.pchip.red { --fill: var(--purple-l); --stroke: var(--purple); }
.pchip.blue { --fill: var(--lime-l); --stroke: var(--green); }
.pchip.off { opacity: .6; }
.pinfo { min-width: 0; }
.pn { font-family: var(--f-btn); font-weight: 700; font-size: 16px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn small { font-family: var(--f-body); color: var(--muted); font-size: 11px; font-weight: 400; }
.ps { font-size: 12px; color: var(--ink); white-space: nowrap; }
.ps b { font-family: var(--f-btn); font-size: 16px; line-height: 1; }
.boardwrap { position: fixed; inset: 0; z-index: 0; width: 100%; min-height: 0; background: none; border: 0; box-shadow: none; }
.board { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; box-shadow: none; }
.board canvas { background: transparent !important; }
.tools { position: fixed; top: calc(var(--hud-h, 72px) + 8px); inset-inline-start: 8px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.tool { position: relative; width: 42px; height: 42px; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; border: 3px solid var(--ink-2); background: var(--paper-w); font-size: 18px; cursor: pointer; box-shadow: 2px 3px 0 rgba(60, 35, 10, .3); padding: 0; }
.tool:hover { transform: rotate(-6deg) scale(1.06); }
.tool:active { transform: translateY(2px) scale(.95); box-shadow: none; }
.tool.off { background: #ffd3d0; border-color: var(--red); }
.tool.on { background: var(--yellow-l); border-color: var(--orange); }
.badge { position: absolute; top: -7px; inset-inline-end: -7px; background: var(--red); color: #fff; border: 2px solid var(--red-d); border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; line-height: 16px; text-align: center; }
.infobar { position: fixed; top: calc(var(--hud-h, 72px) + 8px); inset-inline-end: 8px; z-index: 5; display: grid; gap: 6px; justify-items: end; }
.roundinfo { background: var(--yellow-l); border: 2.500px solid var(--orange); border-radius: var(--wob); padding: 1px 12px; font-family: var(--f-body); font-size: 12px; transform: rotate(1.500deg); box-shadow: 2px 3px 0 rgba(60, 35, 10, .25); }
.followcount { background: var(--yellow-l); border: 2.500px solid var(--orange); border-radius: var(--wob); box-shadow: 2px 3px 0 rgba(60, 35, 10, .25); padding: 2px 12px; font-family: var(--f-body); font-weight: 700; font-size: 14px; }

.drawer { position: fixed; z-index: 70; bottom: 10px; inset-inline: 10px; height: min(420px, 70dvh); max-width: 760px; margin-inline: auto; padding: 14px 12px 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; --rot: -.2deg; }
.drawer .chat { grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.drawer .chat-list { max-height: none; min-height: 0; }
.drawer-h { display: flex; gap: 6px; align-items: center; }
.tab { border: 2.500px solid var(--ink-2); background: #fff; border-radius: 12px 14px 4px 4px; padding: 3px 16px; font-family: var(--f-btn); font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.tab.on { background: var(--yellow); border-color: var(--orange); }
.drawer-h .x { margin-inline-start: auto; }
.log-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lrow { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: #fff; border: 2px solid var(--ink-2); border-radius: var(--wob); padding: 5px 10px; font-size: 14px; }
.lrow.m { background: var(--yellow-l); }
.lt { overflow-wrap: anywhere; }
.lchip { flex: none; font-weight: 700; border-radius: 999px; padding: 0 12px; background: #e4dccb; border: 2px solid var(--ink-2); font-size: 13px; }
.lchip.y { background: var(--lime-l); border-color: var(--green); } .lchip.n { background: #ffd3d0; border-color: var(--red); }

.dock { position: fixed; bottom: 0; inset-inline: 0; z-index: 6; max-width: 760px; width: 100%; margin: 0 auto; max-height: 56dvh; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
.dock > *, .controls > * { min-width: 0; }
.live { font-size: 12px; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes { display: flex; flex-wrap: wrap; gap: 5px; }
.note { font-size: 12px; font-weight: 700; padding: 0 12px; border-radius: 10px 14px 9px 15px; background: var(--yellow); border: 2px solid var(--orange); transform: rotate(-1deg); }
.note:nth-child(2n) { transform: rotate(1deg); }
/* status banner = a strip torn from the notebook; carries a question as a speech bubble with a tail */
.banner { --fill: #fff; --stroke: var(--ink-2); --bw: 2.500px; padding: 6px 16px; font-family: var(--f-btn); font-weight: 700; font-size: 17px; line-height: 1.35; text-align: center; --rot: -.3deg; }
.banner.mine { --fill: var(--yellow-l); --stroke: var(--orange); }
.banner.bubble { --r: 28px 32px 26px 30px / 30px 26px 32px 28px; --fill: #fff; --stroke: var(--blue); margin-top: 10px; }
.banner.bubble::after { content: ""; position: absolute; top: -9px; inset-inline-start: 40px; width: 16px; height: 16px; background: #fff; border-top: 2.500px solid var(--blue); border-left: 2.500px solid var(--blue); transform: rotate(45deg); }
.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.controls:empty { display: none; }
.controls .row { flex-wrap: nowrap; }
.controls .row .btn { flex: 1; padding-inline: 10px; white-space: nowrap; }
.ask-row .inp { flex: 3; padding: 6px 14px; font-size: 16px; } .ask-row .btn { flex: 1.1; }
.answer-row .btn { padding: 5px 8px; font-size: 26px; }
.dock .btn.big { padding: 5px 16px; font-size: 20px; }
.dock .btn { padding: 5px 14px; font-size: 17px; }

/* power cards: little drawn cards */
.hand { display: flex; gap: 9px; overflow-x: auto; padding: 8px 4px 6px; align-items: center; }
.pcard-pw {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 12px; position: relative; cursor: pointer; font: inherit;
  border: 2.500px solid #a89f8c; background: var(--paper2); color: var(--ink); border-radius: 9px 12px 8px 13px / 12px 8px 13px 9px; box-shadow: 2px 3px 0 rgba(60, 35, 10, .25); transform: rotate(-1.5deg);
}
.pcard-pw:nth-child(2n) { transform: rotate(1.2deg); }
.pcard-pw.can { background: var(--yellow-l); border-color: var(--orange); }
.pcard-pw.passive { background: var(--purple-l); border-color: var(--purple); }
.pcard-pw:hover:not(:disabled) { transform: rotate(0deg) translateY(-3px); }
.pcard-pw:active:not(:disabled) { transform: translateY(1px) scale(.96); }
.pw-i { font-size: 15px; line-height: 1; }
.pw-n { font-family: var(--f-btn); font-size: 13px; line-height: 1.3; white-space: nowrap; font-weight: 700; }
.pw-d, .pw-tag { display: none; }
.opp-hand { flex: 0 0 auto; align-self: center; margin-inline-start: auto; font-size: 12px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.opp-hand b { font-family: var(--f-head); font-size: 15px; }
.pcard-pw.followers.used { opacity: .55; background: var(--paper2); border-color: #a89f8c; }
.pcard-pw:disabled { cursor: not-allowed; }

/* ---- overlays ---- */
.overlay { position: fixed; inset: 0; z-index: 50; background-color: rgba(70, 42, 16, .62); display: flex; overflow-y: auto; padding: 24px 16px; animation: fade .12s; }
.overlay > * { margin: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.88) rotate(-2deg); opacity: 0; } }
.card-pop { width: min(440px, 100%); display: grid; gap: 14px; text-align: center; justify-items: stretch; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); padding-top: 24px; }
.card-pop .sub { margin: 0; color: var(--muted); }
.dlg-body { margin: 0; white-space: pre-line; font-weight: 700; }
.dlg-img { width: 150px; height: 150px; object-fit: cover; border-radius: 4px; justify-self: center; border: 6px solid #fff; outline: 2.500px solid var(--ink-2); box-shadow: 2px 4px 0 rgba(60, 35, 10, .3); transform: rotate(-2deg); }
.cdbar { height: 16px; background: #fff; border: 2.500px solid var(--ink-2); border-radius: 999px; overflow: hidden; }
.cdbar i { display: block; height: 100%; width: 100%; background: var(--purple); }
.cd { font-family: var(--f-btn); font-weight: 700; font-size: 20px; margin-top: -8px; }
.scores { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sc { display: flex; gap: 8px; align-items: center; padding: 3px 16px; font-family: var(--f-btn); font-weight: 700; --r: 28px 32px 26px 30px / 30px 26px 32px 28px; --rot: -1deg; font-size: 16px; }
.sc.red { --fill: var(--purple-l); --stroke: var(--purple); } .sc.blue { --fill: var(--lime-l); --stroke: var(--green); }
.revs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rev { padding: 12px 8px 8px; display: grid; gap: 6px; --r: 4px 6px 4px 7px / 6px 4px 7px 4px; --fill: #fff; --rot: -1.500deg; }
.rev:nth-child(2n) { --rot: 1.500deg; }
.rev.red { --stroke: var(--purple); } .rev.blue { --stroke: var(--green); }
.rev::after { width: 54px; height: 18px; margin-left: -27px; top: -9px; }
.rev img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; border: 2px solid var(--ink-2); background: #e4dccb; }
.rev-n { font-family: var(--f-btn); font-weight: 700; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.pack-form { display: grid; gap: 12px; }
.sheet { width: min(520px, 100%); display: grid; gap: 12px; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); padding-top: 24px; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; }
.progress { display: grid; gap: 4px; text-align: center; font-size: 14px; }
.bar { height: 16px; background: #fff; border: 2.500px solid var(--ink-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; border-right: 2.500px solid var(--green-d); }
.pack-done { display: grid; gap: 12px; text-align: center; justify-items: center; }

/* ---- crayon star popups ---- */
.burst { position: fixed; z-index: 130; top: 38%; left: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; pointer-events: none; display: grid; place-items: center; animation: burst 1.5s ease-out forwards; }
.burst::before, .burst::after { content: ""; position: absolute; inset: 0; clip-path: var(--star); }
.burst::before { background: var(--ink-2); transform: scale(1.04); }
.burst::after { background: var(--yellow); inset: 5px; filter: url(#crayon2); }
.burst.good::after { background: var(--lime); } .burst.bad::after { background: #ff8a80; } .burst.info::after { background: #a9d4ff; }
.burst span { position: relative; z-index: 1; font-family: var(--f-head); font-weight: 700; font-size: 34px; color: var(--ink); text-align: center; line-height: 1.1; max-width: 150px; transform: rotate(-6deg); }
@keyframes burst { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 14% { transform: scale(1.12) rotate(4deg); opacity: 1; } 24% { transform: scale(1) rotate(-2deg); } 80% { transform: scale(1) rotate(-2deg); opacity: 1; } 100% { transform: scale(1.1) rotate(-2deg); opacity: 0; } }
:root { --star: polygon(50.0% 0.0%,58.0% 14.9%,71.7% 5.0%,72.4% 21.9%,89.1% 18.8%,82.4% 34.4%,98.7% 38.9%,86.0% 50.0%,98.7% 61.1%,82.4% 65.6%,89.1% 81.2%,72.4% 78.1%,71.7% 95.0%,58.0% 85.1%,50.0% 100.0%,42.0% 85.1%,28.3% 95.0%,27.6% 78.1%,10.9% 81.2%,17.6% 65.6%,1.3% 61.1%,14.0% 50.0%,1.3% 38.9%,17.6% 34.4%,10.9% 18.8%,27.6% 21.9%,28.3% 5.0%,42.0% 14.9%); }

/* ---- connection + toasts: sticky notes ---- */
.conn { position: fixed; top: 0; inset-inline: 0; z-index: 100; text-align: center; padding: 6px; font-weight: 700; font-size: 14px; --fill: #ffd3d0; --stroke: var(--red); --r: 0 0 14px 14px; color: var(--red-d); }
#toasts { position: fixed; z-index: 120; inset-inline: 0; top: max(10px, env(safe-area-inset-top)); display: grid; gap: 10px; justify-items: center; pointer-events: none; padding: 0 12px; }
.toast { --fill: var(--paper-w); --stroke: var(--ink-2); --bw: 2.500px; --rot: -1deg; padding: 7px 20px; font-weight: 700; font-size: 15px; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); transition: opacity .3s, transform .3s; max-width: 100%; text-align: center; --shd: 2px 4px 0 rgba(60, 35, 10, .3); }
.toast:nth-child(2n) { --rot: 1deg; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.bad { --fill: #ffd3d0; --stroke: var(--red); } .toast.good { --fill: var(--lime-l); --stroke: var(--green); } .toast.warn { --fill: var(--yellow-l); --stroke: var(--orange); }

/* ---- avatars ---- */
.av { display: inline-block; width: var(--s, 40px); height: var(--s, 40px); flex: none; line-height: 0; }
.av svg { width: 100%; height: 100%; overflow: visible; }
.av.mini { margin-inline-end: 6px; vertical-align: middle; }
.bounce svg { animation: boing 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes boing { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.04, .96); } 70% { transform: scale(.97, 1.04); } }
.av-creator { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; background-color: var(--paper2); border: 2.500px dashed #a89f8c; border-radius: var(--wob); padding: 12px; }
.av-big { display: grid; place-items: center; width: 132px; height: 132px; background: #fff; border: 3.500px solid var(--purple); border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; box-shadow: 2px 4px 0 rgba(60, 35, 10, .2); }
.av-rows { display: grid; gap: 8px; }
.av-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.av-l { min-width: 52px; text-align: center; }
.av-arrows { display: flex; align-items: center; gap: 6px; }
.av-val { font-family: var(--f-small); font-size: 12px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.arr { width: 36px; height: 36px; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; border: 3px solid var(--green-d); background: var(--lime); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 1px 3px 0 rgba(60, 35, 10, .25); }
.arr svg { width: 16px; height: 16px; }
.arr svg path { stroke: var(--ink); }
.arr:hover { transform: rotate(-6deg) scale(1.08); }
.arr:active { transform: translateY(2px) scale(.94); box-shadow: none; }
.colorbtn { width: 38px; height: 38px; border-radius: 50%; border: 3.500px solid var(--ink-2); cursor: pointer; padding: 0; box-shadow: 1px 3px 0 rgba(60, 35, 10, .25); }
.colorbtn:hover { transform: scale(1.1) rotate(8deg); }
.colorbtn:active { transform: translateY(2px) scale(.94); }
.av-creator .btn { grid-column: 1 / -1; justify-self: center; }
/* circular colour wheel around the character */
.wheel-ov { z-index: 90; }
.wheel { position: relative; width: min(330px, 88vw); aspect-ratio: 1; border-radius: 50%; background: var(--paper-w); border: 4px solid var(--purple); box-shadow: 3px 6px 0 rgba(60, 35, 10, .3); animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.wheel::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2.500px dashed #cbbfae; }
.wheel .wc { position: absolute; inset: 50% auto auto 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; background: #fff; border: 3px solid var(--ink-2); border-radius: 50%; }
.wheel .wc .av { --s: 82% !important; width: 82%; height: 82%; }
.wheel .sw { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%; border: 3.500px solid var(--ink-2); cursor: pointer; padding: 0; box-shadow: 1px 3px 0 rgba(60, 35, 10, .25); transform: translate(-50%, -50%); transition: transform .1s; }
.wheel .sw:hover { transform: translate(-50%, -50%) scale(1.15); }
.wheel .sw:active { box-shadow: none; }
.wheel .sw.on { outline: 4px dotted var(--red); outline-offset: 2px; z-index: 1; }

/* ---- split home: notebook page LEFT, live table preview RIGHT (physical sides; children stay RTL) ---- */
.home-split { direction: ltr; display: grid; grid-template-columns: minmax(380px, 520px) 1fr; min-height: 100dvh; }
.home-split > * { direction: rtl; }
.home-left { padding: max(24px, env(safe-area-inset-top)) 18px 40px; padding-inline-start: var(--gut); padding-inline-end: 18px; display: grid; gap: 16px; align-content: start; overflow-y: auto; max-height: 100dvh; margin: 12px 0 12px 12px; }
.home-right { position: relative; min-height: 100dvh; background: none; border: 0; box-shadow: none; }
.preview-board { background: none; position: absolute; inset: 0; }
.preview-board canvas { background: transparent !important; }
.sticker { position: absolute; bottom: 26px; inset-inline-end: 30px; z-index: 2; font-family: var(--f-head); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ink); background: var(--yellow); padding: 8px 18px 10px; box-shadow: 2px 5px 0 rgba(60, 35, 10, .3); transform: rotate(-4deg); pointer-events: none; border-radius: 2px 2px 14px 2px; }
.sticker::before { content: ""; position: absolute; top: -10px; left: 50%; width: 60px; height: 20px; margin-left: -30px; background: rgba(150, 215, 255, .8); transform: rotate(3deg); }
.home-left .linkbtn { justify-self: center; }
.start-panel { gap: 12px; }
@media (min-width: 900px) and (max-height: 900px) { .logo-pieces { display: none; } .logo h1 { font-size: 60px; } .home-left { gap: 10px; } .av-big { width: 112px; height: 112px; } .start-panel { gap: 10px; padding: 16px 16px 14px; } }
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  :root { --gut: 46px; }
  .home-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .home-right { order: -1; min-height: 0; height: clamp(170px, 26dvh, 240px); overflow: hidden; }
  .sticker { bottom: 8px; font-size: 22px; padding: 4px 12px 6px; }
  .home-left { max-height: none; overflow: visible; padding: 20px 14px 36px; padding-inline-start: var(--gut); padding-inline-end: 14px; max-width: 560px; margin: 0 auto 16px; width: calc(100% - 16px); }
  .logo-pieces { display: none; }
  .logo h1 { font-size: clamp(46px, 14vw, 64px); }
  .av-big { width: 104px; height: 104px; }
  .screen { width: calc(100% - 12px); margin-inline: auto; }
  .bigcode { font-size: 44px; padding: 0 14px; }
  .pn { font-size: 15px; }
}
@media (max-height: 560px) { .dock { padding-bottom: 14px; } }
@media (max-height: 640px) { .banner { font-size: 14px; padding: 3px 10px; } .dock .btn.big { padding: 3px 14px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- whose turn: a crayon circle round the active player, the written note ---- */
.pchip.turn { --fill: var(--yellow-l); --stroke: var(--orange); transform: translateY(2px) scale(1.03); }
.pchip.turn .av { position: relative; }
.pchip.turn .av::after { content: ""; position: absolute; inset: -7px; border: 3.500px solid var(--red); border-radius: 50% 46% 52% 48% / 58% 52% 48% 54%; transform: rotate(-12deg); border-bottom-color: transparent; filter: url(#crayon3); pointer-events: none; }
.pchip.dim { opacity: .65; }
.turn-tag { font-family: var(--f-btn); font-size: 12px; font-weight: 700; color: var(--red); border: 2.500px solid var(--red); border-radius: 50% 48% 52% 46% / 60% 50% 54% 48%; padding: 0 9px; margin-inline-start: 6px; vertical-align: middle; line-height: 1.05; display: inline-block; transform: rotate(-4deg); }
.turn-stamp { position: fixed; z-index: 125; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; animation: stamp 1.6s ease-out forwards; }
.turn-stamp span { display: block; position: relative; font-family: var(--f-btn); font-weight: 700; font-size: clamp(28px, 7vw, 52px); line-height: 1; white-space: nowrap; padding: 12px 34px 16px; color: var(--ink); background: var(--paper-w) repeating-linear-gradient(to bottom, transparent 0 .5em, var(--rule) .5em calc(.5em + 1px)); box-shadow: 3px 7px 0 rgba(60, 35, 10, .3); border-radius: 3px 3px 14px 3px; }
.turn-stamp span::before { content: ""; position: absolute; top: -12px; left: 50%; width: 80px; height: 24px; margin-left: -40px; background: rgba(140, 200, 250, .8); transform: rotate(-3deg); }
.turn-stamp.mine span { background-color: var(--yellow); }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -80%) scale(1.4) rotate(-10deg); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1) rotate(-4deg); } }

/* ---- photo credits sheet ---- */
.credits { width: min(640px, 100%); }
.credits-list { display: grid; gap: 14px; text-align: start; }
.credit-pack h3 { margin: 0 0 6px; font-size: 20px; color: var(--purple); }
.credit-row { font-size: 13px; line-height: 1.5; padding: 4px 0; border-bottom: 1.500px dashed rgba(110, 160, 220, .8); overflow-wrap: anywhere; }
.credit-row a { color: var(--blue-d); font-weight: 700; }
.credit-row .ltr { unicode-bidi: isolate; }

/* power-card help sheet */
.pcard-pw.help { background: var(--paper); border-color: var(--blue); }
.help-list { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; text-align: right; }
.help-row { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 2px dashed rgba(110,160,220,.6); border-radius: 10px; padding: 8px 10px; font-family: var(--f-body); line-height: 1.45; }
.help-row b { font-family: var(--f-btn); }
.help-i { font-size: 1.4em; line-height: 1; }

/* floating music toggle (home + lobby) */
.music-fab { position: fixed; left: 12px; bottom: 12px; z-index: 40; }
.music-fab[hidden] { display: none; }

/* notice before a planned update */
@media (max-width: 600px) { .update-notice.update-notice { left: auto; right: 58px; transform: rotate(-.6deg); max-width: 180px; font-size: 13px; padding: 3px 8px; } }
.update-notice { position: fixed; z-index: 110; top: calc(68px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) rotate(-.6deg); width: max-content; max-width: calc(100vw - 24px); padding: 3px 14px; font-family: var(--f-body); font-size: 14px; font-weight: 700; text-align: center; color: var(--ink); background: var(--yellow-l); border: 2px solid var(--orange); border-radius: var(--wob); pointer-events: none; }

/* link back to the SLOP GAMES hub */
.slop-back { justify-self: start; text-decoration: none; font-weight: 700; --fill: var(--purple-l); --stroke: var(--purple); }

/* ---- home: the streamers-pack bubble (a speech bubble taped to the page) ---- */
.howto-btn { justify-self: center; margin-top: 4px; --fill: var(--yellow-l); --stroke: var(--orange); }
.streamers-bubble {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "faces text" "go go"; gap: 6px 12px; align-items: center;
  text-align: start; font: inherit; color: var(--ink); cursor: pointer; padding: 14px 16px 12px; margin-top: 6px;
  background: #fff; border: 3.5px solid var(--purple); border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px;
  box-shadow: 3px 5px 0 rgba(60, 35, 10, .3); transform: rotate(-1deg); transition: transform .12s;
}
.streamers-bubble::after { content: ""; position: absolute; bottom: -12px; inset-inline-end: 46px; width: 20px; height: 20px; background: #fff; border-bottom: 3.5px solid var(--purple); border-right: 3.5px solid var(--purple); transform: rotate(45deg); }
.streamers-bubble:hover { transform: rotate(0) scale(1.02); }
.sb-new { position: absolute; top: -14px; inset-inline-start: -8px; background: var(--red); color: #fff; font-family: var(--f-btn); font-weight: 700; font-size: 15px; padding: 1px 12px 3px; border-radius: 12px 14px 10px 16px; transform: rotate(-8deg); box-shadow: 1px 2px 0 rgba(60, 35, 10, .3); }
.sb-faces { grid-area: faces; display: flex; direction: ltr; }
.sb-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; outline: 2px solid var(--purple); margin-left: -12px; background: var(--paper2); }
.sb-faces img:first-child { margin-left: 0; }
.sb-t { grid-area: text; display: grid; line-height: 1.25; }
.sb-t b { font-family: var(--f-btn); font-size: 18px; color: var(--purple); }
.sb-t small { font-size: 13px; color: var(--ink-2); }
.sb-go { grid-area: go; justify-self: center; font-family: var(--f-btn); font-weight: 700; font-size: 16px; background: var(--lime); border: 2.5px solid var(--lime-d); border-radius: 14px 18px 12px 20px; padding: 2px 18px 4px; }

/* ---- how to play ---- */
.howto { width: min(600px, 100%); }
.howto-lead { margin: 0; font-weight: 700; font-size: 16px; }
.howto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto-step { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 2px dashed rgba(110, 160, 220, .7); border-radius: 12px; padding: 8px 12px; }
.howto-step p { margin: 2px 0 0; line-height: 1.5; font-size: 15px; }
.howto-step b { font-family: var(--f-btn); font-size: 17px; color: var(--purple); }
.howto-step q { font-weight: 700; quotes: "״" "״"; }
.howto-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--orange); font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.howto-tips { display: grid; gap: 6px; font-size: 14px; background: var(--yellow-l); border: 2.5px solid var(--orange); border-radius: var(--wob); padding: 10px 12px; }
kbd { font-family: var(--f-btn); font-weight: 700; font-size: 13px; background: #fff; border: 2px solid var(--ink-2); border-bottom-width: 4px; border-radius: 7px; padding: 0 10px; white-space: nowrap; }

/* ---- lobby: two columns on wide screens; pack tiles ---- */
.lobby-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.code-panel .hint { font-size: 13px; color: var(--muted); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pack-tile {
  display: grid; gap: 4px; justify-items: center; text-align: center; font: inherit; color: var(--ink); cursor: pointer; padding: 10px 8px 8px;
  background: #fff; border: 2.5px solid var(--ink-2); border-radius: 12px 16px 11px 17px / 16px 11px 17px 12px; box-shadow: 2px 3px 0 rgba(60, 35, 10, .2);
}
.pack-tile:nth-child(2n) { border-radius: 16px 11px 17px 12px / 11px 17px 12px 16px; }
.pack-tile:hover:not(:disabled) { transform: translateY(-2px) rotate(-1deg); }
.pack-tile.on { background: var(--yellow-l); border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange), 2px 4px 0 rgba(60, 35, 10, .3); transform: rotate(-1deg); }
.pack-tile:disabled { cursor: default; }
.settings.ro .pack-tile:not(.on) { opacity: .6; }
.pt-faces { display: flex; direction: ltr; height: 40px; }
.pt-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; outline: 2px solid var(--ink-2); margin-left: -10px; background: var(--paper2); }
.pt-faces img:first-child { margin-left: 0; }
.pt-name { font-family: var(--f-btn); font-weight: 700; font-size: 15px; line-height: 1.2; }
.pt-count { font-size: 12px; color: var(--muted); }
.hint.ex { font-size: 13px; color: var(--muted); }
@media (min-width: 1000px), (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .screen.lobby { max-width: 1240px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 26px; align-items: start; }
  .lobby .chat-list { max-height: 220px; }
}

/* ---- game HUD, round 2: bigger, clearer whose turn it is, nothing on top of anything else ---- */
.hud { max-width: 1120px; gap: 16px; }
.pchip { padding: 7px 16px 7px 12px; gap: 12px; position: relative; }
.pn { font-size: 20px; }
.ps { font-size: 14px; display: flex; gap: 12px; align-items: baseline; }
.ps b { font-size: 22px; }
.ps-left { font-weight: 700; color: var(--ink-2); }
.pw-count { font-weight: 700; }
.pchip.turn { --stroke: var(--red); --bw: 4px; }
.pchip.dim { opacity: 1; filter: saturate(.55) brightness(.97); }
.turn-flag { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%) rotate(-2deg); background: var(--red); color: #fff; font-family: var(--f-btn); font-weight: 700; font-size: 15px; padding: 1px 14px 3px; border-radius: 12px 16px 10px 18px; white-space: nowrap; box-shadow: 2px 3px 0 rgba(60, 35, 10, .3); animation: flag 1.6s ease-in-out infinite; z-index: 1; }
.pchip.blue .turn-flag, .pchip.red .turn-flag { background: var(--red); }
@keyframes flag { 50% { transform: translateX(-50%) rotate(2deg) scale(1.06); } }
.game.my-turn .banner { --fill: var(--yellow-l); --stroke: var(--orange); --bw: 3.5px; font-size: 20px; }
.tools { gap: 10px; inset-inline-start: 10px; }
.tool { width: 50px; height: 50px; font-size: 22px; }
.roundinfo { font-size: 14px; padding: 2px 14px; }
.dock { max-width: 880px; }
.dock .btn { font-size: 19px; padding: 7px 16px; }
.dock .btn.big { font-size: 22px; padding: 7px 18px; }
.ask-row .inp { font-size: 17px; padding: 8px 14px; }
.pcard-pw { padding: 4px 14px; }
.pw-i { font-size: 18px; } .pw-n { font-size: 15px; }
body:has(main.game) #toasts { top: 122px; }

/* floating tooltips: card names (3D board hover) and button explanations */
.card-tip, .btn-tip { position: fixed; z-index: 95; pointer-events: none; background: #fff; color: var(--ink); border: 3px solid var(--ink-2); border-radius: 12px; box-shadow: 3px 4px 0 rgba(60, 35, 10, .3); }
.card-tip { font-family: var(--f-body); font-weight: 800; font-size: 22px; padding: 4px 16px 6px; white-space: nowrap; }
.btn-tip { font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 1.4; padding: 6px 12px; max-width: 300px; background: var(--yellow-l); border-color: var(--orange); }
.card-tip[hidden], .btn-tip[hidden] { display: none; }

/* "hold space" hint (bottom corner, beside the dock) */
.space-hint { display: grid; justify-items: center; gap: 3px; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); background: var(--yellow-l); border: 3px solid var(--orange); border-radius: 12px 14px 10px 16px; padding: 6px 4px; width: 58px; margin-inline-start: -4px; box-shadow: 2px 3px 0 rgba(60, 35, 10, .3); transform: rotate(-2deg); animation: nudge 3s ease-in-out infinite; }
.space-hint kbd { font-size: 13px; padding: 1px 6px; }
.space-hint:hover { background: var(--yellow); }
@keyframes nudge { 0%, 80%, 100% { transform: rotate(-2deg); } 88% { transform: rotate(3deg) scale(1.08); } }
@media (hover: none) { .space-hint { display: none; } }

/* followers peek: a big banner with a countdown bar under the HUD */
.fol-banner { position: fixed; z-index: 7; top: calc(var(--hud-h, 72px) + 22px); left: 50%; transform: translateX(-50%) rotate(-1deg); display: grid; grid-template-columns: auto auto; gap: 4px 16px; align-items: center; background: #ffd25a; border: 4px solid var(--ink); border-radius: 16px 20px 14px 22px; padding: 8px 22px 10px; box-shadow: 3px 6px 0 rgba(60, 35, 10, .35); animation: pop .25s cubic-bezier(.3, 1.6, .5, 1); }
.fol-banner b { font-family: var(--f-btn); font-size: 22px; }
.fol-sec { font-family: var(--f-body); font-weight: 800; font-size: 22px; }
.fol-bar { grid-column: 1 / -1; height: 12px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.fol-bar i { display: block; height: 100%; width: 100%; background: var(--red); }
.fol-banner[hidden] { display: none; }

/* streamer mode: the "open your character" note */
.secret-open { display: grid; gap: 2px; justify-items: center; text-align: center; font: inherit; cursor: pointer; color: var(--ink); background: var(--purple-l); border: 3px solid var(--purple); border-radius: 14px 18px 12px 20px; padding: 8px 14px; box-shadow: 2px 4px 0 rgba(60, 35, 10, .3); transform: rotate(1.5deg); max-width: 220px; }
.secret-open b { font-family: var(--f-btn); font-size: 15px; }
.secret-open span { font-weight: 800; font-size: 16px; color: var(--purple-d); text-decoration: underline; }
.secret-open small { font-size: 12px; color: var(--ink-2); }
.secret-open.opened { background: var(--lime-l); border-color: var(--green); }
.secret-open[hidden] { display: none; }

/* big screens: scale the floating UI up so it fills more of the screen */
@media (min-width: 1440px) and (min-height: 820px) { .hud, .tools, .infobar, .dock, .fol-banner { zoom: 1.15; } }
@media (min-width: 1800px) and (min-height: 1000px) { .hud, .tools, .infobar, .dock, .fol-banner { zoom: 1.3; } }

/* lobby: power-card switch + streamer button */
.pow-row { display: flex; align-items: center; gap: 12px; }
.pow-t { display: grid; line-height: 1.3; }
.pow-t b { font-family: var(--f-btn); font-size: 15px; }
.pow-t small { font-size: 12px; color: var(--muted); }
.btn.on { --fill: var(--purple-l); --stroke: var(--purple); }

/* ---- fit on one screen (no scrolling) ---- */
@media (min-width: 960px) {
  .home-split { position: relative; }
  .streamers-bubble { position: absolute; z-index: 3; top: 34px; left: 590px; width: min(420px, calc(100vw - 640px)); margin: 0; }
  .streamers-bubble::after { bottom: auto; top: auto; inset-inline-end: auto; left: 60px; bottom: -12px; }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .home-left { gap: 10px; padding-top: 18px; padding-bottom: 18px; }
  .logo h1 { font-size: 64px; line-height: 1; }
  .logo .sub { margin-top: 0; }
  .start-panel { gap: 9px; padding: 16px 16px 14px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .logo .kicker, .logo .accent { display: none; }
  .logo h1 { font-size: 54px; }
  .av-big { width: 96px; height: 96px; }
}
/* lobby: tighter on short screens */
.screen.lobby { gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.lobby-col { gap: 16px; }
.lobby .panel { padding: 14px 16px 14px; gap: 10px; }
.lobby .settings { gap: 10px; }
.lobby .set-row { gap: 5px; }
.lobby .segb { padding: 5px 4px; }
.pack-grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pack-tile { padding: 7px 6px 6px; gap: 2px; }
.pt-faces { height: 32px; } .pt-faces img { width: 32px; height: 32px; }
.lobby .pcard { padding: 10px 10px; gap: 4px; }
.lobby .chat-list { max-height: 150px; }
@media (max-height: 820px) { .lobby .bigcode { font-size: 48px; } .lobby .pcard .av { transform: scale(.8); margin: -6px 0; } }

/* =====================================================================================================================
   Phones (360-430 wide, portrait and landscape): 44px touch targets, 16px text and inputs, safe areas, keyboard
   ===================================================================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body, button, a, input, select, textarea, .tool, .pcard-pw { touch-action: manipulation; }   /* no double-tap zoom */
button, a { -webkit-tap-highlight-color: transparent; }
.dock { bottom: var(--kb, 0px); }                          /* the on-screen keyboard pushes the dock up (app.js sets --kb) */
.drawer { bottom: calc(10px + var(--kb, 0px)); }

@media (pointer: coarse), (max-width: 600px), (max-height: 500px) {
  .btn, .linkbtn, .segb, .chip, .tab, .pcard-pw, .pack-tile, .secret-open, .space-hint, .streamers-bubble .sb-go { min-height: 44px; }
  .arr, .colorbtn, .tool, .x, .switch { min-width: 44px; min-height: 44px; }
  .arr { width: 44px; height: 44px; } .colorbtn { width: 44px; height: 44px; } .tool { width: 46px; height: 46px; }
  .x { width: 44px; height: 44px; }
  .linkbtn { font-size: 16px; padding: 10px 18px; }
  .btn.sm { min-height: 44px; font-size: 16px; }
  .segb { font-size: 16px; }
  .chip { font-size: 16px; padding: 8px 14px; }
  .inp, input, select, textarea { font-size: 16px; }       /* iOS zooms into anything smaller */
  .hint, .pst, .pool, .host-note, .av-val, .sb-t small, .pt-count, .pow-t small, .howto-step p, .credit-row, .lrow, .msg { font-size: 16px; }
  .row { gap: 10px; }
  .chips { gap: 10px; }
  .av-arrows { gap: 8px; }
  .music-fab { left: max(10px, env(safe-area-inset-left)); bottom: auto; top: max(10px, env(safe-area-inset-top)); }
}

@media (max-width: 600px) {
  :root { --gut: 34px; }
  .screen { width: 100%; padding-inline-end: max(12px, env(safe-area-inset-left)); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .home-left { width: calc(100% - 12px); padding-inline-end: max(12px, env(safe-area-inset-left)); }
  .streamers-bubble { width: 100%; max-width: 100%; box-sizing: border-box; transform: none; }
  .logo .accent { display: none; }
  /* lobby: two pack tiles per row, compact cards */
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-players { gap: 10px; }
  .code-panel .row { flex-wrap: wrap; justify-content: center; }
  .lobby .bigcode { font-size: 46px; }
  .chat-in .btn { min-width: 64px; }
}

/* ---- game, phone portrait: HUD on top, a row of tools + timer under it, board, dock at the bottom ---- */
@media (max-width: 600px) and (orientation: portrait) {
  .hud { gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
  .pchip { padding: 5px 10px 5px 8px; gap: 8px; }
  .pchip .av { --s: 40px !important; }
  .pn { font-size: 16px; } .pn small { display: none; }
  .ps { font-size: 13px; gap: 8px; } .ps b { font-size: 18px; }
  .ps-left { display: none; }
  .turn-flag { font-size: 13px; bottom: -14px; }
  .tools { top: calc(var(--hud-h, 60px) + 10px); inset-inline-start: max(8px, env(safe-area-inset-right)); flex-direction: row; gap: 8px; }
  .tools .extra-tool { display: none; }
  .tools.open { flex-wrap: wrap; max-width: calc(100vw - 130px); }
  .tools.open .extra-tool { display: block; }
  .infobar { top: calc(var(--hud-h, 60px) + 10px); inset-inline-end: max(8px, env(safe-area-inset-left)); }
  .roundinfo { display: none; }
  .timer { font-size: 22px; }
  .secret-open { max-width: 150px; padding: 6px 10px; }
  .secret-open small { display: none; }
  .dock { padding: 6px 10px max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  .banner { font-size: 16px; padding: 5px 12px; }
  .game.my-turn .banner { font-size: 17px; }
  .dock .btn, .dock .btn.big { font-size: 18px; padding: 6px 12px; }
  .answer-row .btn { font-size: 24px; }
  .hand { padding: 6px 2px 4px; }
  .fol-banner { grid-template-columns: 1fr; text-align: center; padding: 6px 14px 8px; }
  .fol-banner b, .fol-sec { font-size: 18px; }
  .turn-stamp span { font-size: 30px; padding: 10px 22px 12px; }
}
.more-tool { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  .tools .more-tool { display: block; }
  .tools .extra-tool, .tools .space-hint { display: none; }
  .tools.open .extra-tool { display: block; }
}

@media (max-width: 600px) {
  .home-left > *, .start-panel > *, .logo > *, .lobby-col > *, .panel > * { min-width: 0; }
  .av-creator { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 10px; }
  .av-big { width: 96px; height: 96px; }
  .av-rows { width: 100%; }
  .logo .sub { font-size: 16px; overflow-wrap: anywhere; }
  .streamers-bubble { grid-template-columns: 1fr; grid-template-areas: "faces" "text" "go"; justify-items: center; text-align: center; }
}
@media (max-width: 999px) and (orientation: portrait), (max-width: 999px) and (min-height: 501px) {      /* one column: code, players, settings, start, chat, leave */
  .lobby-col { display: contents; }
  .lobby .code-panel { order: 1; } .lobby .lobby-players { order: 2; } .lobby .settings { order: 3; }
  .lobby .startbox { order: 4; } .lobby .chat-panel { order: 5; } .lobby .lobby-room > .linkbtn { order: 6; justify-self: center; }
}

/* character description under the name in the hover tooltip */
.card-tip { display: grid; justify-items: center; gap: 1px; white-space: normal; max-width: 320px; text-align: center; }
.card-tip b { font-weight: 800; }
.card-tip-bio { font-weight: 500; font-size: 16px; color: var(--ink-2); line-height: 1.35; }

/* no stray scrollbars in the game UI: the dock / power-card row may still scroll (touch, wheel) but never show a bar */
.dock, .hand, .tools { scrollbar-width: none; -ms-overflow-style: none; }
.dock::-webkit-scrollbar, .hand::-webkit-scrollbar, .tools::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dock { overflow-y: auto; overflow-x: hidden; max-height: calc(100dvh - var(--hud-h, 72px) - 20px); }