.darts-container { max-width: 720px; } body.dark-mode .darts-header h1 { color: #f4f4f8; } body.dark-mode .darts-header p { color: #aeb2c3; }.darts-top-label { color: #b13e3e; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }.darts-heading-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: #ffe0df; font-size: 2.2rem; }.darts-panel { padding: clamp(15px, 4vw, 30px); }
.darts-mode-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 0 auto 13px; gap: 6px; padding: 5px; border-radius: 14px; background: #f0eeee; }.darts-mode-picker button { min-width: 0; min-height: 38px; padding: 6px 5px; border: 0; border-radius: 10px; background: transparent; color: #65606b; font-size: .74rem; font-weight: 900; cursor: pointer; touch-action: manipulation; }.darts-mode-picker button.active { background: #fff; color: #ae3b3b; box-shadow: 0 3px 8px rgba(74,24,24,.12); }
.darts-difficulty-picker { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 560px; margin: 0 auto 13px; color: #8b6970; font-size: .68rem; font-weight: 900; }.darts-difficulty-picker button { min-height: 31px; padding: 5px 12px; border: 1px solid #ead8d8; border-radius: 999px; background: transparent; color: #8b6970; font-size: .68rem; font-weight: 900; cursor: pointer; touch-action: manipulation; }.darts-difficulty-picker button.active { border-color: #c45757; background: #fff0ec; color: #ae3b3b; }
.darts-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 500px; margin: 0 auto 11px; }.darts-toolbar div { min-width: 0; padding: 10px 5px; border-radius: 13px; background: #fff0ec; text-align: center; }.darts-toolbar span { display: block; color: #a14a43; font-size: .58rem; font-weight: 900; letter-spacing: .07em; }.darts-toolbar strong { display: block; margin-top: 3px; color: var(--text-color, #26242a); font-size: clamp(1rem, 4.3vw, 1.32rem); }.darts-status { min-height: 22px; margin: 0 0 10px; color: var(--muted-text, #74798a); font-size: .81rem; font-weight: 700; text-align: center; }
.darts-board-wrap { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 50%; background: #242323; box-shadow: 0 11px 24px rgba(51,26,25,.2); }.darts-board-wrap::after { content: ""; position: absolute; z-index: 2; inset: 1.5%; border: 2px solid rgba(255,255,255,.16); border-radius: 50%; pointer-events: none; } #dartsCanvas { display: block; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }.darts-last-throws { display: flex; justify-content: center; gap: 8px; min-height: 33px; margin: 12px 0 0; }.darts-throw { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 6px 9px; border-radius: 999px; background: #f2eeee; color: #8c3939; font-size: .73rem; font-weight: 900; }.darts-throw.miss { color: #74717a; }.darts-actions { margin-top: 12px; }.darts-hint { max-width: 490px; margin: 15px auto 0; color: var(--muted-text, #74798a); font-size: .7rem; line-height: 1.4; text-align: center; }
body.dark-mode .darts-mode-picker { background: #39343c; } body.dark-mode .darts-mode-picker button.active { background: #51464d; color: #ffb2aa; } body.dark-mode .darts-difficulty-picker button { border-color: #65474b; color: #d6aeb3; } body.dark-mode .darts-difficulty-picker button.active { background: #512f35; color: #ffb2aa; } body.dark-mode .darts-toolbar div { background: #482f34; } body.dark-mode .darts-toolbar strong { color: #f4f4f8; } body.dark-mode .darts-heading-icon { background: #4d272c; }
@media (max-width: 520px) { .darts-top-label { display: none; }.darts-mode-picker { gap: 3px; padding: 4px; }.darts-mode-picker button { min-height: 36px; padding-inline: 2px; font-size: .63rem; }.darts-difficulty-picker { gap: 4px; }.darts-difficulty-picker button { padding-inline: 9px; font-size: .62rem; }.darts-actions { margin-top: 16px; } }.darts-page .game-actions .game-button { max-width: 260px; }
@media (prefers-reduced-motion: reduce) { .darts-mode-picker button { transition: none; } }