:root { color-scheme: dark; font: 15px/1.45 system-ui, sans-serif; background: #0d1323; color: #e9f1ff; }
* { box-sizing: border-box; } body { margin: 0; }
#arenaCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main { position: relative; z-index: 1; width: min(100%, 720px); margin: auto; padding: max(12px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
header { padding-right: 55px; } h1 { font-size: 23px; margin: 0; } h2 { font-size: 19px; margin: 0; } p { margin: 9px 0; }
.panel { padding: 15px; border: 1px solid #425577; border-radius: 16px; background: #151e32ed; margin-bottom: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .row > button { flex: 1; }
button, input, select { font: inherit; min-height: 44px; border-radius: 9px; border: 1px solid #53709f; padding: 9px; max-width: 100%; }
button { background: #263e61; color: #e9f1ff; cursor: pointer; } button:hover { background: #355580; }
button:disabled { opacity: .4; cursor: default; } input, select { background: #0c1427; color: #e9f1ff; }
input[type=checkbox] { min-height: 24px; width: 24px; } label { display: block; margin-top: 8px; }
input[type=text] { min-width: 0; flex: 2; width: 100%; }
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.faces label { margin: 0; } .faces select { width: 100%; } .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.actions button:last-child { grid-column: 1/-1; } #arena-visual { height: 170px; }
#error { color: #ffb4b4; white-space: pre-wrap; } footer { color: #99abc6; font-size: 12px; } a { color: #8fddff; }
#opponents { display: grid; gap: 8px; margin: 10px 0; } #practice, #resume { width: 100%; margin-top: 8px; }
:focus-visible, [data-gdc-focused=true] { outline: 3px solid #72def0; outline-offset: 2px; }
.menu-toggle { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 10; width: 44px; }
.menu-overlay { position: fixed; inset: 0; z-index: 20; padding: 20px; display: grid; place-items: center; background: #000c; }
.menu-overlay[hidden], [hidden] { display: none !important; }
.menu-panel { background: #172641; padding: 20px; border: 1px solid #5385aa; border-radius: 15px; width: min(100%, 500px); max-height: 100%; overflow-y: auto; }
.menu-content { display: grid; gap: 10px; margin-top: 15px; }
@media(min-width: 600px) { .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } .actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } .actions button:last-child { grid-column: auto; } }
@media(max-width: 599px) {
  #arena-visual { height: 110px; }
  #battle { padding-bottom: 175px; }
  .actions { position: fixed; left: 12px; right: 12px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 8;
    padding: 10px; background: #101b30; border: 1px solid #53709f; border-radius: 12px; box-shadow: 0 -8px 24px #0d1323; }
}