/* 版面概念:手機單欄的「車票」。抽獎券就是車票,時數進度是一條 10 站的鐵路,每站 1 小時。 */
:root{
  color-scheme:dark;
  /* 配色參考 4.7 版本主視覺的色彩:深靛藍星空、緋紅、洋紅到紫的光帶、鎏金、銀白。沒有使用官方圖片。 */
  --night:#0b0c26;--carriage:#17173a;--carriage-2:#231f4c;
  --ink:#f3effa;--ink-2:#c6c1dc;--muted:#a09bc0;
  --line:#322f5e;--line-strong:#6d6798;
  --brass:#e8bb62;--crimson:#cf1d3c;--crimson-ink:#ffffff;--primary:#e8bb62;--primary-ink:#1a1330;
  --signal:#86d3ff;--alert:#ff93a3;--banned:#ff5c6c;
  --magenta:#e45fd0;--violet:#8d69ff;
  --wash-a:#3b1c5e;--wash-b:#5b1228;
  --glow-a:rgba(228,95,208,.16);--glow-b:rgba(141,105,255,.14);
  --star:rgba(255,255,255,.55);
  --body:"Noto Sans TC","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  --mono:"Cascadia Mono","SF Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --night:#f3eff8;--carriage:#ffffff;--carriage-2:#f5f0fb;
  --ink:#1c1636;--ink-2:#463f63;--muted:#5f587c;
  --line:#dcd5ea;--line-strong:#7f7799;
  --brass:#7d5606;--crimson:#b3122f;--crimson-ink:#ffffff;--primary:#7d5606;--primary-ink:#ffffff;
  --signal:#0b5f9e;--alert:#b3122f;--banned:#b3122f;
  --magenta:#c43bae;--violet:#6a45e0;
  --wash-a:#efe2fb;--wash-b:#fbe0e5;
  --glow-a:rgba(196,59,174,.1);--glow-b:rgba(106,69,224,.1);
  --star:rgba(28,22,54,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.65 var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background-image:radial-gradient(1px 1px at 12% 8%,var(--star) 50%,transparent 51%),radial-gradient(1px 1px at 78% 4%,var(--star) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 14%,var(--star) 50%,transparent 51%),radial-gradient(1px 1px at 34% 19%,var(--star) 50%,transparent 51%),radial-gradient(1px 1px at 91% 23%,var(--star) 50%,transparent 51%),radial-gradient(700px 360px at 8% 120px,var(--glow-a),transparent 70%),radial-gradient(600px 340px at 100% 40px,var(--glow-b),transparent 70%);background-repeat:no-repeat;background-size:100% 900px}
.wrap{max-width:640px;margin:0 auto;padding-block:12px 40px;display:grid;gap:18px}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(1.75rem,7vw,2.3rem);line-height:1.2;text-wrap:balance;font-weight:800}
h2{font-size:1.1rem;line-height:1.4}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sub{color:var(--ink-2)}
.small{font-size:.86rem}
.label{font-size:.76rem;color:var(--muted);letter-spacing:.08em}

/* 頁首 */
header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{font-family:var(--mono);font-weight:700;background:none;border:0;padding:0;cursor:pointer;font-size:1.02rem;color:var(--ink)}
nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav button{background:none;border:0;border-bottom:2px solid transparent;padding:6px 8px;cursor:pointer;color:var(--ink-2);font-size:.92rem}
nav button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass);font-weight:700}

/* 按鈕 */
.btn{display:block;width:100%;text-align:center;border-radius:8px;border:1px solid var(--line-strong);background:var(--carriage-2);padding:11px 14px;font-weight:700;cursor:pointer}
a.btn{color:var(--ink);text-decoration:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.danger{background:none;border-color:var(--alert);color:var(--alert)}
.btn.red{background:var(--crimson);border-color:var(--crimson);color:var(--crimson-ink)}
.btn.twitch{background:#9146ff;border-color:#9146ff;color:#fff} /* Twitch 品牌紫,用於登入按鈕 */

/* 車票:左右兩邊挖半圓,中間是撕線 */
.ticket{--notch:11px;--stub:104px;background:var(--carriage);border-radius:10px;display:grid;grid-template-columns:1fr var(--stub);
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,transparent 98%,#000) top,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,transparent 98%,#000) bottom;
  -webkit-mask-size:100% 51%;-webkit-mask-repeat:no-repeat;
  mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,transparent 98%,#000) top,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,transparent 98%,#000) bottom;
  mask-size:100% 51%;mask-repeat:no-repeat}
.ticket .main{padding:18px;display:grid;gap:8px;min-width:0}
.ticket h1{word-break:keep-all;overflow-wrap:anywhere}
.ticket-sub{font-size:1.05rem;font-weight:700;line-height:1.4;color:var(--brass);overflow-wrap:anywhere}
.ticket .stub{background:linear-gradient(165deg,var(--wash-a),var(--wash-b));border-left:2px dashed var(--line-strong);padding:18px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.stub .big{font-family:var(--mono);font-size:2.3rem;font-weight:800;line-height:1;color:var(--brass)}
/* 小車票:舉辦過的活動、參加過的活動。右上放按鈕或自己的結果,窄螢幕時換到下面 */
.ticket.mini .main{padding:14px 16px}
.ticket.mini .stub{padding:12px 6px}
.ticket.mini .stub .big{font-size:1.8rem}
.ticket.mini h3{margin:0;font-size:1.15rem;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.mini-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 16px;flex-wrap:wrap}
.mini-title{display:grid;gap:6px;min-width:0;flex:1 1 220px}
.mini-head>.btn,.mini-result .btn{width:auto;flex:0 0 auto}
.mini-result{display:grid;gap:6px;justify-items:end;text-align:right}
@media (max-width:560px){.mini-result{justify-items:start;text-align:left}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;border-radius:999px;padding:2px 10px;border:1px solid currentColor;width:fit-content}
.chip.banned,.banned-text{color:var(--banned)}
.banned-text{font-family:var(--body);font-weight:800}
.chip.go{color:var(--signal)}.chip.wait{color:var(--muted)}.chip.warn{color:var(--brass)}.chip.bad{color:var(--alert)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){.dot.pulse{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.3}}
.count{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums}

/* 區塊 */
section{display:grid;gap:12px}
.panel{background:var(--carriage);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat .v{font-family:var(--mono);font-size:1.6rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.9rem;font-weight:500;color:var(--ink-2)}

/* 鐵路進度:0 到 600 分鐘等比例 */
.rail{position:relative;height:50px;margin:2px 12px 0}
.rail .track,.rail .fill{position:absolute;left:0;top:11px;height:4px;border-radius:2px}
.rail .track{right:0;background:var(--line-strong)}
.rail .fill{background:linear-gradient(90deg,var(--violet),var(--magenta) 55%,var(--crimson))}
.rail .stop{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:2px;transform:rotate(45deg);background:var(--carriage);border:2px solid var(--line-strong)}
.rail .stop.on{background:var(--brass);border-color:var(--brass)}
.rail .tag{position:absolute;top:26px;transform:translateX(-50%);font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.rail .tag.on{color:var(--ink)}
.rail .train{position:absolute;top:2px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--ink);-webkit-mask:radial-gradient(circle 9px at 68% 38%,transparent 97%,#000);mask:radial-gradient(circle 9px at 68% 38%,transparent 97%,#000)}

/* 步驟 */
ol.steps{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
ol.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--mono);font-size:.84rem}

/* 展開內容 */
details{border-top:1px solid var(--line);padding-block:10px}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700}
details ul{margin:8px 0 0;padding-left:1.2em;color:var(--ink-2);display:grid;gap:4px}
details p{margin-top:8px;color:var(--ink-2)}

/* 開獎 */
.winners{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.winners li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.winners li:last-child{border-bottom:0;padding-bottom:0}
.you{color:var(--brass);font-weight:700}

/* 私人留言 */
.letter{border-color:var(--brass);background:linear-gradient(165deg,var(--wash-a),var(--carriage) 60%)}
.letter .from{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.letter blockquote{margin:0;border-left:3px solid var(--crimson);padding-left:12px;white-space:pre-line}
.code{font-family:var(--mono);font-size:1.15rem;font-weight:700;letter-spacing:.04em;background:var(--night);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;word-break:break-all}
.field{display:grid;gap:4px}
.field label{font-size:.88rem;color:var(--ink-2)}
.field input,.field select{background:var(--night);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;width:100%}
.pick{display:grid;gap:10px}
.pick .opt{display:grid;gap:4px}
.warn-box{border:1px solid var(--alert);border-radius:8px;padding:10px 12px;color:var(--ink);font-size:.92rem}
#toast{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:608px;margin:auto;background:var(--ink);color:var(--night);border-radius:8px;padding:10px 14px;font-size:.92rem;z-index:20}
footer{border-top:1px solid var(--line);padding-top:12px;font-size:.84rem;color:var(--ink-2);display:grid;gap:4px}
@media (max-width:380px){.ticket{--stub:84px}.stub .big{font-size:1.9rem}}

/* 內嵌直播:Twitch 要求畫面至少 400x300 */
.embed{display:grid;gap:10px}
.embed iframe{display:block;width:100%;border:0;border-radius:8px;background:#000}
.embed .player{aspect-ratio:16/9;min-height:300px}
.embed .chatbox{position:relative;height:420px;min-width:0}
.embed .chat{position:absolute;inset:0;height:100%}

/* 版面:手機單欄;電腦版(900 以上)整站加寬,各頁改成兩欄 */
.wrap{grid-template-columns:minmax(0,1fr)}
.wrap.site{max-width:1180px}
#stream{background:none;border:0;padding:0}
#embedBox{order:-1;gap:18px}
/* 導覽和直播按鈕同一排、同樣大小;之後類似的按鈕都照這個樣式 */
.streambar{display:flex;gap:8px}
.streambar .btn{width:auto;padding:6px 12px;font-size:.88rem}
.streambar [hidden]{display:none}
.chatcol{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-width:0}
.chatbar{display:flex;gap:8px}
.chatbar .btn{padding:6px 10px;font-size:.86rem}
.chatbar .btn{flex:1 1 auto}
/* 網站聊天室 */
.lc{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;padding:10px;background:var(--carriage);border:1px solid var(--line);border-radius:8px}
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lc-status{font-size:.76rem;max-width:100%}
.lc-log{overflow-y:auto;overflow-wrap:anywhere;font-size:.92rem;line-height:1.5;display:grid;gap:4px;align-content:start}
.lc-name{font-weight:700;color:var(--signal)}
.lc-name.me{color:var(--brass)}
.lc-name.streamer{color:var(--magenta)}
.lc-sys{color:var(--muted);font-size:.82rem}
.lc-emote{height:1.5em;vertical-align:middle}
.lc-failed{opacity:.6}
.lc-tag{margin-left:6px;font-size:.78rem;font-weight:700;color:var(--alert)}
.lc-form{display:flex;gap:6px}
.lc-form input{flex:1 1 auto;min-width:0;background:var(--night);border:1px solid var(--line-strong);border-radius:6px;padding:7px 10px}
.lc-form .btn{width:auto;flex:none;padding:7px 12px}
.lc-connect{display:grid;gap:6px}
.lc-connect .btn{padding:8px 12px}
.lc-connect p{font-size:.76rem;line-height:1.45}
.homegrid,.overview,.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.detail-head{display:grid;gap:6px;justify-items:start}
.detail-head h1{overflow-wrap:anywhere}
.rules{display:grid;gap:8px;color:var(--ink-2);margin-top:8px}
.rules p{margin:0}
.rules h3{margin:8px 0 0;font-size:1rem;color:var(--ink)}
.rules ol{margin:0;padding-left:1.4em;display:grid;gap:4px}
.test-banner{border:1px solid var(--brass);border-radius:8px;padding:8px 12px;color:var(--ink);font-size:.88rem}
/* 領獎對話 */
.thread{display:grid;gap:10px;max-height:360px;overflow-y:auto;padding:12px;background:var(--night);border:1px solid var(--line);border-radius:8px}
.msg{display:grid;gap:2px;max-width:85%}
.msg.mine{justify-self:end;justify-items:end}
.msg.them{justify-self:start;justify-items:start}
.msg .who{font-size:.74rem;color:var(--muted)}
.msg .bubble{padding:8px 12px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--carriage-2);border:1px solid var(--line-strong);color:var(--ink)}
.msg.mine .bubble{border-color:var(--brass)}
.privacy h2{margin-top:4px}
.stats.three{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .embed,.homegrid{grid-template-columns:minmax(0,1fr) 340px}
  .embed .chatbox{height:auto}
  .ticket{--stub:148px}
  .overview{grid-template-columns:minmax(0,1fr) 400px;gap:32px}
  .ov-left{position:sticky;top:calc(12px + env(safe-area-inset-top,0px))}
  .ov-left.no-stick{position:static} /* 活動總覽左欄有舉辦過的活動,會變長,不固定 */
  .cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy{display:block;columns:2;column-gap:40px}
  .privacy h1{column-span:all;margin-bottom:12px}
  .privacy h2{break-after:avoid;margin-top:0;margin-bottom:6px}
  .privacy p{break-inside:avoid;margin-bottom:14px}
}
@media (max-width:899px){
  .embed .chatbox{height:360px}
  .streambar .btn{flex:1 1 0;min-width:0;padding:11px 14px;font-size:1rem}
}

/* 登入彈窗 */
dialog{background:var(--carriage);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;padding:0;width:min(420px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(5,5,20,.7)}
.dlg{display:grid;gap:12px;padding:20px}
.dlg-actions{justify-content:flex-end}
#revealTitle:focus{outline:none}
.result-dlg{width:min(520px,calc(100vw - 32px))}
.result-card{display:grid;gap:10px;padding:18px;border:1px solid var(--brass);border-radius:10px;background:linear-gradient(165deg,var(--wash-a),var(--carriage) 60%)}
.result-card h2{font-size:1.35rem;line-height:1.3;overflow-wrap:anywhere}
.result-head{margin-top:4px;font-weight:800;color:var(--brass)}
.result-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.result-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.result-pos{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--brass);color:var(--primary-ink);font-weight:800;font-size:.86rem}
.result-name{flex:1 1 auto;min-width:0;font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}

/* 後台:電腦版左側固定選單,右側用滿寬度;窄螢幕改成右上角三條線,點開是半透明的同一份選單 */
body.admin{padding-left:0;padding-right:0}
.shell{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-height:100vh}
.side{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--carriage)}
.side-brand{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0}
.menu-btn{position:relative;flex:none;display:grid;gap:4px;align-content:center;justify-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:8px;background:var(--carriage-2);cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;border-radius:1px;background:var(--ink)}
.menu-btn.has-todo::after{content:"";position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--brass)}
.side-menu{display:none;position:absolute;top:calc(100% + 6px);right:max(12px,env(safe-area-inset-right,0px));width:min(280px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow-y:auto;gap:12px;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:color-mix(in srgb,var(--carriage) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.side.open .side-menu{display:grid}
.menu-shade{position:fixed;inset:0;z-index:25;background:rgba(5,5,20,.35)}
.side nav{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px}
.side nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;border:0;border-radius:8px;padding:7px 12px;color:var(--ink-2);font-size:.94rem}
.side nav a[aria-current="page"]{background:var(--carriage-2);color:var(--ink);font-weight:700}
.login-wrap{display:grid;gap:12px;width:min(420px,100%);margin-inline:auto;padding:max(48px,12vh) 16px 32px}
.login-title{text-align:center}
.twitch-step h2{font-size:1.25rem;text-align:center;overflow-wrap:anywhere}
.btn.twitch{background:#9146ff;border-color:#9146ff;color:#fff}
.btn.switch{background:#e5132b;border-color:#e5132b;color:#fff}
/* 完全上鎖:整頁改成紅色警示,解鎖後恢復。暫時上鎖不套用。 */
.lockdown-stripe{display:none}
body.lockdown{
  color-scheme:dark;
  --night:#2b0408;--carriage:#47090f;--carriage-2:#5c0d14;
  --ink:#fff1f1;--ink-2:#ffd5d5;--muted:#f5b5b8;
  --line:#8a1f28;--line-strong:#d9636c;
  --brass:#ffb020;--primary:#e5132b;--primary-ink:#ffffff;--alert:#ffb020;
  --glow-a:rgba(255,40,60,.28);--glow-b:rgba(255,120,30,.14);--star:transparent;
}
body.lockdown .panel{border:2px solid #ff4655;overflow:hidden;padding-top:0}
body.lockdown .lockdown-stripe{display:block;height:12px;margin:0 -16px;background:repeating-linear-gradient(-45deg,#ffb020 0 14px,#2b0408 14px 28px)}
body.lockdown .warn-box{background:var(--carriage-2);border-width:2px;text-align:center}
body.lockdown .warn-box .keep,.lockdown-head .keep{display:inline-block}
body.lockdown .login-wrap{width:min(540px,100%)}
/* 完全封鎖階段:警告粗體、四個步驟依序標示 */
body.lockdown .warn-box strong{display:block;font-size:1.05rem;color:#ffb020;margin-bottom:4px}
.warn-box .em-error{display:inline-block;margin-top:6px;font-weight:700}
.em-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:em}
.em-steps li{counter-increment:em;border:1px solid var(--line-strong);border-radius:8px;padding:6px 4px;font-size:.78rem;text-align:center;color:var(--muted);line-height:1.3}
.em-steps li::before{content:counter(em);display:block;font-family:var(--mono);font-weight:800;font-size:1rem}
.em-steps li.on{border-color:#ffb020;color:var(--ink);font-weight:700;box-shadow:0 0 0 1px #ffb020 inset}
.em-steps li.done{color:var(--ink-2);opacity:.75}
.em-steps li.done::before{content:'✓'}
@media (max-width:420px){.em-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lockdown-head{font-size:1.05rem;font-weight:800;color:#ffb020}
/* 上鎖警示彈窗:登入中的人看到的紅色提示 */
dialog.lock-dlg{background:#47090f;color:#fff1f1;border:2px solid #ff4655;text-align:center;overflow:hidden}
dialog.lock-dlg::backdrop{background:rgba(60,0,8,.82)}
.lockdown-bar{height:12px;background:repeating-linear-gradient(-45deg,#ffb020 0 14px,#2b0408 14px 28px)}
.lock-dlg #lockBody{display:grid;gap:4px}
.lock-dlg strong{color:#ffb020}
.lock-dlg .keep{display:inline-block}
.lock-dlg .btn{background:#e5132b;border-color:#e5132b;color:#fff}
.side nav a.nav-1{padding-left:22px;font-size:.9rem}
.side nav a.nav-2{padding-left:40px;font-size:.86rem}
.nav-title{min-width:0;overflow-wrap:anywhere}
.side nav,.side nav a{min-width:0}
.eventbar{display:flex;flex-wrap:wrap;gap:8px}
.eventbar .btn{width:auto;padding:6px 12px;font-size:.88rem}
.event-list{list-style:none;margin:0;padding:0;display:grid}
.event-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding-block:12px;border-top:1px solid var(--line)}
.event-row:first-child{border-top:0;padding-top:0}
.event-row:last-child{padding-bottom:0}
.event-info{display:grid;gap:2px;min-width:0;grid-column:1/-1;overflow-wrap:anywhere}
.event-row .btn{width:auto;padding:6px 12px;font-size:.88rem;justify-self:end}
.nbadge{min-width:20px;padding:0 6px;border-radius:999px;background:var(--brass);color:var(--primary-ink);font-size:.76rem;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.shell>.main{display:grid;gap:16px;align-content:start;min-width:0;padding-block:18px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-head h1{font-size:1.5rem}
h3{margin:0;font-size:1rem}
.btn.fit{width:fit-content}
.btnrow .btn{width:auto}
a.btn.fit,.btnrow a.btn{display:inline-block}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--carriage);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tile{display:grid;gap:2px;align-content:start;padding:14px 16px;border-top:1px solid var(--line);border-left:1px solid var(--line);margin:-1px 0 0 -1px;min-width:0}
.tile .v{font-size:1.2rem;font-weight:800;line-height:1.35;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .v small{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.split,.winner-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.todo{list-style:none;margin:0;padding:0;display:grid}
.todo li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line)}
.todo li:first-child{border-top:0;padding-top:0}
.todo li span:nth-child(2){flex:1 1 180px;min-width:0}
.meters{display:grid;gap:10px}
.meter-row{display:grid;gap:3px}
.meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;border-radius:3px;background:var(--signal)}
.meter.high span{background:var(--alert)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.field input:disabled{opacity:.5;cursor:not-allowed;border-style:dashed}
.field .small{margin-top:1px}
.facts{margin:0;display:grid;gap:8px 20px;grid-template-columns:minmax(0,1fr)}
.facts dt{font-size:.78rem;color:var(--muted)}
.facts dd{margin:0}
.panel.muted{opacity:.7}
.panel h2 small{font-size:.86rem;font-weight:500;margin-left:4px}
tr[hidden]{display:none}
@media (min-width:700px){
  .strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .form-grid,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid .wide{grid-column:1/-1}
}
@media (min-width:1000px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .side{top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;align-content:stretch;justify-content:stretch;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:20px 12px;border-bottom:0;border-right:1px solid var(--line)}
  .side-brand{display:grid;gap:0;padding-inline:10px}
  .menu-btn,.menu-shade{display:none}
  .side-menu,.side.open .side-menu{display:grid;grid-template-columns:minmax(0,1fr);position:static;width:auto;max-height:none;grid-template-rows:minmax(0,1fr) auto;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .shell>.main{padding:24px 32px 48px}
  .shell>.main>*{max-width:1320px;width:100%}
  .event-row{grid-template-columns:minmax(0,1fr) auto auto}
  .event-info{grid-column:auto}
  .split{grid-template-columns:minmax(0,1fr) 360px}
  .split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .winner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 正式網站與後台的補充 */
.linkbtn{background:none;border:0;color:var(--brass);padding:0;cursor:pointer;font-size:.86rem;text-decoration:underline}
.brand{text-decoration:none}
nav a{border-bottom:2px solid transparent;padding:6px 8px;color:var(--ink-2);font-size:.92rem;text-decoration:none}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass);font-weight:700}
/* 導覽列的帳號按鈕:和一般頁面連結區分 */
nav .navbtn{margin-inline:4px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--carriage-2);color:var(--ink);font-weight:700;font-size:.88rem;line-height:1.4;cursor:pointer}
nav a.navbtn[aria-current="page"]{border-color:var(--brass);color:var(--brass)}
nav .navbtn.twitch{background:#9146ff;border-color:#9146ff;color:#fff}
nav .banned-tag{margin-inline:4px;padding:4px 10px;border-radius:8px;background:#cf1d3c;color:#fff;font-weight:700;font-size:.85rem;line-height:1.4}
a.inline{color:var(--brass)}
.row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:10px}
.stack.lg{gap:18px}
.stat .v.sm{font-size:1.2rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
.btnrow .btn{width:auto}
.wrap.wide{max-width:900px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:.8rem}
.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
textarea{width:100%;background:var(--night);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;font:inherit;color:inherit}
details .btn.danger{margin-top:8px}