/* zelarmorvndrix.com — Murano millefiori paperweights: murrine canes under a crystal dome that magnifies them,
   a lattimo glass koi, a coloured pool of light on the table. Tokens and sizes from refs/figma/lib.js + pages.js. */
:root {
  --lat: #F4F7F3; --aqua: #DCEBE7; --aqua2: #C3DED7; --ink: #10302E; --ink2: #35534F; --teal: #1B7F7A; --tealD: #0E5652;
  --ruby: #C42A2F; --koi: #E4561F; --cob: #2A45A6; --amb: #E0A126;
  --disp: 'Hahmlet', Georgia, serif;
  --text: 'Pathway Extreme', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 20px;
  --wrap: max(var(--pad), calc(50% - 588px));        /* 1176 = 1368 − 2 × 96 */
  --r: 24px;                                         /* radius 24: blown glass has no sharp corners */
  /* glass-blur, the one recipe (lib.js GLASS): blur 26, lattimo 22 %, 1 px white rim 60 % */
  --glass-blur: 26px; --glass-a: .22; --rim: rgba(255, 255, 255, .6);
  /* note: «купол-линза следует за курсором в пределах ±24 px; увеличение ×1,4 от центра купола» */
  --follow: 24px; --mag: 1.4;
  --hover-t: 240ms; --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1024px) { :root { --pad: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lat); color: var(--ink); font: 400 16px/1.55 var(--text); overflow-x: hidden; padding-bottom: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--teal); color: var(--lat); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--lat); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }

/* ---------- glass + murrine ---------- */
.glass { background: rgba(244, 247, 243, var(--ga, .5)); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--rim); border-radius: var(--r); box-shadow: 0 14px 36px -6px rgba(16, 48, 46, .1); }
.lace { background: var(--lat) url(/assets/img/latticino.webp) 0 0 / 120px; }
.mstrip { display: block; height: 18px; background: url(/assets/img/murrine.webp) 0 0 / 96px repeat-x; }   /* lib.js murrStrip: the 192 px tile at .5, cropped by the strip height */
.cane { width: 20px; height: 20px; flex: none; }
.plus { width: 20px; height: 20px; flex: none; color: var(--teal); }
@media (min-width: 1024px) { .mstrip { height: 24px; } }

/* ---------- genome ---------- */
.chip { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid rgba(27, 127, 122, .7); border-radius: 999px; font: 500 12px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--tealD); white-space: nowrap; }
.ghost { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgba(16, 48, 46, .8); border-radius: var(--r); background: none; cursor: pointer;
  font: 500 15px/1.2 var(--text); color: var(--ink); text-decoration: none; transition: background-color var(--hover-t) var(--ease); }
.ghost:hover { background: rgba(255, 255, 255, .6); }
@media (min-width: 1024px) { .ghost { padding: 14px 24px; font-size: 16px; } }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }

/* ---------- type ---------- */
.h2 { font: 600 30px/1.08 var(--disp); letter-spacing: -.015em; }
.h3 { font: 600 26px/1.08 var(--disp); letter-spacing: -.015em; }
.lead, .p { font-size: 16px; line-height: 1.6; color: var(--ink2); }
.p--s { font-size: 15px; }
.small { font-size: 14px; color: var(--ink2); }
.meta { font-weight: 500; font-size: 13px; color: var(--tealD); }
@media (min-width: 1024px) { .h2 { font-size: 44px; } .h3 { font-size: 34px; } .lead, .p { font-size: 18px; } .p--s { font-size: 15px; } }

/* ---------- header + dock ---------- */
.top { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--wrap); }
body:has(.hero) .top, body:has(.phead) .top { position: absolute; left: 0; right: 0; top: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 18px/1 var(--disp); letter-spacing: -.05em; }
.cane--logo { width: 26px; height: 26px; }
.logo--light { color: var(--lat); }
.top-mail { display: none; font-size: 14px; color: var(--ink2); text-decoration: none; }
.top-mail:hover { text-decoration: underline; }
@media (min-width: 1024px) { .top { padding: 32px var(--wrap); } .logo { font-size: 22px; } .cane--logo { width: 30px; height: 30px; } .top-mail { display: block; } }
/* note: «bottom-dock — стеклянная панель закреплена внизу экрана (fixed, bottom 24px); padding-bottom у body» */
.dock { --ga: .5; position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px; }
.dock ul { display: flex; gap: 6px; }
.dock a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r); font-weight: 500; font-size: 14px; text-decoration: none; transition: background-color var(--hover-t); }
.dock a:hover { background: rgba(255, 255, 255, .7); }
.dock a[aria-current] { background: var(--ink); color: var(--lat); }
.cane--dock { width: 14px; height: 14px; }
body { padding-bottom: 96px; }
@media (min-width: 1024px) { .dock a { padding: 11px 22px; font-size: 15px; } body { padding-bottom: 104px; } }
.footer { margin-bottom: -96px; padding-bottom: 96px; background: var(--ink); }
@media (min-width: 1024px) { .footer { margin-bottom: -104px; padding-bottom: 104px; } }

