:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; background: #141218; color: #e6ddd1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
main { width: 100%; max-width: 1280px; min-width: 0; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header { margin-bottom: 14px; }
h1 { margin: 0; font-size: 20px; letter-spacing: 3px; }
header span, footer { font-size: 11px; letter-spacing: 1px; color: #aaa1ab; }
#arena { width: 100%; aspect-ratio: 16 / 9; background: #211d29; box-shadow: 0 0 0 1px #3c3341; overflow: hidden; }
#arena canvas { display: block; }
footer { margin-top: 14px; line-height: 1.6; }
footer b { margin: 0 8px; color: #766977; }
#status { color: #d3b37c; text-align: right; }
@media (max-width: 700px) {
  body { padding: 12px; }
  header, footer { align-items: flex-start; flex-direction: column; gap: 6px; }
  h1 { font-size: 16px; }
  #status { text-align: left; }
}
#arena { position: relative; }
.rematch { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); z-index: 2; padding: 12px 26px; border: 2px solid #e8b95d; background: #211d29; color: #fff1d8; font: bold 16px ui-monospace, monospace; cursor: pointer; }
.rematch:hover, .rematch:focus-visible { background: #59442f; }
.rematch[hidden] { display: none; }

.result-actions { position:absolute;top:65.7%;left:50%;width:43%;transform:translateX(-50%);display:flex;gap:10px;z-index:2; }
.result-actions[hidden] { display:none; }
.result-actions .rematch { position:static;transform:none;white-space:nowrap;flex:1;padding:10px 8px;border:2px solid #b99450;background:#080f1d;color:#e6ddd1;font-size:clamp(8px,1.05vw,14px); }
.result-actions .rematch:last-child { flex:1.8; }
.result-actions small { display:block;font-size:clamp(7px,.8vw,10px);min-height:12px;margin-top:4px;color:#64eaff; }
.result-actions .p1-choice,.result-actions .p2-choice,.result-actions .rematch:hover,.result-actions .rematch:focus-visible { border-color:#35e9ef;background:#102b3b;color:#74f8ff;box-shadow:inset 0 0 0 1px #1c6b7c; }
@media(max-width:700px){.result-actions{gap:5px;width:43%}.result-actions .rematch{padding:4px 2px}.result-actions small{min-height:8px;margin-top:1px}}

/* Unsupported touch-first devices never start the game runtime. */
[hidden] { display:none !important; }
@font-face { font-family:BriefFighterMobile;src:url('./assets/ui/PressStart2P-Regular.ttf') format('truetype');font-display:swap; }
body.mobile-only { background:#000;min-height:100vh;min-height:100svh;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
#mobile-launch { width:100%;max-width:42rem;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center; }
#mobile-logo { display:block;width:min(100%,420px);height:auto;max-height:30svh;object-fit:contain;image-rendering:pixelated; }
#mobile-heading { font:clamp(1rem,4vw,1.5rem)/1.7 BriefFighterMobile,monospace;letter-spacing:0;color:#fff1d8; }
#mobile-launch p { margin:0;max-width:22rem;font-size:clamp(1rem,3.6vw,1.125rem);line-height:1.6;color:#e6ddd1;overflow-wrap:break-word; }
#mobile-launch .mobile-address { margin-top:4px;color:#e8b95d;font:clamp(.6875rem,2.6vw,.8125rem)/1.6 BriefFighterMobile,monospace; }
@media(max-height:440px) and (orientation:landscape) { #mobile-launch { gap:12px; } #mobile-logo { max-height:25svh;width:300px;max-width:100%; } #mobile-heading { font-size:1rem; } }