/* Big screen (blind-screen.html), v25. Loaded after blind-clock.css and blind-theme.css and overrides them.
   Layout: header → event row → timer card → blind cards (SB · BB · ante) → upcoming levels.
   One sans family for text, Inter with tabular figures for every number, soft neutral cards. */

/* ---------- Colour ----------
   One neutral family + one brand colour taken from the logo pink. The brand colour is kept for the few things that
   need attention: the current level, progress, the last minute, "paused", level-up, and the sound prompt.
   Two palettes: a (default) pure white + blossom pink, and d night (dark), switched by the header button.
   blind-screen.html?palette=d previews night mode. */
.screen-page {
  --text:#1d1d1f; --text-2:#3a3a3c; --muted:#86868b; --faint:#c7c7cc;
  --bg:#ffffff; --card:#ffffff; --surface:#f5f5f7; --surface-2:#e8e8ed; --line:#e5e5ea; --line-strong:#d2d2d7; --track:#e5e5ea;
  --btn:#1d1d1f; --btn-hover:#3a3a3c; --on-btn:#ffffff;
  --accent:#ef7d92; --accent-text:#d24f69; --accent-soft:#fdf0f2; --accent-line:#f6c9d2; --on-accent:#ffffff;
  --accent-rgb:239,125,146; --shade-rgb:0,0,0;
}
.screen-page[data-palette="d"] {
  --text:#f5f5f7; --text-2:#d8d8dc; --muted:#8e8e93; --faint:#55555a;
  --bg:#111113; --card:#19191c; --surface:#222226; --surface-2:#2e2e33; --line:#2c2c30; --line-strong:#3c3c42; --track:#34343a;
  --btn:#f5f5f7; --btn-hover:#d8d8dc; --on-btn:#111113;
  --accent:#f08090; --accent-text:#f5a0ad; --accent-soft:#2a1b1f; --accent-line:#5b2d37; --on-accent:#111113;
  --accent-rgb:240,128,144; --shade-rgb:0,0,0;
}
.screen-page {
  --ui:"Inter Clock","Mogu Han GB","PingFang SC","Microsoft YaHei",sans-serif;
  --num:"Inter Clock","Mogu Han GB","PingFang SC",sans-serif;
  --r-lg:clamp(18px,1.35vw,40px); --r-md:clamp(14px,.95vw,26px); --r-sm:clamp(9px,.6vw,16px);
  --gap:clamp(12px,.85vw,26px); --pad:clamp(20px,1.6vw,48px);
  --ctl:clamp(40px,2.25vw,68px); --ctl-font:clamp(14px,.78vw,21px);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color:var(--text); background:var(--bg); font-family:var(--ui); overflow-x:hidden; transition:background-color .3s, color .3s;
}
.screen-page::before { display:none; }
.screen-page .eyebrow { margin:0; color:var(--muted); font:600 clamp(12px,.68vw,18px)/1.2 var(--ui); letter-spacing:.08em; }
.screen-shell { display:flex; flex-direction:column; min-height:100dvh; padding:clamp(16px,1.6vw,44px) clamp(22px,2.6vw,72px) clamp(14px,1.2vw,36px); }
.screen-footer { display:none; }

