/* Defines Space Worms UI theme tokens and component styles. */
:root {
  --color-bg: #05060a;
  --color-ui-bg: rgba(15,17,22,0.5);
  --color-dropdown-bg: rgba(15,17,22,0.7);
  --color-ui-fg: #e8f0ff;
  --color-accent: #a5e3ff;
  --color-border-light: rgba(255,255,255,.1);
  --color-border: rgba(255,255,255,.12);
  --color-border-strong: rgba(255,255,255,.18);
  --color-border-stronger: rgba(255,255,255,.2);
  --color-surface: rgba(255,255,255,.05);
  --color-surface-active: rgba(255,255,255,.15);
  --color-surface-border-active: rgba(255,255,255,.25);
  --color-danger: #ff8080;
  --color-danger-bg: rgba(255,64,64,.08);
  --color-danger-border: rgba(255,64,64,.4);
  --color-overlay-dark: rgba(0,0,0,.15);
  --color-overlay-darker: rgba(0,0,0,.25);
  --color-surface-muted: rgba(255,255,255,.06);
  --color-banner: rgba(255,255,255,.85);
  --color-shadow-strong: rgba(0,0,0,.6);
  --color-gradient-start: #ff8a00;
  --color-gradient-end: #e52e71;
  --color-chart-total: var(--color-accent);
  --color-chart-worm: #5eff7e;
  --color-chart-worm-player: #38f4c0;
  --color-chart-worm-ai: #ff6b2b;
  --color-chart-worm-ai-move: #7dffa2;
  --color-chart-worm-remote: #ffe66b;
  --color-chart-worm-other: #ff87d7;
  --color-chart-worm-path: #6bdfff;
  --color-chart-carcass: #ff9c6b;
  --color-chart-food: #ffd43b;
  --color-chart-pending: #9c6bff;
  --color-chart-grid: #6bffda;
  --color-chart-grid-reset: #34e7ff;
  --color-chart-grid-heads: #7dffe6;
  --color-chart-grid-segs: #2bc4ff;
  --color-chart-cull: #c46bff;
  --color-chart-collision: #ff6b6b;
  --color-chart-mass: #ff6bd5;
  --color-chart-net: #6bb4ff;
  --color-chart-render: #ff6bf2;
  --color-chart-overlays: #6bffae;
  --color-chart-hud: #ffc46b;
  --color-chart-jitter: var(--color-chart-food);
  --color-chart-hover: rgba(255,255,255,0.6);
  --color-vector-nearest: #3af;
  --color-white: #fff;
  --color-black: #000;
  --color-success: #7dffa2;
  --color-bench-baseline: rgba(232,240,255,0.35);

  --font-sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: monospace;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 48px;

  --space-unit: 4px;
  --space-xxs: calc(var(--space-unit) / 4);
  --space-xs: calc(var(--space-unit) / 2);
  --space-sm: calc(var(--space-unit) * 2);
  --space-md: calc(var(--space-unit) * 3);
  --space-lg: calc(var(--space-unit) * 4);
  --space-xl: calc(var(--space-unit) * 5);
  --space-1-5x: calc(var(--space-unit) * 1.5);
  --space-3-5x: calc(var(--space-unit) * 3.5);
  --space-6x: calc(var(--space-unit) * 6);
  --space-7-5x: calc(var(--space-unit) * 7.5);
  --space-8x: calc(var(--space-unit) * 8);
  --space-14x: calc(var(--space-unit) * 14);
  --space-15x: calc(var(--space-unit) * 15);
  --space-20x: calc(var(--space-unit) * 20);
  --space-30x: calc(var(--space-unit) * 30);
  --space-32x: calc(var(--space-unit) * 32);
  --space-40x: calc(var(--space-unit) * 40);
  --space-50x: calc(var(--space-unit) * 50);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --width-xs: calc(var(--space-unit) * 35);
  --width-sm: calc(var(--space-unit) * 50);
  --width-md: calc(var(--space-unit) * 65);
  --width-lg: calc(var(--space-unit) * 80);

  --blur-ui: 5px;
  --blur-dropdown: 8px;
  --fade-duration: 1s;
}
html.narrow {
  --space-unit: 3px;
  --font-size-sm: 10px;
  --font-size-base: 12px;
  --font-size-lg: 14px;
  --font-size-xl: 40px;
}
html, body { margin:0; height:100%; overflow:hidden; background:var(--color-bg); color:var(--color-ui-fg); font:var(--font-size-base)/1.4 var(--font-sans); }
#game { position:absolute; inset:0; display:block; }

