:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #120f20;
  --panel: #1d1830;
  --panel-2: #251e3a;
  --line: rgba(255,255,255,.09);
  --text: #fff9f7;
  --muted: #aaa1bd;
  --pink: #f2a0c7;
  --pink-soft: rgba(242,160,199,.13);
  --gold: #f3d9a1;
  --green: #a8d9bc;
  --danger: #f19b9b;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); overscroll-behavior: none; }
body { min-height: 100svh; background: radial-gradient(ellipse at 50% -20%, rgba(127,91,161,.23), transparent 48%), var(--bg); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { width: min(100%, 620px); min-height: 100svh; margin: 0 auto; padding: calc(8px + var(--safe-top)) 16px calc(86px + var(--safe-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; }
.brand { display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:14px; background:linear-gradient(145deg,#4a2f54,#2c2545); font-size:20px; box-shadow:0 5px 18px rgba(242,160,199,.12); }
.brand b,.brand small { display:block; }
.brand b { font-size:14px; letter-spacing:.02em; }
.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
.profile-chip { display:flex; align-items:center; gap:7px; max-width:48%; padding:5px 9px 5px 5px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.045); }
.avatar-letter { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--pink-soft); color:var(--pink); font-size:12px; font-weight:800; }
.profile-name { overflow:hidden; color:#e8deed; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.view { animation: appear .18s ease-out; }
@keyframes appear { from { opacity:.45; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.eyebrow { margin:0 0 7px; color:#d7a8ce; font-size:9px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(25px,7vw,34px); line-height:1.08; letter-spacing:-.035em; }
h2 { margin:0; font-size:20px; letter-spacing:-.02em; }
h3 { margin:0; font-size:14px; }
.subtext { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:22px 1px 10px; }
.section-head .subtext { margin-top:3px; }
.hero { position:relative; overflow:hidden; margin-top:15px; padding:20px; border:1px solid rgba(246,207,226,.13); border-radius:23px; background:radial-gradient(circle at 88% 8%,rgba(225,151,195,.18),transparent 34%),linear-gradient(145deg,#302442,#201b35 62%,#1c1a2f); }
.hero::after { content:"✿"; position:absolute; right:13px; bottom:-34px; color:rgba(248,195,219,.09); font-size:150px; line-height:1; pointer-events:none; }
.hero-sticker { position:absolute; right:18px; bottom:10px; z-index:0; color:rgba(248,195,219,.35); font-size:51px; line-height:1; transform:rotate(-14deg); animation:hero-bloom 3.2s ease-in-out infinite; }
@keyframes hero-bloom { 50% { transform:rotate(-4deg) translateY(-3px); color:rgba(248,195,219,.52); } }
.hero-content { position:relative; z-index:1; max-width:390px; }
.hero h1 { max-width:330px; }
.hero .subtext { max-width:310px; }
.hero-actions { display:flex; gap:8px; margin-top:17px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.stat-card { min-width:0; padding:11px 8px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); text-align:center; }
.stat-card b { display:block; font-size:17px; }
.stat-card small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.feature-card { display:flex; min-height:104px; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:13px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); text-align:left; transition:transform .12s ease,border-color .12s ease; }
.feature-card:active { transform:scale(.985); border-color:rgba(242,160,199,.4); }
.feature-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:11px; background:var(--pink-soft); color:var(--pink); font-size:16px; }
.feature-card b { margin-top:10px; font-size:12px; }
.feature-card small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.primary,.secondary,.quiet,.danger-button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:0 14px; border:0; border-radius:13px; font-size:12px; font-weight:800; text-decoration:none; }
.primary { background:linear-gradient(110deg,#f4a5c8,#e6a9d1 55%,#b9a4e8); color:#24172c; box-shadow:0 6px 20px rgba(224,140,185,.16); }
.secondary { border:1px solid rgba(242,160,199,.22); background:var(--pink-soft); color:#ffd5e8; }
.quiet { border:1px solid var(--line); background:rgba(255,255,255,.045); color:#e9e0ef; }
.danger-button { background:rgba(241,155,155,.13); color:#ffb7b7; }
.primary:disabled,.secondary:disabled,.quiet:disabled { opacity:.48; cursor:not-allowed; }
.full { width:100%; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.panel { margin-top:12px; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.game-list { display:grid; gap:9px; margin-top:14px; }
.game-card { display:flex; align-items:center; gap:12px; width:100%; padding:13px; border:1px solid var(--line); border-radius:17px; background:var(--panel); text-align:left; }
.game-card .feature-icon { width:41px; height:41px; flex:0 0 auto; font-size:19px; }
.game-card-copy { min-width:0; flex:1; }
.game-card-copy b,.game-card-copy small { display:block; }
.game-card-copy small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.arrow { color:#c8b7d2; font-size:19px; }
.question-card { margin-top:14px; padding:17px; border:1px solid rgba(246,207,226,.16); border-radius:19px; background:linear-gradient(145deg,#2a223d,#1d192d); }
.question-progress { color:var(--pink); font-size:10px; font-weight:800; letter-spacing:.1em; }
.question-title { margin:12px 0 14px; font-size:18px; line-height:1.35; }
.answer-list { display:grid; gap:8px; }
.answer-button { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.045); text-align:left; font-size:12px; line-height:1.4; }
.answer-button.correct { border-color:rgba(168,217,188,.6); background:rgba(97,170,123,.18); }
.answer-button.wrong { border-color:rgba(241,155,155,.5); background:rgba(241,155,155,.1); }
.filter-search,.field input,.field select,.field textarea,.search-input { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; outline:none; background:#181426; color:var(--text); font-size:12px; }
.field textarea { min-height:82px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus,.search-input:focus { border-color:rgba(242,160,199,.55); }
.field { display:grid; gap:6px; margin:10px 0; }
.field label { color:#d6cce0; font-size:10px; font-weight:750; }
.field small,.help-note { color:var(--muted); font-size:10px; line-height:1.45; }
.filter-group { margin-top:13px; }
.filter-group h3 { margin-bottom:8px; color:#e8d7ea; font-size:11px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { min-height:32px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:#ded4e4; font-size:10px; }
.chip.selected { border-color:rgba(242,160,199,.55); background:var(--pink-soft); color:#ffd9e9; }
.results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.result-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.result-card button { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; }
.result-card img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; background:#29233a; }
.result-copy { padding:9px; }
.result-copy b { display:-webkit-box; overflow:hidden; min-height:31px; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:11px; line-height:1.4; }
.result-copy small { display:block; margin-top:5px; color:var(--muted); font-size:9px; line-height:1.4; }
.detail-cover { display:block; width:min(58%,230px); max-height:310px; margin:12px auto; border-radius:16px; object-fit:cover; background:#29233a; }
.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.fact { padding:9px; border-radius:11px; background:rgba(255,255,255,.045); }
.fact small,.fact b { display:block; }
.fact small { color:var(--muted); font-size:9px; }
.fact b { margin-top:4px; font-size:11px; line-height:1.4; }
.description { margin-top:12px; color:#ded4e4; font-size:11px; line-height:1.6; white-space:pre-wrap; }
.media-tabs { display:flex; gap:7px; padding:4px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.media-tabs button { flex:1; min-height:36px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:11px; }
.media-tabs button.selected { background:var(--pink-soft); color:#ffd9e9; font-weight:800; }
.media-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.media-card img { display:block; width:100%; aspect-ratio:1/1.12; object-fit:cover; background:#29233a; }
.media-card footer { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 9px; font-size:10px; }
.media-card footer input { accent-color:#e99ac1; }
.chat-log { display:grid; gap:9px; max-height:48svh; overflow:auto; padding:2px; }
.chat-bubble { max-width:88%; padding:10px 12px; border:1px solid var(--line); border-radius:15px 15px 15px 4px; background:var(--panel-2); color:#f0e7f0; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-bubble.mine { justify-self:end; border-radius:15px 15px 4px 15px; background:var(--pink-soft); }
.chat-compose { display:flex; align-items:end; gap:7px; margin-top:10px; }
.chat-compose textarea { flex:1; min-height:42px; max-height:110px; padding:11px; border:1px solid var(--line); border-radius:13px; background:#181426; color:var(--text); resize:vertical; }
.leader-list { display:grid; gap:7px; margin-top:12px; }
.leader { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); }
.leader-rank { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:var(--pink-soft); color:#ffd9e9; font-size:10px; font-weight:850; }
.leader-name { flex:1; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.leader b { color:var(--gold); font-size:12px; }
.admin-section { margin-top:13px; padding:14px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.035); }
.admin-section h3 { margin-bottom:8px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.toggle-row:last-child { border-bottom:0; }
.toggle-row span { font-size:11px; }
.toggle-row small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.toggle-row input { width:18px; height:18px; accent-color:#e99ac1; }
.route-card { margin:8px 0; padding:10px; border:1px solid var(--line); border-radius:13px; background:#191527; }
.route-head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.route-head b { font-size:11px; }
.route-head a { color:var(--pink); font-size:9px; text-decoration:none; }
.route-controls { display:flex; align-items:center; gap:7px; margin-top:8px; }
.route-controls input[type=time] { min-height:35px; padding:5px 8px; border:1px solid var(--line); border-radius:9px; background:#120f20; color:var(--text); }
.route-controls label { display:flex; align-items:center; gap:5px; margin-right:auto; color:var(--muted); font-size:9px; }
.route-controls input[type=checkbox] { accent-color:#e99ac1; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.check-row { display:flex; align-items:center; gap:7px; padding:8px; border-radius:10px; background:rgba(255,255,255,.04); color:#e6dce8; font-size:10px; }
.check-row input { accent-color:#e99ac1; }
.empty-state { margin-top:12px; padding:17px; border:1px dashed rgba(255,255,255,.15); border-radius:15px; color:var(--muted); text-align:center; font-size:11px; line-height:1.5; }
.notice { margin-top:10px; padding:10px 12px; border:1px solid rgba(242,160,199,.22); border-radius:12px; background:rgba(242,160,199,.09); color:#f4d7e8; font-size:11px; line-height:1.4; }
.notice.error { border-color:rgba(241,155,155,.25); background:rgba(241,155,155,.08); color:#ffd0d0; }
.toast { position:fixed; z-index:20; right:16px; bottom:calc(78px + var(--safe-bottom)); left:16px; width:max-content; max-width:calc(100% - 32px); margin:auto; padding:10px 14px; transform:translateY(12px); border:1px solid var(--line); border-radius:13px; background:#302743; box-shadow:0 10px 32px rgba(0,0,0,.35); color:#fff; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; font-size:11px; }
.toast.show { transform:translateY(0); opacity:1; }
.bottom-nav { position:fixed; z-index:10; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:7px max(10px,calc((100vw - 600px)/2)) calc(7px + var(--safe-bottom)); border-top:1px solid rgba(255,255,255,.08); background:rgba(20,16,32,.94); backdrop-filter:blur(18px); }
.nav-item { display:grid; justify-items:center; gap:3px; min-height:48px; padding:5px 2px; border:0; border-radius:12px; background:transparent; color:#8f879d; }
.nav-item[hidden] { display:none; }
.nav-item span { font-size:17px; line-height:1; }
.nav-item small { font-size:9px; }
.nav-item.active { background:var(--pink-soft); color:#ffd5e8; }
.nav-item .nav-glyph { display:grid; place-items:center; width:24px; height:23px; }
.nav-item svg,.feature-icon svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feature-icon svg { width:21px; height:21px; }
.chosen-emoji { font-size:21px; line-height:1; }
.nav-item .chosen-emoji { font-size:19px; }
.nav-item { transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-item.active .nav-glyph { transform:translateY(-1px); }
.game-card { transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease; }
.game-card:active { transform:scale(.985); border-color:rgba(242,160,199,.45); }
.game-card-sakura_pairs { background:radial-gradient(circle at 92% 5%,rgba(255,174,211,.12),transparent 38%),var(--panel); }
.game-card-spirit_dash { background:radial-gradient(circle at 92% 5%,rgba(176,227,219,.13),transparent 38%),var(--panel); }
.profile-card,.referral-card,.appearance-card { margin-top:12px; padding:15px; border:1px solid var(--line); border-radius:19px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }
.profile-identity { display:flex; align-items:center; gap:11px; }
.profile-avatar { display:grid; place-items:center; width:51px; height:51px; flex:0 0 auto; overflow:hidden; border:1px solid rgba(248,176,209,.38); border-radius:17px; background:linear-gradient(145deg,#e99bc3,#a99ce0); color:#281b32; font-size:19px; font-weight:900; object-fit:cover; }
.profile-avatar img,.avatar-letter img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-name-block { display:grid; min-width:0; gap:4px; }
.profile-name-block b { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.profile-name-block small,.referral-count { color:var(--muted); font-size:10px; }
.profile-sparkle { margin-left:auto; color:var(--gold); font-size:20px; animation:sparkle 2.3s ease-in-out infinite; }
@keyframes sparkle { 50% { transform:rotate(18deg) scale(1.12); opacity:.68; } }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:13px; padding-top:11px; border-top:1px solid var(--line); text-align:center; }
.profile-stats b,.profile-stats small { display:block; }
.profile-stats b { font-size:16px; }
.profile-stats small { margin-top:3px; color:var(--muted); font-size:9px; }
.referral-card { overflow:hidden; position:relative; background:radial-gradient(circle at 100% 0,rgba(246,204,144,.14),transparent 44%),linear-gradient(145deg,rgba(88,57,91,.72),rgba(39,31,59,.88)); }
.referral-card h2 { margin-top:3px; }
.referral-card p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.referral-actions { display:flex; gap:8px; margin-top:12px; }
.referral-actions > * { flex:1; padding-inline:8px; }
.referral-count { display:block; margin-top:10px; }
.appearance-card .panel-title { margin-bottom:12px; }
.appearance-mark { color:var(--pink); font-size:22px; }
.theme-switch { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:4px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.12); }
.theme-option { min-height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:11px; font-weight:750; }
.theme-option.selected { background:var(--pink-soft); color:var(--text); box-shadow:inset 0 0 0 1px rgba(242,160,199,.2); }
.wallpaper-title { margin:14px 0 8px; color:var(--muted); font-size:10px; font-weight:750; }
.wallpaper-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.wallpaper-choice { display:grid; align-items:end; min-height:57px; overflow:hidden; padding:0 4px 6px; border:1px solid var(--line); border-radius:12px; color:#fff; font-size:9px; font-weight:800; text-shadow:0 1px 3px #171126; }
.wallpaper-choice.selected { outline:2px solid var(--pink); outline-offset:1px; }
.wallpaper-sakura { background:radial-gradient(circle at 70% 25%,#ffd4df 0 8%,transparent 9%),linear-gradient(135deg,#43284e,#c87d9f 55%,#292144); }
.wallpaper-dawn { background:radial-gradient(circle at 70% 25%,#fff0c6 0 12%,transparent 13%),linear-gradient(145deg,#44375f,#efa9ac 57%,#585081); }
.wallpaper-sea { background:radial-gradient(ellipse at 50% 25%,#a7eff0 0 10%,transparent 12%),linear-gradient(145deg,#204a62,#6bbbc0 54%,#252d55); }
.wallpaper-night { background:radial-gradient(circle at 72% 23%,#f8e7b9 0 9%,transparent 10%),linear-gradient(145deg,#161c45,#5d558f 55%,#24203d); }
.appearance-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.appearance-actions .quiet { min-height:36px; flex:1; padding-inline:8px; font-size:10px; }
.avatar-letter { overflow:hidden; }
.arcade-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 12px; }
.mini-back { min-height:34px; padding-inline:10px; font-size:10px; }
.arcade-scoreline { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0; }
.arcade-scoreline > div { display:grid; gap:4px; padding:10px 6px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.04); text-align:center; }
.arcade-scoreline small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.08em; }
.arcade-scoreline b { font-size:16px; font-variant-numeric:tabular-nums; }
.memory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:440px; margin:14px auto 0; perspective:800px; }
.memory-card { position:relative; display:grid; place-items:center; aspect-ratio:1/1.05; padding:0; border:1px solid rgba(248,174,205,.2); border-radius:16px; background:linear-gradient(145deg,#392b4d,#241f3b); color:var(--text); box-shadow:0 5px 13px rgba(0,0,0,.13); transition:transform .24s ease,background .24s ease,border-color .24s ease; }
.memory-card:not(:disabled):active { transform:scale(.94) rotateY(6deg); }
.memory-card .memory-front,.memory-card .memory-back { grid-area:1/1; transition:opacity .16s ease,transform .2s ease; }
.memory-card .memory-front { transform:scale(.5) rotate(-18deg); opacity:0; font-size:clamp(24px,8vw,37px); }
.memory-card .memory-back { color:#f5afcf; font-size:25px; }
.memory-card.is-open,.memory-card.is-matched { border-color:rgba(247,195,216,.6); background:linear-gradient(145deg,#694a70,#392d51); }
.memory-card.is-open .memory-front,.memory-card.is-matched .memory-front { transform:scale(1); opacity:1; }
.memory-card.is-open .memory-back,.memory-card.is-matched .memory-back { transform:scale(.6); opacity:0; }
.memory-card.is-matched { box-shadow:0 0 20px rgba(255,173,209,.18); }
.arcade-footnote { margin:12px 2px 0; color:var(--muted); font-size:10px; line-height:1.5; text-align:center; }
.spirit-arena { position:relative; width:min(100%,420px); aspect-ratio:1/1; margin:13px auto; }
.spirit-orbit { position:absolute; inset:5%; border:1px dashed rgba(248,183,218,.17); border-radius:50%; pointer-events:none; }
.orbit-one { animation:orbit 22s linear infinite; }
.orbit-two { inset:17%; border-color:rgba(199,174,248,.14); animation:orbit 16s linear reverse infinite; }
@keyframes orbit { to { transform:rotate(360deg); } }
.spirit-board { position:absolute; inset:15%; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.spirit-cell { display:grid; place-items:center; padding:0; border:1px solid rgba(238,215,248,.13); border-radius:19px; background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.08),transparent 54%),rgba(37,31,59,.8); color:rgba(255,202,225,.44); font-size:24px; transition:transform .12s ease,background .15s ease,box-shadow .15s ease; }
.spirit-cell:active { transform:scale(.9); }
.spirit-cell.is-target { border-color:rgba(255,229,164,.64); background:radial-gradient(circle,rgba(255,230,163,.3),rgba(252,166,207,.1) 56%,rgba(37,31,59,.85)); color:#fff0b7; box-shadow:0 0 24px rgba(255,224,159,.25),inset 0 0 20px rgba(255,223,155,.12); animation:target-pop .5s ease-in-out infinite alternate; }
@keyframes target-pop { to { transform:scale(1.05); } }
.arcade-result { margin-top:12px; padding:21px 16px; border:1px solid rgba(246,207,226,.17); border-radius:22px; background:radial-gradient(circle at 50% 0,rgba(247,164,207,.14),transparent 46%),linear-gradient(150deg,var(--panel-2),var(--panel)); text-align:center; }
.arcade-result h1 { font-size:clamp(23px,6vw,30px); }
.result-bloom { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 12px; border:1px solid rgba(246,177,211,.28); border-radius:17px; background:var(--pink-soft); color:var(--pink); font-size:23px; animation:bloom-in .45s cubic-bezier(.18,.8,.25,1.2) both; }
@keyframes bloom-in { from { opacity:0; transform:scale(.4) rotate(-35deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.result-award { display:grid; gap:4px; width:max-content; max-width:100%; margin:16px auto 10px; padding:12px 18px; border:1px solid rgba(246,217,158,.24); border-radius:15px; background:rgba(246,217,158,.08); color:var(--gold); }
.result-award b { font-size:24px; }
.result-award small,.result-extra { color:var(--muted); font-size:10px; }
.result-extra { margin:8px 0 4px; }
html[data-theme="light"] { color-scheme:light; --bg:#fff7fb; --panel:#fffafd; --panel-2:#fff2f8; --line:rgba(90,58,85,.13); --text:#36283f; --muted:#77697d; --pink:#c64f89; --pink-soft:rgba(198,79,137,.12); --gold:#9c7020; --green:#2e8053; }
html[data-theme="light"] body { background:#fff7fb; }
html[data-theme="light"] .bottom-nav { border-color:rgba(103,67,98,.12); background:rgba(255,249,252,.94); }
html[data-theme="light"] .nav-item.active { color:#8c285e; }
html[data-theme="light"] .profile-chip,html[data-theme="light"] .quiet { color:var(--text); }
html[data-theme="light"] .hero { border-color:rgba(151,84,124,.18); background:radial-gradient(circle at 88% 8%,rgba(226,164,195,.35),transparent 36%),linear-gradient(145deg,#fff0f7,#f9e6f0 62%,#eee8fb); }
html[data-theme="light"] .primary { color:#fff; background:linear-gradient(110deg,#bf5087,#a35eaa 55%,#7076bd); }
html[data-theme="light"] .secondary { color:#8b3868; }
html[data-theme="light"] .question-card { background:linear-gradient(145deg,#fff1f7,#fffafd); }
html[data-theme="light"] .answer-button,html[data-theme="light"] .feature-card,html[data-theme="light"] .game-card,html[data-theme="light"] .panel,html[data-theme="light"] .stat-card,html[data-theme="light"] .leader,html[data-theme="light"] .profile-card,html[data-theme="light"] .appearance-card { background-color:rgba(255,255,255,.84); }
html[data-theme="light"] .answer-button,html[data-theme="light"] .feature-card,html[data-theme="light"] .game-card { color:var(--text); }
html[data-theme="light"] .chat-bubble { color:var(--text); }
html[data-theme="light"] .filter-search,html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea,html[data-theme="light"] .search-input,html[data-theme="light"] .chat-compose textarea { background:#fff; color:var(--text); }
html[data-theme="light"] .nav-item { color:#796d80; }
html[data-theme="light"] .nav-item.active { color:#8c285e; background:rgba(198,79,137,.12); }
html[data-theme="light"] .arcade-result { background:radial-gradient(circle at 50% 0,rgba(247,164,207,.22),transparent 46%),linear-gradient(150deg,#fff1f7,#fffafd); }
html[data-theme="light"] .eyebrow { color:#985780; }
html[data-theme="light"] .description,html[data-theme="light"] .fact b,html[data-theme="light"] .filter-group h3,html[data-theme="light"] .chip,html[data-theme="light"] .media-tabs button,html[data-theme="light"] .chat-bubble,html[data-theme="light"] .toggle-row span,html[data-theme="light"] .route-head b { color:#49384e; }
html[data-theme="light"] .question-progress,html[data-theme="light"] .leader b { color:#8c5e20; }
html[data-theme="light"] .result-copy small,html[data-theme="light"] .fact small { color:#77697d; }
html[data-theme="light"] .admin-section,html[data-theme="light"] .route-card,html[data-theme="light"] .game-card,html[data-theme="light"] .media-card,html[data-theme="light"] .result-card { color:var(--text); }
html[data-theme="light"] .wallpaper-title { color:#77697d; }
html[data-theme="light"] .theme-switch { background:rgba(91,57,85,.06); }
html[data-theme="light"] .hero-sticker { position:absolute; right:17px; bottom:10px; color:rgba(194,91,145,.32); font-size:50px; transform:rotate(-14deg); }
html[data-wallpaper="dawn"] body { background:radial-gradient(ellipse at 80% 2%,rgba(249,191,167,.17),transparent 35%),radial-gradient(ellipse at 5% 85%,rgba(131,107,167,.14),transparent 40%),var(--bg); }
html[data-wallpaper="sea"] body { background:radial-gradient(ellipse at 95% 5%,rgba(102,204,201,.17),transparent 39%),radial-gradient(ellipse at 0 85%,rgba(84,132,178,.17),transparent 42%),var(--bg); }
html[data-wallpaper="night"] body { background:radial-gradient(ellipse at 80% 0,rgba(137,119,220,.22),transparent 38%),radial-gradient(ellipse at 10% 60%,rgba(75,59,128,.17),transparent 43%),#100e22; }
html[data-wallpaper="custom"] body { background:linear-gradient(rgba(18,15,32,.78),rgba(18,15,32,.82)),var(--custom-wallpaper) center/cover fixed; }
html[data-theme="light"][data-wallpaper="custom"] body { background:linear-gradient(rgba(255,247,251,.68),rgba(255,247,251,.79)),var(--custom-wallpaper) center/cover fixed; }
.hidden { display:none !important; }
@media (min-width:540px) { .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .results-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-height:680px) { .hero { padding:16px; } .section-head { margin-top:17px; } .bottom-nav { padding-top:4px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }