/* timer.css — REBUILT match-timer page. Shared theme + header live in
 * base.css; this file holds only the full-screen timer layout. */

/* the timer is a fixed, full-viewport app (no page scroll) */
html,body{height:100%;}
body{overflow:hidden;user-select:none;}
.gear{font-size:20px;}   /* size/colors come from base.css; just the glyph size */

/* ===== main stage ===== */
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;position:relative;padding:20px;}

.period{
  font-weight:900;font-size:clamp(26px,4.6vw,58px);letter-spacing:.22em;
  padding:8px 40px;border-radius:12px;text-transform:uppercase;
  background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow:0 8px 34px -10px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  transition:background .25s, box-shadow .25s;
}
.period.teleop{ --accent:#2b7fff; --accent-deep:#0c2f6e; }
.period.endgame{ --accent:#ffb017; --accent-deep:#7a4d00; color:#1a1300; text-shadow:none; }
.period.over{ --accent:#33415f; --accent-deep:#1a2334; color:var(--muted); }

.clock{
  font-weight:900;
  font-size:clamp(120px,26vw,360px);
  line-height:.86;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  text-shadow:0 10px 60px rgba(40,110,255,.25);
  transition:color .2s;
}
.clock.warn{color:var(--amber);}
.clock.final{color:var(--red);}

/* status row */
.statusrow{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;justify-content:center;}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 26px;min-width:210px;text-align:center;
}
.chip .k{font-size:13px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;}
.chip .v{font-size:30px;font-weight:900;letter-spacing:.06em;margin-top:4px;}

.hub{
  border-radius:16px;padding:14px 34px;min-width:300px;text-align:center;
  border:1px solid transparent;transition:.2s;
}
.hub .k{font-size:13px;letter-spacing:.24em;text-transform:uppercase;opacity:.85;}
.hub .v{font-size:40px;font-weight:900;letter-spacing:.1em;margin-top:2px;}
.hub.active{
  background:linear-gradient(180deg,var(--green),var(--green-deep));
  box-shadow:0 10px 40px -12px var(--green), inset 0 1px 0 rgba(255,255,255,.3);
  color:#eafff3;
}
.hub.inactive{
  background:linear-gradient(180deg,#2a3550,#161e30);
  color:#9fb0d0;border-color:var(--line);
}
.hub.inactive .v{color:#ff5d63;}

/* ===== controls ===== */
.controls{
  display:flex;gap:16px;align-items:center;justify-content:center;
  padding:18px;border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(255,255,255,.03), transparent);
}
button.ctrl{
  font-family:inherit;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:18px;color:#fff;border:none;border-radius:12px;padding:16px 40px;cursor:pointer;
  transition:transform .08s, filter .15s, box-shadow .15s;
}
button.ctrl:active{transform:translateY(2px);}
.ctrl.start{background:linear-gradient(180deg,var(--green),var(--green-deep));box-shadow:0 8px 26px -10px var(--green);}
.ctrl.pause{background:linear-gradient(180deg,#ffb017,#9c6a00);color:#1a1300;box-shadow:0 8px 26px -10px var(--amber);}
.ctrl.reset{background:linear-gradient(180deg,#33415f,#1a2334);}
.ctrl:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.4);}

/* ===== settings drawer ===== */
.scrim{position:fixed;inset:0;background:rgba(2,5,12,.66);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.2s;z-index:20;}
.scrim.open{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:360px;max-width:88vw;z-index:21;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-left:1px solid var(--line);box-shadow:-20px 0 60px -20px #000;
  transform:translateX(100%);transition:transform .25s ease;
  padding:26px;display:flex;flex-direction:column;gap:24px;
}
.drawer.open{transform:translateX(0);}
.drawer h2{font-weight:900;letter-spacing:.2em;font-size:18px;color:#fff;}
.field{display:flex;flex-direction:column;gap:10px;}
.field > label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.seg button{
  flex:1;font-family:inherit;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:15px;padding:14px 0;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:.15s;
}
.seg button.on{color:#fff;}
.seg.alliance button.on[data-v="red"]{background:linear-gradient(180deg,var(--red),var(--red-deep));}
.seg.alliance button.on[data-v="blue"]{background:linear-gradient(180deg,var(--blue),var(--blue-deep));}
.seg.auto button.on[data-v="won"]{background:linear-gradient(180deg,var(--green),var(--green-deep));color:#fff;}
.seg.auto button.on[data-v="lost"]{background:linear-gradient(180deg,#33415f,#1a2334);color:#fff;}
.hint{font-size:12.5px;line-height:1.5;color:var(--muted);}
.closex{align-self:flex-end;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.closex:hover{color:#fff;border-color:rgba(160,190,255,.45);background:rgba(255,255,255,.05);}
.closex svg{width:18px;height:18px;display:block;pointer-events:none;}
.muteline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;letter-spacing:.1em;}
.muteline input{width:18px;height:18px;accent-color:var(--green);}
.ver{margin-top:auto;font-size:12px;color:var(--muted);letter-spacing:.2em;opacity:.7;}

/* flash overlay for final warning */
#flash{position:fixed;inset:0;pointer-events:none;z-index:10;background:var(--red);opacity:0;transition:opacity .12s;}
#flash.on{opacity:.32;}

/* tiny timeline strip */
.timeline{display:flex;width:min(900px,92vw);height:10px;border-radius:6px;overflow:hidden;border:1px solid var(--line);}
.timeline .cell{height:100%;border-right:1px solid rgba(0,0,0,.35);transition:opacity .2s, background .2s;}
.timeline .cell:last-child{border-right:none;}