.btn { border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-sm) var(--space-md); cursor:pointer; background:var(--color-surface); color:var(--color-ui-fg); user-select:none; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.btn:active{ transform:translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"]{ opacity:0.4; cursor:not-allowed; }
.btn.active{ background:var(--color-surface-active); border-color:var(--color-surface-border-active); }
.btn.meta{ background:var(--color-danger-bg); border-color:var(--color-danger-border); color:var(--color-danger); }
.btn.full{ display:flex; justify-content:space-between; width:100%; margin:var(--space-sm) 0; }
.btn .key{ opacity:0.6; font-size:var(--font-size-sm); }

.bench-columns-toggle{ display:flex; align-items:center; gap:var(--space-sm); font-size:var(--font-size-sm); font-weight:600; }
.bench-columns-toggle:hover{ background:var(--color-surface-active); border-color:var(--color-surface-border-active); }
.bench-columns-toggle.open{ background:var(--color-surface-active); border-color:var(--color-surface-border-active); }
.bench-columns-toggle:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.bench-columns-toggle-text{ margin-right:var(--space-sm); }
.bench-columns-summary{ margin-left:auto; color:var(--color-accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:var(--space-32x); font-size:var(--font-size-sm); font-weight:500; }
.bench-columns-caret{ margin-left:var(--space-xs); font-size:var(--font-size-sm); line-height:1; }

.bench-columns-dropdown{ position:absolute; left:0; top:calc(100% + var(--space-xs)); min-width:var(--space-50x); background:var(--color-dropdown-bg); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); padding:var(--space-sm); box-shadow:0 var(--space-sm) var(--space-6x) var(--color-shadow-strong); backdrop-filter:blur(var(--blur-dropdown)); display:none; z-index:41; }
.bench-columns-dropdown.open{ display:block; }
.bench-columns-dropdown[hidden]{ display:none; }
.bench-columns{ display:flex; flex-direction:column; gap:var(--space-xs); max-height:var(--space-40x); overflow-y:auto; }
.bench-columns-option{ display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm); font-size:var(--font-size-sm); cursor:pointer; user-select:none; transition:background .2s ease,color .2s ease; }
.bench-columns-option:hover{ background:var(--color-overlay-dark); }
.bench-columns-option-control{ margin:0; flex-shrink:0; }
.bench-columns-option-label{ flex:1; }

.bench-download-button{ display:inline-flex; align-items:center; justify-content:center; font-size:var(--font-size-sm); border-radius:var(--radius-md); }
.bench-download-button:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--color-surface-active); border-color:var(--color-surface-border-active); }
.bench-download-button:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

.panel-toggle { position:fixed; right:var(--space-md); top:var(--space-md); z-index:41; display:flex; gap:var(--space-sm); }
.panel { position:fixed; top:0; right:0; height:100%; width:min(var(--width-lg),100%); box-sizing:border-box; overflow:auto; z-index:40; padding:var(--space-15x) var(--space-md) var(--space-md); background:var(--color-ui-bg); border-left:1px solid var(--color-border-light); backdrop-filter:blur(var(--blur-ui)); transform:translateX(100%); transition:transform .25s ease; pointer-events:none; }
  .panel.open{ transform:translateX(0); pointer-events:auto; }
.row{ display:grid; grid-template-columns:60% 1fr; align-items:center; gap:var(--space-sm); margin:var(--space-sm) 0; }
.bench-controls{ position:relative; display:flex; align-items:center; justify-content:flex-start; gap:var(--space-sm); margin:0 0 var(--space-sm); }
.bench-error{ display:none; margin:0 0 var(--space-sm); padding:var(--space-sm); border-radius:var(--radius-md); background:var(--color-danger-bg); border:1px solid var(--color-danger-border); color:var(--color-danger); font-size:var(--font-size-sm); line-height:1.3; }
.bench-error[hidden]{ display:none; }
.slider{ width:100%; }
.inline{ display:flex; gap:var(--space-sm); align-items:center; }
.inline .slider{ flex:1; }
.inline input[type="checkbox"]{ margin-left:auto; }
#worldPreset{ display:block; width:100%; padding:var(--space-sm) calc(var(--space-lg) * 2) var(--space-sm) var(--space-md); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--color-gradient-start),var(--color-gradient-end)); color:var(--color-white); font-weight:700; border:1px solid var(--color-border-stronger); box-sizing:border-box; margin:var(--space-sm) 0; appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="white" d="M0 0l5 6 5-6H0z"/></svg>'); background-repeat:no-repeat; background-position:right var(--space-md) center; background-size:var(--space-md) var(--space-sm); }
.divider{ margin:var(--space-lg) 0; border:0; border-top:1px inset var(--color-border-light); }
.panel input[type="checkbox"]{ justify-self:end; }
.panel h3{ margin:0 0 var(--space-sm); }

