/* ============================================================
   KIDSCORP ROBLOX · V2 Experience Hub
   Playable hub only (HUD, join screen, windows). The page content
   below the hub is a hidden source the windows clone from.
   Font: Montserrat (Kidscorp).
   ============================================================ */
:root {
  --bg: #0F1014;
  --bg2: #15171C;
  --card: #1B1D23;
  --card2: #23262E;
  --line: rgba(255, 255, 255, .09);
  --tx: #FFFFFF;
  --mut: rgba(255, 255, 255, .70);
  --violet: #9414FA;
  --fuchsia: #DB1EFA;
  --cyan: #4CCBFF;
  --green: #00B06F;
  --green-d: #00965E;
  --yellow: #FFD21F;
  --pink: #FF5CA8;
  --orange: #FF8A1F;
  --ribbon: linear-gradient(135deg, #8D14FA 0%, #C71BFA 70%, #DB1EFA 100%);
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --hud-top: 84px;
  --hud-bottom: 16px;
}
body.vhub { background: var(--bg); color: var(--tx); font-family: var(--body); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; }

/* ---------- buttons ---------- */
.btn-g, .btn-s, .btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--body); border-radius: 12px; padding: 14px 22px; border: 0; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-g { background: #9414FA; color: #fff; box-shadow: 0 6px 0 #680CAF, 0 14px 30px -12px rgba(148, 20, 250, .7); }
.btn-g:hover { transform: translateY(-1px); background: #A23BFB; }
.btn-g:active { transform: translateY(3px); box-shadow: 0 3px 0 #680CAF; }
.btn-g:disabled { background: #3A3D45; color: rgba(255, 255, 255, .5); box-shadow: 0 6px 0 #2A2C33; cursor: not-allowed; transform: none; }
.btn-s { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--line); }
.btn-s:hover { background: rgba(255, 255, 255, .14); }
.btn-g .material-symbols-rounded, .btn-s .material-symbols-rounded { font-size: 18px; }
:where(.hub, .page) :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* coin icon */
.coin-ic { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3A6 0 18%, #FFD21F 19% 55%, #E5A400 56%); box-shadow: inset 0 0 0 2px #C98A00; flex: none; }

/* ============================================================
   HUB
   ============================================================ */
.hub {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: linear-gradient(180deg, #2E9BFF 0%, #8FD3FF 55%, #DDF4FF 100%);
  isolation: isolate; color: #fff;
}
html.hub-fail .hub { display: none; }
.page[hidden] { display: none !important; }
.hub-fallback { display: none; }
html.hub-fail .hub-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 100vh; min-height: 100svh; padding: 96px 16px 32px; text-align: center; font: 600 17px/1.4 var(--body); }
.hub__stage { position: absolute; inset: 0; outline: none; }
.hub__stage:focus-visible { box-shadow: inset 0 0 0 3px var(--yellow); }
.hub__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; cursor: grab; }
.hub__canvas.is-dragging { cursor: grabbing; }
.hub__labels { position: absolute !important; top: 0; left: 0; pointer-events: none; z-index: 2; }
.hub__labels [hidden] { display: none !important; }

/* ---------- world labels ---------- */
.plate {
  text-align: center; padding: 7px 14px 8px; border-radius: 12px; background: rgba(18, 20, 26, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14);
  font: 600 11px/1.2 var(--body); color: rgba(255, 255, 255, .8); white-space: nowrap; margin-bottom: 4px;
}
.plate b { display: block; font: 700 16px/1.1 var(--display); color: #fff; letter-spacing: .01em; }
.plate__v { display: none; margin-top: 5px; font-style: normal; font: 700 10px/1 var(--body); color: #fff; background: var(--green); padding: 4px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.plate.is-visited .plate__v { display: inline-block; }
.np {
  font: 700 13px/1 var(--display); color: #fff; white-space: nowrap; padding-bottom: 2px;
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .9), 0 0 1px #000;
}
.np i { font: 700 9px/1 var(--body); font-style: normal; margin-left: 5px; background: var(--violet); padding: 2px 5px 3px; border-radius: 4px; vertical-align: 2px; text-shadow: none; }
.np--player { font-weight: 600; color: #F2F6FF; }
.bubble { padding-bottom: 26px; pointer-events: none; }
.bubble span {
  display: block; max-width: 230px; width: max-content; background: #fff; color: #1B1F27; font: 600 13px/1.35 var(--body);
  padding: 9px 12px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); position: relative;
  opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .25s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.bubble span::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble.is-on span { opacity: 1; transform: none; }
.pprompt {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  background: rgba(18, 20, 26, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px;
  padding: 8px 14px 8px 8px; cursor: pointer; font-family: var(--body); text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: pp-in .25s cubic-bezier(.2, 1.4, .4, 1);
}
.pprompt kbd { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #fff; color: #1B1F27; font: 700 16px/1 var(--display); box-shadow: inset 0 -3px 0 #C9CED8; }
.pprompt span { display: flex; flex-direction: column; gap: 3px; }
.pprompt b { font: 700 14px/1 var(--display); }
.pprompt i { font: 600 11px/1 var(--body); font-style: normal; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.pprompt:hover { background: rgba(28, 30, 38, .92); }
.is-touch .pprompt kbd { width: 34px; font-size: 0; }
.is-touch .pprompt kbd::before { content: "touch_app"; font-family: "Material Symbols Rounded"; font-size: 20px; font-variation-settings: "FILL" 1; }
@keyframes pp-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-family: var(--body); }
.hud[hidden] { display: none; }
.hud > *, .hud__tl > *, .hud__tr > * { pointer-events: auto; }
.hud__tl { position: absolute; top: var(--hud-top); left: 16px; display: flex; flex-direction: column; gap: 10px; width: 300px; max-width: calc(50vw - 24px); pointer-events: none; }
.hud__tr { position: absolute; top: var(--hud-top); right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: 270px; max-width: calc(50vw - 24px); pointer-events: none; }
.hud__btns { display: flex; gap: 8px; }
.hb {
  width: 42px; height: 42px; border-radius: 12px; border: 0; background: rgba(18, 20, 26, .62); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s;
}
.hb:hover { background: rgba(18, 20, 26, .85); }
.hb[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #1B1F27; }
.hb--logo img { width: 26px; height: auto; }
.glass { background: rgba(18, 20, 26, .64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.quest { background: rgba(18, 20, 26, .64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.quest__head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 14px; background: transparent; color: #fff; border: 0; cursor: pointer; text-align: left;
}
.quest__ttl { flex: 1; font: 700 15px/1.1 var(--display); letter-spacing: .01em; }
.quest__count { font: 700 12px/1 var(--body); background: var(--yellow); color: #1B1F27; padding: 4px 8px; border-radius: 99px; }
.quest__chev { transition: transform .25s; opacity: .8; }
.quest.is-closed .quest__chev { transform: rotate(180deg); }
.quest.is-closed .quest__list { display: none; }
.quest__list { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.q { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px; border-radius: 10px; transition: background .3s; }
.q.is-cur { background: rgba(255, 210, 31, .14); box-shadow: inset 3px 0 0 var(--yellow); }
.q__box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(255, 255, 255, .45); display: grid; place-items: center; margin-top: 1px; }
.q__box .material-symbols-rounded { font-size: 16px; opacity: 0; transform: scale(.4); transition: all .3s cubic-bezier(.2, 1.6, .4, 1); }
.q.is-done .q__box { background: var(--green); border-color: var(--green); }
.q.is-done .q__box .material-symbols-rounded { opacity: 1; transform: none; }
.q__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q__txt b { font: 600 13px/1.3 var(--body); }
.q.is-done .q__txt b { color: rgba(255, 255, 255, .6); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.q__meta { font: 600 11px/1.2 var(--body); font-style: normal; color: var(--yellow); }
.q.is-done .q__meta { color: #7BE3A8; }
.q.is-pop { animation: q-pop .8s ease; }
@keyframes q-pop { 30% { transform: scale(1.04); background: rgba(0, 176, 111, .3); } }

.coinpill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgba(18, 20, 26, .64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 700 16px/1 var(--display); }
.coinpill.is-bump { animation: bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { transform: scale(1.18); } }

.hint { position: absolute; right: 16px; bottom: var(--hud-bottom); margin: 0; padding: 10px 14px 11px; display: grid; gap: 7px; min-width: 180px; border-radius: 12px; background: rgba(18, 20, 26, .66); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 12px/1 var(--body); pointer-events: none !important; }
.hint p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hint .hint__ttl { font: 700 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hint__keys { display: inline-flex; align-items: center; gap: 3px; }
.hint__keys i { font-style: normal; font-weight: 500; color: rgba(255, 255, 255, .6); margin: 0 4px; }
.hint__keys .material-symbols-rounded { font-size: 18px; }
.hint kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); font: 700 11px/1 var(--body); color: #fff; }
.is-touch .hint { display: none; }

.mg { position: absolute; top: var(--hud-top); left: 50%; transform: translateX(-50%); min-width: 230px; text-align: center; padding: 10px 18px 12px; border-radius: 16px; background: linear-gradient(180deg, #FF8A1F, #F0382F); box-shadow: 0 10px 30px rgba(240, 56, 47, .35); }
.mg[hidden] { display: none; }
.mg p { margin: 0; }
.mg__ttl { font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.mg__score { font: 700 38px/1.05 var(--display); }
.mg__score span { font-size: 20px; opacity: .8; }
.mg__bar { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .25); overflow: hidden; margin: 6px 0 5px; }
.mg__bar i { display: block; height: 100%; width: 100%; background: var(--yellow); border-radius: inherit; }
.mg__time { font: 700 13px/1 var(--body); }
.mg.is-low .mg__bar i { background: #fff; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }
.mg-count { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 700 120px/1 var(--display); color: #fff; text-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 30px rgba(255, 210, 31, .7); pointer-events: none !important; opacity: 0; }
.mg-count.is-on { animation: count .6s ease-out forwards; }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }

.joy, .jumpbtn { display: none; }
.is-touch .joy { display: block; position: absolute; left: 22px; bottom: var(--hud-bottom); width: 116px; height: 116px; border-radius: 50%; background: rgba(18, 20, 26, .35); border: 2px solid rgba(255, 255, 255, .35); touch-action: none; }
.joy__knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); pointer-events: none; }
.is-touch .jumpbtn { display: grid; place-items: center; position: absolute; right: 22px; bottom: calc(var(--hud-bottom) + 6px); width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); background: rgba(18, 20, 26, .4); color: #fff; touch-action: none; }
.is-touch .jumpbtn .material-symbols-rounded { font-size: 34px; }
.is-touch .jumpbtn:active { background: rgba(255, 255, 255, .3); }

/* toasts */
.toasts { position: absolute; top: calc(var(--hud-top) + 2px); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.hub:has(.mg:not([hidden])) .toasts { top: calc(var(--hud-top) + 130px); }
.toast { display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(18, 20, 26, .9); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.4, .4, 1); max-width: 100%; }
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(-8px); }
.toast__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: 24px; }
.toast__txt { display: flex; flex-direction: column; gap: 3px; font: 600 12.5px/1.35 var(--body); color: rgba(255, 255, 255, .8); }
.toast__txt small { font: 700 10px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); }
.toast__txt b { font: 700 16px/1.15 var(--display); color: #fff; }
.toast--badge { background: linear-gradient(135deg, rgba(141, 20, 250, .95), rgba(219, 30, 250, .95)); border-color: rgba(255, 255, 255, .25); }
.toast--badge .toast__ic { background: var(--yellow); color: #1B1F27; animation: badge-spin .9s cubic-bezier(.2, 1.4, .4, 1); }
.toast--badge .toast__txt { color: #fff; }
@keyframes badge-spin { from { transform: rotate(-200deg) scale(.3); } }

/* ---------- join screen ---------- */
.join { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 90px 16px 120px; background: #121318; transition: opacity .6s ease, visibility .6s; }
.join__bg { position: absolute; inset: 0; background:
  radial-gradient(700px 420px at 20% 20%, rgba(148, 20, 250, .35), transparent 70%),
  radial-gradient(640px 420px at 85% 75%, rgba(36, 212, 245, .25), transparent 70%),
  radial-gradient(520px 360px at 70% 15%, rgba(255, 210, 31, .12), transparent 70%),
  #121318; }
.join__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); }
.join__card { position: relative; width: min(520px, 100%); padding: 24px; border-radius: 22px; background: rgba(30, 32, 40, .82); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 18px; }
.join__game { display: flex; gap: 16px; align-items: center; }
.join__icon { flex: none; width: 92px; height: 92px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, #FFFFFF, #E9E3FF); box-shadow: 0 10px 24px rgba(148, 20, 250, .35); }
.join__icon img { width: 66%; height: auto; }
.join__meta p { margin: 0; }
.join__title { font: 700 26px/1.1 var(--display); }
.join__by { margin-top: 6px !important; font: 600 12.5px/1.35 var(--body); color: var(--mut); }
.join__by b { color: #fff; }
.join__tag { margin-top: 8px !important; display: inline-block; font: 600 12px/1 var(--body); color: #1B1F27; background: var(--yellow); padding: 5px 9px; border-radius: 8px; }
.join__status { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.join__spin { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.join__spin i { width: 26px; height: 26px; border-radius: 6px; border: 5px solid #fff; animation: spin-sq 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes spin-sq { 0% { transform: rotate(0); } 50% { transform: rotate(180deg) scale(.82); border-radius: 50%; } 100% { transform: rotate(360deg); } }
.join__txt p { margin: 0; }
.join__state { font: 700 17px/1.2 var(--display); }
.join__sub { margin-top: 4px !important; font: 600 12px/1.3 var(--body); color: var(--mut); }
.join__bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.join__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--cyan)); transition: width .35s ease; }
.join__play { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.join__play[hidden] { display: none; }
.join__play p { margin: 0; font: 600 12px/1.45 var(--body); color: var(--mut); text-align: center; }
.btn-play { background: #9414FA; color: #fff; font: 700 20px/1 var(--display); padding: 16px; box-shadow: 0 6px 0 #680CAF; }
.btn-play .material-symbols-rounded { font-size: 30px; }
.btn-play:hover { background: #A23BFB; }
.join__leave { align-self: center; background: none; border: 0; color: var(--mut); font: 600 13px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.join__leave:hover { color: #fff; }
.join__tip { position: relative; margin: 0; max-width: 520px; text-align: center; font: 600 13px/1.4 var(--body); color: rgba(255, 255, 255, .78); }
.hub[data-state="poster"] .join__status .join__spin { display: none; }
.hub[data-state="poster"] .join__bar, .hub[data-state="poster"] .join__tip { display: none; }
.hub[data-state="playing"] .join { opacity: 0; visibility: hidden; pointer-events: none; }
.hub[data-state="playing"] .join__card { transform: scale(.96); transition: transform .6s ease; }

/* ---------- teleport transition ---------- */
.tp { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; visibility: hidden; }
.tp__swirl { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, #9414FA, #DB1EFA, #24D4F5, #FFD21F, #9414FA); transform: scale(0) rotate(0); opacity: .98; }
.tp__swirl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 30%); }
.tp__txt { position: relative; margin: 0; font: 700 clamp(22px, 3.4vw, 38px)/1.15 var(--display); color: #fff; text-align: center; padding: 0 24px; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); opacity: 0; transform: translateY(14px); }
.tp.is-in { visibility: visible; }
.tp.is-in .tp__swirl { animation: tp-in .8s cubic-bezier(.6, 0, .3, 1) forwards; }
.tp.is-in .tp__txt { animation: tp-txt .5s .25s ease forwards; }
.tp.is-out .tp__swirl { animation: tp-out .5s ease forwards; }
.tp.is-out .tp__txt { animation: none; opacity: 0; transition: opacity .2s; }
@keyframes tp-in { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(160deg); } }
@keyframes tp-out { from { transform: scale(1) rotate(160deg); opacity: .98; } to { transform: scale(1.1) rotate(260deg); opacity: 0; } }
@keyframes tp-txt { to { opacity: 1; transform: none; } }

/* ---------- in-game window ---------- */
.win-wrap { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 78px 16px calc(var(--hud-bottom) + 54px); background: rgba(10, 10, 14, .38); opacity: 0; transition: opacity .25s; }
.win-wrap[hidden] { display: none; }
.win-wrap.is-open { opacity: 1; }
.win { width: min(860px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 20px; background: rgba(28, 30, 37, .97); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; }
.win--menu, .win--mg, .win--fmt, .win--rw { width: min(600px, 100%); }
.win--cta { width: min(640px, 100%); }
.win__bar { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.win__title { flex: 1; margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: .01em; }
.win__x { width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.win__x:hover { background: #F0382F; }
.win__body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.win__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { display: inline-block; font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-radius: 99px; background: rgba(76, 203, 255, .16); color: var(--cyan); }

/* case */
.pc { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: start; }
.pc__media { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #0F1014; }
.pc__media img { width: 100%; height: 100%; object-fit: cover; }
.pc__year { position: absolute; top: 12px; left: 12px; font: 700 13px/1 var(--display); background: rgba(0, 0, 0, .65); padding: 7px 10px; border-radius: 9px; }
.pc__world { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--body); background: var(--green); padding: 6px 10px 6px 7px; border-radius: 99px; }
.pc__world .material-symbols-rounded { font-size: 16px; }
.pc__info > p { margin: 10px 0 0; font: 500 14.5px/1.55 var(--body); color: var(--mut); }
.pc__title, .pp__info h3 { margin: 12px 0 0; font: 700 23px/1.2 var(--display); }
.pc__title small { display: block; font: 700 12px/1 var(--body); color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.metrics div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.metrics b { display: block; font: 700 24px/1 var(--display); color: #fff; }
.metrics span { display: block; margin-top: 6px; font: 600 11.5px/1.35 var(--body); color: var(--mut); }

/* npc quote */
.npcq { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(148, 20, 250, .16); margin-bottom: 18px; }
.npcq p { margin: 0; font: 600 13.5px/1.45 var(--body); color: rgba(255, 255, 255, .88); }
.npcq b { display: block; font: 700 14px/1.1 var(--display); color: #fff; margin-bottom: 3px; }
.npcq__av { flex: none; width: 44px; height: 44px; border-radius: 12px; background:
  radial-gradient(circle at 36% 48%, #1B1B1F 0 7%, transparent 8%), radial-gradient(circle at 64% 48%, #1B1B1F 0 7%, transparent 8%),
  radial-gradient(ellipse 22% 10% at 50% 70%, #6B2E1A 0 60%, transparent 62%), linear-gradient(#6B3A1E 0 26%, #F0C29A 26%); }
.npcq__av--cap { background:
  radial-gradient(circle at 36% 52%, #1B1B1F 0 7%, transparent 8%), radial-gradient(circle at 64% 52%, #1B1B1F 0 7%, transparent 8%),
  radial-gradient(ellipse 22% 10% at 50% 74%, #6B2E1A 0 60%, transparent 62%), linear-gradient(#1F5FBF 0 30%, #D9A47A 30%); }
.npcq__av--pro { background:
  radial-gradient(circle at 36% 48%, #1B1B1F 0 7%, transparent 8%), radial-gradient(circle at 64% 48%, #1B1B1F 0 7%, transparent 8%),
  radial-gradient(ellipse 22% 10% at 50% 70%, #6B2E1A 0 60%, transparent 62%), linear-gradient(#2B1A10 0 26%, #F0C29A 26%); box-shadow: inset 0 -6px 0 #DB1EFA; }

/* process */
.pp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pp__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #0F1014; }
.pp__media img { width: 100%; height: 100%; object-fit: cover; }
.pp__media .dash { height: 100%; }
.pp__n { font: 700 12px/1 var(--body); color: var(--yellow); letter-spacing: .1em; }
.pp__info h3 { margin-top: 8px; }
.pp__info p { margin: 10px 0 0; font: 500 14.5px/1.55 var(--body); color: var(--mut); }

/* formats */
.pfw__lead { margin: 0 0 16px; font: 600 14px/1.5 var(--body); color: rgba(255, 255, 255, .85); }
.pf { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.pf__ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ribbon); }
.pf__ic .material-symbols-rounded { font-size: 28px; }
.pf__txt h3 { margin: 2px 0 0; font: 700 21px/1.2 var(--display); }
.pf__txt p { margin: 8px 0 0; font: 500 14px/1.55 var(--body); color: var(--mut); }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font: 700 11px/1 var(--body); padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); }

/* rewarded */
.rw__video { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; margin-bottom: 16px; }
.rw__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw__ad { position: absolute; top: 10px; left: 10px; font: 700 12px/1 var(--body); background: rgba(0, 0, 0, .7); padding: 7px 10px; border-radius: 8px; }
.rw__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, .25); }
.rw__bar i { display: block; height: 100%; width: 0; background: var(--yellow); }
.win--rw .btn-g .coin-ic { width: 16px; height: 16px; }

/* safety settings */
.set { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.set__side { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); position: sticky; top: 0; }
.set__k { margin: 0 0 6px; font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.set__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font: 600 12.5px/1.2 var(--body); }
.sw { position: relative; display: inline-block; width: 52px; padding: 4px 0; border-radius: 99px; text-align: center; font: 700 10px/1 var(--body); text-transform: uppercase; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); }
.sw.is-on { background: var(--green); color: #fff; }
.set__main > .lead { margin: 0 0 14px; font: 500 14px/1.55 var(--body); color: var(--mut); }
/* doubled class: must beat the later .badges rule (4 columns, 28px margins) */
.badges.badges--sm { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.badges--sm .badge { padding: 10px 8px; gap: 6px; justify-content: center; min-height: 78px; }
/* the seals have very different shapes (round vs. wide): one box keeps them balanced */
.badges--sm .badge img { height: 34px; width: 100%; max-width: 76px; object-fit: contain; }
.badges--sm .badge span { font-size: 9.5px; }
.faq--win details { background: rgba(255, 255, 255, .05); }

/* producer */
.cp__h { margin: 0; font: 700 30px/1.15 var(--display); }
.cp__h em { font-style: normal; background: var(--ribbon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp__p { margin: 10px 0 0; font: 500 15px/1.55 var(--body); color: var(--mut); }
.cp__badges { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp__badges li { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--body); padding: 7px 10px 7px 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .45); }
.cp__badges li .material-symbols-rounded { font-size: 16px; }
.cp__badges li.is-on { background: rgba(255, 210, 31, .16); color: var(--yellow); }

/* minigame result */
.mr__big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .05); margin-bottom: 16px; text-align: center; }
.mr__big .material-symbols-rounded { font-size: 52px; color: rgba(255, 255, 255, .7); }
.mr__big b { font: 700 30px/1 var(--display); }
.mr__big span:last-child { font: 600 14px/1 var(--body); color: var(--mut); }
.mr__big.is-win { background: linear-gradient(135deg, rgba(255, 138, 31, .3), rgba(240, 56, 47, .3)); }
.mr__big.is-win .material-symbols-rounded { color: var(--yellow); }

/* menu */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.menu__list { display: flex; flex-direction: column; gap: 8px; }
.menu__btn { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .07); color: #fff; font: 700 14px/1 var(--body); cursor: pointer; text-align: left; }
.menu__btn:hover { background: rgba(255, 255, 255, .14); }
.menu__keys dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.menu__keys dl div { display: flex; justify-content: space-between; gap: 10px; font: 600 12.5px/1.35 var(--body); padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.menu__keys dt { color: var(--yellow); font-weight: 700; }
.menu__keys dd { margin: 0; color: var(--mut); text-align: right; }

/* ============================================================
   READ MODE PAGE
   ============================================================ */
.page { position: relative; z-index: 2; background: var(--bg); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 110px 0; position: relative; }
.sec:nth-of-type(even) { background: var(--bg2); }
.sec__head { max-width: 760px; margin-bottom: 48px; }
.sec h2, .intro h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.005em; margin: 0; }
.sec h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; }
.sec h2 em, .intro h1 em { font-style: normal; }
.sec h2 em { background: var(--ribbon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font: 500 clamp(16px, 1.4vw, 19px)/1.6 var(--body); color: var(--mut); margin: 18px 0 0; }
.lead b { color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* intro */
.intro { padding: 140px 0 100px; background:
  radial-gradient(800px 500px at 10% 0%, rgba(148, 20, 250, .22), transparent 70%),
  radial-gradient(700px 500px at 100% 100%, rgba(36, 212, 245, .14), transparent 70%), var(--bg); }
.intro__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.lockup { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); margin-bottom: 24px; }
.lockup__mark { width: 22px; height: 22px; fill: #fff; }
.lockup__word { font: 800 14px/1 var(--body); letter-spacing: .14em; }
.lockup__x { font: 600 12px/1 var(--body); color: var(--mut); padding-left: 10px; border-left: 1px solid var(--line); }
.intro h1 { font-size: clamp(42px, 6.2vw, 84px); line-height: 1.02; }
.intro h1 em { display: inline-block; color: #1B1F27; background: var(--yellow); padding: 0 .22em .06em; border-radius: .18em; transform: rotate(-2deg); box-shadow: 0 .09em 0 #E0A800; margin-top: .08em; }
.nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.num { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; }
.num::before { content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 18px; transform: rotate(18deg); opacity: .9; }
.num--a::before { background: var(--violet); } .num--b::before { background: var(--cyan); } .num--c::before { background: var(--yellow); } .num--d::before { background: var(--green); }
.num b { display: block; font: 700 clamp(34px, 3.6vw, 46px)/1 var(--display); }
.num span { display: block; margin-top: 8px; font: 600 13px/1.3 var(--body); color: var(--mut); }

/* story */
.beats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: center; }
.beat { margin: 0; }
.beat--talk { grid-column: span 7; position: relative; padding: 22px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.beat--talk[data-beat="0"] { grid-column: 1 / span 8; }
.beat__who { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--display); color: var(--pink); margin-bottom: 10px; }
.beat__who::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: radial-gradient(circle at 36% 48%, #1B1B1F 0 9%, transparent 10%), radial-gradient(circle at 64% 48%, #1B1B1F 0 9%, transparent 10%), linear-gradient(#1A1109 0 28%, #C98E5E 28%); }
.beat--talk p { margin: 0; font: 700 clamp(20px, 2.2vw, 28px)/1.25 var(--display); }
.beat--talk em { font-style: normal; color: var(--yellow); }
.beat--talk small { display: block; margin-top: 10px; font: 500 15px/1.55 var(--body); color: var(--mut); }
.beat--img { grid-column: span 5; border-radius: 22px; overflow: hidden; position: relative; aspect-ratio: 4 / 5; max-height: 460px; }
.beat--img img { width: 100%; height: 100%; object-fit: cover; }
.beat--img figcaption { position: absolute; left: 14px; bottom: 14px; font: 700 12px/1 var(--body); background: rgba(0, 0, 0, .65); padding: 8px 11px; border-radius: 9px; }
.beat--end { grid-column: 1 / -1 !important; text-align: center; background: var(--ribbon); border: 0; }
.beat--end .beat__who { color: #fff; }
.beat--end em { color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 6px; }

/* process */
.procs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proc { border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.proc__media { aspect-ratio: 4 / 3; background: #0F1014; }
.proc__media img { width: 100%; height: 100%; object-fit: cover; }
.proc__body { padding: 20px; }
.proc__n { font: 700 12px/1 var(--body); color: var(--yellow); letter-spacing: .1em; }
.proc h3 { margin: 8px 0 0; font: 700 21px/1.2 var(--display); }
.proc p { margin: 10px 0 0; font: 500 14px/1.55 var(--body); color: var(--mut); }
.dash { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; background: linear-gradient(160deg, #141B2B, #0E1220); }
.dash__kpis { display: flex; gap: 10px; }
.dash__kpis span { flex: 1; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font: 600 10px/1.2 var(--body); color: rgba(255, 255, 255, .6); }
.dash__kpis b { display: block; font: 700 18px/1.1 var(--display); color: #fff; }
.dash__bars { display: flex; align-items: flex-end; gap: 6px; height: 46%; }
.dash__bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--fuchsia), var(--violet)); }

/* cases */
.xps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.xp { border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s; }
.xp:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.xp__media { position: relative; aspect-ratio: 16 / 10; background: #0F1014; }
.xp__media img { width: 100%; height: 100%; object-fit: cover; }
.xp__year { position: absolute; top: 10px; left: 10px; font: 700 12px/1 var(--display); background: rgba(0, 0, 0, .65); padding: 6px 9px; border-radius: 8px; }
.xp__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.xp__tag { align-self: flex-start; font: 700 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 6px 9px; border-radius: 99px; background: rgba(76, 203, 255, .14); color: var(--cyan); }
.xp h3 { margin: 0; font: 700 18px/1.25 var(--display); }
.xp h3 small { display: block; font: 700 11px/1 var(--body); color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.xp p { margin: 0; font: 500 13.5px/1.55 var(--body); color: var(--mut); }
.xp__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 6px; }
.xp__metrics div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.xp__metrics div:only-child { grid-column: 1 / -1; }
.xp__metrics b { display: block; font: 700 19px/1 var(--display); }
.xp__metrics span { display: block; margin-top: 5px; font: 600 11px/1.3 var(--body); color: var(--mut); }
.xp__cta { margin-top: 4px; padding: 12px 16px; font-size: 14px; }

/* offer */
.fmts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fmt { padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.fmt__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ribbon); }
.fmt__ic .material-symbols-rounded { font-size: 28px; }
.fmt h3 { margin: 18px 0 0; font: 700 22px/1.2 var(--display); }
.fmt p { margin: 10px 0 0; font: 500 14px/1.55 var(--body); color: var(--mut); }
.fmt ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fmt li { font: 700 11px/1 var(--body); padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); }

/* privacy */
.privacy__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: #fff; color: #1B1F27; text-align: center; }
.badge img { height: 36px; width: auto; }
.badge span { font: 700 10.5px/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 14px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 18px; position: relative; font: 700 16px/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font: 700 18px/1 var(--body); transition: transform .25s, background .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--violet); }
.faq details p { margin: 0; padding: 0 18px 18px; font: 500 14.5px/1.6 var(--body); color: var(--mut); }

/* cta */
.cta__card { padding: clamp(32px, 5vw, 64px); border-radius: 28px; background: var(--ribbon); position: relative; overflow: hidden; }
.cta__card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 40px; background: rgba(255, 255, 255, .12); transform: rotate(18deg); }
.cta__card h2 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--yellow); }
.cta__card .lead { color: rgba(255, 255, 255, .88); max-width: 640px; }
.cta__card .btn-s { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .procs, .xps, .fmts { grid-template-columns: repeat(2, 1fr); }
  .intro__grid, .privacy__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .pc, .pp__grid, .set { grid-template-columns: 1fr; }
  .set__side { position: static; }
  .menu { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --hud-top: 72px; }
  .hud__tl { width: auto; max-width: calc(100vw - 150px); }
  .hud__tr { width: 150px; }
  .hb { width: 38px; height: 38px; }
  .quest__ttl { font-size: 13px; }
  .quest:not(.is-closed) { width: min(290px, calc(100vw - 150px)); }
  .q { padding: 6px; }
  .q__txt b { font-size: 12px; }
  .win-wrap { padding: 70px 10px calc(var(--hud-bottom) + 50px); }
  .win__body { padding: 16px; }
  .win__title { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .sec { padding: 80px 0; }
  .intro { padding: 110px 0 70px; }
  .procs, .xps, .fmts { grid-template-columns: 1fr; }
  .beats { grid-template-columns: 1fr; }
  .beat--talk, .beat--talk[data-beat="0"], .beat--img { grid-column: 1 / -1; }
  .beat--img { aspect-ratio: 4 / 3; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .join__icon { width: 72px; height: 72px; }
  .join__title { font-size: 21px; }
  .tp__txt { font-size: 22px; }
}
@media (max-width: 420px) {
  .nums { grid-template-columns: 1fr 1fr; }
  .num { padding: 16px; }
  .lockup__x { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .xp:hover { transform: none; }
}