/* ---------- hero: the dome lens over the headline (type-through-image) ---------- */
.hero { position: relative; overflow: hidden; padding-bottom: 32px; background: linear-gradient(180deg, #EEF4F1, var(--lat) 55%, var(--aqua)); }
/* the stage keeps the frame's coordinates: --u = one frame pixel (mobile 360, desktop 1368) */
.stage { --W: 360; --u: calc(100cqw / var(--W)); position: relative; container-type: inline-size; max-width: 560px; margin: 0 auto;
  --s: 46; --l1x: 20; --l1y: 96; --l2x: 20; --l2y: 148; --cx: 252; --cy: 150; --d: 196; --dx: 0px; --dy: 0px;
  --kw: 84; --kh: 122; --kcx: 178; --kcy: 267; --kl: 5, 13; }
.stage::before { content: ''; display: block; height: calc(350 * var(--u)); }       /* the frame's stage height */
.stage > * { --uu: var(--u); }
.h1 { position: absolute; inset: 0 0 auto 0; height: 0; font-weight: 600; }
.hl { position: absolute; white-space: nowrap; font: 600 calc(var(--s) * var(--u))/1 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.hl--1 { left: calc(var(--l1x) * var(--u)); top: calc(var(--l1y) * var(--u)); }
.hl--2 { left: calc(var(--l2x) * var(--u)); top: calc(var(--l2y) * var(--u)); color: var(--tealD); }
/* shadow + coloured pools of light that passed through the glass (light from above-behind) */
.pool { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(var(--dx), var(--dy)); }
.pool--sh { left: calc((var(--cx) - var(--d) / 2 + var(--d) * .1) * var(--u)); top: calc((var(--cy) + var(--d) * .275) * var(--u)); width: calc(var(--d) * 1.05 * var(--u)); height: calc(var(--d) * .38 * var(--u));
  background: radial-gradient(closest-side, rgba(16, 48, 46, .22), rgba(16, 48, 46, 0)); }
.pool--r { left: calc((var(--cx) - var(--d) * .175) * var(--u)); top: calc((var(--cy) + var(--d) * .31) * var(--u)); width: calc(var(--d) * var(--u)); height: calc(var(--d) * .5 * var(--u));
  background: radial-gradient(closest-side, rgba(196, 42, 47, .55), rgba(224, 161, 38, .33) 45%, rgba(220, 235, 231, 0)); }
.pool--b { left: calc((var(--cx) + var(--d) * .125) * var(--u)); top: calc((var(--cy) + var(--d) * .4) * var(--u)); width: calc(var(--d) * .55 * var(--u)); height: calc(var(--d) * .3 * var(--u));
  background: radial-gradient(closest-side, rgba(42, 69, 166, .4), rgba(224, 161, 38, .24) 45%, rgba(220, 235, 231, 0)); }
.lens { position: absolute; z-index: 2; overflow: hidden; border-radius: 50%; pointer-events: none;
  left: calc((var(--cx) - var(--d) / 2) * var(--u)); top: calc((var(--cy) - var(--d) / 2) * var(--u)); width: calc(var(--d) * var(--u)); aspect-ratio: 1;
  transform: translate(var(--dx), var(--dy)); box-shadow: 0 18px 40px -10px rgba(16, 48, 46, .18), 0 0 0 1.5px rgba(255, 255, 255, .8); }
.lens .disc { position: absolute; inset: 0; width: 100%; height: 100%; }
/* centre seen through the thickest glass: canes enlarged, edge compressed */
.lens .disc { transform: scale(1.18); filter: drop-shadow(0 0 18px rgba(14, 86, 82, .25)); }
.wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 247, 243, 0), rgba(244, 247, 243, .72) 30%, rgba(244, 247, 243, .72) 62%, rgba(244, 247, 243, 0)); }
/* the headline again, magnified ×1.4 about the dome's centre; it follows the dome (script.js sets --dx/--dy) */
.mag { position: absolute; left: calc((var(--d) / 2 - var(--cx)) * var(--u)); top: calc((var(--d) / 2 - var(--cy)) * var(--u)); width: calc(var(--W) * var(--u)); height: calc(900 * var(--u));
  transform-origin: calc(var(--cx) * var(--u) + var(--dx)) calc(var(--cy) * var(--u) + var(--dy)); transform: translate(calc(-1 * var(--dx)), calc(-1 * var(--dy))) scale(var(--mag)); }