/* Smaller circular minimap container */
.minimap{ position:fixed; left:var(--space-lg); top:var(--space-lg); z-index:19; border-radius:50%; border:1px solid var(--color-border-strong); background:var(--color-overlay-dark); backdrop-filter:blur(var(--blur-ui)); overflow:hidden; }
.minimap canvas{ display:block; width:100%; height:100%; }

.leaderboard{ position:fixed; right:var(--space-md); top:var(--space-14x); z-index:21; background:var(--color-ui-bg); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); padding:var(--space-sm); font-size:var(--font-size-sm); font-family:var(--font-mono); cursor:pointer; user-select:none; backdrop-filter:blur(var(--blur-ui)); }
.leaderboard *{ pointer-events:none; user-select:none; }
.leaderboard table{ border-collapse:collapse; }
.leaderboard th,.leaderboard td{ padding:var(--space-xs) var(--space-sm); }
.leaderboard th.rank,.leaderboard td.rank{ text-align:left; }
.leaderboard th.size,.leaderboard td.size{ text-align:right; }
.leaderboard th.name,.leaderboard td.name{ max-width:var(--width-xs); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.leaderboard tr.me{ font-weight:700; }
.leaderboard.collapsed thead{ display:none; }
.activity-feed{ position:fixed; right:var(--space-md); bottom:var(--space-14x); z-index:39; display:none; pointer-events:none; font-size:var(--font-size-sm); width:var(--width-sm); font-family:var(--font-mono); }
.activity-feed div{ margin-top:var(--space-unit); background:var(--color-ui-bg); border:1px solid var(--color-border-strong); padding:var(--space-unit) var(--space-sm); border-radius:var(--radius-sm); width:100%; box-sizing:border-box; text-align:left; opacity:1; transition:opacity var(--fade-duration); backdrop-filter:blur(var(--blur-ui)); }

  .charts{ position:fixed; left:var(--space-lg); top:var(--space-lg); z-index:39; display:flex; flex-direction:column; flex-wrap:wrap; max-height:calc(100vh - var(--space-8x)); gap:var(--space-sm); padding:var(--space-sm); background:var(--color-ui-bg); border:1px solid var(--color-border-strong); backdrop-filter:blur(var(--blur-ui)); transition:opacity var(--fade-duration); }
.charts > *{ width:var(--width-sm); box-sizing:border-box; }
.chart-block canvas{ display:block; width:100%; height:var(--space-20x); background:var(--color-overlay-dark); border:1px solid var(--color-border-strong); }
.chart-block.collapsed canvas, .chart-block.collapsed .chart-legend, .chart-block.collapsed .chart-note{ display:none; }
.chart-header{ display:flex; justify-content:space-between; font-size:var(--font-size-sm); margin-bottom:var(--space-unit); cursor:pointer; }
.chart-note{ font-size:calc(var(--font-size-sm) - 2px); margin-bottom:var(--space-unit); opacity:0.75; }
.chart-note span{ font-weight:600; }
.chart-controls{ display:flex; flex-direction:column; gap:var(--space-unit); font-size:var(--font-size-sm); }
.chart-control{ display:flex; align-items:center; justify-content:space-between; }
.chart-control input[type="checkbox"]{ margin-left:var(--space-sm); }
.chart-divider{ margin:var(--space-unit) 0 var(--space-sm); border:0; border-top:1px inset var(--color-border-light); }
.chart-legend{ display:flex; flex-wrap:wrap; gap:var(--space-unit); font-size:calc(var(--font-size-sm) - 2px); margin-top:var(--space-unit); }
.chart-legend span{ cursor:pointer; }
.charts table{ font-size:var(--font-size-sm); border-collapse:collapse; background:var(--color-overlay-dark); border:1px solid var(--color-border-strong); box-sizing:border-box; table-layout:fixed; width:var(--width-sm); }
.charts th, .charts td{ border:1px solid var(--color-border-strong); padding:var(--space-xs) var(--space-unit); text-align:center; }
.charts th{ background:var(--color-surface-muted); }
#benchmarks > *{ width:auto; }
#benchmarks table{ table-layout:auto; width:auto; }
.bench-cell{ display:flex; flex-direction:column; align-items:center; gap:var(--space-xxs); }
.bench-current{ line-height:1.2; }
.bench-baseline{ display:none; color:var(--color-bench-baseline); font-size:calc(var(--font-size-sm) - 1px); line-height:1.1; }
.bench-current.bench-better{ color:var(--color-success); }
.bench-current.bench-worse{ color:var(--color-danger); }
.ticks{ font-size:var(--font-size-sm); text-align:left; margin-top:var(--space-sm); }

.configs{ position:fixed; left:var(--space-lg); top:var(--space-lg); z-index:39; display:none; flex-direction:column; flex-wrap:wrap; max-height:calc(100vh - var(--space-8x)); gap:var(--space-sm); padding:var(--space-sm); background:var(--color-ui-bg); border:1px solid var(--color-border-strong); backdrop-filter:blur(var(--blur-ui)); }
.configs > *{ width:var(--width-sm); box-sizing:border-box; }
.configs input[type="text"]{ width:100%; box-sizing:border-box; padding:var(--space-sm) var(--space-md); border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-overlay-darker); color:var(--color-ui-fg); text-align:left; }
.cfg-block{ border:1px solid var(--color-border-strong); padding:var(--space-unit); font-size:var(--font-size-sm); }
.cfg-block.dirty{ border-color:var(--color-danger); }
.cfg-block.dirty .cfg-header{ color:var(--color-danger); }
.cfg-header{ display:flex; justify-content:space-between; cursor:pointer; }
.cfg-block.collapsed .cfg-body{ display:none; }
.cfg-body{ display:flex; flex-direction:column; gap:var(--space-unit); margin-top:var(--space-unit); }


