/* ===== THEME VARIABLES ===== */
:root {
  --bg: #ffffff;
  --card-bg: #3c79e3;
  --text: #fff;
  --muted: #8892a5;
  --border: #1f2633;
}

body.theme-light {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --text: #222;
  --muted: #666;
  --border: #d0d4da;
}

:root{--bg:#0b0f1a;--card:#121a2b;--muted:#90a4c0;--accent:#3bd;--success:#4cd964;--danger:#ff3b30;--warning:#ffd60a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial;color:#eef;background:var(--bg)}
header{position:sticky;top:0;background:linear-gradient(180deg,rgba(11,15,26,.95),rgba(11,15,26,.82));backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
.container{max-width:1900px;width:100%;margin:0 auto;padding:14px 16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px}

/* Light / normal mode overrides */
body.theme-light{
  --bg: #f7f9fc;
  --card: #ffffff;
  --muted: #4c5566;
  color: #111;
  background: #f7f9fc;
}
body.theme-light header{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,252,.92));
  border-bottom:1px solid #d9e3f0;
}
body.theme-light .card,
body.theme-light .sidebar,
body.theme-light .event-item{
  background:#ffffff;
  border:1px solid #d9e3f0;
  color:#111;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
body.theme-light .nav-item{ background:#f2f5fa; border:1px solid #d9e3f0; color:#0f1a2f; }
body.theme-light .nav-item.active{ outline:2px solid #3b82f6; background:#e8f0ff; }
body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light button{
  background:#ffffff;
  color:#0f1a2f;
  border:1px solid #d9e3f0;
}
body.theme-light .event-meta{ color:#4b5563; } /* event ID text darker */
body.theme-light .btn{ background:#f0f4fb; color:#0f1a2f; border:1px solid #d9e3f0; }
body.theme-light .primary{ background:#3b82f6!important; color:#fff!important; border:none; }
body.theme-light .stat{ background:#f3f6fb; border:1px solid #dbe4f2; color:#0f1a2f; }
body.theme-light .current-prize{ color:#0f1a2f; text-shadow:none; }
body.theme-light #prizeLeftInline.stat{ color:#0f1a2f; text-shadow:none; }

/* Tablet/Public launcher buttons */
.btn-public, .btn-tablet{
  background:#2e7be0;
  color:#fff;
  border:1px solid #1f66bd;
}
/* Tablet gets turquoise */
.btn-tablet{ background:#14b8a6; border:1px solid #0f9c8d; }
body.theme-light .btn-public{ background:#2563eb; border:1px solid #1d4ed8; color:#fff; }
body.theme-light .btn-tablet{ background:#008979; border:1px solid #0f9c8d; color:#fff; }

/* Header public/tablet buttons even without special class */
#btnPublicBoard,
a[href$="tablet.html"]{
  background:#2e7be0;
  color:#fff !important;
  border:1px solid #1f66bd;
}
body.theme-light #btnPublicBoard,
body.theme-light a[href$="tablet.html"]{
  background:#8002ba;
  color:#fff !important;
  border:1px solid #1d4ed8;
}
input,button,select,textarea{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0e1626;color:#eef}
textarea{resize:vertical}
input[type="number"]{width:90px}
button{cursor:pointer}
.btn{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0e1626;color:#eef;display:inline-block;text-decoration:none;transition:transform .08s ease,filter .08s ease;position:relative;overflow:hidden}
.btn:active,button:active{transform:translateY(1px) scale(.98);filter:brightness(.95)}
.btn::after,button::after{content:"";position:absolute;left:50%;top:50%;width:120%;padding-top:120%;transform:translate(-50%,-50%) scale(0);opacity:0;background:radial-gradient(circle,rgba(255,255,255,.35) 0%,rgba(255,255,255,.2) 35%,rgba(255,255,255,0) 70%);transition:transform .35s ease,opacity .6s ease;pointer-events:none}
.btn:active::after,button:active::after{transform:translate(-50%,-50%) scale(1);opacity:1;transition:transform .2s ease,opacity .2s ease}
.frame-tag{display:inline-flex;align-items:center;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0e1626;color:#eef;font-weight:600;font-size:13px}
body.theme-light .frame-tag{background:#f0f4fb;border:1px solid #d9e3f0;color:#0f1a2f}
.primary{background:var(--accent)!important;color:#012!important;border:none}
.success{background:var(--success)!important;color:#012!important;border:none}
.danger{background:var(--danger)!important;color:#fff!important;border:none}
.warning{background:var(--warning)!important;color:#121!important}
button:disabled{opacity:.55;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
#landingQR,
#preEventApplyQR{width:max-content;max-width:100%}
#landingQR .grid-2,
#preEventApplyQR .grid-2{grid-template-columns:minmax(0,256px);justify-items:start}
#landingQR .muted,
#preEventApplyQR .muted{max-width:256px;overflow-wrap:anywhere}
#landingQR .grid-2 > div:last-child,
#preEventApplyQR .grid-2 > div:last-child{width:100%}
#landingQR .grid-2 > div:last-child > div:last-child,
#preEventApplyQR .grid-2 > div:last-child > div:last-child{justify-content:flex-start}
.pill{font-size:12px;color:#c9d3e7;opacity:.85}
.bar{display:flex;gap:8px;flex-wrap:wrap}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;font-size:13px}
.tabs{display:flex;gap:8px}
.tabs .active{outline:2px solid var(--accent)}
footer{opacity:.6;text-align:center;padding:10px}
.stage{position:relative;min-height:60vh;border-radius:18px;background:radial-gradient(1200px 600px at 50% 0%,rgba(59,221,255,.18),transparent 60%),rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(6px) brightness(.6);opacity:.6}
.logo{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  max-width:200px;
  max-height:200px;
  opacity:.100
}
.stage-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px 32px;text-align:center}
.banner{
  width:100%;
  height:220px;
  max-height: 80px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-bottom:16px;
  border-radius:12px
}
@media (min-width:1600px){ .banner{height:300px} }
.prize-title{font-size:clamp(24px,2.6vw,52px);opacity:.95;margin:0 auto 14px;font-weight:800;}
.batch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:stretch;width:100%;max-width:1800px;margin:0 auto 12px}

.winners-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 12px;font-size:16px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:50}
.overlay.show{display:flex}
.count{font-size:clamp(80px,12vw,220px);font-weight:900;animation:pump .6s ease both}
@keyframes pump{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
#confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999; /* was 40 — ensure it's above stage, banners, etc. */
}
body.public-mode header{display:none}
body.public-mode .container{max-width:100vw;padding:0 0}
body.public-mode #publicView .stage{min-height:100vh;border-radius:0;border:none}
/* let the right column actually shrink instead of forcing overflow */
.cms-grid{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap:12px;
}
.sidebar{position:sticky;top:76px;align-self:start;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;height:max-content}
.sidebar-title{font-weight:800;margin-bottom:8px}
.event-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.event-item{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer;background:rgba(255,255,255,.03)}
.event-item.active{outline:2px solid var(--accent);background:rgba(59,221,255,.07)}
.event-name{font-weight:800}
.event-meta{font-size:12px;color:#cfe}
.sidebar-form{display:flex;flex-direction:column;gap:8px}
.cms-main{display:flex;flex-direction:column;gap:12px}
.qr-box{width:224px;height:224px;display:flex;align-items:center;justify-content:center;background:#0e1626;border:1px solid rgba(255,255,255,.12);border-radius:12px}
#pageGameBooths{overflow:hidden}
#gameBoothVisitorLink > div{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center!important;justify-items:center;text-align:center}
#gameBoothVisitorLink strong,#gameBoothVisitorLink a{grid-column:1}
#gameBoothVisitorLink a{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}
#gameBoothVisitorQR{display:inline-grid;grid-column:1;place-items:center;flex:0 0 auto;background:#fff;padding:6px;border-radius:8px}
.game-booth-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,280px));gap:16px;align-items:start;justify-content:center}
.game-booth-card{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:12px;background:rgba(255,255,255,.04);display:grid;gap:12px;min-width:0;overflow:hidden;justify-items:center;text-align:center}
.game-booth-head{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:end}
.game-booth-head label{display:flex;flex-direction:column;gap:5px;min-width:0;width:100%;font-weight:700;text-align:center}
.game-booth-head label span{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.game-booth-head input{width:100%;min-width:0;text-align:center}
.game-booth-head .btn.small{justify-self:center;max-width:120px;white-space:normal;line-height:1.15;text-align:center}
.game-booth-qr{width:min(180px,100%);aspect-ratio:1;height:auto;display:grid;place-items:center;justify-self:center;background:#fff;padding:8px;border-radius:8px}
.game-booth-qr canvas,.game-booth-qr img,#gameBoothVisitorQR canvas,#gameBoothVisitorQR img{max-width:100%;height:auto!important}
.game-booth-card a{font-size:12px;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;text-align:center}
@media (max-width: 720px){
  #gameBoothVisitorLink > div{grid-template-columns:1fr}
  #gameBoothVisitorQR{grid-column:1;grid-row:auto;justify-self:center}
}
/* ... keep your existing styles ... */

/* left nav items */
.nav-list { display:flex; flex-direction:column; gap:6px; margin-top:8px }
.nav-item { text-align:left; width:100%; padding:10px 12px; border-radius:12px; background:#0e1626; border:1px solid rgba(255,255,255,.12); color:#eef; cursor:pointer }
.nav-item.active { outline:2px solid var(--accent); background:rgba(59,221,255,.08) }

/* embedded stage (pageStage) mirrors main stage visuals */
#pageStage .stage .logo { max-width:160px; max-height:64px }

/* simple table styling for Events Manage */
.table { width:100%; border-collapse:separate; border-spacing:0 8px }
.table th, .table td { padding:10px 12px; text-align:left }
.table tr { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }

/* User list (使用者列表) spacing */
#pageUsers table { width:100%; border-collapse:separate; border-spacing:0 8px; }
#pageUsers th, #pageUsers td { padding:12px 16px; text-align:left; }
#pageUsers tr { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }


/* ===== Embedded stage inside CMS (抽獎舞台) — single consolidated rule set ===== */
#pageStage .stage {
  /* keep aspect & avoid global min-height */
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: auto;
  position: relative;

  /* keep it centered and fixed-width within the card */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

#pageStage .stage .stage-inner {
  /* center content vertically/horizontally and scale padding responsively */
  justify-content: center;
  padding: clamp(12px, 2.5vw, 24px) clamp(16px, 3.5vw, 32px);
}

#pageStage .banner {
  height: clamp(100px, 18vh, 220px);
}

#pageStage .batch-grid {
  /* never overflow the card and keep items centered */
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center;
  align-content: start;
}

#pageStage .winner-card {
  /* prevent layout stretch and wrap long names */
  max-width: 100%;
  word-break: break-word;
}

#pageStage .winner-card .name {
  font-size: clamp(28px, 3.2vw, 32px);
}
#pageStage .winner-card .dept {
  font-size: clamp(14px, 1.8vw, 28px);
}



body.public-mode .reroll-btn { display: none !important; }

#rerollPanel .table tr { background:rgba(255,255,255,.05); }
#rerollPanel .swap { font-weight:600 }
#rerollPanel .swap .old { opacity:.75; text-decoration:line-through }
#rerollPanel .swap .arrow { opacity:.6; margin:0 6px }

.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px }
.badge.present { background:rgba(76,217,100,.15); border:1px solid rgba(76,217,100,.35); color:#d0ffd8 }
.badge.absent  { background:rgba(255,59,48,.10); border:1px solid rgba(255,59,48,.28); color:#ffd7d4 }

/* Prize header precise alignment */
.prize-header{
  display:flex;
  align-items:center;        /* center the pill to the title’s visual middle */
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.prize-header .prize-title{
  margin:0;
  line-height:1.15;           /* keep big title tight so centering is predictable */
}

.prize-header .stat{
  display:inline-flex;       /* shrink to content and allow centering of text */
  align-items:center;        /* center text within the pill vertically */
  line-height:1;             /* remove extra vertical slack */
  padding:6px 12px;          /* slimmer pill height */
  border-radius:12px;
  /* micro-nudge to visually align with cap height of big title */
  transform: translateY(-1px);
}


#statsPrizeLeft {
  display: none !important;
}

/* Hide stats in Public view */
body.public-mode #statsRemain,
body.public-mode #statsWinners {
  display: none !important;
}

/* In CMS (default), keep them visible */
#statsRemain,
#statsWinners {
  display: inline-block;
}

/* When a poll is set active and we want the QR centered on the public stage */
body.public-mode.poll-only #publicView .prize-header,
body.public-mode.poll-only #publicView #currentBatch,
body.public-mode.poll-only #publicView #winnersChips,
body.public-mode.poll-only #publicView #statsRemain,
body.public-mode.poll-only #publicView #statsWinners,
body.public-mode.poll-only #publicView #statsPrizeLeft {
  display: none !important;
}

body.public-mode.poll-only #publicView #pollPublicRow {
  display: flex !important;
  margin-top: 6vh;
}

body.public-mode.poll-only #publicView .stage-inner {
  justify-content: center !important;
  min-height: 70vh; /* keep it visually centered vertically */
}

/* Bigger, responsive QR while centered */
body.public-mode.poll-only #publicView .qr-box {
  width: min(46vw, 420px);
  height: min(46vw, 420px);
}

/* ==== Poll results (public) ==== */
.result-board{
  width:100%;
  max-width:1600px;
  margin:10px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.bars-vertical{
  display:flex;
  align-items:flex-end;      /* bottom baseline */
  justify-content:center;
  gap:18px;
  width:100%;
  height:52vh;               /* chart height */
  max-height:720px;
  padding:10px 16px 0;
}

/* one column */
.vbar{
  position:relative;
  width:min(12vw,160px);
  min-width:88px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}

/* background pillar */
.vbar .shaft{
  position:relative;
  width:70%;
  height:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  align-items:flex-end;       /* bottom fill */
}

/* animated fill (height grows 0 -> pct) */
.vbar .fill{
  width:100%;
  height:0%;
  transition:height .8s ease;
  background:linear-gradient(180deg, rgba(59,221,255,.9), rgba(59,221,255,.55));
}

/* option label under pillar */
.vbar .label{
  margin-top:8px;
  font-weight:800;
  text-align:center;
  max-width:92%;
  line-height:1.2;
}

/* percentage bubble at top of the pillar */
.vbar .pct{
  position:absolute;
  top:-26px;
  font-size:14px;
  opacity:.9;
}

/* Crown drop */
.vbar .crown{
  position:absolute;
  top:-64px;                 /* starts off-screen */
  font-size:46px;
  line-height:1;
  animation:crown-drop-vert .7s ease .1s both;
}
@keyframes crown-drop-vert{
  from{ transform:translateY(-30px) scale(.6); opacity:.0 }
  to  { transform:translateY(0)     scale(1);   opacity:1  }
}

/* When results board is showing on public screen, hide the usual stage bits */
body.public-mode.public-result #publicView .prize-header,
body.public-mode.public-result #publicView #currentBatch,
body.public-mode.public-result #publicView #winnersChips,
body.public-mode.public-result #publicView #statsRemain,
body.public-mode.public-result #publicView #statsWinners,
body.public-mode.public-result #publicView #statsPrizeLeft,
body.public-mode.public-result #publicView #pollPublicRow{
  display:none !important;
}
body.public-mode.public-result #publicView .stage-inner{
  justify-content:flex-start;
}
/* ===== Tablet mode: true fullscreen & responsive ===== */
body.tablet-mode { overflow:hidden; background:#0b0f1a; }
body.tablet-mode header { display:none; }
body.tablet-mode #cmsView,
body.tablet-mode #publicView { display:none !important; }

#tabletView {
  display:flex !important;
  width:100vw;
  height:100vh;
  padding:0;
  margin:0;
  align-items:center;
  justify-content:center;
}

#tabletView .stage {
  position:relative;
  width:100vw;
  height:100vh;
  margin:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  overflow:hidden;
}

#tabletView .stage .bg,
#tabletView .stage #confetti3 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#tabletView .stage .stage-inner {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  align-items:center;
  justify-items:center;
  width:100%;
  height:100%;
  padding:clamp(12px, 3vw, 48px);
  gap:clamp(8px, 2vw, 24px);
}

#tabletView .prize-title { font-size:clamp(22px, 4vw, 52px); text-align:center; }
#tabletView .stat        { font-size:clamp(14px, 2.2vw, 20px); }

#tabletView .batch-grid{
  width:min(96vw, 1400px);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(140px, 18vw, 280px), 1fr));
  gap:clamp(8px, 2vw, 18px);
  align-content:start;
  justify-items:center;
}

#tabletView .winner-card{
  font-size:clamp(14px, 2.2vw, 22px);
  padding:clamp(8px, 1.8vw, 16px);
}

#tabletView .logo{
  max-width:min(30vw, 300px);
  height:auto;
  object-fit:contain;
}

/* Top-right fullscreen button for tablet view */
.tablet-fs-btn{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}

/* === SAFETY: When not in Public/Tablet, hide all .stage except the one in the CMS 抽獎舞台 tab === */
body:not(.public-mode):not(.tablet-mode) .stage { 
  display: none !important;
}
body:not(.public-mode):not(.tablet-mode) #pageStage .stage {
  display: block !important;
}

/* Also ensure non-active views never show their stages */
body:not(.public-mode)  #publicView  { display: none !important; }
body:not(.tablet-mode)  #tabletView  { display: none !important; }

/* Public view: make sure everything is visually centered */
#publicView .stage .stage-inner { justify-content: center; }

/* CMS stage: never let the grid overflow the card */
#pageStage .batch-grid { max-width: 100%; justify-items: center; }

#pageRoster .table input {
  padding: 6px 8px;
  height: 32px;
}

/* Keep name/department cells single-line and tidy */
#pageRoster td:nth-child(2),
#pageRoster td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PUBLIC: keep everything visually centered top/bottom */
#publicView .stage { min-height: 100vh; border-radius: 0; }
#publicView .stage .stage-inner { justify-content: center; min-height: 80vh; }

/* Remove stray canvas layering that caused corner confetti on CMS */
#confetti2, #confetti3 {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:40; /* below overlays, above content bg */
}

/* Huge CTA on tablet */
.big-cta{
  display:inline-block;
  width:min(92vw, 1200px);
  height:clamp(64px, 10vw, 120px);
  font-size:clamp(22px, 4.2vw, 42px);
  font-weight:900;
  border-radius:18px;
  background:var(--accent);
  color:#012;
  border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Roster: denser single-line rows (already partly in file; this tightens a bit more) */
#pageRoster .table th, #pageRoster .table td { padding: 6px 8px; line-height: 1.15; }

/* Subtle vertical centering correction for public stage */
#publicView .stage .stage-inner {
  padding-top: clamp(12px, 6vh, 64px);
  padding-bottom: clamp(12px, 6vh, 64px);
}

/* put in styles.css */
#guestTable thead th[data-sort="asc"]::after  { content: " ▲"; opacity:.7; font-size: .9em; }
#guestTable thead th[data-sort="desc"]::after { content: " ▼"; opacity:.7; font-size: .9em; }

/* Roster table spacing */
#guestTable th, #guestTable td {
  padding: 10px 14px;            /* more space between columns */
  vertical-align: middle;
  white-space: nowrap;
}
#prizeTable th, #prizeTable td {
  padding: 10px 12px;
  vertical-align: middle;
}

/* Show sort arrows at all times; switch when sorted */
#guestTable thead th[data-sortable="true"]::after {
  content: " ↕";
  opacity: .5;
  font-size: .9em;
  margin-left: 4px;
}
#guestTable thead th[data-sort="asc"]::after  { content: " ▲"; opacity: .9; }
#guestTable thead th[data-sort="desc"]::after { content: " ▼"; opacity: .9; }
#prizeTable thead th[data-sortable="true"]::after {
  content: " ↕";
  opacity: .5;
  font-size: .9em;
  margin-left: 4px;
}
#prizeTable thead th[data-sort="asc"]::after  { content: " ▲"; opacity: .9; }
#prizeTable thead th[data-sort="desc"]::after { content: " ▼"; opacity: .9; }

/* Small buttons look tidy in rows */
.btn.small { padding: 4px 8px; font-size: 12px; }
.btn.danger { border-color: #ff6b6b55; color: #ff6b6b; }

#guestTable .in { width: 120px; }
#guestTable .in.phone { width: 130px; }
#guestTable .in.name  { width: 160px; }

#guestTable thead th[data-sort="asc"],
#guestTable thead th[data-sort="desc"] {
  font-weight: 600;
}
#prizeTable thead th[data-sort="asc"],
#prizeTable thead th[data-sort="desc"] {
  font-weight: 600;
}

.stage-host { background:#0f0f0f; color:#fff; padding:12px; border-radius:12px; position:relative; }
.stage-top { display:flex; align-items:center; gap:12px; }
.stage-logo { width:80px; height:80px; object-fit:contain; }
.stage-banner { flex:1; max-height:120px; object-fit:cover; border-radius:8px; }

.stage-msg { margin:10px 0 12px; font-size:1.2rem; }

.winners-grid { display:grid; gap:12px; }


/* Top banner/message area */
.cms-stage .stage-top {
  padding: 8px 14px 0;
}
.cms-stage .stage-submsg {
  margin-top: 6px;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 600;
  opacity: .85;
}

/* Main stage: grid fills the area; countdown overlays it */
.cms-stage .stage-main {
  position: relative;
  display: grid;
}
#stageGrid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
}
#stageCountdown {
  position: absolute;
  inset: 0;
  display: none;            /* JS toggles this */
  align-items: center;
  justify-content: center;
  font-size: clamp(48px, 10vw, 160px);
  font-weight: 900;
  color: rgba(0,0,0,.85);
  background: rgba(255, 255, 255, 0);
}
#stageCountdown.is-active{ display:flex; }
#pageStageDraw #stageCountdown,
body:not(.is-public) #stageCountdown {
  background-color: transparent !important;
}