/* ---------- Header & controls ---------- */
.screen-header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:0; padding:0; border:0; }
.screen-brand-logo { display:block; width:auto; height:clamp(52px,3.5vw,100px); object-fit:contain; }
.screen-tools { display:flex; align-items:center; gap:clamp(6px,.4vw,12px); }
.screen-local-controls { position:relative; display:flex; align-items:center; gap:clamp(6px,.4vw,12px); }
.screen-session-select { max-width:180px; height:var(--ctl); padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font:600 var(--ctl-font)/1 var(--ui); }
.screen-create-button { margin-top:20px; padding:12px 22px; border:0; border-radius:var(--r-sm); background:var(--btn); color:var(--on-btn); font:650 15px/1.4 var(--ui); cursor:pointer; }
.screen-login-panel { max-width:440px; }
.screen-login-panel form { display:grid; gap:18px; }
.screen-login-panel label { display:grid; gap:8px; font:550 14px/1.5 var(--ui); color:var(--text-2); }
.screen-login-panel input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); background:var(--card); font:500 16px/1.4 var(--ui); }
.screen-login-panel input:focus { outline:2px solid var(--accent-text); outline-offset:2px; }
.screen-login-panel .screen-create-button { margin:0; }
@media (max-width:1100px) { .screen-header { flex-wrap:wrap; } .screen-tools { flex-wrap:wrap; justify-content:flex-end; } .screen-session-select { max-width:160px; } }
@media (max-width:700px) { .screen-tools { width:100%; justify-content:flex-start; } .screen-session-select { flex:1; max-width:none; } .screen-tools #cloudAccount { margin-left:auto; } }
.screen-page .icon-button {
  display:grid; place-items:center; width:var(--ctl); height:var(--ctl); padding:0; border:1px solid transparent;
  border-radius:var(--r-sm); background:var(--surface); color:var(--text); font:600 clamp(17px,1vw,28px)/1 var(--ui);
  box-shadow:none; transform:none; transition:background-color .2s, border-color .2s, color .2s, transform .15s var(--ease-out);
}
.screen-page .icon-button:hover { background:var(--surface-2); transform:none; }
.screen-page .icon-button:active { transform:scale(.95); }
.screen-page .icon-button.active { border-color:transparent; background:var(--accent-soft); color:var(--accent-text); }
.screen-page .local-edit, .screen-page .local-toggle { width:auto; min-width:0; padding:0 clamp(14px,.9vw,26px); font:650 var(--ctl-font)/1 var(--ui); letter-spacing:.02em; }
.screen-page .local-toggle { min-width:calc(var(--ctl) * 1.7); border-color:var(--btn); background:var(--btn); color:var(--on-btn); }
.screen-page .local-toggle:hover { border-color:var(--btn-hover); background:var(--btn-hover); color:var(--on-btn); }
/* Light/night switch: a half-filled circle, drawn in CSS so it looks the same on every TV browser. */
.theme-toggle i { display:block; width:.8em; height:.8em; border:2px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.screen-page .connection-chip { display:inline-flex; align-items:center; gap:8px; height:var(--ctl); padding:0 16px; border:0; border-radius:999px; background:#fff4e8; color:#9a5a12; font:600 var(--ctl-font)/1 var(--ui); }
.screen-page.local-mode .connection-chip { display:none; }

.screen-local-menu {
  position:absolute; z-index:20; top:calc(100% + 10px); right:0; display:grid; gap:2px; width:clamp(190px,11vw,300px);
  padding:6px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:0 18px 44px rgba(var(--shade-rgb),.14);
}
.screen-local-menu button { padding:.72em .85em; border:0; border-radius:var(--r-sm); background:transparent; color:var(--text); text-align:left; font:500 var(--ctl-font)/1.2 var(--ui); }
.screen-local-menu button:hover { background:var(--surface); }
.screen-local-menu button[data-local-action="reset"] { position:relative; margin-top:7px; color:var(--accent-text); }
.screen-local-menu button[data-local-action="reset"]::before { content:""; position:absolute; top:-5px; left:8px; right:8px; border-top:1px solid var(--line); }
.screen-local-menu button[data-local-action="reset"]:hover { background:var(--accent-soft); }

/* ---------- Empty stage ---------- */
.screen-empty { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:820px; padding:5vh 3vw; }
.screen-empty h1 { margin:14px 0 16px; color:var(--text); font:700 clamp(48px,5vw,120px)/1.15 var(--ui); letter-spacing:.01em; }
.screen-empty p:not(.eyebrow) { margin:0 0 28px; color:var(--muted); font:500 clamp(17px,1.3vw,28px)/1.6 var(--ui); }
.screen-empty a { display:inline-flex; align-items:center; height:var(--ctl); padding:0 22px; border-radius:var(--r-sm); background:var(--btn); color:var(--on-btn); font:650 var(--ctl-font)/1 var(--ui); text-decoration:none; }

/* ---------- Event row ---------- */
.screen-live { flex:1; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:0; min-height:0; }
/* Event title centred on the page; the equal side columns keep it centred while the status pill sits on the right. */
.screen-event-row {
  display:grid; grid-template-columns:minmax(clamp(120px,10vw,320px),1fr) minmax(0,auto) minmax(clamp(120px,10vw,320px),1fr);
  align-items:center; gap:24px; padding:clamp(26px,2.1vw,64px) 0 clamp(22px,1.7vw,48px);
}
.screen-event-row > div:first-child { grid-column:2; grid-row:1; min-width:0; text-align:center; }
.screen-event-row .eyebrow { margin-bottom:clamp(8px,.55vw,16px); }
.screen-event-row h1 { max-width:none; margin:0; color:var(--text); font:700 clamp(28px,2.1vw,64px)/1.2 var(--ui); letter-spacing:.01em; }
.screen-elapsed { display:flex; align-items:baseline; justify-content:center; gap:.6em; margin:clamp(10px,.65vw,18px) 0 0; color:var(--muted); font:500 clamp(13px,.78vw,21px)/1.2 var(--ui); }
.screen-elapsed strong { color:var(--text); font:700 clamp(16px,.98vw,27px)/1 var(--num); font-variant-numeric:tabular-nums; }

/* Status pill: quiet grey while things are normal; brand colour only when paused. */
.screen-state {
  grid-column:3; grid-row:1; justify-self:end;
  display:inline-flex; align-items:center; gap:.6em; flex:none; padding:.6em 1.1em; border:0; border-radius:999px;
  background:var(--surface-2); color:var(--text-2); font:700 clamp(14px,.9vw,25px)/1 var(--ui); letter-spacing:.04em; white-space:nowrap;
  transition:background-color .35s, color .35s;
}
.state-beacon { position:relative; flex:none; width:.55em; height:.55em; border-radius:50%; background:var(--faint); box-shadow:none; transition:background-color .3s; }
.screen-live[data-status="running"] .state-beacon { background:var(--text-2); }
.screen-live[data-status="paused"] .screen-state { background:var(--accent-soft); color:var(--accent-text); }
.screen-live[data-status="paused"] .state-beacon { background:var(--accent); }
.screen-live[data-status="finished"] .screen-state { background:var(--btn); color:var(--on-btn); }
.screen-live[data-status="finished"] .state-beacon { background:var(--on-btn); }

/* ---------- Main: timer card over the blind cards ---------- */
.screen-main {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  gap:var(--gap); align-items:stretch; min-height:0; border:0; background:transparent;
}

/* Timer card */
.timer-display {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto;
  place-items:stretch; min-width:0; min-height:0; overflow:hidden; padding:var(--pad) var(--pad) calc(var(--pad) * .85);
  border:0; border-radius:var(--r-lg); background:var(--surface); color:var(--text); box-shadow:none; transition:background-color .6s;
}
.timer-display::before, .timer-display::after { display:none; }
.timer-card-top { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.timer-card-top > span:first-child { color:var(--text); font:700 clamp(16px,1.02vw,29px)/1.3 var(--ui); letter-spacing:.02em; white-space:nowrap; }
.timer-card-top small { display:block; margin-top:.35em; color:var(--muted); font:600 clamp(10px,.58vw,16px)/1 var(--num); letter-spacing:.16em; }
.timer-card-top .level-index-row {
  display:inline-flex; align-items:center; gap:.55em; width:auto; padding:0; border:0; border-radius:0; background:none;
  color:var(--accent-text); font:800 clamp(22px,1.55vw,46px)/1 var(--ui); letter-spacing:.02em; white-space:nowrap;
}
.timer-card-bottom { display:none; }

.screen-page .timer-numerals.flip-clock {
  z-index:1; display:flex; align-items:center; justify-content:center; gap:0; align-self:center; justify-self:center; width:100%;
  color:var(--text); font:800 clamp(96px,min(14.5vw,28vh),560px)/1 var(--num); letter-spacing:0;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center; transform-origin:center; transition:color .4s, opacity .4s;
}
.screen-page .timer-numerals.flip-clock.long { font-size:clamp(80px,min(11.5vw,24vh),450px); }

/* Rolling digits: the old value lifts away, the new one rises in. */
.screen-page .timer-numerals .flip-digit {
  position:relative; display:inline-block; flex:none; width:.62em; height:.86em; overflow:hidden;
  perspective:none; border-radius:0; background:transparent; box-shadow:none; animation:none; transform:none;
}
.screen-page .timer-numerals .flip-digit::before, .screen-page .timer-numerals .flip-digit::after { display:none; content:none; }
.screen-page .timer-numerals .flip-current, .screen-page .timer-numerals .flip-next {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; width:auto; height:auto;
  border-radius:0; background:transparent; box-shadow:none; color:inherit; letter-spacing:0; line-height:1;
  backface-visibility:visible; clip-path:none; filter:none; transform:none; animation:none; visibility:visible; transition:color .4s;
}
.screen-page .timer-numerals .flip-next { opacity:0; }
.screen-page .timer-numerals .flip-digit.flipping .flip-current { animation:digit-out .36s var(--ease-out) both; }
.screen-page .timer-numerals .flip-digit.flipping .flip-next { opacity:1; animation:digit-in .36s var(--ease-out) both; }
@keyframes digit-out { from { transform:translateY(0); opacity:1; filter:blur(0); } to { transform:translateY(-42%); opacity:0; filter:blur(3px); } }
@keyframes digit-in { from { transform:translateY(46%); opacity:0; filter:blur(3px); } to { transform:translateY(0); opacity:1; filter:blur(0); } }
/* Inter's bold colon is two large discs; draw it smaller and lighter so the digits carry the weight. */
.screen-page .flip-colon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:.26em; height:.86em; padding-bottom:.04em; color:var(--faint); font-size:.72em; font-weight:700; transition:color .4s; }
.screen-live[data-status="paused"] .timer-numerals.flip-clock { opacity:.5; }
.screen-live[data-status="finished"] .timer-numerals.flip-clock { opacity:.35; }
/* Last ten seconds: one heartbeat per second (restarted from JS on each tick). */
.screen-live.final-seconds .timer-numerals.flip-clock.beat { animation:heartbeat .6s var(--ease-out); }
@keyframes heartbeat { 0% { transform:scale(1); } 18% { transform:scale(1.045); } 100% { transform:scale(1); } }

/* Progress bar along the bottom of the timer card. */
.timer-progress { position:relative; z-index:1; align-self:end; height:clamp(6px,.4vw,12px); margin:clamp(10px,.8vw,22px) 0 0; overflow:hidden; border-radius:999px; background:var(--track); }
.timer-progress span { position:relative; display:block; width:100%; height:100%; border-radius:inherit; background:var(--accent); transition:width .12s linear, background-color .5s; }

/* Last minute: the card and digits take the brand colour and a badge joins the level. No looping pulses anywhere. */
.screen-live.urgent .timer-display { background:var(--accent-soft); }
.screen-live.urgent .timer-numerals.flip-clock { color:var(--accent-text); }
.screen-live.urgent .flip-colon { color:var(--accent-line); }
.screen-live.urgent .timer-progress { background:var(--accent-line); }
.screen-live.urgent .timer-progress span { background:var(--accent-text); }
.screen-live.urgent .timer-card-top .level-index-row::after {
  content:"最后一分钟"; padding:.5em .95em; border-radius:999px; background:var(--accent-text); color:var(--on-accent);
  font:700 clamp(12px,.72vw,20px)/1 var(--ui); letter-spacing:.08em;
}
.motion-ok .screen-live.urgent .timer-card-top .level-index-row::after { animation:hint-in .45s var(--ease-spring) both; }
@keyframes hint-in { from { opacity:0; transform:translateX(12px) scale(.9); } to { opacity:1; transform:none; } }

/* ---------- Blind cards: SB · BB · ante ---------- */
.blind-display {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr); gap:var(--gap);
  min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--text);
}
.blind-display::before { display:none; }
.blind-card-top { display:none; }
.blind-numbers, .blind-numbers.break-text { display:contents; }
.blind-slot, .blind-slot.big, .ante-line, .blind-break {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:clamp(6px,.5vw,14px);
  min-width:0; max-width:none; margin:0; padding:clamp(16px,1.15vw,34px) clamp(20px,1.5vw,44px);
  border:0; border-radius:var(--r-lg); background:var(--surface); color:var(--text);
}
.blind-slot span, .blind-slot.big span, .ante-line span {
  display:flex; align-items:baseline; gap:.5em; max-width:none; color:var(--text-2);
  font:700 clamp(15px,.92vw,26px)/1.2 var(--ui); letter-spacing:.02em; white-space:nowrap;
}
.blind-slot span small, .ante-line span small { color:var(--muted); font:600 .72em/1 var(--num); letter-spacing:.14em; }
.blind-slot strong, .blind-slot.big strong {
  display:block; max-width:100%; color:var(--text); font:800 clamp(64px,min(6.3vw,12.5vh),270px)/.95 var(--num);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; text-align:left; white-space:nowrap;
}
.ante-line strong { color:var(--text); font:800 clamp(40px,min(3.9vw,8vh),170px)/.95 var(--num); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ante-line strong.is-empty { color:var(--faint); font-weight:600; }
/* Break: the break name takes the whole row; ante means nothing during a break. */
.blind-numbers.break-text ~ .ante-line { display:none; }
.blind-break { grid-column:1 / -1; justify-content:center; color:var(--text); text-align:left; font:800 clamp(48px,min(4.5vw,10vh),200px)/1.1 var(--ui); overflow-wrap:anywhere; }
.blind-break::before { content:"当前环节"; display:block; color:var(--muted); font:700 clamp(15px,.92vw,26px)/1.2 var(--ui); letter-spacing:.02em; }

/* ---------- Upcoming levels ---------- */
.screen-bottom { padding:clamp(16px,1.2vw,34px) 0 0; border:0; }
.next-heading { display:flex; align-items:center; gap:12px; color:var(--muted); font:700 clamp(13px,.78vw,21px)/1 var(--ui); letter-spacing:.06em; }
.small-diamond { display:none; }
.bottom-rule { flex:1; border:0; border-top:1px solid var(--line); }
.level-track { display:grid; gap:var(--gap); margin-top:clamp(10px,.7vw,20px); padding:0; border:0; }
.level-track .track-item {
  position:relative; min-width:0; padding:clamp(12px,.9vw,26px) clamp(16px,1.2vw,34px); border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--card); transition:background-color .3s, border-color .3s;
}
.level-track .track-item.is-next { border-color:transparent; background:var(--surface); }
.track-item .track-index { color:var(--muted); font:700 clamp(13px,.72vw,20px)/1 var(--ui); letter-spacing:.04em; }
.track-item strong { display:block; margin-top:clamp(6px,.45vw,12px); color:var(--text-2); font:750 clamp(24px,1.85vw,66px)/1.1 var(--num); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-item.is-next .track-index { color:var(--text-2); }
.track-item.is-next strong { color:var(--text); }
.track-item small { display:block; margin-top:clamp(4px,.3vw,9px); color:var(--muted); font:500 clamp(12px,.68vw,19px)/1.2 var(--ui); }
.track-item.is-break strong { font-family:var(--ui); }
.level-track .track-final {
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:0;
  padding:clamp(14px,1vw,28px) clamp(18px,1.3vw,36px); border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
}
.track-final strong { color:var(--text); font:750 clamp(20px,1.4vw,40px)/1.2 var(--ui); }
.track-final span { color:var(--muted); font:500 clamp(13px,.85vw,22px)/1.4 var(--ui); }

/* ---------- Level-up takeover: centred card over a dimmed stage ---------- */
.screen-alarm {
  position:fixed; z-index:90; top:50%; left:50%; bottom:auto; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,.8vw,20px);
  min-width:min(760px,calc(100vw - 48px)); max-width:calc(100vw - 36px); padding:clamp(30px,2.8vw,72px) clamp(40px,4.2vw,110px);
  border:0; border-radius:calc(var(--r-lg) * 1.3); background:var(--btn); color:var(--on-btn); text-align:center; white-space:nowrap; pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(var(--shade-rgb),.45), 0 30px 80px rgba(var(--shade-rgb),.4); animation:alarm-pop .6s var(--ease-spring) both;
}
.screen-alarm::before { display:none; }
.screen-alarm[hidden] { display:none; }
.screen-alarm.leaving { animation:alarm-leave .45s var(--ease-out) both; }
.alarm-kicker { padding:.55em 1.1em; border-radius:999px; background:var(--accent); color:var(--on-accent); font:700 clamp(15px,1.05vw,28px)/1 var(--ui); letter-spacing:.06em; }
.alarm-value { color:var(--on-btn); font:800 clamp(64px,6.8vw,220px)/1 var(--num); letter-spacing:-.01em; font-variant-numeric:tabular-nums; animation:rise-in .7s .12s var(--ease-out) both; }
.alarm-sub { color:var(--on-btn); opacity:.7; font:600 clamp(16px,1.3vw,34px)/1.2 var(--ui); animation:rise-in .7s .22s var(--ease-out) both; }
@keyframes alarm-pop { from { opacity:0; transform:translate(-50%,-44%) scale(.86); box-shadow:0 0 0 100vmax rgba(var(--shade-rgb),0), 0 30px 80px rgba(var(--shade-rgb),0); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes alarm-leave { to { opacity:0; transform:translate(-50%,-50%) scale(.96); box-shadow:0 0 0 100vmax rgba(var(--shade-rgb),0), 0 30px 80px rgba(var(--shade-rgb),0); } }

/* ---------- Sound-unlock prompt: only shown when the browser blocks autoplay, so make it impossible to miss ---------- */
.audio-hint {
  position:fixed; z-index:80; top:clamp(22px,1.9vw,54px); left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px;
  height:var(--ctl); padding:0 1.5em; border:0; border-radius:999px; background:var(--accent-text); color:var(--on-accent); cursor:pointer;
  font:700 var(--ctl-font)/1 var(--ui); letter-spacing:.02em; white-space:nowrap; box-shadow:0 8px 22px rgba(var(--accent-rgb),.35);
}
.audio-hint[hidden] { display:none; }
.screen-page:not(.local-mode) .audio-hint { top:auto; bottom:20px; }
.audio-hint:hover { filter:brightness(.94); }
.audio-hint i { position:relative; width:9px; height:9px; border-radius:50%; background:currentColor; }
.motion-ok .audio-hint { animation:hint-rise .5s var(--ease-spring) both; }
@keyframes hint-rise { from { opacity:0; transform:translate(-50%,-10px) scale(.94); } to { opacity:1; transform:translate(-50%,0); } }

/* ---------- Local editor ---------- */
.screen-page.editor-open { overflow:hidden; }
.screen-editor-overlay { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }
.screen-editor-backdrop { position:absolute; inset:0; background:rgba(var(--shade-rgb),.5); animation:fade-in .3s ease both; }
.screen-editor-panel {
  position:relative; width:min(980px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:clamp(22px,2.6vw,44px);
  border:0; border-radius:clamp(18px,1.4vw,28px); background:var(--card); color:var(--text); box-shadow:0 30px 90px rgba(var(--shade-rgb),.25);
}
.screen-editor-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.screen-editor-header .eyebrow { display:block; }
.screen-editor-header h2 { margin:6px 0 0; font:700 clamp(26px,2vw,40px)/1.2 var(--ui); letter-spacing:.01em; }
.screen-editor-close { flex:none; width:40px; height:40px; border:0; border-radius:10px; background:var(--surface); color:var(--text); font-size:24px; line-height:1; }
.screen-editor-close:hover { background:var(--surface-2); }
.screen-editor-note { margin:16px 0 22px; color:var(--muted); font-size:14px; line-height:1.65; }
.screen-editor-title { display:block; margin-bottom:20px; color:var(--text-2); font-size:14px; font-weight:700; }
.screen-editor-title input,
.screen-editor-rule-fields input,
.screen-editor-fields input {
  display:block; width:100%; height:46px; margin-top:7px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--text); font:650 17px var(--num); transition:border-color .2s, box-shadow .2s;
}
.screen-editor-title input:focus,
.screen-editor-rule-fields input:focus,
.screen-editor-fields input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22); }
.screen-editor-rule { margin:0 0 24px; padding:20px 22px 16px; border:0; border-radius:16px; background:var(--surface); }
.screen-editor-rule-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.screen-editor-rule-heading .eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; }
.screen-editor-rule-heading h3 { margin:4px 0 0; color:var(--text); font:700 20px/1.3 var(--ui); }
.rule-mode { display:inline-flex; padding:3px; border:1px solid var(--line-strong); border-radius:999px; background:var(--card); }
.rule-mode button { min-height:32px; padding:0 15px; border:0; border-radius:999px; background:transparent; color:var(--text-2); font-size:13px; font-weight:700; transition:background-color .25s, color .25s; }
.rule-mode button[aria-pressed="true"] { background:var(--btn); color:var(--on-btn); }
.screen-editor-rule-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.screen-editor-rule[data-mode="ratio"] .screen-editor-rule-fields { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:480px; }
.screen-editor-rule-fields label { min-width:0; color:var(--text-2); font-size:12px; font-weight:700; }
.screen-editor-rule-fields label[hidden] { display:none; }
.screen-editor-rule-action { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.screen-editor-rule-action p { max-width:520px; margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.screen-editor-rule-action button { flex:none; min-height:42px; padding:0 18px; border:0; border-radius:10px; background:var(--btn); color:var(--on-btn); font-weight:700; }
.screen-editor-rule-action button:hover { background:var(--btn-hover); }
.screen-editor-rule-action button.needs-apply { animation:apply-nudge .9s var(--ease-out) 2; }
@keyframes apply-nudge { 0% { box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55); transform:scale(1); } 30% { transform:scale(1.05); } 100% { box-shadow:0 0 0 14px rgba(var(--accent-rgb),0); transform:scale(1); } }
.screen-editor-rule-feedback { min-height:17px; margin:8px 0 0; color:var(--muted); font-size:12px; }
.screen-editor-rule-feedback.is-error { color:var(--accent-text); }
/* Rows are cards; the current level is tinted rather than indented, so every row lines up. */
.screen-editor-list { display:grid; gap:10px; border:0; }
.screen-editor-row { padding:14px 18px 18px; border:1px solid var(--line); border-left:1px solid var(--line); border-radius:14px; background:var(--card); transition:background-color .3s, border-color .3s; }
.screen-editor-row.is-current { padding-left:18px; border-color:var(--accent-line); border-left:1px solid var(--accent-line); background:var(--accent-soft); }
.screen-editor-row-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.screen-editor-row-head strong { color:var(--text); font-size:16px; font-weight:700; }
.screen-editor-row.is-current .screen-editor-row-head strong::after { content:"当前"; margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--accent-text); color:var(--on-accent); font-size:11px; vertical-align:2px; }
.screen-editor-row-head div { display:flex; gap:5px; }
.screen-editor-row-head button { min-width:32px; height:32px; padding:0 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text-2); font-size:13px; }
.screen-editor-row-head button:hover { background:var(--surface); }
.screen-editor-row-head button:disabled { opacity:.4; }
.screen-editor-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.screen-editor-fields.break-fields { grid-template-columns:minmax(0,2fr) minmax(100px,1fr); }
.screen-editor-fields label { min-width:0; color:var(--muted); font-size:13px; font-weight:600; }
.screen-editor-add { display:flex; gap:10px; margin-top:14px; }
.screen-editor-add button { flex:1; min-height:44px; border:1px dashed var(--line-strong); border-radius:12px; background:transparent; color:var(--text); font-weight:700; }
.screen-editor-add button:hover { background:var(--surface); }
.screen-editor-error { min-height:20px; margin:12px 0; color:var(--accent-text); font-size:14px; }
.screen-editor-footer { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.screen-editor-footer button { min-width:104px; min-height:46px; padding:0 18px; border:1px solid var(--line-strong); border-radius:10px; background:var(--card); color:var(--text); font-weight:700; }
.screen-editor-footer button[type="submit"] { border-color:var(--btn); background:var(--btn); color:var(--on-btn); }
.screen-editor-footer button:hover { opacity:.88; }

/* ---------- Motion ---------- */
/* The base theme's board-enter starts transparent; replace it so content never hinges on an animation running. */
.screen-page .screen-live, .screen-page .screen-empty { animation:none; }
.motion-ok .screen-empty, .motion-ok .screen-live:not([hidden]) { animation:screen-enter .7s var(--ease-out) both; }
@keyframes screen-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
/* Level change: timer settles, blind cards rise one after another, upcoming cards slide in. */
.screen-main.level-shift .timer-display, .screen-main.level-shift .blind-display, .screen-main.level-shift .blind-slot.big { animation:none; }
.motion-ok .screen-main.level-shift .timer-numerals { animation:timer-settle .8s var(--ease-out) both; }
.motion-ok .screen-main.level-shift .blind-slot,
.motion-ok .screen-main.level-shift .blind-break,
.motion-ok .screen-main.level-shift .ante-line { animation:rise-in .75s var(--ease-out) both; }
.motion-ok .screen-main.level-shift .blind-slot.small { animation-delay:.08s; }
.motion-ok .screen-main.level-shift .blind-slot.big { animation-delay:.16s; }
.motion-ok .screen-main.level-shift .ante-line { animation-delay:.24s; }
.motion-ok .level-track.level-shift .track-item,
.motion-ok .level-track.level-shift .track-final { animation:slide-in .7s var(--ease-out) both; }
.motion-ok .level-track.level-shift .track-item:nth-child(2) { animation-delay:.07s; }
.motion-ok .level-track.level-shift .track-item:nth-child(3) { animation-delay:.14s; }
@keyframes timer-settle { from { opacity:0; transform:scale(.94); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes rise-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes slide-in { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:none; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
/* A brand-colour sweep across the timer and blind cards when the level changes. */
.screen-main::after {
  content:""; position:absolute; z-index:5; inset:0; border-radius:var(--r-lg); pointer-events:none; opacity:0;
  background:linear-gradient(100deg,rgba(var(--accent-rgb),0) 30%,rgba(var(--accent-rgb),.22) 50%,rgba(var(--accent-rgb),0) 70%); background-size:250% 100%;
}
.screen-live.level-flash .screen-main::after { animation:level-sweep 1.3s var(--ease-out) both; }
@keyframes level-sweep { 0% { opacity:1; background-position:120% 0; } 80% { opacity:1; } 100% { opacity:0; background-position:-40% 0; } }
.motion-ok .screen-editor-panel { animation:panel-in .45s var(--ease-out) both; }
.motion-ok .screen-editor-row:last-child:not(:only-child) { animation:rise-in .4s var(--ease-out) both; }
@keyframes panel-in { from { opacity:0; transform:translateY(22px) scale(.98); } to { opacity:1; transform:none; } }
.screen-local-menu:not([hidden]) { animation:menu-in .22s var(--ease-out) both; transform-origin:top right; }
@keyframes menu-in { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }

/* ---------- Short landscape screens (laptops, 1366×768 TVs) ---------- */
@media (max-height:820px) and (min-width:901px) {
  .screen-page { --pad:clamp(16px,1.3vw,28px); --gap:clamp(10px,.75vw,16px); --ctl:38px; }
  .screen-shell { padding-top:12px; padding-bottom:12px; }
  .screen-brand-logo { height:48px; }
  .screen-event-row { padding:16px 0 16px; }
  .screen-event-row h1 { font-size:clamp(24px,1.9vw,32px); }
  .screen-bottom { padding-top:12px; }
  .level-track .track-item { padding:10px 16px; }
  .track-item strong { font-size:clamp(20px,1.7vw,28px); }
}

/* ---------- Tablets and narrow windows ---------- */
@media (max-width:900px) {
  .screen-shell { height:auto; min-height:100dvh; }
  .screen-main { grid-template-rows:minmax(300px,1fr) auto; }
  .screen-page .timer-numerals.flip-clock { font-size:clamp(80px,17vw,155px); }
  .screen-page .timer-numerals.flip-clock.long { font-size:clamp(70px,14vw,132px); }
  .blind-slot strong, .blind-slot.big strong { font-size:clamp(48px,8vw,84px); }
  .ante-line strong { font-size:clamp(32px,5vw,56px); }
}

/* ---------- Phones ---------- */
@media (max-width:600px) {
  .screen-page { --pad:18px; --gap:10px; --ctl:34px; --ctl-font:12px; --r-lg:18px; --r-md:14px; }
  .screen-shell { padding:14px 16px 16px; }
  .screen-header { flex-wrap:wrap; gap:8px; }
  .screen-brand-logo { height:40px; }
  .screen-tools { gap:4px; margin-left:auto; }
  .screen-local-controls { gap:4px; }
  .screen-page .local-edit, .screen-page .local-toggle { padding:0 8px; }
  .screen-page .local-toggle { min-width:46px; }
  .screen-page .icon-button { font-size:15px; }
  .screen-local-menu { right:-86px; width:176px; }
  .screen-empty { padding:12vh 4vw; }
  .screen-empty h1 { font-size:44px; }
  .screen-event-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:24px 0 18px; }
  .screen-event-row > div:first-child { text-align:left; }
  .screen-elapsed { justify-content:flex-start; }
  .screen-event-row h1 { max-width:100%; font-size:clamp(24px,6.4vw,32px); }
  .screen-elapsed { font-size:12px; }
  .screen-elapsed strong { font-size:15px; }
  .screen-state { font-size:12px; }
  .screen-main { grid-template-rows:auto auto; }
  .timer-display { min-height:250px; }
  .timer-card-top > span:first-child { font-size:14px; }
  .timer-card-top small { font-size:9px; }
  .timer-card-top .level-index-row { font-size:18px; }
  .screen-live.urgent .timer-card-top .level-index-row::after { font-size:11px; }
  .screen-page .timer-numerals.flip-clock { font-size:clamp(72px,21vw,112px); }
  .screen-page .timer-numerals.flip-clock.long { font-size:clamp(60px,17vw,92px); }
  .blind-display { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .blind-slot, .blind-slot.big, .blind-break { padding:14px 16px; }
  .blind-slot span, .blind-slot.big span, .blind-break::before { font-size:13px; }
  .blind-slot strong, .blind-slot.big strong { font-size:clamp(44px,13vw,72px); }
  .ante-line { grid-column:1 / -1; flex-direction:row; align-items:center; padding:14px 16px; }
  .ante-line span { font-size:13px; }
  .ante-line strong { font-size:28px; }
  .blind-break { font-size:clamp(34px,10vw,52px); }
  .screen-bottom { padding-top:16px; }
  .level-track .track-item { padding:10px 12px; }
  .track-item strong { font-size:17px; }
  .track-item small { font-size:11px; }
  .level-track .track-final { display:block; }
  .track-final span { display:block; margin-top:6px; }
  .screen-alarm { min-width:calc(100vw - 32px); padding:26px 22px; white-space:normal; }
  .alarm-value { font-size:clamp(44px,13vw,64px); }
  .audio-hint { top:auto; bottom:16px; height:38px; padding:0 16px; font-size:12px; }
  .screen-editor-overlay { padding:0; }
  .screen-editor-panel { width:100%; max-height:100dvh; min-height:100dvh; padding:22px 16px 28px; border-radius:0; }
  .screen-editor-rule { padding:16px 14px 14px; }
  .screen-editor-rule-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .screen-editor-rule-action { flex-direction:column; align-items:stretch; gap:10px; }
  .screen-editor-row, .screen-editor-row.is-current { padding:12px 14px 14px; }
  .screen-editor-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .screen-editor-fields.break-fields { grid-template-columns:minmax(0,1.5fr) minmax(100px,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .screen-page *, .screen-page *::before, .screen-page *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
}

/* ---------- Layout templates under review: blind-screen.html?layout=1|2|3 (desktop and TV only) ----------
   Shared by all three: title, elapsed time and status share the header row; self-evident labels go;
   the header buttons stay hidden until the pointer moves. */
@media (min-width:901px) {
  .screen-page[data-layout] .screen-shell { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; row-gap:clamp(14px,1.1vw,32px); }
  .screen-page[data-layout] .screen-live { display:contents; }
  .screen-page[data-layout] .screen-header { grid-row:1; grid-column:1; }
  .screen-page[data-layout] .screen-empty { grid-row:2; }
  .screen-page[data-layout] .screen-event-row {
    grid-row:1; grid-column:1; justify-self:center; align-self:center; z-index:1;
    display:flex; align-items:center; gap:clamp(14px,1vw,28px); max-width:58vw; padding:0;
  }
  .screen-page[data-layout] .screen-event-row > div:first-child { display:flex; align-items:baseline; gap:clamp(12px,.9vw,26px); min-width:0; text-align:left; }
  .screen-page[data-layout] .screen-event-row .eyebrow { display:none; }
  .screen-page[data-layout] .screen-event-row h1 { min-width:0; overflow:hidden; font-size:clamp(22px,1.4vw,44px); text-overflow:ellipsis; white-space:nowrap; }
  .screen-page[data-layout] .screen-elapsed { margin:0; white-space:nowrap; }
  .screen-page[data-layout] .screen-state { font-size:clamp(12px,.7vw,20px); }
  .screen-page[data-layout] .screen-main { grid-row:2; }
  .screen-page[data-layout] .screen-bottom { grid-row:3; padding-top:0; }
  .screen-page[data-layout] .timer-card-top > span:first-child { display:none; }
  .screen-page[data-layout] .timer-card-top .level-index-row { font:800 clamp(24px,1.7vw,54px)/1 var(--ui); letter-spacing:.02em; }
  .screen-page[data-layout] .screen-tools > :not(.connection-chip) { opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; }
  .screen-page[data-layout].controls-awake .screen-tools > :not(.connection-chip),
  .screen-page[data-layout] .screen-tools:focus-within > * { opacity:1; visibility:visible; transition:opacity .2s; }
  /* Blinds written the poker way, "100 / 200", in templates 1 and 3. */
  .screen-page[data-layout="1"] .blind-slot, .screen-page[data-layout="3"] .blind-slot { display:contents; }
  .screen-page[data-layout="1"] .blind-slot span, .screen-page[data-layout="3"] .blind-slot span { display:none; }
  .screen-page[data-layout="1"] .blind-slot strong, .screen-page[data-layout="3"] .blind-slot strong { flex:0 1 auto; min-width:0; overflow:hidden; }
  .screen-page[data-layout="1"] .blind-slot.big strong::before,
  .screen-page[data-layout="3"] .blind-slot.big strong::before { content:"/"; margin:0 .16em; color:var(--faint); font-weight:600; }

  /* 1 · Lean cards: timer card, then one wide blinds card; the ante card only appears when there is an ante. */
  .screen-page[data-layout="1"] .timer-numerals.flip-clock { font-size:clamp(96px,min(16vw,32vh),600px); }
  /* No column gap: the ante card brings its own margin, so without an ante the blinds card runs full width. */
  .screen-page[data-layout="1"] .blind-display { grid-template-columns:minmax(0,1fr) auto; column-gap:0; }
  .screen-page[data-layout="1"] .blind-numbers:not(.break-text) {
    position:relative; display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden;
    padding:clamp(40px,2.6vw,80px) clamp(24px,2vw,60px) clamp(16px,1.2vw,36px); border-radius:var(--r-lg); background:var(--surface);
  }
  .screen-page[data-layout="1"] .blind-numbers:not(.break-text)::before {
    content:"盲注"; position:absolute; top:clamp(16px,1.15vw,34px); left:clamp(20px,1.5vw,44px); color:var(--text-2); font:700 clamp(15px,.92vw,26px)/1.2 var(--ui);
  }
  .screen-page[data-layout="1"] .blind-slot strong { font-size:clamp(72px,min(7vw,13vh),300px); }
  .screen-page[data-layout="1"] .ante-line { min-width:clamp(220px,17vw,480px); margin-left:var(--gap); }
  .screen-page[data-layout="1"] .ante-line strong { font-size:clamp(48px,min(4.4vw,9vh),200px); }
  .screen-page[data-layout="1"] .ante-line.no-ante { display:none; }

  /* 2 · Split: big clock on the left, a scoreboard column on the right. */
  .screen-page[data-layout="2"] .screen-main { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .screen-page[data-layout="2"] .timer-numerals.flip-clock { font-size:clamp(96px,min(13vw,34vh),520px); }
  .screen-page[data-layout="2"] .blind-display { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .screen-page[data-layout="2"] .blind-numbers:not(.break-text) {
    display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,1.1vw,32px); min-width:0;
    padding:var(--pad); border-radius:var(--r-lg); background:var(--surface);
  }
  .screen-page[data-layout="2"] .blind-slot { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:0; border-radius:0; background:transparent; }
  .screen-page[data-layout="2"] .blind-slot span, .screen-page[data-layout="2"] .ante-line span { font-size:clamp(18px,1.15vw,32px); }
  .screen-page[data-layout="2"] .blind-slot + .blind-slot { padding-top:clamp(12px,1.1vw,32px); border-top:1px solid var(--line); }
  .screen-page[data-layout="2"] .blind-slot strong { flex:0 1 auto; min-width:0; overflow:hidden; font-size:clamp(64px,min(7vw,13vh),280px); text-align:right; }
  .screen-page[data-layout="2"] .ante-line { flex-direction:row; align-items:center; justify-content:space-between; }
  .screen-page[data-layout="2"] .ante-line strong { font-size:clamp(34px,min(2.8vw,6vh),120px); }
  .screen-page[data-layout="2"] .blind-break { grid-column:1; }

  /* 3 · Poster: no card fills at all; clock, blinds and ante centred in one column, upcoming levels as a ruled row. */
  .screen-page[data-layout="3"] .timer-display, .screen-page[data-layout="3"] .screen-live.urgent .timer-display { padding:0; border-radius:0; background:transparent; }
  .screen-page[data-layout="3"] .timer-card-top { justify-content:center; }
  .screen-page[data-layout="3"] .timer-numerals.flip-clock { font-size:clamp(110px,min(16vw,31vh),640px); }
  .screen-page[data-layout="3"] .timer-progress { height:clamp(4px,.25vw,8px); }
  .screen-page[data-layout="3"] .blind-display { grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(6px,.5vw,16px); padding-top:clamp(6px,.8vw,24px); }
  .screen-page[data-layout="3"] .blind-numbers:not(.break-text) { display:flex; align-items:baseline; justify-content:center; min-width:0; max-width:100%; overflow:hidden; }
  .screen-page[data-layout="3"] .blind-slot strong { font-size:clamp(72px,min(7.5vw,14vh),320px); }
  .screen-page[data-layout="3"] .ante-line { flex-direction:row; align-items:baseline; gap:.7em; padding:0; background:transparent; }
  .screen-page[data-layout="3"] .ante-line strong { font-size:clamp(26px,1.8vw,64px); }
  .screen-page[data-layout="3"] .ante-line.no-ante { display:none; }
  .screen-page[data-layout="3"] .blind-break { align-items:center; padding:0; background:transparent; text-align:center; }
  .screen-page[data-layout="3"] .screen-bottom { padding-top:clamp(12px,1vw,28px); border-top:1px solid var(--line); }
  .screen-page[data-layout="3"] .next-heading { display:none; }
  .screen-page[data-layout="3"] .level-track { margin-top:0; }
  .screen-page[data-layout="3"] .level-track .track-item, .screen-page[data-layout="3"] .level-track .track-item.is-next {
    border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; text-align:center;
  }
  .screen-page[data-layout="3"] .level-track .track-item:first-child { border-left:0; }
}