* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font: 15px/1.4 system-ui, sans-serif; color: #1d1d2b; }
canvas { display: block; width: 100vw; height: 100vh; }
button { font: inherit; font-weight: 700; padding: 10px 16px; border: 3px solid #1d1d2b; border-radius: 12px; background: #fff; box-shadow: 0 4px 0 #1d1d2b; cursor: pointer; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #1d1d2b; }
button:focus-visible, select:focus-visible { outline: 3px solid #ff3d7f; outline-offset: 2px; }
.primary { background: #ffd23f; }
.modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(920px, 94vw); max-height: 92vh; overflow: auto;
  background: #fffaf0; border: 4px solid #1d1d2b; border-radius: 20px; box-shadow: 8px 8px 0 #1d1d2b; padding: 20px 24px; }
.modal.small { width: min(520px, 92vw); text-align: center; }
h1 { margin: 0; font-size: 42px; letter-spacing: -1px; color: #1f4fd1; text-shadow: 3px 3px 0 #ffd23f; }
.sub { margin-top: 4px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
label { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.selwrap { position: relative; display: inline-block; }
.selwrap select { appearance: none; font: inherit; padding: 9px 48px 9px 12px; border: 3px solid #1d1d2b; border-radius: 10px; background: #fff; }
.selwrap::after { content: ''; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border: solid #1d1d2b; border-width: 0 3px 3px 0; transform: rotate(45deg); pointer-events: none; }
@media (forced-colors: active) { .selwrap select { appearance: auto; padding-right: 12px; } .selwrap::after { display: none; } }
.tablewrap { max-height: 40vh; overflow: auto; border: 3px solid #1d1d2b; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 5px 10px; text-align: left; border-bottom: 1px solid #e3dccb; }
th { position: sticky; top: 0; background: #ffe7a3; }
.sw { display: inline-block; width: 22px; height: 14px; border-radius: 4px; border: 2px solid #1d1d2b; }
.keys { font-size: 13px; }
#hud .panel { position: fixed; top: 12px; background: rgba(255, 250, 240, .92); border: 3px solid #1d1d2b; border-radius: 14px; padding: 10px 14px; box-shadow: 4px 4px 0 #1d1d2b; }
#hud .left { left: 12px; width: 230px; }
#hud .right { right: 12px; width: 260px; max-height: 70vh; overflow: hidden; }
.big { font-size: 34px; font-weight: 900; }
.tiny { font-size: 12px; }
.bar, .track { height: 12px; border: 2px solid #1d1d2b; border-radius: 8px; overflow: hidden; background: #fff; }
.bar span, .track span { display: block; height: 100%; width: 0; background: #ff7a1a; }
.track span { background: #2fbf71; }
.item { margin-top: 6px; font-weight: 700; color: #7a2bd1; }
#board { margin: 8px 0 0; padding-left: 22px; font-size: 13px; }
#board li.me { font-weight: 900; color: #1f4fd1; }
#board li.limbo { opacity: .4; text-decoration: line-through; }
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); font-size: 26px; font-weight: 900; color: #fff; text-shadow: 3px 3px 0 #1d1d2b; pointer-events: none; text-align: center; }
.cord { position: fixed; bottom: 16px; right: 16px; background: #ff5d73; color: #fff; }
.cord.pulse { animation: pulse .8s infinite alternate; }
@keyframes pulse { to { transform: scale(1.12); } }
#touch { position: fixed; bottom: 16px; left: 16px; display: none; gap: 8px; }
@media (pointer: coarse) { #touch { display: flex; } }
#resList { text-align: left; max-height: 30vh; overflow: auto; }
body.blackout canvas { filter: brightness(.25) saturate(.3); transition: filter .3s; }
canvas { transition: filter 1.2s; }
@media (prefers-reduced-motion: reduce) { .cord.pulse { animation: none; } canvas { transition: none; } }
#feed { position: fixed; left: 12px; top: 250px; width: 300px; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; pointer-events: none; }
#feed li { background: rgba(29, 29, 43, .85); color: #fff; border: 2px solid #ffd23f; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 600; animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } }
#lights { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: #1d1d2b; padding: 10px 14px; border-radius: 14px; }
#lights i { width: 30px; height: 30px; border-radius: 50%; background: #3a0d0d; border: 2px solid #000; }
#lights i.on { background: #ff2323; box-shadow: 0 0 14px #ff2323; }
@media (max-width: 700px) { #feed { top: auto; bottom: 80px; width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { #feed li { animation: none; } }