/* Hokage Saga / Moonlit gold. Shared finish for portal, public, auth and administration.
   Static lighting; no perpetual decorative animation or full-page blur. */
:root { 
  --ink-950: #060c18; --ink-900: #0a1425; --ink-800: #111c30; --ink-700: #1d2b40;
  --text: #eef1f7; --text-hi: #fff8e8; --text-soft: #d0daeb; --text-mute: #adbed8; --text-faint: #8fa4c4;
  --glass-1: #0a13269e; --glass-2: #101a2bb8; --glass-3: #101c30f5; --glass-solid: #101b2f;
  --glass-border: #e9b666b3; --glass-border-hi: #ffe2a3;
  --glass-shadow: 0 12px 30px #00000040,0 0 17px #ffb33c15,inset 0 1px 1px #fff2cb99,inset 0 -1px 2px #ffb04b66;
  --glow-cyan: 0 0 22px #ffb84d28; --glow-violet: 0 0 24px #ff963e24;
  --grad-accent: linear-gradient(110deg,#fff0b1 0%,#ffd16f 34%,#ffc24e 65%,#ff963e 100%);
  --focus: 0 0 0 3px #ffb84d40; --sidebar-w: 224px;
  --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --ease: cubic-bezier(.22,.68,.24,1);
 }
body { background: var(--ink-950); }
.scene { background: #07111f url('/ui/img/bg/ninja-village-night.webp') center / cover no-repeat; }
.scene::before { background: linear-gradient(90deg,#03081126,#03081105 65%),linear-gradient(180deg,#03081108 40%,#03081124); }
.scene .particles { display: none; }
h1, .hello h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(1.9rem,3.2vw,2.7rem); line-height: 1.22; }
h2 { font-size: clamp(1.18rem,2vw,1.5rem); letter-spacing: -.02em; }
h3 { font-size: 1.08rem; letter-spacing: -.015em; }
.grad-text { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.page-head { margin: 8px 0 24px; padding: 12px 0 20px; border-bottom: 1px solid #ffe4b124; }
.page-head h1 { margin-bottom: 8px; text-shadow: 0 3px 20px #041a324d; }
.page-head p { font-size: .97rem; margin-bottom: 0; color: var(--text-soft); }
.page-head .eyebrow, .hello .eyebrow { color: #fadeab; font-size: .7rem; letter-spacing: .22em; }
.page-head .eyebrow::before { width: 22px; box-shadow: none; }
/* Surfaces: restrained highlights on every page; stronger lighting on featured cards. */
.glass { background: linear-gradient(132deg,#ffd89b25,#16203018 28%,#090f1d54 72%,#ba782414),var(--glass-1); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass::before { background: linear-gradient(120deg,#fff4c6,#ffbd5b70 22%,#e9b76655 62%,#ffdd87 92%,#fff4d7); }
.glass::after { inset: -1px; background: radial-gradient(ellipse 24px 2px at 91% 100%,#fff9eabb,transparent),radial-gradient(ellipse 2px 14px at 91% 100%,#fff2cb99,transparent),radial-gradient(ellipse 21px 4px at 10% 0%,#fff7dfdd,#ffd17b70 40%,transparent),radial-gradient(ellipse 95px 37px at 8% 0%,#ffb23d40,transparent 90%),radial-gradient(ellipse 100px 32px at 93% 100%,#ff951c55,transparent 90%); }
.glass--raised { background: linear-gradient(130deg,#ffd59122,transparent 44%,#ff963e12),var(--glass-2); }
.glass--flat { background: #101b2c9c; box-shadow: inset 0 1px 0 #fff4dc16; }
.glass .glass { background-color: #0d182b8c; box-shadow: none; }
.glass--overlay, .glass.modal, .search-results, .bell-menu { background: #111c2df7; border-color: #ffd18b88; }
.glass--hover { transition: transform .2s var(--ease), border-color .2s; }
.glass--hover:hover { box-shadow: var(--glass-shadow); border-color: var(--glass-border-hi); }
/* Shared app frame */
.app { gap: 26px; padding: 18px; }
.content { width: 100%; max-width: 1600px; margin-inline: auto; }
.sidebar { top: 18px; height: calc(100dvh - 36px); padding: 15px 11px; border-radius: 22px; background: linear-gradient(138deg,#ffe2ab26,#0c142b8c 25%,#101726b8 72%,#cd8c3624),#0a1224a6; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #edc27c; box-shadow: 0 0 0 5px #ffc46a08,0 0 0 6px #ffc46a30,0 12px 36px #0006,inset 1px 1px 3px #fff3cf99,inset -1px -2px 10px #ffc56b66; }
.sidebar::after { background: radial-gradient(ellipse 100% 90px at 0 100%,#efbf6520,transparent); }
.sidebar .brand { font-size: 1.05rem; letter-spacing: -.01em; gap: 10px; padding: 3px 8px 9px; }
.sidebar .brand .seal { width: 38px; height: 40px; }
.sidebar .tagline { font-size: .82rem; margin-bottom: 10px; }
.seal { color: #122741; border: 1px solid #fff0d566; box-shadow: inset 0 1px 0 #fff9,0 5px 20px #ffb84d26; }
.lb-xu { margin: 10px 2px 13px; padding: 10px; border-radius: 14px; background: linear-gradient(120deg,#f3c97a24,#ffcf8a13); border-color: #ffe6b83d; }
.lb-xu-label { font-size: .75rem; letter-spacing: .03em; text-transform: none; color: var(--text-soft); }
.lb-xu-val { font-size: 1.1rem; }
.lb-xu .chip-ico { width: 38px; height: 42px; }
.sidebar nav a { padding: 7px 3px; gap: 8px; border-radius: 10px; font-size: .76rem; min-height: 43px; }
.sidebar nav a .ico { width: 28px; height: 30px; color: #ffe5b6; }
.sidebar nav a .nm small { font-size: .68rem; color: #e5d1ac; }
.sidebar nav a .nm-row { gap: 3px; }
.sidebar .tag, .tag-pill { background: linear-gradient(120deg,#ffe49a,#ffad43 70%); color: #301901; border: 1px solid #ffd896; box-shadow: 0 0 9px #ffae424d,inset 0 1px 0 #fff1b0; font-size: .53rem; letter-spacing: .04em; padding: 1px 5px; }
.sidebar-links { padding-top: 12px; margin-top: 12px; border-color: #ffe6b82d; gap: 2px; }
.sidebar-links a { padding: 8px; font-size: .78rem; border: 1px solid transparent; border-radius: 10px; }
.sidebar nav a[aria-current='page'], .sidebar-links a[aria-current='page'] { background: linear-gradient(100deg,#ffbc575c,#fbe1bb18); border-color: #ffd18caa; box-shadow: inset 3px 0 0 #ffd17b,0 0 14px #ffad3e26; color: #fff8e8; }
.sidebar nav a[aria-current='page'] .ico { color: #fff2db; background: #faca7124; box-shadow: 0 0 14px #ffb84d2b; }
.appbar { gap: 10px; margin-bottom: 24px; }
.search { flex-basis: 450px; }
.search input { height: 44px; border-radius: 13px; border-color: #ffd08b88; background: linear-gradient(130deg,#ffe5b215,#18243890); font-size: .86rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
.search .icon { top: 12px; color: #ffe5b6; }
.pill, .icon-btn, .user-chip { height: 44px; border-radius: 13px; background: linear-gradient(135deg,#ffe1a91c,#121c2bbd); border-color: #ffd08b80; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #fff0c528; }
.pill { padding-inline: 12px; gap: 7px; font-size: .76rem; }
.pill svg, .icon-btn svg { color: #ffe9c0; }
.user-chip { gap: 8px; padding-right: 10px; }
.user-chip .who b { font-size: .78rem; font-weight: 600; }.user-chip .who span { font-size: .65rem; }
.user-chip .avatar { width: 34px; height: 34px; }
.topbar, .tabbar { background: #0d182de8; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #ffd08b88; }
.footer { background: #0d182b9c; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .85rem; }
/* Controls: one behaviour for every shell, keyboard, pointer and touch. */
.btn, .pill, .icon-btn, .pay-chip, .tab { position: relative; isolation: isolate; transition: transform .18s var(--ease), border-color .18s, background-color .18s; }
.btn { --_bd: #ffe7ba59; --_bg: linear-gradient(140deg,#ffe6b817,#ecca8c0c); min-height: 44px; border-radius: 12px; font-size: .9rem; letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #fff0d326,0 5px 14px #08183124; overflow: hidden; }
.btn--primary { --_bg: linear-gradient(120deg,#ffeb9e,#ffcd60 40%,#ff9b3d); --_fg: #281805; --_bd: #ffe5a3; box-shadow: inset 0 1px 2px #fff9d7,inset 0 -2px 3px #d5793455,0 0 12px #ffc64b55,0 0 28px #ff9d3328; }
.btn--jade { --_bg: linear-gradient(120deg,#ffdda0,#ffb14b); --_fg: #281805; }
.btn--danger { --_bg: linear-gradient(120deg,#e85c87,#b9497e); --_fg: #fff; --_bd: #ffb3c578; }
.btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; }
.btn--sm { min-height: 36px; font-size: .8rem; padding-inline: 14px; }
.btn--lg { min-height: 50px; font-size: .98rem; }
.btn::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 20%,#ffffff45 48%,transparent 75%); opacity: 0; transform: translateX(-120%); }
.btn:active:not(:disabled):not([aria-disabled='true']), .pay-chip:active { transform: scale(.98); filter: none; }
.btn:focus-visible, .pill:focus-visible, .tab:focus-visible, .pay-chip:focus-visible { outline: 2px solid #ffe1aa; outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled='true'] { box-shadow: none; transform: none; }
.btn .tap-light { position: absolute; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; margin-left: -55%; border-radius: 50%; background: #ffffff45; pointer-events: none; }
.input, .select, .textarea { background-color: #0b1729d1; border-color: #e7bb744d; box-shadow: inset 0 1px 2px #03091155; min-height: 44px; font-size: .95rem; border-radius: 12px; }
.input:focus, .select:focus, .textarea:focus { background-color: #101d30; }
.field > label, .label { font-size: .72rem; letter-spacing: .08em; color: #f7ead1; }
.hint { font-size: .83rem; line-height: 1.6; }.error-text { font-size: .9rem; }
.tabs { border-radius: 14px; background: #0e233985; padding: 5px; gap: 4px; }
.tab { font-size: .86rem; border-radius: 10px; padding: 9px 16px; }
.tab.active, .tab[aria-selected='true'] { box-shadow: inset 0 1px 0 #fff6,0 3px 14px #ffce722e; }
.badge { font-size: .65rem; letter-spacing: .045em; padding: 4px 10px; }
.badge--jade { color: #94f6dc; background: #3ec5b51f; border-color: #6ceac84a; }
.chip-ico { border-color: #ffd18b77; background: linear-gradient(140deg,#ffd39c29,#896c4220); box-shadow: inset 0 1px 1px #ffe1a733,0 3px 16px #0002; color: #ffe1a0; }
.chip-ico--violet { color: #ffe2a3; border-color: #ffd18b77; background: linear-gradient(140deg,#ffd39c29,#896c4220); }
.chip-ico--rose, .chip-ico--gold { color: #ffe1a0; border-color: #ffd18b77; background: linear-gradient(140deg,#ffd39c29,#896c4220); }
.coin svg { filter: none; }.coin { color: #fff0d5; }
/* Items and notices share the same visual grammar. */
.slot { border-width: 1px; box-shadow: inset 0 0 13px color-mix(in srgb,var(--rc) 18%,transparent),0 4px 10px #05182a3d; transition: transform .18s var(--ease); }
.slot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--rc); box-shadow: 0 0 12px color-mix(in srgb,var(--rc) 45%,transparent); opacity: 0; transition: opacity .18s; pointer-events: none; }
.rarity-legendary { --rc: #f58bcf; }
.bx-note, .tn-warn, .pay-warn, .adm-note, .shop-note { border: 1px solid #fadca338; border-left: 3px solid #f2ce8c; border-radius: 12px; background: linear-gradient(100deg,#e4b35918,transparent),#171b247d; color: var(--text-soft); padding: 14px 16px; box-shadow: none; }
.adm-note--danger { border-left-color: #f58aac; background: #f16e9610; }
.toast { background: #172f4df7; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 30px #03132655; border-radius: 14px; border-left: 3px solid #6de8cf; }
.toast.err { border-left-color: #f58aac; box-shadow: 0 12px 30px #03132655; }
.toast b { font-weight: 600; margin-bottom: 4px; }.toast span { font-size: .9rem; }
.modal-back { background: #060e23a6; -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal { box-shadow: 0 24px 70px #030c2580,inset 0 1px 0 #fff3de55; }
/* Dashboard: four metrics, two chart panels, three compact detail panels. */
.dashboard { gap: 18px; }
.dashboard .hello { grid-template-columns: minmax(0,1fr) minmax(260px,330px); gap: 32px; min-height: 264px; margin: 0 0 4px; }
.dashboard .hello h1 { font-size: clamp(2.25rem,3.2vw,3.45rem); line-height: 1.08; margin-bottom: 14px; color: #fff8e8; text-shadow: 0 2px 8px #0008; }
.dashboard .hello > div:first-child::before { display: none; }
.dashboard .hello .eyebrow { font-size: .67rem; letter-spacing: .28em; margin-bottom: 12px; }
.dashboard .hello .sub { font-size: 1.03rem; line-height: 1.65; max-width: 52ch; }
.dashboard .hero-actions { gap: 10px; }
.dashboard .hero-actions .btn { font-size: .84rem; padding: 10px 17px; gap: 12px; }
.dashboard .hero-event { display: grid; gap: 18px; }
.dashboard .float-card { display: flex; width: 100%; aspect-ratio: 1.8; border-radius: 21px; padding: 22px 72px 20px 20px; background: linear-gradient(180deg,#07111f00 20%,#070d18eb),url('/ui/img/bg/ninja-village-night.webp') 83% 35% / 160% auto; border: 1px solid #ffe4ab; box-shadow: 0 0 0 3px #ffb94724,0 0 24px #ffad3b45,inset 0 1px 3px #fff0c6,inset 0 -2px 6px #ffc05e80,0 12px 28px #0006; transform: rotate(2deg); transition: transform .22s var(--ease); }
.dashboard .float-card b { font-size: 1.15rem; font-weight: 600; }.dashboard .float-card span { font-size: .8rem; }
.dashboard .float-card .play { width: 46px; height: 46px; right: 16px; bottom: 18px; background: linear-gradient(135deg,#ffd77d88,#8b521c70); border-color: #ffe4a4; box-shadow: inset 0 0 8px #ffd78d40,0 0 14px #ffbb4540; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dashboard .quote { margin: 0; font-size: .84rem; color: #faf1df; text-align: right; }
.dashboard .grid-kpi { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.dashboard .kpi { padding: 19px 16px; min-height: 116px; gap: 14px; background: linear-gradient(132deg,#ffd89b20,transparent 48%,#d8952d14),#0a14269e; border-color: #edbd75; }
.dashboard .kpi:nth-child(2) { background: linear-gradient(132deg,#ffd89b20,transparent 48%,#d8952d14),#0a14269e; border-color: #edbd75; }
.dashboard .kpi:nth-child(3) { background: linear-gradient(132deg,#ffd89b20,transparent 48%,#d8952d14),#0a14269e; border-color: #edbd75; }
.dashboard .kpi:nth-child(4) { background: linear-gradient(132deg,#ffd89b20,transparent 48%,#d8952d14),#0a14269e; border-color: #edbd75; }
.dashboard .kpi .chip-ico { width: 48px; height: 52px; border-radius: 14px; }
.dashboard .kpi .k-label { font-size: .8rem; margin-bottom: 7px; }.dashboard .kpi .val { font-size: clamp(1.2rem,1.55vw,1.7rem); gap: 7px; }
.dashboard .kpi .note { margin-top: 6px; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.dashboard .delta { font-size: .65rem; padding-inline: 6px; }
.dashboard > .grid { gap: 18px; }.dashboard > .grid > .glass { padding: 20px; }
.dashboard .panel-head { gap: 8px; margin-bottom: 16px; }.dashboard .panel-head h3 { font-size: 1.04rem; }.dashboard .panel-head a { font-size: .8rem; }
.dashboard .big-num, .dashboard .big-num b { font-size: 1.85rem; line-height: 1.2; }.dashboard .big-num { margin-bottom: 8px; }
.dashboard .legend { font-size: .78rem; }.dashboard .chart text { fill: #f5e9d2; font-size: 12px; font-weight: 400; }
.dashboard .chart .grid-line { stroke: #ccd6e24a; stroke-dasharray: 3 5; }
.dashboard .empty { padding: 20px 8px; font-size: .87rem; }.dashboard .activity { font-size: .84rem; }
.dashboard .power-row { font-size: .82rem; }.dashboard .donut-wrap { font-size: .85rem; }
/* Module layouts. Dense content uses stable, opaque surfaces, no blur. */
.stack-lg { gap: 24px; }.dashboard.stack-lg { gap: 18px; }
.content > .stack-lg > *, .grid > *, .ev-grid > *, .row > *, .adm-two > * { min-width: 0; }
.table { font-size: .88rem; }.table th { font-size: .66rem; letter-spacing: .07em; background: #151b27f5; }.table td { padding: 13px 15px; border-color: #ffe4b11c; }
.table-wrap { max-width: 100%; scrollbar-width: thin; }.table tbody tr:hover td { background: #ffce720c; }
.leaderboard-panel, [data-shell='admin'] .glass:has(.table-wrap) { background: linear-gradient(120deg,#d4a1420c,transparent),#0e1420dc; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bx-head h2 { font-size: 1.2rem; }.bx-gifts { gap: 10px; }.bx-table .bx-gift-cell { padding: 12px 20px 22px; }
.bx-table .slot { width: 46px; height: 46px; border-radius: 12px; }.bx-table .slot .qty { font-size: .7rem; }
.bx-table tr[data-rank='1'] { background: #ff8a3d18; }.bx-rank-1 { color: #ffeac3; }.bx-rank-2 { color: #c8d4e7; }.bx-rank-3 { color: #dba16f; }
.tn-count { contain: layout paint; font-variant-numeric: tabular-nums; }
.pay-page { width: 100%; max-width: none; }.pay-rate .stat-value { font-size: clamp(1.4rem,2vw,1.85rem); }.pay-rate .stat-sub { font-size: .82rem; }
.pay-form { gap: 18px; }.pay-step { font-size: .95rem; margin-top: 10px; }.pay-warn { font-size: .86rem; line-height: 1.7; }
.pay-warn ul { padding-left: 20px; margin-bottom: 0; }.pay-chip { border-radius: 12px; font-size: .92rem; background: #133049a6; border-color: #f5d9a540; box-shadow: inset 0 1px 0 #fff6e414; }
.pay-chip[aria-checked='true'], .pay-chip.active { background: linear-gradient(125deg,#ffb84d29,#ff8a3d26); border-color: #ffd78d; box-shadow: inset 0 0 0 1px #ffd78d26; color: #fff; }
.pay-chip small, .pay-chip[aria-checked='true'] small { color: var(--text-soft); }.pay-coin-preview { border-color: #ffe3b045; background: #edce9512; }
/* Shared content origin avoids sideways jumps between portal pages. */
.ev-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: start; gap: 20px; }
.ev-wheel-card { background: radial-gradient(ellipse at 50% 25%,#ffd07826,transparent 65%),#142e4ec9; }
.ev-wheel-wrap { max-width: 360px; margin-inline: auto; }.ev-hub { color: #fff0d4; background: radial-gradient(circle,#304b72,#192b50); border-color: #ffdd9f; box-shadow: 0 0 20px #fac25a35; }
.wheel-ring { stroke: #ffdd9f; filter: none; }.ev-cell { fill: #253e68; stroke: #f6d49447; }.ev-cell.alt { fill: #354778; }.ev-cell.is-letter { fill: #93702f; }.ev-cell.win { fill: #a98035; }.ev-cell-letter { fill: #ffebc6; }.ev-cell-name,.ev-cell-qty { fill: #fff8eb; }
.ev-sec { color: #fff4e1; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.ev-status { gap: 10px; }.ev-stat { border-color: #ffdea233; background: #112840ab; }.ev-stat.is-total { background: #ffb84d14; border-color: #eec27180; }
.ev-lcard { opacity: .78; background: #152c48b3; }.ev-lcard.lit { border-color: #fae2b591; background: linear-gradient(130deg,#ddbb7d33,#ddc39322); box-shadow: inset 0 1px 0 #ffffff33; }
.ev-lchar { color: #ffeece; }.ev-ms { padding: 12px; font-size: .88rem; background: #122a448f; }.ev-ms.next { background: #d5a24218; border-color: #dcb05e61; }
.ev-tags .badge { letter-spacing: .01em; text-transform: none; }.ev-buybar { font-size: .9rem; }
.shop-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); }.shop-card .shop-title { min-height: 2.6em; }.shop-card .btn { margin-top: auto; }
.ev-codes { grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.ev-days { grid-template-columns: repeat(auto-fill,minmax(min(100%,190px),1fr)); }
.tn-tier { box-shadow: var(--glass-shadow); }.tn-tier .btn { align-self: start; }
.ct-page { padding-top: 22px; }.ct-prose { font-size: 1rem; line-height: 1.85; }.ct-lead { font-size: 1.1rem; }
.auth-wrap .glass { background: linear-gradient(140deg,#d4984326,transparent 50%,#b06a1c14),#0d182be8; max-width: 100%; }
.auth-wrap h1 { font-size: 2rem; }.auth-wrap .brand { justify-content: center; }
[data-shell='admin'] .content { max-width: 1480px; }[data-shell='admin'] .scene::before { background: #07162e8a; }
.adm-page { gap: 22px; }.adm-page .glass { padding: 22px; }.adm-kpis { grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }.adm-kpis .kpi .val { font-size: clamp(1.3rem,1.6vw,1.65rem); }.adm-links { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.adm-note { font-size: .86rem; }.adm-toolbar { gap: 12px; }.adm-savebar { background: #192e4df5; }
/* Native document snapshots overlap unrelated forms and consume a full viewport texture.
   Animate only the incoming content; navigation, history and the app frame stay native. */
@view-transition { navigation: none; }
/* Finite, composited interaction. No permanent will-change or animated blur/shadow. */
.fade-up { animation: none; }
.page-head { animation: none; }
@keyframes hokage-enter { from { opacity: .85; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):not([aria-disabled='true']):hover { transform: translateY(-2px); border-color: #ffefd2; box-shadow: inset 0 1px 0 #fff6,0 6px 20px #ffc45733; }
  .btn:not(:disabled):not([aria-disabled='true']):hover::before { transform: translateX(120%); opacity: 1; transition: transform .6s ease,opacity .12s; }
  .btn--ghost:hover { box-shadow: none; }
  .pill:hover,.pay-chip:hover,.tab:hover { border-color: #ffe3b0a6; transform: translateY(-1px); }
  .slot:hover { transform: translateY(-3px); }.slot:hover::after { opacity: 1; }
  .glass--hover:hover { transform: translateY(-3px); }
  .dashboard .float-card:hover { transform: rotate(0) translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .content { animation: hokage-enter .18s ease-out; }
}
.effects-paused *, .effects-paused *::before, .effects-paused *::after { animation-play-state: paused !important; }
@media (min-width: 1800px) { .app { gap: 32px; padding: 22px; --sidebar-w: 240px; }.sidebar { top: 22px; height: calc(100dvh - 44px); }.dashboard .hello { min-height: 290px; } }
@media (min-width: 981px) and (max-width: 1250px) { .app { --sidebar-w: 212px; gap: 20px; padding: 14px; }.appbar .user-chip .who { display: none; }.dashboard .hello { grid-template-columns: 1fr; min-height: 240px; }.dashboard .hero-event { display: none; }.dashboard .grid-kpi { grid-template-columns: repeat(2,minmax(0,1fr)); }.ev-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .app { padding: 14px 14px calc(var(--tabbar-h) + 30px); gap: 0; }.dashboard .hello { grid-template-columns: 1fr; min-height: auto; padding-block: 16px; }.dashboard .hero-event { display: none; }.dashboard .grid-kpi { grid-template-columns: repeat(2,minmax(0,1fr)); }.ev-grid { grid-template-columns: 1fr; }.adm-savebar { bottom: calc(var(--tabbar-h) + 16px); } }
@media (max-width: 600px) {
  .scene { background-image: url('/ui/img/bg/ninja-village-night-mobile.webp'); background-position: 64% center; }.scene::before { background: linear-gradient(180deg,#12234755,#0b233b99); }
  .appbar { margin-bottom: 16px; }.page-head { padding-top: 8px; margin-bottom: 18px; }.page-head h1 { font-size: 1.9rem; }.page-head .eyebrow { font-size: .63rem; letter-spacing: .15em; }
  .glass { padding: 18px 16px; }.glass--tight { padding: 14px; }.stack-lg { gap: 18px; }
  .dashboard .hello h1 { font-size: clamp(2rem,7.5vw,2.65rem); }.dashboard .hello .eyebrow { font-size: .6rem; letter-spacing: .19em; }.dashboard .hello .sub { font-size: .92rem; }
  .dashboard .hero-actions { gap: 8px; }.dashboard .hero-actions .btn { padding: 10px 12px; font-size: .77rem; }.dashboard .hero-actions .btn:last-child { flex-basis: 100%; }
  .dashboard .grid-kpi { gap: 10px; }.dashboard .kpi { padding: 14px; gap: 10px; flex-wrap: wrap; align-content: start; }.dashboard .kpi .chip-ico { width: 33px; height: 33px; border-radius: 10px; }.dashboard .kpi .meta { flex-basis: 100%; }.dashboard .kpi .val { font-size: 1.3rem; }.dashboard .kpi .k-label { font-size: .75rem; }.dashboard .kpi .note { font-size: .7rem; }
  .dashboard > .grid > .glass { padding: 16px 12px; }.dashboard .panel-head h3 { font-size: .95rem; }.dashboard .chart { min-height: 150px; }
  .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.shop-card { padding: 14px 10px; }.shop-card .btn { padding-inline: 9px; font-size: .77rem; }
  .pay-rate { grid-template-columns: 1fr; gap: 16px; }.pay-rate > * + * { border-top: 1px solid #ffe6b829; padding-top: 14px; }.pay-warn { padding: 12px; }.pay-page .tabs { width: 100%; }.pay-page .tab { flex: 1; padding-inline: 10px; font-size: .78rem; }
  .ev-wheel-wrap { max-width: 300px; }.ev-sec { font-size: .95rem; }.ev-buybar > .row { flex-wrap: wrap; }.ev-letter-row { gap: 7px; }.ev-lchar { font-size: 1.1rem; }.ev-stat b { font-size: 1.35rem; }
  .table th,.table td { padding: 11px 10px; }.bx-table .slot { width: 40px; height: 40px; }.bx-table .bx-gift-cell { padding: 10px 10px 18px; }
  .adm-page .glass { padding: 16px; }.adm-toolbar .field { min-width: 0; }.evadm-filter { grid-template-columns: minmax(0,1fr); }.pz-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.pz-row .pz-name { grid-column: 1 / -1; }
}
@media (max-width: 359px) { .shop-grid { grid-template-columns: minmax(0,1fr); }.dashboard .kpi { padding: 10px; } }
.perf-lite :is(.glass,.sidebar,.topbar,.tabbar,.pill,.search input) { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }.btn::before { display: none; }.btn:hover,.glass--hover:hover,.slot:hover { transform: none; }.dashboard .float-card,.dashboard .float-card:hover { transform: none; } }
/* Disclosure keeps long reward lists readable; native details works without JS. */
.rank-rewards { padding: 8px 0 0; }
.rank-rewards > summary { cursor: pointer; padding: 8px 0 12px; color: #fae3b9; font-size: .82rem; }
.rank-rewards > summary .badge { margin-left: 12px; font-weight: 400; }
.rank-rewards[open] > summary { margin-bottom: 8px; }
.rank-rewards .tn-reward { width: 78px; gap: 6px; }.rank-rewards .tn-reward .nm { font-size: .76rem; line-height: 1.4; }
.rank-rewards .tn-reward .ct { font-size: .72rem; }.rank-rewards > .hint { display: block; margin-top: 12px; }
@media (max-width: 600px) { .rank-rewards .tn-reward { width: 66px; }.rank-rewards .tn-reward .nm { font-size: .7rem; }.rank-rewards > summary .badge { margin-left: 4px; font-size: .58rem; } }
/* Task-first arrangements on wide screens; natural reading order on mobile. */
.hero { padding-block: 70px 54px; }.hero h1 { font-size: clamp(2.8rem,5.5vw,4.8rem); }.hero .hero-line2 { font-size: clamp(1.15rem,2.2vw,1.65rem); margin-top: 16px; letter-spacing: -.02em; }.hero .lead { font-size: 1.1rem; line-height: 1.75; max-width: 58ch; margin-inline: auto; }
.dl-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); }.dl-card .btn { margin-top: auto; }
.promo { background: linear-gradient(180deg,#0d182940,#101a2be0),url('/ui/img/bg/ninja-village-night.webp') 80% 50% / 230%; }
.ev-controls .ev-status { margin-bottom: 16px; }.ev-controls .ev-spin-btns { grid-template-columns: repeat(2,minmax(0,1fr)); }.ev-controls .ev-spin-btns .btn { font-size: .9rem; }.ev-controls .ev-spin-btns small { font-size: .72rem; margin-top: 4px; }
@media (min-width: 1251px) {
  .pay-form { display: grid; grid-template-columns: minmax(0,1fr) 260px; column-gap: 24px; row-gap: 16px; align-items: start; }
  .pay-form > * { grid-column: 1; min-width: 0; }
  .pay-form > .pay-warn { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 20px; }
  .pay-form .pay-chips:not(.pay-chips--tel):not(.pay-chips--2) { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1250px) {
  .ev-grid > .stack:first-child { display: contents; }
  .ev-grid > .stack:last-child { display: contents; }
  .ev-grid .ev-controls { order: -1; }.ev-grid .ev-wheel-card { order: 0; }.ev-grid .ev-letters { order: 1; }.ev-grid .ev-miles { order: 2; }
}
@media (max-width: 600px) { .hero { padding-block: 44px 34px; }.hero .lead { font-size: .95rem; }.hero .hero-line2 { font-size: 1.1rem; }.dl-grid { grid-template-columns: minmax(0,1fr); } }


/* Clear hierarchy: page title / action / status / supporting copy. */
.page-head h1 { width: fit-content; max-width: 100%; background: linear-gradient(105deg,#fffcf7 6%,#ffd78c 40%,#ffe4b2 72%,#ffad49); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; }
.page-head .eyebrow { color: #ffd78c; font-weight: 700; }.page-head .eyebrow::before { background: #ffd587; }
.ev-sec, .panel-head h3, .pay-step, .adm-page h2 { color: #ffe6b9; font-weight: 700; }
.ev-sec::before { content: ''; display: inline-block; width: 4px; height: .85em; margin-right: 9px; border-radius: 4px; background: linear-gradient(#ffce72,#ffdea1); vertical-align: -.02em; }
.btn { font-weight: 650; --_fg: #ffecc8; }.btn--primary,.btn--jade { --_fg: #081a32; }.btn--danger { --_fg: #fff; }
.btn--feature { --_fg: #fff1cc; --_bd: #ffd08bcc; --_bg: linear-gradient(115deg,#6d4119,#9f5c1e); min-height: 50px; box-shadow: inset 0 1px 0 #fff0c966,0 7px 22px #e7982926; }
.btn--feature .action-arrow { margin-left: auto; font-size: 1.35rem; }.btn--feature svg { color: #ffe3a6; }
.btn--feature { justify-content: flex-start; }.pay-chip[aria-checked='true'] { color: #ffdfa4; }.pay-chip[aria-checked='true']::after { content: '✓'; position: absolute; top: 5px; right: 9px; color: #8af7dd; font-size: .7rem; }
.ev-daily { position: relative; border: 1px solid #ffe0a688; border-left: 4px solid #ffe0a6; background: linear-gradient(110deg,#c9a05335,#24375be6); color: #fff5e3; }
.ev-daily-text { font-size: .88rem; font-weight: 650; line-height: 1.5; }.ev-daily.claimed { border-color: #6fe5c16b; border-left-color: #70f3ce; background: linear-gradient(105deg,#146761aa,#153c4ce8); color: #a9ffe2; }
.ev-daily.claimed > svg { display: none; }.ev-daily.claimed::before { content: '✓'; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #66ecc124; color: #a9ffe2; border: 1px solid #71eec97a; font-weight: 700; }
.ev-daily.claimed .btn:disabled { color: #b7ffe8; background: #6ee7c019; border-color: #79ecc947; opacity: 1; font-size: .7rem; min-height: 30px; }
.ev-stat .label { color: #e7d4b2; }.ev-stat b { color: #ffe8be; }.ev-stat:first-child b { color: #8bf4d7; }.ev-stat.is-total b { color: #ffd78c; }
.ev-msg--ok, .notice--success { color: #a6ffe0; border-color: #60deb875; background-color: #135244dd; }.ev-msg--err { color: #ffc0d7; }
/* Item wheel: static layered rim, readable icons and an inspectable prize card. */
.ev-wheel-card { padding: 22px; background: radial-gradient(ellipse at 50% 34%,#c3964346,transparent 63%),#142c4cdf; }
.ev-wheel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }.ev-wheel-heading .ev-sec { margin: 0; }.ev-wheel-heading .badge { color: #ffe4b2; }
.ev-wheel-wrap { width: min(100%,420px); max-width: 420px; margin: 20px auto 18px; padding: 8px; border: 1px solid #f5d69d7a; border-radius: 50%; background: linear-gradient(140deg,#ffd68b55,#caa25720 45%,#ffe1a84d); box-shadow: inset 0 0 0 3px #0d2547,0 10px 28px #070c334a; }
.ev-wheel-wrap #sp-wheel { width: 100%; aspect-ratio: 1; }.ev-wheel { display: block; width: 100%; height: auto; filter: none; }
.ev-wheel-wrap .wheel-pointer { top: -5px; z-index: 3; filter: none; }.ev-hub { width: 20%; border: 2px solid #ffe0a6; background: radial-gradient(circle at 35% 20%,#cba45b,#273767 68%); box-shadow: 0 0 0 5px #131e42e6,inset 0 2px 0 #fff7e850; font-size: .76rem; font-weight: 700; color: #fff1d8; }
.ev-cell { fill: #213b64; stroke: #eed19a5c; stroke-width: .45; }.ev-cell.alt { fill: #2e477b; }.ev-cell.is-letter { fill: #9f7932; stroke: #ffe0a69c; }.ev-cell.win { fill: #9a7531; stroke: #a2ffdf; stroke-width: 1; }
.ev-sector { cursor: pointer; outline: none; }.ev-sector:hover .ev-cell,.ev-sector:focus .ev-cell { fill: #b88c3a; stroke: #fff1d8; stroke-width: 1; }.ev-sector.is-preview .ev-cell { stroke: #ffdfa4; stroke-width: 1; }
.ev-icon-bed { fill: #091b389c; stroke: #ffe5b569; stroke-width: .35; }.ev-cell-letter { font-size: 7px; font-weight: 750; fill: #ffefd1; stroke: none; }.ev-cell-qty { font-family: var(--font-body); font-size: 4.4px; fill: #ffeac3; font-weight: 650; stroke: #0a2144; stroke-width: 1px; paint-order: stroke; }
.wheel-ring { stroke: #ffe3ae; stroke-width: 1.1; }.ev-rim-dot { fill: #ffe5b6; }.ev-wheel-hint { text-align: center; font-size: .73rem; color: #e9d6b2; margin: 0 0 12px; }
.ev-prize-preview { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 16px; border: 1px solid #fcdea666; border-radius: 14px; background: linear-gradient(110deg,#cfab6722,#a97e2f19),#112444bf; }
.ev-prize-preview .slot { flex-shrink: 0; }.ev-prize-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.ev-prize-copy small { color: #f2d59f; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }.ev-prize-copy b { color: #fff6e6; font-size: .92rem; }.ev-prize-copy span { color: #83f0d1; font-size: .82rem; }
.ev-prize-letter { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #dfbe8230; border: 1px solid #ffe5b488; color: #ffecca; font-weight: 750; flex-shrink: 0; }
@media (max-width: 600px) { .ev-wheel-card { padding: 18px 12px; }.ev-wheel-wrap { max-width: 330px; }.ev-hub { font-size: .62rem; }.ev-wheel-heading .ev-sec { font-size: .85rem; }.ev-daily { padding: 12px 10px; gap: 8px; flex-wrap: wrap; }.ev-daily-text { flex-basis: 65%; font-size: .82rem; }.ev-daily .btn { margin-left: auto; }.ev-prize-preview { padding: 10px; } }
@media (forced-colors: active) { .page-head h1 { background: none; color: CanvasText; } }

@media (prefers-reduced-motion: no-preference) { .ev-daily.claimed::before { animation: status-confirm .3s ease-out; } }
@keyframes status-confirm { from { opacity: .4; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }

/* Accessibility preferences override even featured/nested card treatments. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body .glass, body .sidebar, body .pill, body .topbar, body .tabbar, body .user-chip, body .search input, .dashboard .kpi:nth-child(n), body .ev-wheel-card, body .promo { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body .scene::before { background: #081a32b3; }
}

/* Small semantic accents remain distinct from the gold interface. */
.chip-ico--rose { color: #ffb1d4; border-color: #ffd18b77; background: linear-gradient(140deg,#ff89bd26,#49233855); }
.dashboard .grad-text { text-shadow: none; }

/* Static wheel lighting keeps reward artwork legible during a spin. */
.ev-wheel-card { background: radial-gradient(ellipse at 50% 34%,#b4772030,transparent 63%),#0d192bdf; }
.ev-wheel-wrap { border-color: #eabf778f; background: linear-gradient(140deg,#ffe0a070,#9f662424 45%,#ffb14d55); box-shadow: inset 0 0 0 3px #172035,0 10px 28px #070c334a; }
.ev-hub { border-color: #ffe2a3; background: radial-gradient(circle at 35% 20%,#c38a3d,#724719 68%); box-shadow: 0 0 0 5px #111b2de6,inset 0 2px 0 #fff3ce80; color: #fff4d5; }
.ev-cell { fill: #15243b; stroke: #d4ac6b66; }.ev-cell.alt { fill: #21314a; }.ev-cell.is-letter { fill: #60401e; stroke: #ffd18b99; }.ev-cell.win { fill: #785327; stroke: #ffeab6; }
.ev-sector:hover .ev-cell,.ev-sector:focus .ev-cell { fill: #43506a; stroke: #ffe1a3; }.ev-sector.is-preview .ev-cell { stroke: #ffd483; }
.ev-icon-bed { fill: #081321b3; stroke: #debd8069; }.ev-cell-qty { fill: #fff0c8; stroke: #0a1424; }.wheel-ring { stroke: #ffe0a0; }.ev-rim-dot { fill: #ffd17b; }
.ev-prize-preview { background: linear-gradient(110deg,#c6974824,transparent),#0d1b30cc; }
.ev-daily:not(.claimed) { color: #fff0d1; border-color: #eabd7588; border-left-color: #ffd184; background: linear-gradient(110deg,#ab73242e,#142139e6); }
@media (max-width: 600px) { .scene::before { background: linear-gradient(180deg,#06102220,#09152866); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { body .ev-wheel-card { background: var(--glass-solid); } body .scene::before { background: #081a32b3; } }

/* Original leaderboard: warm dark glass shared with the gold dashboard. */
[data-page='bxhtoptuan'] .leaderboard-panel { background: radial-gradient(ellipse at 15% 0%,#d99b3020,transparent 48%),linear-gradient(135deg,#161c29ed,#0b111edb); border-color: #eec57e; }
[data-page='bxhtoptuan'] .bx-note { background: linear-gradient(100deg,#ffbb5022,#131a2699); }
[data-page='bxhtoptuan'] .table th { background: #181b25; color: #ffe1a6; }
[data-page='bxhtoptuan'] .bx-gift-cell { background: #0d142080; }
[data-page='bxhtoptuan'] .bx-gift-cell details[open] { background: linear-gradient(125deg,#ffb9450c,transparent 65%); }