/* Brutal Bowl Arena — chrome-and-steel 16-bit future-sport look */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --steel-dark: #14181f;
  --steel: #2a3240;
  --steel-light: #46536a;
  --chrome-hi: #e8f0ff;
  --brass: #d9a441;
  --accent: #59d6e6;
  --danger: #e0512e;
  --panel-gradient-start: #39445a;
  --panel-gradient-mid1: #222a38;
  --panel-gradient-mid2: #1a2130;
  --panel-gradient-end: #0c1017;
  --panel-border-top: #7d8ca6;
  --btn-grad-start: #5a6d8c;
  --btn-grad-mid1: #33405a;
  --btn-grad-mid2: #222c40;
  --btn-grad-end: #3a4a66;
  --btn-border-hi: #aebcd6;
  --steel-shadow: #0a0d12;
  --btn-big-text: #101418;
}

html[data-theme="light"] {
  --steel-dark: #ffffff;
  --steel: #e5e9f0;
  --steel-light: #cbd5e1;
  --chrome-hi: #1a2230;
  --brass: #5b56d6;
  --accent: #3fb6a8;
  --danger: #b91c1c;
  --panel-gradient-start: #ffffff;
  --panel-gradient-mid1: #fbfcfd;
  --panel-gradient-mid2: #f7f9fc;
  --panel-gradient-end: #edf1f6;
  --panel-border-top: #d0d7de;
  --btn-grad-start: #eef2f7;
  --btn-grad-mid1: #e1e8f0;
  --btn-grad-mid2: #d2dce7;
  --btn-grad-end: #dee5ee;
  --btn-border-hi: #ffffff;
  --steel-shadow: rgba(0, 0, 0, 0.12);
  --btn-big-text: #ffffff;
  --btn-big-start: #8f8bf0;
  --btn-big-mid1: #635fc7;
  --btn-big-mid2: #524eb7;
  --btn-big-end: #5b56d6;
  --btn-big-border: #b9b6f8;
  --btn-big-border-dark: #433ea1;
}

