:root {
  color-scheme: dark;
  --bg: #100e19;
  --panel: #1a1626;
  --panel2: #211a30;
  --line: #30263e;
  --ink: #fff9ff;
  --muted: #b0a5bf;
  --pink: #ff83ae;
  --purple: #c39afd;
  --grad: linear-gradient(112deg,#ea6098,#a064f1);
  --content: 1120px;
  font-family: system-ui, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
* { box-sizing:border-box }
body { margin:0; background:radial-gradient(ellipse at 76% 0,#1d1428 0,transparent 43rem),var(--bg); color:var(--ink); min-width:300px }
a { color:inherit; text-decoration:none }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
button:disabled { cursor:default; opacity:.52 }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--pink); outline-offset:3px }
[hidden] { display:none!important }
p,h1,h2,h3 { margin:0 }
i { display:inline-grid; place-items:center; flex:none; font-style:normal }
i svg { width:20px; height:20px }
.wrap { width:min(calc(100% - 64px),var(--content)); margin-inline:auto }
.top { position:sticky; top:0; z-index:5; background:#100e19ed; backdrop-filter:blur(14px); border-bottom:1px solid #292235 }
.top-in { height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap }
.brand img { width:40px; height:40px; box-shadow:0 5px 20px #d76bb549; border-radius:12px }
.brand b { display:block; font-size:17px; letter-spacing:.06em }
.brand small,.eyebrow { color:var(--pink); font-size:10px; font-weight:800; letter-spacing:.21em; display:block }
.desktop-nav { display:flex; gap:7px }
.nav-link { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; color:var(--muted); font-size:14px; white-space:nowrap }
.nav-link:hover,.nav-link.active { background:#2b2036; color:#ffacd0 }
.nav-link i svg { width:17px; height:17px }
.admin-link { white-space:nowrap; display:inline-flex; align-items:center; gap:8px; color:#d9c5e6; font-size:13px; border:1px solid var(--line); padding:8px 11px; border-radius:10px }
.admin-link i svg { width:16px; height:16px }
.mobile-nav { display:none }
main { padding-block:30px 45px; min-height:calc(100svh - 147px) }
.hero { isolation:isolate; position:relative; display:grid; align-content:center; min-height:430px; overflow:hidden; border-radius:25px; border:1px solid #ffffff21; padding:44px 6.1%; background:var(--panel) }
.hero-art,.hero-shade { position:absolute; inset:0; z-index:-1; width:100%; height:100% }
.hero-art { object-fit:cover; object-position:center 56% }
.hero-shade { background:linear-gradient(90deg,#100d1bf5 0%,#150d20d4 29%,#15102128 75%),linear-gradient(0deg,#100d1bd9,transparent 42%) }
.hero-content { max-width:510px }
.tag { display:inline-flex; align-items:center; gap:7px; color:#ffc5dd; background:#482d4c9c; border:1px solid #bf759e53; padding:6px 10px; font-size:11px; font-weight:750; letter-spacing:.11em; border-radius:999px }
.tag i svg { width:14px; height:14px }
.hero h1 { font-size:clamp(45px,6.8vw,82px); letter-spacing:.04em; line-height:1.12; margin:14px 0 }
.hero p { font-size:15px; color:#e0cfe1; max-width:33ch; line-height:1.7 }
.hero-meta { display:flex; align-items:center; gap:9px; color:#ffcadc; margin:16px 0 24px; font-size:12px }
.hero-meta span + span::before { content:"·"; margin-right:9px; color:#e1b6cc }
.actions { display:flex; flex-wrap:wrap; gap:10px }
.btn { border:1px solid transparent; border-radius:11px; padding:11px 16px; min-height:42px; display:inline-flex; justify-content:center; align-items:center; gap:7px; font-size:14px; font-weight:720; color:white; background:var(--grad); text-decoration:none }
.btn:hover { filter:brightness(1.13) }
.btn.ghost { color:#eee0f6; border-color:#b395bf49; background:#2c2039ad }
.btn.subtle { background:var(--panel2); color:#e1c9f0; border-color:var(--line) }
.btn i svg { width:17px; height:17px }
.dots { position:absolute; right:26px; bottom:22px; display:flex; gap:7px }
.dots button { border:0; background:transparent; padding:6px 0 }
.dots button::before { content:""; display:block; width:7px; height:7px; background:#e1b9d3a1; border-radius:12px }
.dots button.active::before { background:#ffc3dc; width:23px }
.section { margin-top:32px }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:17px }
.section-head h2 { font-size:23px; margin-top:4px; letter-spacing:.03em }
.text-link { display:inline-flex; align-items:center; gap:4px; border:0; padding:4px 0; background:transparent; color:var(--purple); font-size:13px; white-space:nowrap }
.text-link i svg { width:15px; height:15px }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px }
.movie { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#1a1525; min-width:0 }
.poster { display:block; padding:0; background:#2b203a; border:0; width:100%; aspect-ratio:1.86; position:relative; overflow:hidden; color:white }
.poster img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s }
.poster:hover img { transform:scale(1.05) }
.poster i { position:absolute; right:12px; bottom:12px; border-radius:50%; width:37px; height:37px; background:#1e1737ba; border:1px solid #ffffff4d; backdrop-filter:blur(8px) }
.poster i svg { width:17px; height:17px }
.movie-info { padding:13px 15px 16px; display:flex; justify-content:space-between; align-items:start; gap:6px }
.movie-info h3 { font-size:16px; overflow-wrap:anywhere }
.movie-info p { font-size:12px; color:var(--muted); margin-top:5px }
.bookmark { color:#bda2ce; border:0; background:none; padding:3px; display:grid; place-items:center; border-radius:5px }
.bookmark.on { color:#ffa6cf }
.bookmark.on svg { fill:#ffa6cf48 }
.game-callout { display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid #493356; background:linear-gradient(100deg,#32203d,#21182f); border-radius:16px }
.game-callout > i { width:48px; height:48px; border-radius:13px; color:#ffc0db; background:#4b2c52 }
.game-callout > i svg { width:25px; height:25px }
.game-callout p { color:var(--muted); font-size:13px; margin-top:4px }
.game-callout .btn { margin-left:auto; white-space:nowrap }
.page-title { margin:9px 0 26px }
.page-title h1 { font-size:clamp(32px,5vw,48px); margin:5px 0 6px }
.page-title p,.muted { color:var(--muted); font-size:14px; line-height:1.6 }
.filters { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { border:1px solid var(--line); color:#d5c7df; background:var(--panel); padding:7px 12px; border-radius:999px; font-size:13px }
.chip.active { border-color:#9a527f; color:#ffd0e7; background:#4e2948 }
input,textarea,select { background:#130f1d; color:var(--ink); border:1px solid #483954; padding:10px 12px; border-radius:9px; min-height:43px; width:100% }
.search { width:min(100%,270px) }
.empty,.notice { padding:18px; border:1px dashed #503b61; border-radius:12px; color:#c9b8d6; font-size:14px; line-height:1.6 }
.empty { grid-column:1 / -1 }
.footer { border-top:1px solid var(--line); color:var(--muted); font-size:12px; padding:21px 0 }
.footer .wrap { display:flex; justify-content:space-between; gap:8px }
.game-wrap { max-width:810px; margin:auto }
.game-banner { position:relative; isolation:isolate; overflow:hidden; border:1px solid #e390c884; border-radius:22px; padding:28px; background:linear-gradient(110deg,#a43e79,#6d3eaa 75%,#4d2c86) }
.game-banner::before { position:absolute; inset:0; z-index:-1; content:""; opacity:.52; background:linear-gradient(90deg,#773158,transparent),url('/art/city.svg') center 47%/cover }
.game-banner .eyebrow { color:#ffcae5 }
.game-banner h1 { font-size:clamp(34px,6vw,56px); margin:4px 0 }
.game-banner p { color:#f4dce9; font-size:14px }
.round-strip { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:24px 0 0; padding:14px 16px; border:1px solid #ffdefc49; border-radius:13px; background:#21113768 }
.round-strip span { display:block; font-size:11px; color:#f4c8e7; margin-bottom:4px }
.round-strip strong { font-size:19px; font-variant-numeric:tabular-nums }
.round-strip time { color:#ffdfac; font-size:25px; font-weight:780; font-variant-numeric:tabular-nums }
.pick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 }
.pick { text-align:left; display:flex; align-items:center; gap:13px; min-height:91px; border:1px solid #3f2f51; border-radius:14px; color:#fff; background:#21192e; padding:14px 16px }
.pick:hover,.pick.chosen { border-color:#e47db4; background:#442645 }
.pick:disabled { opacity:.73 }
.pick strong { width:51px; height:51px; border-radius:12px; display:grid; place-items:center; color:#ffd0e7; font-size:28px; background:#503259 }
.pick:nth-child(2) strong,.pick:nth-child(4) strong { color:#e3c8ff; background:#433164 }
.pick span { font-weight:750; white-space:nowrap }
.pick small { display:block; color:var(--muted); margin-top:3px; font-size:12px; font-weight:400 }
.game-submit { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px }
.game-submit .btn { min-width:120px }
.history { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.history-row { display:flex; align-items:center; gap:10px; min-height:55px; padding:9px 14px }
.history-row + .history-row { border-top:1px solid var(--line) }
.history-row > span:first-child { font-size:13px; color:#dccde5; flex:1; font-variant-numeric:tabular-nums }
.bubble { display:inline-grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#f8e7ff; background:#4e386a; font-weight:750 }
.pill { font-size:12px; padding:4px 8px; border-radius:7px; background:#3b2a4d; color:#efd2ff; white-space:nowrap }
.pill.good { background:#1f3d37; color:#a8edd2 }
.pill.warn { background:#4c3528; color:#ffd4a5 }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:15px }
.stat b { display:block; font-size:26px; color:#ffb2d4 }
.stat span { font-size:13px; color:var(--muted) }
.admin-grid { display:grid; grid-template-columns:minmax(275px,1fr) minmax(0,1.45fr); gap:19px; align-items:start }
.box { border-radius:17px; border:1px solid var(--line); background:var(--panel); padding:18px; min-width:0 }
.box h2 { font-size:19px; margin-bottom:12px }
.fields { display:grid; gap:12px }
.fields label { display:grid; gap:5px; font-size:13px; color:#e7d7ef }
.fields textarea { resize:vertical }
.fields input[type=file] { font-size:12px }
.fields input::file-selector-button { color:white; background:#543664; padding:6px 8px; border:0; border-radius:5px; margin-right:8px }
.fields progress { width:100%; accent-color:#db76bb }
.manage-item { padding:13px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center }
.manage-item + .manage-item { border-top:1px solid var(--line) }
.manage-item h3 { font-size:15px; overflow-wrap:anywhere; margin-bottom:4px }
.manage-item .actions { gap:6px }
.manage-item .btn { font-size:12px; padding:6px 8px; min-height:33px }
#player { background:#1a1426; color:var(--ink); border:1px solid var(--line); border-radius:17px; width:min(860px,calc(100vw - 30px)); padding:0; max-height:90svh; overflow:auto }
#player::backdrop { background:#090612d9; backdrop-filter:blur(7px) }
.player-head,.player-foot { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:13px 16px }
.player-head h2 { font-size:18px }
.player-foot { align-items:start; flex-wrap:wrap }
.player-foot p { color:var(--muted); font-size:13px; flex:1 1 235px; line-height:1.5 }
#player video { width:100%; max-height:65svh; display:block; background:#080710; aspect-ratio:16/9 }
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:12; max-width:calc(100% - 36px); padding:11px 15px; background:#39284b; border:1px solid #925d9d; border-radius:10px; color:#fff; font-size:14px; box-shadow:0 8px 22px #0005 }
@media (max-width:850px) {
  .wrap { width:calc(100% - 40px) }
  .nav-link { padding:8px 10px }
  .hero { min-height:365px }
}
@media (max-width:680px) {
  .wrap { width:calc(100% - 28px) }
  .top-in { height:59px }
  .brand img { width:35px; height:35px }
  .brand b { font-size:15px }
  .brand small { font-size:9px }
  .desktop-nav { display:none }
  .mobile-nav { position:fixed; z-index:6; bottom:0; left:0; right:0; background:#171121f6; backdrop-filter:blur(14px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:4px 5px calc(5px + env(safe-area-inset-bottom)) }
  .mobile-nav .nav-link { flex-direction:column; justify-content:center; gap:4px; font-size:11px; padding:7px 1px; border-radius:9px }
  .mobile-nav .nav-link i svg { width:19px; height:19px }
  main { padding-block:17px 27px; min-height:calc(100svh - 180px) }
  .footer { margin-bottom:calc(62px + env(safe-area-inset-bottom)); padding-block:14px }
  .hero { min-height:330px; border-radius:17px; padding:25px 19px 38px }
  .hero-shade { background:linear-gradient(90deg,#100d1be6,#150d2066 74%),linear-gradient(0deg,#100d1bc9,transparent 50%) }
  .hero-art { object-position:64% center }
  .hero h1 { font-size:45px; margin:12px 0 }
  .hero p { font-size:13px }
  .hero-meta { margin:12px 0 17px }
  .dots { right:16px; bottom:11px }
  .section { margin-top:24px }
  .section-head h2 { font-size:20px }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .movie { border-radius:12px }
  .movie-info { padding:10px }
  .movie-info h3 { font-size:14px }
  .movie-info p { font-size:11px }
  .poster i { width:31px; height:31px; bottom:7px; right:7px }
  .game-callout { gap:9px; padding:12px; flex-wrap:wrap }
  .game-callout > i { width:38px; height:38px }
  .game-callout h3 { font-size:15px }
  .game-callout p { font-size:11px }
  .game-callout .btn { padding-inline:10px; min-height:34px; font-size:12px }
  .filters { align-items:stretch; flex-direction:column }
  .search { width:100% }
  .game-banner { padding:18px 15px; border-radius:17px }
  .pick { gap:9px; min-height:77px; padding:10px }
  .pick strong { width:41px; height:41px; font-size:23px }
  .pick small { font-size:11px }
  .admin-grid { grid-template-columns:1fr }
  .toast { bottom:calc(69px + env(safe-area-inset-bottom)) }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important }
}
.top-actions,.account-tools { display:flex; align-items:center; justify-content:space-between; gap:8px }
.account-tools { padding:12px; margin:0 0 16px; border:1px solid var(--line); border-radius:13px; background:var(--panel) }
.auth-wrap { width:min(100%,460px); margin:15px auto 40px }
.auth-foot { padding-top:14px; font-size:13px; color:var(--muted) }
.form-message { color:#ffb8c7; font-size:13px; line-height:1.5 }
@media (max-width:390px) {
  .account-tools { align-items:flex-start; flex-direction:column }
}
.editor-tools { align-items:center; margin-bottom:16px }
.editor-help { margin:15px 0 }
.editor-texts,.editor-backgrounds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px }
.editor-line,.editor-background { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); min-width:0 }
.editor-line label { display:grid; gap:5px; color:#f1deef; font-size:13px; overflow-wrap:anywhere }
.editor-line textarea { resize:vertical }
.editor-line button { justify-self:start }
.editor-preview { width:100%; height:110px; object-fit:cover; object-position:66% 36%; border-radius:8px }
.editor-background input[type=color] { width:60px; padding:3px }
.editor-background .btn,.editor-line .btn { min-height:32px; padding:5px 8px; font-size:12px }
@media(max-width:600px) { .editor-texts,.editor-backgrounds { grid-template-columns:1fr } }

[data-page] .hero h1,[data-page] .page-title h1,[data-page] .game-banner h1 { overflow-wrap:anywhere }

.member-search { display:flex; gap:7px; margin:12px 0 }
.member-search .btn { flex:none }
.member-form { margin-top:14px }
.member-stats { margin-bottom:12px }
#member-detail { scroll-margin-top:85px }

.demo-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px }
.demo-summary h2 { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:7px }
.demo-summary p:last-child,.demo-verdict { margin-top:9px }
[data-page=awareness] .notice p { margin-top:7px }
@media(max-width:600px) { .demo-results { grid-template-columns:1fr } }

.fields .demo-toggle { display:flex; align-items:center; gap:9px }
.demo-toggle input[type=checkbox] { width:18px; height:18px; min-height:0; accent-color:var(--pink) }

.sandbox-label { color:#fde0b0; background:#291d27; text-align:center; padding:5px 12px; font-size:.8rem; }