.rim { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 86%, rgba(14, 86, 82, .45) 95%, rgba(255, 255, 255, .85) 98.5%, rgba(255, 255, 255, .2)); }
.shade { position: absolute; inset: 0; background: radial-gradient(42% 42% at 30% 18%, rgba(14, 86, 82, .42), rgba(14, 86, 82, 0)); }
/* the window reflection: two crisp panes curved by the dome + a soft secondary glint */
.win { position: absolute; left: 17%; top: 8%; width: 34%; height: 20%; transform: rotate(18deg); opacity: .78; }
.win b { position: absolute; top: 0; width: 45%; height: 100%; border-radius: 30%; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35)); }
.win b + b { left: 53%; top: 7%; height: 90%; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25)); }
.glint { position: absolute; left: 60%; top: 76%; width: 18%; height: 5%; border-radius: 50%; transform: rotate(-28deg); background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
/* the lattimo koi resting against the dome, its shadow is its own blurred silhouette */
.koi, .koish { position: absolute; max-width: none; pointer-events: none; transform: rotate(-58deg); }
.koi { z-index: 3; width: calc(var(--kw) * var(--u)); height: calc(var(--kh) * var(--u)); left: calc((var(--kcx) - var(--kw) / 2) * var(--u)); top: calc((var(--kcy) - var(--kh) / 2) * var(--u)); }
.koish { z-index: 1; width: calc(var(--kw) * 1.5 * var(--u)); height: calc(var(--kh) * 1.5 * var(--u)); left: calc((var(--kcx) - var(--kw) * .75 + var(--klx, 5)) * var(--u)); top: calc((var(--kcy) - var(--kh) * .75 + var(--kly, 13)) * var(--u)); }
.intro { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 var(--pad); margin-top: 0; }
.intro .lead { font-size: 16px; line-height: 1.55; }
.panel { --ga: .86; position: relative; z-index: 4; margin: 20px var(--pad) 0; padding: 18px 16px; border-color: var(--aqua2); }
.pn-h { font: 600 19px/1.2 var(--disp); margin-bottom: 8px; }
.panel a { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(16, 48, 46, .12); text-decoration: none; }
.pr-t { flex: 1; font-weight: 500; font-size: 15px; }
.pr-g { font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tealD); }
.panel a:hover .pr-t { text-decoration: underline; }
@media (min-width: 560px) and (max-width: 1023.98px) { .intro, .panel { max-width: 560px; margin-left: auto; margin-right: auto; } .intro { padding: 0 20px; } }
@media (min-width: 1024px) {
  .hero { padding: 0; }
  .stage { --W: 1368; max-width: 1368px; --s: 96; --l1x: 96; --l1y: 236; --l2x: 430; --l2y: 348; --cx: 806; --cy: 344; --d: 560; --kw: 196; --kh: 286; --kcx: 1229; --kcy: 255; --klx: 12; --kly: 30; }
  .stage::before { height: calc(900 * var(--u)); }
  .intro { position: absolute; left: calc(96 * var(--u)); top: calc(520 * var(--u)); width: calc(430 * var(--u)); padding: 0; gap: 28px; }
  .intro .lead { font-size: max(15px, calc(19 * var(--u))); }
  .panel { position: absolute; margin: 0; left: calc(990 * var(--u)); top: calc(470 * var(--u)); width: calc(300 * var(--u)); padding: 22px; }
  .pn-h { font-size: 22px; } .pr-t { font-size: 14px; } .pr-g { font-size: 11px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .panel { width: calc(340 * var(--u)); left: calc(960 * var(--u)); padding: 16px; } .pr-g { display: none; } }

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 52px var(--wrap) 56px; }
@media (min-width: 1024px) { .sec { gap: 48px; padding: 88px var(--wrap) 96px; } }
/* G: shelf-row — two glass shelves of three covers, a strip of canes under each */
.g-hd { display: flex; flex-direction: column; gap: 14px; }
.shelf { display: flex; flex-direction: column; }
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.covers li:nth-child(3) { grid-column: 1; }
.glass-shelf { display: block; height: 14px; margin-top: -4px; border-radius: 4px; border: 1px solid #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .95), var(--aqua2)); box-shadow: 0 12px 18px -4px rgba(16, 48, 46, .14); position: relative; z-index: 1; }
.refl { display: block; height: 22px; background: linear-gradient(180deg, rgba(195, 222, 215, .7), rgba(244, 247, 243, 0)); }
@media (min-width: 1024px) { .g-hd { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 96px; } .g-hd .h2, .g-hd .lead { max-width: 520px; } .covers { grid-template-columns: repeat(3, 1fr); gap: 0 48px; } .covers li:nth-child(3) { grid-column: auto; } .refl { height: 36px; } }
/* cover-whole card. Tile hover: «the cover lifts, the frosted band opens with one line, a dome highlight crosses the cover» */
.card { position: relative; overflow: hidden; aspect-ratio: 154 / 214; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .7); background: var(--aqua);
  box-shadow: 0 16px 30px -8px rgba(16, 48, 46, .16); transition: transform var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease), border-color var(--hover-t); }
