@charset "UTF-8";

/* ==========================================
  Root Variables
========================================== */

:root {
  /* Colors */
  --color-bg: #0a0a0a;
  --color-text: #ecf0f1;
  --color-panel-a-1: #1e2a38;
  --color-panel-a-2: #2c3e50;
  --color-panel-b-1: #2c3e50;
  --color-panel-b-2: #1e2a38;
  --color-timeout-1: #8b1a1a;
  --color-timeout-2: #c0392b;
  --color-winner-1: #b8860b;
  --color-winner-2: #daa520;
  --color-primary: #f39c12;
  --color-runout: #f1c40f;
  --color-accent-a: #27ae60;
  --color-accent-b: #2980b9;
  --color-overlay: rgba(0, 0, 0, 0.85);
  --color-input-bg: #34495e;
  --color-input-border: #555;
  --color-section-title: #2c3e50;
  --color-card-a-bg: rgba(39, 174, 96, 0.08);
  --color-card-a-border: rgba(39, 174, 96, 0.5);
  --color-card-b-bg: rgba(41, 128, 185, 0.08);
  --color-card-b-border: rgba(41, 128, 185, 0.5);

  /* Layout */
  --controls-height-mobile: 56px;
  --controls-height-pc: 70px;

  /* Fonts */
  --font-family-main: 'Poppins', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================
  CSS Reset
========================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
html{font-size:16px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;width:100%;height:100%;}
body{min-height:100vh;line-height:1.5;font-family:var(--font-family-main);color:var(--color-text);background-color:var(--color-bg);width:100%;height:100vh;overflow:hidden;display:flex;flex-direction:column;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:1.2;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none;}
button{cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus{outline:none;}

body {letter-spacing:1px;font-feature-settings:"palt" 1;-webkit-font-kerning:auto;font-kerning:auto;}

/* ==========================================
  Clock Layout (Mobile First: stacked vertically)
  - Reserve bottom space for fixed controls bar
========================================== */

.c-clock {flex:1;display:flex;flex-direction:column;width:100%;height:100%;padding-bottom:var(--controls-height-mobile);}

/* ==========================================
  Panel
========================================== */

.c-panel {flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1vh 4vw;overflow:hidden;transition:opacity 0.3s;min-height:0;}
.c-panel--a {background:linear-gradient(180deg, var(--color-panel-a-1) 0%, var(--color-panel-a-2) 100%);}
.c-panel--b {background:linear-gradient(180deg, var(--color-panel-b-1) 0%, var(--color-panel-b-2) 100%);}
.c-panel.is-inactive {opacity:0.55;}
.c-panel.is-timeout {background:linear-gradient(180deg, var(--color-timeout-1) 0%, var(--color-timeout-2) 100%) !important;opacity:1;}
.c-panel.is-winner {background:linear-gradient(180deg, var(--color-winner-1) 0%, var(--color-winner-2) 100%) !important;opacity:1;}

.c-panel__bigscore {position:absolute;right:4vw;top:50%;transform:translateY(-50%);font-size:38vw;font-weight:900;color:rgba(255, 255, 255, 0.08);line-height:1;letter-spacing:-4px;font-variant-numeric:tabular-nums;pointer-events:none;z-index:0;}

.c-panel__content {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}

.c-panel__break-wrap {height:auto;min-height:24px;display:flex;justify-content:center;align-items:center;margin-bottom:0.3vh;}

.c-panel__name-row {position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:0.3vh;}

.c-panel__name {font-size:min(7.5vw, 5.5vh);font-weight:500;letter-spacing:3px;text-transform:uppercase;}

.c-panel__name-badges {position:absolute;left:100%;top:50%;transform:translateY(-50%);display:flex;gap:1.5vw;margin-left:2vw;}

.c-panel__race {font-size:min(3vw, 2.2vh);letter-spacing:2px;opacity:0.55;margin-bottom:0.6vh;text-transform:uppercase;}

.c-panel__btn-row {position:relative;display:flex;align-items:center;justify-content:center;}

/* ==========================================
  Break Icon
========================================== */

.c-break-icon {font-size:2.5vw;padding:0.3vh 1.5vw;background:var(--color-primary);color:#000;border-radius:3px;letter-spacing:1.5px;font-weight:700;visibility:hidden;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.c-break-icon.is-show {visibility:visible;}

/* ==========================================
  Runout Counter
========================================== */

.c-runout-counter {font-size:3vw;padding:0.5vh 2vw;background:#e74c3c;color:#fff;border-radius:4px;letter-spacing:1px;font-weight:700;display:none;box-shadow:0 0 10px rgba(231, 76, 60, 0.6);white-space:nowrap;}
.c-runout-counter.is-show {display:inline-block;}

/* ==========================================
  Score Balls
========================================== */

.c-balls {display:flex;flex-wrap:wrap;justify-content:center;gap:min(1.5vw, 8px);margin:0.3vh 0 0.8vh 0;max-width:92vw;}

.c-ball-wrap {position:relative;display:flex;align-items:center;justify-content:center;}

.c-ball {width:min(6.5vw, 4vh);height:min(6.5vw, 4vh);max-width:32px;max-height:32px;min-width:18px;min-height:18px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:min(2.5vw, 1.6vh);font-weight:700;color:#000;transition:all 0.2s;background:transparent;border:1.5px dashed rgba(255, 255, 255, 0.3);box-shadow:none;}
.c-ball.is-filled {border:none;box-shadow:0 2px 4px rgba(0, 0, 0, 0.5),inset -2px -3px 5px rgba(0, 0, 0, 0.3),inset 2px 2px 3px rgba(255, 255, 255, 0.4);}
.c-ball.is-runout {box-shadow:0 0 0 2px var(--color-runout),0 0 15px 3px rgba(241, 196, 15, 0.8),0 0 25px rgba(231, 76, 60, 0.6),inset -2px -3px 5px rgba(0, 0, 0, 0.3),inset 2px 2px 3px rgba(255, 255, 255, 0.4) !important;animation:runout-glow 2s ease-in-out infinite;}

@keyframes runout-glow {
  0%, 100% {box-shadow:0 0 0 2px var(--color-runout),0 0 12px 2px rgba(241, 196, 15, 0.7),0 0 20px rgba(231, 76, 60, 0.5),inset -2px -3px 5px rgba(0, 0, 0, 0.3),inset 2px 2px 3px rgba(255, 255, 255, 0.4);}
  50% {box-shadow:0 0 0 2px var(--color-runout),0 0 18px 4px rgba(241, 196, 15, 1),0 0 30px rgba(231, 76, 60, 0.8),inset -2px -3px 5px rgba(0, 0, 0, 0.3),inset 2px 2px 3px rgba(255, 255, 255, 0.4);}
}

.c-ball__number {display:none;}
.c-ball.is-filled .c-ball__number {display:flex;width:55%;height:55%;background:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:2.5vw;box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}

.c-ball.is-filled.b1 {background:radial-gradient(circle at 35% 30%, #ffe55c, #f1c40f 50%, #c09010);}
.c-ball.is-filled.b2 {background:radial-gradient(circle at 35% 30%, #5b8cff, #1e40af 50%, #152a6b);}
.c-ball.is-filled.b3 {background:radial-gradient(circle at 35% 30%, #ff6b6b, #c0392b 50%, #7f1d1d);}
.c-ball.is-filled.b4 {background:radial-gradient(circle at 35% 30%, #a78bfa, #6d28d9 50%, #3b1a6e);}
.c-ball.is-filled.b5 {background:radial-gradient(circle at 35% 30%, #ffb347, #e67e22 50%, #8b4513);}
.c-ball.is-filled.b6 {background:radial-gradient(circle at 35% 30%, #4ade80, #15803d 50%, #14532d);}
.c-ball.is-filled.b7 {background:radial-gradient(circle at 35% 30%, #c08060, #722f20 50%, #3d1a10);}
.c-ball.is-filled.b8 {background:radial-gradient(circle at 35% 30%, #555, #000 50%, #000);}

.c-ball.is-filled.b9,
.c-ball.is-filled.b10,
.c-ball.is-filled.b11,
.c-ball.is-filled.b12,
.c-ball.is-filled.b13,
.c-ball.is-filled.b14,
.c-ball.is-filled.b15 {background:linear-gradient(180deg, transparent 0%, transparent 22%, #fff 22%, #fff 78%, transparent 78%, transparent 100%);}

.c-ball.is-filled.b9 {background-color:#f1c40f;}
.c-ball.is-filled.b10 {background-color:#1e40af;}
.c-ball.is-filled.b11 {background-color:#c0392b;}
.c-ball.is-filled.b12 {background-color:#6d28d9;}
.c-ball.is-filled.b13 {background-color:#e67e22;}
.c-ball.is-filled.b14 {background-color:#15803d;}
.c-ball.is-filled.b15 {background-color:#722f20;}

.c-ball.is-filled.b16,
.c-ball.is-filled.b17,
.c-ball.is-filled.b18,
.c-ball.is-filled.b19,
.c-ball.is-filled.b20,
.c-ball.is-filled.b21 {background:radial-gradient(circle at 35% 30%, #ddd, #888 50%, #555);}

.c-runout-badge {position:absolute;top:-20%;right:-20%;width:45%;height:45%;background:var(--color-runout);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2vw;font-weight:900;box-shadow:0 1px 3px rgba(0,0,0,0.6);border:1.5px solid #fff;z-index:2;line-height:1;}

/* ==========================================
  Time
========================================== */

.c-time {font-size:min(14vw, 12vh);font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-2px;margin:0.3vh 0;}

.c-time-up {font-size:min(8vw, 6vh);font-weight:900;letter-spacing:5px;color:#fff;background:rgba(0, 0, 0, 0.35);padding:0.6vh 4vw;border-radius:8px;margin:0.3vh 0;text-transform:uppercase;display:none;animation:blink 1.2s ease-in-out infinite;}
.c-time-up.is-show {display:inline-block;}

@keyframes blink {
  0%, 100% {opacity:1;}
  50% {opacity:0.5;}
}

/* ==========================================
  Turn Counter
========================================== */

.c-turn-counter {position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:3vw;font-size:4vw;font-weight:600;color:rgba(255, 255, 255, 0.85);letter-spacing:1px;text-align:left;}
.c-turn-counter__label {font-size:2.2vw;font-weight:500;opacity:0.55;letter-spacing:1px;text-transform:uppercase;display:block;line-height:1;margin-bottom:0.2vh;}
.c-turn-counter__value {font-size:5.5vw;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;}

/* ==========================================
  Action Button
========================================== */

.c-action-btn {width:55vw;max-width:260px;height:min(9vh, 60px);max-height:60px;min-height:44px;border:none;border-radius:14px;font-size:min(4.5vw, 18px);font-weight:600;letter-spacing:4px;text-transform:uppercase;cursor:pointer;position:relative;background:linear-gradient(180deg, #f5f5f5 0%, #c8c8c8 100%);color:#333;transition:transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, opacity 0.2s;transform:translateY(-6px);box-shadow:0 12px 0 #555,0 14px 18px rgba(0, 0, 0, 0.5),inset 0 2px 3px rgba(255, 255, 255, 0.9),inset 0 -3px 4px rgba(0, 0, 0, 0.15);flex-shrink:0;}
.c-action-btn.is-pressed {transform:translateY(0px);box-shadow:0 4px 0 #555,0 6px 8px rgba(0, 0, 0, 0.4),inset 0 2px 3px rgba(255, 255, 255, 0.9),inset 0 -3px 4px rgba(0, 0, 0, 0.15);background:linear-gradient(180deg, #e8e8e8 0%, #b5b5b5 100%);}
.c-action-btn.is-winner {background:linear-gradient(180deg, var(--color-runout) 0%, var(--color-winner-1) 100%);color:#fff;}
.c-action-btn.is-disabled {opacity:0.35;pointer-events:none;}

/* ==========================================
  Controls (Bottom-fixed bar — all viewports)
========================================== */

.c-controls {position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:20;display:flex;gap:8px;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.92);padding:8px 14px;border-radius:40px 40px 0 0;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-bottom:none;width:auto;max-width:96vw;}

.c-controls__btn {width:38px;height:38px;border-radius:50%;border:none;background:#fff;color:#000;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.c-controls__btn--settings {background:#7f8c8d;color:#fff;}
.c-controls__btn--reset {background:#e67e22;color:#fff;}

/* ==========================================
  Score Group
========================================== */

.c-score-group {display:flex;align-items:center;gap:5px;background:var(--color-accent-a);border-radius:25px;padding:4px 10px;}
.c-score-group--b {background:var(--color-accent-b);}

.c-score-group__label {font-size:13px;font-weight:700;color:#fff;padding:0 3px;letter-spacing:0.5px;}

.c-score-group__btn {width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);color:#000;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;flex-shrink:0;}

.c-score-group__btn--runout {background:var(--color-runout);color:#000;position:relative;border:2px solid #fff;box-shadow:0 0 6px rgba(241, 196, 15, 0.8);}
.c-score-group__btn--runout::after {content:'';position:absolute;inset:2px;border:1.5px solid rgba(0,0,0,0.4);border-radius:50%;pointer-events:none;}

/* ==========================================
  Confirm Dialog
========================================== */

.c-confirm {position:fixed;inset:0;background:rgba(0, 0, 0, 0.85);z-index:200;display:none;justify-content:center;align-items:center;padding:5vw;}
.c-confirm.is-show {display:flex;}

.c-confirm__box {background:var(--color-section-title);border:1px solid #555;border-radius:12px;padding:5vw;max-width:90vw;width:80vw;color:#fff;text-align:center;}

.c-confirm__title {font-size:5vw;font-weight:600;margin-bottom:2vh;letter-spacing:1px;}
.c-confirm__message {font-size:4vw;margin-bottom:4vh;color:#bdc3c7;line-height:1.5;}
.c-confirm__buttons {display:flex;gap:3vw;}
.c-confirm__btn {flex:1;padding:2.5vh;border:none;border-radius:8px;font-size:4.5vw;font-weight:600;cursor:pointer;letter-spacing:1px;text-transform:uppercase;}
.c-confirm__btn--cancel {background:#555;color:#fff;}
.c-confirm__btn--ok {background:#e67e22;color:#fff;}

/* ==========================================
  Settings Overlay (Mobile)
========================================== */

.c-settings {position:fixed;inset:0;background:rgba(8, 14, 22, 0.97);z-index:100;display:none;flex-direction:column;color:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.c-settings.is-show {display:flex;}

.c-settings__close {position:fixed;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:110;line-height:1;padding:0;border:1px solid rgba(255,255,255,0.2);transition:background 0.2s;}
.c-settings__close:hover {background:rgba(255,255,255,0.2);}

.c-settings__inner {padding:24px 18px 32px;width:100%;max-width:none;margin:0 auto;}

.c-settings__title {font-size:22px;margin-bottom:20px;font-weight:300;letter-spacing:6px;text-align:center;text-transform:uppercase;}

/* ==========================================
  Settings Sections
========================================== */

.c-settings__section {margin-bottom:18px;}

.c-settings__heading {display:flex;flex-direction:column;align-items:flex-start;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(243, 156, 18, 0.25);}

.c-settings__heading-text {font-size:15px;font-weight:600;color:var(--color-primary);letter-spacing:3px;text-transform:uppercase;}

.c-settings__heading-sub {font-size:11px;color:#7f8c8d;letter-spacing:0.5px;margin-top:2px;font-weight:400;}

/* ==========================================
  Player Card (settings, main section)
========================================== */

.c-player-card {background:var(--color-card-a-bg);border:1px solid var(--color-card-a-border);border-radius:10px;padding:14px;margin-bottom:10px;}
.c-player-card--b {background:var(--color-card-b-bg);border-color:var(--color-card-b-border);}

.c-player-card__header {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}

.c-player-card__badge {font-size:14px;font-weight:700;color:#fff;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;background:var(--color-accent-a);border-radius:4px;}
.c-player-card--b .c-player-card__badge {background:var(--color-accent-b);}

/* ==========================================
  Break Check (radio)
========================================== */

.c-break-check {display:flex;align-items:center;gap:8px;font-size:13px;color:#bdc3c7;font-weight:400;text-transform:none;letter-spacing:0.5px;cursor:pointer;}
.c-break-check input[type="radio"] {appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #666;border-radius:3px;background:transparent;cursor:pointer;position:relative;padding:0;margin:0;flex-shrink:0;}
.c-break-check input[type="radio"]:checked {background:var(--color-primary);border-color:var(--color-primary);}
.c-break-check input[type="radio"]:checked::after {content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#000;font-size:13px;font-weight:900;line-height:1;}
.c-break-check span {user-select:none;}

/* ==========================================
  Player Row (settings input)
========================================== */

.c-player-row {display:flex;gap:8px;align-items:flex-end;}

.c-player-row__col {display:flex;flex-direction:column;}
.c-player-row__col--name {flex:1;min-width:0;}
.c-player-row__col--race {width:60px;flex-shrink:0;}
.c-player-row__col--time {width:120px;flex-shrink:0;}

.c-player-row__col input,
.c-player-row__col .c-player-row__time-inputs input {width:100%;padding:8px 6px;font-size:15px;background:var(--color-input-bg);border:1px solid var(--color-input-border);color:#fff;border-radius:6px;text-align:center;min-width:0;}

.c-player-row__col--name input {text-align:left;padding-left:10px;}

.c-player-row__time-inputs {display:flex;gap:5px;}
.c-player-row__time-inputs input {flex:1;}

.c-player-row__label {font-size:11px;margin-bottom:4px;color:#bdc3c7;letter-spacing:0.5px;}

/* ==========================================
  Preset (Quick Presets section)
========================================== */

.c-preset {margin-top:10px;}
.c-preset__label {font-size:12px;color:#bdc3c7;font-weight:400;letter-spacing:0.5px;margin-bottom:6px;}
.c-preset__row {display:flex;gap:5px;flex-wrap:nowrap;}
.c-preset__btn {padding:9px 0;background:var(--color-input-bg);border:1px solid var(--color-input-border);color:#fff;border-radius:5px;font-size:13px;cursor:pointer;flex:1;min-width:0;text-align:center;transition:background 0.15s;}
.c-preset__btn:hover {background:#3d556e;}

/* ==========================================
  Settings Apply Button
========================================== */

.c-settings__apply {width:100%;padding:14px;font-size:14px;background:var(--color-accent-a);border:none;color:#fff;border-radius:8px;margin-top:18px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;font-weight:700;transition:background 0.15s;}
.c-settings__apply:hover {background:#229954;}

/* ==========================================
  Settings Footer (links)
========================================== */

.c-settings__footer {margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08);text-align:center;}
.c-settings__links {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.c-settings__link {font-size:11px;color:#7f8c8d;letter-spacing:0.5px;cursor:pointer;transition:color 0.15s;}
.c-settings__link:hover {color:#bdc3c7;}
.c-settings__divider {color:#444;font-size:11px;}
.c-settings__copyright {font-size:10px;color:#555;letter-spacing:1px;}

/* ==========================================
  Tablet / Small PC (min-width: 768px)
  - Switch to LEFT/RIGHT split layout
  - Controls bar still bottom-fixed (taller)
========================================== */

@media (min-width:768px) {
  .c-clock {flex-direction:row;padding-bottom:var(--controls-height-pc);}

  .c-panel {flex:1;height:100%;padding:3vh 2vw;}
  .c-panel--a {background:linear-gradient(135deg, var(--color-panel-a-1) 0%, var(--color-panel-a-2) 100%);}
  .c-panel--b {background:linear-gradient(225deg, var(--color-panel-b-1) 0%, var(--color-panel-b-2) 100%);}

  /* Big background score: re-anchor to panel center */
  .c-panel__bigscore {right:auto;left:50%;top:50%;transform:translate(-50%, -50%);font-size:55vh;letter-spacing:-10px;color:rgba(255, 255, 255, 0.06);}

  /* Both panels: same internal vertical order (no mirror) */
  .c-panel__content {gap:0.8vh;}
  .c-panel--a .c-panel__break-wrap,
  .c-panel--b .c-panel__break-wrap {order:1;}
  .c-panel--a .c-panel__name-row,
  .c-panel--b .c-panel__name-row {order:2;}
  .c-panel--a .c-panel__race,
  .c-panel--b .c-panel__race {order:3;}
  .c-panel--a .c-balls,
  .c-panel--b .c-balls {order:4;}
  .c-panel--a .c-time,
  .c-panel--b .c-time {order:5;}
  .c-panel--a .c-time-up,
  .c-panel--b .c-time-up {order:5;}
  .c-panel--a .c-panel__btn-row,
  .c-panel--b .c-panel__btn-row {order:6;}

  /* Typography */
  .c-panel__name {font-size:min(3.5vw, 32px);letter-spacing:3px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .c-panel__break-wrap {height:auto;min-height:28px;margin-bottom:0;}
  .c-break-icon {font-size:12px;padding:5px 12px;letter-spacing:2px;}
  .c-runout-counter {font-size:12px;padding:5px 14px;letter-spacing:1px;}
  .c-panel__name-badges {gap:8px;margin-left:12px;}
  .c-panel__race {font-size:12px;letter-spacing:3px;margin-bottom:1.5vh;opacity:0.6;}

  /* Time */
  .c-time {font-size:min(11vw, 110px);letter-spacing:-3px;margin:1vh 0;}
  .c-time-up {font-size:min(4.5vw, 48px);padding:1vh 3vw;letter-spacing:6px;margin:1vh 0;}

  /* Balls */
  .c-balls {gap:6px;max-width:46vw;margin:0.8vh 0 1.2vh 0;}
  .c-ball {width:26px;height:26px;max-width:26px;max-height:26px;font-size:11px;}
  .c-ball.is-filled .c-ball__number {font-size:11px;}
  .c-runout-badge {font-size:8px;}

  /* Action button: bigger */
  .c-action-btn {width:min(28vw, 240px);height:60px;max-height:60px;font-size:16px;letter-spacing:5px;border-radius:12px;}

  /* Turn counter */
  .c-turn-counter {margin-left:14px;}
  .c-turn-counter__label {font-size:10px;letter-spacing:2px;margin-bottom:2px;}
  .c-turn-counter__value {font-size:22px;}

  /* Controls bar: a bit bigger */
  .c-controls {gap:10px;padding:10px 16px;}
  .c-controls__btn {width:42px;height:42px;font-size:18px;}
  .c-score-group {gap:6px;padding:5px 10px;}
  .c-score-group__label {font-size:14px;padding:0 3px;}
  .c-score-group__btn {width:30px;height:30px;font-size:15px;}

  /* Settings: card layout */
  .c-settings__inner {max-width:680px;margin:6vh auto 4vh;padding:36px 40px;background:rgba(20, 30, 40, 0.55);border-radius:14px;border:1px solid rgba(255,255,255,0.06);}
  .c-settings__close {top:24px;right:24px;width:44px;height:44px;font-size:26px;}
  .c-settings__title {font-size:26px;margin-bottom:28px;letter-spacing:8px;}

  .c-settings__section {margin-bottom:24px;}
  .c-settings__heading {margin-bottom:16px;padding-bottom:10px;}
  .c-settings__heading-text {font-size:16px;letter-spacing:4px;}
  .c-settings__heading-sub {font-size:12px;margin-top:3px;}

  .c-player-card {padding:18px 20px;margin-bottom:12px;border-radius:12px;}
  .c-player-card__header {margin-bottom:14px;}
  .c-player-card__badge {font-size:14px;padding:5px 14px;letter-spacing:3px;}

  .c-player-row {gap:12px;}
  .c-player-row__col--race {width:80px;}
  .c-player-row__col--time {width:160px;}
  .c-player-row__time-inputs {gap:8px;}
  .c-player-row__col input,
  .c-player-row__col .c-player-row__time-inputs input {padding:10px 8px;font-size:16px;border-radius:7px;}
  .c-player-row__col--name input {padding-left:12px;}
  .c-player-row__label {font-size:12px;margin-bottom:5px;letter-spacing:1px;}

  .c-preset {margin-top:14px;}
  .c-preset__label {font-size:12px;margin-bottom:8px;}
  .c-preset__row {gap:6px;}
  .c-preset__btn {padding:10px 0;font-size:14px;border-radius:6px;}

  .c-settings__apply {padding:15px;font-size:15px;letter-spacing:4px;border-radius:10px;margin-top:24px;}

  .c-settings__footer {margin-top:28px;padding-top:18px;}
  .c-settings__links {gap:8px;margin-bottom:8px;}
  .c-settings__link {font-size:12px;}
  .c-settings__divider {font-size:12px;}
  .c-settings__copyright {font-size:11px;}

  /* Confirm dialog */
  .c-confirm__box {max-width:460px;width:460px;padding:32px 36px;}
  .c-confirm__title {font-size:22px;margin-bottom:14px;letter-spacing:2px;}
  .c-confirm__message {font-size:15px;margin-bottom:28px;}
  .c-confirm__buttons {gap:12px;}
  .c-confirm__btn {padding:14px;font-size:15px;border-radius:8px;letter-spacing:2px;}
}

/* ==========================================
  PC (min-width: 1024px) — refined sizing
  - Bigger action button, smaller time
========================================== */

@media (min-width:1024px) {
  .c-panel {padding:4vh 3vw;}

  .c-panel__name {font-size:min(3vw, 38px);letter-spacing:4px;max-width:38vw;}
  .c-break-icon {font-size:13px;padding:6px 14px;}
  .c-runout-counter {font-size:13px;padding:6px 16px;}
  .c-panel__race {font-size:13px;letter-spacing:3px;}

  /* Time: smaller */
  .c-time {font-size:min(10vw, 130px);letter-spacing:-4px;margin:1.2vh 0;}
  .c-time-up {font-size:48px;padding:14px 32px;letter-spacing:8px;}

  /* Balls */
  .c-balls {gap:8px;max-width:42vw;}
  .c-ball {width:30px;height:30px;max-width:30px;max-height:30px;font-size:12px;}
  .c-ball.is-filled .c-ball__number {font-size:12px;}
  .c-runout-badge {font-size:9px;}

  /* Action button: bigger */
  .c-action-btn {width:280px;height:70px;max-height:70px;font-size:19px;letter-spacing:6px;border-radius:14px;}

  .c-turn-counter {margin-left:18px;}
  .c-turn-counter__label {font-size:11px;}
  .c-turn-counter__value {font-size:26px;}

  /* Controls bar: PC sized */
  .c-controls {gap:14px;padding:12px 22px;}
  .c-controls__btn {width:46px;height:46px;font-size:20px;}
  .c-score-group {gap:8px;padding:6px 12px;}
  .c-score-group__label {font-size:16px;padding:0 4px;}
  .c-score-group__btn {width:34px;height:34px;font-size:17px;}
}

/* ==========================================
  Large PC (min-width: 1440px)
========================================== */

@media (min-width:1440px) {
  .c-panel__name {font-size:40px;letter-spacing:5px;}
  .c-time {font-size:160px;}
  .c-time-up {font-size:60px;}
  .c-balls {max-width:520px;}
  .c-action-btn {width:300px;height:74px;max-height:74px;font-size:20px;}
  .c-panel__bigscore {font-size:60vh;}
}