/* Reaction Duel. Theme tokens only. Every signal state has its own shape AND word, so colour is never the only clue:
   wait = octagon "WAIT", decoy = square "NOT YET", go = circle "TAP!". */
.rd-game{max-width:760px}
.rd-players{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
.rd-players li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3px 8px;padding:7px 10px;border:1px solid var(--lg-line);border-radius:8px;background:var(--lg-white);min-width:0}
.rd-players li.me{border-color:var(--lg-rose)}.rd-players li.me .nm::after{content:' · you';font-weight:600;color:var(--lg-muted);font-size:.8rem}
.rd-players .meta{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0}
.rd-players .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-players .pts{font-weight:800;font-size:1.15rem;color:var(--lg-rose);font-variant-numeric:tabular-nums}
.rd-players .pips{display:flex;gap:3px}
.rd-players .pips i{width:8px;height:8px;border:1px solid var(--lg-muted);background:transparent}
.rd-players .pips i.on{background:var(--lg-rose);border-color:var(--lg-rose)}
.rd-players .bt{font-size:.74rem;color:var(--lg-muted);white-space:nowrap}
.rd-players li.win{border-color:var(--lg-good);box-shadow:inset 0 0 0 2px var(--lg-good)}
.rd-players li.out{opacity:.6}.rd-players li.out .nm::after{content:' · out'}
.rd-signal{--fg:var(--lg-white);width:100%;min-height:clamp(250px,50dvh,460px);border-radius:16px;border:3px solid var(--lg-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:var(--fg);background:var(--lg-muted);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:var(--lg-font);cursor:pointer;box-shadow:0 6px 0 var(--lg-ink)}
.rd-signal:active{transform:translateY(3px);box-shadow:0 3px 0 var(--lg-ink)}
.rd-signal.is-local{cursor:default;min-height:clamp(180px,30dvh,300px)}
.rd-signal.is-local:active{transform:none;box-shadow:0 6px 0 var(--lg-ink)}
.rd-signal[data-state=ready],.rd-signal[data-state=paused]{background:var(--lg-pink);--fg:var(--lg-ink)}
.rd-signal[data-state=wait]{background:var(--lg-bad)}
.rd-signal[data-state=decoy]{background:var(--lg-p2)}
.rd-signal[data-state=go]{background:var(--lg-good)}
.rd-signal[data-state=false]{background:var(--lg-ink);--fg:var(--lg-cream)}
.rd-signal[data-state=tapped],.rd-signal[data-state=result]{background:var(--lg-white);--fg:var(--lg-ink)}
.rd-word{font-size:clamp(1.5rem,8vw,2.8rem);line-height:1.2;text-align:center;overflow-wrap:anywhere}
.rd-sub{font-weight:700;font-size:1.02rem;text-align:center;max-width:32ch}
.rd-shape{width:76px;height:76px;flex:none;background:currentColor}
[data-state=ready] .rd-shape,[data-state=paused] .rd-shape,[data-state=result] .rd-shape,[data-state=tapped] .rd-shape{width:52px;height:52px}
[data-state=ready] .rd-shape,[data-state=paused] .rd-shape,[data-state=result] .rd-shape,[data-state=tapped] .rd-shape{background:var(--lg-star) center/contain no-repeat;image-rendering:pixelated}
[data-state=wait] .rd-shape{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
[data-state=decoy] .rd-shape{border-radius:4px;width:68px;height:68px}
[data-state=go] .rd-shape{border-radius:50%;width:96px;height:96px}
[data-state=false] .rd-shape{clip-path:polygon(18% 0,50% 32%,82% 0,100% 18%,68% 50%,100% 82%,82% 100%,50% 68%,18% 100%,0 82%,32% 50%,0 18%)}
.rd-pads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd-pad{min-height:clamp(150px,24dvh,240px);border:3px solid var(--lg-ink);border-radius:14px;background:var(--lg-white);color:var(--lg-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;font-family:var(--lg-font);touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:0 5px 0 var(--lg-ink)}
.rd-pad:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lg-ink)}
.rd-pad b{font-size:1.05rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-pad span{font-size:.82rem;color:var(--lg-muted);text-align:center}
#pad-0{border-color:var(--lg-p1);box-shadow:0 5px 0 var(--lg-p1)}#pad-1{border-color:var(--lg-p2);box-shadow:0 5px 0 var(--lg-p2)}
.rd-keys{text-align:center;margin:0}
@media(min-width:1000px){.rd-signal{min-height:clamp(260px,46dvh,420px)}}
@media(max-height:820px) and (min-width:1000px){.rd-signal{min-height:420px}.rd-signal.is-local{min-height:210px}.rd-pad{min-height:170px}}