:root {
    color-scheme: dark;
    background: #414141;
    font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #414141;
}

body { min-width: 320px; min-height: 100%; }

#dartboard {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
    width: 82vmin;
    height: 82vmin;
    overflow: hidden;
    cursor: crosshair;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translate(-50%, -50%);
}

.score-corner {
    position: fixed;
    z-index: 2;
    top: 10px;
    top: max(10px, env(safe-area-inset-top, 0px));
    width: min(118px, 27vw);
    padding: 6px;
    border: 1px solid #ffffff26;
    border-radius: 10px;
    background: #151715b8;
    box-shadow: 0 5px 20px #0004;
    color: #f2f0e8;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.score-corner-left { left: 10px; left: max(10px, env(safe-area-inset-left, 0px)); }
.score-corner-right { right: 10px; right: max(10px, env(safe-area-inset-right, 0px)); }

.player-name {
    min-width: 32px;
    min-height: 24px;
    padding: 2px 6px;
    border: 0;
    border-radius: 5px;
    background: #d2ef8620;
    color: #d8f395;
    cursor: pointer;
    font: 700 13px/1.2 "Segoe UI", Arial, sans-serif;
    text-align: left;
    pointer-events: auto;
}

.player-name:hover, .player-name:focus-visible { background: #d2ef8640; }

.recent-scores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font: 500 10px/1.4 "Cascadia Mono", Consolas, monospace;
    text-align: center;
}

.recent-scores li {
    min-width: 0;
    padding: 2px 1px;
    border-radius: 4px;
    background: #ffffff12;
    color: #f3f0e8;
}

.player-dialog, .history-dialog {
    width: min(360px, calc(100vw - 32px));
    max-width: none;
    max-height: min(82dvh, 680px);
    padding: 0;
    overflow: auto;
    border: 1px solid #ffffff24;
    border-radius: 16px;
    background: #191c19;
    color: #f2f0e8;
    box-shadow: 0 24px 80px #000a;
}

.player-dialog::backdrop, .history-dialog::backdrop { background: #080a08b8; backdrop-filter: blur(5px); }
.dialog-card { padding: 22px; }
.dialog-card h1 { margin: 0 0 18px; font: 600 18px/1.2 "Segoe UI", Arial, sans-serif; }
.player-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player-option { min-height: 54px; border: 1px solid #ffffff26; border-radius: 9px; background: #252a24; color: #d8f395; cursor: pointer; font: 700 18px/1 "Segoe UI", Arial, sans-serif; }
.player-option:hover, .player-option:focus-visible { border-color: #d2ef8680; background: #30392a; }
.player-option[hidden] { display: none; }
.dialog-message { min-height: 1.3em; margin: 14px 0 0; color: #aeb7aa; font: 12px/1.4 "Segoe UI", Arial, sans-serif; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dialog-heading h2 { margin: 0; color: #d8f395; font: 700 18px/1.2 "Segoe UI", Arial, sans-serif; }
.close-dialog { width: 32px; height: 32px; border: 1px solid #ffffff26; border-radius: 50%; background: #252a24; color: #f2f0e8; cursor: pointer; font-size: 20px; line-height: 1; }
.full-scores { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.full-scores li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 10px; border-radius: 6px; background: #ffffff0b; font: 12px/1.35 "Cascadia Mono", Consolas, monospace; }
.full-scores li span:last-child { color: #aeb7aa; text-align: right; }
.notice { position: fixed; z-index: 3; right: 50%; bottom: 14px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(50%); padding: 9px 13px; border: 1px solid #ffffff26; border-radius: 8px; background: #151715ed; color: #f2f0e8; font: 12px/1.4 "Segoe UI", Arial, sans-serif; }
.notice[hidden] { display: none; }

@media (max-width: 360px) {
    .score-corner { width: min(100px, 27vw); padding: 5px; }
    .recent-scores { gap: 2px; font-size: 9px; }
}

#hitPulse {
    position: fixed;
    z-index: 1;
    width: 14px;
    height: 14px;
    border: 2px solid var(--pulse-color, #d2ef86);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#hitPulse.is-active { animation: hit-pulse 560ms ease-out forwards; }

@keyframes hit-pulse {
    0% { opacity: .95; transform: translate(-50%, -50%) scale(.55); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@media (prefers-reduced-motion: reduce) {
    #hitPulse.is-active { animation-duration: 100ms; }
}