.pauseOverlay{ position:fixed; inset:0; background:radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); z-index:29; display:none; }
.pauseOverlay::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }
.paused .pauseOverlay{ display:block; }
.pausedBanner{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:800; font-size:var(--font-size-xl); letter-spacing:6px; color:var(--color-banner); text-shadow:0 var(--space-1-5x) var(--space-7-5x) var(--color-shadow-strong); z-index:30; display:none; }
.paused .pausedBanner{ display:block; }


#startScreen{ position:fixed; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; overflow:hidden; background:radial-gradient(circle at center, rgba(40,0,70,0) 0%, rgba(40,0,70,.4) 35%, rgba(0,0,0,.6) 100%); z-index:40; }
#startTitle{ position:fixed; left:var(--space-md); top:var(--space-md); font:bold var(--font-size-lg)/1 var(--font-mono); color:var(--color-ui-fg); z-index:41; margin:0; }
#startScreen::before{ content:""; position:absolute; inset:-50%; background:repeating-radial-gradient(circle at center, transparent 0 19px, var(--color-white) 19px 20px); opacity:.15; animation:spin 60s linear infinite; }
#startScreen.joining::before{ animation:warp .2s linear infinite; }
#startScreen .modal{ position:relative; background:none; padding:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; gap:var(--space-3-5x); align-items:center; text-align:center; margin-bottom:var(--space-30x); }
#startScreen .start-ad{ position:absolute; bottom:var(--space-lg); right:var(--space-lg); display:flex; align-items:center; justify-content:center; width:var(--width-lg); max-width:calc(100% - var(--space-lg) - var(--space-lg)); padding:var(--space-md); margin:0; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-overlay-darker); backdrop-filter:blur(var(--blur-ui)); box-shadow:0 var(--space-sm) var(--space-lg) rgba(0,0,0,0.35); z-index:41; }
#startScreen .start-ad ins{ display:block; width:100%; min-height:var(--space-30x); }
@media (max-width: 1024px){ #startScreen .start-ad{ display:none; } }
#startScreen input{ padding:var(--space-md) var(--space-lg); border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-overlay-darker); color:var(--color-ui-fg); text-align:center; font-family:var(--font-mono); font-weight:700; font-size:var(--font-size-lg); }
#startScreen .btn{ padding:var(--space-md) var(--space-xl); font-size:var(--font-size-lg); }
#startScreen input,#startScreen button{ width:var(--width-lg); box-sizing:border-box; }
#multiBtn{ background:linear-gradient(135deg,var(--color-gradient-start),var(--color-gradient-end)); color:var(--color-white); font-weight:700; }
@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes warp{ 0%{ transform:translate(0,0) scale(1) rotate(0); } 50%{ transform:translate(3px,-3px) scale(1.05) rotate(180deg); } 100%{ transform:translate(0,0) scale(1) rotate(360deg); } }
.width-xs{ width:var(--width-xs); }
.width-sm{ width:var(--width-sm); }
.width-md{ width:var(--width-md); }
.width-lg{ width:var(--width-lg); }
.fade{ transition:opacity var(--fade-duration); }
.hidden{ opacity:0; pointer-events:none; }