.card .cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.band { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; max-height: 70px;
  background: rgba(244, 247, 243, .82); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--rim);
  transition: max-height var(--hover-t) var(--ease); overflow: hidden; }
.cd-h { font: 600 15px/1.15 var(--disp); }
.cd-a { text-decoration: none; } .cd-a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.cd-g { font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tealD); }
.cd-p { font-size: 12px; line-height: 1.4; color: var(--ink2); opacity: 0; transition: opacity var(--hover-t) var(--ease); }
.medge { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url(/assets/img/murrine.webp) 0 0 / 48px repeat-x; }   /* scale .25 */
.cd-blik { position: absolute; left: -30%; top: 6%; width: 55%; height: 15%; border-radius: 50%; transform: rotate(-28deg); opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); transition: left 600ms var(--ease), opacity var(--hover-t); }
.card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: 0 24px 40px -10px rgba(16, 48, 46, .26); border-color: var(--teal); }
.card:hover .band, .card:focus-within .band { max-height: 140px; }
.card:hover .cd-p, .card:focus-within .cd-p { opacity: 1; }
.card:hover .cd-blik, .card:focus-within .cd-blik { left: 20%; opacity: 1; }
.card:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; } .cd-a:focus-visible { outline: 0; }
@media (min-width: 1024px) { .card { aspect-ratio: 360 / 340; } .band { padding: 12px 16px; max-height: 80px; } .cd-h { font-size: 22px; } .cd-g { font-size: 12px; } .cd-p { font-size: 13px; } }
/* K: contact block on a cane disc */
.ksec { background: var(--aqua); padding-top: 48px; padding-bottom: 56px; }
.kdisc { position: absolute; left: 120px; top: -40px; width: 360px; opacity: .58; border-radius: 50%; }
.slab { --ga: .5; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; max-width: 760px; }
.pl { display: flex; flex-direction: column; gap: 12px; }
.pl li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.pl .plus { color: var(--ruby); }
.pl--teal .plus { color: var(--teal); }
.k-mail { font: 400 22px/1.2 var(--disp); color: var(--tealD); text-decoration: none; overflow-wrap: anywhere; }
.k-mail:hover { text-decoration: underline; }
@media (min-width: 1024px) { .ksec { padding: 64px var(--wrap) 72px; } .kdisc { left: auto; right: calc(var(--wrap) - 96px - 172px); top: -120px; width: 560px; } .slab { padding: 48px 52px; gap: 22px; } .h2--k { font-size: 40px; } .pl li { font-size: 17px; } .k-mail { font-size: 36px; } }