/* Bottom controls stay inside the frame */
.cms-stage .stage-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,0));
}
/* top area */
.cms-stage .stage-top{ padding:10px 14px 0; }
.cms-stage .stage-submsg{ margin-top:6px; font-weight:600; opacity:.9; }

/* grid fills the main area */
#stageGrid{
  width:100%; height:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; padding:16px;
  box-sizing:border-box;
}

.reroll-log table{ width:100%; border-collapse:collapse; }
.reroll-log th, .reroll-log td{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.06); }
.reroll-log th{ text-align:left; font-weight:700; color:#e2e8f0; }
.reroll-log tr:last-child td{ border-bottom:none; }

/* ---- Whole CMS lucky draw is a single 16:9 canvas ---- */
#pageStageDraw { 
  display: grid; 
  place-items: center; 
  padding: 16px; 
}

/* Tie the canvas size to its container, not the viewport (CMS only) */
body:not(.is-public) #cmsStage16x9.cms-stage{
  aspect-ratio:16/12;           /* CMS: taller canvas */
  width: 100%;
  max-width: 100%;
  height: auto;

  background:#0f1216;
  color:#111;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);

  display:grid;
  grid-template-rows: 96px 88px 1fr 72px;  /* header / prize strip / winners / footer */
  gap: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* PUBLIC: keep stage sizing independent of CMS tweaks */
.is-public #cmsStage16x9.cms-stage{
  aspect-ratio: 16/9;
  width: 100vw;
  height: 90vh;
  max-width: none;
  padding: 16px 32px;
  box-sizing: border-box;
}


/* ---- Header: logo + banner ---- */
.stage-row.header{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items:center;
}
.stage-row.header.is-logo-hidden{
  grid-template-columns: 1fr;
}
.stage-row.header.is-logo-hidden .banner-box{
  grid-column: 1 / -1;
}

.is-public .stage-row.header{
  display:grid;
  grid-template-columns: 1fr 8fr;
}
.is-public .stage-row.header.is-logo-hidden{
  grid-template-columns: 1fr;
}

.logo-box{
  display:grid;
  place-items:center;

  /* Let width be defined by the grid (1/8 of total via 1fr 7fr) */
  width: 100%;

  /* Make it a square-ish responsive box */
  aspect-ratio: 1 / 1;               /* keeps it square */
  max-height: 18vh;                   /* safety cap on very tall screens */

  border-radius:8px;
  color:#e2e8f0;
  font-weight:700;

  /* Background image from JS */
  background-color: transparent;
  background-size: contain;           /* fit inside box, keep aspect */
  background-repeat: no-repeat;
  background-position: center;
  object-fit: contain;
}
.banner-box{
  width: 100%;
  min-height: clamp(60px, 12vh, 140px);  /* responsive vertical size */
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#e2e8f0;
  font-weight:700;
  font-size: clamp(16px,2.2vw,28px);

  background-color: transparent;
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
}


/* layout for the strip: center the two items */
.stage-row.prize-strip{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.stage-row.prize-strip .bar{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap; /* keep on one line */
}

/* 現正抽獎： — label + value on separate column so wrapped lines align nicely */
.current-prize{
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:white;
  font-weight:800;              /* keep your strong label look */
  font-size:clamp(16px,2vw,26px);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  display:flex;
  align-items:flex-start;
  gap:8px;
  white-space:normal;
}
.current-prize .prize-label{ white-space:nowrap; }
.current-prize .prize-name{
  display:block;
  white-space:normal;
  word-break:break-word;
  line-height:1.15;
}

/* 此獎尚餘： — keep .stat pill but ensure white text */
#prizeLeftInline.stat{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* If you previously hid .prize-left, unhide the new inline pill */
.prize-left{ display:initial; } /* or remove any .prize-left { display:none } rule */



/* ---- Winners area: grid + countdown behind ---- */
.stage-row.winners-area{ position:relative; overflow:hidden; }
.stage-main{ position:relative; }
/* never exceed the card; adapt columns */
#stageGrid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 8px;
  box-sizing: border-box;
}
@media (max-width: 1200px){ #stageGrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { #stageGrid{ grid-template-columns: repeat(2, 1fr); } }

/* Public: winners area should shrink with the stage frame */
.is-public .stage-row.winners-area{ flex: 1 1 auto; min-height: 0; }
.is-public .stage-main{ height: 100%; }
.is-public #stageGrid{ height: 100%; grid-auto-rows: minmax(0, 1fr); }
.is-public #stageGrid .winner-card{ height: 100%; min-height: 0; align-self: stretch; }
.is-public #stageGrid .winner-card .name,
.is-public #stageGrid .winner-card .dept{ line-height: 1.1; }

#stageCountdown{
  position:absolute; inset:0;
  z-index:1;                         /* behind the cards */
  display:none;                      /* JS toggles */
  align-items:center; justify-content:center;
  font-size: clamp(64px, 12vw, 200px);
  font-weight: 900;
  color: rgba(191, 255, 0, 0.615);
  background-color: transparent;
  pointer-events:none;               /* don't block clicks */
}
#stageCountdown.is-active{ display:flex; }


