/* Danbox: one welcoming lobby, two deliberately different game worlds. */
:root {
  color-scheme: light;
  --bg:#f2f0f8; --surface:#fffefa; --surface-alt:#f5f2fc;
  --ink:#29263c; --muted:#696579; --line:#ded9eb;
  --accent:#6246bf; --accent-ink:#fff; --accent-soft:#ece6fa;
  --shadow:0 18px 60px #3525510b; --radius:24px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); font-synthesis:none;
}
* {box-sizing:border-box}
html {min-height:100%;scroll-behavior:smooth}
body {margin:0;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 80% 0%,#e7dffb80,transparent 50%),var(--bg);color:var(--ink);line-height:1.5}
button,input,textarea,select {font:inherit}
button,a,input,textarea { -webkit-tap-highlight-color:transparent }
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.5}
a {color:inherit}
p {margin:0 0 18px}
h1,h2,h3 {text-wrap:balance;line-height:1.14;margin:0 0 18px}
h1 {font-size:clamp(2rem,4.5vw,3.6rem);letter-spacing:-.055em;font-weight:760}
h2 {font-size:1.25rem;letter-spacing:-.025em}
h3 {font-size:1rem}
::selection {background:var(--accent);color:var(--accent-ink)}
:focus-visible {outline:3px solid var(--accent);outline-offset:4px}
.hidden {display:none!important}
.grain {position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.topbar {width:min(1180px,calc(100% - 64px));margin:26px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:1;min-height:44px}
.brand {display:inline-flex;align-items:center;gap:11px;font-size:1.03rem;letter-spacing:.08em;font-weight:850;text-decoration:none}
.brand-mark {width:37px;height:40px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border-radius:11px 11px 11px 3px;transform:rotate(-6deg);font-size:1.4rem;letter-spacing:0;box-shadow:3px 3px 0 var(--line)}
.quiet {border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 16px;min-height:44px;border-radius:12px;font-weight:650;font-size:.875rem}
.quiet:hover {border-color:var(--accent);background:var(--accent-soft)}
main {width:min(1120px,calc(100% - 64px));margin:0 auto;flex:1;position:relative;z-index:1;padding:52px 0 40px}
.card {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,4vw,48px)}
.eyebrow {text-transform:uppercase;letter-spacing:.15em;font-weight:750;font-size:.68rem;color:var(--accent);margin:0 0 16px}
.lede {font-size:1.075rem;line-height:1.75;color:var(--muted);max-width:53ch}
.button {display:inline-flex;justify-content:center;align-items:center;gap:22px;background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:12px;min-height:50px;padding:14px 23px;line-height:1.3;font-size:.95rem;font-weight:750;text-decoration:none;transition:transform .16s,box-shadow .16s,background-color .16s}
.button:hover:not(:disabled) {transform:translateY(-2px);box-shadow:0 5px 14px #00000016}
.button:active:not(:disabled) {transform:translateY(0)}
.button.mint {background:var(--surface);border-color:var(--line);color:var(--ink)}
.button.mint:hover {border-color:var(--accent);background:var(--accent-soft)}
.button.full {width:100%}
.link-button {border:0;background:transparent;color:var(--accent);font-weight:700;min-height:44px;padding:8px;text-decoration:underline;text-underline-offset:4px}
.hero {display:grid;grid-template-columns:1.04fr 1fr;gap:56px;align-items:center;background:transparent;border:0;box-shadow:none;padding:38px 0 50px}
.hero-copy {min-width:0}
.hero .eyebrow {display:flex;align-items:center;gap:9px}
.tiny-star {font-size:1.25rem;line-height:1}
.title {font-size:clamp(3rem,5.25vw,4.65rem);line-height:1.05;letter-spacing:-.065em;font-weight:780;margin:22px 0 26px}
.title em {font-style:normal;color:var(--accent)}
.hero .lede {font-size:1.04rem;max-width:37ch}
.home-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.home-actions .button {min-width:155px}
.home-actions .button span {font-size:1.1rem}
.home-note {font-size:.76rem;color:var(--muted);margin-top:17px}
.game-shelf {display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.preview {position:relative;min-width:0;min-height:370px;padding:24px 20px;border-radius:18px;overflow:hidden;box-shadow:0 20px 35px #23203a12;display:flex;flex-direction:column;justify-content:flex-end}
.preview-corpse {color:#244437;background:#eee7d2;border:1px solid #d5c9aa;transform:translateY(-22px) rotate(-3deg);background-image:repeating-linear-gradient(0deg,transparent 0 27px,#264b3910 27px 28px)}
.preview-meld {color:#edf3fc;background:radial-gradient(ellipse at 65% 40%,#334373,transparent 67%),#111b35;border:1px solid #394962;transform:translateY(22px) rotate(3deg)}
.preview-top {position:absolute;top:22px;left:20px;right:20px;display:flex;flex-direction:column;gap:6px;font-size:.66rem;font-weight:650}
.preview-tag {font-size:.56rem;letter-spacing:.13em;font-weight:850}
.preview-meld .preview-top {color:#a8c1dc}
.preview h2 {font-size:2rem;line-height:1.03;letter-spacing:-.045em;margin-bottom:12px}
.preview-corpse h2 {font-family:Georgia,serif;font-weight:400}
.preview p {font-size:.77rem;line-height:1.6;margin-bottom:0}
.preview-meld p {color:#b0bfd9}
.paper-art {position:absolute;top:115px;left:24px;right:24px;transform:rotate(5deg);padding:17px 13px;color:#385346;background:#fffbed;box-shadow:2px 6px 15px #26352a16;border-top:1px solid #c4bba1;border-bottom:1px dashed #baad8d}
.paper-art span {font-family:Georgia,serif;font-size:.85rem;line-height:1.5}
.paper-art i {display:block;border-top:1px solid #bbc4b4;margin-top:10px;width:90%}
.paper-art i:last-child {width:64%}
.join-card {max-width:610px;margin:0 auto;padding:36px 42px}
.form-nav {display:flex;gap:6px;background:var(--surface-alt);padding:5px;border:1px solid var(--line);border-radius:12px;margin:0 0 32px}
.form-nav button {flex:1;border:0;border-radius:8px;min-height:42px;background:transparent;color:var(--muted);font-weight:700;font-size:.85rem}
.form-nav button[aria-pressed=true] {background:var(--surface);color:var(--accent);box-shadow:0 2px 5px #3425570b}
.join-card h1 {font-size:2.6rem;margin-bottom:12px}
.form-intro {color:var(--muted);font-size:.94rem;line-height:1.7;max-width:43ch;margin-bottom:26px}
.field {display:grid;gap:8px;margin:20px 0}
.field label, .turn-card label {font-size:.8rem;font-weight:750;letter-spacing:.02em}
.input,.textarea {display:block;width:100%;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:1rem;line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s}
.input::placeholder,.textarea::placeholder {color:var(--muted);opacity:.85}
.input:focus,.textarea:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input:focus-visible,.textarea:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.code-input {text-transform:uppercase;letter-spacing:.3em;font-size:2rem;text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:600;background:var(--surface-alt)}
.textarea {resize:vertical;min-height:160px}
.switch {text-align:center;margin:20px 0 0;font-size:.83rem;color:var(--muted)}
.game-choice {border:0;padding:0;margin:24px 0}
.game-choice legend {font-weight:750;font-size:.8rem;margin-bottom:6px}
.game-option {display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--line);border-radius:12px;margin-top:10px;cursor:pointer;background:var(--surface);transition:border-color .15s}
.game-option:hover {border-color:var(--accent)}
.game-option:has(input:checked) {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--surface-alt)}
.game-option input {width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;margin:0}
.game-option strong,.game-option small {display:block}
.game-option strong {font-size:.97rem;letter-spacing:-.02em}
.game-option small {font-size:.77rem;line-height:1.55;margin-top:4px;color:var(--muted)}
.game-glyph {width:38px;height:40px;flex-shrink:0;position:relative;display:block}
.glyph-corpse {background:#eae8d7;border-radius:6px;color:#355945}
.glyph-corpse i:first-child {position:absolute;border:1.5px solid currentColor;border-radius:2px;width:20px;height:26px;top:6px;left:10px;transform:rotate(8deg);background:#f8f4e8}
.glyph-corpse i:nth-child(2) {position:absolute;width:12px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;top:14px;left:14px;transform:rotate(8deg)}
.glyph-meld {background:#182640;border-radius:12px}
.glyph-meld i {position:absolute;width:20px;height:20px;border:1px solid #8ce2e1;border-radius:50%;top:10px;left:5px}
.glyph-meld i:nth-child(2) {left:14px;border-color:#b5a6fb}
.room-layout {display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:42px;align-items:start}
.panel {min-width:0}
.panel>h1 {margin-top:26px}
.lobby-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.game-identity {display:flex;align-items:center;gap:12px;min-width:0}
.lobby-heading .eyebrow {letter-spacing:.08em;font-size:.68rem;margin:0 0 4px}
.game-caption {font-size:.71rem;color:var(--muted)}
.code-badge {text-align:right;flex-shrink:0}
.room-code-label {font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.room-code {font:600 1.8rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:var(--accent)}
.players {align-self:start;border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface-alt)}
.players h2 {font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:750}
.player-list {display:flex;flex-direction:column;gap:10px}
.player {display:block;font-size:.85rem;font-weight:600;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow-wrap:anywhere;max-width:100%}
.player.host::after {content:'HOST';display:inline-block;margin-left:8px;font-size:.55rem;color:var(--accent);font-weight:800;letter-spacing:.07em}
.empty {font-size:.85rem;color:var(--muted);margin:0}
.status-banner {display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--accent-soft);padding:15px 18px;border-radius:10px;font-size:.9rem;font-weight:600;line-height:1.6;margin:24px 0}
.pulse {width:7px;height:7px;flex-shrink:0;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--surface)}
.game-head {display:flex;gap:18px;align-items:start;justify-content:space-between;margin-bottom:20px}
.game-head h1 {margin:0;max-width:12ch}
.progress {display:inline-block;flex-shrink:0;white-space:nowrap;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:.7rem;font-weight:750;letter-spacing:.02em}
.prompt {font:italic 1.6rem/1.5 Georgia,serif;margin:8px 0 24px;overflow-wrap:anywhere}
.previous {position:relative;background:var(--surface-alt);border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 24px;font:1.25rem/1.65 Georgia,serif;overflow-wrap:anywhere;margin:22px 0}
.scrap-label {display:block;font:700 .59rem/1.5 ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.turn-card {border:1px solid var(--line);border-radius:14px;padding:26px;margin:22px 0;background:var(--surface-alt)}
.turn-card h2 {margin:0 0 10px;font-size:1.35rem}
.turn-card p {font-size:.88rem;color:var(--muted);line-height:1.7}
.turn-card label {display:block;margin-bottom:8px}
.turn-card .field {margin:0 0 18px}
.turn-card .field label {margin-bottom:0}
.turn-card small {color:var(--muted);font-size:.73rem;line-height:1.7}
.counter {text-align:right;font:600 .68rem/1.5 ui-monospace,monospace;color:var(--muted);margin:8px 0 16px}
.waiting {padding:34px 0;text-align:center}
.waiting>p {color:var(--muted);font-size:.94rem;max-width:38ch;margin:0 auto 14px}
.big-name {font-size:clamp(2.2rem,5vw,3.75rem);color:var(--accent);font-weight:650;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere;margin-bottom:20px}
.paper-stamp {display:inline-block;border:1px solid var(--accent);padding:5px 9px;font-size:.52rem;font-weight:800;letter-spacing:.13em;transform:rotate(-4deg);margin:5px 0 24px}
.story {counter-reset:line;background:var(--surface);border:1px solid var(--line);padding:0 26px;margin:28px 0;box-shadow:4px 4px 0 var(--surface-alt),5px 5px 0 var(--line)}
.story-line {counter-increment:line;position:relative;border-bottom:1px dashed var(--line);padding:25px 0 22px 32px;font:1.16rem/1.8 Georgia,serif;overflow-wrap:anywhere}
.story-line:last-child {border:0}
.story-line::before {content:counter(line,decimal-leading-zero);position:absolute;left:0;top:31px;font:600 .6rem/1.5 ui-monospace,monospace;color:var(--muted)}
.by {display:block;font:600 .62rem/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.word-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;position:relative;margin:22px 0}
.word-pair::after {content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);color:var(--muted);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.9rem}
.word-tile {min-width:0;padding:24px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-alt)}
.word-tile strong {display:block;font-size:clamp(1.18rem,2.4vw,1.85rem);font-weight:650;line-height:1.25;letter-spacing:-.03em;overflow-wrap:anywhere}
.word-tile span {display:block;font-size:.68rem;color:var(--muted);margin-top:12px;overflow-wrap:anywhere}
.round-ready {font:500 .74rem/1.6 ui-monospace,monospace;color:var(--muted)}
.round-history {border-top:1px solid var(--line);margin-top:32px;padding-top:24px}
.round-history h2 {font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;font-weight:650;color:var(--muted)}
.round-history h3 {font-size:.67rem;font-weight:650;letter-spacing:.04em;color:var(--muted);margin-bottom:0}
.round-history .word-pair {margin:10px 0 22px}
.round-history .word-tile {padding:13px 15px;background:transparent}
.round-history .word-tile strong {font-size:1rem;letter-spacing:0}
.round-history .word-tile span {font-size:.62rem;margin-top:5px}
.invite-panel {margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.invite-panel h2 {font-size:1rem;margin-bottom:9px}
.invite-panel p {font-size:.85rem;color:var(--muted)}
.invite-panel label {display:block;font-size:.72rem;font-weight:700;margin-bottom:8px}
.invite-panel .input {font-size:.85rem;color:var(--muted)}
.invite-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.invite-actions .button {padding:10px 18px;min-height:44px;font-size:.8rem}
.invite-conflict {margin-bottom:24px;padding:24px}
.invite-conflict h2 {font-size:1.2rem}
.invite-conflict p {font-size:.85rem;color:var(--muted)}
.error-box {background:#fff0f0;border:1px solid #e5b7b7;color:#9b2525;border-radius:10px;padding:12px 15px;font-size:.875rem;margin:12px 0}
.toast {position:fixed;z-index:10;bottom:24px;left:50%;transform:translate(-50%,12px);visibility:hidden;opacity:0;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;box-shadow:0 4px 25px #0002;font-size:.85rem;font-weight:600;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}
.toast.show {visibility:visible;opacity:1;transform:translate(-50%,0)}
.loading-card {max-width:380px;margin:auto;text-align:center}
.loading-card p {margin:20px 0 0;color:var(--muted)}
.spinner {width:32px;height:32px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:auto;animation:spin 1s linear infinite}
footer {position:relative;z-index:1;text-align:center;color:var(--muted);font-size:.7rem;letter-spacing:.03em;padding:18px 24px 30px}
hr {border:0;border-top:1px solid var(--line);margin:28px 0}

/* Exquisite Corpse — a quietly eccentric, folded-paper writing room. */
body[data-theme=corpse] {
  --bg:#e8e5dc; --surface:#fbf8ed; --surface-alt:#f1eddf;
  --ink:#273f34; --muted:#5d695b; --line:#d5d2bf;
  --accent:#315b43; --accent-ink:#fffbed; --accent-soft:#e7ebda;
  --radius:8px; --shadow:0 12px 40px #293d3010;
  background:radial-gradient(ellipse at 25% 0%,#f6f1df,transparent 65%),var(--bg);
}
body[data-theme=corpse] .grain {opacity:.18}
body[data-theme=corpse] .card.room-layout {border-top:4px solid var(--accent)}
body[data-theme=corpse] .panel h1,body[data-theme=corpse] .big-name {font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
body[data-theme=corpse] .panel>h1 {font-size:clamp(2.4rem,4.5vw,3.65rem)}
body[data-theme=corpse] .turn-card h2 {font-family:Georgia,serif;font-weight:400;font-size:1.6rem}
body[data-theme=corpse] .button,body[data-theme=corpse] .quiet,body[data-theme=corpse] .input,body[data-theme=corpse] .textarea {border-radius:5px}
body[data-theme=corpse] .textarea {font-family:Georgia,serif;font-size:1.13rem;line-height:1.85;background-image:repeating-linear-gradient(transparent 0 32px,#d7dbcb70 32px 33px);background-position:0 16px}
body[data-theme=corpse] .players {border-radius:6px;border-top:1px dashed var(--accent)}
body[data-theme=corpse] .turn-card {border-radius:6px;border-top:1px dashed #b6bba5}
body[data-theme=corpse] .previous {transform:rotate(-.5deg);box-shadow:2px 3px 0 var(--line);border-left-width:1px;border-top:1px dashed #b6bba5}
body[data-theme=corpse] .status-banner {border-radius:5px}
body[data-theme=corpse] .brand-mark {border-radius:3px;transform:rotate(-5deg)}

/* Mind Meld — coffee-shop scraps, torn notebook paper and a slightly leaky pen. */
body[data-theme=mind_meld] {
  color-scheme:light;
  --bg:#c9b08d; --surface:#fffae9; --surface-alt:#f5edcf;
  --ink:#342d28; --muted:#695749; --line:#c4b599;
  --accent:#a4392b; --accent-ink:#fff9e5; --accent-soft:#f1dfbd;
  --radius:2px; --shadow:2px 7px 12px #43301c22;
  background: url('paper-grain.svg') repeat, var(--bg);
}
body[data-theme=mind_meld] .grain {opacity:.08}
body[data-theme=mind_meld] .brand-mark {
  background:#e8c971;color:#342d28;border:1px solid #6c5641;box-shadow:2px 3px 0 #80684a66;
  transform:rotate(-8deg);border-radius:1px;
}
body[data-theme=mind_meld] .card.room-layout {
  position:relative;isolation:isolate;background:transparent;border:0;border-radius:0;
  box-shadow:none;padding-top:40px;padding-bottom:48px;
  filter:drop-shadow(1px 6px 3px #4c341c28);
}
body[data-theme=mind_meld] .card.room-layout::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('paper-grain.svg') repeat,#fffae9;
  clip-path:polygon(0% 6px,2% 3px,4% 8px,7% 2px,9% 7px,12% 4px,16% 8px,18% 1px,23% 6px,26% 2px,30% 7px,34% 3px,37% 9px,40% 4px,43% 7px,46% 2px,51% 6px,56% 3px,59% 8px,63% 2px,67% 6px,72% 1px,75% 8px,80% 4px,84% 7px,88% 2px,92% 8px,97% 3px,100% 6px,100% calc(100% - 8px),97% calc(100% - 3px),94% calc(100% - 10px),90% calc(100% - 5px),87% calc(100% - 12px),83% calc(100% - 4px),79% calc(100% - 9px),75% calc(100% - 2px),71% calc(100% - 7px),66% calc(100% - 3px),62% calc(100% - 12px),58% calc(100% - 4px),55% calc(100% - 8px),51% calc(100% - 1px),47% calc(100% - 6px),43% calc(100% - 3px),39% calc(100% - 10px),35% calc(100% - 5px),31% calc(100% - 12px),27% calc(100% - 4px),23% calc(100% - 8px),19% calc(100% - 2px),15% calc(100% - 9px),11% calc(100% - 3px),7% calc(100% - 7px),4% calc(100% - 2px),0% calc(100% - 9px));
}
body[data-theme=mind_meld] .lobby-heading {border-bottom:2px dashed #c4b599}
body[data-theme=mind_meld] .room-code {color:#a4392b;transform:rotate(2deg);font-weight:850}
body[data-theme=mind_meld] .room-code-label,body[data-theme=mind_meld] .eyebrow {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;
}
body[data-theme=mind_meld] .panel h1 {
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;
  letter-spacing:-.045em;line-height:1.05;max-width:13ch;
}
body[data-theme=mind_meld] .players {
  position:relative;border:1px solid #d9bd74;border-radius:0;
  padding-top:30px;transform:rotate(1deg);box-shadow:2px 4px 3px #70593b20;
  background:url('paper-grain.svg'),#f4db90;
}
body[data-theme=mind_meld] .players::before,body[data-theme=mind_meld] .word-tile::before {
  content:'';position:absolute;pointer-events:none;top:-10px;left:calc(50% - 31px);
  width:62px;height:22px;background:#e4cfa199;border-left:1px dotted #a7916270;border-right:1px dotted #a7916270;
  transform:rotate(-6deg);box-shadow:0 1px 1px #88714e22;
}
body[data-theme=mind_meld] .players h2 {font-family:ui-monospace,monospace;color:#644e34}
body[data-theme=mind_meld] .player {background:transparent;border:0;border-bottom:1px dashed #b4995b;border-radius:0;padding:10px 0;color:#342d28}
body[data-theme=mind_meld] .player:last-child {border:0}
body[data-theme=mind_meld] .player.host::after {border:1px solid #a4392b;padding:1px 3px;transform:rotate(-5deg)}
body[data-theme=mind_meld] .button {border-radius:2px;border:1px solid #762d21;box-shadow:2px 3px 0 #6c342425;font-weight:750}
body[data-theme=mind_meld] .button.pink {background:#a4392b;color:#fff9e5}
body[data-theme=mind_meld] .button.pink:hover {background:#8b2f24;box-shadow:3px 4px 0 #6c342438}
body[data-theme=mind_meld] .button.mint {background:#ede4c9;border-color:#b6a17b;color:#493c2d}
body[data-theme=mind_meld] .quiet {border-radius:2px;background:#f6efd9;border-color:#a28b6b}
body[data-theme=mind_meld] .turn-card {
  position:relative;border-radius:0;border:1px solid #c3b698;border-left:4px solid #c8857880;
  background:url('paper-grain.svg'),repeating-linear-gradient(transparent 0 27px,#92aab223 27px 28px),#f7f0d9;
  box-shadow:2px 4px 0 #d5c9ac; padding-top:26px;
}
body[data-theme=mind_meld] .turn-card::after {
  content:'';position:absolute;pointer-events:none;width:34px;height:20px;right:10px;top:-9px;
  border:2px solid #7d7c70;border-radius:10px;transform:rotate(-24deg);box-shadow:inset 0 0 0 3px #f7f0d9,inset 0 0 0 4px #9b998b;
}
body[data-theme=mind_meld] .input {border:0;border-bottom:2px solid #8b8067;border-radius:0;background:#fffdf6;color:#263c4b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body[data-theme=mind_meld] .input:focus {border-color:#a4392b;box-shadow:0 2px 0 #a4392b}
body[data-theme=mind_meld] .progress {background:#f5dc92;color:#614528;border:1px solid #d1b66e;border-radius:1px;transform:rotate(3deg);font-family:ui-monospace,monospace}
body[data-theme=mind_meld] .status-banner {background:#f7e8c2;border:1px dashed #b59e72;border-radius:1px}
body[data-theme=mind_meld] .word-pair {gap:22px;margin:30px 0}
body[data-theme=mind_meld] .word-pair::after {content:'&';font:italic 1.5rem Georgia,serif;background:none;color:#774b2c;z-index:1}
body[data-theme=mind_meld] .word-tile {
  position:relative;border:0;border-radius:0;padding:27px 20px 24px;
  background:url('paper-grain.svg'),#f6df95;box-shadow:2px 5px 4px #64472520;
  transform:rotate(-1deg);border-bottom:2px dashed #d1b665;
}
body[data-theme=mind_meld] .word-tile:nth-child(2) {background:url('paper-grain.svg'),#f0c0a7;transform:rotate(1deg);border-color:#c4947b}
body[data-theme=mind_meld] .word-tile:nth-child(2)::before {transform:rotate(9deg)}
body[data-theme=mind_meld] .word-tile strong {color:#283e4b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:700;letter-spacing:-.05em}
body[data-theme=mind_meld] .word-tile span {color:#65503d;font-family:ui-monospace,monospace;font-size:.68rem}
body[data-theme=mind_meld] .round-history {border-top:2px dashed #c4b599}
body[data-theme=mind_meld] .round-history .word-pair {margin-top:24px}
body[data-theme=mind_meld] .round-history .word-tile {padding:18px 13px 14px;box-shadow:1px 2px 2px #64472515}
body[data-theme=mind_meld] .round-history .word-tile::before {width:42px;left:calc(50% - 21px);height:17px;top:-8px}
body[data-theme=mind_meld] .error-box {background:#ffe1d3;color:#852c22;border-color:#b46e59;border-radius:1px}
body[data-theme=mind_meld] .invite-panel {border-top:1px dashed #c4b599}
body[data-theme=mind_meld] .invite-panel .input {font-size:.8rem}
.meld-desk-art {height:92px;position:relative;margin:0 0 12px;background:url('margin-doodles.svg') no-repeat 90px 7px/140px 70px}
.scribble-note {
  display:inline-block;position:relative;margin-top:20px;padding:7px 11px;
  font:italic 700 1.05rem Georgia,serif;color:#8b3326;background:#edcf82;
  transform:rotate(-6deg);border-bottom:1px solid #c7ac68;box-shadow:1px 2px 2px #8a693626;
}
.coffee-mark {position:absolute;right:0;top:-12px;width:125px;height:125px;background:url('coffee-ring.svg') center/contain no-repeat;opacity:.75;pointer-events:none}
.is-matched .scribble-note {color:#fff8e4;background:#a4392b;border:2px double #8d3024;font-size:1.12rem;transform:rotate(-8deg)}
/* The shelf and selector preview use the same paper identity. */
.preview-meld {
  color:#493527;background:url('coffee-ring.svg') no-repeat right -30px top 40px/170px,
    url('paper-grain.svg'),repeating-linear-gradient(transparent 0 26px,#9d9d8828 26px 27px),#f4db98;
}
.preview-meld .preview-top,.preview-meld p {color:#614936}
.preview-meld h2 {font-family:Georgia,serif;font-style:italic;font-weight:700}
.glyph-meld {background:#efd697;border-radius:2px}
.glyph-meld i {width:17px;height:23px;border:1px solid #a48a56;border-radius:0;top:7px;left:4px;background:#fff5d9;transform:rotate(-12deg)}
.glyph-meld i:nth-child(2) {left:17px;top:11px;background:#edc0a5;border-color:#ac7b64;transform:rotate(10deg)}
.meld-preview-art {position:absolute;left:12px;right:12px;top:115px;height:115px}
.meld-preview-art i {position:absolute;left:10%;top:0;width:70px;padding:10px;background:#fff5d9;box-shadow:1px 3px 3px #71573a30;transform:rotate(-11deg);font:italic 1.05rem Georgia,serif;line-height:1.25}
.meld-preview-art i:nth-child(2) {left:auto;right:5%;top:25px;transform:rotate(8deg);background:#edbea4}
.meld-preview-art span {position:absolute;left:43%;top:17px;font:italic 2.5rem Georgia,serif;color:#a4392b;z-index:1;transform:rotate(12deg)}

@keyframes spin {to {transform:rotate(360deg)}}
@media(min-width:1100px) {body[data-theme=mind_meld] .panel>h1 {font-size:3.7rem}}
@media(max-width:1000px) {
  .hero {gap:30px;grid-template-columns:1fr 1fr}
  .game-shelf {gap:12px}
  .preview {padding:20px 15px;min-height:340px}
  .preview-top {left:15px;right:15px}
  .preview h2 {font-size:1.7rem}
  .paper-art {left:15px;right:15px;padding:12px}
  .room-layout {grid-template-columns:minmax(0,1fr) 200px;gap:28px}
}
@media(max-width:820px) {
  .room-layout {grid-template-columns:1fr;gap:30px}
  .players {order:2}
  .player-list {flex-direction:row;flex-wrap:wrap}
  .hero {grid-template-columns:1fr;gap:44px;padding-top:12px}
  .hero-copy {max-width:620px}
  .title {font-size:clamp(3.2rem,7.5vw,4.8rem)}
  .title br:last-child {display:none}
  .hero .lede {max-width:45ch}
  .game-shelf {gap:22px;max-width:620px;width:100%;margin:12px auto 0}
  .preview {min-height:320px;transform:none}
  .preview h2 {font-size:2.2rem}
  .paper-art {left:30px;right:30px;top:105px;max-width:240px}
}
@media(max-width:540px) {
  .topbar {width:calc(100% - 36px);margin-top:18px;gap:12px}
  .brand {font-size:.9rem;gap:9px}
  .brand-mark {width:31px;height:34px;font-size:1.15rem;border-radius:9px 9px 9px 3px}
  .quiet {font-size:.75rem;padding:9px 12px}
  main {width:calc(100% - 32px);padding:30px 0 22px}
  .card {padding:25px 22px;border-radius:18px}
  .hero {padding:10px 0 12px}
  .hero .eyebrow {font-size:.6rem;letter-spacing:.1em}
  .title {font-size:clamp(2.75rem,10.8vw,3.6rem);margin:16px 0 22px}
  .hero .lede {font-size:.95rem;line-height:1.75}
  .home-actions {gap:10px;margin-top:24px}
  .home-actions .button {flex:1;min-width:0;padding:14px 10px;gap:10px;font-size:.85rem}
  .home-note {font-size:.68rem}
  .game-shelf {gap:14px;margin:0}
  .preview {min-height:300px;padding:18px 13px;border-radius:13px}
  .preview-top {top:18px;left:13px;right:13px;font-size:.6rem}
  .preview-tag {font-size:.48rem;letter-spacing:.05em}
  .preview h2 {font-size:1.6rem}
  .preview p {font-size:.7rem;line-height:1.5}
  .paper-art {left:12px;right:12px;top:86px;padding:12px 8px}
  .paper-art span {font-size:.66rem}
  .paper-art i {margin-top:7px}
  .join-card {padding:24px}
  .join-card h1 {font-size:2.2rem}
  .form-nav {margin-bottom:26px}
  .form-intro {font-size:.88rem}
  .game-option {padding:14px 12px;gap:10px}
  .game-option .game-glyph {width:32px;flex-shrink:0}
  .game-option strong {font-size:.86rem}
  .game-option small {font-size:.69rem}
  .game-choice {margin:24px 0}
  .game-glyph {width:32px;height:35px}
  .glyph-corpse i:first-child {left:6px;top:4px}
  .glyph-corpse i:nth-child(2) {left:10px;top:12px}
  .glyph-meld i {width:17px;height:17px;top:9px;left:3px}
  .glyph-meld i:nth-child(2) {left:12px}
  .game-identity {gap:9px}
  .lobby-heading {gap:12px;padding-bottom:20px;margin-bottom:24px}
  .lobby-heading .eyebrow {font-size:.56rem;letter-spacing:.035em;margin-bottom:3px}
  .game-caption {font-size:.58rem;display:block;max-width:18ch}
  .room-code-label {font-size:.5rem}
  .room-code {font-size:1.35rem;letter-spacing:.07em}
  .panel>h1 {font-size:2.25rem}
  .panel .lede {font-size:.93rem;line-height:1.7}
  .players {padding:17px}
  .player {font-size:.78rem;padding:9px 10px}
  .status-banner {padding:13px 14px;font-size:.8rem;margin:20px 0}
  .game-head {gap:12px;flex-wrap:wrap}
  .game-head h1 {font-size:2.2rem;max-width:13ch}
  .progress {font-size:.65rem;padding:6px 11px}
  .prompt {font-size:1.35rem;line-height:1.55}
  .turn-card {padding:19px 16px;margin:20px 0}
  .turn-card h2 {font-size:1.2rem}
  .turn-card .button {padding:14px;font-size:.9rem}
  .previous {padding:18px;font-size:1.13rem}
  .story {padding:0 17px}
  .story-line {font-size:1.06rem;padding-left:24px}
  .word-pair {gap:12px}
  .word-tile {padding:18px 12px;border-radius:12px}
  .word-tile strong {font-size:1.15rem}
  .word-pair::after {width:19px;height:19px;font-size:.72rem}
  .word-tile span {font-size:.64rem}
  .round-ready {font-size:.67rem}
  .invite-panel .input {font-size:1rem}
  .invite-actions {gap:8px}
  .invite-panel p {font-size:.8rem}
  .invite-actions .quiet {font-size:.8rem}
  body[data-theme=corpse] .panel>h1 {font-size:2.5rem}
  footer {font-size:.64rem;padding-bottom:24px}
}
@media(max-width:390px) {
  .game-shelf {gap:10px}
  .game-identity .game-glyph {display:none}
  .word-pair {grid-template-columns:1fr;gap:14px}
  .word-pair::after {top:50%;width:23px;height:23px}
  .word-tile {padding:16px}
  .round-history .word-pair {grid-template-columns:1fr 1fr;gap:10px}
  .round-history .word-tile {padding:10px}
  .round-history .word-tile strong {font-size:.85rem}
}

/* The lobby is the party invitation, not a waiting room. Game themes stay separate. */
body[data-theme=lobby] {
  --bg:#ffe88a; --surface:#fffdf3; --surface-alt:#f1eaff;
  --ink:#28213e; --muted:#62526e; --line:#28213e;
  --accent:#6740c7; --accent-ink:#fff; --accent-soft:#e8ddff;
  --shadow:7px 8px 0 #28213e; --radius:22px;
  background:radial-gradient(#bc96224a 1px,transparent 1px) 0 0/18px 18px,var(--bg);
}
body[data-theme=lobby]::before,body[data-theme=lobby]::after {
  content:'';position:fixed;pointer-events:none;z-index:0;
}
body[data-theme=lobby]::before {
  width:420px;height:420px;top:-270px;right:-100px;border:36px solid #b898f2;
  border-radius:50%;box-shadow:0 0 0 3px #28213e;transform:rotate(-18deg);
}
body[data-theme=lobby]::after {
  width:220px;height:220px;bottom:-150px;left:-80px;background:#ff99b9;
  border:3px solid #28213e;border-radius:34px;transform:rotate(25deg);
}
body[data-theme=lobby] .brand {font-weight:950}
body[data-theme=lobby] .brand-mark {
  background:#b7eece;color:#28213e;border:2px solid #28213e;
  box-shadow:3px 3px 0 #28213e;border-radius:10px;transform:rotate(-9deg);
}
body[data-theme=lobby] .hero {padding-top:28px;gap:48px}
body[data-theme=lobby] .hero .eyebrow {
  display:inline-flex;align-items:center;background:#fffdf3;color:#28213e;
  border:2px solid #28213e;border-radius:999px;padding:8px 15px;
  box-shadow:3px 3px 0 #28213e;transform:rotate(-3deg);letter-spacing:.12em;
}
body[data-theme=lobby] .tiny-star {color:#6740c7;animation:lobby-twirl 16s linear infinite}
body[data-theme=lobby] .title {
  font-size:clamp(3.2rem,5.6vw,5rem);font-weight:950;line-height:1.01;
  letter-spacing:-.065em;margin:25px 0 30px;
}
body[data-theme=lobby] .title em {color:#6740c7;text-shadow:2px 3px 0 #fffdf3}
body[data-theme=lobby] .hero .lede {color:#463952;font-weight:550;max-width:35ch}
body[data-theme=lobby] .home-actions {gap:16px}
body[data-theme=lobby] .button {
  border:2px solid #28213e;border-radius:12px;box-shadow:4px 5px 0 #28213e;
  font-weight:850;transition:transform .15s,box-shadow .15s,background-color .15s;
}
body[data-theme=lobby] .button.mint {background:#ff9fbd;color:#28213e}
body[data-theme=lobby] .button:hover:not(:disabled) {
  transform:translate(-1px,-3px);box-shadow:6px 8px 0 #28213e;
}
body[data-theme=lobby] .button:active:not(:disabled) {
  transform:translate(3px,4px);box-shadow:1px 1px 0 #28213e;
}
body[data-theme=lobby] .home-note {font-weight:650;font-size:.74rem;margin-top:22px}
body[data-theme=lobby] .game-shelf {position:relative;padding-top:28px}
body[data-theme=lobby] .game-shelf::before {
  content:'PICK YOUR FLAVOUR';position:absolute;top:-24px;left:50%;
  transform:translateX(-50%) rotate(4deg);white-space:nowrap;
  color:#28213e;background:#b7eece;border:2px solid #28213e;border-radius:5px;
  padding:9px 15px;box-shadow:3px 3px 0 #28213e;
  font-size:.7rem;font-weight:850;letter-spacing:.1em;
}
body[data-theme=lobby] .preview {
  border:2px solid #28213e;box-shadow:6px 8px 0 #28213e;
  transition:transform .2s,box-shadow .2s;
}
body[data-theme=lobby] .preview:hover {transform:translateY(-8px) rotate(0deg);box-shadow:7px 14px 0 #28213e}
body[data-theme=lobby] .preview-top {font-weight:750}
body[data-theme=lobby] .join-card {border:2px solid #28213e;position:relative;padding-top:32px}
body[data-theme=lobby] .join-card::before {
  content:'';position:absolute;top:-9px;right:25px;width:58px;height:17px;
  background:#b7eece;border:2px solid #28213e;transform:rotate(8deg);border-radius:3px;
}
body[data-theme=lobby] .join-card h1 {font-weight:900;letter-spacing:-.05em}
body[data-theme=lobby] .join-card>.eyebrow {color:#6740c7;letter-spacing:.09em;font-weight:850}
body[data-theme=lobby] .form-intro {color:#62526e}
body[data-theme=lobby] .form-nav {background:#e8ddff;border:2px solid #28213e;gap:7px;padding:5px}
body[data-theme=lobby] .form-nav button {font-weight:850;color:#534765}
body[data-theme=lobby] .form-nav button[aria-pressed=true] {
  background:#6740c7;color:#fff;box-shadow:2px 2px 0 #28213e;
}
body[data-theme=lobby] .input {border:2px solid #aaa0b6;border-radius:10px}
body[data-theme=lobby] .input:focus {border-color:#6740c7}
body[data-theme=lobby] .code-input {background:#f3edff;color:#6740c7;letter-spacing:.35em}
body[data-theme=lobby] .field label,body[data-theme=lobby] .game-choice legend {font-weight:800}
body[data-theme=lobby] .game-option {border:2px solid #c1b9cc;transition:transform .15s,box-shadow .15s}
body[data-theme=lobby] .game-option:has(input:checked) {
  border-color:#28213e;box-shadow:4px 4px 0 #28213e;background:#e9ddff;transform:rotate(-.5deg);
}
body[data-theme=lobby] .game-option.option-corpse:has(input:checked) {background:#e7edd8}
body[data-theme=lobby] .game-option input {accent-color:#6740c7}
body[data-theme=lobby] .switch {margin-top:27px}
body[data-theme=lobby] footer {font-weight:650}
@keyframes lobby-twirl {to {transform:rotate(360deg)}}
@media(max-width:820px) {
  body[data-theme=lobby] .hero {gap:55px}
  body[data-theme=lobby] .game-shelf {padding-top:16px;margin-top:12px}
  body[data-theme=lobby] .game-shelf::before {top:-31px}
}
@media(max-width:540px) {
  body[data-theme=lobby] .hero {padding-top:8px;gap:48px}
  body[data-theme=lobby] .hero .eyebrow {font-size:.6rem;padding:6px 11px}
  body[data-theme=lobby] .title {font-size:clamp(2.7rem,12vw,3.7rem);margin-top:24px}
  body[data-theme=lobby] .home-actions {gap:13px;padding-right:4px}
  body[data-theme=lobby] .home-actions .button {font-size:.83rem;padding:14px 9px}
  body[data-theme=lobby] .home-note {font-size:.67rem}
  body[data-theme=lobby] .join-card {padding:24px 21px}
  body[data-theme=lobby] .join-card h1 {font-size:2.2rem}
  body[data-theme=lobby] .join-card>.eyebrow {font-size:.61rem}
  body[data-theme=lobby] .game-option {padding:13px 10px}
  body[data-theme=lobby] .game-shelf {gap:14px;padding-right:4px}
  body[data-theme=lobby] .preview {box-shadow:4px 6px 0 #28213e}
  body[data-theme=lobby] .game-shelf::before {font-size:.6rem;padding:7px 11px}
}

@media(max-width:540px) {
  body[data-theme=mind_meld] .card.room-layout {padding:28px 22px 35px}
  body[data-theme=mind_meld] .panel h1,body[data-theme=mind_meld] .game-head h1 {font-size:2.45rem}
  body[data-theme=mind_meld] .word-tile {padding:25px 16px 20px}
  body[data-theme=mind_meld] .word-tile strong {font-size:1.2rem}
  body[data-theme=mind_meld] .players {transform:none}
  body[data-theme=mind_meld] .turn-card {padding:22px 15px}
  body[data-theme=mind_meld] .invite-panel .input {font-size:1rem}
  .meld-desk-art {height:82px;background-position:65px 8px;background-size:120px 60px;margin-bottom:12px}
  .scribble-note {font-size:.85rem;max-width:100px}
  .coffee-mark {right:0;width:95px;height:95px;top:0;opacity:.65}
  .meld-preview-art {top:95px;left:6px;right:6px;height:95px}
  .meld-preview-art i {width:55px;padding:9px;font-size:.86rem;left:5%}
  .meld-preview-art i:nth-child(2) {right:4%;top:22px}
  .meld-preview-art span {left:42%;top:10px;font-size:2.1rem}
}
/* Lovely Dave gets a little sketchbook in the game box. */
.preview-dave {
  grid-column:1/-1;min-height:180px;transform:rotate(-1deg);padding:24px;margin-top:20px;
  color:#304753;background:repeating-linear-gradient(0deg,transparent 0 23px,#7896a225 23px 24px),#e3ece5;
}
.preview-dave h2,.preview-dave p {max-width:62%;position:relative;z-index:1}
.preview-dave h2 {font-family:Georgia,serif;font-style:italic}
.preview-dave .preview-top {flex-direction:row;justify-content:space-between}
.dave-preview-art {position:absolute;right:22px;bottom:15px;width:110px;height:120px;transform:rotate(6deg);color:#37656a}
.dave-preview-head {position:absolute;left:35px;top:0;font:50px/1 Georgia,serif;transform:rotate(-8deg)}
.dave-preview-art i {position:absolute;left:40px;top:43px;width:33px;height:45px;border:2px solid #37656a;border-radius:30% 35% 10% 20%;background:#e6b77a}
.dave-preview-art i::before {content:'';position:absolute;left:-20px;top:4px;width:69px;height:22px;border-left:2px solid #37656a;border-right:2px solid #37656a;transform:rotate(-10deg)}
.dave-preview-art i::after {content:'';position:absolute;left:3px;top:42px;width:22px;height:28px;border-left:2px solid #37656a;border-right:2px solid #37656a;transform:rotate(6deg)}
.dave-preview-art b {position:absolute;left:-6px;top:8px;transform:rotate(-14deg);font:italic .85rem Georgia,serif}
.glyph-dave {background:#e2eccc;border-radius:2px}
.glyph-dave i:first-child {position:absolute;left:13px;top:5px;width:13px;height:13px;border:1.5px solid #37656a;border-radius:50%}
.glyph-dave i:nth-child(2) {position:absolute;left:14px;top:19px;width:11px;height:15px;border:1.5px solid #37656a;transform:rotate(-5deg)}
@media(max-width:540px) {
  .preview-dave {min-height:175px;padding:18px}
  .preview-dave h2 {font-size:1.7rem}
  .preview-dave .preview-top {font-size:.6rem}
  .dave-preview-art {right:6px;bottom:8px;transform:scale(.85) rotate(6deg)}
  .glyph-dave i:first-child {left:9px;top:3px}
  .glyph-dave i:nth-child(2) {left:10px;top:17px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}