@font-face { font-family: "Montserrat"; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body[data-ui="rx"], body[data-ui="blox"] {
  --ol: #1B1B1F; --rx-bg: #111216; --rx-card: #1E2025; --rx-line: #2A2D33; --rx-grey: #A7A9AE; --rx-blue: #335FFF; --rx-green: #00B06F;
  background: var(--rx-bg); color: #F7F7F8;
}
body[data-ui="rx"] { --f-t: "Montserrat", system-ui, sans-serif; --f-d: "Montserrat", system-ui, sans-serif; font: 600 16px/1.4 var(--f-t); }
body[data-ui="blox"] { --f-t: "Nunito", system-ui, sans-serif; --f-d: "Nunito", system-ui, sans-serif; font: 800 16px/1.35 var(--f-t); }
body[data-ui="rx"]::before, body[data-ui="blox"]::before { display: none; }
html:has(body[data-ui="rx"]), html:has(body[data-ui="blox"]) { background: #111216; }

.st { color: #fff; font-family: "Nunito", system-ui, sans-serif; font-weight: 900; -webkit-text-stroke: .16em var(--ol, #1B1B1F); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ol, #1B1B1F); letter-spacing: .01em; }
.bi { display: block; width: 22px; height: 22px; }

/* ——— кнопки ——— */
.bxb { --c1: #5BE36A; --c2: #2FB53F; --bd: #1C7A2A; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 3px solid var(--ol); background: linear-gradient(var(--c1), var(--c2)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--ol); font: 900 18px/1.1 "Nunito", sans-serif; transition: transform .08s, box-shadow .08s; text-align: center; }
.bxb .st { font-size: inherit; -webkit-text-stroke-width: .14em; }
.bxb:active:not([disabled]) { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 1px 0 var(--ol); }
.bxb[disabled] { filter: grayscale(.8); opacity: .6; }
.bxb.blue { --c1: #5CB8FF; --c2: #2484F0; }
.bxb.yellow { --c1: #FFE066; --c2: #FFB81F; }
.bxb.red { --c1: #FF8080; --c2: #F03B3B; }
.bxb.purple { --c1: #C08BFF; --c2: #9A4DFF; }
.bxb.small { min-height: 44px; font-size: 15.5px; padding: 0 12px; border-radius: 12px; }
.bxb.big { min-height: 60px; font-size: 21px; width: 100%; }

/* ——— мир ——— */
.screen.blox { position: relative; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; color: #fff; user-select: none; -webkit-user-select: none; }
body[data-mode] .screen.blox { overflow: hidden; }
.bx-world { position: absolute; inset: 0; overflow: hidden; }
.bx-sky { position: absolute; inset: 0 0 34% 0; background: linear-gradient(var(--s1), var(--s2)); }
.bx-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: var(--g); overflow: hidden; }
.bx-ground::before { content: ""; position: absolute; left: -60%; right: -60%; top: 0; bottom: -40%; transform: perspective(240px) rotateX(52deg); transform-origin: 50% 0; background-image: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .26) 0 24%, rgba(0, 0, 0, .14) 25% 30%, transparent 31%), linear-gradient(rgba(0, 0, 0, .07) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, .07) 2px, transparent 2px); background-size: 30px 30px; }
.bx-ground::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 30%; background: linear-gradient(var(--s2), transparent); opacity: .55; }
.bx-cloud { position: absolute; width: 90px; height: 26px; border-radius: 6px; background: #fff; opacity: .85; box-shadow: 30px -14px 0 -2px #fff, 56px 0 0 -4px #fff; animation: drift 40s linear infinite; }
.bx-cloud.c1 { top: 16%; left: -20%; }
.bx-cloud.c2 { top: 30%; left: -40%; transform: scale(.7); animation-duration: 60s; animation-delay: -20s; opacity: .65; }
.bx-stars { position: absolute; inset: 0; background-image: radial-gradient(1.6px 1.6px at 10% 20%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 30% 60%, #fff 50%, transparent), radial-gradient(2px 2px at 70% 30%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 85% 70%, #fff 50%, transparent), radial-gradient(1.8px 1.8px at 50% 12%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 22% 84%, #fff 50%, transparent); }

/* ——— интерфейс игры ——— */
.bx-top { position: absolute; z-index: 6; top: calc(var(--safe-t) + 8px); left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.bx-tl { display: flex; gap: 6px; }
.bx-circ, .bx-pill { position: relative; height: 40px; min-width: 40px; border-radius: 20px; background: rgba(15, 16, 20, .55); display: grid; place-items: center; transition: transform .1s; }
.bx-circ:active, .bx-pill:active { transform: scale(.92); }
.bx-pill { padding: 0 14px; }
.bx-pill em { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: #FF4D4D; color: #fff; font: 900 11px/18px "Nunito", sans-serif; font-style: normal; text-align: center; padding: 0 4px; }
.bx-logo svg:first-child { width: 26px; height: 26px; }
.bx-logo .ring { position: absolute; inset: -2px; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; }
.bx-logo .ring circle { fill: none; stroke: #FFC72C; stroke-width: 4; stroke-dasharray: 107; stroke-dashoffset: 107; stroke-linecap: round; }
.bx-logo.hold .ring circle { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }
.bx-board { background: rgba(15, 16, 20, .55); border-radius: 8px; padding: 4px 8px 5px; font: 800 12px "Nunito", sans-serif; min-width: 128px; }
.bx-board-h, .bx-board-r { display: grid; grid-template-columns: 1fr auto 30px; gap: 8px; align-items: center; }
.bx-board-h { opacity: .7; font-size: 11px; }
.bx-board-h .coin, .bx-board-h .bi { width: 13px; height: 13px; justify-self: center; }
.bx-board-r b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
.bx-board-r span { text-align: right; }
.bx-tags { position: absolute; z-index: 5; top: calc(var(--safe-t) + 58px); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; padding: 0 10px; }
.bx-tag { background: var(--c, #2E9BFF); border: 2.5px solid var(--ol); border-radius: 7px; padding: 2px 9px 3px; font: 900 13px/1.2 "Nunito", sans-serif; color: #fff; -webkit-text-stroke: .14em var(--ol); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.bx-tag.cp { --c: #2E9BFF; }
.bx-stage { position: absolute; z-index: 3; top: calc(var(--safe-t) + 92px); bottom: calc(var(--safe-b) + 84px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 10px; }
.bx-bottom { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.bx-hotbar { display: flex; gap: 5px; }
.bx-slot { position: relative; width: 52px; height: 52px; border-radius: 9px; background: rgba(15, 16, 20, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); display: grid; place-items: center; color: #fff; overflow: hidden; }
.bx-slot i { position: absolute; top: 2px; left: 5px; font: 900 10px "Nunito", sans-serif; font-style: normal; opacity: .8; z-index: 2; }
.bx-slot.on { background: rgba(255, 255, 255, .94); color: var(--ol); box-shadow: inset 0 0 0 3px #FFC72C; }
.bx-slot.fresh { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
.bx-slot .rv-digit { font: 900 26px "Nunito", sans-serif; }
.bx-slot .rv-syl { font: 900 13px "Nunito", sans-serif; }
.bx-slot .rv-syl.long { font-size: 9.5px; }
.bx-slot .rv-syl.xlong { font-size: 7.5px; }
.bx-slot svg { width: 100%; height: 100%; }
.bx-slot .rv-ic { width: 30px; height: 30px; color: #1B1B1F; --ic2: #fff; }
.bx-jump { width: 66px; height: 66px; flex: none; border-radius: 50%; background: rgba(15, 16, 20, .45); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); display: grid; place-items: center; }
.bx-jump .bi { width: 30px; height: 30px; }
.bx-jump:active { transform: scale(.92); }
.bx-jump.pulse { animation: pulse 1.1s ease-in-out infinite; background: #FFC72C; }

/* персонажи */
.bx-npcs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 4px; }
.bx-me, .bx-npc { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bx-me { width: 26%; max-height: 52%; }
.bx-npc { width: 46%; max-height: 100%; }
.bx-me svg, .bx-npc svg { width: 100%; height: auto; max-height: 100%; }
.bx-npc svg { animation: bob 2.8s ease-in-out infinite; }
.bx-tagname { font: 900 13px "Nunito", sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 4px rgba(0, 0, 0, .4); white-space: nowrap; }
.bx-mark { font: 900 44px/1 "Nunito", sans-serif; color: #FFC72C; -webkit-text-stroke: 6px var(--ol); paint-order: stroke fill; animation: nudge 1.2s ease-in-out infinite; margin-bottom: -4px; }
.bx-mark.q { color: #5CB8FF; }

/* диалог */
.bx-dlg { position: relative; width: 100%; max-width: 440px; background: #fff; color: var(--ol); border: 4px solid var(--ol); border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .28); padding: 22px 14px 12px; margin-top: 18px; flex: none; animation: dlgIn .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.bx-dlg-n { position: absolute; top: -18px; left: 12px; background: var(--c); border: 3px solid var(--ol); border-radius: 10px; padding: 2px 10px 3px; font-size: 16px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-dlg-t { font: 800 17px/1.36 "Nunito", sans-serif; }
.bx-dlg-b { display: flex; gap: 8px; margin-top: 12px; }
.bx-dlg-b .bxb { flex: 1; }
.bx-dlg-b .bxb.small { flex: 0 0 auto; }
.bx-dlg.choices .bx-dlg-b { display: grid; grid-template-columns: 1fr 1fr; }
.bx-dlg.choices .bx-dlg-b .bxb:only-child { grid-column: 1 / -1; }
.bx-dlg.gold { background: #FFF8DC; border-color: #6B4A00; }
.bx-reply { margin-top: 8px; color: #1E8B35; font-weight: 900; }
.bx-intro { font: 700 15px "Nunito", sans-serif; opacity: .7; margin-bottom: 4px; }
.bx-rid { font: 900 19px/1.32 "Nunito", sans-serif; }
.bx-say { font: 900 20px/1.3 "Nunito", sans-serif; }
.bx-fin-h { font: 900 21px "Nunito", sans-serif; margin-bottom: 4px; }
.bx-where { position: absolute; z-index: 4; top: 0; left: 10px; display: flex; align-items: center; gap: 6px; background: rgba(15, 16, 20, .55); padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 14px; }
.bx-where .ic { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: #fff; color: var(--ol); --ic2: #fff; }
.bx-where.big { position: relative; top: auto; left: auto; flex-direction: column; background: none; gap: 6px; flex: 1 1 auto; justify-content: center; font-size: 18px; }
.bx-where.big .ic { width: min(34vw, 18vh, 130px); height: auto; aspect-ratio: 1; padding: 16%; border-radius: 22px; border: 4px solid var(--ol); box-shadow: 0 5px 0 var(--ol); }

/* окна */
.bx-win { position: relative; width: 100%; max-width: 440px; background: #F3F6FA; color: var(--ol); border: 4px solid var(--ol); border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); overflow: hidden; display: flex; flex-direction: column; animation: dlgIn .35s cubic-bezier(.2, 1.3, .4, 1) both;
  --paper: #FFFFFF; --deep: #DCE4EE; --ink: #1B1B1F; --cta: #3CC84A; --cta-ink: #FFFFFF; --pop: #FFB020; --dark: #1B1B1F; }
.bx-win-h { position: relative; background: linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .08)), var(--c); border-bottom: 4px solid var(--ol); padding: 6px 44px 8px; text-align: center; font-size: 21px; flex: none; }
.bx-win-h .st { font-size: inherit; }
.bx-win-t { font: 800 15px/1.3 "Nunito", sans-serif; color: #3A3F4A; padding: 8px 12px 0; text-align: center; flex: none; }
.bx-win .t-game { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 12px; }
.bx-win-f { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px 14px; flex: none; }
.bx-x { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 8px; background: #FF4D4D; border: 3px solid var(--ol); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.bx-x .bi { width: 16px; height: 16px; }
.bx-win-big { font-size: min(13vw, 54px); color: #FFC72C; animation: bigIn .7s cubic-bezier(.2, 1.5, .4, 1) both; flex: none; text-align: center; line-height: 1; }
.bx-win-big.st { color: #FFC72C; }

.bx-task .bx-stage { justify-content: center; }
.bx-task .bx-win { flex: 0 1 auto; min-height: 0; max-height: 100%; }
.bx-task.t-flashlight .bx-win, .bx-task.t-pipes .bx-win { flex: 1 1 auto; }
.bx-task.t-choice .bx-win-t, .bx-task.t-suspects .bx-win-t { display: none; }
.bx-task .bx-win .t-game { flex: 0 1 auto; }
.bx-task.t-flashlight .bx-win .t-game { flex: 1 1 auto; }
.bx-reward .bx-stage, .bx-tp .bx-stage { justify-content: center; }

/* игры внутри окна */
.bx-win .g { gap: 10px; }
.bx-win .g-q { color: var(--ol); font: 900 16px/1.25 "Nunito", sans-serif; }
.bx-win .opt { background: #fff; color: var(--ol); border: 3px solid var(--ol); border-radius: 14px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08), 0 4px 0 var(--ol); min-height: 56px; font-family: "Nunito", sans-serif; }
.bx-win .opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ol); }
.bx-win .opt-num { font: 900 24px "Nunito", sans-serif; }
.bx-win .opt-num .opt-t { font: 900 16px/1.2 "Nunito", sans-serif; }
.bx-win .opt-t { font: 900 15px/1.15 "Nunito", sans-serif; }
.bx-win .opt-e { font-size: 40px; }
.bx-win .opt-pic { min-height: 96px; }
.bx-win .opt.yes { background: linear-gradient(#5BE36A, #2FB53F); color: #fff; }
.bx-win .opt.no { background: #C9D1DC; color: #6B7280; box-shadow: none; text-decoration: line-through; opacity: .7; }
.bx-win .m-expr { font: 900 min(11vw, 44px) "Nunito", sans-serif; color: var(--ol); }
.bx-win .m-q { color: #FF8A00; }
.bx-win .m-group, .bx-win .m-count { background: #DCE4EE; }
.bx-win .c-cell { background: #fff; border: 3px solid var(--ol); border-radius: 10px; width: 38px; height: 70px; }
.bx-win .c-msg { gap: 4px; }
.bx-win .c-sym { width: 26px; height: 26px; }
.bx-win .c-let { font: 900 21px "Nunito", sans-serif; }
.bx-win .c-cell.on { box-shadow: 0 0 0 3px #FFC72C; }
.bx-win .c-cell.ok { background: linear-gradient(#5BE36A, #2FB53F); color: #fff; }
.bx-win .c-keys { gap: 7px; }
.bx-win .c-key { border: 3px solid var(--ol); border-radius: 12px; min-height: 56px; box-shadow: 0 4px 0 var(--ol); background: #fff; }
.bx-win .c-key b { font: 900 22px "Nunito", sans-serif; }
.bx-win .s-status { background: #2E9BFF; color: #fff; border: 3px solid var(--ol); border-radius: 10px; font: 900 17px "Nunito", sans-serif; -webkit-text-stroke: .12em var(--ol); paint-order: stroke fill; }
.bx-win .s-status.go { background: #3CC84A; }
.bx-win .s-pads { width: min(100%, 38vh, 300px); gap: 9px; }
.bx-win .s-pad { background: #2F3B4C; border: 3px solid var(--ol); border-radius: 16px; box-shadow: 0 4px 0 var(--ol); }
.bx-win .s-pad span { color: #fff; font: 900 13px "Nunito", sans-serif; }
.bx-win .s-pad.lit { background: #FFF6C2; box-shadow: 0 0 0 5px #FFC72C, 0 4px 0 var(--ol); }
.bx-win .s-pad.lit span { color: var(--ol); }
.bx-win .s-dots i { background: #C9D1DC; }
.bx-win .s-dots i.on { background: #3CC84A; }
.bx-win .link-btn { color: #2484F0; }
.bx-win .s-roof { width: min(100%, 38vh, 300px); }
.bx-win .sc-box { width: min(100%, 38vh, 300px); border: 4px solid var(--ol); border-radius: 14px; }
.bx-win .sc-bar { background: #C9D1DC; }
.bx-win .sc-bar i { background: #3CC84A; }
.bx-win .fl-area { border: 4px solid var(--ol); border-radius: 14px; min-height: 240px; }
.bx-win .fl-count { background: #FFC72C; color: var(--ol); border: 3px solid var(--ol); border-radius: 8px; }
.bx-win .pz-grid { width: min(100%, 36vh, 300px); }
.bx-win .pz-t.sel { box-shadow: 0 0 0 4px #FFC72C; }
.bx-win .pp-grid { width: 100%; grid-template-columns: 34px repeat(var(--cols), 1fr) 34px; gap: 5px; }
.bx-win .pp-tile { background: #2F3B4C; border: 3px solid var(--ol); border-radius: 10px; }
.bx-win .pp-tile path { stroke: #fff; }
.bx-win .pp-empty i { background: #C9D1DC; }
.bx-win .pp-bat, .bx-win .pp-eng { width: 32px; height: 32px; color: #3CC84A; --ic2: #F3F6FA; }
.bx-win .pp-eng { color: #2F3B4C; }
.bx-win .pp-grid.powered .pp-tile path { stroke: #FFC72C; }
.bx-win .or-slot { background: #DCE4EE; border-radius: 8px; }
.bx-win .or-slot.on { background: #fff; box-shadow: inset 0 0 0 2px var(--ol); }
.bx-win .or-syllable .or-it { border: 3px solid var(--ol); border-radius: 12px; box-shadow: 0 4px 0 var(--ol); background: #fff; padding: 12px 14px; min-width: 0; }
.bx-win .or-syllable .or-it b { font: 900 19px "Nunito", sans-serif; }
.bx-win .or-syllable .or-slot { min-width: 34px; height: 36px; padding: 0 5px; }
.bx-win .or-syllable .or-slot b { font-size: 10px; }
.bx-win .or-items { gap: 10px 8px; }
.bx-win .pt-lamp { background: #2F3B4C; color: #fff; border: 3px solid var(--ol); width: 46px; height: 46px; }
.bx-win .pt-lamp b { font: 900 16px "Nunito", sans-serif; }
.bx-win .pt-q { background: #fff; color: var(--ol); }
.bx-win .cd-safe { max-width: 100%; border: 4px solid var(--ol); border-radius: 14px; padding: 10px; background: #2F3B4C; }
.bx-win .cd-slots { gap: 6px; }
.bx-win .cd-slots span { width: 42px; height: 50px; font: 900 26px "Nunito", sans-serif; border-radius: 8px; color: #FFC72C; }
.bx-win .cd-pad { gap: 7px; }
.bx-win .cd-k { border: 3px solid var(--ol); border-radius: 12px; min-height: 46px; box-shadow: 0 4px 0 var(--ol); font: 900 22px "Nunito", sans-serif; background: #fff; }
.bx-win .ct-btn { width: min(48vw, 24vh, 190px); background: linear-gradient(#5BE36A, #2FB53F); border: 4px solid var(--ol); box-shadow: 0 7px 0 var(--ol); color: #fff; }
.bx-win .ct-btn b { font: 900 28px "Nunito", sans-serif; -webkit-text-stroke: .12em var(--ol); paint-order: stroke fill; }
.bx-win .ct-num { color: var(--ol); }
.bx-win .ct-num b { color: #FF8A00; font-family: "Nunito", sans-serif; }
.bx-win .ct-dots i { background: #C9D1DC; }
.bx-win .ct-dots i.on { background: #3CC84A; }
.bx-win .sus-b { border: 3px solid var(--ol); border-radius: 14px; box-shadow: 0 4px 0 var(--ol); background: #fff; }
.bx-win .sus-b span { font: 900 14px "Nunito", sans-serif; }
.bx-win .sus-b.yes { background: linear-gradient(#5BE36A, #2FB53F); color: #fff; }
.bx-win .sus-n4 .sus-b svg { max-width: 84px; }
.bx-win .sus-n3 .sus-b svg { max-width: 92px; }

/* награда */
.bx-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 8deg, transparent 8deg 16deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 40%); mask-image: radial-gradient(circle, #000 0, transparent 40%); animation: spin 16s linear infinite; pointer-events: none; }
.bx-new { font-size: 30px; color: #FFC72C; animation: bigIn .6s cubic-bezier(.2, 1.5, .4, 1) both; position: relative; }
.bx-item { position: relative; width: min(46vw, 24vh, 180px); aspect-ratio: 1; margin: 12px 0 6px; background: radial-gradient(circle, #fff, #E6ECF5); border: 5px solid var(--ol); border-radius: 22px; box-shadow: 0 0 0 5px var(--r), 0 8px 0 var(--ol), 0 0 50px var(--r); display: grid; place-items: center; animation: rewardIn .8s cubic-bezier(.2, 1.5, .4, 1) .1s both; }
.bx-item-v { width: 72%; height: 72%; display: grid; place-items: center; color: var(--ol); overflow: hidden; border-radius: 10px; }
.bx-item-v svg { width: 100%; height: 100%; }
.bx-item-v .rv-digit { font: 900 min(26vw, 13vh, 110px) "Nunito", sans-serif; }
.bx-item-v .rv-syl { font: 900 30px "Nunito", sans-serif; }
.bx-item-v .rv-syl.long { font-size: 21px; }
.bx-item-v .rv-syl.xlong { font-size: 15px; }
.bx-item-v .rv-ic { width: 78%; height: 78%; color: var(--ol); --ic2: #fff; }
.bx-item-r { position: absolute; bottom: -16px; left: 50%; translate: -50% 0; background: var(--r); border: 3px solid var(--ol); border-radius: 8px; padding: 1px 10px 3px; font-size: 15px; white-space: nowrap; }
.bx-item-n { font-size: 24px; margin-top: 18px; text-align: center; position: relative; }
.bx-item-t { position: relative; text-align: center; margin: 6px 10px 14px; padding: 6px 12px; border-radius: 10px; background: rgba(15, 16, 20, .6); font: 800 15px/1.3 "Nunito", sans-serif; max-width: 340px; }
.bx-reward .bxb.big { max-width: 320px; position: relative; }

/* телепорт */
.bx-tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 0; }
.bx-tp-b { background: linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .1)), var(--c); border: 3px solid var(--ol); border-radius: 14px; box-shadow: 0 4px 0 var(--ol); min-height: min(110px, 16vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; transition: transform .08s, opacity .2s; }
.bx-tp-b:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ol); }
.bx-tp-ic { width: 50px; height: 50px; color: #fff; --ic2: rgba(0, 0, 0, .25); filter: drop-shadow(0 2px 0 var(--ol)); }
.bx-tp-ic .ic { width: 100%; height: 100%; }
.bx-tp-b .st { font-size: 15px; text-align: center; line-height: 1.15; }
.bx-tp-b.no { opacity: .3; filter: grayscale(1); }
.bx-flash { position: fixed; inset: 0; z-index: 80; background: #fff; pointer-events: none; animation: flash .9s ease-out both; }

/* финал и награды */
.bx-finale .bx-stage, .bx-done .bx-stage { justify-content: flex-end; }
.bx-finale .bx-npcs { flex: 1 1 auto; }
.bx-done .bx-stage { top: calc(var(--safe-t) + 18px); bottom: calc(var(--safe-b) + 12px); justify-content: center; gap: 8px; }
.bx-podium { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; min-height: 0; justify-content: flex-end; }
.bx-me.big { width: min(40vw, 22vh, 170px); max-height: none; height: auto; }
.bx-podium > i { width: min(56vw, 230px); height: 22px; margin-top: -10px; background: #FFC72C; border: 4px solid var(--ol); border-radius: 8px; box-shadow: 0 5px 0 var(--ol); }
.bx-win.done .bx-win-h { font-size: 17px; padding: 6px 12px 8px; }
.bx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 10px 0; text-align: center; }
.bx-stats b { display: block; font-size: 22px; }
.bx-stats span { font: 800 12.5px "Nunito", sans-serif; color: #5B6270; }
.bx-hotbar.done { justify-content: center; padding: 10px 0 0; }
.bx-hotbar.done .bx-slot { background: #fff; color: var(--ol); }
.bx-badge { position: fixed; z-index: 70; right: 10px; top: calc(var(--safe-t) + 172px); display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 14px 10px 10px; border-radius: 12px; background: rgba(20, 21, 26, .94); color: #fff; font-family: "Montserrat", sans-serif; animation: badgeIn 4.2s ease both; }
.bx-badge span { width: 42px; height: 42px; flex: none; color: #FFC72C; }
.bx-badge span .ic { width: 100%; height: 100%; }
.bx-badge b { font: 800 13px "Montserrat", sans-serif; color: #FFC72C; }
.bx-badge p { font: 600 13px/1.25 "Montserrat", sans-serif; }
.bx-coinpop { position: fixed; z-index: 70; top: calc(var(--safe-t) + 52px); right: 26px; display: flex; align-items: center; gap: 4px; pointer-events: none; animation: coinUp 1.5s ease-out both; }
.bx-coinpop .coin { width: 28px; height: 28px; }
.bx-coinpop b { font-size: 24px; color: #FFC72C; }

/* загрузка */
.bx-load { display: flex; align-items: center; justify-content: center; background: #111216; }
.bx-load-c { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 24px; width: 100%; max-width: 380px; }
.bx-load .bx-thumb { width: min(60vw, 230px); border-radius: 16px; }
.bx-load-t { font: 800 22px "Montserrat", sans-serif; margin-top: 8px; }
.bx-load-by { font: 600 14px "Montserrat", sans-serif; color: #A7A9AE; }
.bx-spin { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 600 14px "Montserrat", sans-serif; color: #A7A9AE; }
.bx-spin i { width: 22px; height: 22px; border-radius: 5px; border: 4px solid #fff; animation: spin 1s linear infinite; }
.bx-load-go { width: 100%; margin-top: 14px; display: none; }
.bx-load.ready .bx-spin { display: none; }
.bx-load.ready .bx-load-go { display: block; animation: dlgIn .4s cubic-bezier(.2, 1.3, .4, 1) both; }

/* окна-шторки */
.bx-sheet { position: fixed; inset: 0; z-index: 40; }
.bx-sheet .sheet-bg { opacity: 1; background: rgba(8, 8, 14, .45); }
.bx-win.modal { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(94vw, 420px); max-height: 82dvh; }
.bx-hint { display: flex; gap: 12px; padding: 14px 14px 4px; align-items: flex-start; }
.bx-hint-ava { width: 66px; height: 66px; flex: none; border-radius: 14px; border: 3px solid var(--ol); overflow: hidden; }
.bx-hint-ava svg { width: 100%; height: auto; transform: scale(2.1) translateY(26%); }
.bx-hint b { font: 900 14px "Nunito", sans-serif; color: #5B6270; }
.bx-hint p { font: 800 18px/1.32 "Nunito", sans-serif; }
.bx-hint-place { width: 96px; height: 96px; margin: 8px auto 0; padding: 14px; background: #fff; border: 3px solid var(--ol); border-radius: 18px; color: var(--ol); --ic2: #fff; }
.bx-hint-place .ic { width: 100%; height: 100%; }
.bx-bag { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 12px; }
.bx-bag-s { position: relative; aspect-ratio: 1 / 1.25; border-radius: 10px; background: #DCE4EE; display: grid; place-items: center; font: 900 22px "Nunito", sans-serif; color: #9AA3B2; overflow: hidden; padding: 4px 3px 16px; }
.bx-bag-s.on { background: #fff; color: var(--ol); box-shadow: inset 0 0 0 3px var(--r); }
.bx-bag-s i { position: absolute; bottom: 2px; left: 0; right: 0; font: 900 8px "Nunito", sans-serif; font-style: normal; color: var(--r); text-align: center; }
.bx-bag-s svg { width: 100%; height: 100%; }
.bx-bag-s .rv-digit { font-size: 28px; }
.bx-bag-s .rv-syl { font-size: 11px; }
.bx-bag-s .rv-syl.long { font-size: 8px; }
.bx-bag-s .rv-syl.xlong { font-size: 6.5px; }
.bx-bag-s .rv-ic { width: 70%; height: 70%; color: var(--ol); --ic2: #fff; }
.bx-sheet.chat .sheet-bg { background: transparent; }
.bx-chat { position: absolute; top: calc(var(--safe-t) + 54px); left: 8px; width: min(92vw, 380px); max-height: 62dvh; display: flex; flex-direction: column; background: rgba(15, 16, 20, .72); border-radius: 10px; color: #fff; animation: dlgIn .25s both; }
.bx-chat-h { position: relative; padding: 8px 12px; font: 800 14px "Montserrat", sans-serif; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bx-chat-h .bx-x { width: 26px; height: 26px; border-width: 2px; }
.bx-chat-l { overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bx-chat-l p { font: 600 14px/1.38 "Montserrat", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.bx-chat-l b { font-weight: 800; text-shadow: 0 1px 1px rgba(0, 0, 0, .7); filter: brightness(1.6) saturate(1.2); }

body[data-ui="blox"] .stamp { font: 900 min(12vw, 50px)/1 "Nunito", sans-serif; background: none !important; padding: 0; text-transform: uppercase; -webkit-text-stroke: .16em #1B1B1F; paint-order: stroke fill; text-shadow: 0 .09em 0 #1B1B1F; }
body[data-ui="blox"] .stamp.good { color: #FFC72C; }
body[data-ui="blox"] .stamp.bad { color: #FF4D4D; }
body[data-ui="blox"] .f-toast { font-family: "Montserrat", sans-serif; }

/* ——— взрослый: в стиле приложения Roblox ——— */
.bx-thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.bx-thumb.big { aspect-ratio: 16 / 10; }
.bx-thumb .bx-sky { inset: 0 0 30% 0; }
.bx-thumb .bx-ground { height: 32%; }
.bx-thumb .bx-cloud { animation: none; }
.bx-thumb-art { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; width: 62%; }
.bx-thumb.big .bx-thumb-art { width: 36%; }
.bx-thumb-art svg { width: 100%; height: auto; }
.bx-thumb-t { position: absolute; left: 6%; right: 6%; top: 7%; text-align: center; font-size: 17px; line-height: 1.05; }
.bx-thumb.big .bx-thumb-t { font-size: 30px; top: 9%; }

.rx-home { padding: calc(var(--safe-t) + 4px) 16px 40px; }
.rx-top { display: flex; align-items: center; gap: 10px; height: 52px; }
.rx-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--rx-blue); display: grid; place-items: center; }
.rx-logo svg { width: 26px; height: 26px; }
.rx-top b { flex: 1; font: 800 19px "Montserrat", sans-serif; }
.rx-age { font: 800 13px "Montserrat", sans-serif; background: var(--rx-card); padding: 5px 10px; border-radius: 8px; color: #fff; }
.rx-hero { margin: 8px 0 4px; padding: 18px 16px 18px; border-radius: 14px; background: linear-gradient(120deg, #335FFF, #9A4DFF 60%, #FF4D8D); }
.rx-hero h1 { font-size: 26px; line-height: 1.1; margin-bottom: 8px; }
.rx-hero p { font: 600 14.5px/1.4 "Montserrat", sans-serif; color: #F2F2FF; }
.rx-resume { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 10px; border-radius: 12px; background: var(--rx-card); text-align: left; }
.rx-resume .bx-thumb { width: 64px; flex: none; }
.rx-resume .bx-thumb-t { display: none; }
.rx-resume > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rx-resume small { font: 600 12px "Montserrat", sans-serif; color: var(--rx-grey); }
.rx-resume b { font: 800 16px "Montserrat", sans-serif; }
.rx-resume em { font: 600 13px "Montserrat", sans-serif; font-style: normal; color: var(--rx-grey); }
.rx-resume > i { width: 44px; height: 44px; border-radius: 10px; background: var(--rx-green); display: grid; place-items: center; }
.rx-h { display: flex; align-items: center; gap: 6px; font: 800 18px "Montserrat", sans-serif; margin: 24px 0 10px; }
.rx-h span { color: var(--rx-grey); font-size: 22px; line-height: 1; }
.rx-row { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.rx-row::-webkit-scrollbar { display: none; }
.rx-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; scroll-snap-align: start; min-width: 0; }
.rx-name { font: 700 14.5px/1.25 "Montserrat", sans-serif; }
.rx-meta { display: flex; align-items: center; gap: 4px; font: 600 12px "Montserrat", sans-serif; color: var(--rx-grey); }
.rx-meta .bi { width: 13px; height: 13px; opacity: .8; }
.rx-how { display: flex; flex-direction: column; gap: 14px; }
.rx-how-r { display: flex; gap: 12px; }
.rx-how-r > span { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--rx-blue); display: grid; place-items: center; font: 800 14px "Montserrat", sans-serif; }
.rx-how-r b { font: 800 15.5px "Montserrat", sans-serif; }
.rx-how-r p { font: 500 14px/1.4 "Montserrat", sans-serif; color: #C9CACE; margin-top: 2px; }

.rx-game { padding: var(--safe-t) 16px 40px; }
.rx-bar { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 50px; margin: 0 -16px; padding: 0 6px; background: var(--rx-bg); }
.rx-bar b { text-align: center; font: 800 16px "Montserrat", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-back { width: 40px; height: 40px; display: grid; place-items: center; }
.rx-hero-img .bx-thumb { border-radius: 12px; }
.rx-title { font: 800 24px/1.2 "Montserrat", sans-serif; margin: 14px 0 4px; }
.rx-by { font: 600 13.5px "Montserrat", sans-serif; color: var(--rx-grey); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rx-by b { color: #fff; }
.rx-by .fv { width: 14px; height: 14px; }
.rx-play { width: 100%; height: 54px; margin: 16px 0 14px; border-radius: 10px; background: var(--rx-green); display: grid; place-items: center; transition: transform .08s, filter .15s; }
.rx-play .bi { width: 30px; height: 30px; }
.rx-play:active { transform: scale(.98); filter: brightness(.95); }
.rx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rx-stats div { background: var(--rx-card); border-radius: 10px; padding: 8px 6px; text-align: center; }
.rx-stats span { display: block; font: 600 11px "Montserrat", sans-serif; color: var(--rx-grey); }
.rx-stats b { font: 800 14px "Montserrat", sans-serif; }
.rx-desc { font: 500 14.5px/1.5 "Montserrat", sans-serif; color: #D5D6DA; }
.rx-skills { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: k; display: grid; gap: 10px; }
.rx-skills li { counter-increment: k; display: flex; align-items: center; gap: 10px; font: 600 15px "Montserrat", sans-serif; }
.rx-skills li::before { content: counter(k); flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--rx-card); display: grid; place-items: center; font: 800 13px "Montserrat", sans-serif; color: #fff; }

body[data-ui="rx"][data-mode="adult"] .s-head { background: var(--rx-bg); }
body[data-ui="rx"][data-mode="adult"] .s-head b { font: 800 17px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .s-title { font: 800 24px/1.2 "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .s-lead, body[data-ui="rx"][data-mode="adult"] .hint-line, body[data-ui="rx"][data-mode="adult"] .tip { color: #C9CACE; font: 500 14.5px/1.45 "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .field input { background: var(--rx-card); color: #fff; font: 700 19px "Montserrat", sans-serif; border-radius: 10px; }
body[data-ui="rx"][data-mode="adult"] .field input:focus { box-shadow: 0 0 0 2px var(--rx-blue); }
body[data-ui="rx"][data-mode="adult"] .field span, body[data-ui="rx"][data-mode="adult"] .field-label { color: var(--rx-grey); font: 700 13.5px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .hint-line { margin: 0 0 18px; }
body[data-ui="rx"][data-mode="adult"] .place { background: var(--rx-card); --ic2: var(--rx-card); border-radius: 12px; }
body[data-ui="rx"][data-mode="adult"] .place .pl-n { font: 700 15px/1.2 "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .place.on { background: #262A33; --ic2: #262A33; box-shadow: inset 0 0 0 2px var(--rx-blue); }
body[data-ui="rx"][data-mode="adult"] .place .pl-tick { background: var(--rx-blue); }
body[data-ui="rx"][data-mode="adult"] .style-o { background: var(--rx-card); }
body[data-ui="rx"][data-mode="adult"] .style-o.on { box-shadow: inset 0 0 0 2px var(--rx-blue); }
body[data-ui="rx"][data-mode="adult"] .style-o b { font: 800 16px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .style-o small { font: 500 13px/1.35 "Montserrat", sans-serif; }
.pv-blox .bx-thumb { height: 100%; aspect-ratio: auto; border-radius: 7px; }
.pv-blox .bx-thumb-t { display: none; }
.pv-blox .bx-thumb-art { width: 90%; }
body[data-ui="rx"][data-mode="adult"] .r-n { background: var(--rx-blue); font: 800 15px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .r-h { font: 800 16px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .r-step p { font: 500 14.5px/1.45 "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .route span { background: var(--rx-card); border-radius: 8px; font: 600 13.5px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .route span:last-child { background: var(--rx-green); }
body[data-ui="rx"] .btn { background: var(--rx-blue); color: #fff; border-radius: 10px; font: 800 16.5px "Montserrat", sans-serif; min-height: 52px; box-shadow: none; }
body[data-ui="rx"] .btn:active:not([disabled]) { transform: scale(.98); box-shadow: none; }
body[data-ui="rx"] .btn[disabled] { background: #2A2D33; color: #6F7278; opacity: 1; }
body[data-ui="rx"] .btn-sec { background: #2A2D33; }
body[data-ui="rx"] .link-btn { color: #fff; font: 700 14.5px "Montserrat", sans-serif; }
body[data-ui="rx"][data-mode="adult"] .actions.sticky { background: linear-gradient(to bottom, transparent, var(--rx-bg) 26%); }

@keyframes drift { to { transform: translateX(160vw); } }
@keyframes dlgIn { 0% { transform: translateY(18px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bigIn { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coinUp { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 15% { transform: none; opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes badgeIn { 0% { transform: translateX(120%); } 10%, 85% { transform: none; } 100% { transform: translateX(120%); } }

@media (max-height: 680px) {
  .bx-tags { top: calc(var(--safe-t) + 54px); }
  .bx-stage { top: calc(var(--safe-t) + 84px); bottom: calc(var(--safe-b) + 70px); }
  .bx-slot { width: 44px; height: 44px; }
  .bx-jump { width: 56px; height: 56px; }
  .bx-dlg { padding: 18px 12px 10px; }
  .bx-dlg-t { font-size: 15.5px; }
  .bx-rid { font-size: 16.5px; }
  .bxb { min-height: 44px; font-size: 16px; }
  .bxb.small { min-height: 40px; font-size: 14px; }
  .bx-win-h { font-size: 18px; padding: 4px 40px 6px; }
  .bx-win-t { font-size: 13.5px; padding-top: 4px; }
  .bx-win .opt { min-height: 46px; }
  .bx-win .opt-pic { min-height: 80px; }
  .bx-me { display: none; }
  .bx-npc { width: 40%; }
  .bx-where.big .ic { width: 76px; }
}

.bx-win .c-msg .c-cell { width: 38px; }

@media (max-height: 680px) { .bx-me.big { display: flex; width: min(30vw, 18vh, 120px); } }