.winner-card .btn-reroll{
  position:absolute; right:12px; bottom:12px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.12);
  color:#fff; font-weight:700; font-size: 12px;
  cursor:pointer;
}

/* ---- Footer stats (centered, two items) ---- */
.stage-row.footer-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  justify-items:center; align-items:center;
  color:#e2e8f0; font-weight:700;
  font-size: clamp(14px,1.6vw,18px);
}

/* Batch selected (if you render the bar outside the canvas) */
#drawBtns [data-batch].active{
  background:#32cd32 !important; color:#000 !important;
  border-color:#1b8a1b !important;
  box-shadow:0 0 0 2px rgba(27,138,27,.15) inset;
}

#cmsNav{
  position:sticky;
  top:76px;        /* not 0 */
  z-index:9;       /* below the header (which is 10) */
  background:transparent;
  border-bottom:none;
}

:root{
  --headerH: 76px;           /* your sticky header height */
  --sidebarW: 260px;         /* your left nav width (adjust if different) */
  --gutter: 24px;            /* side padding around the stage */
  --controlsH: 64px;         /* approx height of the control bar under the stage */
}

/* Wrap that holds the 16:9 canvas and centers it */
.stage-shell{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:12px;
  margin-inline:auto;
  width:100%;
  /* prevents horizontal scrollbars from any child overflow */
  overflow-x:hidden;
}

/* controls centered, never wider than the card */
.stage-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:8px 0 0;
  width:100%;
  max-width:100%;
  margin-inline:auto;
}

/* reroll log spans the card neatly */
.reroll-log{
  width:100%;
  max-width:100%;
  margin:10px auto 0;
  background:#0f1216; color:#cbd5e1;
  border-radius:10px; padding:10px 12px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  font-size:14px;
}

/* Safety: nothing inside the stage should push it wider than itself */
.cms-stage * { max-width:100%; box-sizing:border-box; }

/* Optional: kill any accidental page-wide overflow */
html, body { overflow-x:hidden; }

/* === Winner grid sizing — final overrides (CSS-only) === */

/* Base: cap at 5 columns by default */
#stageGrid {
  grid-template-columns: repeat(5, 1fr);
}

/* 1 winner: single column, card 70% wide & centered */
#stageGrid.winners-1 {
  grid-template-columns: 1fr !important;
  place-items: center;
}
#stageGrid.winners-1 .winner-card {
  width: 70%;
  max-width: 100%;
  justify-self: center;
}

/* 2–5 winners: match exact count */
#stageGrid.winners-2 { grid-template-columns: repeat(2, 1fr) !important; }
#stageGrid.winners-3 { grid-template-columns: repeat(3, 1fr) !important; }
#stageGrid.winners-4 { grid-template-columns: repeat(4, 1fr) !important; }
#stageGrid.winners-5 { grid-template-columns: repeat(5, 1fr) !important; }

/* 6 winners: 3 x 2 for balance */
#stageGrid.winners-6 {
  grid-template-columns: repeat(3, 1fr) !important;
}
/* 7–8 winners: 4 per row */
#stageGrid.winners-7,
#stageGrid.winners-8 {
  grid-template-columns: repeat(4, 1fr) !important;
}
/* 9–10 winners: 5 per row */
#stageGrid.winners-9,
#stageGrid.winners-10 {
  grid-template-columns: repeat(5, 1fr) !important;
}

/* Ensure cards never force the grid wider */
#stageGrid .winner-card { max-width: 100%; }

/* Names already single-line; keep it enforced */
#stageGrid .winner-card .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Single winner: when the grid has exactly one card */
#stageGrid > .winner-card:only-child{
  width: 70%;            /* <- set your desired single-card width */
  max-width: 100%;
  justify-self: center;  /* center that fixed width inside the grid */
}



/* Single winner: keep your desired 70% centered width */
#cmsStage16x9 .stage-main #stageGrid > .winner-card:only-child{
  width:70%;
  max-width:100%;
  justify-self:center;
}

/* Winner card look: bring back the old frame + surface + shadow */
#cmsStage16x9 .stage-main #stageGrid .winner-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  border:3px solid rgba(255,255,255,.75);
  border-radius:18px;
  padding:22px 16px;
  background:rgba(0,0,0,.25);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  color:#fff;
}

/* Winner name: old typography + keep single-line */
#cmsStage16x9 .stage-main #stageGrid .winner-card .name{
  font-size:clamp(60px, 4.5vw, 90px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.5px;
  text-shadow:0 6px 24px rgba(0,0,0,.45);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Department: old style + single-line */
#cmsStage16x9 .stage-main #stageGrid .winner-card .dept{
  margin-top:6px;
  font-size:clamp(20px, 2vw, 36px);
  opacity:.95;
  color:#d8e2ff;
  font-weight:600;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
/* Winner text stays on one line; size comes from CSS vars we set in JS */
#stageGrid .winner-card .name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
  font-size: var(--nameSize, 32px);   /* JS will set --nameSize */
  line-height: 5;
}

#stageGrid .winner-card .dept{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
  font-size: var(--deptSize, 24px);   /* JS will set --deptSize */
}

/* Helpful so measuring is stable */
#stageGrid .winner-card{ box-sizing: border-box; }
/* === Winner card text that auto-fits the card (no JS) === */
/* Make each card its own sizing container */
#cmsStage16x9 .stage-main #stageGrid .winner-card{
  container-type: inline-size;   /* enables cqi units */
}

/* Name scales with the card width; stays on one line */
#cmsStage16x9 .stage-main #stageGrid .winner-card .name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;

  /* 1cqi = 1% of the card’s width */
  font-size: clamp(23px, 9cqi, 40px);
  line-height: 1.05;
  font-weight: 1000;
}


/* Single winner: make the card fill 70% of the canvas, centered */
#cmsStage16x9 .stage-main #stageGrid > .winner-card:only-child{
  width: 70%;
  max-width: 100%;
  justify-self: center;
}

/* Names/depts must stay one line inside the card */
#cmsStage16x9 .stage-main #stageGrid .winner-card .name,
#cmsStage16x9 .stage-main #stageGrid .winner-card .dept{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.poll-item {
  border: 1px solid #01002f;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #07031800;
}
.poll-item input {
  flex: 1;
  border: 1px solid #16023978;
  border-radius: 6px;
  padding: 4px 6px;
}

/* Shared: CMS + Public — 5 cards per row, full width */
.stage-main #stageGrid{
  width: 100%;
  max-width: 100%;                  /* use the whole frame */
  margin-right: 200px;                        /* no extra side margins */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 per row */
  grid-auto-rows: 1fr;              /* 2 rows will share the height */
  gap: 12px;
  justify-items: stretch;
  align-content: center;
}

/* ===== Winners layout ===== */

/* generic winner grid (used for CMS + Public) */
.winners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;

  /* area width – this is your “70% of the section” */
  width: var(--winners-area-width, 70%);
  height: 100%;
  margin: 0 auto;

  /* gap between cards – “5%”ish */
  gap: var(--winners-gap, 5%);
}

/* generic winner card shape */
.winner-card {
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

/* name / dept text (you already had similar) */
.winner-card .name {
  font-weight: 700;
  margin-bottom: 0.3em;
}
.winner-card .dept {
  opacity: .8;
  font-size: 0.8em;
}
/* 1 winner: fill about 70% width area, 50% height */
.winners-1 .winner-card {
  flex: 0 0 100%;          /* 100% of the 70% width container */
  height: 50vh;            /* roughly half the viewport height */
}

/* 2 winners: two side-by-side, each ~30% of section (inside 70% container) */
.winners-2 .winner-card {
  flex: 0 0 30%;
  min-height: 30vh;
}

/* 3 winners: 2 on top, 1 wraps to second line on typical screens */
.winners-3 .winner-card {
  flex: 0 0 30%;
  min-height: 24vh;
}

/* 4 winners: 2x2 grid-ish */
.winners-4 .winner-card {
  flex: 0 0 30%;
  min-height: 22vh;
}

/* 5+ winners – smaller, more tiles */
.winners-5 .winner-card,
.winners-6 .winner-card,
.winners-7 .winner-card,
.winners-8 .winner-card,
.winners-9 .winner-card,
.winners-10 .winner-card {
  flex: 0 0 22%;
  min-height: 16vh;
}

/* ==== Final overrides to normalize winner cards (CMS & Public) ==== */
#cmsStage16x9 .stage-main #stageGrid,
.is-public #stageGrid {
  align-items: start;
  justify-items: center;
}

#cmsStage16x9 .stage-main #stageGrid .winner-card,
.is-public #stageGrid .winner-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 160px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  text-align: center;
}
/* Public: let cards scale with the stage frame height */
.is-public #cmsStage16x9 .stage-main{
  flex: 1 1 auto;
  min-height: 0;
}
.is-public #stageGrid{
  height: 100%;
  grid-auto-rows: minmax(0, 1fr);
}
.is-public #stageGrid .winner-card{
  height: 100%;
  min-height: 0;
}
.is-public #stageGrid .winner-card .name,
.is-public #stageGrid .winner-card .dept{
  line-height: 1.1;
}

/* CMS: remove dark overlay from cards */
body:not(.is-public) #cmsStage16x9 .stage-main #stageGrid .winner-card {
  background: transparent !important;
  border-color: rgba(255,255,255,.65);
  box-shadow: none;
}
/* CMS: keep grid area clear (no dark overlay) */
body:not(.is-public) #cmsStage16x9 .stage-main #stageGrid {
  background: transparent !important;
}

#cmsStage16x9 .stage-main #stageGrid .winner-card .name,
.is-public #stageGrid .winner-card .name {
  font-weight: 900;
  line-height: 1.1;
  max-width: 100%;
  white-space: normal;
  text-overflow: unset;
}

#cmsStage16x9 .stage-main #stageGrid .winner-card .dept,
.is-public #stageGrid .winner-card .dept {
  max-width: 100%;
  white-space: normal;
}

/* neutralize vh-based heights from earlier rules */
#cmsStage16x9 .stage-main #stageGrid.winners-1 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-2 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-3 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-4 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-5 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-6 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-7 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-8 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-9 .winner-card,
#cmsStage16x9 .stage-main #stageGrid.winners-10 .winner-card {
  height: auto;
  min-height: 160px;
  flex: 1 1 auto;
}

