:root {
  color-scheme:dark;
  font-family:system-ui,sans-serif;
  background:#100e1b;
  color:#f9f4ff;
  --surface:#1c192d;
  --line:#49405d;
  --quiet:#c6bfd5;
  --accent:#d2adff;
  --mint:#a4f4e1;
}
* {box-sizing:border-box}
[hidden] {display:none!important}
body {
  margin:0;
  min-height:100dvh;
  background:radial-gradient(ellipse at 74% 12%,#2a1b45 0,transparent 56%),#100e1b;
}
button,input,select {font:inherit}
button,select,input:not([type=checkbox]):not([type=range]),#tools-panel summary {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:inherit;
  padding:.5rem .72rem;
}
button,summary {cursor:pointer}
button:disabled {opacity:.54;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--mint);
  outline-offset:3px;
}
button.primary {
  background:#d6b5ff;
  color:#211336;
  border-color:#d6b5ff;
  font-weight:740;
}
button.primary:hover:not(:disabled) {background:#e4caff}
a {color:inherit;text-underline-offset:.2em}
.site-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.5rem max(1rem,env(safe-area-inset-right)) .5rem max(1rem,env(safe-area-inset-left));
  border-bottom:1px solid #ffffff16;
}
.brand {font-weight:820;letter-spacing:.27em;text-decoration:none;font-size:.8rem}
.brand-symbol {color:var(--mint);font-size:1.35rem;vertical-align:middle;letter-spacing:0;margin-right:.27rem}
main {
  max-width:1400px;
  margin:auto;
  padding:0 max(.55rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.55rem,env(safe-area-inset-left));
}
.landing {
  max-width:69rem;
  margin:auto;
  padding:clamp(1.5rem,6vh,5rem) clamp(.5rem,2.5vw,1.5rem);
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:clamp(1rem,5vw,5rem);
  align-items:center;
}
.lobby {max-width:52rem;margin:auto;padding:clamp(1.5rem,6vh,4rem) .5rem}
.eyebrow {font-size:.68rem;letter-spacing:.18em;color:var(--mint);font-weight:760}
h1 {font:650 clamp(2.5rem,8vw,6rem)/.99 Georgia,serif;margin:.7rem 0 .9rem;letter-spacing:-.045em}
h1 em {font-weight:460;color:var(--accent)}
p {color:var(--quiet);line-height:1.5}
.lead {font-size:clamp(1rem,2vw,1.24rem)}
.small {font-size:.8rem;max-width:34rem}
.landing-card {
  border:1px solid #8f72bc55;
  border-radius:18px;
  padding:.85rem;
  background:#1b152bba;
  max-width:27rem;
}
.nickname {display:grid;gap:.35rem;font-size:.83rem;color:var(--quiet)}
.consent {display:flex;align-items:center;gap:.5rem;margin:.65rem 0;font-size:.85rem}
.consent input,.glow input {width:1.1rem;height:1.1rem;flex-shrink:0;accent-color:#d6b5ff}
.landing-card .actions {margin:.45rem 0}
#create {width:100%;display:flex;justify-content:space-between;align-items:center}
#join {display:grid;grid-template-columns:minmax(0,1fr) auto}
#join input {width:100%;min-width:0;text-transform:uppercase}
.landing-links {display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.45rem}
.landing-art {
  margin:0;
  border:1px solid #8f72bc6a;
  background:radial-gradient(ellipse at 54% 49%,#432256,#20182f 55%,#141324);
  border-radius:24px;
  padding:.8rem;
  box-shadow:0 20px 70px #08051160;
}
.landing-art svg {display:block;width:100%}
.art-lines {filter:drop-shadow(0 0 10px #ca9eff8c)}
.landing-art figcaption {display:flex;justify-content:space-between;gap:.4rem;padding:.35rem .4rem .1rem;font-size:.7rem;color:var(--quiet)}
.landing-art figcaption span:first-child {letter-spacing:.13em;color:var(--mint)}
.actions,.tools,.secondary {display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.55rem 0}
.actions button[aria-pressed=true] {border-color:var(--mint);background:#293842}
.room-head {display:flex;align-items:center;gap:.4rem;padding:.35rem 0}
.room-head div {flex:1;min-width:0}
.room-head strong {display:block;letter-spacing:.08em;font-size:.85rem}
.clock-strip {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:.3rem;
  align-items:center;
  padding:.4rem .48rem;
  border-top:1px solid #ffffff14;
  border-bottom:1px solid #ffffff14;
  font-size:clamp(.72rem,2.9vw,.95rem);
  font-variant-numeric:tabular-nums;
}
.clock-strip span {min-width:0;overflow-wrap:anywhere}
.clock-strip span:last-child {text-align:right}
.clock-strip strong {color:#dbc2ff;text-align:center}
.board {
  height:clamp(220px,calc(100dvh - 322px),950px);
  border:1px solid #786a98;
  border-radius:12px;
  background:#100e22;
  overflow:hidden;
  margin-top:.35rem;
}
.board[data-environment=paper] {background:#f5ead5}
canvas {display:block;width:100%;height:100%;touch-action:none}
.turn-status {
  min-height:1.25rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  color:var(--quiet);
  font-size:.8rem;
  padding-top:.18rem;
}
#gift-notice:not(:empty) {color:#ffe2a0;font-weight:750}
#reaction:not(:empty) {font-size:1.14rem;line-height:1}
#chaos-status {font-size:.8rem;color:#f4bcf1}
.tools,.secondary {margin:.28rem 0}
.tools .primary {flex:1}
.ink {display:flex;align-items:center}
.ink input {width:44px;padding:.2rem!important;cursor:pointer}
details {position:relative}
summary {min-height:44px;display:flex;align-items:center;padding:.4rem}
#tools-panel summary::after {content:"+";margin-left:.35rem;color:var(--mint)}
#tools-panel[open] summary::after {content:"−"}
.tool-panel {
  position:absolute;
  z-index:3;
  bottom:calc(100% + .4rem);
  left:0;
  width:min(225px,70vw);
  padding:.55rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 26px #05041078;
}
.tool-panel label,dialog label {display:grid;gap:.2rem;margin:.3rem 0}
.tool-panel .glow {display:flex;align-items:center;gap:.4rem}
.swatches {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.22rem}
.swatches button {min-height:34px;min-width:0;padding:0}
.secondary {gap:.32rem}
.secondary button,.secondary select {padding-inline:.44rem;font-size:.8rem}
.control-pair,.clock-tools {display:flex;align-items:center;gap:.14rem}
.clock-tools button[aria-pressed=true] {border-color:var(--mint);color:var(--mint);background:#26323a}
.results {margin:1rem 0;padding:clamp(.8rem,3vw,1.5rem);background:#231a36;border:1px solid var(--line);border-radius:14px}
.results h2 {font:650 clamp(1.8rem,4vw,2.8rem)/1 Georgia,serif;margin:.42rem 0}
.results p {margin:.25rem 0}
#replay-panel {margin-top:.75rem}
.report {font-size:.8rem;color:var(--quiet)}
.report form {display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
#notice:not(:empty) {
  position:fixed;
  z-index:8;
  bottom:max(.65rem,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:min(90%,30rem);
  border:1px solid var(--line);
  border-radius:12px;
  background:#25213b;
  padding:.65rem;
  text-align:center;
}
dialog {color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-width:min(82vw,280px)}
dialog::backdrop {background:#03040bbc}
#game:is(:fullscreen,.immersive) {
  background:#100e1b;
  padding:max(.5rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right))
    max(.5rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));
  overflow:auto;
  overscroll-behavior:contain;
}
#game:is(:fullscreen,.immersive) .board {height:max(190px,calc(100dvh - 171px))}
#game.immersive {position:fixed;inset:0;z-index:9}
body.immersive-active {overflow:hidden}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.intro {
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 47%,#241632 0,#0c0a19 57%,#070711 86%);
  transition:opacity .3s;
  isolation:isolate;
}
.intro.dissolve {opacity:0;pointer-events:none}
.intro-art {width:min(110vw,910px);max-height:80vh;position:absolute;transform:translateY(-5%);overflow:visible}
.halo {animation:halo 5.6s ease-in-out both}
.spark {fill:#fff;filter:drop-shadow(0 0 8px #f8ecff);transform-box:fill-box;transform-origin:center;animation:spark 4s ease-in-out both}
.thread {
  fill:none;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:thread 3.55s .62s cubic-bezier(.36,.08,.21,1) both;
}
.violet {filter:drop-shadow(0 0 9px #c28cff)}
.aqua {filter:drop-shadow(0 0 9px #52e9c6);animation-delay:.92s}
.intro-type {position:relative;text-align:center;padding:1rem}
.intro-type p {
  font-size:clamp(.7rem,2.5vw,1.15rem);
  font-weight:850;
  letter-spacing:.43em;
  color:#fff;
  margin:0 0 .75rem;
  text-shadow:0 0 22px #f8e4ffe0;
  animation:appear .85s 2.28s both;
}
.intro-type strong {
  display:block;
  font:750 clamp(1.32rem,6.3vw,3.15rem)/1.16 Georgia,serif;
  letter-spacing:.04em;
  max-width:min(92vw,22.5rem);
  margin-inline:auto;
  background:linear-gradient(115deg,#e8d2ff,#ac82f4,#8cf4fa,#ffb1df,#91f4d6,#e8d2ff);
  background-size:250% 100%;
  color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 18px #a875ffad);
  animation:appear 1.18s 2.96s both,sheen 4.8s 2.96s linear both;
}
.intro-type span {display:block;margin-top:1.05rem;color:#f4ecfa;font-size:clamp(.88rem,2vw,1.12rem);animation:appear 1s 4.3s both}
.skip {
  position:absolute;
  bottom:max(1rem,env(safe-area-inset-bottom));
  right:max(1rem,env(safe-area-inset-right));
  font-size:.8rem;
  background:#161021!important;
}
.intro.brief .intro-art,.intro.brief .intro-type p,.intro.brief .intro-type span {display:none}
.intro.brief .intro-type strong {animation:appear .4s both}
@keyframes halo {0%,14%{opacity:0}42%{opacity:.9}100%{opacity:.3}}
@keyframes spark {0%{opacity:0;transform:scale(.25)}24%{opacity:1;transform:scale(1)}55%{opacity:.9}100%{opacity:.15}}
@keyframes thread {75%{opacity:.98}to{stroke-dashoffset:0;opacity:.38}}
@keyframes appear {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes sheen {to{background-position:100% 0}}

.intro:not(.intro-playing):not(.brief) .intro-type strong,
.intro:not(.intro-playing):not(.brief) .intro-type span,
.intro:not(.intro-playing):not(.brief) .intro-type .infinity {animation:none;opacity:0}
.intro.intro-playing .intro-type .infinity {animation:atelier-spark 3s ease-out both}
.intro-gate {
  position:absolute;inset:0;z-index:2;margin:0;padding:1.5rem;
  display:grid;place-items:center;align-content:center;gap:.85rem;
  width:100%;height:100%;border:0;cursor:pointer;
  background:radial-gradient(ellipse at 50% 47%,#2a1840 0,#0c0a19 58%,#070711 88%);
  color:#f7efff;
}
.intro-gate[hidden] {display:none}
.intro-gate .infinity {width:min(46vw,12.5rem);filter:drop-shadow(0 0 18px #b56bffaa)}
.intro-gate strong {
  font:750 clamp(2rem,11vw,4.4rem)/1 Georgia,serif;letter-spacing:.14em;padding-left:.14em;
  background:linear-gradient(115deg,#e8d2ff,#ac82f4,#8cf4fa,#ffb1df,#91f4d6,#e8d2ff);
  background-size:250% 100%;color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px #a875ffad);
}
.intro-gate span {
  font-size:clamp(1.02rem,3.8vw,1.4rem);color:#e4d5ff;letter-spacing:.06em;
  animation:intro-pulse 1.7s ease-in-out infinite;
}
@keyframes intro-pulse {0%,100%{opacity:.62;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.intro-actions {position:absolute;z-index:3;bottom:max(1rem,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;padding:0 .7rem}
.intro-actions button {min-height:40px}
#intro-mute[aria-pressed=true] {color:#ffd9a8}
@media (prefers-reduced-motion:reduce) {
  .intro-gate span {animation:none}
}
@media(max-width:690px) {
  .landing {grid-template-columns:1fr;gap:1rem}
  .landing-art {display:none}
}
#react,#full {display:inline-flex;align-items:center;justify-content:center}
#full svg {display:none}
@media(max-width:420px) {
  .secondary {gap:.22rem}
  .secondary button,.secondary select {padding-inline:.34rem;font-size:.76rem}
  #full {min-width:36px}
  #full svg {display:block}
  #full span {display:none}
}
@media(max-height:560px) and (orientation:landscape) {
  .in-game .site-head {display:none}
  .in-game .room-head {padding:.14rem 0}
  .in-game #game {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(10.5rem,22%);
    column-gap:.45rem;
    align-items:start;
  }
  .in-game #game > * {grid-column:1 / -1}
  .in-game #game .board {grid-column:1;grid-row:2;height:max(170px,calc(100dvh - 104px))}
  .in-game #game .game-controls {grid-column:2;grid-row:2}
  .in-game #game .tool-panel {bottom:auto;top:calc(100% + .35rem);left:auto;right:0}
  .in-game #game:is(:fullscreen,.immersive) .board {height:max(170px,calc(100dvh - 64px))}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.001ms!important;animation-delay:0ms!important;transition:none!important}
}
.swatches button {background:var(--ink)}
.is-ended .tools,.is-ended .clock-tools,.is-ended .control-pair,.is-ended #end {display:none}
.is-ended .secondary {justify-content:flex-end}
@media(max-height:560px) and (orientation:landscape) {
  .in-game .is-ended .game-controls {grid-column:2;grid-row:2}
}

@media (max-width:690px) and (orientation:portrait) {
  #game .board {
    height: min(calc(100vw - 1.1rem), max(220px, calc(100dvh - 290px)));
  }
  #game:is(:fullscreen,.immersive) .board {
    height: min(calc(100vw - 1rem), max(190px, calc(100dvh - 171px)));
  }
}