.timer-shell,.timer-page { height:100%; overflow:hidden; }
.timer-page { height:100dvh; min-height:0; display:flex; flex-direction:column; }
.timer-page .site-header { width:100%; height:clamp(56px,9vh,82px); min-height:0; flex:none; padding-inline:clamp(14px,4vw,60px); }
.timer-page .header-actions { flex-wrap:nowrap; justify-content:flex-end; gap:clamp(10px,2vw,24px); }
.time-main { width:min(1180px,calc(100% - 28px)); min-height:0; flex:1; display:grid; grid-template-rows:auto minmax(0,1fr); margin:0 auto; padding:clamp(8px,2vh,22px) 0; }
.time-tagline { margin:0 0 clamp(8px,1.6vh,18px); color:var(--blue); font-family:Magneto,"Brush Script MT","Segoe Script",cursive; font-size:clamp(20px,2.4vw,32px); font-weight:400; line-height:1; }
.time-grid { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); border-top:2px solid var(--ink); border-left:1px solid var(--line); }
.time-card { min-width:0; min-height:0; overflow:hidden; padding:clamp(9px,1.45vw,20px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.1); }
.card-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(7px,1.8vh,18px); }
.card-heading h2 { font-size:clamp(22px,2.4vw,32px); }
.time-card label { display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.time-card input { width:100%; min-width:0; padding:clamp(7px,1.2vh,11px); border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); font:500 clamp(13px,1.4vw,17px) "DM Mono",monospace; }
.clock-card { background:var(--mustard); }
.clock-card .card-heading { margin-bottom:3px; }
.clock-display,.countdown-display,.stopwatch-display { display:block; font:400 clamp(27px,4.5vw,62px) "DM Mono",monospace; letter-spacing:-.07em; line-height:1; }
.local-clock-line { display:flex; align-items:baseline; gap:clamp(8px,1.5vw,18px); }
.local-clock-line > span { font:500 clamp(8px,1vw,11px) "DM Mono",monospace; letter-spacing:.04em; white-space:nowrap; }
.clock-card > p { margin:clamp(4px,.8vh,8px) 0 0; font-family:"Newsreader",serif; font-size:clamp(14px,1.6vw,20px); }
.world-clock-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin-top:clamp(5px,.9vh,9px); }
.world-clock-compose input { min-height:32px; padding:5px 8px; font-family:"DM Sans",sans-serif; font-size:10px; }
.world-clock-compose .time-button { min-height:32px; }
.clock-card #clockStatus { min-height:0; margin-top:4px; color:rgba(22,33,38,.68); font-family:"DM Sans",sans-serif; font-size:8px; }
.world-clock-list { max-height:calc(100% - 146px); overflow:auto; scrollbar-width:thin; }
.world-clock-item { min-height:35px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; border-top:1px solid rgba(22,33,38,.2); }
.world-clock-item time { font:500 11px "DM Mono",monospace; white-space:nowrap; }
.world-clock-item > span { min-width:0; display:flex; align-items:baseline; gap:5px; overflow:hidden; }
.world-clock-item strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.world-clock-item small { flex:none; font:500 8px "DM Mono",monospace; }
.world-clock-item button { width:22px;height:22px;padding:0;border:1px solid rgba(22,33,38,.28);background:transparent;cursor:pointer;font-size:12px; }
.time-actions { display:flex; gap:7px; margin-top:clamp(8px,1.5vh,16px); }
.time-button { min-height:clamp(32px,5vh,42px); padding:6px 12px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font-size:10px; font-weight:600; }
.time-button.primary { background:var(--red); color:#fff; }
.time-button:hover:not(:disabled) { background:var(--blue); color:#fff; }
.time-button:disabled { cursor:default; opacity:.4; }
.time-status { min-height:16px; margin:clamp(7px,1.3vh,14px) 0 0; color:var(--muted); font-size:10px; line-height:1.35; }
.duration-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.duration-inputs label span { display:block; margin-bottom:4px; }
.duration-inputs input { text-align:center; }
.alarm-compose,.timer-compose { display:grid; grid-template-columns:minmax(112px,.8fr) minmax(86px,.65fr) auto; align-items:end; gap:7px; }
.timer-compose .duration-inputs { min-width:0; }
.note-field { min-width:0; }
.note-field input { padding-inline:8px; }
.add-time { margin:0; }
.time-list { max-height:calc(100% - 112px); margin-top:8px; overflow:auto; border-top:1px solid var(--line); scrollbar-width:thin; }
.time-list-item { min-height:43px; display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.time-list-item > div { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:8px; margin-right:auto; }
.time-list-item strong,.time-list-item output { font:500 12px "DM Mono",monospace; white-space:nowrap; }
.time-list-item span { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.time-list-item button { padding:4px 6px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:8px; }
.time-list-item button:hover { border-color:var(--ink); color:var(--ink); }
.empty-time-list { margin:10px 0 0; color:var(--muted); font-size:9px; }
.countdown-display { margin-top:clamp(9px,1.8vh,19px); font-size:clamp(25px,3.8vw,52px); }
.stopwatch-display { margin-top:clamp(18px,4vh,44px); font-size:clamp(23px,3.5vw,48px); }
.timer-page footer { min-height:0; flex:none; padding:clamp(5px,1vh,12px) clamp(14px,4vw,60px); font-size:9px; }
.ring-dialog { width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 24px); overflow:auto; padding:clamp(26px,5vw,48px); border:2px solid var(--ink); background:var(--paper); color:var(--ink); text-align:center; }
.ring-dialog::backdrop { background:rgba(22,33,38,.66); backdrop-filter:blur(5px); }
.ring-dialog h2 { font-size:clamp(40px,8vw,56px); }
.ring-dialog > p:not(.eyebrow) { color:var(--muted); font-family:"Newsreader",serif; font-size:18px; }
.ring-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; font-size:24px; }
@media(max-width:650px) {
  .timer-page .site-header { height:auto; max-height:22vh; padding-block:7px; gap:5px 10px; flex-wrap:wrap; }
  .timer-page .wordmark > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .timer-page .header-actions { width:calc(100% - 46px); flex-wrap:wrap; gap:4px 10px; }
  .timer-page .game-link { max-width:none; padding:2px 0; border:0; font-size:8px; line-height:1.1; text-align:left; }
  .time-main { width:calc(100% - 12px); padding:6px 0; }
  .time-tagline { margin-bottom:5px; font-size:19px; }
  .time-card { padding:7px; }
  .card-heading { margin-bottom:5px; }
  .card-heading h2 { font-size:18px; }
  .time-card label { font-size:7px; }
  .time-card input { padding:5px 3px; font-size:12px; }
  .time-actions { gap:4px; margin-top:6px; }
  .time-button { min-height:29px; padding:4px 7px; font-size:8px; }
  .time-status { margin-top:5px; font-size:8px; }
  .clock-display { font-size:clamp(24px,8vw,36px); }
  .local-clock-line { gap:5px; }
  .local-clock-line > span { font-size:7px; }
  .countdown-display { margin-top:7px; font-size:clamp(22px,7vw,32px); }
  .stopwatch-display { margin-top:12px; font-size:clamp(18px,5.8vw,28px); }
  .clock-card > p { margin-top:6px; font-size:12px; }
  .world-clock-compose { gap:3px; margin-top:5px; }
  .world-clock-compose input,.world-clock-compose .time-button { min-height:27px; font-size:7px; }
  .clock-card #clockStatus { margin-top:2px; font-size:7px; }
  .world-clock-list { max-height:calc(100% - 106px); }
  .world-clock-item { min-height:27px; gap:4px; }
  .world-clock-item time { font-size:8px; }
  .world-clock-item strong,.world-clock-item small { font-size:7px; }
  .world-clock-item button { width:18px;height:18px;font-size:9px; }
  .duration-inputs { gap:3px; }
  .alarm-compose,.timer-compose { grid-template-columns:minmax(82px,.75fr) minmax(62px,.65fr) auto; gap:3px; }
  .time-list { max-height:calc(100% - 90px); margin-top:4px; }
  .time-list-item { min-height:31px; gap:4px; padding:3px 0; }
  .time-list-item > div { display:flex; gap:5px; }
  .time-list-item strong,.time-list-item output { font-size:9px; }
  .time-list-item span { max-width:64px; font-size:8px; }
  .time-list-item button { padding:3px 4px; font-size:7px; }
  .timer-page footer { display:none; }
}
@media(max-height:620px) {
  .timer-page .site-header { height:52px; }
  .time-main { padding:5px 0; }
  .time-tagline { margin-bottom:4px; font-size:18px; }
  .time-card { padding-block:6px; }
  .card-heading { margin-bottom:4px; }
  .time-actions { margin-top:5px; }
  .time-status { margin-top:4px; }
  .timer-page footer { display:none; }
}