* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Trebuchet MS", system-ui, sans-serif; color: #fff; background: #0b1a2b; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#scoreboard { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(10,20,40,.8); border: 2px solid #ffd34d; border-radius: 12px; padding: 8px 20px; font-size: 22px; font-weight: bold; white-space: nowrap; }
#scoreboard small { color: #ffd34d; margin-left: 12px; font-size: 16px; }
#banner { position: absolute; top: 38%; width: 100%; text-align: center; font-size: 54px; font-weight: 900; color: #ffd34d; text-shadow: 0 4px 12px #000; }
#help { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 14px; opacity: .85; text-shadow: 0 1px 4px #000; }
#screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
#screen:empty { display: none; }
.panel { background: rgba(10,20,40,.88); border: 2px solid #ffd34d; border-radius: 18px; padding: 22px 28px; max-width: 960px; width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto; text-align: center; }
h1 { margin: 0 0 6px; color: #ffd34d; font-size: 38px; }
h2 { margin: 0 0 12px; color: #ffd34d; }
p { margin: 6px 0 14px; }
button, input { font: inherit; border-radius: 10px; border: 2px solid #ffd34d; padding: 10px 16px; }
button { background: #ffd34d; color: #10203a; font-weight: bold; cursor: pointer; margin: 4px; }
button:hover { background: #fff0a8; }
button.alt { background: transparent; color: #ffd34d; }
input { background: #fff; color: #10203a; width: 260px; }
.cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.card { min-width: 200px; padding: 18px; border-radius: 14px; border: 3px solid var(--c, #ffd34d); background: rgba(255,255,255,.08); color: #fff; }
.card small { display: block; font-weight: normal; margin-top: 6px; }
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.team { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); color: #fff; text-align: left; border: 2px solid transparent; }
.team:hover { border-color: #ffd34d; background: rgba(255,255,255,.2); }
.kit { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; text-align: left; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 3px 5px; text-align: center; } td:first-child, th:first-child { text-align: left; }
tr.me { color: #ffd34d; font-weight: bold; }
.box { background: rgba(255,255,255,.07); border-radius: 10px; padding: 8px; }
.big { font-size: 56px; font-weight: 900; margin: 4px 0; }