/* ---------- footer: split contact ---------- */
.footer { color: var(--lat); }
.f-body { display: flex; flex-direction: column; gap: 36px; padding: 36px var(--wrap) 28px; }
.f-l { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.f-line { font-size: 15px; color: var(--aqua); }
.f-mail { font: 400 22px/1.2 var(--disp); color: var(--lat); text-decoration: none; overflow-wrap: anywhere; }
.f-mail:hover { text-decoration: underline; }
.f-req { font-size: 13px; color: var(--aqua2); }
.f-cols { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.f-h { font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amb); margin-bottom: 12px; }
.f-col ul { display: flex; flex-direction: column; gap: 10px; }
.f-col a, .f-col li, .f-col .linkish { font-size: 15px; color: var(--lat); text-decoration: none; }
.f-col a:hover { text-decoration: underline; }
.f-base { display: flex; flex-direction: column; gap: 8px; padding: 16px var(--wrap) 24px; border-top: 1px solid rgba(220, 235, 231, .2); font-size: 13px; color: var(--aqua2); }
@media (min-width: 1024px) { .f-body { flex-direction: row; gap: 80px; padding: 64px var(--wrap) 40px; } .f-l { flex: 0 0 520px; } .f-mail { font-size: 30px; } .f-cols { flex-wrap: nowrap; gap: 64px; } .f-base { flex-direction: row; justify-content: space-between; padding: 20px var(--wrap) 28px; } }

/* ---------- inner page head: frosted pane over the canes ---------- */
.phead { position: relative; overflow: hidden; padding: 64px var(--wrap) 40px; background:
  url(/assets/img/latticino.webp) 0 0 / 120px, linear-gradient(rgba(220, 235, 231, .8), rgba(220, 235, 231, .8)), url(/assets/img/murrine.webp) 0 0 / 96px, var(--aqua); }
.ph-row { display: flex; flex-direction: column; gap: 24px; }
.ph-pane { --ga: .6; display: flex; flex-direction: column; gap: 14px; padding: 24px 18px 28px; max-width: 860px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink2); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '›'; color: var(--tealD); }
.crumbs [aria-current] { font-weight: 500; color: var(--ink); }
.h1p { font: 600 40px/1.04 var(--disp); letter-spacing: -.03em; overflow-wrap: anywhere; }
.card--head { aspect-ratio: 1; width: 100%; max-width: 420px; }
@media (min-width: 1024px) { .phead { padding: 96px var(--wrap) 72px; } .ph-row { flex-direction: row; align-items: center; gap: 48px; } .ph-pane { flex: 0 1 860px; padding: 40px 48px 48px; gap: 20px; } .h1p { font-size: 72px; overflow-wrap: normal; } .card--head { flex: 0 0 420px; } .card--head .cd-h { font-size: 24px; } }
.card--head .cd-p { display: none; }

