:root{--surface:var(--k);--ink:var(--c);--edge:var(--c)}
:root[data-theme=light]{--surface:var(--y);--ink:var(--k);--edge:var(--k);color:var(--k);background:var(--y);scrollbar-color:var(--k) var(--y)}
body{color:var(--ink)}
.play-page header nav{gap:6px}.play-page header button{font-size:10px;padding:8px 6px;color:var(--ink)}
.play-page header button:hover{background:var(--ink);color:var(--surface)}
.play-page .circle-word{width:22%;max-width:112px;min-width:0;min-height:0;height:auto;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:13px;font-size:14px;line-height:1.15;color:var(--k);background:var(--bead);border:2px solid var(--k);box-shadow:inset -6px -7px 0 var(--k),0 0 0 2px var(--bead);isolation:isolate}
.play-page .circle-word::before{background:var(--k);width:22%;height:6px;left:22%;top:14%;border-radius:50%;transform:rotate(-30deg)}
.play-page .circle-word::after{content:'';position:absolute;top:25%;left:14%;width:5px;height:5px;background:var(--k);border-radius:50%}
.play-page .circle-word.connected,.play-page .circle-word.current{color:var(--k);background:var(--bead);border-color:var(--k);box-shadow:inset -6px -7px 0 var(--k),0 0 0 2px var(--bead)}
.play-page .circle-word.current{outline:2px dashed var(--ink);outline-offset:7px}
.play-page .circle-word:disabled:hover{color:var(--k);background:var(--bead)}
.play-page .circle-word:hover:not(:disabled){box-shadow:inset -3px -4px 0 var(--k),0 0 0 3px var(--bead)}
.play-page .circle-word.wrong{outline:4px dotted var(--ink);outline-offset:5px}
.play-page .circle-word .node-label{font-size:8px;margin-bottom:5px}
.connection{stroke:var(--ink);stroke-width:5;stroke-dasharray:8 5}.circle-center{background:var(--surface);border-radius:50%}
.circle-word.jiggle{animation:bead-jiggle .4s ease-in-out}
@keyframes bead-jiggle{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-7deg) scale(.96)}55%{transform:translate(-50%,-50%) rotate(6deg) scale(1.04)}80%{transform:translate(-50%,-50%) rotate(-3deg)}}
.play-page dialog{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.play-page dialog::backdrop{background:var(--surface)}
.play-page #result-dialog{max-width:530px;max-height:calc(100dvh - 24px);overflow-y:auto;border-radius:28px;padding:22px;overscroll-behavior:contain}
#result-dialog[open]{animation:result-rise .48s cubic-bezier(.16,1,.3,1)}
@keyframes result-rise{from{transform:translateY(100vh)}to{transform:translateY(0)}}
.play-page #result{margin:24px auto 8px;max-width:440px}
.play-page #result h2{font-size:27px;margin:12px 0;color:var(--ink)}
#outcome-label{font-size:11px;letter-spacing:1px;color:var(--m)}
#history-card{margin:22px 0;border-top:2px dotted var(--ink);border-bottom:2px dotted var(--ink);padding:16px 0;text-align:left}
#history-card h3{font:12px BeadPixel,monospace;margin:0 0 8px;color:var(--ink)}
#history-date{font:18px BeadPixel,monospace;color:var(--m);margin:10px 0}
#history-text{font-size:15px;line-height:1.5;margin:12px 0}#history-connection{font-size:12px;line-height:1.5}
#history-source{font-size:10px;color:var(--ink)}
.social-caption{font-size:11px;margin:8px 0 16px;line-height:1.5}
.play-page #score-login{background:var(--c);color:var(--k);border-color:var(--k);width:100%;padding:13px;font-size:13px}
.play-page #score-form{border-top:0;margin:18px 0}.play-page .name-row{gap:8px}.play-page .name-row button{font-size:12px}
.play-page .result-options{display:block}.result-options>button{width:100%;margin-bottom:12px}.result-options details{margin-top:4px;text-align:left}
#result-message{font-size:12px;min-height:0;margin-top:12px}
#confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20}
.confetti-piece{position:absolute;left:var(--x);top:-18px;width:8px;height:13px;background:var(--color);border:1px solid var(--k);animation:confetti-fall 3s var(--delay) cubic-bezier(.2,.5,.6,1) both}
@keyframes confetti-fall{from{transform:translate(0,-20px) rotate(0)}to{transform:translate(var(--drift),110vh) rotate(var(--spin))}}
[data-theme=light] .play-page button,[data-theme=light] .play-page input{color:var(--k);border-color:var(--k);background:var(--y)}
[data-theme=light] .play-page button:hover,[data-theme=light] .play-page button.active{background:var(--k);color:var(--y)}
[data-theme=light] .play-page #timer,[data-theme=light] .play-page #penalty,[data-theme=light] .play-page #mode,[data-theme=light] .circle-center p,[data-theme=light] .play-page dialog h2,[data-theme=light] .play-page summary,[data-theme=light] .play-page .rank strong,[data-theme=light] .play-page a{color:var(--k)}
[data-theme=light] .play-page input::placeholder{color:var(--k)}
[data-theme=light] .play-page .clue{border-color:var(--k);color:var(--k)}
[data-theme=light] .play-message.error{color:var(--k);text-decoration:underline wavy var(--m)}
[data-theme=light] .play-page :focus-visible{outline-color:var(--k)}
[data-theme=light] .play-page #outcome-label,[data-theme=light] #history-date{color:var(--k)}
.rank span{min-width:0;overflow-wrap:anywhere}.rank{gap:12px}
[data-theme=light] .play-page .circle-word,[data-theme=light] .play-page .circle-word:hover,[data-theme=light] .play-page .circle-word:disabled:hover{color:var(--k);background:var(--bead)}
@media(max-width:480px){.play-page header{align-items:center;gap:4px}.play-page header nav{gap:2px}.play-page header button{font-size:10px;padding:10px 4px}.play-page .brand{font-size:15px}.play-page .circle-word{min-height:0;padding:9px;font-size:11px}.play-page .circle-word .node-label{font-size:7px;margin-bottom:3px}.play-page #result-dialog{padding:18px;width:calc(100% - 20px)}.play-page #result h2{font-size:24px}#history-text{font-size:14px}}
@media(prefers-reduced-motion:reduce){.circle-word.jiggle,#result-dialog[open],.confetti-piece{animation:none!important}.confetti-piece{display:none}}

#result-mute{font-size:10px;padding:8px 10px;float:left}