:root {
  --primary: #a00000;
  --primary-dark: #600000;
  --gold: #cfae74;
  --background: #f4f5f7;
  --text: #2c3e50;
  --muted: #6f7882;
  --red-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
  --gold-gradient: linear-gradient(90deg, #bf953f, #fcf6ba, #aa771c);
  --soft-shadow: 0 8px 28px rgb(96 0 0 / 10%);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: var(--background);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--background); }
body { margin: 0; min-height: 100vh; padding-bottom: calc(88px + var(--safe-bottom)); overflow-x: hidden; background: var(--background); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

.offline-banner { position: sticky; top: 0; z-index: 3000; padding: .65rem 1rem; color: #fff; background: #e53e3e; text-align: center; font-size: .88rem; font-weight: 800; }
.offline-banner span + span { margin-left: .45rem; }
.app-header { position: sticky; top: 0; z-index: 1000; min-height: 86px; padding: .65rem 1rem; color: #fff; background: var(--red-gradient); border-bottom: 1px solid rgb(255 215 0 / 35%); box-shadow: 0 4px 18px rgb(96 0 0 / 30%); }
.header-content { width: min(600px, 100%); margin: 0 auto; display: flex; align-items: center; gap: .75rem; }
.brand-mark { position: relative; flex: 0 0 52px; height: 52px; }
.brand-mark span { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-family: serif; font-weight: 900; }
.brand-snake { left: 0; bottom: 0; color: rgb(255 255 255 / 65%); border: 1px solid rgb(255 255 255 / 25%); }
.brand-horse { right: 0; top: 0; color: var(--primary-dark); background: var(--gold-gradient); box-shadow: 0 3px 8px rgb(0 0 0 / 22%); }
.header-titles { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.header-titles strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; letter-spacing: .04em; }
.header-titles > span { margin-top: .18rem; color: #f5dfae; font-size: .82rem; font-weight: 700; }
.event-stamp { flex: 0 0 auto; padding: .35rem .55rem; display: flex; flex-direction: column; color: #7b0707; background: linear-gradient(135deg,#ffd700,#f0ae21); border: 2px solid #fff; border-radius: 8px; box-shadow: 0 4px 10px rgb(0 0 0 / 22%); transform: rotate(7deg); text-align: center; font-size: .72rem; font-weight: 900; line-height: 1.15; }

.app-container { width: min(600px, 100%); margin: 0 auto; padding: 1.15rem; }
.view-section { animation: fade-in .28s ease-out; }
.event-slogan { margin: .6rem 0 1.15rem; color: var(--primary); text-align: center; font-weight: 900; letter-spacing: .03em; }
.status-panel { min-height: 52px; margin-bottom: 1rem; padding: .85rem 1rem; display: flex; align-items: center; justify-content: center; gap: .65rem; color: #fff; border-radius: 14px; background: #8e98a2; box-shadow: 0 5px 15px rgb(0 0 0 / 10%); font-weight: 800; }
.status-panel.open { background: linear-gradient(135deg,#2e7d32,#17551b); }
.status-panel.closed { background: var(--red-gradient); }
.status-dot { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .25rem rgb(255 255 255 / 15%); }
.status-panel.connecting .status-dot { animation: pulse 1s infinite; }

.ncyu-card { margin-bottom: 1rem; padding: 1.35rem; background: #fff; border: 1px solid rgb(160 0 0 / 6%); border-radius: 18px; box-shadow: var(--soft-shadow); }
.ncyu-card h2 { margin: 0 0 1rem; padding-bottom: .85rem; display: flex; align-items: center; gap: .55rem; color: var(--primary); border-bottom: 1px solid #edf0f2; font-size: 1.08rem; }
.ncyu-card h3 { margin: .6rem 0; }
.ncyu-input, .search-box input { width: 100%; border: 2px solid #e5e9ec; color: var(--text); background: #fff; outline: 0; transition: border-color .2s, box-shadow .2s; }
.ncyu-input { min-height: 56px; padding: .85rem 1rem; border-radius: 13px; text-align: center; font-size: 1.18rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ncyu-input:focus, .search-box input:focus { border-color: var(--primary); box-shadow: 0 4px 18px rgb(160 0 0 / 14%); }
.primary-button, .outline-button { width: 100%; min-height: 50px; padding: .8rem 1rem; display: flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .16s, opacity .16s; }
.primary-button { margin-top: 1rem; color: #fff; border: 1px solid rgb(255 215 0 / 28%); background: var(--red-gradient); box-shadow: 0 7px 17px rgb(160 0 0 / 26%); }
.outline-button { color: #636c75; border: 2px solid #e8ebee; background: #fff; }
.primary-button:active, .outline-button:active, .icon-button:active, .nav-item:active { transform: scale(.97); }
.primary-button:disabled { color: #98a0a7; background: #e6e9eb; border-color: #e6e9eb; box-shadow: none; cursor: not-allowed; }
.primary-button.compact { width: auto; min-width: 190px; min-height: 44px; margin: 1rem auto 0; }
.button-stack { display: grid; gap: .75rem; }

.identity-summary { display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar { width: 84px; height: 84px; margin-bottom: .7rem; display: grid; place-items: center; color: var(--gold); background: #fffcef; border: 4px solid #fff; border-radius: 50%; box-shadow: var(--soft-shadow); font-family: serif; font-size: 2.3rem; font-weight: 900; }
.identity-summary strong { color: var(--primary-dark); font-size: 1.75rem; }
.identity-summary small { margin: .5rem 0 1rem; color: var(--muted); font-family: ui-monospace,Consolas,monospace; }
.department-badge { margin-top: .45rem; padding: .4rem .8rem; color: #5d4037; background: var(--gold-gradient); border-radius: 999px; font-size: .82rem; font-weight: 800; }
.verification-area { margin-bottom: 1rem; text-align: center; }
.verification-area label { display: block; margin-bottom: .5rem; color: var(--primary); font-size: .82rem; font-weight: 800; }
.verification-input { font-size: 1.7rem; letter-spacing: .5rem; }
.success-panel, .centered, .bonus-qualified { text-align: center; }
.success-icon, .lock-icon { width: 76px; height: 76px; margin: 0 auto .65rem; display: grid; place-items: center; border-radius: 50%; font-size: 2.5rem; font-weight: 900; }
.success-icon { color: #fff; background: var(--red-gradient); box-shadow: 0 6px 20px rgb(160 0 0 / 25%); }
.lock-icon { color: #b1b6bb; background: #eff1f3; }
.success-panel h3, .bonus-qualified h3 { color: var(--primary); }
.eligibility-note { padding: .65rem; color: var(--primary-dark); background: #fffcef; border: 1px solid var(--gold); border-radius: 10px; font-size: .84rem; font-weight: 800; }

.view-heading, .broadcast-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.view-heading { margin-bottom: 1rem; }
.view-heading h2 { margin: 0; color: var(--primary-dark); font-size: 1.15rem; }
.icon-button { flex: 0 0 42px; width: 42px; height: 42px; color: var(--primary); background: rgb(255 255 255 / 90%); border: 1px solid #dfe3e6; border-radius: 12px; box-shadow: 0 3px 10px rgb(0 0 0 / 9%); font-size: 1.3rem; cursor: pointer; }
.icon-button.loading { animation: spin .65s linear infinite; }

.ticket-wrapper { margin-top: .6rem; filter: drop-shadow(0 16px 26px rgb(0 0 0 / 18%)); perspective: 1000px; }
.ticket { overflow: hidden; color: #4d3b32; background: #fffcef radial-gradient(circle at 10px 10px,#f3eedf 2px,transparent 2.5px) 0 0/20px 20px; border-radius: 22px; transform: rotateX(1.5deg); }
.ticket-header { position: relative; padding: 1.4rem 1rem 1.65rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; color: #fff; background: var(--red-gradient); border-bottom: 4px double var(--gold); }
.ticket-header strong { color: #f8e4b0; font-family: serif; font-size: 1.5rem; letter-spacing: .08em; }
.ticket-slogan { padding: .36rem .85rem; color: #5d4037; background: var(--gold-gradient); border-radius: 999px; font-size: .78rem; font-weight: 900; box-shadow: 0 4px 12px rgb(0 0 0 / 18%); }
.ticket-cutout { position: absolute; bottom: -13px; width: 26px; height: 26px; background: var(--background); border-radius: 50%; }
.ticket-cutout.left { left: -13px; }.ticket-cutout.right { right: -13px; }
.ticket-body { position: relative; min-height: 350px; padding: 2rem 1.25rem 2.5rem; }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.ticket-grid > div { padding: .7rem; background: rgb(207 174 116 / 10%); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.ticket-grid small { display: block; color: #765c4a; font-size: .68rem; }
.ticket-grid strong { display: block; margin-top: .2rem; color: var(--primary-dark); font-size: 1rem; overflow-wrap: anywhere; }
.ticket-number { margin: 1.25rem 0; padding: 1rem; display: flex; flex-direction: column; align-items: center; background: rgb(255 255 255 / 78%); border: 3px double var(--gold); }
.ticket-number small { color: #a38348; font-size: .65rem; font-weight: 900; letter-spacing: .16em; }
.ticket-number strong { margin-top: .25rem; color: var(--primary); font-family: ui-monospace,Consolas,monospace; font-size: clamp(1.65rem,9vw,2.55rem); letter-spacing: .12em; overflow-wrap: anywhere; }
.ticket-prizes { display: grid; gap: .65rem; }
.prize-ribbon { padding: .78rem 1rem; color: #5d4037; background: linear-gradient(135deg,#ffd700,#ffc107,#ffd700); border: 2px solid #fff; border-radius: 10px; box-shadow: 0 0 15px rgb(255 193 7 / 52%); text-align: center; font-weight: 900; animation: pop-in .5s ease-out; }
.prize-ribbon.bonus { color: #fff; background: linear-gradient(135deg,#e6004c,#ff4b79); box-shadow: 0 0 15px rgb(230 0 76 / 42%); }
.ticket-stamp { position: absolute; right: 1.25rem; bottom: 1rem; padding: .45rem .7rem; color: #d32f2f; border: 5px double currentColor; border-radius: 10px; transform: rotate(-13deg); opacity: .78; font-family: serif; font-size: 1.45rem; font-weight: 900; pointer-events: none; }
.ticket-stamp.pending { color: #999; opacity: .48; }

.search-box { position: relative; margin-bottom: 1rem; }
.search-box span { position: absolute; left: 1rem; top: 50%; z-index: 1; color: #808890; transform: translateY(-50%); }
.search-box input { min-height: 48px; padding: .7rem 1rem .7rem 2.75rem; border-width: 1px; border-radius: 999px; box-shadow: 0 3px 12px rgb(0 0 0 / 6%); }
.prize-groups { display: grid; gap: .8rem; }
.empty-state { padding: 2.2rem 1rem; color: var(--muted); background: #fff; border-radius: 14px; text-align: center; }
.prize-group { overflow: hidden; background: #fff; border: 1px solid #e7eaed; border-radius: 13px; box-shadow: var(--soft-shadow); }
.prize-group.bonus { border-color: #e8c86c; }
.prize-group-button { width: 100%; min-height: 58px; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--text); background: #f8f9fa; border: 0; text-align: left; cursor: pointer; }
.prize-group.bonus .prize-group-button { background: #fff8e1; }
.prize-title { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.prize-title strong { color: var(--primary-dark); }
.pill { padding: .22rem .48rem; color: #fff; background: #717a82; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.pill.sponsor { color: #5c4b35; background: #fff; border: 1px solid #dfd5c4; }
.arrow { transition: transform .2s; }.prize-group-button[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.winner-grid { padding: .8rem; display: grid; grid-template-columns: repeat(auto-fill,minmax(105px,1fr)); gap: .6rem; }
.winner-card { position: relative; min-width: 0; padding: .7rem .45rem; display: flex; flex-direction: column; align-items: center; color: var(--text); background: #fff; border: 1px solid #e5e8ea; border-radius: 9px; text-align: center; }
.winner-card.highlight { background: #fff1f1; border: 2px solid var(--primary); box-shadow: 0 4px 12px rgb(160 0 0 / 13%); }
.winner-card strong, .winner-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-card small { margin-top: .18rem; color: var(--muted); font-size: .7rem; }
.subheading { margin: 1.4rem 0 .8rem; display: flex; align-items: center; gap: .45rem; color: var(--primary-dark); font-size: .9rem; }
.bonus-qualified { color: #5d4037; background: #fffcef; border: 2px solid var(--gold); }
.bonus-time { margin-top: 1rem; padding-top: 1rem; display: flex; flex-direction: column; border-top: 1px solid rgb(80 60 40 / 12%); }
.bonus-time time { margin-top: .25rem; color: #24804d; font-family: ui-monospace,Consolas,monospace; font-size: 1.3rem; font-weight: 900; }

.broadcast-title h3 { margin: 0 0 .8rem; color: var(--primary-dark); font-size: 1rem; }
.broadcast-player { position: relative; width: 100%; overflow: hidden; background: #090d0c; border-radius: 13px; aspect-ratio: 16/9; }
.broadcast-player:empty { display: none; }
.broadcast-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-badge { padding: .28rem .58rem; color: #fff; background: #70777a; border-radius: 999px; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.live-badge.is-live { background: #c52222; }.live-badge.is-standby { background: #aa6a00; }
.watch-link { display: inline-block; color: var(--primary); font-weight: 800; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: calc(76px + var(--safe-bottom)); padding: 0 .35rem var(--safe-bottom); display: flex; background: rgb(255 255 255 / 97%); border-top: 1px solid rgb(0 0 0 / 8%); border-radius: 24px 24px 0 0; box-shadow: 0 -5px 20px rgb(0 0 0 / 7%); backdrop-filter: blur(12px); }
.nav-item { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; color: #8c939a; background: transparent; border: 0; cursor: pointer; }
.nav-item > span { font-size: 1.35rem; transition: transform .2s; }.nav-item small { font-size: .68rem; font-weight: 800; }
.nav-item.active { color: var(--primary); }.nav-item.active > span { transform: translateY(-3px) scale(1.08); }
.nav-badge { position: absolute; top: .75rem; right: 28%; width: .52rem; height: .52rem; background: #f12d2d; border: 2px solid #fff; border-radius: 50%; }
.toast-container { position: fixed; left: 50%; bottom: calc(94px + var(--safe-bottom)); z-index: 2500; width: min(90%,500px); display: grid; gap: .5rem; transform: translateX(-50%); pointer-events: none; }
.toast { padding: .85rem 1rem; color: #333; background: rgb(255 255 255 / 98%); border: 1px solid rgb(0 0 0 / 6%); border-radius: 999px; box-shadow: 0 10px 30px rgb(0 0 0 / 17%); text-align: center; font-size: .86rem; font-weight: 800; animation: slide-up .25s ease-out; }
.toast.success { color: #267248; }.toast.error { color: #b52b2b; }
.confetti { position: fixed; z-index: 4000; width: 9px; height: 14px; top: -20px; pointer-events: none; animation: confetti-fall 1.8s ease-in forwards; }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes confetti-fall { to { top: 105vh; transform: translateX(var(--drift)) rotate(720deg); opacity: .1; } }
@media (max-width: 380px) { .app-container { padding: .85rem; }.header-titles strong { font-size: .95rem; }.ticket-body { padding-left: .85rem; padding-right: .85rem; }.winner-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }