/* Scribble Chain: a sketchbook. Ruled cream paper, ink blue, doodles that draw themselves. */
:root {
  --bg: #fbf6ea; --bg2: #fffdf6; --card: #fffdf7; --card2: #f1ead8; --line: #d9cfb6;
  --text: #2b2a33; --muted: #6f6a5e; --accent: #2f5bea; --yellow: #d98a00; --red: #e8473b; --green: #1f9d55; --blue: #2f5bea;
  --grad: linear-gradient(135deg, #ffd54a, #ffb21e);
  --font-head: 'Gochi Hand', 'Comic Sans MS', cursive; --font-body: 'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif; --head-weight: 400;
  --radius: 16px;
  color-scheme: light;
}
html, body { background: #fbf6ea; }
body { background: repeating-linear-gradient(180deg, transparent 0 33px, #dde6f5 33px 35px) #fbf6ea fixed; font-size: 1.08em; }
h1, h2, h3 { letter-spacing: 0.01em; }
.btn { color: #2b2a33; border: 2.5px solid #2b2a33; border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px; box-shadow: 3px 4px 0 #2b2a33; font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 #2b2a33; }
.btn.ghost { background: #fff; color: #2b2a33; border: 2.5px solid #2b2a33; box-shadow: 2px 3px 0 #2b2a33; }
.card { border: 2.5px solid #2b2a33; border-radius: 18px 14px 20px 12px / 12px 20px 14px 18px; box-shadow: 4px 5px 0 rgba(43, 42, 51, 0.85); }
.chip { background: #fff; border: 2px solid #2b2a33; }
.dot { color: #111; box-shadow: 0 0 0 2px #2b2a33; }
.hero { color: #2f5bea; transform: rotate(-2deg); text-shadow: 3px 3px 0 #ffd54a; }
.big-code { background: none; color: #2f5bea; -webkit-text-fill-color: #2f5bea; text-shadow: 3px 3px 0 #ffd54a; }
.banner { color: #2b2a33; }
.text-in, .code-input { background: #fff; color: #2b2a33; border: 2.5px solid #2b2a33; }
.seg { background: #efe7d2; } .seg button.sel { background: #fff; color: #2f5bea; box-shadow: 0 0 0 2px #2b2a33; }
.option, .game-pick button, .plist .p, .vote-item, .player-tile, .score-row { background: #fff; border-color: #2b2a33; }
.plist .p .tools button, .tv-tools button { background: #fff; border-color: #2b2a33; }
.ph-host { background: rgba(251, 246, 234, 0.95); border-top: 2.5px solid #2b2a33; }
.toast { background: #fff; border: 2px solid #2b2a33; }
.score-row.first { background: linear-gradient(90deg, #fff2c2, #fff); border-color: #d98a00; }
.lobby .qr { border: 3px solid #2b2a33; }
.timer svg circle:first-child { stroke: #d9cfb6; }
.pop { animation: scribblein 0.6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes scribblein { 0% { transform: rotate(-12deg) scale(0.4); opacity: 0; } 60% { transform: rotate(3deg) scale(1.05); opacity: 1; } 100% { transform: rotate(0); } }
.back-link { color: #6f6a5e; }

.scene .margin { position: absolute; top: 0; bottom: 0; left: 62px; width: 2px; background: rgba(232, 71, 59, 0.45); }
.scene .doodle { position: absolute; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; }
.scene .doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 12s ease-in-out infinite; animation-delay: inherit; }
@keyframes draw { 0% { stroke-dashoffset: 1; } 30%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.scene.small .doodle { opacity: 0.25; }
.scene.small .margin { left: 10px; }
.pad { border: 2.5px solid #2b2a33; box-shadow: 4px 5px 0 rgba(43, 42, 51, 0.85) !important; }
.step-big { border: 2.5px solid #2b2a33; box-shadow: 4px 5px 0 rgba(43, 42, 51, 0.85); }