/* games index; hover: the row lifts on a glass sheet, the title turns teal, a preview cover appears */
.ixsec { padding-top: 28px; }
.ixs { display: flex; flex-direction: column; }
.ix { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(16, 48, 46, .18); border-radius: 0; transition: background-color var(--hover-t), border-radius var(--hover-t); }
.ix-pv { flex: none; width: 92px; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 22px -8px rgba(16, 48, 46, .25); }
.ix-pv .cv { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ix-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ix-h { font: 600 24px/1.05 var(--disp); letter-spacing: -.03em; transition: color var(--hover-t); }
.ix-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.ix-p { display: none; } .ix-u { display: none; }
.ix > .plus { display: none; }
.ix:hover .ix-h, .ix:focus-within .ix-h { color: var(--tealD); }
.ix:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; } .ix .cd-a:focus-visible { outline: 0; }
@media (min-width: 1024px) {
  .ixsec { padding: 56px var(--wrap) 120px; }
  .ix { gap: 32px; padding: 26px 24px; }
  .ix-pv { position: absolute; left: 24px; top: 50%; width: 150px; transform: translateY(-50%) rotate(-2deg) scale(.6); opacity: 0; transition: opacity var(--hover-t), transform var(--hover-t) var(--ease); pointer-events: none; }
  .ix-t { transition: transform var(--hover-t) var(--ease); }
  .ix-h { font-size: 46px; }
  .ix-p { display: block; flex: 0 0 400px; font-size: 16px; color: var(--ink2); }
  .ix-u { display: block; flex: 0 0 130px; font-size: 13px; color: var(--ink2); }
  .ix > .plus { display: block; width: 26px; height: 26px; transition: color var(--hover-t); }
  .ix:hover, .ix:focus-within { background: rgba(255, 255, 255, .5); border-radius: var(--r); }
  .ix:hover .ix-pv, .ix:focus-within .ix-pv { opacity: 1; transform: translateY(-50%) rotate(-2deg); }
  .ix:hover .ix-t, .ix:focus-within .ix-t { transform: translateX(166px); }
  .ix:hover > .plus, .ix:focus-within > .plus { color: var(--ruby); }
}
/* game page */
.fband { padding: 20px var(--wrap); background: linear-gradient(rgba(195, 222, 215, .7), rgba(195, 222, 215, .7)), url(/assets/img/murrine.webp) 0 0 / 96px, var(--aqua2); }
.fb { --ga: .62; display: grid; grid-template-columns: 1fr; padding: 8px; }
.fb div { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.fb dt { font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tealD); }
.fb dd { font-size: 14px; line-height: 1.45; }
@media (min-width: 1024px) { .fband { padding: 28px var(--wrap); } .fb { grid-template-columns: repeat(4, 1fr); } .fb div { padding: 14px 18px; } }
.gbody { align-items: stretch; }
.gbody > * { max-width: 760px; width: 100%; margin: 0 auto; }
.blk { display: flex; flex-direction: column; gap: 12px; }
.keys .kr { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(16, 48, 46, .12); }
.keys dt { flex: 0 0 120px; } .keys dd { font-size: 16px; }
.keys .chip { white-space: normal; }
.qas { display: flex; flex-direction: column; }
.qa { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid rgba(16, 48, 46, .12); }
.q { font: 400 18px/1.3 var(--disp); }
.qa .p { font-size: 16px; }
.sims { display: flex; flex-direction: column; gap: 24px; }
.sims li { display: flex; flex-direction: column; gap: 12px; }
.card--wide { aspect-ratio: 368 / 200; }
.where { --ga: .4; background-color: rgba(220, 235, 231, .4); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px; }
.wh-h { font: 400 22px/1.2 var(--disp); }
.wh-a { font-weight: 500; font-size: 15px; color: var(--tealD); }
@media (min-width: 1024px) { .gbody { gap: 56px; padding: 80px var(--wrap) 96px; } .blk { gap: 18px; } .keys dt { flex-basis: 210px; } .q { font-size: 21px; } .sims { flex-direction: row; } .sims li { flex: 1; } .where { padding: 26px 30px; } }
/* about */
.abody { gap: 36px; }
.ab { display: flex; flex-direction: column; gap: 12px; }
.ab-b { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.ab-h { font-size: 26px; }
.qa .q + .p { margin: 0; }
.kab { position: relative; padding: 40px var(--wrap) 56px; background: linear-gradient(rgba(195, 222, 215, .78), rgba(195, 222, 215, .78)), url(/assets/img/murrine.webp) 0 0 / 96px, var(--aqua2); }
.kab .slab { --ga: .6; }
.kdl div { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(16, 48, 46, .14); }
.kdl dt { flex: 0 0 110px; font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tealD); line-height: 1.8; }
.kdl dd { font-size: 16px; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .abody { gap: 64px; } .ab { flex-direction: row; gap: 64px; } .ab-h { flex: 0 0 380px; font-size: 32px; } .kab { padding: 72px var(--wrap) 120px; } .kab .slab { padding: 40px 48px; } }
/* legal */
.legal > * { max-width: 760px; width: 100%; margin: 0 auto; }
.ls { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(16, 48, 46, .14); }
.ls-h { font: 400 21px/1.2 var(--disp); }
.ls .p { font-size: 16px; }
@media (min-width: 1024px) { .legal { gap: 40px; padding: 72px var(--wrap) 120px; } .ls-h { font-size: 26px; } }

/* ---------- cookie: a glass pane, above the dock ---------- */
.cookie { --ga: .78; position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 96px; max-width: 500px; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; }
.cookie[hidden] { display: none; }
.ck-h { display: flex; align-items: center; gap: 12px; font: 600 19px/1.25 var(--disp); }
.cane--ck { width: 28px; height: 28px; }
.ck-p { font-size: 14px; line-height: 1.5; color: var(--ink2); }
.ck-link { align-self: flex-start; font-weight: 500; font-size: 14px; color: var(--tealD); }
.ck-acts { display: flex; gap: 10px; }
.ck-acts .ghost { flex: 1; justify-content: center; }
.ck-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(16, 48, 46, .14); border-bottom: 1px solid rgba(16, 48, 46, .14); }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--teal); }
@media (max-width: 400px) { .ck-acts { flex-direction: column; } }
@media (min-width: 1024px) { .cookie { left: 24px; right: auto; bottom: 24px; width: 500px; padding: 26px 28px; } .ck-h { font-size: 22px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .stage { --dx: 0px !important; --dy: 0px !important; }
}

/* Соцмережі у футері: лише іконки */
.social-row { display: flex; align-items: center; gap: 10px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: inherit; text-decoration: none; }
.social-link svg { display: block; width: 100%; height: 100%; }
.social-link:hover, .social-link:focus-visible { opacity: 0.7; }