.chat{display:flex;flex-direction:column;gap:12px;max-width:44rem;margin-inline:auto}
.chat-sys{font-family:var(--mono,monospace);font-size:.8rem;opacity:.75;text-align:center;margin:0 0 8px}
.chat details{display:block}
.chat summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;width:fit-content;max-width:85%;min-height:44px;padding:10px 14px;background:#d9d6e3;color:#0A0518;border:3px solid #0A0518;border-radius:18px 18px 18px 4px;box-shadow:4px 4px 0 #0A0518;font-weight:700}
.chat summary::-webkit-details-marker{display:none}
.chat summary::after{content:'';flex:none;width:8px;height:8px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);transition:transform 220ms var(--ease-out,ease-out)}
.chat details[open] summary::after{transform:rotate(225deg)}
.chat summary:focus-visible{outline:3px solid #FFC93C;outline-offset:3px}
.chat-a{width:fit-content;max-width:85%;margin:10px 0 0 auto;padding:10px 14px;background:#39d353;color:#0A0518;border:3px solid #0A0518;border-radius:18px 18px 4px 18px;box-shadow:4px 4px 0 #0A0518;font-family:'Comic Neue',cursive;font-weight:700}
.chat details[open] .chat-a{animation:chat-in 220ms var(--ease-out,ease-out)}
@keyframes chat-in{from{opacity:0;transform:translateY(-6px)}}
.chat-dots{display:flex;gap:4px;width:fit-content;margin:10px 0 0 auto;padding:12px 14px;background:#39d353;border:3px solid #0A0518;border-radius:18px 18px 4px 18px}
.chat-dots i{width:7px;height:7px;border-radius:50%;background:#0A0518;animation:chat-dot 300ms steps(2) infinite}
.chat-dots i:nth-child(2){animation-delay:100ms}
.chat-dots i:nth-child(3){animation-delay:200ms}
@keyframes chat-dot{50%{opacity:.25}}
.chat details.is-typing .chat-a{display:none}
.touch-grass .chat details[open] .chat-a,.touch-grass .chat-dots i{animation:none}
.magnets{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;padding:56px 16px 20px;background:#F4EEFF radial-gradient(#0A051818 1.5px,transparent 1.6px) 0 0/12px 12px;border:4px solid #0A0518;border-radius:22px;box-shadow:6px 6px 0 #0A0518;touch-action:pan-y}
@media(min-width:768px){.magnets{grid-template-columns:repeat(3,minmax(0,1fr));padding:64px 28px 28px}}
.magnet-pin{position:absolute;top:12px;left:50%;transform:translateX(-50%) rotate(-2deg);margin:0;white-space:nowrap;font:400 clamp(.8rem,3vw,1.1rem) var(--hd,Impact);background:#E8333A;color:#F4EEFF;border:3px solid #0A0518;padding:3px 10px;box-shadow:3px 3px 0 #0A0518}
.magnet{display:block;position:relative;padding:6px;margin:0;background:#fff;border:3px solid #0A0518;border-radius:6px;box-shadow:6px 6px 0 #0A0518;cursor:grab;touch-action:none;transition:box-shadow 160ms var(--ease-out,ease-out)}
.magnet::before{content:'';position:absolute;top:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#FF5FA2;border:3px solid #0A0518;z-index:2}
.magnet:nth-child(3n){--rot:-4deg}.magnet:nth-child(3n+1){--rot:3deg}.magnet:nth-child(3n+2){--rot:-2deg}
.magnet{transform:rotate(var(--rot,0deg))}
.magnet:nth-child(4n)::before{background:#3CFF8F}.magnet:nth-child(4n+1)::before{background:#FFC83D}
.magnet img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.magnet.is-held{cursor:grabbing;box-shadow:10px 10px 0 #0A0518;z-index:3}
.magnet:focus-visible{outline:3px solid #FFC83D;outline-offset:3px}
.clan-select{display:grid;gap:20px;margin-top:24px}
@media(min-width:900px){.clan-select{grid-template-columns:1.3fr 1fr;align-items:start}}
.clan-sel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:600px){.clan-sel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.clan-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px;background:var(--bg2,#1E1245);color:var(--ink,#F4EEFF);border:3px solid #0A0518;border-radius:8px;box-shadow:4px 4px 0 #0A0518;cursor:pointer;font:400 .95rem var(--hd,Impact);transition:transform 160ms var(--ease-out,ease-out)}
.clan-pick img{width:100%;aspect-ratio:1;object-fit:contain}
.clan-pick b{font:400 3.5rem/1 var(--hd,Impact);color:var(--o,#FFC83D);flex:1;display:grid;place-items:center}
.clan-pick[aria-pressed="true"]{border-color:#FFC83D;box-shadow:0 0 0 3px #FFC83D,4px 4px 0 3px #0A0518;background:#2a1a5e}
.clan-pick:hover{transform:translateY(-2px)}
.clan-panel{position:relative;background:var(--bg2,#1E1245);border:4px solid #0A0518;border-radius:10px;box-shadow:6px 6px 0 #0A0518;padding:16px;overflow:hidden}
.clan-panel>picture img{width:min(240px,60%);margin:0 auto;aspect-ratio:1;object-fit:contain}
.clan-panel h3{text-align:center;color:var(--o,#FFC83D)}
.clan-stats{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:700 .8rem var(--mono,monospace)}
.clan-stats span{display:block;height:14px;margin-top:2px;background:#0A0518;border:2px solid #0A0518}
.clan-stats i{display:block;height:100%;width:var(--v);background:var(--g,#3CFF8F);transition:width 240ms var(--ease-out,ease-out)}
.clan-motto{margin:12px 0 0;font:700 1rem var(--bub,'Comic Neue',cursive)}
.clan-vs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#E8333A}
.clan-vs[hidden]{display:none}
.clan-vs b{font:400 4rem var(--hd,Impact);color:#FFC83D;text-shadow:4px 4px 0 #0A0518}
.clan-vs img{width:120px}
.narrator[data-clan] .narrator-face{background:var(--p,#FF5FA2);overflow:visible;position:relative}
.narrator-hat{position:absolute;top:-22px;left:50%;width:70%!important;height:auto!important;transform:translateX(-50%);object-fit:contain;pointer-events:none}
@media (prefers-reduced-motion:reduce){.clan-pick,.clan-stats i{transition:none}.clan-pick:hover{transform:none}}
.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin:8px 0 0;padding:10px;border:3px solid #0A0518;border-radius:10px;background:#0A051833;min-width:0}
.tray legend{font:400 1.2rem var(--hd,Impact);color:var(--o,#FFC83D);padding:0 6px}
.tray-btn{min-width:44px;min-height:44px;padding:4px;background:#F4EEFF;border:3px solid #0A0518;border-radius:8px;box-shadow:3px 3px 0 #0A0518;cursor:pointer}
.tray-btn:active{transform:translate(3px,3px);box-shadow:none}
.tray-btn img{width:100%;aspect-ratio:1;object-fit:contain}
.tray-hint{grid-column:1/-1;margin:4px 0 0;font-size:.8rem;color:var(--mute,#B9A9E0)}
.mg-msg{min-height:1.4em;margin:6px 0 0;font-weight:700}
.mg-msg a{color:var(--g,#3CFF8F)}
.mg-stage{position:relative;width:100%;max-width:640px;min-width:0}
.mg-stage .mg-canvas{display:block;max-width:100%;cursor:crosshair}
.mg-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.st{position:absolute;width:24%;aspect-ratio:1;pointer-events:auto;cursor:grab;touch-action:none;transform-origin:50% 50%}
.st img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.st:focus-visible,.st.is-sel{outline:3px dashed #FFC83D;outline-offset:2px}
.st.is-held{cursor:grabbing}
.st-rot{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:50%;background:#FFC83D;border:3px solid #0A0518;cursor:alias;touch-action:none;display:none}
.st.is-sel .st-rot{display:block}
.st.is-new{animation:st-drop 240ms var(--ease-spring,ease-out)}
@keyframes st-drop{from{scale:1.3;opacity:0}}
.touch-grass .st.is-new{animation:none}
@media (prefers-reduced-motion:reduce){.st.is-new{animation:none}}
.rugged{display:inline-block;font:400 2.4rem var(--hd,Impact);color:#E8333A;border:4px solid currentColor;padding:2px 14px;transform:rotate(-6deg);margin:8px 0}
.rug{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:620px;margin:24px auto 0;padding:18px 14px 22px;background:#E8333A repeating-linear-gradient(90deg,transparent 0 18px,#0A051822 18px 22px);border:4px solid #0A0518;border-radius:6px;box-shadow:6px 6px 0 #0A0518}
.rug.is-pulled{transform:translateX(-12px) rotate(-2deg)}
.lineup-cap{font:400 var(--step-1,1.3rem) var(--hd,Impact);color:var(--o,#FFC83D);margin:0 0 16px}
.lineup{position:relative;margin-top:16px;padding:28px 12px 16px 40px;background:#d8d2c2 repeating-linear-gradient(to top,transparent 0 47px,#0A0518 47px 50px);border:4px solid #0A0518;border-radius:10px;box-shadow:6px 6px 0 #0A0518;overflow:hidden}
.lineup::before{content:'7 FT\A\A6 FT\A\A5 FT\A\A4 FT';white-space:pre;position:absolute;left:6px;top:20px;font:700 .7rem/25px var(--mono,monospace);color:#0A0518}
.lineup-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(min-width:900px){.lineup-row{grid-template-columns:repeat(6,minmax(0,1fr))}}
.suspect{text-align:center;min-width:0}
.suspect-btn{display:block;width:100%;min-height:44px;padding:0;background:none;border:0;cursor:pointer;position:relative;transition:transform 200ms var(--ease-out,ease-out)}
.suspect-btn img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid #0A0518;border-radius:8px;background:#0A0518}
.suspect-btn:focus-visible{outline:3px solid #FFC83D;outline-offset:3px}
.board{display:block;margin:-14px auto 0;position:relative;width:fit-content;font:700 .8rem var(--mono,monospace);background:#0A0518;color:#F4EEFF;padding:3px 8px;border-radius:3px}
.suspect h3{font-size:1rem;color:#0A0518;margin:6px 0 2px;text-shadow:none}
.suspect blockquote{margin:0;font:700 .85rem/1.3 var(--bub,'Comic Neue',cursive);color:#0A0518}
.suspect.is-up .suspect-btn{transform:translateY(-12px) scale(1.04)}
.suspect.is-up blockquote{background:#F4EEFF;border:3px solid #0A0518;border-radius:12px;padding:4px 6px}
.suspect.is-shuffle .suspect-btn{transform:translateX(3px)}
.touch-grass .suspect-btn{transition:none}
@media (prefers-reduced-motion:reduce){.suspect-btn{transition:none}.suspect.is-up .suspect-btn,.suspect.is-shuffle .suspect-btn{transform:none}}
.tub{position:relative;width:min(280px,72vw);margin:0 auto 8px}
.tub img{width:100%;height:auto;margin:0;border:0;border-radius:0}
.footer .tub img{border:0;border-radius:0}
.duck-btn{position:absolute;top:2%;left:34%;width:32%;height:26%;min-width:44px;min-height:44px;background:none;border:0;border-radius:50%;cursor:pointer}
.duck-btn:focus-visible{outline:3px solid #FFC83D;outline-offset:3px}
.tub-say{min-height:1.5em;margin:4px 0 0;font:700 .95rem var(--bub,'Comic Neue',cursive);color:var(--o,#FFC83D)}
.tub-bubbles{position:absolute;inset:0 0 30% 0;pointer-events:none;overflow:hidden}
.tub-bubbles i{position:absolute;bottom:0;width:12px;height:12px;border-radius:50%;border:2px solid #F4EEFF;opacity:0;animation:tub-rise 3.6s linear infinite;animation-play-state:paused}
.tub-bubbles i:nth-child(1){left:18%}.tub-bubbles i:nth-child(2){left:30%;animation-delay:.6s;width:8px;height:8px}.tub-bubbles i:nth-child(3){left:62%;animation-delay:1.2s}.tub-bubbles i:nth-child(4){left:74%;animation-delay:1.8s;width:16px;height:16px}.tub-bubbles i:nth-child(5){left:46%;animation-delay:2.4s;width:8px;height:8px}.tub-bubbles i:nth-child(6){left:84%;animation-delay:3s}
.tub.is-visible .tub-bubbles i{animation-play-state:running}
@keyframes tub-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-120px)}}
.touch-grass .tub-bubbles{display:none}
@media (prefers-reduced-motion:reduce){.tub-bubbles{display:none}}
.footer-fine{font:400 var(--step-5,3rem)/.95 var(--hd,Impact);color:var(--g,#3CFF8F);text-shadow:4px 4px 0 #0A0518;margin:8px 0}
.footer-joke{font-weight:700;color:var(--o,#FFC83D);margin:4px 0 12px}
.grass-big{min-height:48px;padding:10px 18px;font-size:1rem}
.again-btn{font-size:1.6rem;min-width:160px}
@media (prefers-reduced-motion:reduce){.chat details[open] .chat-a,.chat-dots i{animation:none}.chat summary::after{transition:none}}