/* mirexvaldraxel.com — a 1930s Art Deco municipal open-air lido: aqua-tiled basin with dark lane T-marks,
   cork-float lane ropes, white coping with painted depth numerals, a stepped diving stage, striped cubicle doors.
   Six games = six lanes; the catalogue swims sideways. */

:root {
  --ink: oklch(0.28 0.06 245);
  --ink-soft: oklch(0.40 0.05 240);
  --tile: oklch(0.975 0.01 195);
  --grout: oklch(0.86 0.035 200);
  --pool: oklch(0.84 0.075 200);
  --pool-hi: oklch(0.92 0.045 198);
  --deep: oklch(0.47 0.095 222);
  --coral: oklch(0.68 0.15 34);
  --sand: oklch(0.935 0.035 85);
  --white: #fff;

  --disp: "Syncopate", "Arial Black", sans-serif;
  --text: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 20px;
  --inner: 1224px;
  /* Figma tile hover: 220 ms, ease-out */
  --hover: 220ms ease-out;
}
@media (min-width: 900px) { :root { --pad: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tile); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.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: 100; background: var(--ink); color: var(--white); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
.only-d { display: none !important; }
@media (min-width: 900px) { .only-d { display: block !important; } .only-m { display: none !important; } }

/* ---------- type ---------- */
.h { font-family: var(--disp); font-weight: 700; font-size: clamp(1.5rem, 1.14rem + 1.59vw, 2.5rem); line-height: 1.18; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.h--title { font-size: clamp(1.625rem, 0.8rem + 3.7vw, 4rem); line-height: 1.12; max-width: 1000px; }
@media (min-width: 900px) { .band--title .h--title { max-width: min(1000px, calc(100% - 160px)); } }
.h--mid { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); }
.h--sec { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); }
.h--xs { font-size: 16px; letter-spacing: 0.01em; }
.h--lg { font-size: clamp(17px, 0.3vw + 16px, 20px); letter-spacing: 0.01em; }
.small { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--ink-soft); }
.small--ink { color: var(--ink); }
.p { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.p--big { font-size: 17px; line-height: 1.55; }
.p--lead { font-size: 16px; line-height: 1.55; max-width: 720px; }
.p--s { font-size: 15px; }
.p--xs { font-size: 14px; line-height: 1.45; }
.soft { color: var(--ink-soft); }
@media (min-width: 900px) { body, .p { font-size: 18px; } .p--big { font-size: 21px; } .p--lead { font-size: 20px; } .p--s { font-size: 16px; } .p--xs { font-size: 14px; } }
.ulink { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.ulink:hover { color: var(--deep); }
@media (min-width: 900px) { .ulink { font-size: 16px; } }
.p a, .q-a a, .c-rows a { text-underline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 20px; background: var(--ink); color: var(--white); border: 2px solid var(--ink); font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: pre; }
.btn:hover { background: var(--deep); border-color: var(--deep); }
.btn--line { background: var(--white); color: var(--ink); }
.btn--line:hover { background: var(--pool-hi); color: var(--ink); border-color: var(--ink); }
@media (min-width: 900px) { .btn { padding: 18px 28px; font-size: 13px; } }

/* ---------- lido pieces ---------- */
.rope { height: var(--rope-small-h); background: var(--rope-small) repeat-x left center; }
@media (min-width: 900px) { .rope { height: var(--rope-big-h); background-image: var(--rope-big); } }
.rope--small { height: var(--rope-small-h); background-image: var(--rope-small) !important; }
.obj { position: absolute; pointer-events: none; overflow: visible; }
.lane-t { position: absolute; opacity: 0.1; pointer-events: none; }
.float { display: inline-block; flex: none; width: 18px; height: 10px; border-radius: 5px; background: var(--coral); border: 1.2px solid var(--ink); }
.depth { display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px; border: 1.5px solid currentColor; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.cubi { position: absolute; top: 0; bottom: 0; background: var(--cubicles) repeat; pointer-events: none; }
/* grounds */
.panel { position: relative; overflow: hidden; padding: 64px var(--pad); }
.panel > .in, .band > .in, .footer > .in, .panels > .in, .legal > .in { position: relative; z-index: 1; max-width: var(--inner); margin-inline: auto; }
.panel > .in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.in--center { justify-items: center; }
@media (min-width: 900px) { .panel { padding: 104px var(--pad); } .panel > .in { gap: 40px; } }
.panel--tile, .panels { background-color: var(--tile); background-image: linear-gradient(to right, oklch(0.86 0.035 200 / 0.55) 1.2px, transparent 1.2px), linear-gradient(to bottom, oklch(0.86 0.035 200 / 0.55) 1.2px, transparent 1.2px); background-size: 40px 40px; }
.panel--sand { background: var(--sand); }
.panel--steps { background-image: linear-gradient(to bottom, oklch(0.28 0.06 245 / 0.07) 1px, transparent 1px); background-size: 100% 28px; }
.panel--white { background: var(--white); }
.panel--pool, .band, .scene { background-color: var(--pool); background-image: linear-gradient(to right, rgb(255 255 255 / 0.45) 1.2px, transparent 1.2px), linear-gradient(to bottom, rgb(255 255 255 / 0.45) 1.2px, transparent 1.2px); background-size: 30px 30px; }
@media (min-width: 900px) { .panel--pool, .band { background-size: 46px 46px; } }
.panel--pool::before { content: ""; position: absolute; inset: 0; background: var(--caustics) repeat; opacity: 0.3; pointer-events: none; }
.panel--coral { background: var(--coral) var(--cubicles) repeat; }

/* ---------- header: a thin white terrace with a stepped burger ---------- */
.top { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--pad); background: var(--white); border-bottom: 2px solid var(--ink); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { position: static; width: 26px; height: 26px; }
.logo-t { font-size: 12px; letter-spacing: 0.16em; color: var(--ink); }
.menu-btn { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; padding: 8px 0; color: var(--ink); }
.menu-lab { display: none; }
.burger { width: 30px; height: 22px; }
.menu { position: absolute; right: var(--pad); top: calc(100% + 2px); min-width: 220px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 16px 36px oklch(0.28 0.06 245 / 0.25); }
.menu[hidden] { display: none; }
.menu a { display: block; padding: 14px 20px; font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.menu li + li a { border-top: 1px solid var(--grout); }
.menu a:hover { background: var(--pool-hi); }
.menu a[aria-current] { background: var(--ink); color: var(--white); }
@media (min-width: 900px) { .top { height: 76px; } .logo-mark { width: 30px; height: 30px; } .logo-t { font-size: 15px; } .menu-lab { display: inline; } }

/* ---------- hero: headline lines swim in lanes ---------- */
.lanes { position: relative; overflow: hidden; height: 292px; background-color: var(--pool); background-image: var(--caustics-35), linear-gradient(to right, rgb(255 255 255 / 0.5) 1.2px, transparent 1.2px), linear-gradient(to bottom, rgb(255 255 255 / 0.5) 1.2px, transparent 1.2px); background-size: 160px 92px, 30px 30px, 30px 30px; }
.h-ropes { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--rope-small) repeat-x 0 8px, var(--rope-small) repeat-x 0 100px, var(--rope-small) repeat-x 0 192px; pointer-events: none; }
.h1 { position: absolute; inset: 0; margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(26px, 9.4vw, 34px); letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }
.lane { position: absolute; left: 0; right: 0; top: calc(48px + var(--i) * 92px); height: 1.06em; }
.lane-track { position: absolute; left: var(--pad); top: 0; white-space: nowrap; animation: drift var(--dur) ease-in-out infinite alternate; }
.line { position: relative; display: block; }
.echo { position: absolute; top: 0; right: calc(100% + 60px); color: transparent; -webkit-text-stroke: 1px oklch(0.28 0.06 245 / 0.55); }
.echo--r { display: none; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(var(--dir) * 18vw)); } }
.hero:hover .lane-track, .hero:focus-within .lane-track { animation-play-state: paused; }
.scene { position: relative; overflow: hidden; height: 150px; }
.coping { background: var(--tile); }
.grille { height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Crect width='18' height='16' fill='%23b7d8da'/%3E%3Crect x='6' y='4' width='11' height='8' rx='2' fill='%23092b44' fill-opacity='.55'/%3E%3C/svg%3E") repeat-x; }
.coping-row { display: grid; gap: 22px; padding: 26px var(--pad) 32px; max-width: calc(var(--inner) + 2 * var(--pad)); margin-inline: auto; }
.standfirst { display: grid; gap: 24px; max-width: 640px; }
.routes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.depth-num { font-family: var(--disp); font-weight: 700; font-size: 56px; letter-spacing: 0.06em; opacity: 0.9; white-space: nowrap; }
@media (min-width: 900px) {
  .lanes { height: 574px; background-size: 160px 92px, 46px 46px, 46px 46px; }
  .h-ropes { background: var(--rope-big) repeat-x 0 14px, var(--rope-big) repeat-x 0 198px, var(--rope-big) repeat-x 0 382px; }
  .h1 { font-size: min(96px, 7vw); }
  .lane { top: calc(68px + var(--i) * 184px); }
  .lane-track { left: var(--pad); }
  .lane--2 .lane-track { left: calc(var(--pad) + 16vw); }
  .echo { right: calc(100% + 200px); -webkit-text-stroke-width: 1.6px; }
  .echo--r { display: block; left: calc(100% + 200px); right: auto; }
  .h-stage { left: auto !important; right: -134px; }
  .h-buoy { rotate: 12deg; filter: drop-shadow(10px 22px 11px oklch(0.28 0.06 245 / 0.3)); }
  .h-ladder { filter: drop-shadow(14px 18px 8px oklch(0.28 0.06 245 / 0.22)); }
  .h-stage { filter: drop-shadow(-18px 22px 15px oklch(0.28 0.06 245 / 0.25)); }
  .coping-row { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 40px var(--pad) 48px; }
}

/* ---------- G: the carousel of lanes ---------- */
.g-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.g-ht { display: grid; gap: 16px; max-width: 760px; }
.carousel { display: grid; gap: 22px; min-width: 0; }
.c-track { --cw: 260px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding: 4px 4px 34px; margin: -4px -4px -30px; scrollbar-width: none; overscroll-behavior-x: contain; }
.c-track::-webkit-scrollbar { display: none; }
.card { position: relative; flex: none; width: var(--cw); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); border: 1px solid oklch(0.28 0.06 245 / 0.18); border-radius: 2px; box-shadow: 0 8px 18px oklch(0.28 0.06 245 / 0.12); transition: box-shadow var(--hover); }
.card--full { --cw: 280px; }
.c-block { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px; background: var(--ink); color: var(--white); transition: background-color var(--hover), color var(--hover); }
.c-block .small { color: inherit; }
.c-block .depth { font-size: 10px; padding: 5px 8px; }
.c-well { position: relative; overflow: hidden; height: calc(var(--cw) * 0.72); background: var(--pool); }
.card--full .c-well { height: calc(var(--cw) * 0.8); }
.c-well .cover { position: absolute; left: 0; top: -14%; width: 100%; aspect-ratio: 1; object-fit: cover; transition: top var(--hover); }
.c-water { position: absolute; left: 0; right: 0; top: 69.4%; bottom: 0; background: oklch(0.84 0.075 200 / 0.55); opacity: 0; transition: opacity var(--hover); }
.c-water::after { content: ""; position: absolute; inset: -6% 0 0; background: var(--caustics) repeat; opacity: 0.6; }
.c-body { display: grid; gap: 12px; align-content: start; flex: 1; padding: 18px 18px 22px; }
.c-title { font-family: var(--disp); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.18; }
.c-meta, .c-fact { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.c-one { font-size: 15px; line-height: 1.5; }
.c-link { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.c-link::after { content: ""; position: absolute; inset: 0; }
.c-hover { display: none; }
/* tile hover (Figma): the tile dives — cover sinks 6 % under a water line, the block turns coral, the shadow deepens */
.card:hover, .card:focus-within { box-shadow: 0 22px 40px oklch(0.28 0.06 245 / 0.3); }
.card:hover .c-block, .card:focus-within .c-block { background: var(--coral); color: var(--ink); }
.card:hover .c-well .cover, .card:focus-within .c-well .cover { top: -8%; }
.card:hover .c-water, .card:focus-within .c-water { opacity: 1; }
.card:hover .c-rest, .card:focus-within .c-rest { display: none; }
.card:hover .c-hover, .card:focus-within .c-hover { display: inline; }
.c-link:focus-visible { outline: none; }
.card:has(.c-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.c-ctl { display: flex; align-items: center; gap: 14px; }
.c-btn { width: 52px; height: 52px; padding: 0; background: none; border: 0; border-radius: 50%; }
.c-btn svg { width: 52px; height: 52px; }
.c-btn:hover circle { fill: var(--pool-hi); }
.c-btn:disabled { opacity: 0.4; cursor: default; }
@media (min-width: 900px) {
  .c-track { --cw: 340px; gap: 24px; }
  .card--full { --cw: 420px; }
  .c-block { height: 52px; padding: 0 18px; }
  .c-body { padding: 22px 24px 26px; }
  .c-title { font-size: 20px; }
  .c-one { font-size: 16px; }
}

/* ---------- T: the marquee rope ---------- */
.marquee { overflow: hidden; height: 60px; display: flex; align-items: center; background: var(--deep); }
.mq-track { display: flex; width: max-content; animation: mq 50s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-run { display: flex; align-items: center; gap: 18px; padding-right: 18px; flex: none; }
.mq-item { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.marquee .float { width: 18px; height: 10px; border: 1.5px solid var(--white); border-radius: 7px; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .marquee { height: 88px; } .mq-run { gap: 28px; padding-right: 28px; } .mq-item { font-size: 18px; } .marquee .float { width: 26px; height: 14px; } }

/* ---------- X: comparison board ---------- */
.hd { display: grid; gap: 16px; max-width: 760px; }
.cubi--x { right: -26px; width: 40px; }
.board { width: 100%; border-collapse: collapse; }
.board thead { display: none; }
.board tr { display: grid; gap: 8px; padding: 16px; margin-bottom: 12px; background: var(--white); border: 1.5px solid var(--ink); }
.board th[scope="row"] { text-align: left; font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; }
.board th a { text-decoration: none; }
.board th a:hover { text-decoration: underline; }
.board td { font-size: 14px; line-height: 1.45; }
.board td::before { content: attr(data-l) ": "; }
@media (min-width: 900px) {
  .cubi--x { right: -40px; width: 190px; }
  .board { width: calc(100% - 150px); table-layout: fixed; border: 2px solid var(--ink); background: var(--white); box-shadow: 0 12px 30px oklch(0.28 0.06 245 / 0.14); }
  .board thead { display: table-header-group; }
  .board thead th { background: var(--ink); color: var(--white); text-align: left; padding: 16px 18px; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
  .board thead th:nth-child(1) { width: 20%; } .board thead th:nth-child(2) { width: 12%; } .board thead th:nth-child(3) { width: 25%; }
  .board thead th:nth-child(4) { width: 16%; } .board thead th:nth-child(5) { width: 14%; } .board thead th:nth-child(6) { width: 13%; }
  .board tr { display: table-row; padding: 0; margin: 0; border: 0; }
  .board tbody tr { border-bottom: 1px solid oklch(0.28 0.06 245 / 0.15); }
  .board tbody tr:nth-child(even) { background: var(--tile); }
  .board th[scope="row"], .board td { display: table-cell; padding: 18px; vertical-align: top; font-size: 15px; line-height: 1.45; }
  .board th[scope="row"] { font-family: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; }
  .board td::before { content: none; }
}

/* ---------- N: update log ---------- */
.n-row { gap: 24px !important; }
.log li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid oklch(0.28 0.06 245 / 0.3); }
.log .small { color: var(--ink); }
.log .p { font-size: 15px; }
.n-buoy { left: -90px; bottom: -70px; width: 300px; height: 300px; rotate: -18deg; }
@media (min-width: 900px) {
  .n-row { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; gap: 80px !important; }
  .log li { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
  .log .p { font-size: 17px; }
}

/* ---------- A: about ---------- */
.a-h { max-width: 820px; }
.p--a { font-size: 18px; line-height: 1.5; max-width: 780px; }
.a-stage { right: 54px; bottom: -2px; width: 566px; height: 524px; opacity: 0.4; }
.a-buoy { right: -40px; top: -40px; width: 110px; height: 110px; opacity: 0.25; rotate: -20deg; }
@media (min-width: 900px) { .p--a { font-size: 24px; } .a-buoy { right: 440px; top: 70px; width: 180px; height: 180px; } .a-lane { opacity: 0.06; } }

/* ---------- F: questions ---------- */
.f-row { gap: 24px !important; }
.q { padding: 22px 0; border-bottom: 1px solid oklch(0.28 0.06 245 / 0.35); }
.q:first-child { border-top: 1px solid oklch(0.28 0.06 245 / 0.35); }
.q summary { display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; }
.q summary::-webkit-details-marker { display: none; }
.q-q { flex: 1; font-weight: 700; font-size: 16px; line-height: 1.4; }
.q-i { position: relative; width: 22px; height: 22px; flex: none; }
.q-i::before, .q-i::after { content: ""; position: absolute; background: var(--ink); }
.q-i::before { left: 0; right: 0; top: 10px; height: 2.5px; }
.q-i::after { top: 0; bottom: 0; left: 9.75px; width: 2.5px; }
.q[open] .q-i::after { display: none; }
.q-a { margin-top: 12px; font-size: 15px; }
.f-ladder { left: 41px; bottom: -22px; width: 259px; height: 428px; opacity: 0.9; }
@media (min-width: 900px) { .f-row { grid-template-columns: minmax(0, 380px) minmax(0, 1fr) !important; gap: 80px !important; } .q-q { font-size: 19px; } .q-a { font-size: 17px; } }

/* ---------- K: the notice card on the cubicle doors ---------- */
.notice { display: grid; gap: 20px; width: 100%; max-width: 780px; padding: 28px 22px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 16px 36px oklch(0.28 0.06 245 / 0.25); }
.h--notice { font-size: clamp(22px, 1.4vw + 16px, 32px); }
.reasons { display: grid; gap: 10px; }
.reasons li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.n-mail { font-weight: 700; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.n-mail:hover { color: var(--deep); }
@media (min-width: 900px) { .notice { padding: 48px 56px; } .n-mail { font-size: 26px; } }

/* ---------- footer: a stack of cubicle tags ---------- */
.footer { position: relative; overflow: hidden; background: var(--deep); padding: 48px var(--pad) 28px; }
.footer::before { content: ""; position: absolute; inset: 0; background: var(--caustics) repeat; opacity: 0.12; pointer-events: none; }
.footer > .in { display: grid; gap: 32px; }
.stack { display: grid; }
.tag { position: relative; display: grid; gap: 14px; align-content: start; padding: 22px 24px 26px; border-radius: 3px; box-shadow: 0 10px 24px oklch(0.28 0.06 245 / 0.28); rotate: var(--r); }
.tag + .tag { margin-top: -14px; }
.tag--white { background: var(--white); } .tag--sand { background: var(--sand); } .tag--pool-hi { background: var(--pool-hi); } .tag--coral { background: var(--coral); }
.tag-top { display: flex; justify-content: space-between; align-items: center; }
.tag-top .small { font-size: 11px; color: var(--ink); }
.tag-hole { width: 16px; height: 16px; border-radius: 50%; background: var(--deep); }
.f-links { display: grid; gap: 8px; }
.f-links a, .linkish { font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; text-align: left; }
.f-links a:hover, .linkish:hover { color: var(--deep); }
.f-mail { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.f-base { display: grid; gap: 12px; font-size: 14px; color: var(--white); }
@media (min-width: 900px) {
  .footer { padding: 88px var(--pad) 40px; }
  .footer > .in { gap: 56px; }
  .stack { display: flex; align-items: flex-start; }
  .tag { flex: 0 0 calc((100% + 54px) / 4); min-width: 0; padding: 30px 36px 36px; }
  .tag + .tag { margin: 0 0 0 -18px; }
  .tag .logo-t { font-size: 13px; letter-spacing: 0.12em; }
  .f-base { display: flex; justify-content: space-between; gap: 24px; }
  .f-base p:last-child { max-width: 640px; text-align: right; }
}

/* ---------- title bands (games, about, legal) and the game head ---------- */
.band { position: relative; overflow: hidden; padding: 24px var(--pad) 44px; }
.band > .in { display: grid; gap: 18px; }
.band .obj[style*="position:absolute"] { opacity: 1; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--ink-soft); }
.crumbs li + li::before { content: "›"; margin-right: 10px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .band { padding: 40px var(--pad) 72px; } .band > .in { gap: 28px; } }
.band--guide { padding-top: 22px; padding-bottom: 36px; }
.g-row { display: grid !important; gap: 22px !important; }
.g-text { display: grid; gap: 20px; align-content: start; justify-items: start; }
.g-cover { box-shadow: 0 18px 40px oklch(0.28 0.06 245 / 0.25); }
.g-cover .cover { width: 100%; aspect-ratio: 1; object-fit: cover; }
.g-ladder { right: 420px; bottom: -12px; width: 185px; height: 308px; filter: drop-shadow(12px 16px 8px oklch(0.28 0.06 245 / 0.2)); }
@media (min-width: 900px) {
  .band--guide { padding: 36px var(--pad) 64px; }
  .g-row { grid-template-columns: minmax(0, 700px) 400px; justify-content: space-between; gap: 64px !important; }
}
.panel--cat { padding-top: 64px; }
.cubi--gen { right: -10px; width: 30px; }
.gcards { display: grid; gap: 14px; }
.gcard { display: grid; gap: 10px; align-content: start; padding: 22px; background: var(--white); border: 1.5px solid var(--ink); }
.gcard ul { display: grid; gap: 8px; }
@media (min-width: 900px) { .cubi--gen { right: -30px; width: 120px; } .gcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-right: 72px; } }

/* ---------- game page: tabs ---------- */
.tabbar { background: var(--white); border-bottom: 2px solid var(--ink); padding: 10px var(--pad); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: var(--inner); margin-inline: auto; }
.tabs [role="tab"] { padding: 12px; background: var(--white); border: 1px solid oklch(0.28 0.06 245 / 0.25); font-family: var(--disp); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.tabs [role="tab"]:hover { background: var(--pool-hi); }
.tabs [role="tab"][aria-selected="true"]:hover { background: var(--deep); }
@media (min-width: 900px) {
  .tabbar { padding: 0 var(--pad); }
  .tabs { display: flex; gap: 8px; }
  .tabs [role="tab"] { padding: 18px 26px; border: 0; font-size: 12px; }
}
.panels { position: relative; overflow: hidden; padding: 36px var(--pad) 48px; }
.p-row { display: grid; gap: 36px; }
.p-col { display: grid; gap: 36px; min-width: 0; }
.tp { display: grid; gap: 16px; align-content: start; }
.tp[hidden] { display: none; }
.h--gap { margin-top: 20px; }
.weigh { display: grid; gap: 10px; }
.weigh li { display: flex; gap: 12px; }
.weigh .float { width: 16px; height: 9px; margin-top: 9px; }
.weigh .p { font-size: 16px; }
.keys { border: 1.5px solid var(--ink); background: var(--white); }
.k { display: grid; gap: 8px; padding: 14px 18px; }
.k + .k { border-top: 1px solid oklch(0.28 0.06 245 / 0.2); }
.k kbd { width: fit-content; padding: 6px 10px; background: var(--sand); border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
.k .p { font-size: 16px; }
.tips { display: grid; gap: 14px; }
.tips li { display: flex; gap: 14px; }
.tip-mark { position: static; width: 22px; height: 22px; flex: none; margin-top: 3px; }
.gq { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid oklch(0.28 0.06 245 / 0.3); }
.gq h3 { font-weight: 700; font-size: 17px; line-height: 1.35; }
.gq .p { font-size: 16px; }
.g-side { display: grid; gap: 28px; align-content: start; }
.fboard { background: var(--white); border: 2px solid var(--ink); box-shadow: 0 12px 30px oklch(0.28 0.06 245 / 0.14); }
.fb-h { padding: 16px 22px; background: var(--ink); color: var(--white); }
.fboard dl > div { display: grid; gap: 4px; padding: 14px 22px; }
.fboard dl > div:nth-child(even) { background: var(--tile); }
.fboard dt { font-size: 10px; }
.fboard dd { font-size: 15px; line-height: 1.45; }
.where { display: grid; gap: 12px; padding: 24px 22px; background: var(--sand); border: 1px solid oklch(0.28 0.06 245 / 0.3); }
.similar { display: grid; gap: 12px; }
.similar li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid oklch(0.28 0.06 245 / 0.2); }
.similar img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.similar li > div { display: grid; gap: 2px; }
.p-stage { right: 46px; bottom: 38px; width: 675px; height: 624px; opacity: 0.3; }
.p-buoy { right: 202px; bottom: 1000px; width: 200px; height: 200px; opacity: 0.3; rotate: -14deg; }
.cubi--p { right: -70px; width: 140px; }
@media (min-width: 900px) {
  .panels { padding: 72px var(--pad) 88px; }
  .p-row { grid-template-columns: minmax(0, 720px) minmax(300px, 1fr); gap: 72px; }
  .p-col { gap: 56px; }
  .k { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; }
  .k kbd { width: 100%; }
}

/* ---------- about ---------- */
.panel--ab { padding-top: 44px; padding-bottom: 44px; }
.ab-row { gap: 18px !important; }
.ab-b { display: grid; gap: 16px; max-width: 720px; }
.ab-ladder { right: -39px; bottom: -32px; width: 160px; height: 268px; }
.ab-buoy { right: -110px; top: -60px; width: 200px; height: 200px; opacity: 0.8; rotate: -22deg; }
.cubi--ab { right: -12px; width: 30px; }
.notice--about { max-width: 860px; gap: 18px; }
.c-rows { border: 1.5px solid var(--ink); }
.c-rows > div { display: grid; gap: 4px; padding: 14px 18px; }
.c-rows > div:nth-child(even) { background: var(--tile); }
.c-rows dd { font-size: 16px; overflow-wrap: anywhere; }
.c-rows > div:first-child dd { font-weight: 700; }
@media (min-width: 900px) {
  .panel--ab { padding-top: 80px; padding-bottom: 80px; }
  .ab-row { grid-template-columns: minmax(0, 400px) minmax(0, 720px) !important; gap: 80px !important; }
  .cubi--ab { right: -40px; width: 140px; }
  .notice--about { padding: 44px 52px; }
  .c-rows > div { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: baseline; }
}

/* ---------- legal ---------- */
.legal { position: relative; overflow: hidden; background: var(--white); padding: 36px var(--pad) 48px; }
.legal > .in { display: grid; gap: 28px; }
.lg { display: grid; gap: 12px; max-width: 720px; padding-bottom: 20px; border-bottom: 1px solid oklch(0.28 0.06 245 / 0.18); }
.lg .p { font-size: 15px; }
.l-stage { right: 140px; top: 118px; width: 544px; height: 504px; opacity: 0.35; }
.l-buoy { right: 270px; bottom: 300px; width: 200px; height: 200px; opacity: 0.4; rotate: 16deg; }
.cubi--l { right: -16px; width: 30px; }
@media (min-width: 900px) { .legal { padding: 72px var(--pad) 96px; } .legal > .in { gap: 40px; } .lg { padding-bottom: 28px; } .lg .p { font-size: 17px; } .cubi--l { right: -40px; width: 180px; } }

/* ---------- cookie ---------- */
.cookie { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 500px; margin-left: auto; display: grid; gap: 16px; padding: 24px 22px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 18px 40px oklch(0.28 0.06 245 / 0.25); }
.cookie[hidden] { display: none; }
.ck-top { display: flex; align-items: center; gap: 14px; }
.ck-mark { position: static; width: 40px; height: 40px; flex: none; }
.h--ck { font-size: 17px; letter-spacing: 0.01em; }
.ck-acts { display: flex; gap: 12px; }
.ck-acts .btn { flex: 1; }
.ck-manage { display: grid; gap: 10px; padding: 12px; background: var(--tile); border: 1px solid var(--grout); }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--ink); }
@media (min-width: 900px) { .cookie { right: 24px; bottom: 24px; left: auto; width: 500px; padding: 32px; } .h--ck { font-size: 20px; } }

/* ---------- reduced motion (Figma notes): lines static, marquee stopped, tile hover changes only the block colour and the shadow ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover .c-well .cover, .card:focus-within .c-well .cover { top: -14%; }
  .card:hover .c-water, .card:focus-within .c-water { opacity: 0; }
}

.f-social { display: flex; gap: 10px; margin-top: 12px; }
.f-soc { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); transition: background-color var(--hover), color var(--hover); }
.f-soc:hover { background: var(--ink); color: var(--white); }