*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background: #0d1117;
    color: #e6edf3;
    font-family: system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}

/* ─── En-tête compact ─── */
#app-header {
    flex-shrink: 0;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #21262d;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 3px;
}

/* ─── Sélecteur de langue ─── */
#lang-switcher {
    position: absolute;
    right: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.lang-btn {
    background: none;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #8b949e;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background .1s, color .1s, border-color .1s;
}
.lang-btn:hover  { background: #21262d; color: #ccc; }
.lang-btn.active { background: #21262d; color: #e6edf3; border-color: #58a6ff; }

/* ─── Zone principale ─── */
#main {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 10px;
    gap: 12px;
    min-height: 0;
}

/* ─── Cible ─── */
#board-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

/* Le SVG est carré (viewBox carré) : height contraint par la dimension la plus petite */
#dartboard {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 32px rgba(0,0,0,0.95));
}

.dart-sector {
    cursor: pointer;
    transition: filter 0.07s ease;
}
.dart-sector:hover  { filter: brightness(1.5); }
.dart-sector.thrown { filter: brightness(0.5) sepia(1) saturate(4) hue-rotate(180deg); }

/* ─── Panneau latéral ─── */
#panel {
    width: 238px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

.card-dark {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 11px 13px;
    flex-shrink: 0;
}

.panel-label {
    font-size: 0.6rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #8b949e;
    margin-bottom: 4px;
}

/* ─── Finish ─── */
#finish-value {
    font-size: 4.8rem;
    font-weight: 900;
    color: #f0a500;
    line-height: 1;
}
#remaining-value {
    font-size: 0.82rem;
    color: #8b949e;
    min-height: 1.1em;
}

/* ─── Fléchettes ─── */
.dart-slot {
    flex: 1;
    min-height: 58px;
    border-radius: 7px;
    border: 1px dashed #2e3440;
    background: #1a1f2a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    transition: background .15s, border-color .15s;
}
.dart-slot.filled    { border-style: solid; border-color: #3d444d; background: #21262d; }
.dart-slot.won-dart  { background: #0b2416; border-color: #28a745; }
.dart-slot.bust-dart { background: #2a1000; border-color: #f0a500; }
.dart-slot.miss-dart { background: #2a1a00; border-color: #f0a500; border-style: solid; }
.dart-slot .slot-num   { font-size: 0.52rem; color: #555; margin-bottom: 1px; }
.dart-slot .slot-label { font-size: 0.92rem; font-weight: 700; }
.dart-slot .slot-pts   { font-size: 0.62rem; color: #8b949e; }

/* ─── Timer ─── */
#timer { font-size: 1.65rem; font-weight: 700; color: #58a6ff; letter-spacing: 1px; }

/* ─── Résultat inline (dans la card Timer) ─── */
#result-inline { font-size: 0.78rem; line-height: 1.35; margin-top: 5px; }
.result-inline-won  { color: #28a745; }
.result-inline-bust { color: #f0a500; }
.result-inline-lost { color: #dc3545; }

/* ─── Stats ─── */
.stat-box {
    background: #21262d;
    border-radius: 6px;
    padding: 6px 3px;
    text-align: center;
}
.stat-box .stat-val { font-size: 1.1rem; font-weight: 700; color: #f0a500; }
.stat-box .stat-lbl { font-size: 0.55rem; color: #8b949e; text-transform: uppercase; letter-spacing: 1px; }

#btn-new { font-weight: 700; letter-spacing: 1px; font-size: 0.85rem; }

/* ─── Colonne alternatives ─── */
#alt-column {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}
#alt-column.d-none { display: none !important; }

/* ─── Alternatives ─── */
.alt-combo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.alt-combo:last-child { margin-bottom: 0; }
.alt-dart {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #21262d;
    color: #ccc;
}
.alt-dart.first { color: #c8a040; }
.alt-dart.last  { color: #58a6ff; }
.alt-sep { color: #444; font-size: 0.65rem; }
.alt-recovery { border-left: 2px solid #f0a500; padding-left: 5px; margin-left: -5px; }
.alt-recovery-badge { color: #f0a500; font-size: 0.6rem; margin-right: 3px; vertical-align: middle; }

/* ─── Mobile ─── */
@media (max-width: 900px) {
    #alt-column { width: 100%; }
}
@media (max-width: 660px) {
    html, body { height: auto; overflow: auto; }
    #main { flex-direction: column; overflow: visible; }
    #board-area { min-height: 85vw; flex: none; }
    #panel { width: 100%; }
}