:root { --a-bg: #f2f4ff; --a-card: #fff; --a-text: #1b1f4b; --a-muted: #565b86; --a-blue: #2558e8; --a-line: #e1e5f7; --a-shadow: 0 2px 0 rgb(40 50 120 / .05), 0 12px 30px rgb(50 60 140 / .09); color-scheme: light; }
body { background: var(--a-bg); color: var(--a-text); }
a { color: var(--a-blue); }
a:hover { color: #173fb5; }
.ic { display: inline-block; flex: none; width: 26px; height: 26px; }
h1, h2, h3 { color: var(--a-text); }

.side-nav { display: none; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgb(242 244 255 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--a-text); font: 800 1.12rem/1 var(--display); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--a-text); }
.brand svg { width: 36px; height: 36px; }
.topbar .brand { margin-inline: auto; }
.top-search { display: none; }
.coins { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 13px 0 8px; border-radius: 999px; background: #fff; box-shadow: var(--a-shadow); color: var(--a-text); font: 800 1rem/1 var(--display); text-decoration: none; }
.top-play { display: none; }
.burger { position: static; }
.burger > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: #fff; box-shadow: var(--a-shadow); cursor: pointer; list-style: none; }
.burger > summary::-webkit-details-marker { display: none; }
.burger svg { width: 22px; height: 22px; fill: none; stroke: var(--a-text); stroke-width: 2.4; stroke-linecap: round; }
.burger .b1, .burger .b2, .burger .b3 { transform-box: fill-box; transform-origin: center; transition: transform .2s, opacity .15s; }
.burger[open] .b1 { transform: translateY(5px) rotate(45deg); }
.burger[open] .b2 { opacity: 0; }
.burger[open] .b3 { transform: translateY(-5px) rotate(-45deg); }
.sheet-pop { position: fixed; inset: 68px 10px 86px; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgb(30 40 110 / .28); }
html:has(.burger[open]) { overflow: hidden; }
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--a-line); border-radius: 14px; background: var(--a-bg); color: var(--a-text); font: inherit; }
.search-row input::placeholder { color: var(--a-muted); opacity: 1; }
.search-row button { min-height: 46px; padding: 0 15px; border: 0; border-radius: 14px; background: var(--a-blue); color: #fff; font: 800 .95rem/1 var(--display); cursor: pointer; }
.nav-sub { flex: none; }
.nav-sub > summary, .nav-link { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; border-radius: 15px; color: var(--a-text); font: 800 1.02rem/1 var(--display); letter-spacing: -.012em; text-decoration: none; cursor: pointer; list-style: none; }
.nav-sub > summary::-webkit-details-marker { display: none; }
.nav-sub > summary:hover, .nav-link:hover { background: #e8edff; color: var(--a-text); }
.nav-sub > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2.5px solid var(--a-muted); border-bottom: 2.5px solid var(--a-muted); transform: rotate(45deg); transition: transform .15s; }
.nav-sub[open] > summary::after { transform: rotate(-135deg); }
.shell .mm a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 5px 8px; border-radius: 13px; color: var(--a-text); text-decoration: none; }
.shell .mm a:hover { background: #eef1ff; color: var(--a-text); }
.shell .mm { grid-template-columns: minmax(0, 1fr); display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.shell .mm i { width: 34px; height: 34px; border-radius: 10px; font-size: .86rem; }
.shell .mm b { font-size: .92rem; color: var(--a-text); }
.shell .mm small { color: var(--a-muted); font-size: .78rem; }
.shell .mm-plain a { min-height: 40px; }
.shell .mm-cols { grid-template-columns: minmax(0, 1fr); padding: 2px 6px; }
.shell .mm-h { color: #b5361c; }

.bottom-nav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 6px; border-radius: 24px; background: #fff; box-shadow: 0 10px 34px rgb(30 40 110 / .22); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 15px; color: var(--a-text); font: 800 .76rem/1 var(--display); text-decoration: none; }
.bottom-nav a:hover { background: #eef1ff; color: var(--a-text); }
.shell-main { padding: 0 12px 104px; }
html.mtw-lock .side-nav, html.mtw-lock .topbar, html.mtw-lock .bottom-nav { display: none; }
html.mtw-lock .shell-main { margin: 0; padding: 0; }

.ar.ar:not(.is-playing, .is-over) { margin: 0; padding: 26px 0 20px; min-height: 0; border-radius: 28px; background: linear-gradient(180deg, #7cc6ff 0, #c5e8ff 58%, #eef9ff 100%); color: var(--a-text); box-shadow: var(--a-shadow); overflow: hidden; }
.ar.ar:not(.is-playing, .is-over) .ar-title { margin-top: 0; padding-inline: 14px; color: #1b1f4b; font-size: clamp(2.3rem, 7vw, 4.3rem); text-shadow: 0 3px 0 rgb(255 255 255 / .75); }
.ar.ar:not(.is-playing, .is-over) .ar-tag { padding-inline: 18px; color: #1f2a63; font-weight: 600; }
.ar.ar:not(.is-playing, .is-over) .ar-stage { margin-inline: 0; margin-top: 10px; background: none; }
.ar.ar:not(.is-playing, .is-over) .ar-dock { margin-top: 12px; padding-inline: 14px; }
.ar.ar:not(.is-playing, .is-over) .cta { border: 0; border-radius: 22px; color: var(--a-text); box-shadow: 0 6px 0 rgb(30 40 110 / .14), 0 12px 24px rgb(30 40 110 / .14); }
.ar.ar:not(.is-playing, .is-over) .cta-y { background: linear-gradient(180deg, #ffd84d, #ffbe0b); }
.ar.ar:not(.is-playing, .is-over) .cta-p { background: linear-gradient(180deg, #4d82ff, #2558e8); color: #fff; }
.ar.ar:not(.is-playing, .is-over) .ar-change { border: 0; border-radius: 16px; background: rgb(255 255 255 / .9); color: var(--a-text); }
.ar.ar:not(.is-playing, .is-over) .ar-promise { color: #1f2a63; }
.ar.ar:not(.is-playing, .is-over) .ar-bubble-l { background: #1b1f4b; color: #fff; }
.ar.ar:not(.is-playing, .is-over) .ar-bubble-r { background: #fff; color: #1b1f4b; }
.ar.ar:not(.is-playing, .is-over) .j-r { stroke: #fff; }
.ar .tn-card, .ar .custom-dock, .ar .levels-dock, .ar .touch-test { border: 0; background: #fff; color: var(--a-text); box-shadow: var(--a-shadow); }
.ar .tn-title, .ar .levels-dock h2, .ar .touch-test h2, .ar .custom-head label, .ar .custom-status { color: var(--a-text); }
.ar .tn-names, .ar .tn-select, .ar .levels-dock select, .ar .custom-dock textarea { border-color: var(--a-line); background: var(--a-bg); color: var(--a-text); }
.ar .custom-dock textarea::placeholder { color: var(--a-muted); }
.ar .custom-help, .ar .custom-note, .ar .touch-test p, .ar .tn-note, .ar .tn-round-name, .ar .tn-team { color: var(--a-muted); }
.ar .custom-link { color: var(--a-blue); }
.ar .custom-step, .ar .tn-eyebrow { color: #b5361c; }
.ar .custom-share, .ar .tn-btn { border-color: var(--a-line); background: #eef1ff; color: var(--a-text); }
.ar .tn-main { border-color: #ffbe0b; background: #ffc918; }
.ar .tn-next, .ar .tn-match { border-color: var(--a-line); background: var(--a-bg); }
.ar .tn-match.is-next { border-color: var(--a-blue); }
.ar .tn-team.is-won { background: #fff3c4; color: var(--a-text); }
.ar .tn-team + .tn-team, .ar .tn-table th, .ar .tn-table td { border-color: var(--a-line); }
.ar .tn-vs, .ar .tn-table { color: var(--a-text); }

.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-main, .dash-rail { display: contents; }
.o-game { order: 1; } .o-stats { order: 2; } .o-how { order: 3; } .o-modes { order: 4; } .o-all { order: 5; } .o-tour { order: 6; } .o-miss { order: 7; } .o-lead { order: 8; }
.head-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.head-row h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.head-row a { margin-left: auto; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.head-row .ic { width: 30px; height: 30px; }
.panel { padding: 16px; border-radius: 24px; background: var(--a-card); box-shadow: var(--a-shadow); }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.stat-strip div { padding: 2px 4px; }
.stat-strip div + div { border-left: 1.5px solid var(--a-line); }
.stat-strip b { display: block; margin-top: 3px; font: 800 1.22rem/1.1 var(--display); }
.stat-strip span { color: var(--a-muted); font-size: .8rem; line-height: 1.2; }
.save-note { margin: 8px 0 0; color: var(--a-muted); font-size: .84rem; text-align: center; }
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; text-align: center; }
.how3 li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 .92rem/1.15 var(--display); }
.how3 .ic { width: 52px; height: 52px; }
.how3 em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--a-blue); color: #fff; font-style: normal; font-size: .82rem; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 176px; padding: 14px 6px 12px; border: 0; border-radius: 22px; color: var(--a-text); font: inherit; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--a-shadow); transition: transform .15s; }
.mode:hover { color: var(--a-text); transform: translateY(-3px); }
.mode .ic { width: 62px; height: 62px; }
.mode strong { font: 800 1.02rem/1.1 var(--display); }
.mode small { font-size: .82rem; line-height: 1.2; color: #2b2f5e; }
.mode u { margin-top: auto; padding: 8px 18px; border-radius: 999px; background: #fff; font: 800 .88rem/1 var(--display); text-decoration: none; }
.m-pink { background: linear-gradient(160deg, #ffc9d4, #ff9db0); }
.m-blue { background: linear-gradient(160deg, #cfe6ff, #97c9ff); }
.m-green { background: linear-gradient(160deg, #d9f5a5, #9fdc55); }
.game-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.game-tiles a { display: flex; flex-direction: column; justify-content: center; min-height: 72px; height: 100%; box-sizing: border-box; padding: 10px 13px; border-radius: 16px; background: var(--a-bg); color: var(--a-text); text-decoration: none; }
.game-tiles a:hover { background: #e4eaff; color: var(--a-text); }
.game-tiles strong { font: 800 .98rem/1.15 var(--display); }
.game-tiles span { color: var(--a-muted); font-size: .84rem; line-height: 1.25; }
.tour { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 24px; background: linear-gradient(100deg, #fff4d1, #ffe9b8); box-shadow: var(--a-shadow); }
.tour > .ic { width: 66px; height: 66px; }
.tour h3 { margin: 0 0 3px; font-size: 1.14rem; }
.tour p { margin: 0; color: #4a4a68; font-size: .9rem; line-height: 1.3; }
.gold-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 18px; background: linear-gradient(180deg, #ffd84d, #ffbe0b); color: var(--a-text); font: 800 .96rem/1 var(--display); text-decoration: none; box-shadow: 0 4px 0 rgb(180 120 0 / .35); }
.gold-btn:hover { color: var(--a-text); }
.miss { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.miss li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 4px 10px; }
.miss .ic { width: 40px; height: 40px; grid-row: span 2; }
.miss strong { font: 800 .97rem/1.1 var(--display); }
.miss small { color: var(--a-muted); font-weight: 700; }
.bar { grid-column: 2 / -1; height: 9px; border-radius: 9px; background: var(--a-line); overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; border-radius: 9px; background: var(--a-blue); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; text-align: center; }
.podium > div { padding: 12px 4px; border-radius: 16px 16px 8px 8px; background: var(--a-bg); }
.podium .p1 { padding-block: 26px 14px; background: #fff3c4; }
.podium em { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: #b9c0dd; color: #1b1f4b; font: 800 1rem/1 var(--display); font-style: normal; }
.podium .p1 em { background: #ffc918; }
.podium .p3 em { background: #f2a06a; }
.podium strong { display: block; font: 800 .92rem/1.15 var(--display); overflow-wrap: anywhere; }
.podium span { color: var(--a-muted); font-size: .84rem; }
.level { display: flex; align-items: center; justify-content: space-between; font: 800 1rem/1 var(--display); }

.page-copy.page-copy, .entry.entry, .cluster.cluster, .listing.listing, .band.wrap { box-sizing: border-box; width: auto; max-width: 860px; margin: 18px auto 0; }
.page-copy.page-copy { display: grid; gap: 18px; padding: 0; color: var(--a-text); }
.page-copy .sec.sec, .entry.entry, .cluster.cluster { padding: 22px; border-radius: 24px; background: #fff; color: var(--a-text); box-shadow: var(--a-shadow); }
.page-copy h2, .sec-paper h2, .sec-blue h2 { color: var(--a-text); margin-top: 0; }
.page-copy .sec h2 + p { margin-top: 0; }
.page-copy .sec p, .prose, .prose p, .prose li { color: #2c3060; }
.page-copy .note-box { margin: 0; padding: 0; background: none; color: inherit; }
.page-copy .eyebrow, .sec-paper .eyebrow, .sec-blue .eyebrow, .note-box .eyebrow, .sec-blue .note-box .eyebrow { color: #b5361c; }
.page-copy .act a, .sec-paper .act a, .sec-blue .act a { border: 0; background: #eef1ff; color: var(--a-text); }
.page-copy .act .act-main, .sec-paper .act .act-main, .sec-blue .act .act-main { background: var(--a-blue); color: #fff; }
.page-copy details { border: 0; background: var(--a-bg); }
.page-copy details:first-of-type { border: 0; }
.page-copy details p { color: #2c3060; }
.page-copy summary, .page-copy summary::after { color: var(--a-text); }
.page-copy p a { color: var(--a-blue); }
.entry h1, .entry h2, .entry h3, .prose h2, .prose h3 { color: var(--a-text); }
.meta, .lede { color: var(--a-muted); }
.prose a, .meta a { color: var(--a-blue); }
.terms a, .pager a { border-color: var(--a-line); background: #eef1ff; color: var(--a-text); }
.prose blockquote { color: var(--a-muted); }
.prose th, .prose td { border-color: var(--a-line); }
.cluster h2 { color: var(--a-text); }
.cluster.cluster a { border-color: var(--a-line); background: var(--a-bg); color: var(--a-text); }
.cluster.cluster a::after { color: var(--a-blue); }
.card { border: 0; background: #fff; color: var(--a-text); box-shadow: var(--a-shadow); }
.card:hover { color: var(--a-text); }
.card h2 { color: var(--a-text); }
.card p { color: var(--a-muted); }
.topic { background: #ffc918; }
.listing .h1, .band .h2 { color: var(--a-text); }
.related { margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: #eef1ff; }
.related h2 { margin: 0 0 6px; font-size: 1.2rem; }
.related p { margin: 0; color: #2c3060; }
.site-footer { margin: 0; background: none; color: var(--a-muted); }
.site-footer .foot-end { margin: 0; padding: 18px 0 0; text-align: center; color: var(--a-muted); font-size: .9rem; }
.figure img { border-radius: 16px; }

@media (min-width: 1024px) {
  .side-nav { position: fixed; inset: 0 auto 0 0; z-index: 45; display: flex; flex-direction: column; gap: 3px; width: 238px; box-sizing: border-box; padding: 18px 12px; overflow-y: auto; background: #fff; box-shadow: 1px 0 0 var(--a-line); }
  .side-nav .brand { margin: 2px 8px 14px; }
  .side-promo { margin-top: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #fff4d1, #ffe9b8); text-align: center; }
  .side-promo .ic { width: 58px; height: 58px; }
  .side-promo strong { display: block; font: 800 1rem/1.15 var(--display); }
  .side-promo p { margin: 3px 0 10px; color: #4a4a68; font-size: .86rem; line-height: 1.25; }
  .side-promo .gold-btn { width: 100%; box-sizing: border-box; min-height: 42px; }
  .shell-main, .topbar { margin-left: 238px; }
  .shell-main { padding: 0 22px 26px; }
  .topbar { padding: 12px 22px; }
  .topbar .brand, .burger, .bottom-nav { display: none; }
  .top-search { display: flex; flex: 1; align-items: center; gap: 8px; max-width: 460px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: var(--a-shadow); }
  .top-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--a-text); font: inherit; outline-offset: 6px; }
  .top-search input::placeholder { color: var(--a-muted); opacity: 1; }
  .top-search .ic { width: 20px; height: 20px; }
  .coins { margin-left: auto; }
  .top-play { display: inline-flex; }
  .game-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode { min-height: 208px; }
  .mode .ic { width: 84px; height: 84px; }
  .mode strong { font-size: 1.24rem; }
}
@media (min-width: 1280px) {
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 20px; }
  .dash-main, .dash-rail { display: grid; gap: 18px; }
  .dash-main > *, .dash-rail > * { min-width: 0; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .stat-strip div:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) {
  .tour { flex-wrap: wrap; }
  .tour > div { flex: 1 1 60%; }
  .tour .gold-btn { width: 100%; }
}