/* CMS: enforce name larger than dept (override all earlier sizing) */
body:not(.is-public) #cmsStage16x9 .stage-main #stageGrid .winner-card .name {
  font-size: clamp(20px, 4vw, 32px) !important;
  line-height: 1.1;
  font-weight: 900;
}
body:not(.is-public) #cmsStage16x9 .stage-main #stageGrid .winner-card .dept {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.1;
}

/* CMS: keep the two columns as independent scroll panes below the header. */
body:not(.public-mode):not(.tablet-mode) {
  overflow: hidden;
}

body:not(.public-mode):not(.tablet-mode) #cmsView {
  height: calc(100dvh - var(--headerH, 76px));
  overflow: hidden;
}

body:not(.public-mode):not(.tablet-mode) .cms-grid {
  height: 100%;
  min-height: 0;
}

body:not(.public-mode):not(.tablet-mode) .sidebar,
body:not(.public-mode):not(.tablet-mode) .cms-main {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body:not(.public-mode):not(.tablet-mode) .sidebar {
  position: static;
  height: 100%;
}

body:not(.public-mode):not(.tablet-mode) .cms-main {
  height: 100%;
  padding-right: 6px;
}

body:not(.public-mode):not(.tablet-mode) .sidebar,
body:not(.public-mode):not(.tablet-mode) .cms-main {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

body:not(.public-mode):not(.tablet-mode) .sidebar::-webkit-scrollbar,
body:not(.public-mode):not(.tablet-mode) .cms-main::-webkit-scrollbar {
  width: 8px;
}

body:not(.public-mode):not(.tablet-mode) .sidebar::-webkit-scrollbar-track,
body:not(.public-mode):not(.tablet-mode) .cms-main::-webkit-scrollbar-track {
  background: transparent;
}

body:not(.public-mode):not(.tablet-mode) .sidebar::-webkit-scrollbar-thumb,
body:not(.public-mode):not(.tablet-mode) .cms-main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

body:not(.public-mode):not(.tablet-mode) .sidebar:hover::-webkit-scrollbar-thumb,
body:not(.public-mode):not(.tablet-mode) .cms-main:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.3);
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.theme-light:not(.public-mode):not(.tablet-mode) .sidebar,
body.theme-light:not(.public-mode):not(.tablet-mode) .cms-main {
  scrollbar-color: rgba(15,26,47,.22) transparent;
}

body.theme-light:not(.public-mode):not(.tablet-mode) .sidebar::-webkit-scrollbar-thumb,
body.theme-light:not(.public-mode):not(.tablet-mode) .cms-main::-webkit-scrollbar-thumb {
  background: rgba(15,26,47,.14);
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.theme-light:not(.public-mode):not(.tablet-mode) .sidebar:hover::-webkit-scrollbar-thumb,
body.theme-light:not(.public-mode):not(.tablet-mode) .cms-main:hover::-webkit-scrollbar-thumb {
  background: rgba(15,26,47,.28);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (max-width: 760px) {
  body:not(.public-mode):not(.tablet-mode) {
    overflow: auto;
  }

  body:not(.public-mode):not(.tablet-mode) #cmsView {
    height: auto;
    overflow: visible;
  }

  body:not(.public-mode):not(.tablet-mode) .sidebar,
  body:not(.public-mode):not(.tablet-mode) .cms-main {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* PUBLIC: scale text fluidly by winner count for better legibility */
.is-public #stageGrid.winners-1 .winner-card .name { font-size: clamp(40px, 10vmin, 180px) !important; }
.is-public #stageGrid.winners-1 .winner-card .dept { font-size: clamp(20px, 6vmin, 96px) !important; }

.is-public #stageGrid.winners-2 .winner-card .name { font-size: clamp(32px, 8vmin, 120px) !important; }
.is-public #stageGrid.winners-2 .winner-card .dept { font-size: clamp(18px, 5vmin, 72px) !important; }

.is-public #stageGrid.winners-3 .winner-card .name { font-size: clamp(28px, 7vmin, 100px) !important; }
.is-public #stageGrid.winners-3 .winner-card .dept { font-size: clamp(16px, 4.5vmin, 64px) !important; }

.is-public #stageGrid.winners-4 .winner-card .name { font-size: clamp(24px, 6vmin, 90px) !important; }
.is-public #stageGrid.winners-4 .winner-card .dept { font-size: clamp(14px, 4vmin, 56px) !important; }

.is-public #stageGrid.winners-5 .winner-card .name,
.is-public #stageGrid.winners-6 .winner-card .name { font-size: clamp(22px, 5.4vmin, 80px) !important; }
.is-public #stageGrid.winners-5 .winner-card .dept,
.is-public #stageGrid.winners-6 .winner-card .dept { font-size: clamp(13px, 3.6vmin, 48px) !important; }

.is-public #stageGrid.winners-7 .winner-card .name,
.is-public #stageGrid.winners-8 .winner-card .name,
.is-public #stageGrid.winners-9 .winner-card .name,
.is-public #stageGrid.winners-10 .winner-card .name { font-size: clamp(20px, 4.4vmin, 68px) !important; }
.is-public #stageGrid.winners-7 .winner-card .dept,
.is-public #stageGrid.winners-8 .winner-card .dept,
.is-public #stageGrid.winners-9 .winner-card .dept,
.is-public #stageGrid.winners-10 .winner-card .dept { font-size: clamp(12px, 3vmin, 44px) !important; }