* { box-sizing: border-box; }
body { background: #0f1216; color: #e0e0e0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; min-height: 100vh; }
a { color: #66c0f4; }
.navbar { min-height: 56px; background: #171a21; border-bottom: 1px solid #2a2e35; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; }
.nav-brand { font-weight: 800; color: #66c0f4; font-size: 20px; letter-spacing: 1px; text-decoration: none; }
.nav-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.nav-user img { width: 32px; height: 32px; border-radius: 4px; }
.sivu { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
h1 { color: #fff; font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: #8a929c; margin: 0 0 12px; }
.kortti { background: #171a21; border: 1px solid #2a2e35; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.nappi { display: inline-block; background: #2a475e; color: #fff; border: 0; border-radius: 6px; padding: 12px 20px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
.nappi:hover { background: #66c0f4; color: #000; }
.nappi.iso { background: #2e7d32; }
.nappi.iso:hover { background: #43a047; color: #fff; }
.nappi:disabled { opacity: .5; cursor: not-allowed; }
.nappi.pieni { padding: 6px 10px; font-size: 13px; min-height: 32px; font-weight: 600; }
.nappi.vaara { background: #7a2020; }
.himmea { color: #8a929c; font-size: 14px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 10px 0; border-bottom: 1px solid #2a2e35; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; }
.lista li:last-child { border-bottom: 0; }
.merkki { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; background: #3d4450; color: #ddd; text-transform: uppercase; }
.merkki.live { background: #2e7d32; color: #fff; }
.merkki.paalla { background: #2e7d32; color: #fff; }
.komento { display: block; background: #0f1216; border: 1px solid #333; border-radius: 6px; padding: 10px; font-family: monospace; font-size: 14px; word-break: break-all; margin: 8px 0; user-select: all; }
.virhe-laatikko { background: #3a1616; border: 1px solid #7a2020; color: #ffb4b4; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.joukkueet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.joukkueet .jono { grid-column: 1 / -1; }
.pelaaja { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #22262d; flex-wrap: wrap; }
.pelaaja:last-child { border-bottom: 0; }
.pelaaja img { width: 36px; height: 36px; border-radius: 4px; background: #2a2e35; }
.pelaaja .nimi { flex: 1 1 100px; font-weight: 600; word-break: break-word; }
.pelaaja .toiminnot { display: flex; gap: 6px; flex-wrap: wrap; }
.tyhja { color: #666; font-size: 14px; padding: 8px 0; }
.tulos { font-size: 40px; font-weight: 800; text-align: center; letter-spacing: 4px; }
.rivi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
select { background: #0f1216; border: 1px solid #333; color: #fff; padding: 10px; border-radius: 6px; font-size: 16px; min-height: 44px; }
@media (max-width: 700px) {
    .joukkueet { grid-template-columns: 1fr; }
    .sivu { margin-top: 12px; }
    .nappi.iso { width: 100%; text-align: center; }
    .tulos { font-size: 32px; }
}