html, body {
  height: 100%;
  background: radial-gradient(ellipse at 50% -10%, var(--bg-radial-start, #33404f) 0%, var(--steel-dark) 60%);
  color: var(--chrome-hi);
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: bold;
  letter-spacing: 0.04em;
}

html[data-theme="light"] {
  --bg-radial-start: #e2e8f0;
}

#app { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }

.screen { display: none; width: 100%; max-width: 860px; }
.screen.active { display: block; }

.chrome-panel {
  background: linear-gradient(180deg, var(--panel-gradient-start) 0%, var(--panel-gradient-mid1) 8%, var(--panel-gradient-mid2) 92%, var(--panel-gradient-end) 100%);
  border: 3px solid;
  border-color: var(--panel-border-top) var(--steel) var(--steel-dark) var(--panel-border-top);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--steel-dark), 0 12px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
  padding: 28px;
}

.title-panel { text-align: center; padding: 48px 28px; }

.chrome-text {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: 0.95;
  background: linear-gradient(180deg, #ffffff 0%, #b9c9e6 35%, #5a6d8c 50%, #cfe0ff 55%, #8fa3c4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #0a0d12) drop-shadow(0 6px 8px rgba(0,0,0,.6));
}

.chrome-sub {
  font-size: clamp(1.2rem, 4vw, 2rem);
  color: var(--brass);
  text-shadow: 0 2px 0 #0a0d12, 0 0 18px rgba(217,164,65,.35);
  margin-bottom: 14px;
}

.subtitle { color: #9fb0cc; font-size: .95rem; line-height: 1.5; margin: 10px 0; }
.footnote { margin-top: 26px; font-size: .8rem; color: #6c7d99; }
.footnote a { color: var(--accent); }
.hint { color: #6c7d99; font-size: .75rem; }
.credits { color: var(--brass); margin-top: 6px; }

.btn {
  display: inline-block; cursor: pointer; margin: 8px 6px 0 6px;
  font: inherit; color: var(--chrome-hi); text-transform: uppercase;
  padding: 10px 22px;
  background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-mid1) 45%, var(--btn-grad-mid2) 55%, var(--btn-grad-end) 100%);
  border: 2px solid; border-color: var(--btn-border-hi) var(--steel-dark) var(--steel-dark) var(--btn-border-hi);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--steel-shadow, #0a0d12), inset 0 1px 0 rgba(255,255,255,.2);
  transition: filter 0.1s, transform 0.1s, box-shadow 0.1s;
}
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--steel-shadow, #0a0d12); }
.btn.big { padding: 14px 34px; font-size: 1.1rem; color: var(--btn-big-text, #101418);
  background: linear-gradient(180deg, var(--btn-big-start, #ffe9b0) 0%, var(--btn-big-mid1, #d9a441) 45%, var(--btn-big-mid2, #a8752a) 55%, var(--btn-big-end, #e6b95a) 100%);
  border-color: var(--btn-big-border, #fff2cc) var(--btn-big-border-dark, #6b4a15) var(--btn-big-border-dark, #59400f) var(--btn-big-border, #fff2cc); }

.row { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

/* team select */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.team-card {
  cursor: pointer; border-radius: 8px; overflow: hidden; text-align: left;
  background: #10151f; border: 2px solid #3a465c; transition: transform .1s, border-color .1s;
}
.team-card:hover { transform: scale(1.03); border-color: var(--brass); }
.team-card img { width: 100%; height: 110px; object-fit: cover; display: block; filter: saturate(1.1); }
.team-card .tc-body { padding: 10px; }
.team-card h3 { font-size: .95rem; color: var(--chrome-hi); }
.team-card .tc-race { color: var(--accent); font-size: .75rem; text-transform: uppercase; }
.statbar { height: 6px; background: #232c3c; border-radius: 3px; margin: 3px 0; overflow: hidden; }
.statbar i { display: block; height: 100%; border-radius: 3px; }
.statlabel { font-size: .65rem; color: #8493ad; display: flex; justify-content: space-between; margin-top: 5px; }

/* manage */
.manage-head { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.manage-head img { width: 190px; height: 120px; object-fit: cover; border-radius: 8px; border: 2px solid var(--steel-light); }
.roster { max-height: 46vh; overflow-y: auto; border: 2px solid #313c50; border-radius: 8px; }
.roster table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.roster th { position: sticky; top: 0; background: #232c3c; color: var(--brass); padding: 7px 6px; text-align: left; font-size: .72rem; }
.roster td { padding: 6px; border-top: 1px solid #232c3c; }
.roster tr.squad td:first-child::before { content: "▶ "; color: var(--accent); }
.stat-cell { white-space: nowrap; }
.plus {
  cursor: pointer; font: inherit; color: #101418; background: var(--accent);
  border: none; border-radius: 4px; width: 20px; height: 20px; margin-left: 5px; line-height: 1;
}
.plus:disabled { background: #3a465c; color: #6c7d99; cursor: default; }

/* league */
.league-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.league-table th { color: var(--brass); text-align: left; padding: 8px 6px; border-bottom: 2px solid #3a465c; }
.league-table td { padding: 8px 6px; border-bottom: 1px solid #232c3c; }
.league-table tr.you td { color: var(--accent); }

/* match */
#screen-match.active { display: flex; flex-direction: column; align-items: center; }
#hud {
  display: flex; gap: 18px; align-items: baseline; padding: 8px 18px; margin-bottom: 6px;
  background: linear-gradient(180deg, #39445a, #1a2130);
  border: 2px solid #7d8ca6; border-radius: 8px; font-size: .95rem;
}
#hud-score { color: var(--brass); font-size: 1.4rem; }
#hud-clock { color: var(--accent); }
#pitch {
  max-height: 74vh; max-width: 94vw; height: auto;
  border: 4px solid; border-color: #7d8ca6 #2a3140 #1a2028 #7d8ca6; border-radius: 8px;
  box-shadow: 0 0 0 2px #0a0d12, 0 14px 44px rgba(0,0,0,.8);
  background: #10151f;
}
#ticker { height: 1.4em; margin-top: 8px; color: var(--danger); text-transform: uppercase; font-size: 1rem; text-shadow: 0 0 12px rgba(224,81,46,.5); }
#controls-help { color: #6c7d99; font-size: .75rem; margin-top: 4px; }

/* auto-coach + speed dial */
#match-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-top: 10px; }
#btn-autocoach, #btn-sound { margin: 0; }
#btn-sound.on,
#btn-autocoach.on {
  color: #08222a;
  background: linear-gradient(180deg, #7ff0ff 0%, #2aa7b8 48%, #1b7c8a 55%, #59d6e6 100%);
  border-color: #bff6ff #0d4a54 #093a42 #bff6ff;
  box-shadow: 0 3px 0 #0a0d12, inset 0 1px 0 rgba(255,255,255,.4), 0 0 16px rgba(89,214,230,.5);
}
.dial {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  background: linear-gradient(180deg, #39445a, #1a2130);
  border: 2px solid; border-color: #7d8ca6 #2a3140 #1a2028 #7d8ca6; border-radius: 8px;
}
.dial label { color: var(--brass); font-size: .8rem; }
.dial input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 6px; border-radius: 3px; outline: none;
  background: linear-gradient(90deg, #2a3140, #59d6e6);
}
.dial input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; border: 2px solid #0a0d12;
  background: radial-gradient(circle at 34% 30%, #eaf6ff 0%, #59d6e6 55%, #227f8c 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
}
.dial input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid #0a0d12;
  background: radial-gradient(circle at 34% 30%, #eaf6ff 0%, #59d6e6 55%, #227f8c 100%);
}
#speed-readout { color: var(--accent); font-size: .82rem; min-width: 96px; }
.dial select {
  font: inherit; color: var(--chrome-hi); cursor: pointer;
  background: linear-gradient(180deg, #33405a, #1a2130);
  border: 2px solid; border-color: #7d8ca6 #2a3140 #1a2028 #7d8ca6;
  border-radius: 6px; padding: 6px 10px;
}
.dial select:hover { filter: brightness(1.2); }

.post-score { font-size: 2.2rem; color: var(--brass); margin: 12px 0; text-shadow: 0 2px 0 #0a0d12; }

/* how to play */
.help-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
@media (max-width: 720px) { .help-cols { grid-template-columns: 1fr; } }
.help-text h3, .binds-title { color: var(--brass); margin: 12px 0 6px; font-size: 1rem; }
.help-text h3:first-child { margin-top: 0; }
.help-text p { color: #9fb0cc; font-size: .88rem; line-height: 1.55; }
.help-text b { color: var(--chrome-hi); }
.keybinds { border: 2px solid #313c50; border-radius: 8px; padding: 6px 10px; }
.keyrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 2px; border-bottom: 1px solid #232c3c; font-size: .85rem; color: #9fb0cc;
}
.keyrow:last-child { border-bottom: none; }
.keybtn { margin: 0; padding: 5px 12px; min-width: 74px; font-size: .8rem; }
.keybtn.listening {
  color: #08222a;
  background: linear-gradient(180deg, #7ff0ff 0%, #2aa7b8 48%, #1b7c8a 55%, #59d6e6 100%);
  border-color: #bff6ff #0d4a54 #093a42 #bff6ff;
  animation: keypulse 0.9s ease-in-out infinite alternate;
}
@keyframes keypulse { from { filter: brightness(1); } to { filter: brightness(1.45); } }

/* on-screen touch controls (shown on coarse pointers / after a touch) */
#touch-controls { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 30; }
/* on touch layouts the settings bar moves above the pitch, so the bottom of
   the screen belongs to the canvas + floating controls */
body.touch #screen-match.active #touch-controls { display: block; }
body.touch #screen-match.active #hud { order: -3; }
body.touch #screen-match.active #match-controls { order: -2; margin: 0 0 8px; }
body.touch #screen-match.active #controls-help { display: none; }
@media (pointer: coarse) {
  #screen-match.active #touch-controls { display: block; }
  #screen-match.active #hud { order: -3; }
  #screen-match.active #match-controls { order: -2; margin: 0 0 8px; }
  #screen-match.active #controls-help { display: none; }
}
#joystick {
  position: absolute; left: 16px; bottom: 20px; width: 132px; height: 132px;
  border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 50% 40%, rgba(70,83,106,.45), rgba(20,24,31,.55));
  border: 2px solid rgba(125,140,166,.55);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #eaf6ff 0%, #59d6e6 55%, #227f8c 100%);
  border: 2px solid #0a0d12; box-shadow: 0 3px 8px rgba(0,0,0,.6);
  will-change: transform;
}
#touch-buttons {
  position: absolute; right: 14px; bottom: 20px; pointer-events: auto;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.tbtn {
  width: 72px; height: 72px; border-radius: 50%; margin: 0; padding: 0;
  font: inherit; font-size: .58rem; line-height: 1.25; text-transform: uppercase;
  color: var(--chrome-hi); cursor: pointer; touch-action: none; opacity: .88;
  background: linear-gradient(180deg, #5a6d8c 0%, #33405a 45%, #222c40 55%, #3a4a66 100%);
  border: 2px solid; border-color: #aebcd6 #1a2028 #12161e #aebcd6;
  box-shadow: 0 3px 0 #0a0d12, inset 0 1px 0 rgba(255,255,255,.3);
}
.tbtn:active { transform: translateY(2px) scale(.96); filter: brightness(1.3); }
.tbtn.tbig {
  width: 94px; height: 94px; font-size: .66rem; color: #101418;
  background: linear-gradient(180deg, #ffe9b0 0%, #d9a441 45%, #a8752a 55%, #e6b95a 100%);
  border-color: #fff2cc #6b4a15 #59400f #fff2cc;
}