/* =========================================================================
   大豐循環遊戲場 · Lobby styles (app.css)
   V2C（U21）：大豐環保 CIS「明亮企業風」。只用 df-core.css 的平台語意 token
   （--surface／--text／--heading／--primary／--accent…）；遊戲畫面（#play）維持深色。
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); scroll-padding-top: 76px; }
body {
  background: var(--page);
  min-height: 100%;
  overflow-x: hidden;
  font-size: 15px; line-height: 1.55;
}
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 700; letter-spacing: .02em; color: var(--heading); }
p { margin: 0; }
.ic { width: 22px; height: 22px; flex: none; display: block; }
.hidden, [hidden] { display: none !important; }
/* 平台數字：系統字粗體＋等寬數字；Lilita One 只留給大數字（見各區）與遊戲 HUD */
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.df-stage .num { font-family: var(--f-display); font-weight: 400; }
/* 遊戲主題色（--ac）在白底上當文字用的可讀版本 */
.gcard, .daily, .intro, .result, .pool-card, .st-row, .lv-game, .ev-game { --ac-ink: color-mix(in srgb, var(--ac) 45%, #0b1f2e); --ac-soft: color-mix(in srgb, var(--ac) 14%, #fff); }

.app { position: relative; min-height: 100vh; }
.lobby { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding-bottom: calc(100px + var(--safe-b)); }
#views { padding: 0 16px; }
.view.enter { animation: viewIn .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- shared atoms ---------------- */
.card {
  position: relative; border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.pill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  height: 24px; padding: 0 10px; border-radius: var(--r-s); font-size: 12px; font-weight: 700;
  font-family: var(--f-body); line-height: 1;
  background: var(--surface-3); color: var(--text-2);
}
.pill .ic { width: 14px; height: 14px; }
.pill-green { background: var(--primary-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--primary-line); }
.pill-gold { background: var(--prize-soft); color: var(--prize); box-shadow: inset 0 0 0 1px var(--prize-line); }
.pill-sky { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.pill-draft { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
.pill-mode { background: var(--navy-soft); color: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--navy-line); height: 24px; font-size: 12px; padding: 0 9px; }
.pill-value { background: var(--primary-soft); color: var(--accent-ink); }
.pill-ghost { background: var(--surface-3); color: var(--text-2); }
.pill-demo { background: var(--surface-3); color: var(--text-2); font-size: 11px; height: 20px; }
.pill.abs { position: absolute; top: 12px; right: 12px; }

.avatar {
  --s: 40px; width: var(--s); height: var(--s); flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-body); font-weight: 700; font-size: calc(var(--s) * .44); color: #fff;
  background: var(--cis-dkgreen);
  box-shadow: 0 0 0 2px #fff;
}
/* 頭像 5 色一律取自 CIS 色票（V2AR2：拿掉紫、紅）：綠 700／海軍藍／海軍藍 600／綠 800／石板灰 700 */
.avatar.c1 { background: var(--cis-navy); color: #fff; }
.avatar.c2 { background: var(--cis-ltblue); color: #fff; }
.avatar.c3 { background: var(--ink-2); color: #fff; }
.avatar.c4 { background: var(--cis-dkgreen); color: #fff; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { --s: 34px; }
.avatar.lg { --s: 56px; }
.avatar.xl { --s: 84px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--primary-line); }

.t-gold { color: var(--prize); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sec { margin-top: 28px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 20px; line-height: 1.25; }
.sec-title::before { content: ""; align-self: center; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.sec-title small { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--text-3); }
.sec-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 2px 0 10px; margin: -12px -4px -12px 0;
  background: none; border: 0; cursor: pointer; color: var(--accent-ink); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.sec-link .ic { width: 16px; height: 16px; }
.sec-p { color: var(--text-2); font-size: 13px; margin: -6px 0 12px; }
.foot-note { color: var(--text-3); font-size: 12px; text-align: center; margin: 24px 8px 0; }

.skel { display: grid; gap: 10px; padding: 4px; }
.skel i { display: block; height: 52px; border-radius: var(--r-m); background: linear-gradient(90deg, var(--cis-silver), #fff, var(--cis-silver)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; color: var(--text-2); text-align: center; font-size: 14px; }
.empty .ic { width: 28px; height: 28px; color: var(--accent); }

/* ---------------- splash ---------------- */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(180deg, #fff 0%, var(--navy-soft) 100%);
  transition: opacity .45s ease, transform .45s ease;
}
.splash.out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.splash-in { display: grid; justify-items: center; gap: 10px; text-align: center; }
.splash-logo { width: min(260px, 70vw); animation: popIn .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.splash-mark { display: none; }
.loopmark { width: 100%; height: 100%; display: block; }
.loop-spin { transform-origin: 60px 60px; animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.splash-title { font-size: 26px; line-height: 1.3; margin-top: 14px; color: var(--heading); animation: rise .6s .15s cubic-bezier(.2, .9, .3, 1) both; }
.splash-title span { color: var(--heading); }
.splash-season { color: var(--accent-ink); font-size: 15px; font-weight: 700; animation: rise .6s .3s both; }
.splash-msg { color: var(--text-2); font-size: 13px; }
.splash-bar { width: 160px; height: 6px; border-radius: var(--r-m); background: var(--surface-3); overflow: hidden; margin-top: 12px; }
.splash-bar i { display: block; height: 100%; width: 40%; border-radius: var(--r-m); background: var(--accent); animation: bar 1.1s ease-in-out infinite; }
@keyframes bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.splash .df-btn { margin-top: 12px; }

/* ---------------- onboarding ---------------- */
.onboard {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: #fff;
  transition: opacity .3s;
}
.onboard.out { opacity: 0; }
.ob-step {
  max-width: 480px; margin: 0 auto; min-height: 100%;
  padding: calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px);
  display: flex; flex-direction: column; gap: 12px;
  animation: viewIn .35s cubic-bezier(.2, .9, .3, 1) both;
}
.ob-art { width: min(250px, 66vw); aspect-ratio: 1; margin: 0 auto -6px; animation: popIn .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.ob-art .planet { width: 100%; height: 100%; }
.ob-kicker { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ob-title { font-size: 30px; text-align: center; line-height: 1.25; color: var(--heading); }
.ob-title.sm { font-size: 24px; }
.ob-sub { text-align: center; color: var(--text-2); font-size: 15px; }
.ob-pool { text-align: center; margin-top: 4px; }
.ob-pool-label { color: var(--text-2); font-size: 13px; letter-spacing: .06em; }
.ob-pool-num { font-family: var(--f-num); font-weight: 800; font-size: clamp(40px, 13vw, 56px); line-height: 1.1; color: var(--prize); }
.ob-welcome .cd { margin: 4px auto 0; }
.ob-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.ob-fact { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); text-align: center; }
.ob-fact .ic { color: var(--accent); }
.ob-foot { margin-top: auto; padding-top: 16px; display: grid; gap: 14px; }
.ob-btns { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.ob-dots { display: flex; justify-content: center; gap: 6px; }
.ob-dots i { width: 8px; height: 8px; border-radius: var(--r-m); background: var(--line); transition: width .25s, background .25s; }
.ob-dots i.on { width: 26px; background: var(--cis-navy); }
.ob-dots i.done { background: var(--accent); }
.ob-h { font-size: 22px; margin-top: 8px; }
.ob-p { color: var(--text-2); font-size: 14px; margin-top: -6px; }
.ob-card { padding: 18px 16px; display: grid; gap: 14px; }
.ob-err { color: var(--danger); font-size: 13px; min-height: 1px; }
.ob-err:empty { display: none; }
.ob-me { display: flex; align-items: center; gap: 12px; }
.ob-me b { display: block; font-size: 18px; color: var(--heading); }
.ob-me small { color: var(--text-2); font-size: 12px; }
.hint { color: var(--text-2); font-size: 12px; }

.field { display: grid; gap: 6px; }
.field-l { font-size: 14px; color: var(--heading); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.field-l em { font-style: normal; font-size: 11px; color: var(--prize); }
.field input, .inp {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-m);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 16px/1.4 var(--f-body); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .inp:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field input::placeholder, .inp::placeholder { color: var(--text-3); opacity: 1; }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke=%2300405b stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
select.inp option { background: #fff; color: var(--text); }
textarea.inp { resize: none; min-height: 76px; }

.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.region-grid.busy { opacity: .5; pointer-events: none; }
.region-card {
  position: relative; text-align: left; cursor: pointer; min-height: 76px; padding: 12px 12px 12px 40px;
  border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  display: grid; align-content: center; gap: 2px; transition: transform .1s, border-color .15s, background .15s;
}
.region-card .ic { position: absolute; left: 12px; top: 14px; width: 20px; height: 20px; color: var(--text-3); }
.region-card b { font-size: 16px; line-height: 1.25; color: var(--heading); }
.region-card small { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.region-card:active { transform: scale(.97); }
.region-card.sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.region-card.sel .ic { color: var(--primary); }
.region-card.sel::after {
  content: ""; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.3'/%3E%3C/svg%3E") center/14px no-repeat;
}

.pledge-head { text-align: center; display: grid; justify-items: center; gap: 8px; }
.pledge-head > .ic { width: 64px; height: 64px; color: var(--cis-navy); padding: 14px; border-radius: var(--r-m); background: var(--navy-soft); box-shadow: inset 0 0 0 1.5px var(--navy-line); }
.pledge-head .ob-p { margin-top: 0; }
.pledge-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.pledge-list li { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.pledge-list li .ic { width: 40px; height: 40px; padding: 9px; border-radius: var(--r-m); background: var(--cis-silver); color: var(--cis-green); }
.pledge-list b { display: block; font-size: 16px; color: var(--heading); }
.pledge-list small { color: var(--text-2); font-size: 13px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: var(--r-m); cursor: pointer; background: var(--primary-soft); border: 2px solid var(--primary-line); margin-top: 4px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { width: 30px; height: 30px; flex: none; border-radius: var(--r-m); border: 2px solid var(--primary); background: #fff; display: grid; place-items: center; transition: background .15s, transform .15s; }
.check-box .ic { width: 20px; height: 20px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(.4); transition: .18s cubic-bezier(.2, 1.6, .4, 1); }
.check input:checked + .check-box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .check-box .ic { opacity: 1; transform: none; }
.check input:focus-visible + .check-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.check-t { font-weight: 700; font-size: 15px; color: var(--heading); }
.pledge-reward { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--prize); font-size: 13px; font-weight: 700; }
.pledge-reward .ic { width: 18px; height: 18px; }

.ob-done { align-items: center; justify-content: center; text-align: center; gap: 14px; }
.done-burst { position: relative; width: 200px; height: 200px; display: grid; place-items: center; margin-top: 20px; }
.rays { display: none; }
.big-ticket { width: 120px; height: 120px; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; background: var(--cis-ltblue); box-shadow: none;
  animation: popIn .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.big-ticket .ic { width: 70px; height: 70px; stroke-width: 1.6; }
@keyframes bob { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }
.done-got { display: grid; gap: 0; }
.done-got span { color: var(--text-2); font-size: 14px; }
.done-got b { font-family: var(--f-num); font-weight: 800; font-size: 64px; line-height: 1; color: var(--prize); }
.done-badge, .res-badge { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px 10px 10px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--navy-line); box-shadow: none; animation: rise .5s .5s both; }
.done-badge b, .res-badge b { display: block; color: var(--heading); }
.done-badge small, .res-badge small { color: var(--text-2); font-size: 12px; }
.badge-art { position: relative; width: 52px; height: 58px; flex: none; display: block; }
.badge-art svg { width: 100%; height: 100%; display: block; }
.ob-done > .df-btn { margin-top: 10px; max-width: 360px; }

/* ---------------- countdown（預設淺底；在海軍藍主視覺內反白） ---------------- */
.cd { display: grid; gap: 6px; }
.cd-label { font-size: 12px; color: var(--text-2); font-weight: 700; letter-spacing: .08em; }
.cd-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cd-box { display: grid; justify-items: center; padding: 6px 2px 4px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cd-box b { font-family: var(--f-num); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--heading); font-variant-numeric: tabular-nums; }
.cd-box small { font-size: 11px; color: var(--text-2); }
.cd-closed { color: var(--prize); font-weight: 700; }
.ob-welcome .cd { text-align: center; width: 100%; max-width: 320px; }

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--safe-t) + 8px) 16px 8px;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.tb-mark { width: 34px; height: 34px; }
.tb-me { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.tb-who { display: grid; min-width: 0; line-height: 1.25; }
.tb-who b { font-size: 16px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-region { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.tb-region .ic { width: 13px; height: 13px; color: var(--accent); }
.tb-right { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-tickets, .tb-points {
  display: inline-flex; align-items: center; gap: 5px; height: 44px; min-width: 48px; padding: 0 12px 0 6px; border-radius: var(--r-s); cursor: pointer; border: 0;
}
.tb-tickets { color: var(--prize); background: var(--prize-soft); box-shadow: inset 0 0 0 1.5px var(--prize-line); }
.tb-tickets .ic { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--prize-fill); color: var(--prize-fill-ink); }
.tb-points { color: var(--accent-ink); background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary-line); }
.tb-points .ic { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--primary); color: #fff; }
.tb-tickets b, .tb-points b { font-size: 18px; line-height: 1; }
.tb-tickets:active, .tb-points:active { transform: translateY(1px); }
.tb-points.bump, .tb-tickets.bump { animation: bump .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------------- tab bar ---------------- */
.tabbar {
  position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; max-width: 520px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px 8px calc(4px + var(--safe-b));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.tab-ind {
  --i: 0; position: absolute; top: 0; left: 8px; height: 3px; width: calc((100% - 16px) / 5);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
  pointer-events: none;
}
.tab-ind::before { content: ""; position: absolute; inset: 0 22%; border-radius: 0 0 3px 3px; background: var(--accent); }
.tab {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: 56px;
  background: none; border: 0; cursor: pointer; color: var(--text-3); font-size: 12px; font-weight: 700; font-family: var(--f-body);
  -webkit-tap-highlight-color: transparent; transition: color .2s;
}
.tab .ic { width: 24px; height: 24px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tab.on { color: var(--heading); }
.tab.on .ic { color: var(--primary); }
.tab:active .ic { transform: scale(.88); }

/* ---------------- HERO：品牌規範 §5.4「G 文字疊圖」（V2BR）----------------
   滿版素材庫實拍照片（全興廠，04_Photo_Site廠區）＋大豐藍單色由下往上壓暗；左上一條大豐綠小標籤（畫面唯一獨立色塊）；
   白色粗體標題左對齊；只有一個重點（獎金數字）用亮綠；白色 Logo 放左下（純白版 SVG 到位前隱藏，見 df-core.css SWAP POINT）。
   不用地球插圖、回收三箭頭、放射光暈、漂浮圓形。 */
.hero {
  position: relative; overflow: hidden; isolation: isolate; margin: 4px -16px 0; color: #fff;
  padding: 0 22px 22px; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end;
  /* 壓暗層以照片高度定位：上方 ~45% 保留照片原色（主體＝廠房牆面標誌），往下漸深到 95% 再接純大豐藍 */
  background:
    linear-gradient(180deg, rgba(0, 64, 91, 0) 0, rgba(0, 64, 91, 0) min(34vw, 177px), rgba(0, 64, 91, .80) min(58vw, 302px), rgba(0, 64, 91, .95) min(78vw, 406px), rgba(0, 64, 91, .95) 100%),
    url("../img/photo/site-quanxing.jpg") center top / 100% auto no-repeat,
    var(--cis-blue);
}
.hero-tag { position: absolute; z-index: 1; left: 0; top: 0; max-width: 60%; padding: 9px 16px 9px 22px; background: var(--cis-green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; }
.hero-top { position: relative; z-index: 1; display: grid; gap: 6px; }
.hero-title { display: grid; gap: 6px; line-height: 1.12; }
.hero-t1 { font-size: 15px; font-weight: 400; color: var(--cis-silver); letter-spacing: .08em; }
.hero-t2 { font-size: clamp(32px, 10vw, 42px); font-weight: 700; letter-spacing: .04em; color: #fff; }
.hero-pool { position: relative; z-index: 1; margin-top: 16px; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(238, 238, 239, .35); }
.hero-pool-l { font-size: 12px; font-weight: 700; color: var(--cis-silver); letter-spacing: .16em; }
.hero-pool b { font-family: var(--f-num); font-weight: 800; font-size: clamp(40px, 12.4vw, 54px); line-height: 1.05; letter-spacing: -.01em; color: var(--cis-ltgreen); }
.hero-cd { position: relative; z-index: 1; margin-top: 14px; }
.hero .cd-label { color: var(--cis-silver); font-weight: 700; letter-spacing: .16em; }
.hero .cd-row { gap: 0; }
.hero .cd-box { background: none; box-shadow: none; border-radius: 0; justify-items: start; padding: 2px 0 2px 12px; border-left: 1px solid rgba(238, 238, 239, .35); }
.hero .cd-box:first-child { padding-left: 0; border-left: 0; }
.hero .cd-box b { color: #fff; font-weight: 700; }
.hero .cd-box small { color: var(--cis-silver); }
.hero .cd-closed { color: var(--cis-ltgreen); }
.hero-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cis-silver); margin-top: 10px; }
.hero-note .pill { height: 22px; font-size: 11px; }
.hero .pill-sky, .hero .pill-gold, .hero .pill-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.hero-cta { position: relative; z-index: 1; width: 100%; margin-top: 18px; }
.hero-cta .ic { width: 20px; height: 20px; }
.hero-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.hero-foot .cis-logo { --logo-w: 116px; width: var(--logo-w); }
.hero-slogan { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--cis-silver); margin-left: auto; }
@media (min-width: 521px) { .hero { margin-left: 0; margin-right: 0; } }

/* ---------------- missions ---------------- */
.missions { margin-top: 16px; padding: 14px 16px 10px; }
.ms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-title { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.ms-title .ic { color: var(--accent); }
.ms-meter { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ms-meter b { font-size: 18px; color: var(--prize); }
.ms-cap { height: 6px; border-radius: var(--r-m); background: var(--surface-3); overflow: hidden; margin: 10px 0 4px; }
.ms-cap i { display: block; height: 100%; border-radius: 0; background: var(--prize); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-list li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.ms-list li:first-child { border-top: 0; }
.ms-chk { width: 30px; height: 30px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line); }
.ms-chk .ic { width: 18px; height: 18px; }
.ms-list li.done .ms-chk { background: var(--primary); color: #fff; box-shadow: none; }
.ms-list li.done .ms-chk .ic { stroke-width: 3; }
.ms-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ms-body b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ms-list li.done .ms-body b { color: var(--text-2); }
.ms-prog { height: 6px; border-radius: var(--r-m); background: var(--surface-3); overflow: hidden; }
.ms-prog i { display: block; height: 100%; border-radius: var(--r-m); background: var(--accent); }
.ms-side { display: grid; justify-items: end; gap: 2px; flex: none; }
.ms-side > .num { font-size: 16px; color: var(--text-2); }
.ms-rw { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--prize); }
.ms-rw .ic { width: 15px; height: 15px; }
.ms-note { font-size: 12px; color: var(--text-2); padding: 4px 0 6px; }

/* ---------------- game cards（封面＝遊戲美術，保留深色；卡片本體白底） ---------------- */
.glist-lg { display: grid; gap: 16px; }
.glist-md { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard {
  --ac: var(--green);
  position: relative; border-radius: var(--r-l); overflow: hidden; cursor: pointer; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: none;
  transition: transform .12s ease, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.gcard:active { transform: scale(.98); }
.gcard.locked { cursor: default; }
.gcard.locked .gc-cover { filter: saturate(.5); }
.gcard.locked:active { transform: none; }
.gc-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--game-tile); }
.gc-cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gc-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 64, 91, .9) 0%, rgba(0, 64, 91, .5) 28%, rgba(0, 64, 91, 0) 56%), linear-gradient(180deg, rgba(0, 64, 91, .4), transparent 28%); }
.gc-title { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; line-height: 1.15; }
.gc-title h3 { font-size: 26px; color: #fff; }
.gc-title small { font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .92; }
.gc-title.sm { left: 12px; right: 10px; bottom: 8px; }
.gc-title.sm h3 { font-size: 18px; }
.gc-title.sm small { font-size: 10.5px; letter-spacing: .08em; }
.gc-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 副標只一行（V2AR2） */
.gc-title.lg h3 { font-size: 30px; }
.gc-pool { position: absolute; top: 12px; left: 12px; display: grid; line-height: 1.1; padding: 6px 12px 7px; border-radius: var(--r-m);
  background: var(--cis-blue); box-shadow: none; }
.gc-pool small { font-size: 11px; color: var(--cis-silver); font-weight: 700; }
.gc-pool b { font-size: 20px; color: var(--cis-ltgreen); }
.gc-first { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px; border-radius: var(--r-s);
  background: var(--prize-fill); color: var(--prize-fill-ink); font-size: 14px; font-weight: 700; box-shadow: none; }
.gc-first .ic { width: 16px; height: 16px; }
.gc-honor { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 6px; border-radius: var(--r-s);
  background: var(--cis-blue); color: #fff; font-size: 11px; font-weight: 700; box-shadow: none; }
.gc-honor .ic { width: 13px; height: 13px; color: var(--cis-ltgreen); }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; }
.gc-foot.sm { padding: 10px 12px 12px; flex-wrap: wrap; gap: 6px; }
.gc-stat { display: flex; gap: 18px; min-width: 0; }
.gc-kv { display: grid; gap: 3px; min-width: 0; }
.gc-kv small { font-size: 11.5px; color: var(--text-2); font-weight: 700; white-space: nowrap; }
.gc-kv b { font-size: 20px; line-height: 1; color: var(--heading); }
.gc-foot.sm .gc-kv { display: flex; align-items: baseline; gap: 6px; }
.gc-foot.sm .gc-kv b { font-size: 17px; }
.gc-cta { padding: 10px 18px; font-size: 17px; flex: none; }
.gc-cta .ic { width: 18px; height: 18px; }
.gc-lock { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.gc-lock .ic { width: 18px; height: 18px; color: var(--text-3); }
.pips { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.pips i { width: 13px; height: 9px; border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.pips i.on { background: var(--accent); box-shadow: none; }

.daily { --ac: var(--sky); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-l); cursor: pointer; min-height: 84px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--ac); transition: transform .12s; }
.daily:active { transform: scale(.98); }
.daily.done { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--accent); }
.daily.locked { cursor: default; filter: saturate(.5); }
.daily-ic { width: 56px; height: 56px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; overflow: hidden; color: var(--info);
  background: var(--game-tile); }
.daily-ic svg { width: 100%; height: 100%; }
.daily-ic .ic { width: 30px; height: 30px; }
.daily-body { flex: 1; min-width: 0; }
.daily-body h3 { font-size: 18px; }
.daily-body p { font-size: 13px; color: var(--text-2); }
.daily-side { flex: none; color: var(--text-3); }
.daily-btn { padding: 10px 16px; font-size: 16px; }
.daily-ok { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.daily-ok .ic { stroke-width: 3; }

/* region teaser + rows */
.region-teaser { padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; }
.rt-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.rt-row.me .rt-name b::after { content: "我的場次"; margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: var(--r-m); background: var(--primary-soft); color: var(--accent-ink); vertical-align: 2px; }
.medal { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800;
  background: var(--cis-ltgreen); color: var(--cis-blue); box-shadow: none; }
.r2 .medal, .t2 > .rk { background: var(--cis-blue); color: #fff; box-shadow: none; }
.r3 .medal, .t3 > .rk { background: var(--cis-ltblue); color: #fff; box-shadow: none; }
.rt-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rt-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rt-name b { font-size: 15.5px; color: var(--heading); }
.rt-name small { color: var(--text-2); font-size: 12px; }
.rt-bar { height: 7px; border-radius: var(--r-m); background: var(--surface-3); overflow: hidden; }
.rt-bar i { display: block; height: 100%; border-radius: 0; background: var(--cis-blue); }
.rt-val { display: grid; justify-items: end; line-height: 1.1; flex: none; }
.rt-val b { font-size: 20px; color: var(--navy-ink); }
.rt-val small { font-size: 11px; color: var(--text-2); }
.rt-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); padding: 6px 0 2px; border-top: 1px solid var(--line); margin-top: 4px; }

/* thanks cards */
.thanks-ticker, .feed { display: grid; gap: 10px; }
.tcard { position: relative; padding: 14px 14px 14px 18px; border-radius: var(--r-m); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: none; animation: rise .4s both; cursor: default; }
.thanks-ticker .tcard { cursor: pointer; }
.tcard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--prize); }
.tcard.tome { border-color: var(--prize-line); background: var(--prize-soft); }
.tc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tc-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-names { min-width: 0; }
.tc-line { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 14.5px; line-height: 1.3; color: var(--text); }
.tc-line b.to { color: var(--navy-ink); }
.tc-arrow { width: 16px !important; height: 16px !important; color: var(--text-3); }
.tc-names small { color: var(--text-2); font-size: 12px; }
.tc-body { margin-top: 8px; }
.tc-body h4 { font-size: 16px; color: var(--heading); }
.tc-body p { color: var(--text-2); font-size: 14px; margin-top: 2px; word-break: break-word; }
.tcard.compact { padding: 12px 12px 12px 16px; }
.tcard .pill.abs { top: auto; bottom: 12px; }

.safety { margin-top: 26px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 4px 0 0 var(--cis-blue); }
.safety .ic { width: 34px; height: 34px; padding: 6px; border-radius: var(--r-m); background: var(--cis-blue); color: #fff; }
.safety b { display: block; font-size: 14.5px; color: var(--heading); line-height: 1.35; }
.safety small { color: var(--text-2); font-size: 12px; }
/* U74 家庭同樂（大豐綠；緊接在工安提醒上方，間距縮小） */
.safety.family { box-shadow: inset 4px 0 0 var(--cis-green, #00965e); }
.safety.family .ic { background: var(--cis-green, #00965e); }
.safety.family + .safety { margin-top: 10px; }

/* ---------------- sheet ---------------- */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 64, 91, .45); opacity: 0; transition: opacity .25s; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  border-radius: var(--r-m) var(--r-m) 0 0; background: var(--page); color: var(--text);
  box-shadow: none;
  padding-bottom: calc(18px + var(--safe-b));
}
.sheet.open .sheet-panel { transform: translate(-50%, 0); }
.sheet-grab { position: absolute; z-index: 4; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: var(--r-m); background: var(--cis-gray-400); }
.sheet-x { position: absolute; z-index: 5; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-x:active { transform: scale(.92); }
.picker { padding: 34px 18px 8px; display: grid; gap: 12px; }
.sheet-h { font-size: 22px; padding-right: 52px; }
.sheet-p { color: var(--text-2); font-size: 14px; }

.intro { --ac: var(--green); }
.intro-cover { aspect-ratio: 16 / 9; }
.intro-cover .gc-scrim { background: linear-gradient(0deg, rgba(0, 64, 91, .9) 0%, rgba(0, 64, 91, .45) 32%, rgba(0, 64, 91, 0) 60%); }
.intro-body { padding: 12px 18px 6px; display: grid; gap: 12px; }
.intro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intro-quote, .res-line { position: relative; margin: 0; padding: 12px 14px 12px 44px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--accent); }
.intro-quote .ic, .res-line .ic { position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; color: var(--accent); }
.intro-quote p, .res-line p { font-size: 15.5px; line-height: 1.55; color: var(--text); }
.intro-tag { color: var(--text-2); }
.intro-h { font-size: 15px; color: var(--heading); margin-top: 4px; }
.intro-h.hrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.intro-h.hrow b { font-size: 20px; color: var(--prize); }
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.howto li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.howto li > span { width: 30px; height: 30px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff;
  background: var(--cis-navy); }
.howto p { font-size: 14.5px; color: var(--text); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 6px 10px; }
.slots li { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px 4px 4px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.slots .rk { width: 26px; height: 26px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; font-size: 14px; background: var(--surface-3); color: var(--text-2); }
.slots b { font-size: 16px; margin-left: auto; color: var(--text); }
.slots .t1 { background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line); }
.slots .t1 .rk { background: var(--cis-ltgreen); color: var(--cis-blue); }
.slots .t1 b { color: var(--prize); }
.slots .t2 .rk { background: var(--cis-blue); color: #fff; }
.slots .t3 .rk { background: var(--cis-ltblue); color: #fff; }
.intro-honor { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); background: var(--honor-soft); box-shadow: inset 0 0 0 1px var(--honor-line); font-size: 14px; color: var(--text); }
.intro-honor .ic { color: var(--honor); }
.intro-honor.sky { background: var(--info-soft); box-shadow: inset 0 0 0 1px var(--info-line); }
.intro-honor.sky .ic { color: var(--info); }
.modes { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.mode-opt { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px; min-height: 96px; border-radius: var(--r-m); cursor: pointer; color: var(--text);
  background: var(--surface); border: 2px solid var(--line); transition: border-color .15s, background .15s, transform .1s; }
.mode-opt:active { transform: scale(.97); }
.mode-t { display: flex; align-items: center; gap: 6px; }
.mode-t .ic { width: 18px; height: 18px; color: var(--text-3); }
.mode-t b { font-size: 16px; color: var(--heading); }
.mode-opt small { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.mode-opt.sel { border-color: var(--primary); background: var(--primary-soft); }
.mode-opt.sel .mode-t .ic { color: var(--primary); }
.mode-opt:nth-child(2).sel { border-color: var(--cis-navy); background: #fff; }
.mode-opt:nth-child(2).sel .mode-t .ic { color: var(--cis-navy); }
.mode-opt.off { background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.mode-opt.off small { color: var(--danger); }
.intro-note { font-size: 13px; color: var(--info); }
.intro-start { font-size: 20px; padding: 16px; margin-top: 2px; }
.intro-start .ic { width: 20px; height: 20px; }
.intro-safe { text-align: center; font-size: 12px; color: var(--text-2); }
/* 介紹 sheet V2AR2：底部固定「選模式＋開始」列、關閉鈕改半透明海軍藍圓（不搶封面） */
.sheet-panel.sheet-intro { padding-bottom: 0; }
.sheet-intro .sheet-x { top: 10px; right: 10px; width: 40px; height: 40px; background: rgba(0, 64, 91, .55); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.sheet-intro .sheet-x .ic { width: 20px; height: 20px; }
.sheet-intro .sheet-grab { background: rgba(255, 255, 255, .75); }
.intro-body { padding-bottom: 14px; }
.intro-foot { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px; padding: 10px 16px calc(10px + var(--safe-b));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }
.intro-foot .modes { gap: 8px; }
.intro-foot .mode-opt { min-height: 0; gap: 2px; padding: 8px 10px; border-radius: var(--r-m); }
.intro-foot .mode-t b { font-size: 15px; }
.intro-foot .mode-opt small { font-size: 12px; line-height: 1.35; }
.intro-foot .mode-opt .pips { position: absolute; top: 11px; right: 10px; }
.intro-foot .intro-start { padding: 13px; font-size: 19px; margin: 0; }

/* ---------------- play layer（遊戲本身，保持深色） ---------------- */
.playlayer { position: fixed; inset: 0; z-index: 80; background: var(--bg-0); color: var(--fg); color-scheme: dark; }
#stage { position: absolute; inset: 0; }
/* 載入層／結算中（V2AR2）：CIS 海軍藍漸層＋白字，不再是 80% 黑 */
.play-loading, .play-saving { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; text-align: center; }
.play-loading { background: var(--cis-blue); }
.play-saving { background: rgba(0, 64, 91, .94); }
.play-loading .loopmark, .play-saving .loopmark { width: 72px; height: 72px; }
.play-loading b { margin-top: 6px; font-size: 20px; letter-spacing: .04em; }
.play-loading p, .play-saving p { font-size: 14px; color: var(--cis-navy-100); }
body.is-playing { overflow: hidden; }
/* 進出遊戲轉場（≤ 300ms；prefers-reduced-motion 時不播，見本檔底部） */
.playlayer:not([hidden]) { animation: playIn .28s cubic-bezier(.4, 0, .2, 1) backwards; }
@keyframes playIn { from { clip-path: circle(28px at var(--ox, 50%) var(--oy, 85%)); } to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 85%)); } }
.lobby:not([hidden]) { animation: lobbyIn .24s ease-out backwards; }
@keyframes lobbyIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- result（結算頁：淺底） ---------------- */
.result { --ac: var(--green); position: fixed; inset: 0; z-index: 85; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; color: var(--text);
  background: var(--page); }
.res-in { max-width: 460px; margin: 0 auto; padding: calc(var(--safe-t) + 16px) 18px calc(var(--safe-b) + 22px); display: grid; gap: 12px; animation: viewIn .35s both; }
.res-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--heading); }
.res-ic { width: 34px; height: 34px; border-radius: var(--r-m); overflow: hidden; flex: none; }
.res-ic:empty { display: none; }
.res-ic svg { width: 100%; height: 100%; display: block; }
.res-score { position: relative; display: grid; justify-items: center; padding: 18px 0 8px; isolation: isolate; }
.res-score .rays { inset: -30% 0; z-index: -1; }
.res-score small { font-weight: 700; letter-spacing: .14em; font-size: 13px; color: var(--text-2); }
.res-score b { font-family: var(--f-num); font-weight: 800; font-size: clamp(64px, 22vw, 92px); line-height: 1; color: var(--heading);
  animation: popIn .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.res-nb { margin-top: 8px; padding: 6px 18px; border-radius: var(--r-s); font-size: 20px; font-weight: 800; color: var(--cis-blue);
  background: var(--cis-ltgreen); box-shadow: none;
  animation: stamp .6s .6s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }
.res-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kv { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.kv small { font-size: 12px; color: var(--text-2); font-weight: 700; }
.kv b { font-size: 22px; line-height: 1.1; color: var(--heading); }
.res-prize { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-m); animation: rise .5s .4s both;
  background: var(--prize-soft); box-shadow: inset 0 0 0 1.5px var(--prize-line); }
.res-prize > .ic { width: 38px; height: 38px; padding: 7px; border-radius: var(--r-m); background: var(--prize-fill); color: var(--prize-fill-ink); }
.res-prize b { display: block; font-size: 16px; color: var(--heading); line-height: 1.35; }
.res-prize small { color: var(--text-2); font-size: 12px; }
.res-prize.plum { background: var(--honor-soft); box-shadow: inset 0 0 0 1.5px var(--honor-line); }
.res-prize.plum > .ic { background: var(--honor); color: #fff; }
.res-prize.plum b { color: var(--heading); }
.res-tickets { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); animation: rise .5s .3s both; }
.res-tickets b { display: block; font-size: 16px; color: var(--heading); }
.res-tickets small { color: var(--text-2); font-size: 12px; }
.res-tk-ic { display: flex; flex: none; }
.res-tk-ic .tk { width: 40px; height: 40px; margin-right: -14px; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; background: var(--cis-ltblue); box-shadow: none; animation: tkPop .5s cubic-bezier(.2, 1.8, .4, 1) both; }

.res-tk-ic .tk:last-child { margin-right: 0; }
.res-tk-ic .tk .ic { width: 26px; height: 26px; }
.res-tickets.zero .tk { filter: grayscale(1); opacity: .6; }
@keyframes tkPop { 0% { opacity: 0; transform: translateY(-30px) scale(.4) rotate(-30deg); } 100% { opacity: 1; } }
.res-badges { display: grid; gap: 8px; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--info-soft); box-shadow: inset 0 0 0 1px var(--info-line); color: var(--text); }
.notice > .ic { color: var(--info); margin-top: 2px; }
.notice b { display: block; color: var(--heading); }
.notice small { color: var(--text-2); font-size: 13px; }
.res-btns { display: grid; gap: 10px; margin-top: 6px; }
.res-btns .df-btn.block { font-size: 19px; padding: 15px; }
.res-btns .ic { width: 20px; height: 20px; }

/* ---- 結算頁 V2AR2：遊戲封面、分數卡、本局戰績、摘要列、底部固定按鈕 ---- */
.result:not([hidden]) { animation: resIn .26s ease-out backwards; }
@keyframes resIn { from { opacity: 0; } to { opacity: 1; } }
.res-in.has-hero { padding-top: 0; padding-bottom: 0; gap: 12px; }
.res-hero { position: relative; margin: 0 -18px; height: calc(var(--safe-t) + 150px); overflow: hidden; background: var(--cis-navy); }
.res-hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.res-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 64, 91, .9) 0%, rgba(0, 64, 91, .45) 42%, rgba(0, 64, 91, 0) 72%), linear-gradient(90deg, rgba(0, 64, 91, .72) 0%, rgba(0, 64, 91, .35) 45%, rgba(0, 64, 91, 0) 68%), linear-gradient(180deg, rgba(0, 64, 91, .38), rgba(0, 64, 91, 0) 34%); }
.res-hero-t { position: absolute; left: 18px; right: 18px; bottom: 40px; display: flex; align-items: center; gap: 10px; color: #fff; }
.res-hero-t .res-ic { width: 42px; height: 42px; border-radius: var(--r-m); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.res-hero-n { min-width: 0; display: grid; line-height: 1.15; }
.res-hero-n b { font-size: 22px; font-weight: 800; color: #fff; }
.res-hero-n small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-mode { position: absolute; top: calc(var(--safe-t) + 12px); right: 12px; box-shadow: none; }
.res-hero .pill-ghost { background: rgba(255, 255, 255, .92); color: var(--navy-ink); }
.res-card { position: relative; z-index: 1; margin-top: -30px; display: grid; gap: 10px; padding: 12px 14px 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.res-card .res-score { padding: 4px 0 2px; }
.res-card .res-score b { font-size: clamp(56px, 18vw, 80px); }
.res-score > small, .res-score > b { order: 0; }
.res-score .res-nb { order: 2; margin-top: 10px; }
.res-score::after { content: ""; order: 1; width: 72px; height: 4px; margin-top: 6px; border-radius: var(--r-m); background: var(--accent); transform: scaleX(0); }
.res-score.land::after { animation: resSweep .42s ease-out forwards; }
.res-score.land > b { animation: resLand .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes resSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes resLand { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
.res-score.muted > b { color: var(--text-3); font-size: clamp(44px, 14vw, 60px); }
.res-score.muted::after { background: var(--line-strong); }
.res-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--line); }
.res-stats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-stats.n1 { grid-template-columns: 1fr; }
.rs-tile { position: relative; display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 0 4px; text-align: center; animation: rise .45s backwards; }
.rs-tile + .rs-tile::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.rs-v { display: flex; align-items: baseline; justify-content: center; gap: 2px; max-width: 100%; min-width: 0; }
.rs-v b { min-width: 0; font-size: 22px; line-height: 1.15; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tile.txt .rs-v { min-height: 25px; align-items: center; }
.rs-tile.txt .rs-v b { font-size: 16px; white-space: normal; line-height: 1.2; }
.rs-v small { font-size: 12px; font-weight: 700; color: var(--text-2); }
.rs-l { font-size: 12px; font-weight: 700; color: var(--text-2); }
.res-in.has-hero .res-kv { gap: 0; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.res-in.has-hero .res-kv .kv { position: relative; padding: 8px 4px; border-radius: 0; background: none; box-shadow: none; }
.res-in.has-hero .res-kv .kv + .kv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.res-in.has-hero .res-kv .kv b { font-size: 19px; }
.kv-new { display: inline-block; vertical-align: 3px; margin-left: 4px; padding: 1px 5px; border-radius: var(--r-m); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1.4;
  background: var(--prize-fill); color: var(--prize-fill-ink); }
.res-btns.bar { position: sticky; bottom: 0; z-index: 5; margin: 2px -18px 0; padding: 14px 18px calc(var(--safe-b) + 12px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px;
  background: var(--page); border-top: 1px solid var(--line); }
.res-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-btns.bar .df-btn { min-height: 52px; padding: 10px 6px; font-size: 16px; white-space: nowrap; }
.res-btns.bar .res-again { font-size: 18px; }

/* ---------------- page heads ---------------- */
.page-head { position: relative; padding: 10px 2px 14px; }
.page-head h1 { font-size: 26px; line-height: 1.25; }
.page-head p { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }

/* ---------------- rank ---------------- */
#v-rank { padding-bottom: 84px; }
.segs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 12px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
.segs::-webkit-scrollbar { display: none; }
.seg { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 12px; border-radius: var(--r-s); border: 0; cursor: pointer; scroll-snap-align: start;
  background: var(--surface); color: var(--text-2); font-family: var(--f-body); font-size: 15px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .1s; }
.seg .ic { width: 17px; height: 17px; }
.seg:active { transform: scale(.95); }
.seg.on { background: var(--cis-navy); color: #fff; box-shadow: none; }
.seg.prize.on { background: var(--prize-fill); color: var(--prize-fill-ink); box-shadow: none; }
.board.enter { animation: viewIn .3s both; }
.demo-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--r-m); font-size: 12.5px; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.demo-note .ic { width: 16px; height: 16px; color: var(--info); margin-top: 2px; }
.board-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.board-info .ic { width: 18px; height: 18px; color: var(--prize); }
.board-info small { margin-left: auto; color: var(--text-2); }
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 18px 0 10px; }
.pod { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; min-width: 0; }
.pod-crown { color: var(--cis-green); margin-bottom: -6px; animation: bob2 2.4s ease-in-out infinite; }
.pod-crown .ic { width: 30px; height: 30px; }
@keyframes bob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pod-av { --s: 56px; }
.pod.p1 .pod-av { --s: 72px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cis-ltgreen); }
.pod.p2 .pod-av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cis-blue); }
.pod.p3 .pod-av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cis-ltblue); }
.pod-av.ghost { background: var(--surface-3); color: var(--text-3); box-shadow: none; }
.pod-name { font-size: 14px; font-weight: 700; color: var(--heading); margin-top: 6px; max-width: 100%; line-height: 1.3; word-break: break-all; }
.pod-reg { font-size: 11.5px; color: var(--text-2); }
.pod-score { font-size: 20px; color: var(--text); }
.pod.p1 .pod-score { color: var(--prize); font-size: 23px; }
.pod-step { width: 100%; display: grid; justify-items: center; align-content: start; gap: 0; padding-top: 8px; margin-top: 6px; border-radius: var(--r-m) var(--r-m) var(--r-m) var(--r-m); }
.pod-step > span { font-family: var(--f-num); font-weight: 800; font-size: 30px; line-height: 1; color: inherit; }
.pod-step small { font-size: 12.5px; font-weight: 700; color: inherit; margin-top: 2px; }
.pod.p1 .pod-step { height: 98px; background: var(--cis-ltgreen); color: var(--cis-blue); }
.pod.p2 .pod-step { height: 74px; background: var(--cis-blue); color: #fff; }
.pod.p3 .pod-step { height: 58px; background: var(--cis-ltblue); color: #fff; }
.pod.empty .pod-step { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.pod.empty .pod-step > span, .pod.empty .pod-step small { color: var(--text-2); }
.pod.me .pod-name::after { content: "我"; margin-left: 4px; font-size: 10px; padding: 1px 5px; border-radius: var(--r-m); background: var(--primary); color: #fff; vertical-align: 2px; }
.rows, .rrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.row .rk { width: 30px; flex: none; text-align: center; font-size: 17px; color: var(--text-2); }
.row-n { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.row-n b { font-weight: 700; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.row-n small { color: var(--text-2); font-size: 12px; }
.row-r { display: grid; justify-items: end; line-height: 1.15; flex: none; }
.row-r b { font-size: 19px; color: var(--heading); }
.row-r .tag { font-size: 12px; font-weight: 700; color: var(--prize); }
.row.me { background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary); }
.mybar { position: fixed; z-index: 25; left: 0; right: 0; margin: 0 auto; bottom: calc(76px + var(--safe-b)); width: calc(100% - 24px); max-width: 496px;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: var(--r-m); color: #fff;
  background: var(--cis-navy);
  box-shadow: none; animation: rise .35s both; }
.mb-t { flex: 1; min-width: 0; line-height: 1.2; }
.mb-t small { font-size: 11.5px; color: var(--cis-silver); font-weight: 700; }
.mb-l { display: flex; align-items: baseline; gap: 8px; }
.mb-l b { font-size: 22px; color: #fff; }
.mb-l span { font-size: 15px; color: var(--cis-silver); }
.mb-none { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.mb-go { width: 48px; height: 48px; padding: 0; border-radius: var(--r-m); flex: none; }
.mb-go .ic { width: 20px; height: 20px; }
.rrow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rrow > .rk { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--surface-3); color: var(--text-2); }
.rrow.t1 > .rk { background: var(--cis-ltgreen); color: var(--cis-blue); box-shadow: none; }
.rrow.me { box-shadow: inset 0 0 0 1.5px var(--primary); background: var(--primary-soft); }
.rr-b { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rr-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rr-n b { font-size: 16px; color: var(--heading); }
.rr-n small { color: var(--text-2); font-size: 12px; }
.rr-s { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); }

/* ---------------- thanks page ---------------- */
.thanks-head { padding-right: 76px; }
.thanks-hero-ic { position: absolute; right: 4px; top: 8px; width: 60px; height: 60px; border-radius: var(--r-m); display: grid; place-items: center; transform: rotate(8deg);
  background: var(--primary); color: #fff; box-shadow: none; animation: bob 3s ease-in-out infinite; }
.thanks-hero-ic .ic { width: 34px; height: 34px; }
.composer { padding: 16px; display: grid; gap: 10px; }
.comp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.comp-h h2 { font-size: 19px; }
.comp-tk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--prize); }
.comp-tk .ic { width: 16px; height: 16px; }
.comp-l { font-size: 14px; font-weight: 700; color: var(--heading); margin-top: 4px; }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl { position: relative; display: grid; align-content: start; gap: 4px; text-align: left; padding: 10px 12px 10px; min-height: 76px; border-radius: var(--r-m); cursor: pointer; color: var(--text);
  background: var(--surface); border: 2px solid var(--line); transition: border-color .15s, background .15s, transform .1s; }
.tpl:active { transform: scale(.97); }
.tpl .pill { justify-self: start; height: 20px; font-size: 11px; padding: 0 8px; }
.tpl b { font-size: 15px; line-height: 1.3; color: var(--heading); }
.tpl small { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.tpl.sel { border-color: var(--primary); background: var(--primary-soft); }
.tpl.sel::after { content: ""; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.3'/%3E%3C/svg%3E") center/14px no-repeat; }
.tpl-preview { position: relative; padding: 12px 14px 12px 42px; border-radius: var(--r-m); background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line); }
.tpl-preview .ic { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--prize); }
.tpl-preview p { font-size: 15px; line-height: 1.55; color: var(--text); }
.tpl-preview.pop { animation: rise .3s both; }
.comp-who { display: grid; gap: 8px; }
.ac { position: relative; }
.ac-list { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); display: grid; padding: 6px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ac-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: var(--r-m); background: none; cursor: pointer; text-align: left; color: var(--text); }
.ac-item:active, .ac-item:hover { background: var(--surface-2); }
.ta-wrap { position: relative; }
.ta-cnt { position: absolute; right: 12px; bottom: 8px; font-size: 13px; color: var(--text-2); pointer-events: none; }
.composer .df-btn .ic { width: 20px; height: 20px; }

/* ---------------- prize page ---------------- */
.prize-hero { position: relative; overflow: hidden; margin-top: 6px; padding: 22px 18px 18px; border-radius: var(--r-xl); text-align: center; display: grid; gap: 2px; color: #fff;
  background: var(--grad-brand);
  box-shadow: none; }

.prize-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.prize-hero small { position: relative; color: var(--cis-silver); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.prize-hero b { position: relative; font-family: var(--f-num); font-weight: 800; font-size: clamp(44px, 14vw, 60px); line-height: 1.1; color: var(--cis-ltgreen); }
.prize-hero p { position: relative; color: var(--cis-silver); font-size: 13px; }
.my-tickets { margin-top: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.mt-l { display: flex; align-items: center; gap: 12px; }
.mt-ic { width: 48px; height: 48px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; background: var(--cis-ltblue); }
.mt-ic .ic { width: 30px; height: 30px; }
.mt-l small, .mt-r small { display: block; font-size: 12px; color: var(--text-2); font-weight: 700; }
.mt-l b { font-size: 26px; line-height: 1.1; color: var(--heading); }
.mt-r { text-align: right; }
.mt-r b { font-size: 26px; line-height: 1.1; color: var(--info); }
.mt-note { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); }
/* 兩層抽獎（V2T）：本期進度、年度區塊用大豐綠區分 */
.mt-week { grid-column: 1 / -1; }
.mt-week p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); }
.mt-week p b { font-size: 15px; color: var(--heading); }
.mt-week .ms-cap { margin: 6px 0 0; }
.lot-zone > .card + .card { margin-top: 10px; }
.lot-zone .my-tickets { margin-top: 0; }
.lot-annual .mt-ic { color: #fff; background: var(--cis-green); }
.lot-annual .mt-week .ms-cap i { background: var(--accent); }
.lot-annual .lot-row.l1 { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-line); }
.lot-annual .lot-row.l1 span { color: var(--accent-ink); }
.lot-note { font-size: 12px; color: var(--text-3); }
.pool-card { --ac: var(--green); padding: 14px; margin-bottom: 12px; display: grid; gap: 12px; }
.pool-h { display: flex; align-items: center; gap: 10px; }
.pool-ic { width: 42px; height: 42px; flex: none; border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center; background: var(--game-tile); color: var(--ac); }
.pool-ic svg { width: 100%; height: 100%; }
.pool-ic .ic { width: 24px; height: 24px; }
.pool-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pool-t b { font-size: 17px; color: var(--heading); }
.pool-t small { font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--ac-ink); text-transform: uppercase; }
.pool-amt { font-size: 22px; flex: none; color: var(--prize); }
.honor-list { padding: 4px 14px; }
.hl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.hl-row:first-child { border-top: 0; }
.hl-row > .ic { width: 36px; height: 36px; padding: 8px; border-radius: var(--r-m); background: var(--honor-soft); color: var(--honor); }
.hl-row b { display: block; font-size: 15.5px; color: var(--heading); }
.hl-row small { color: var(--text-2); font-size: 13px; }
.lottery { padding: 14px; display: grid; gap: 10px; }
.lot-d { font-size: 13px; color: var(--text-2); }
.lot-tbl { display: grid; gap: 6px; }
.lot-row { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lot-row b { font-size: 16px; color: var(--heading); }
.lot-row span { font-size: 20px; color: var(--text); }
.lot-row small { font-size: 16px; color: var(--text-2); text-align: right; }
.lot-row.l1 { background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line); }
.lot-row.l1 span { color: var(--prize); }
.earn { list-style: none; margin: 0; padding: 4px 14px; }
.earn li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.earn li:first-child { border-top: 0; }
.earn li > .ic { color: var(--accent); }
.earn li span { flex: 1; }
.earn li b { font-size: 19px; color: var(--prize); white-space: nowrap; }
.earn li.cap { color: var(--text-2); font-size: 13px; }
.earn li.cap > .ic { color: var(--info); }
.rules { margin: 0; padding: 14px 16px 14px 36px; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.rules li::marker { font-weight: 800; color: var(--accent-ink); }
.disclaimer { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-m); font-size: 13px; text-align: center; color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }

/* ---------------- me page ---------------- */
.profile { margin-top: 8px; padding: 22px 16px 16px; display: grid; justify-items: center; gap: 12px; text-align: center; overflow: hidden;
  background: var(--surface); }
.pf-info h1 { font-size: 24px; line-height: 1.3; word-break: break-all; }
.pf-kv { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 4px 0 0; font-size: 13px; }
.pf-kv dt { color: var(--text-2); }
.pf-kv dd { margin: 0 0 0 -10px; color: var(--text); font-weight: 700; }
.pf-region { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 60px; padding: 10px 14px; border-radius: var(--r-m); cursor: pointer; color: var(--text);
  border: 0; background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary-line); }
.pf-region > .ic { color: var(--primary); }
.pf-region > div { flex: 1; min-width: 0; }
.pf-region small { display: block; font-size: 12px; color: var(--text-2); }
.pf-region b { font-size: 16px; color: var(--heading); }
.pf-chg { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent-ink); font-weight: 700; }
.pf-chg .ic { width: 16px; height: 16px; }
.pf-region:active { transform: scale(.98); }
.pf-sum { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 420px) { .pf-sum { grid-template-columns: repeat(4, 1fr); } }
.stats { padding: 4px 14px; }
.st-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.st-row:first-child { border-top: 0; }
.st-ic { width: 40px; height: 40px; flex: none; border-radius: var(--r-m); overflow: hidden; background: var(--cis-blue); }
.st-ic svg { width: 100%; height: 100%; display: block; }
.st-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.st-t b { font-size: 15.5px; color: var(--heading); }
.st-t small { color: var(--text-2); font-size: 12px; }
.st-b { display: grid; justify-items: end; line-height: 1.15; }
.st-b small { font-size: 11.5px; color: var(--text-2); }
.st-b b { font-size: 20px; color: var(--text); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 12px; text-align: center; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.badge .badge-art { width: 56px; height: 62px; }
.badge b { font-size: 14.5px; color: var(--text-2); }
.badge small { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.badge.got { background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line); }
.badge.got b { color: var(--heading); }
.badge-lock { position: absolute; right: -4px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cis-gray-500); color: #fff; box-shadow: 0 0 0 2px #fff; }
.badge-lock .ic { width: 13px; height: 13px; }
.settings { padding: 4px 14px; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.set-row:first-child { border-top: 0; }
.set-row > .ic { color: var(--navy-ink); }
.set-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.set-t b { font-size: 15px; color: var(--text); }
.set-t small { color: var(--text-2); font-size: 12px; }
/* V2AU：音量滑桿列（縮排在開關下方） */
.set-row.vol-row { min-height: 48px; border-top: 0; padding: 0 0 8px 36px; cursor: default; }
.set-row.vol-row .set-t { flex: none; width: 64px; }
.set-row.vol-row input[type=range] { flex: 1; min-width: 0; height: 40px; accent-color: var(--primary); }
.set-row.vol-row input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-m); background: var(--cis-gray-400); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: none; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }
.logout { margin-top: 22px; }
.logout .ic { width: 20px; height: 20px; }

/* ---------------- toasts & confetti ---------------- */
.toasts { position: fixed; z-index: 120; left: 0; right: 0; margin: 0 auto; top: calc(var(--safe-t) + 66px); width: calc(100% - 32px); max-width: 420px; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m); font-weight: 700; font-size: 14.5px; color: #fff;
  background: var(--cis-blue); box-shadow: inset 4px 0 0 var(--cis-gray);
  animation: toastIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast .ic { color: var(--cis-silver); }
.toast.good { box-shadow: inset 4px 0 0 var(--accent); }
.toast.good .ic { color: var(--cis-ltgreen); }
.toast.warn { box-shadow: inset 4px 0 0 var(--danger-fill); }
.toast.warn .ic { color: #fff; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .35s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
.confetti { position: fixed; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -16px; width: 8px; height: 13px; border-radius: 2px; animation: fall 2s cubic-bezier(.25, .6, .4, 1) both; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: 0; } }

/* ---------------- small screens ---------------- */
@media (max-width: 370px) {
  #views { padding: 0 12px; }
  .segs { margin: 0 -12px; padding-left: 12px; padding-right: 12px; scroll-padding: 0 12px; }
  .hero { padding: 0 16px 18px; margin-left: -12px; margin-right: -12px; min-height: 560px; }
  .hero-tag { padding-left: 16px; }
  .gc-title h3 { font-size: 24px; }
  .gc-stat { gap: 12px; }
  .gc-cta { padding: 10px 14px; font-size: 16px; }
  .cd-box b { font-size: 23px; }
  .topbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .tb-mark { width: 30px; height: 30px; }
  .tb-me { gap: 8px; }
  .tb-tickets, .tb-points { padding: 0 10px 0 5px; gap: 4px; }
}
@media (min-width: 560px) {
  .lobby { padding-top: 8px; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pl-loop, .pl-body, .pl-spark, .loop-spin, .rays, .pod-crown, .thanks-hero-ic, .big-ticket { animation: none !important; }
  .pl-spark { opacity: .8; }
  .playlayer:not([hidden]), .lobby:not([hidden]), .result:not([hidden]) { animation: none !important; }
}
@media (max-height: 700px) {
  .ob-art { width: min(170px, 46vw); }
  .ob-title { font-size: 26px; }
  .ob-step { gap: 10px; }
}

/* =================== Platform additions (Circular Arcade) =================== */
.splash-en { color: var(--text-2); font-weight: 700; letter-spacing: .16em; font-size: 12px; text-transform: uppercase; margin-top: -4px; animation: rise .6s .22s both; }
.ob-en { text-align: center; margin-top: -4px; font-weight: 700; letter-spacing: .16em; font-size: 12px; color: var(--text-2); text-transform: uppercase; }

/* 大廳頂部品牌列：正式 Logo＋平台名 */
.brand { display: flex; align-items: center; gap: 12px; padding: 14px 2px 12px; }
.brand-logo { width: 132px; }
.brand-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; padding-left: 12px; border-left: 1px solid var(--line); }
.brand-t b { font-size: 17px; color: var(--heading); }
.brand-t small { font-weight: 700; font-size: 10.5px; letter-spacing: .12em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { display: none; }
@media (max-width: 480px) { .brand-t small { display: none; } }
@media (max-width: 370px) { .brand-logo { width: 112px; } .brand-t b { font-size: 15px; } .brand { gap: 10px; } .brand-t { padding-left: 10px; } }

/* LIVE badge + banner */
.live-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-m); flex: none;
  background: var(--danger-fill); color: #fff; font-family: var(--f-body); font-weight: 800; font-size: 12px; letter-spacing: .1em; box-shadow: 0 0 0 0 rgba(217, 45, 32, .6); animation: livePulse 1.6s ease-out infinite; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s steps(2, start) infinite; }
.live-badge.off { background: var(--cis-gray-500); animation: none; }
.live-badge.off i { display: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .5); } 70% { box-shadow: 0 0 0 10px rgba(217, 45, 32, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); } }
@keyframes blink { to { visibility: hidden; } }
.live-slot { display: grid; gap: 12px; }
.live-slot:not(:empty) { margin-top: 16px; }
.live-card { position: relative; overflow: hidden; padding: 14px 16px 16px; border-radius: var(--r-l); display: grid; gap: 8px;
  background: var(--surface); border: 1px solid var(--danger-line);
  box-shadow: inset 4px 0 0 var(--danger-fill); animation: rise .4s both; }
.live-card.ineligible { filter: saturate(.6); }
.live-card .pill.abs { top: auto; bottom: 14px; right: 14px; }
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-hl { display: flex; align-items: center; gap: 8px; }
.lv-kicker { font-weight: 700; font-size: 14px; color: var(--danger); }
.lv-timer { display: grid; justify-items: end; line-height: 1; }
.lv-timer small { font-size: 11px; color: var(--text-2); font-weight: 700; }
.lv-timer b { font-size: 26px; color: var(--heading); font-variant-numeric: tabular-nums; }
.lv-timer b.warn, .rl-timer.warn { color: var(--danger); }
.lv-name { font-size: 20px; line-height: 1.3; }
.lv-note { font-size: 13px; color: var(--text-2); }
.lv-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 2px; }
.lv-game { --ac: var(--green); display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: var(--r-m); border: 0; cursor: pointer; text-align: left; color: var(--text);
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line), inset 4px 0 0 var(--ac); }
.lv-game:active { transform: scale(.97); }
.lv-game[disabled] { opacity: .55; }
.lv-gi { width: 38px; height: 38px; flex: none; border-radius: var(--r-m); overflow: hidden; background: var(--game-tile); }
.lv-gi svg { width: 100%; height: 100%; display: block; }
.lv-gt { display: grid; min-width: 0; line-height: 1.3; }
.lv-gt b { font-size: 15px; color: var(--heading); }
.lv-gt small { font-size: 12px; color: var(--text-2); }
.lv-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.lv-cta { padding: 12px 16px; }
.lv-cta .ic, .lv-screen .ic { width: 20px; height: 20px; }
.lv-screen { padding: 12px 14px; font-size: 15px; }

/* card ribbons & live tag */
.gc-rib { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-bottom: 5px; border-radius: var(--r-m) var(--r-m) var(--r-m) var(--r-m); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--danger-fill); }
.gc-title.sm .gc-rib { height: 19px; font-size: 11px; margin-bottom: 3px; }
.gc-live { position: absolute; z-index: 2; left: 12px; top: 64px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--r-s); background: rgba(0, 64, 91, .82); font-size: 12px; font-weight: 700; color: #fff; }
.gcard-md .gc-live { top: 38px; left: 8px; height: 24px; font-size: 11px; }
.gcard-md .gc-live .live-badge { height: 18px; font-size: 11px; }
.gcard.locked .gc-lock span { color: var(--danger); }
.glist-md.odd > .gcard:first-child { grid-column: 1 / -1; }
.glist-md.odd > .gcard:first-child .gc-cover { aspect-ratio: 16 / 8; }
.glist-md.odd > .gcard:first-child .gc-title.sm h3 { font-size: 23px; }
.glist-md.odd > .gcard:first-child .gc-title.sm small { font-size: 12px; }
.glist-md.odd > .gcard:first-child .gc-foot.sm { flex-wrap: nowrap; }
.pips.txt { gap: 6px; }
.pips.txt span { font-size: 15px; color: var(--accent-ink); }

/* intro additions */
.intro-honor.coral { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.intro-honor.coral .ic { color: var(--danger); }
.intro-live { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); font-size: 14px; font-weight: 700; color: var(--danger);
  background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.intro-scopes { font-size: 13px; color: var(--text-2); }

/* result additions */
.res-ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rk-chip { display: grid; justify-items: center; min-width: 92px; padding: 8px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); animation: rise .45s .35s both; }
.rk-chip small { font-size: 12px; font-weight: 700; color: var(--text-2); }
.rk-chip b { font-size: 15px; color: var(--text); }
.rk-chip b .num { font-size: 22px; color: var(--heading); margin: 0 2px; }
.rk-chip.camp { box-shadow: inset 0 0 0 1.5px var(--prize-line); background: var(--prize-soft); }
.rk-chip.camp b .num { color: var(--prize); }
.rk-chip.live { box-shadow: inset 0 0 0 1.5px var(--danger-line); background: var(--danger-soft); }
.rk-chip.live b .num { color: var(--danger); }
.res-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rw-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: var(--r-m); text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); animation: rise .5s .3s both; }
.rw-tile > b { font-size: 30px; line-height: 1.05; color: var(--prize); }
.rw-tile.pts > b { color: var(--accent-ink); }
.rw-tile small { font-size: 12px; color: var(--text-2); }
.rw-tile.zero > b { color: var(--text-3); }
.res-tk-ic .tk.leaf { background: var(--primary); box-shadow: none; color: #fff; }

/* rank: scope switcher（分段控制） */
.scopes { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: var(--r-m); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.scope { min-height: 44px; border: 0; border-radius: var(--r-m); cursor: pointer; background: none; color: var(--text-2); font-family: var(--f-body); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; }
.scope.on { background: var(--surface); color: var(--heading); box-shadow: inset 0 -2px 0 var(--accent); }
.scope.live.on { background: var(--danger-fill); color: #fff; box-shadow: none; }
.dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--danger-fill); animation: blink 1.2s steps(2, start) infinite; }
.scope.live.on .dotlive { background: #fff; }
.rank-sub { word-break: break-word; }
.rank-live { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--r-m); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.rl-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.rl-t b { font-size: 15px; color: var(--heading); }
.rl-t small { font-size: 12px; color: var(--text-2); }
.rl-timer { font-size: 22px; flex: none; color: var(--heading); }
.rl-screen { width: 48px; height: 48px; flex: none; border: 0; border-radius: var(--r-m); display: grid; place-items: center; cursor: pointer; background: var(--surface); color: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--line); }
.segs.evs { padding-bottom: 8px; }
.seg.annual.on { background: var(--primary); color: #fff; }

/* annual teaser & me card */
.annual-card, .me-annual { padding: 14px 16px; display: grid; gap: 10px; cursor: pointer;
  background: var(--surface); }
.me-annual { cursor: default; }
.an-me, .ma-top { display: flex; align-items: center; gap: 12px; }
.an-medal { width: 52px; height: 52px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; transform: rotate(-6deg);
  background: var(--primary); box-shadow: none; }
.an-medal .ic { width: 30px; height: 30px; }
.an-mt { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.an-mt small, .an-rank small { font-size: 12px; color: var(--text-2); font-weight: 700; }
.an-mt b { font-size: 30px; color: var(--accent-ink); }
.an-today { font-size: 12px; color: var(--text-2); }
.an-rank { display: grid; justify-items: end; line-height: 1.15; flex: none; }
.an-rank b { font-size: 24px; color: var(--heading); }
.an-top { display: grid; gap: 6px; }
.an-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.an-row .medal { width: 28px; height: 28px; font-size: 15px; }
.an-row.me { box-shadow: inset 0 0 0 1.5px var(--primary); }
.an-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.an-pts { font-size: 17px; color: var(--accent-ink); flex: none; }
.an-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-2); }
.annual-info { display: grid; gap: 8px; }
.annual-info.card { padding: 14px; }
.ai-h { font-size: 14.5px; color: var(--heading); margin-top: 4px; }
.ai-earn { padding: 0 !important; }
.ai-earn li b { color: var(--accent-ink) !important; }
.ai-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ai-awards li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line); font-size: 14px; color: var(--text); }
.ai-awards .ic { color: var(--prize); width: 20px; height: 20px; }

/* admin（大廳內的場次窗口工具） */
.admin { padding: 16px; display: grid; gap: 10px; box-shadow: inset 4px 0 0 var(--danger-fill); }
.ad-h { display: flex; align-items: center; gap: 10px; }
.ad-h h3 { font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: var(--r-m); border: 0; cursor: pointer; font-family: var(--f-body); font-weight: 700; font-size: 15px;
  background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.chip.on { background: var(--primary-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--primary); }
.chip:active { transform: scale(.95); }
.ad-two { display: grid; gap: 10px; }
.ad-two > div { display: grid; gap: 6px; }
.ad-ev { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-m); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--danger-line); }
.ad-ev-t { display: grid; gap: 3px; min-width: 0; }
.ad-ev-l1 { display: flex; align-items: center; gap: 8px; }
.ad-ev-l1 b { font-size: 15.5px; color: var(--heading); overflow-wrap: anywhere; }
.ad-ev-t small { font-size: 12px; color: var(--text-2); }
.ad-tm { font-size: 18px !important; color: var(--heading) !important; }
.ad-ev-b { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ad-ev-b .df-btn { padding: 11px 14px; font-size: 15px; }
.ad-ev-b .ic { width: 18px; height: 18px; }

/* =================== LIVE BIG SCREEN（大廳內投影：海軍藍底＋白字＋綠色重點） =================== */
body.bigscreen .topbar, body.bigscreen .tabbar, body.bigscreen #lobby > .mybar { display: none !important; }
body.bigscreen .lobby { max-width: none; padding-bottom: 0; }
body.bigscreen #views { padding: 0; }
#v-live { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; color: #fff;
  padding: calc(var(--safe-t) + 14px) clamp(14px, 3vw, 40px) calc(var(--safe-b) + 18px);
  background: var(--grad-brand);
  display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
#v-live h1, #v-live h2, #v-live h3 { color: #fff; }
#v-live.enter { animation: none; }
.bs-top { display: flex; align-items: center; gap: 12px; }
.bs-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bs-logo { width: clamp(120px, 12vw, 200px); padding: 6px 10px; border-radius: var(--r-m); background-color: #fff; background-origin: content-box; box-sizing: content-box; }
.bs-brand b { font-size: clamp(15px, 1.6vw, 22px); color: var(--cis-silver); }
.bs-evs { display: flex; gap: 6px; flex-wrap: wrap; }
#v-live .seg { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
#v-live .seg.on { background: #fff; color: var(--cis-navy); }
.bs-exit { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: var(--r-m); border: 0; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; flex: none; }
.bs-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; }
.bs-hl { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--cis-silver); font-weight: 700; font-size: clamp(13px, 1.4vw, 18px); }
.bs-hl .live-badge { height: clamp(22px, 2.6vw, 34px); font-size: clamp(13px, 1.6vw, 20px); padding: 0 12px; }
.bs-name { font-size: clamp(28px, 4.6vw, 64px); line-height: 1.15; color: #fff; }
.bs-cd { display: grid; justify-items: end; line-height: 1; }
.bs-cd small { font-size: clamp(12px, 1.3vw, 18px); color: var(--cis-silver); font-weight: 700; }
.bs-cd b { font-family: var(--f-num); font-weight: 800; font-size: clamp(54px, 9vw, 140px); color: #fff; font-variant-numeric: tabular-nums; }
.bs-cd b.warn { color: #ffb4ab; }
.bs-grid { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); flex: 1; align-items: start; }
.bs-panel { --ac: var(--green); padding: clamp(10px, 1.4vw, 20px); border-radius: var(--r-m); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 4px 0 var(--accent); display: grid; gap: 10px; }
.bs-ph { display: flex; align-items: center; gap: 12px; }
.bs-gi { width: clamp(38px, 3.6vw, 56px); height: clamp(38px, 3.6vw, 56px); border-radius: var(--r-m); overflow: hidden; flex: none; background: var(--game-tile); }
.bs-gi svg { width: 100%; height: 100%; display: block; }
.bs-ph b { display: block; font-size: clamp(18px, 2vw, 30px); color: #fff; }
.bs-ph small { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(10px, 1vw, 14px); color: var(--cis-ltgreen); }
.bs-ph > div { flex: 1; min-width: 0; }
.bs-cnt { font-size: clamp(12px, 1.2vw, 16px); color: var(--cis-silver); font-weight: 700; }
.bs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(4px, .6vh, 8px); }
.bs-row { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); min-height: clamp(40px, 5.2vh, 60px); padding: 4px clamp(8px, 1vw, 16px) 4px 6px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); transition: transform .3s; }
.bs-rk { width: clamp(28px, 2.6vw, 40px); height: clamp(28px, 2.6vw, 40px); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: clamp(15px, 1.5vw, 22px); background: rgba(0, 20, 35, .45); color: #fff; }
.bs-row .avatar { --s: clamp(30px, 2.8vw, 42px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.bs-n { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.bs-n b { font-size: clamp(14px, 1.5vw, 22px); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-n small { font-size: clamp(10.5px, 1vw, 14px); color: var(--cis-silver); }
.bs-sc { font-size: clamp(18px, 2vw, 32px); flex: none; color: #fff; }
.bs-row.t1 { min-height: clamp(52px, 7vh, 80px); background: rgba(107, 198, 36, .14); box-shadow: inset 0 0 0 1.5px var(--cis-ltgreen); }
.bs-row.t1 .bs-rk { background: var(--cis-ltgreen); color: var(--cis-blue); }
.bs-row.t1 .bs-sc { color: var(--cis-ltgreen); font-size: clamp(22px, 2.6vw, 42px); }
.bs-row.t1 .bs-n b { font-size: clamp(16px, 1.9vw, 28px); }
.bs-row.t2 { background: rgba(255, 255, 255, .10); }
.bs-row.t2 .bs-rk { background: var(--cis-silver); color: var(--cis-blue); }
.bs-row.t3 { background: rgba(255, 255, 255, .08); }
.bs-row.t3 .bs-rk { background: var(--cis-ltblue); color: #fff; }
.bs-row.up { animation: bsUp .9s ease-out; }
.bs-row.new { animation: bsNew .9s ease-out; }
@keyframes bsUp { 0% { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(8px); } 100% { transform: none; } }
@keyframes bsNew { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: none; } }
.bs-wait { padding: 28px 10px; text-align: center; color: var(--cis-silver); font-size: clamp(14px, 1.5vw, 20px); }
.bs-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: clamp(8px, 1.2vh, 14px); border-radius: var(--r-m); background: var(--cis-dkgreen); text-align: center; }
.bs-foot .ic { color: #fff; width: clamp(20px, 2vw, 28px); height: clamp(20px, 2vw, 28px); }
.bs-foot span { font-weight: 700; font-size: clamp(15px, 1.8vw, 26px); color: #fff; }
.bs-foot small { color: var(--cis-silver); font-size: clamp(11px, 1.1vw, 15px); }
.bs-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.bs-empty .loopmark { width: 90px; height: 90px; }
.bs-empty h1 { font-size: clamp(22px, 3vw, 40px); }
.bs-empty p { color: var(--cis-silver); }
@media (max-width: 760px) {
  .bs-grid { grid-template-columns: 1fr; }
  .bs-head { grid-template-columns: 1fr; }
  .bs-cd { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .live-badge, .live-badge i, .dotlive { animation: none !important; } }

.bs-main { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); flex: 1; min-height: 0; }
.bs-side { display: contents; }
.bs-side > .bs-head { order: 0; } .bs-main > .bs-grid { order: 1; } .bs-side > .bs-foot { order: 2; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #v-live { overflow-y: hidden; }
  .bs-main { display: grid; grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); align-items: stretch; }
  .bs-main.multi { grid-template-columns: minmax(260px, 26%) minmax(0, 1fr); }
  .bs-side { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 0; }
  .bs-head { grid-template-columns: 1fr; align-content: start; }
  .bs-name { font-size: clamp(30px, 3.6vw, 60px); }
  .bs-cd { justify-items: start; }
  .bs-cd b { font-size: clamp(64px, 8.4vw, 150px); }
  .bs-main.multi .bs-cd b { font-size: clamp(54px, 6.4vw, 120px); }
  .bs-foot { flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 16px; }
  .bs-grid { min-height: 0; overflow: hidden; }
  .bs-panel { max-height: 100%; overflow: hidden; }
  .bs-row { min-height: clamp(36px, 6.4vh, 64px); }
  .bs-row.t1 { min-height: clamp(44px, 7.6vh, 76px); }
}
.bs-main.multi .bs-row .avatar { display: none; }
.bs-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .bs-main.multi .bs-sc { font-size: clamp(16px, 1.6vw, 30px); }
  .bs-main.multi .bs-row.t1 .bs-sc { font-size: clamp(18px, 1.9vw, 36px); }
  .bs-main.multi .bs-n b, .bs-main.multi .bs-row.t1 .bs-n b { font-size: clamp(14px, 1.3vw, 24px); }
  .bs-main.multi .bs-ph b { font-size: clamp(16px, 1.6vw, 28px); }
}
.bs-top { flex-wrap: wrap; }
.bs-brand b { white-space: nowrap; }
@media (max-width: 899px) {
  .bs-evs { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bs-evs::-webkit-scrollbar { display: none; }
}

.splash.err .splash-bar { display: none; }
.splash-err { display: grid; justify-items: center; gap: 10px; max-width: 340px; margin-top: 8px; padding: 18px 18px 16px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--danger-line); animation: rise .35s both; }
.splash-err > .ic { width: 34px; height: 34px; color: var(--danger); }
.splash-err h2 { font-size: 20px; }
.splash-err p { color: var(--text-2); font-size: 14px; }
.splash-err .df-btn { min-width: 180px; }
.splash-errmsg { display: block; color: var(--text-2); font-size: 12px; word-break: break-all; margin-top: 4px; }
.notice.warn { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px var(--danger-line); }
.notice.warn > .ic { color: var(--danger); }

/* =================== Login / password / announcements =================== */
.auth { gap: 14px; }
.auth-brand { display: grid; justify-items: center; gap: 6px; margin: 18px 0 6px; }
.auth-logo { width: min(240px, 66vw); margin-bottom: 10px; animation: popIn .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.auth-mark { display: none; }
.auth .ob-h { margin-top: 0; }
.auth .ob-p { margin-top: -6px; }
.field input.big, input.big { min-height: 56px; font-size: 18px; padding: 12px 16px; border-radius: var(--r-m); letter-spacing: .02em; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 60px; height: 44px; border: 0; border-radius: var(--r-m); cursor: pointer;
  background: var(--surface-3); color: var(--navy-ink); font-weight: 700; font-size: 14px; }
.pw-eye[aria-pressed="true"] { background: var(--navy-soft); color: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--navy-line); }
.auth-err { font-size: 14px; font-weight: 700; color: var(--danger); padding: 10px 12px; border-radius: var(--r-m); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.auth-err:empty { display: none; }
.big-btn { font-size: 19px; padding: 15px; }
.hint.center { text-align: center; font-size: 13px; color: var(--text-2); }
.auth-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 0 4px; }
.auth-note .ic { width: 16px; height: 16px; color: var(--cis-navy); margin-top: 2px; }
.auth .safety { margin-top: 4px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.set-row.as-btn { width: 100%; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; }
.set-row.as-btn > .ic:last-child { color: var(--text-3); width: 18px; height: 18px; }

.ann-slot { display: grid; gap: 10px; }
.ann-slot:not(:empty) { margin-top: 14px; }
.ann { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px 12px 14px; border-radius: var(--r-m); animation: rise .35s both; color: var(--text);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--cis-navy); transition: opacity .2s, transform .2s; }
.ann > .ic { width: 26px; height: 26px; flex: none; margin-top: 2px; color: var(--cis-navy); }
.ann-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ann-tag { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-m); background: var(--navy-soft); color: var(--navy-ink); }
.ann-t b { font-size: 16px; line-height: 1.4; color: var(--heading); overflow-wrap: anywhere; }
.ann-t p { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; }
.ann-x { width: 48px; height: 48px; flex: none; margin: -8px 0 -8px; border: 0; border-radius: var(--r-m); cursor: pointer; display: grid; place-items: center; background: none; color: var(--text-2); }
.ann-x .ic { width: 18px; height: 18px; }
.ann.important { background: var(--prize-soft); box-shadow: inset 0 0 0 1px var(--prize-line), inset 4px 0 0 var(--prize); }
.ann.important > .ic { color: var(--prize); }
.ann.important .ann-tag { background: var(--prize-fill); color: var(--prize-fill-ink); }
.ann.safety { background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px var(--danger-line), inset 4px 0 0 var(--danger-fill); }
.ann.safety > .ic { color: #fff; background: var(--danger-fill); border-radius: var(--r-m); padding: 4px; width: 32px; height: 32px; }
.ann.safety .ann-tag { background: var(--danger-fill); color: #fff; }
.ann.out { opacity: 0; transform: translateY(-6px); }

.ms-title { flex-wrap: wrap; }
.ms-left { font-family: var(--f-body); font-size: 12px; font-weight: 700; color: var(--info); padding: 2px 8px; border-radius: var(--r-m); background: var(--info-soft); }

.login-tabs { margin-bottom: 0; }
.ob-admin .ob-card { box-shadow: inset 0 4px 0 var(--cis-navy); }

/* ---------------- 活動中心（各活動狀態與倒數） ---------------- */
.ev-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 82%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.ev-row::-webkit-scrollbar { display: none; }
.ev-row > .ev-card { scroll-snap-align: start; }
.ev-row > .ev-card:only-child { grid-column: 1 / -1; }
.ev-col { display: grid; gap: 12px; }
.ev-card { --st: var(--text-3); position: relative; display: grid; align-content: start; gap: 10px; width: 100%; min-height: 168px; padding: 14px 14px 12px 18px; border-radius: var(--r-l); border: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), inset 5px 0 0 var(--st); transition: transform .15s; }
.ev-card:active { transform: scale(.98); }
.ev-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ev-card.ev-live { --st: var(--primary); }
.ev-card.ev-upcoming { --st: var(--cis-navy); }
.ev-card.ev-planned { --st: var(--cis-gray-400); }
.ev-card.ev-closed { --st: var(--cis-gray-400); background: var(--surface-2); }
.ev-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-t { display: grid; gap: 2px; min-width: 0; }
.ev-name { font-size: 18px; font-weight: 700; color: var(--heading); line-height: 1.3; overflow-wrap: anywhere; }
.ev-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ev-time { display: grid; gap: 1px; line-height: 1.15; }
.ev-time small { font-size: 12px; color: var(--text-2); font-weight: 700; letter-spacing: .04em; }
.ev-time b { font-size: 20px; color: var(--heading); font-variant-numeric: tabular-nums; }
.ev-live .ev-time b.num { color: var(--accent-ink); }
.ev-upcoming .ev-time b.num { color: var(--navy-ink); }
.ev-planned .ev-time b, .ev-closed .ev-time b { font-size: 15px; color: var(--text-2); }
.ev-time.big { padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ev-time.big b { font-size: 28px; }
.ev-time.big b:not(.num) { font-size: 18px; }
.ev-meta { display: grid; gap: 2px; font-size: 12px; color: var(--text-2); }
.ev-meta span { overflow-wrap: anywhere; }
.ev-detail { display: grid; gap: 12px; padding: 30px 18px 8px; }
.ev-detail > .ev-pills { padding-right: 56px; }
.ev-dname { padding-right: 8px; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.ev-dsub { color: var(--text-2); font-size: 14px; margin-top: -8px; }
.ev-kvs { display: grid; border-top: 1px solid var(--line); }
.ev-kv { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ev-kv span { color: var(--text-2); }
.ev-kv b { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ev-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ev-game { --ac: var(--green); display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: var(--r-m); border: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line), inset 4px 0 0 var(--ac); }
.ev-game:active { transform: scale(.97); }
.ev-game[disabled] { opacity: .55; cursor: default; }
.ev-game .lv-gt small { color: var(--text-2); }
.ev-btns { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .ev-card, .ev-game { transition: none; } .ev-card:active, .ev-game:active { transform: none; } }

/* ---------------- 登入頁：AD 登入（待開通）、誠信宣言 sheet ---------------- */
.auth-alt { display: grid; gap: 8px; justify-items: center; margin-top: 14px; }
.auth-or { font-size: 12px; color: var(--text-2); letter-spacing: .2em; }
.auth-alt .df-btn[disabled] { opacity: .6; filter: none; cursor: not-allowed; }
.auth-alt-note { font-size: 12px; color: var(--text-2); }
.pledge-sheet { display: grid; gap: 12px; padding: 30px 18px 8px; }
.pledge-sheet .pledge-head { padding-right: 36px; padding-left: 36px; }

/* ---------------- 排行：部門篩選（全集團／我的部門／各部門） ---------------- */
.dept-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 2px -2px 4px; scrollbar-width: none; }
.dept-chips::-webkit-scrollbar { display: none; }
.dept-chips[hidden] { display: none; }
.dchip { flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--r-s); border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dchip.on { color: var(--accent-ink); background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary); }
.dchip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 「我的排名」浮條出現時，列表底部多留白，最後幾列與獎金字不被蓋住（V2AR2） */
.lobby.has-mybar { padding-bottom: calc(176px + var(--safe-b)); }

/* ---------------- 暱稱（U25） ---------------- */
.pf-nick { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; margin: 2px 0 6px; border-radius: var(--r-s); border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--primary, var(--green)); background: var(--primary-soft, rgba(43, 214, 123, .12)); }
.pf-nick .ic { width: 16px; height: 16px; }
.pf-nick:focus-visible { outline: 2px solid var(--primary, var(--green)); outline-offset: 2px; }
.pf-region.ro { cursor: default; }
.pf-note { font-size: 12.5px; color: var(--fg-3); text-align: center; margin: 4px 6px 0; line-height: 1.5; }
.nick-form { display: grid; gap: 10px; }
.nick-count { justify-self: end; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.nick-count.over { color: var(--coral-d, #b8432c); font-weight: 700; }

/* =========================================================================
   V2BR 品牌外殼（U55／U56，2026-10-21）：依《大豐品牌規範 v2.14》收斂外層介面
   - 版面：銀白底＋白色內容區，不加陰影、不加圓角卡片框，靠 1px 細線與底色差分層（§3.1、§5 共同禁止）
   - 字體：標題思源黑體 Bold、內文 Regular；英文小標籤全大寫加字距放在主標題上方（§3.1）
   - 關鍵字：淺底一個詞用大豐綠，深底用亮綠（§2.3）
   ========================================================================= */
/* 載入指示（取代回收三箭頭）：1px 軌道＋亮綠進度段 */
.df-loader { position: relative; display: block; width: 160px; height: 2px; overflow: hidden; background: rgba(238, 238, 239, .35); }
.df-loader i { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: var(--cis-ltgreen); animation: bar 1.1s ease-in-out infinite; }
.play-loading .df-loader, .play-saving .df-loader { margin-bottom: 8px; }
.bs-empty .df-loader { width: 220px; }

/* 卡片：白底、無框無陰影 */
.card { border: 0; box-shadow: none; }

/* 區塊標題：上方 1px 細線，英文小標籤在主標題之上 */
.sec { margin-top: 32px; }
.sec-head { align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--line); }
.sec-title { display: grid; gap: 2px; font-size: 22px; line-height: 1.25; }
.sec-title::before { content: none; }
.sec-title small { order: -1; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.sec-link { font-size: 14px; }

/* 標籤（pill）：方角小標籤 */
.pill { border-radius: var(--r-s); height: 22px; padding: 0 8px; letter-spacing: .04em; }

/* 啟動畫面：白底、彩色標誌、細線進度 */
.splash { background: #fff; }
.splash-logo { width: min(240px, 64vw); margin: 0 0 30px; animation: none; }
.splash-title { font-size: 28px; letter-spacing: .06em; animation: none; margin-top: 0; }
.splash-title span { color: var(--accent); }
.splash-en { color: var(--ink-2); letter-spacing: .24em; font-size: 11px; animation: none; }
.splash-season { color: var(--heading); font-weight: 400; letter-spacing: .12em; animation: none; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line); }
.splash-bar { width: 160px; height: 2px; border-radius: 0; background: var(--line); margin-top: 18px; }
.splash-bar i { border-radius: 0; }

/* 登入／改密碼：頂部實拍照片帶＋彩色標誌（淺底用 C 版，§4.3）＋表單 */
.onboard { background: #fff; }
.auth { gap: 14px; }
.auth-photo { position: relative; margin: calc(-20px - var(--safe-t)) -20px 0; height: 210px; flex: none;
  background: url("../img/photo/fleet-row.jpg") 38% 70% / cover no-repeat var(--cis-blue); }
.auth-photo-tag { position: absolute; left: 0; top: var(--safe-t); padding: 8px 14px 8px 20px; background: var(--cis-green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.auth-brand { justify-items: start; gap: 4px; margin: 14px 0 4px; padding: 0 2px; }
/* 標誌淨空：四周至少為地球圖標直徑的 1/2（標誌高 ≈ 圖標直徑；寬 180 → 高 45 → 淨空 23px） */
.auth-logo { --logo-w: 180px; width: var(--logo-w); margin: 0 0 23px; animation: none; }
.auth .ob-title { text-align: left; font-size: 28px; letter-spacing: .06em; }
.auth .ob-en { text-align: left; letter-spacing: .22em; font-size: 11px; color: var(--ink-2); margin-top: 0; }
.auth .ob-card { padding: 18px 0 4px; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.ob-admin .ob-card { box-shadow: none; border-top: 2px solid var(--cis-blue); }
.field-l { font-size: 13px; letter-spacing: .04em; }
.field input, .inp { border-radius: var(--r-m); }
.auth-alt { justify-items: stretch; }
.auth-or { text-align: center; }
.auth-alt-note { text-align: center; }
.auth-err { border-radius: var(--r-m); box-shadow: inset 3px 0 0 var(--danger); background: #fff; }
.pw-eye { border-radius: var(--r-m); background: var(--cis-silver); }

/* 頂部列：白底、1px 細線；計數鈕方角 */
.topbar { background: #fff; }
.tb-tickets, .tb-points { border-radius: var(--r-m); height: 40px; padding: 0 10px 0 4px; }
.tb-tickets { background: #fff; box-shadow: inset 0 0 0 1px var(--cis-ltblue); }
.tb-points { background: #fff; box-shadow: inset 0 0 0 1px var(--cis-green); }
.tb-tickets .ic, .tb-points .ic { width: 30px; height: 30px; padding: 6px; border-radius: var(--r-s); }
.tb-tickets .ic { background: var(--cis-ltblue); color: #fff; }
.tb-points .ic { background: var(--cis-green); color: #fff; }
.tb-tickets b { color: var(--cis-blue); }
.tb-points b { color: var(--cis-dkgreen); }

/* 品牌列：彩色標誌＋1px 直線＋平台名（標誌淨空 ≥ 圖標半徑） */
.brand { gap: 0; padding: 18px 2px 16px; }
.brand-logo { --logo-w: 120px; width: var(--logo-w); margin-right: 16px; }
.brand-t { padding-left: 16px; }
.brand-t b { font-size: 16px; letter-spacing: .06em; }
.brand .pill-mode { margin-left: 10px; }

/* 底部分頁列 */
.tab-ind::before { inset: 0 18%; border-radius: 0; }

/* 任務／遊戲卡／排行：白底無框 */
.gcard, .daily, .tcard, .live-card, .ev-card, .annual-card, .me-annual, .admin { border: 0; }
.gcard { border-radius: var(--r-m); }
.gc-title h3 { letter-spacing: .04em; }
.gc-title small { letter-spacing: .18em; }
.gc-pool { border-radius: 0; left: 0; top: 0; padding: 7px 12px 8px 14px; }
.gc-pool small { color: var(--cis-silver); letter-spacing: .1em; }
.gc-pool b { color: var(--cis-ltgreen); }
.gc-first { border-radius: var(--r-s); }
.gc-honor { border-radius: 0; left: 0; top: 0; height: 26px; padding: 0 10px 0 8px; }
.gc-live { border-radius: var(--r-s); background: var(--cis-blue); }
.gcard .gc-cta, .daily .daily-btn { font-size: 19px; }
.an-medal, .thanks-hero-ic, .mt-ic { transform: none; box-shadow: none; animation: none; }
.ms-list li:not(.done) .ms-chk .ic { display: none; }
.daily { box-shadow: inset 3px 0 0 var(--cis-blue); }
.daily.done { box-shadow: inset 3px 0 0 var(--accent); }
.daily-ic { border-radius: var(--r-m); }
.ms-chk { border-radius: var(--r-s); }
.ms-cap, .ms-prog, .rt-bar, .pips i { border-radius: 0; }
.pips i { box-shadow: none; background: var(--line); }
.pips i.on { background: var(--accent); }

/* 公告：左側 3px 色條（大豐藍＝一般、亮藍＝重要、紅＝工安） */
.ann { box-shadow: inset 3px 0 0 var(--cis-blue); }
.ann.important { background: #fff; box-shadow: inset 3px 0 0 var(--cis-ltblue); }
.ann.important .ann-tag { background: var(--cis-ltblue); color: #fff; }
.ann.safety { background: #fff; box-shadow: inset 3px 0 0 var(--danger-fill); }
.ann-tag { border-radius: var(--r-s); background: var(--cis-silver); }

/* 現場快閃：紅色只做狀態（LIVE 標記與左條） */
.live-card { box-shadow: inset 3px 0 0 var(--danger-fill); }
.lv-game, .ev-game { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--cis-blue); background: #fff; }
.lv-gi, .pool-ic, .bs-gi { border-radius: var(--r-m); }

/* 活動中心卡片 */
.ev-card { box-shadow: inset 3px 0 0 var(--st); }
.ev-card.ev-closed { background: #fff; }

/* sheet：大豐藍半透明底（無模糊）、方角 */
.sheet-backdrop { background: rgba(0, 64, 91, .62); }
.sheet-x { border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sheet-intro .sheet-x { border-radius: var(--r-m); background: var(--cis-blue); box-shadow: none; }
.sheet-grab { border-radius: 0; height: 3px; }
.intro-cover .gc-scrim { background: linear-gradient(0deg, rgba(0, 64, 91, .95) 0%, rgba(0, 64, 91, .6) 34%, rgba(0, 64, 91, 0) 62%); }
.intro-quote, .res-line { box-shadow: inset 3px 0 0 var(--accent); background: #fff; }
.howto li { box-shadow: none; background: #fff; }
.howto li > span { border-radius: var(--r-s); font-family: var(--f-num); }
.mode-opt { border-width: 1px; }
.mode-opt.sel { border-width: 2px; }
.intro-honor { background: #fff; box-shadow: inset 3px 0 0 var(--honor); }
.intro-honor.sky { background: #fff; box-shadow: inset 3px 0 0 var(--cis-blue); }
.intro-honor.coral, .intro-live { background: #fff; box-shadow: inset 3px 0 0 var(--danger-fill); }
.slots li { box-shadow: none; background: #fff; }
.slots .t1 { background: #fff; box-shadow: inset 3px 0 0 var(--cis-ltgreen); }
.slots .rk { border-radius: var(--r-s); }

/* 誠信宣言 */
.pledge-head > .ic { border-radius: var(--r-m); background: var(--cis-blue); color: #fff; box-shadow: none; }
.pledge-list li { border: 0; }
.check { background: #fff; border: 1px solid var(--cis-green); border-radius: var(--r-m); }
.check-box { border-radius: var(--r-s); }

/* 結算頁：淺底、封面頂部用大豐藍壓暗、白色分數區 */
.res-hero-scrim { background: linear-gradient(0deg, rgba(0, 64, 91, .95) 0%, rgba(0, 64, 91, .6) 42%, rgba(0, 64, 91, 0) 72%), linear-gradient(90deg, rgba(0, 64, 91, .7) 0%, rgba(0, 64, 91, 0) 60%); }
.res-hero-t .res-ic { border-radius: var(--r-m); }
.res-hero .pill-ghost { border-radius: var(--r-s); background: #fff; }
.res-card { border: 0; border-radius: var(--r-m); }
.res-score small { letter-spacing: .2em; }
.res-score b { font-weight: 800; letter-spacing: -.02em; }
.res-score::after { border-radius: 0; height: 3px; }
.res-in.has-hero .res-kv { box-shadow: none; }
.kv, .rk-chip, .rw-tile, .res-tickets { box-shadow: none; background: #fff; }
.rk-chip.camp { background: #fff; box-shadow: inset 0 -3px 0 var(--cis-ltblue); }
.rk-chip.live { background: #fff; box-shadow: inset 0 -3px 0 var(--danger-fill); }
.rw-tile > b { color: var(--cis-ltblue); }
.res-prize { background: #fff; box-shadow: inset 3px 0 0 var(--cis-ltblue); }
.res-prize > .ic { background: var(--cis-ltblue); color: #fff; }
.res-prize.plum { background: #fff; box-shadow: inset 3px 0 0 var(--cis-blue); }
.res-tk-ic .tk.leaf { background: var(--cis-green); }
.kv-new { border-radius: var(--r-s); }
.res-btns.bar .df-btn { font-size: 17px; }
.res-btns.bar .res-again { font-size: 19px; }

/* 排行 */
.seg { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.seg.on { background: var(--cis-blue); }
.seg.prize.on { background: var(--cis-ltblue); color: #fff; }
.scopes { border-radius: var(--r-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.scope { border-radius: var(--r-s); }
.row, .rrow, .an-row { box-shadow: none; background: #fff; }
.row.me, .rrow.me, .an-row.me { background: #fff; box-shadow: inset 3px 0 0 var(--cis-green), inset 0 0 0 1px var(--cis-green); }
.pod-step { border-radius: var(--r-s) var(--r-s) 0 0; }
.mybar { border-radius: var(--r-m); }
.mb-go { --c: var(--primary-dark); --tc: var(--cis-blue); }
.dchip { border-radius: var(--r-m); }
.medal, .rrow > .rk { border-radius: var(--r-s); }

/* 獎勵頁：大面積品牌雙色直線漸層（大豐藍→深綠）＋亮綠數字 */
.prize-hero { border-radius: 0; margin: 6px -16px 0; padding: 26px 22px 22px; text-align: left; }
.prize-hero::after { height: 3px; }
.prize-hero small { letter-spacing: .14em; }
.lot-row { border-radius: var(--r-m); box-shadow: none; background: var(--cis-silver); }
.lot-row.l1 { background: #fff; box-shadow: inset 3px 0 0 var(--cis-ltblue), inset 0 0 0 1px var(--line); }
.lot-annual .lot-row.l1 { background: #fff; box-shadow: inset 3px 0 0 var(--cis-green), inset 0 0 0 1px var(--line); }
.ai-awards li { background: #fff; box-shadow: inset 3px 0 0 var(--cis-ltblue); }
.disclaimer { background: #fff; box-shadow: inset 3px 0 0 var(--danger); border-radius: var(--r-m); }
.hl-row > .ic { background: var(--cis-silver); color: var(--cis-blue); }

/* 我的 */
.profile { border-top: 3px solid var(--cis-green); }
.pf-region { background: #fff; box-shadow: inset 0 0 0 1px var(--cis-green); border-radius: var(--r-m); }
.badge, .badge.got { box-shadow: none; background: #fff; }
.badge-lock { border-radius: var(--r-s); }
.switch i { border-radius: 16px; }
.switch i::after { border-radius: 50%; box-shadow: none; }

/* 大螢幕投影（大廳內 #live）：頁首白色橫帶放彩色標誌（不用白底卡），其餘大豐藍→深綠 */
#v-live { background: var(--grad-brand); }
.bs-top { margin: calc(-14px - var(--safe-t)) calc(-1 * clamp(14px, 3vw, 40px)) 0; padding: calc(var(--safe-t) + 12px) clamp(14px, 3vw, 40px) 12px; background: #fff; }
.bs-logo { padding: 0; border-radius: 0; background-color: transparent; box-sizing: border-box; margin-right: 10px; }
.bs-brand b { color: var(--heading); padding-left: 14px; border-left: 1px solid var(--line); }
#v-live .bs-top .seg { background: #fff; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
#v-live .bs-top .seg.on { background: var(--cis-blue); color: #fff; }
.bs-exit { background: #fff; color: var(--cis-blue); box-shadow: inset 0 0 0 1px var(--cis-blue); border-radius: var(--r-m); }
.bs-panel { border-radius: var(--r-m); box-shadow: inset 0 3px 0 var(--cis-ltgreen); background: rgba(255, 255, 255, .06); }
.bs-row { border-radius: var(--r-s); }
.bs-rk { border-radius: var(--r-s); }
.bs-row.t1 .bs-sc { color: var(--cis-ltgreen); }
.bs-cd b.warn { color: var(--cis-ltgreen); }

/* toast：大豐藍、方角 */
.toast { border-radius: var(--r-m); }

/* 小螢幕 */
@media (max-width: 370px) {
  .auth-photo { height: 170px; }
  .brand-logo { --logo-w: 104px; margin-right: 12px; }
  .hero-t2 { font-size: 32px; }
  .prize-hero { margin-left: -12px; margin-right: -12px; }
}
@media (min-width: 521px) { .prize-hero { margin-left: 0; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .df-loader i { animation: none; width: 100%; } }
.pf-note, .nick-count { color: var(--text-2); }
.pf-nick { color: var(--accent-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--cis-green); border-radius: var(--r-m); }
.pf-nick:focus-visible { outline-color: var(--focus); }
.auth:not(.ob-login) .auth-photo { height: 120px; }
.mybar .df-btn.mb-go { --c: var(--primary-dark); --cd: #fff; --tc: var(--cis-blue); }
@media (max-width: 370px) { .intro-foot .mode-opt .pips { display: none; } }
/* 大豐綠小標籤（G 版型）：白字在大豐綠上 3.8:1，字級拉到 19px 粗體（WCAG 大字 ≥ 3:1） */
.hero-tag, .auth-photo-tag { font-size: 19px; letter-spacing: .14em; padding-top: 7px; padding-bottom: 7px; line-height: 1.2; }
.live-card .pill.abs { position: static; justify-self: end; margin-top: -2px; } /* 示範標記不再蓋住「投影」按鈕 */
.bs-ph small { color: var(--cis-silver); }
/* V2LT 限時挑戰賽：沿用現場快閃卡片；即將開始改大豐藍側條、多一行起訖與獎項；開局選項的限時賽選項跨兩欄 */
.live-card.up { box-shadow: inset 3px 0 0 var(--cis-blue); }
.live-card.up .lv-kicker { color: var(--info); }
.lv-when { font-size: 13px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.lv-prize { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--heading); }
.lv-prize .ic { width: 16px; height: 16px; flex: none; }
.lv-gt small.lv-rank { color: var(--heading); font-weight: 700; }
.modes .mode-opt.wide { grid-column: 1 / -1; }
.mode-opt.live-opt .mode-t .live-badge { height: 18px; font-size: 11px; }
.mode-opt.live-opt .mode-t { align-items: flex-start; }
.mode-opt.live-opt .mode-t b { min-width: 0; overflow-wrap: anywhere; }
.live-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.intro-foot .mode-opt.live-opt .live-row .pips { position: static; flex: none; }
@media (max-width: 370px) { .intro-foot .mode-opt.live-opt .live-row .pips { display: inline-flex; } }
.mode-opt.live-opt.sel { border-color: var(--danger-fill); background: #fff; }
.intro-foot .intro-scopes { margin: 2px 2px 0; font-size: 12.5px; line-height: 1.45; }
.rank-live.done { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }