/* Rivo-Casino.info — dark forest green lobby, gold-cornered frames, parchment offers. */
:root {
  --bg: #0a1a13;
  --bg2: #0c1f17;
  --side: #0d2119;
  --card: #10291e;
  --card2: #153526;
  --line: #21402f;
  --line2: #2c5640;
  --gold: #e7c25a;
  --gold2: #a8862f;
  --green: #35c463;
  --green2: #1d8a41;
  --text: #f2f7f3;
  --muted: #9cb8a8;
  --dim: #6d8c7b;
  --red: #e3122f;
  --parch: #f1dcaa;
  --ink: #4a2a10;
  --r: 12px;
  --head: 'Lilita One', 'Arial Black', sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 600 16px/1.6 var(--body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #ffe08a; }
p a, li a, dd a { text-decoration: underline; text-decoration-color: rgba(231, 194, 90, .45); text-underline-offset: 3px; }
h1, h2, h3, .h { font-family: var(--head); font-weight: 400; letter-spacing: .01em; line-height: 1.15; margin: 0; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.ico.flip { transform: scaleX(-1); }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--gold); color: #1a1205; border-radius: 8px; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Gold-cornered frame (the casino's ornate card border) ---------- */
.frame { position: relative; border: 1px solid rgba(231, 194, 90, .22); border-radius: 6px; background: linear-gradient(160deg, var(--card2), var(--card) 60%); }
.frame::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: 6px;
  --c: var(--gold2);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 3px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 14px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 3px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 3px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 3px 14px no-repeat;
}
a.frame:hover::before, .frame:focus-within::before { --c: var(--gold); }

/* ornamental divider  ——◆—— */
.orn { display: block; height: 14px; margin: 14px 10px; background:
  linear-gradient(90deg, transparent, var(--line2) 20%, var(--line2) 44%, transparent 44%, transparent 56%, var(--line2) 56%, var(--line2) 80%, transparent) center / 100% 1px no-repeat; position: relative; }
.orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: 1.5px solid var(--gold2); transform: translate(-50%, -50%) rotate(45deg); }
.orn--wide { margin: 0 0 30px; }

/* ---------- Coloured round menu icons ---------- */
.mi { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 32% 28%, var(--a), var(--b) 72%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(0, 0, 0, .25); }
.mi .ico { width: 16px; height: 16px; stroke-width: 2.2; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 15px/1 var(--head); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; transition: transform .15s, filter .15s; }
.btn:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.btn-up { background: linear-gradient(180deg, #3fd06c, #1f8f43); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 1px #2cae55; }
.btn-dark { background: #12291e; box-shadow: inset 0 0 0 1px var(--line2); }
.btn-go { position: relative; border-radius: 8px; min-height: 48px; padding: 10px 28px; font-size: 17px;
  background: linear-gradient(180deg, #4bdc77 0%, #23a04c 55%, #187a39 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #e7c25a, 0 0 0 4px #5a4512, 0 8px 24px rgba(53, 196, 99, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn-go::before, .btn-go::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; background: var(--gold); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 2px #5a4512; }
.btn-go::before { left: -8px; }
.btn-go::after { right: -8px; }
.btn-xl { min-height: 56px; padding: 12px 40px; font-size: 20px; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn-sm::before, .btn-sm::after { display: none; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 14px 14px 24px; background: var(--side); border-right: 1px solid #10261c; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.side__head { display: flex; align-items: center; justify-content: center; padding: 2px 0 12px; }
.side__logo .logo { width: 110px; height: auto; }
.side__close { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--muted); }
.promo { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 8px; border-radius: 999px; color: #fff;
  background: linear-gradient(90deg, #0f3a27, #1a5a3a 60%, #0f3a27); box-shadow: inset 0 0 0 2px #2f8f5c, 0 0 0 1px #0a1a13, 0 0 18px rgba(53, 196, 99, .18); }
.promo:hover { color: #fff; filter: brightness(1.1); }
.promo__art .feat-art { width: 46px; height: 46px; }
.promo__txt { font: 400 13px/1.2 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.menu { display: grid; gap: 4px; }
.menu__a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 999px; color: #dbe9e0; font-weight: 800; font-size: 15.5px; border: 2px solid transparent; }
.menu__a:hover { color: #fff; background: #12301f; }
.menu__a.is-on { color: #fff; background: linear-gradient(90deg, #12301f, #184a30); border-color: var(--gold2); box-shadow: 0 0 0 1px #0a1a13, inset 0 0 12px rgba(231, 194, 90, .12); }
.menu__a--promo { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(53, 196, 99, .06) 8px 16px); }
.side__lbl { margin: 18px 12px 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.pop { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pop__a { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 10px; background: #12291e; color: #fff; border: 1px solid #1a3a29; }
.pop__a:hover { color: #fff; border-color: var(--line2); }
.pop__th .gt { width: 38px; height: 38px; border-radius: 6px; }
.pop__t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.pop__t b { font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop__t small { font-size: 11.5px; color: var(--dim); }
.pop__go { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #4bdc77, #1d8a41); }
.pop__go .ico { width: 13px; height: 13px; margin-left: 2px; }
.side__rg { display: flex; gap: 8px; align-items: center; margin: 18px 6px 0; font-size: 12px; color: var(--dim); line-height: 1.4; }
.side__rg span, .age { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--red); color: #fff; font: 900 11px/1 var(--body); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 40; }

.col { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: rgba(10, 26, 19, .92); backdrop-filter: blur(10px); }
.top__burger, .top__logo { display: none; }
.top__burger { background: #12291e; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; color: var(--text); }
.find { display: flex; align-items: center; gap: 10px; flex: 0 1 300px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-size: 14px; }
.find:hover { color: #fff; border-color: var(--gold2); }
.find span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lng { position: relative; margin-left: auto; }
.lng summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: #12291e; border: 1px solid var(--line); cursor: pointer; font-weight: 800; font-size: 13px; }
.lng summary::-webkit-details-marker { display: none; }
.lng ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: #0f251b; border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.lng a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; text-decoration: none; }
.lng a b { width: 24px; color: var(--gold); font-size: 12px; }
.lng a:hover, .lng a.is-on { background: #173726; }
.top__up, .top__in { min-height: 36px; padding: 6px 16px; font-size: 14px; }

.main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 28px 40px; }

/* ---------- Hero (treasure table + parchment offer) ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 420px) 1fr; min-height: 440px; margin-bottom: 28px; border-radius: 22px; overflow: hidden; background: #160e06; }
.hero__scene { position: absolute; inset: 0 0 0 26%; }
.hero__scene .table-art { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 26, 19, .92) 28%, rgba(10, 26, 19, 0) 52%); }
.hero__offer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px 24px; }
.hero__h1 { font-size: 15px; color: var(--muted); font-family: var(--body); font-weight: 800; margin-bottom: 14px; }
.hero__h1 span { color: var(--gold); }
.scroll { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; padding: 16px 18px 14px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #f8e8bf, #e2c587 75%, #c9a45f);
  clip-path: polygon(2% 4%, 12% 0, 30% 3%, 52% 0, 72% 3%, 90% 0, 99% 5%, 97% 30%, 100% 55%, 97% 80%, 99% 96%, 86% 100%, 64% 97%, 44% 100%, 24% 97%, 6% 100%, 1% 94%, 3% 68%, 0 42%, 3% 18%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.scroll__k { font: 400 15px/1.1 var(--head); text-transform: uppercase; letter-spacing: .06em; color: #6b3b14; }
.scroll__pct, .poster__pct, .stub strong { font: 400 92px/1 var(--head); letter-spacing: -.01em; background: linear-gradient(180deg, #fff6b8 0%, #ffd23a 45%, #e08a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #6a2a06; paint-order: stroke fill; filter: drop-shadow(0 4px 0 #3a1404); margin: 4px 0 2px; }
.ribbon { display: inline-block; padding: 3px 26px; margin: 2px 0 4px; font: 400 18px/1.2 var(--head); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: linear-gradient(180deg, #d82a2a, #8a0f0f);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.scroll__max { font: 400 54px/1 var(--head); font-style: normal; color: #fff; -webkit-text-stroke: 3px #3a1a06; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1004; }
.hero__start { margin: 16px 0 12px; font-weight: 800; font-size: 14px; color: #fff; }
.hero__pay { display: flex; align-items: center; gap: 12px; margin-top: 18px; text-align: left; }
.hero__marks { display: flex; gap: 6px; flex: none; }
.hero__pay small { font-size: 11.5px; line-height: 1.35; color: #d6e4dc; max-width: 220px; }

/* payment marks */
.pm { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 30px; min-width: 42px; padding: 0 9px; border-radius: 7px; background: #f4f6f5; color: #1a1f2e; font: 900 12px/1 var(--body); white-space: nowrap; }
.pm svg { height: 20px; width: auto; }
.pm--visa { background: #1a1f71; color: #fff; font-style: italic; font-size: 14px; letter-spacing: .02em; }
.pm--mc { background: #fff; }
.pm--mc svg { height: 22px; }
.pm--apple { background: #fff; color: #000; }
.pm--apple .ico { width: 14px; height: 14px; fill: #000; stroke: #000; }
.pm--btc { background: none; padding: 0; min-width: 30px; }
.pm--btc svg { height: 30px; }

/* ---------- Feature cards ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 34px; }
.feat { display: flex; align-items: center; gap: 10px; min-height: 104px; padding: 14px 10px 14px 18px; color: #fff; background: linear-gradient(110deg, #123b28, #0f2e20 70%); }
.feat:hover { color: #fff; }
.feat p { margin: 0; flex: 1; font-weight: 800; font-size: 14.5px; line-height: 1.4; }
.feat .feat-art { width: 86px; height: 86px; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transition: transform .2s; }
.feat:hover .feat-art { transform: scale(1.06) rotate(-3deg); }

/* ---------- Row heading ---------- */
.rh { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rh h2, .rh h3, .rh p { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 24px/1.15 var(--head); color: #fff; }
.rh__ic .mi { width: 30px; height: 30px; }
.rh__rule { flex: 1; min-width: 20px; height: 8px; background: linear-gradient(90deg, var(--line2), var(--line2)) center / 100% 1px no-repeat; position: relative; }
.rh__rule::before, .rh__rule::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; background: var(--gold2); transform: translateY(-50%) rotate(45deg); }
.rh__rule::before { left: 0; }
.rh__rule::after { right: 0; }
.rh__more { padding: 6px 14px; border-radius: 999px; background: #173726; color: #fff; font: 400 13px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; }
.rh__more:hover { background: #1e4a33; color: #fff; }
.rh__arr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #173726; color: #fff; cursor: pointer; }
.rh__arr:hover { background: #1e4a33; }
.rh__arr .ico { width: 16px; height: 16px; }

/* ---------- Game reel + tiles ---------- */
.row { margin-bottom: 38px; }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px; }
.reel::-webkit-scrollbar { display: none; }
.reel__i { scroll-snap-align: start; padding: 6px; background: linear-gradient(180deg, #3a2a10, #1c1408); border-color: rgba(231, 194, 90, .45); }
.reel__i::before { --c: var(--gold); }
.gt { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.gt__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.gt__t { position: absolute; left: 6px; right: 6px; bottom: 30px; text-align: center; font: 400 18px/1.05 var(--head); color: #ffe58a; -webkit-text-stroke: 1px #3a1404; paint-order: stroke fill; text-shadow: 0 2px 0 #3a1404, 0 0 12px rgba(0, 0, 0, .6); text-transform: uppercase; }
.gt__p { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 4px 7px; text-align: center; font-size: 11.5px; font-weight: 800; color: #dbe9e0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.gt__play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(180deg, #4bdc77, #1d8a41); box-shadow: 0 0 0 3px var(--gold); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: .2s; }
.gt__play .ico { width: 22px; height: 22px; margin-left: 3px; color: #fff; }
.reel__i:hover .gt__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reel__i:hover .gt__art { transform: scale(1.05); transition: transform .3s; }

/* ---------- Generic sections ---------- */
.sec { margin-bottom: 40px; }
.sec__lead { color: var(--muted); max-width: 760px; }
.sec--split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sec--split > *, .bounty > *, .opinion > *, .device > *, .verdict > *, .banner__grid > *, .lt > * { min-width: 0; }
.lead { font-size: 18px; color: #fff; }
.prose p, .opinion p, .sec--split p, .bounty__txt p, .device__txt p { color: #d3e2d9; }
.more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 17px; }

/* opinion + character sheet */
.opinion { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; margin-bottom: 44px; }
.sheet { padding: 20px; display: grid; gap: 10px; background: linear-gradient(170deg, #173a29, #0f2a1d); }
.sheet__top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.sheet__seal { display: grid; place-items: center; align-content: center; width: 78px; height: 78px; flex: none; border-radius: 50%; color: #3a1a04;
  background: radial-gradient(circle at 35% 30%, #fff1a6, #f2c33a 55%, #b77a0c); box-shadow: 0 0 0 3px #5a3a08, 0 0 0 6px rgba(231, 194, 90, .25), 0 8px 20px rgba(0, 0, 0, .4); }
.sheet__seal b { font: 400 30px/1 var(--head); }
.sheet__seal small { font-size: 11px; font-weight: 900; }
.sheet__k { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 900; }
.sheet__t { margin: 0; font: 400 20px/1.2 var(--head); }
.sheet .btn { margin-top: 10px; }
.stat { display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; }
.stat__l { color: var(--muted); font-weight: 800; }
.stat__bar { height: 10px; border-radius: 999px; background: #0a1a13; box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.stat__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1d8a41, #4bdc77 70%, #e7c25a); }
.stat b { text-align: right; font-family: var(--head); font-weight: 400; color: var(--gold); }

/* advantages */
.adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.adv--3 { grid-template-columns: repeat(3, 1fr); }
.adv__i { padding: 20px 18px 16px; }
.adv__i h3 { font-size: 19px; margin: 12px 0 6px; }
.adv__i p { margin: 0; font-size: 14.5px; color: var(--muted); }
.adv__i .mi { width: 40px; height: 40px; }
.adv__i .mi .ico { width: 21px; height: 21px; }
.adv__n { position: absolute; right: 14px; top: 10px; font: 400 30px/1 var(--head); color: rgba(231, 194, 90, .16); }

/* loot & traps */
.lt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lt__col { padding: 18px 20px; }
.lt__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 400 20px/1.2 var(--head); }
.lt__col--good .lt__h { color: #6be08e; }
.lt__col--bad .lt__h { color: #ff8a7a; }
.lt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lt li { display: flex; gap: 10px; font-size: 15px; color: #dbe9e0; }
.lt li .ico { margin-top: 3px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; stroke-width: 3; }
.lt__col--good li .ico { background: rgba(53, 196, 99, .18); color: #6be08e; }
.lt__col--bad li .ico { background: rgba(227, 60, 47, .18); color: #ff8a7a; }

/* ledger */
.ledger { margin: 0; padding: 6px 18px; }
.ledger div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line2); }
.ledger div:last-child { border-bottom: 0; }
.ledger dt { color: var(--muted); font-weight: 800; font-size: 14px; }
.ledger dd { margin: 0; font-weight: 800; font-size: 14.5px; }
.ledger dd small { display: block; color: var(--gold); font-size: 12.5px; }
.ledger--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin-top: 8px; }
.ledger--2 div:nth-last-child(2) { border-bottom: 0; }

/* trail (vertical steps) */
.howto { padding: 22px; }
.howto__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 21px/1.2 var(--head); }
.trail { list-style: none; counter-reset: s; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.trail li { counter-increment: s; position: relative; display: grid; gap: 2px; padding: 0 0 14px 46px; }
.trail li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 400 16px/1 var(--head); color: #3a1a04;
  background: radial-gradient(circle at 35% 30%, #fff1a6, #e7c25a 60%, #a8862f); }
.trail li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 2px; border-left: 2px dotted var(--gold2); }
.trail li:last-child::after { display: none; }
.trail b { font-family: var(--head); font-weight: 400; font-size: 17px; }
.trail span { color: var(--muted); font-size: 14.5px; }

/* chapters */
.chapters { margin: 10px 0 40px; }
.chapters__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chap { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; color: var(--text); }
.chap:hover { color: #fff; }
.chap__n { grid-column: 1 / -1; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); margin-bottom: 6px; }
.chap .mi { grid-row: 2 / 4; width: 38px; height: 38px; }
.chap b { font: 400 18px/1.2 var(--head); }
.chap small { grid-column: 2; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.chap__go { grid-column: 3; grid-row: 2 / 4; color: var(--gold); transition: transform .2s; }
.chap:hover .chap__go { transform: translateX(4px); }

/* faq */
.faq { display: grid; gap: 10px; }
.faq details { padding: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 900; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--gold); transition: transform .2s; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq__a { padding: 0 20px 6px; color: #d3e2d9; }

/* cta band */
.band { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; padding: 26px 34px; margin: 10px 0 20px; background: radial-gradient(ellipse at 20% 50%, #2a4a1c, #10291e 60%); }
.band__art .chest-art { width: 100%; }
.band h2 { font-size: 32px; margin: 8px 0 8px; }
.band p { color: #d3e2d9; max-width: 560px; }
.band small { display: block; margin-top: 14px; color: var(--dim); font-size: 12px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.kicker .mi { width: 24px; height: 24px; }
.kicker .mi .ico { width: 14px; height: 14px; }

/* ---------- Inner page banner ---------- */
.banner { margin: 6px 0 34px; padding: 22px 28px 28px; border-radius: 22px; background:
  radial-gradient(ellipse at 85% 0%, rgba(231, 194, 90, .14), transparent 55%),
  radial-gradient(ellipse at 0% 100%, rgba(53, 196, 99, .14), transparent 50%), linear-gradient(160deg, #12301f, #0c2017); border: 1px solid #1c3a2a; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.crumbs .ico { width: 14px; height: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.banner__grid { display: grid; grid-template-columns: 1fr 280px; gap: 30px; align-items: center; }
.banner h1 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 12px; }
.banner h1 span, .hero__h1 span { color: var(--gold); }
.banner__lead { font-size: 17px; color: #d3e2d9; max-width: 640px; }
.byline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--dim); }
.stub { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 16px 16px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 35%, #f8e8bf, #e2c587 75%, #c9a45f); border-radius: 10px; box-shadow: 0 0 0 3px #5a3a12, 0 14px 30px rgba(0, 0, 0, .45); }
.stub__k { font: 400 13px/1.2 var(--head); text-transform: uppercase; letter-spacing: .06em; color: #6b3b14; }
.stub strong { font-size: 64px; }
.stub .ribbon { font-size: 14px; }
.stub em { font: 400 36px/1 var(--head); font-style: normal; color: #fff; -webkit-text-stroke: 2px #3a1a06; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1004; margin-bottom: 14px; }
.stub .btn-go { width: calc(100% - 16px); padding: 10px 12px; font-size: 15px; }
.stub small { margin-top: 10px; font-size: 11.5px; font-weight: 800; color: #6b3b14; }

/* review layout */
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.toc { position: sticky; top: 76px; padding: 16px 16px 12px; }
.toc__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 18px/1 var(--head); color: var(--gold); }
.toc ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 2px; font-size: 14px; }
.toc li::marker { color: var(--gold2); font-weight: 900; }
.toc a { display: block; padding: 4px 6px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.toc a:hover, .toc a.is-on { color: #fff; background: #173726; }
.prose .sec { scroll-margin-top: 84px; }
.prose .rh h2 { font-size: 26px; }
.verdict { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.note { display: flex; gap: 12px; padding: 14px 16px; margin: 0; }
.note .ico { color: var(--gold); margin-top: 3px; }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 0; }
.mini-stats div { display: grid; padding: 14px 12px; text-align: center; }
.mini-stats b { font: 400 24px/1.1 var(--head); color: var(--gold); }
.mini-stats span { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 18px; }
.tool { display: grid; gap: 4px; padding: 14px; }
.tool b { font-family: var(--head); font-weight: 400; font-size: 16px; margin-top: 6px; }
.tool span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* bonus poster */
.bounty { display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: start; margin-bottom: 40px; }
.poster { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px 22px; color: var(--ink); transform: rotate(-1.2deg);
  background: radial-gradient(ellipse at 50% 30%, #fbefcb, #e8cf95 65%, #c9a45f); box-shadow: 0 0 0 3px #6a4a1a, 0 22px 40px rgba(0, 0, 0, .5);
  clip-path: polygon(0 1%, 20% 0, 50% 1.5%, 80% 0, 100% 1%, 99% 30%, 100% 60%, 99% 99%, 75% 100%, 50% 98.5%, 25% 100%, 0 99%, 1% 60%, 0 30%); }
.poster__pin { position: absolute; top: 10px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #8a0f0f); transform: translateX(-50%); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.poster__k { margin: 4px 0 0; font: 400 20px/1.1 var(--head); text-transform: uppercase; letter-spacing: .08em; color: #7a2a12; }
.poster__pct { margin: 6px 0 0; font-size: 100px; }
.poster__up { margin: 0; font: 400 20px/1 var(--head); text-transform: uppercase; letter-spacing: .1em; color: #7a2a12; }
.poster__max { margin: 4px 0 16px; font: 400 56px/1 var(--head); color: #fff; -webkit-text-stroke: 3px #3a1a06; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1004; }
.poster__row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 20px; border-top: 2px dashed rgba(122, 42, 18, .4); border-bottom: 2px dashed rgba(122, 42, 18, .4); }
.poster__row span { display: grid; padding: 10px 4px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #7a4a22; }
.poster__row span + span { border-left: 2px dashed rgba(122, 42, 18, .4); }
.poster__row b { font: 400 24px/1.1 var(--head); color: #5a1a08; text-transform: none; letter-spacing: 0; }
.poster small { margin-top: 14px; font-size: 11.5px; font-weight: 800; color: #6b3b14; }
.bounty .ledger { margin-top: 10px; }

/* quest steps */
.quest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quest li { padding: 20px 18px 16px; }
.quest__n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; font: 400 20px/1 var(--head); color: #3a1a04;
  background: radial-gradient(circle at 35% 30%, #fff1a6, #e7c25a 60%, #a8862f); box-shadow: 0 0 0 3px rgba(231, 194, 90, .2); }
.quest b { display: block; font: 400 18px/1.2 var(--head); margin-bottom: 6px; }
.quest p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* calculators */
.calc, .planner { padding: 22px; display: grid; gap: 12px; }
.calc label, .planner label { font-weight: 800; font-size: 14px; color: var(--muted); }
.planner__h { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 21px/1.2 var(--head); }
.calc__in { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border-radius: 10px; background: #0a1a13; border: 1px solid var(--line2); }
.calc__in span { color: var(--gold); font: 400 20px/1 var(--head); display: grid; }
.calc__in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: #fff; font: 400 24px/1 var(--head); outline: none; }
.calc__in:focus-within { border-color: var(--gold); }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc__out div { display: grid; padding: 12px 14px; border-radius: 10px; background: #0d2219; border: 1px dashed var(--line2); }
.calc__out small { font-size: 12px; color: var(--muted); font-weight: 800; }
.calc__out b { font: 400 28px/1.1 var(--head); color: var(--gold); }
.calc__note { margin: 0; font-size: 13px; color: var(--muted); min-height: 1.5em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: #d3e2d9; }
.ticks .ico { margin-top: 3px; color: #6be08e; stroke-width: 2.6; }
.ticks--warn .ico { color: var(--gold); stroke-width: 2; }

/* games */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cat { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 18px; color: var(--text); }
.cat:hover { color: #fff; }
.cat .mi { grid-row: 1 / 4; width: 46px; height: 46px; }
.cat .mi .ico { width: 24px; height: 24px; }
.cat b { font: 400 20px/1.2 var(--head); }
.cat span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.cat em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font: 400 14px/1 var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--green); margin-top: 6px; }
.shelf { padding: 18px 20px; }
.shelf__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.shelf__in { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; height: 46px; padding: 0 14px; border-radius: 999px; background: #0a1a13; border: 1px solid var(--line2); color: var(--muted); }
.shelf__in:focus-within { border-color: var(--gold); }
.shelf__in input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 700 15px var(--body); outline: none; }
.shelf output { font-weight: 900; color: var(--gold); font-size: 14px; }
.shelf__g { columns: 4 200px; column-gap: 22px; }
.shelf__grp { break-inside: avoid; display: grid; grid-template-columns: 28px 1fr; gap: 6px; margin-bottom: 14px; }
.shelf__l { font: 400 20px/1.3 var(--head); color: var(--gold2); }
.shelf__grp ul { list-style: none; margin: 0; padding: 0; }
.shelf__grp a { display: block; padding: 3px 0; color: #dbe9e0; font-size: 14.5px; text-decoration: none; }
.shelf__grp a:hover { color: var(--gold); }
.shelf__none { margin: 0; color: var(--muted); }

/* payments */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.kpi { display: grid; justify-items: start; gap: 4px; padding: 18px; }
.kpi b { font: 400 32px/1.1 var(--head); color: var(--gold); margin-top: 8px; }
.kpi span { font-size: 13.5px; color: var(--muted); font-weight: 800; }
.methods { padding: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line2); background: #0d2219; cursor: pointer; font-weight: 800; font-size: 14px; color: var(--muted); }
.chip:hover { color: #fff; }
.chip.is-on { background: linear-gradient(180deg, #3fd06c, #1f8f43); border-color: #2cae55; color: #fff; }
.tbl { position: relative; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { padding: 11px 12px; text-align: left; border-bottom: 1px dashed var(--line2); white-space: nowrap; }
.tbl thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 900; border-bottom: 1px solid var(--line2); }
.tbl tbody tr:hover { background: rgba(231, 194, 90, .04); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.mth { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.mth .ico { color: var(--gold); }
.yes, .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.yes { background: rgba(53, 196, 99, .18); color: #6be08e; }
.no { background: rgba(227, 60, 47, .14); color: #ff8a7a; }
.yes .ico, .no .ico { width: 15px; height: 15px; stroke-width: 3; }
.cur-h { font: 400 18px/1.2 var(--head); color: #fff !important; margin: 18px 0 10px; }
.cur { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cur li { padding: 5px 12px; border-radius: 6px; background: #12291e; border: 1px solid var(--line2); font-weight: 900; font-size: 13px; }

/* withdrawals route */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; border-top: 3px dashed var(--gold2); }
.route__wp { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
.route__pin { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 3px var(--gold2); position: relative; z-index: 1; }
.route__pin .mi { width: 40px; height: 40px; }
.route__pin .mi .ico { width: 20px; height: 20px; }
.route__tag { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #173726; color: var(--gold); font: 400 14px/1.3 var(--head); }
.route__wp b { font: 400 17px/1.2 var(--head); }
.route__wp p { margin: 0; font-size: 13.5px; color: var(--muted); }
.times { display: grid; gap: 10px; }
.time { display: grid; grid-template-columns: auto 230px 1fr 110px; align-items: center; gap: 14px; padding: 12px 16px; }
.time__l { font-weight: 900; }
.time__bar { height: 10px; border-radius: 999px; background: #0a1a13; box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.time__bar span { display: block; height: 100%; background: linear-gradient(90deg, #1d8a41, #4bdc77 70%, #e7c25a); border-radius: inherit; }
.time b { text-align: right; font: 400 17px/1 var(--head); color: var(--gold); }

/* app */
.device { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; margin-bottom: 44px; }
.phone { position: relative; width: 270px; margin: 0 auto; padding: 12px; border-radius: 42px; background: linear-gradient(160deg, #2a3a32, #0c1712); box-shadow: 0 0 0 2px #3a5a48, 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(53, 196, 99, .12); }
.phone__notch { position: absolute; top: 20px; left: 50%; width: 80px; height: 22px; border-radius: 12px; background: #000; transform: translateX(-50%); z-index: 2; }
.phone__scr { display: grid; gap: 12px; padding: 44px 12px 12px; border-radius: 32px; background: var(--bg); overflow: hidden; }
.phone__top { display: flex; align-items: center; justify-content: space-between; }
.logo--phone { width: 66px; height: auto; }
.phone__btn { padding: 5px 10px; border-radius: 999px; background: linear-gradient(180deg, #3fd06c, #1f8f43); font: 400 10px/1 var(--head); text-transform: uppercase; }
.phone__offer { display: grid; justify-items: center; padding: 12px; border-radius: 12px; color: var(--ink); background: radial-gradient(ellipse at 50% 35%, #f8e8bf, #e2c587 75%, #c9a45f); text-align: center; }
.phone__offer small { font: 400 10px/1 var(--head); text-transform: uppercase; color: #6b3b14; }
.phone__offer b { font: 400 44px/1 var(--head); background: linear-gradient(180deg, #fff6b8, #ffd23a 45%, #e08a00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #6a2a06; paint-order: stroke fill; }
.phone__offer em { font: 400 15px/1.2 var(--head); font-style: normal; color: #5a1a08; }
.phone__cta { margin-top: 8px; padding: 7px 14px; border-radius: 6px; background: linear-gradient(180deg, #4bdc77, #187a39); box-shadow: 0 0 0 2px var(--gold); color: #fff; font: 400 11px/1 var(--head); text-transform: uppercase; }
.phone__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.phone__tiles .gt { border-radius: 6px; box-shadow: 0 0 0 1.5px var(--gold2); }
.phone__nav { display: flex; justify-content: space-around; padding: 10px 0 2px; border-top: 1px solid var(--line); color: var(--muted); }
.phone__nav .ico:first-child { color: var(--gold); }
.device__txt .ticks { margin: 4px 0 24px; }
.seg { display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 18px; border-radius: 999px; background: #0d2219; border: 1px solid var(--line2); }
.seg button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 900; color: var(--muted); }
.seg button[aria-selected="true"] { background: linear-gradient(180deg, #3fd06c, #1f8f43); color: #fff; }

/* 404 */
.lost { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 24px; margin: 20px 0 40px; }
.lost .chest-art { width: 200px; }
.lost h1 { font-size: 38px; }
.lost p { color: var(--muted); max-width: 480px; }

/* ---------- Footer ---------- */
.foot { margin-top: auto; padding: 34px 28px 90px; background: #08150f; border-top: 1px solid #10261c; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; max-width: 1124px; margin: 0 auto 26px; }
.logo--foot { width: 100px; height: auto; margin-bottom: 12px; }
.foot__brand p { color: var(--muted); font-size: 14px; }
.foot__h { margin: 0 0 12px; font: 400 17px/1 var(--head); color: var(--gold); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot ul a { color: #cfdcd4; font-size: 14px; text-decoration: none; }
.foot ul a:hover { color: var(--gold); }
.foot__facts dl { margin: 0; display: grid; gap: 8px; }
.foot__facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.foot__facts dt { color: var(--muted); }
.foot__facts dd { margin: 0; text-align: right; font-weight: 800; }
.foot__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1124px; margin: 0 auto 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foot__pay .pm:not(.pm--visa):not(.pm--mc):not(.pm--apple):not(.pm--btc) { background: #12291e; color: #cfdcd4; border: 1px solid var(--line2); }
.foot__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 1124px; margin: 0 auto 20px; font-size: 13.5px; }
.foot__langs a { color: var(--muted); text-decoration: none; }
.foot__langs a.is-on, .foot__langs a:hover { color: var(--gold); }
.foot__legal { display: flex; gap: 14px; align-items: flex-start; max-width: 1124px; margin: 0 auto 16px; }
.foot__legal p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.foot__bottom { display: flex; justify-content: space-between; gap: 12px; max-width: 1124px; margin: 0 auto; font-size: 12.5px; color: var(--dim); }
.foot__bottom a { color: var(--dim); }

.dock { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .reel { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
  .adv { grid-template-columns: repeat(2, 1fr); }
  .opinion { grid-template-columns: 1fr 320px; }
  .verdict { grid-template-columns: 1fr; }
  .tools { grid-template-columns: repeat(3, 1fr); }
  .time { grid-template-columns: auto 1fr 110px; }
  .time__bar { display: none; }
}
@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 50; left: 0; top: 0; width: 290px; max-width: 86vw; transform: translateX(-102%); transition: transform .25s; box-shadow: 20px 0 50px rgba(0, 0, 0, .5); }
  .side.is-open { transform: none; }
  .side__head { justify-content: space-between; }
  .side__close { display: block; }
  .top { padding: 10px 16px; }
  .top__burger, .top__logo { display: block; }
  .top__logo .logo { width: 70px; height: auto; }
  .main { padding: 8px 16px 40px; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .quest { grid-template-columns: repeat(2, 1fr); }
  .route { grid-template-columns: 1fr; gap: 0; }
  .route::before { left: 26px; right: auto; top: 26px; bottom: 26px; border-top: 0; border-left: 3px dashed var(--gold2); }
  .route__wp { grid-template-columns: 54px auto 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding-bottom: 20px; }
  .route__pin { grid-row: 1 / 3; }
  .route__tag { margin: 0; grid-column: 2; }
  .route__wp b { grid-column: 3; grid-row: 1; align-self: center; }
  .route__wp p { grid-column: 2 / 4; grid-row: 2; }
  .foot { padding: 30px 16px 90px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .dock { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px;
    background: rgba(14, 38, 27, .96); border: 1px solid var(--gold2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); }
  .dock div { display: grid; line-height: 1.25; min-width: 0; }
  .dock small { font-size: 11px; color: var(--muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock b { font: 400 16px/1.2 var(--head); color: var(--gold); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__scene { position: relative; inset: auto; height: 230px; }
  .hero::after { background: linear-gradient(180deg, rgba(10, 26, 19, 0) 120px, rgba(10, 26, 19, .9) 230px, var(--bg) 300px); }
  .hero__offer { margin-top: -70px; padding-top: 0; }
  .hero__h1 { order: -1; padding: 6px 14px; border-radius: 12px; background: rgba(10, 26, 19, .82); font-size: 14px; }
  .feats, .cats, .chapters__g, .adv--3 { grid-template-columns: 1fr; }
  .reel { grid-auto-columns: 42%; }
  .opinion, .sec--split, .bounty, .device, .lt, .band, .banner__grid { grid-template-columns: 1fr; }
  .band { padding: 22px; text-align: center; justify-items: center; }
  .band__art { max-width: 180px; }
  .stub { max-width: 320px; }
  .poster { max-width: 380px; margin: 0 auto; transform: none; }
  .kpis, .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .ledger--2 { grid-template-columns: 1fr; }
  .ledger--2 div:nth-last-child(2) { border-bottom: 1px dashed var(--line2); }
  .tools { grid-template-columns: repeat(2, 1fr); }
  .top__in { display: none; }
}
@media (max-width: 560px) {
  .find { display: none; }
  .lng { margin-left: auto; }
  .adv, .quest { grid-template-columns: 1fr; }
  .reel { grid-auto-columns: 46%; gap: 10px; }
  .rh h2, .rh h3, .rh p { font-size: 21px; }
  .rh__arr { display: none; }
  .scroll__pct { font-size: 72px; }
  .scroll__max { font-size: 44px; }
  .btn-xl { padding: 12px 26px; font-size: 18px; }
  .hero__pay { flex-direction: column; text-align: center; }
  .banner { padding: 18px 16px 20px; }
  .toc ol { grid-template-columns: 1fr; }
  .stat { grid-template-columns: 70px 1fr 30px; }
  .time { grid-template-columns: auto 1fr; }
  .time b { grid-column: 2; text-align: left; }
  .time .mi { grid-row: 1 / 3; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bottom { flex-direction: column; }
  .ledger div { grid-template-columns: 1fr; gap: 2px; }
  .poster__pct { font-size: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* long compound words (de/fi/da) must never widen small grid cells */
.kpis > *, .mini-stats > *, .tools > *, .adv > *, .quest > *, .cats > *, .chapters__g > *, .calc__out > * { min-width: 0; }
.kpi span, .mini-stats span, .tool b, .tool span, .adv__i h3, .quest b, .chap b, .chap small, .calc__out small, .stat__l, .rh h2, .banner h1 { overflow-wrap: anywhere; hyphens: auto; }