.timer-card { text-align: center; border: 1px solid #30363a; border-radius: 20px; background: #1c2023; padding: clamp(28px, 9vw, 58px) 22px; box-shadow: 0 24px 70px rgba(0,0,0,.25); transition: background .2s ease; }
.timer-card.is-round { background: var(--round-color); border-color: var(--round-color); }
.timer-card.is-start-delay { background: var(--start-delay-color); border-color: var(--start-delay-color); }
.timer-card.is-round-break { background: var(--round-break-color); border-color: var(--round-break-color); }
.timer-card.is-fight-break { background: var(--fight-break-color); border-color: var(--fight-break-color); }
.phase-chip { display: inline-block; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 7px 10px; font-size: .7rem; letter-spacing: .1em; font-weight: 800; }
.position { margin: 25px 0 0; color: rgba(255,255,255,.8); font-weight: 700; }
.countdown { margin: 6px 0; font-size: clamp(5rem, 24vw, 10rem); font-weight: 900; letter-spacing: -.09em; font-variant-numeric: tabular-nums; line-height: 1; }
.timer-card .phase-help { color: rgba(255,255,255,.85); margin-bottom: 30px; }
.active-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--fightr-space-sm); }
.timer-card { background: var(--surface); }
.timer-card.is-round { background: var(--round-color); border-color: var(--round-color); }
.timer-shell.is-timing { position: fixed; inset: 0; z-index: 10; width: 100vw; max-width: none; min-height: 100dvh; height: 100dvh; margin: 0; padding: 0; }
.timer-shell.is-timing .app-bar { display: none; }
.timer-shell.is-timing .timer-card { width: 100%; min-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 7vw, 52px); }
.timer-shell.is-timing .phase-chip { order: 1; }
.timer-shell.is-timing .position { order: 2; margin: 14px 0 0; font-size: clamp(.78rem, 2.4vw, 1rem); }
.timer-shell.is-timing .countdown { order: 3; margin: 8px 0 22px; font-size: clamp(7rem, 32vw, 16rem); }
.timer-shell.is-timing .active-controls { order: 4; }
@media (orientation: landscape) and (min-width: 600px) {
.timer-card { min-height: calc(100vh - 74px); display: grid; align-content: center; grid-template-columns: 1fr 1.2fr 1fr; column-gap: 20px; padding: 22px 34px; }
.timer-card .phase-chip { align-self: end; }
.timer-card .position { align-self: end; }
.timer-card .countdown { grid-column: 2; grid-row: 1 / span 3; font-size: clamp(5rem, 15vw, 9rem); }
.timer-card .phase-help { grid-column: 1; grid-row: 3; margin: 0; }
.timer-card .active-controls { grid-column: 3; grid-row: 2; }
.timer-card .position { margin: 0; grid-column: 1; grid-row: 2; }
.timer-card .phase-chip { grid-column: 1; grid-row: 1; justify-self: center; }
.timer-shell.is-timing .timer-card { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 18px 8vw; }
.timer-shell.is-timing .countdown { grid-column: auto; grid-row: auto; font-size: clamp(8rem, 24vw, 17rem); }
.timer-shell.is-timing .position { grid-column: auto; grid-row: auto; justify-self: auto; align-self: auto; }
.timer-shell.is-timing .phase-chip { grid-column: auto; grid-row: auto; justify-self: auto; align-self: auto; }
.timer-shell.is-timing .active-controls { grid-column: auto; grid-row: auto; justify-self: auto; align-self: auto; }
.timer-shell.is-timing .position { margin-top: 12px; }
}
.timer-card.is-round { --phase-vignette: var(--round-color); --phase-vignette-mid: #090606; }
.timer-card.is-start-delay { --phase-vignette: var(--start-delay-color); --phase-vignette-mid: #080808; }
.timer-card.is-round-break { --phase-vignette: var(--round-break-color); --phase-vignette-mid: #090704; }
.timer-card.is-fight-break { --phase-vignette: var(--fight-break-color); --phase-vignette-mid: #040609; }
.timer-card { position: relative; overflow: hidden; background: #050505; }
.timer-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, #050505 0%, #050505 40%, var(--phase-vignette-mid, #080808) 52%, var(--phase-vignette, #050505) 112%); box-shadow: inset 0 0 0 5px var(--phase-vignette, #050505), inset 0 0 110px 18px var(--phase-vignette, #050505); }
.timer-card.is-solid-phase::before { background: var(--phase-vignette, #050505); box-shadow: none; }
.timer-card.is-solid-phase .countdown { color: #fff; paint-order: stroke fill; -webkit-text-stroke: clamp(2px, .028em, 7px) rgba(0,0,0,.82); text-shadow: 0 5px 0 rgba(0,0,0,.5), 2px 0 0 rgba(0,0,0,.42), -2px 0 0 rgba(0,0,0,.42), 0 2px 0 rgba(0,0,0,.42), 0 -2px 0 rgba(0,0,0,.42); }
.timer-topbar { position: relative; z-index: 1; width: min(100%, 880px); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.phase-chip { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--fightr-space-md); min-width: 190px; border-radius: 999px; padding: 5px 6px 5px 17px; background: rgba(5,5,5,.78); font-size: clamp(.8rem, 2vw, 1.15rem); }
.phase-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; color: var(--phase-accent, #fff); font-size: 1.8rem; }
.is-round .phase-chip { --phase-accent: #ff3c36; }
.is-round .timer-primary { --phase-accent: #ff3c36; }
.is-round-break .phase-chip { --phase-accent: #efb500; }
.is-round-break .timer-primary { --phase-accent: #efb500; }
.is-fight-break .phase-chip { --phase-accent: #1687ff; }
.is-fight-break .timer-primary { --phase-accent: #1687ff; }
.is-start-delay .phase-chip { --phase-accent: #d7d7d0; }
.is-start-delay .timer-primary { --phase-accent: #d7d7d0; }
.timer-position { display: grid; gap: 7px; text-align: right; color: rgba(255,255,255,.94); font-size: clamp(.78rem, 2vw, 1rem); font-weight: 800; }
.countdown-wrap { position: relative; z-index: 1; margin: clamp(20px, 5vh, 48px) 0 8px; }
.countdown-wrap::after { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; bottom: 7%; height: 12px; background: var(--phase-accent, #fff); opacity: .85; clip-path: polygon(0 56%, 8% 35%, 19% 62%, 35% 23%, 52% 56%, 70% 16%, 83% 54%, 100% 29%, 96% 77%, 80% 64%, 63% 89%, 48% 65%, 29% 91%, 13% 69%, 0 86%); }
.countdown { position: relative; z-index: 1; text-shadow: 0 5px 0 rgba(0,0,0,.32); }
.timer-card .phase-help { margin: 0 0 clamp(16px, 4vh, 32px); font-size: clamp(.82rem, 2vw, 1rem); }
.active-controls { position: relative; z-index: 1; width: min(100%, 500px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.timer-control { min-height: 54px; border: 1px solid rgba(255,255,255,.56); border-radius: 13px; background: rgba(5,5,5,.78); color: #fff; font-size: 1.55rem; font-weight: 900; }
.timer-control:disabled { opacity: .42; cursor: default; }
.timer-primary { border-color: var(--phase-accent, #fff); background: var(--phase-accent, #fff); color: #111; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.timer-control[data-testid='reset-button'] { grid-column: 2; }
@media (orientation: landscape) and (min-width: 600px) {
.timer-topbar { width: min(100%, 920px); }
.active-controls { width: min(100%, 560px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timer-control[data-testid='reset-button'] { grid-column: auto; }
}

/* Optional exercise layout. Default Fight Timer selectors above remain unchanged. */
.timer-shell.is-timing .timer-card.has-exercise { display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;gap:16px;padding:20px 24px;overflow:hidden; }
.has-exercise .timer-topbar { grid-row:1;align-self:start;min-width:0; }
.has-exercise .active-controls { grid-row:3;order:initial;align-self:end; }
.has-exercise .timer-main-content { grid-row:2;width:100%;height:100%;min-height:0;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px; }
.has-exercise .timer-exercise-stage { flex:none;min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px; }
.has-exercise .exercise-name-space { position:relative;flex:none;width:100%;height:var(--exercise-small-height,60px);transition:height 450ms cubic-bezier(.22,.61,.36,1); }
.has-exercise.show-intro .exercise-name-space { height:var(--exercise-large-height,110px); }
.has-exercise .exercise-display { position:absolute;left:0;bottom:0;width:100%;overflow-wrap:anywhere;font-size:var(--exercise-large-font,40px);line-height:1.14;font-weight:800;transform:scale(var(--exercise-compact-scale,.6));transform-origin:center bottom;transition:transform 450ms cubic-bezier(.22,.61,.36,1); }
.has-exercise.show-intro .exercise-display { transform:scale(1); }
.has-exercise .exercise-status { flex:none;font-size:.8rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--steel); }
.has-exercise .exercise-caption { flex:none;font-size:.85rem;line-height:1.3;color:var(--steel); }
.timer-shell.is-timing .has-exercise .countdown { font-size:var(--exercise-clock-font,80px);margin:0;transform:scale(1);transition:transform 450ms cubic-bezier(.22,.61,.36,1); }
.timer-shell.is-timing .has-exercise.show-intro .countdown { transform:scale(.65); }
.has-exercise .countdown-wrap { flex:none;margin:0 0 8px; }
.has-exercise .countdown-wrap::after { left:-4%;right:-4%;height:8px;transition:opacity 450ms ease; }
.has-exercise.show-intro .countdown-wrap::after { opacity:.2; }
.has-exercise .exercise-scrolls .exercise-name-space { overflow-y:auto; }
.has-exercise .exercise-scrolls .exercise-display { position:static;transform:none;font-size:18px; }
.has-exercise.exercise-refitting .exercise-name-space,.has-exercise.exercise-refitting .exercise-display,.timer-shell.is-timing .has-exercise.exercise-refitting .countdown { transition:none; }
@media (orientation:landscape) and (min-width:600px) {
 .timer-shell.is-timing .timer-card.has-exercise { padding:14px 5vw;gap:10px; }
 .has-exercise .timer-main-content { gap:10px; }
 .has-exercise .timer-topbar { width:100%;align-items:center; }
 .has-exercise .phase-chip { min-width:166px;padding-top:3px;padding-bottom:3px; }
 .has-exercise .phase-icon { width:44px;height:44px;flex-basis:44px;font-size:1.5rem; }
}
@media (max-width:360px) { .timer-shell.is-timing .timer-card.has-exercise { padding:14px;gap:10px; } .has-exercise .phase-chip { min-width:150px;gap:8px; } }
@media (prefers-reduced-motion:reduce) { .has-exercise .exercise-name-space,.has-exercise .exercise-display,.timer-shell.is-timing .has-exercise .countdown,.has-exercise .countdown-wrap::after { transition:none; } }