:root{--bg:#f4f4f2;--fg:#1c1f23;--mut:#5d6670;--line:rgba(128,128,128,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101316;--fg:#e8e8e4;--mut:#98a2ad}}
:root[data-theme="dark"]{--bg:#101316;--fg:#e8e8e4;--mut:#98a2ad}
/* the page never scrolls, pans or zooms: the game fills one screen */
html,body{overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
body{margin:0;position:fixed;inset:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
@media (pointer:coarse){body{background:#0b0e12}}
canvas{flex:none;width:auto;height:auto;max-width:100%;touch-action:none;
  max-height:calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  background:#14181d;border-radius:8px;outline:none}
b{color:var(--fg)}

/* buttons (tabs, AI toggles, mode toggles) */
button{font:inherit;color:var(--fg);background:transparent;border:2px solid var(--mut);border-radius:6px;padding:3px 12px;cursor:pointer}
button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
section button.blue{border-color:#42a5f5}
section button.red{border-color:#ef5350}
section button.on{color:#fff}
section button.mode{border-color:var(--fg)}
section button.mode.on{background:var(--fg);color:var(--bg)}
section button.blue.on{background:#42a5f5}
section button.red.on{background:#ef5350}
button:disabled{opacity:.45;cursor:not-allowed}

/* the menu panel */
#menubtn{position:fixed;z-index:6;margin:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;touch-action:manipulation}
#menubtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;z-index:10}
.overlay[hidden]{display:none}
.dialog{background:var(--bg);color:var(--fg);border:2px solid var(--mut);border-radius:10px;width:100%;max-width:640px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:12px 16px 16px;box-sizing:border-box}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tabs{display:flex;gap:6px}
.tab{border-color:transparent;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;color:var(--mut);padding:3px 14px}
.tab.on{color:var(--fg);border-bottom-color:var(--fg)}
.x{padding:0 9px;line-height:1.4}
section[hidden]{display:none}
.group{margin-bottom:14px}
h3{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hint{margin:6px 0 0;color:var(--mut);font-size:13px}
body:not(.touch) .touchonly{display:none}
body.online .team2{display:none !important} /* the Blue 2 / Red 2 AI toggles only mean something offline */
.team{margin-bottom:14px}
h3.blue{color:#42a5f5}h3.red{color:#ef5350}
.mem{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.mem .name{flex:1;min-width:0}
.tag{font-size:11px;font-weight:700;letter-spacing:.05em;border:1px solid var(--mut);border-radius:4px;padding:0 5px;color:var(--mut)}
.mem button{padding:1px 8px;font-size:13px}

/* controls tab */
.scroll{overflow-x:auto;margin-bottom:6px;touch-action:pan-x pan-y}
table{border-collapse:collapse;width:100%;white-space:nowrap}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:600}
th.pb{color:#42a5f5}th.pr{color:#ef5350}
table.keymap th,table.keymap td{padding:6px 4px}
button.keycell{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);background:transparent;border:1px solid var(--mut);border-bottom-width:3px;border-radius:5px;padding:1px 8px;min-width:30px;cursor:pointer}
button.keycell:hover{border-color:var(--fg)}
button.keycell.capturing{border-color:#c9b8f0;color:#fff;background:#2e1a52}
kbd{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);border:1px solid var(--mut);border-bottom-width:3px;border-radius:5px;padding:1px 6px;display:inline-block}
ul.keys{margin:0;padding:0;list-style:none}
ul.keys li{padding:3px 0;color:var(--mut)}
ul.keys li kbd{margin-right:2px}

/* touch controls (js/touch.js): drawn over the whole screen, never intercepting touches themselves */
#touchui{display:none;position:fixed;inset:0;pointer-events:none;z-index:5}
body.touch #touchui{display:block}
.zones{position:absolute;right:0;top:0;width:50%;height:100%;display:flex;flex-direction:column}
.zone{flex:1;display:flex;align-items:center;justify-content:center;border-top:1px dashed rgba(255,255,255,0);transition:border-color .6s,background .08s}
.zone.down{background:rgba(255,255,255,.14)}
.lhint{position:absolute;left:0;top:0;width:50%;height:100%;display:flex;align-items:center;justify-content:center}
.hintbit{opacity:0;transition:opacity .6s;color:rgba(255,255,255,.75);font-weight:700;font-size:12px;letter-spacing:.12em;text-shadow:0 1px 3px rgba(0,0,0,.7)}
#touchui.hint .hintbit{opacity:1}
#touchui.hint .zone{border-top-color:rgba(255,255,255,.3)}
#stick{position:fixed;left:0;top:0;width:calc(var(--R,48px)*2);height:calc(var(--R,48px)*2);margin:calc(var(--R,48px)*-1) 0 0 calc(var(--R,48px)*-1);box-sizing:border-box;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.07);opacity:0;transition:opacity .15s}
#stick.on{opacity:1}
#stick.ghost{opacity:.35;transition-duration:.4s} /* released, but its centre can still be reused for a quick tap */
#stick .knob{position:absolute;left:50%;top:50%;width:calc(var(--R,48px)*.8);height:calc(var(--R,48px)*.8);margin:calc(var(--R,48px)*-.4) 0 0 calc(var(--R,48px)*-.4);border-radius:50%;background:rgba(255,255,255,.4)}

/* portrait on a phone: ask for landscape (tap to play anyway) */
#rotate{display:none;position:fixed;inset:0;z-index:20;background:#0b0e12;color:#e8e8e4;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;font-size:18px}
#rotate .ico{font-size:56px;line-height:1}
#rotate small{color:#98a2ad;font-size:13px}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
#rotate[hidden]{display:none !important}



/* chat (js/chat.js): top left of the game, over the canvas. The log never takes the mouse; only the text box does. */
#chat{position:fixed;z-index:7;pointer-events:none;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;font:13px/1.35 system-ui,sans-serif;user-select:text;-webkit-user-select:text}
#chat[hidden],#chatlog[hidden],#chatinput[hidden]{display:none}
#chatlog{background:rgba(11,14,18,.62);border-radius:6px;padding:5px 8px;color:#e8e8e4;overflow:hidden;word-break:break-word;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cline.sys{color:#98a2ad;font-style:italic}
#chatinput{pointer-events:auto;font:inherit;color:#e8e8e4;background:rgba(11,14,18,.9);border:2px solid #9a63f0;border-radius:6px;padding:4px 8px;outline:none;width:100%;box-sizing:border-box;touch-action:manipulation;user-select:text;-webkit-user-select:text}
#chatinput::placeholder{color:#7b8691}

/* account information display */
#acct form { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
#acct input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #4a4466; background: #17132a; color: #fff; font: inherit; }
#acct table { width: 100%; }
#acct .num { text-align: right; }

/* skin tab (js/skin-editor.js) */
#skinedit .skinwrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
#skinedit .skinleft { flex: 0 0 300px; max-width: 100%; }
#skinedit .skinright { flex: 1 1 260px; min-width: 0; }
@media (min-width: 700px) { #skinedit .skinleft { position: sticky; top: 0; } } /* beside the controls: stays in view while you scroll them */
#skincv { width: 300px; max-width: 100%; max-height: none; aspect-ratio: 1; cursor: grab; touch-action: none; }
#skinedit .skinlist { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
#skinedit button.layer { display: flex; align-items: center; gap: 8px; text-align: left; padding: 2px 8px; border-width: 1px; }
#skinedit button.layer.sel { border-color: #ffd54a; border-width: 2px; }
#skinedit .chip { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--mut); flex: none; }
#skinedit .srow { display: flex; align-items: center; gap: 8px; }
#skinedit .srow > span:first-child { min-width: 62px; color: var(--mut); font-size: 13px; }
#skinedit .srow input[type=range] { flex: 1 1 100px; min-width: 80px; }
#skinedit .srow .val { min-width: 42px; font-variant-numeric: tabular-nums; font-size: 13px; }
#skinedit input[type=color] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--mut); border-radius: 6px; background: transparent; cursor: pointer; }
#skinedit .skinctl > .row, #skinedit .skinctl > .srow { margin-top: 6px; }
#skinedit button.mode { padding: 2px 9px; font-size: 13px; }