/*
 * Gubbos web design system (ADR 0034) — the game's "candy pop" UI (ADR 0019) for the web.
 * Tokens mirror client/Assets/PassIt/Resources/UI/PassItStyles.uss; fonts are the game's (SIL OFL, fonts/*-OFL.txt).
 * Living style guide: /brand. Components are prefixed g-; pages add their own layout on top.
 */

/* ---------- Fonts ---------- */
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url("fonts/Baloo2-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("fonts/Nunito-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("fonts/Nunito-Black.woff2") format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-display: swap; src: url("fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Jua"; font-weight: 400; font-display: swap; src: url("fonts/Jua-Regular.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* ink & surfaces */
  --g-ink: #2A1B4D;
  --g-ink-soft: #5B4E8C;
  --g-ink-faint: #A496C4;
  --g-white: #FFFFFF;
  --g-lav: #EFEAFF;
  --g-lav-lip: #D3C6FF;
  /* the world behind everything: violet → blue, like the game's stage */
  --g-world-top: #9A56FF;
  --g-world-bottom: #3F5AFF;
  --g-night: #1E0C50;
  /* action colours, each with a darker lip */
  --g-violet: #7B4DFF;  --g-violet-lip: #5328D6;
  --g-orange: #FF7A2F;  --g-orange-lip: #CF4A10;
  --g-mint: #1FD38A;    --g-mint-lip: #0C9A5E;
  --g-sun: #FFD23F;     --g-sun-lip: #E39800;   --g-sun-ink: #6B3A00;
  --g-blue: #3FA9FF;    --g-blue-lip: #1E6ED6;
  --g-pink: #FF4F8B;    --g-pink-lip: #C42462;
  --g-red: #FF4757;     --g-red-lip: #BD2336;
  /* rarity — always shown with the rarity word, never colour alone */
  --g-common: #2FCB7E;
  --g-uncommon: #3FA9FF;
  --g-rare: #B45BFF;
  --g-anomaly: #FF4F8B;

  /* type */
  --g-font-display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
  --g-font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-text-xs: 13px;
  --g-text-sm: 15px;
  --g-text-md: 17px;
  --g-text-lg: 20px;
  --g-text-xl: clamp(26px, 4vw, 34px);
  --g-text-2xl: clamp(34px, 6vw, 56px);
  --g-text-hero: clamp(44px, 9.5vw, 112px);

  /* shape */
  --g-radius-sm: 12px;
  --g-radius-md: 20px;
  --g-radius-lg: 28px;
  --g-radius-xl: 40px;
  --g-radius-pill: 999px;
  --g-lip: 6px;
  --g-outline: 3px;

  /* depth */
  --g-shadow-card: 0 8px 0 var(--g-lav-lip), 0 18px 40px rgba(30, 12, 80, .28);
  --g-shadow-float: 0 18px 40px rgba(30, 12, 80, .35);
  --g-shadow-title: 0 6px 0 var(--g-ink);

  /* space */
  --g-space-1: 4px;
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-5: 24px;
  --g-space-6: 32px;
  --g-space-7: 48px;
  --g-space-8: 72px;
  --g-gutter: 16px;
  --g-max: 1180px;

  /* motion: everything springs (ease-out-back), nothing drifts */
  --g-spring: cubic-bezier(.34, 1.56, .64, 1);
  --g-ease: cubic-bezier(.22, .9, .3, 1);
}
:lang(ja) { --g-font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Baloo 2", sans-serif; }
:lang(ko) { --g-font-display: "Jua", "Baloo 2", "Apple SD Gothic Neo", sans-serif; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--g-font-body); font-weight: 700; font-size: var(--g-text-md); line-height: 1.5;
       color: var(--g-ink); background: var(--g-world-bottom); overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--g-violet-lip); }
:focus-visible { outline: 4px solid var(--g-sun); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--g-font-display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: .005em; }
p { margin: 0; }
:lang(ja) { line-break: strict; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }

.g-container { width: 100%; max-width: var(--g-max); margin: 0 auto; padding: 0 var(--g-gutter); }
.g-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--g-sun); color: var(--g-ink);
          padding: 10px 16px; border-radius: var(--g-radius-pill); font-weight: 900; text-decoration: none; }
.g-skip:focus { top: 12px; }

/* ---------- World (background) ---------- */
.g-world { position: relative; color: var(--g-white);
           background:
             radial-gradient(circle, rgba(255,255,255,.10) 0 7px, transparent 8px) 0 0 / 46px 46px,
             linear-gradient(180deg, var(--g-world-top), var(--g-world-bottom)); }
.g-world--night { background:
             radial-gradient(circle, rgba(255,255,255,.06) 0 6px, transparent 7px) 0 0 / 40px 40px,
             linear-gradient(180deg, #3A1C8F, var(--g-night)); }

/* ---------- Titles ---------- */
/* White fill, ink outline, hard ink drop — the game's title style. */
.g-title { font-family: var(--g-font-display); font-weight: 800; color: var(--g-white); font-size: var(--g-text-2xl);
           -webkit-text-stroke: calc(var(--g-outline) * 2) var(--g-ink); paint-order: stroke fill;
           text-shadow: var(--g-shadow-title); }
.g-title--sun { color: var(--g-sun); }
.g-title--mint { color: #8CFFC9; }
.g-title--pink { color: #FFB3CF; }
.g-title--sm { font-size: var(--g-text-xl); -webkit-text-stroke-width: 5px; text-shadow: 0 4px 0 var(--g-ink); }
.g-mark { position: relative; white-space: nowrap; z-index: 0; }
.g-mark::after { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; bottom: .06em; height: .38em;
                 background: var(--g-pink); border-radius: var(--g-radius-pill); transform: rotate(-1.5deg); }
.g-eyebrow { font-family: var(--g-font-display); font-size: var(--g-text-lg); color: var(--g-sun); letter-spacing: .04em;
             text-shadow: 0 2px 0 var(--g-ink); }

/* The logo: GUBBOS big and yellow, SWAP smaller beneath; letters pop in one by one. */
.g-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: .86; text-decoration: none;
          font-family: "Baloo 2", var(--g-font-display); font-weight: 800; }
.g-logo__word { display: flex; color: var(--g-sun); font-size: var(--g-logo-size, 44px);
                -webkit-text-stroke: calc(var(--g-logo-size, 44px) * .12) var(--g-ink); paint-order: stroke fill;
                text-shadow: 0 calc(var(--g-logo-size, 44px) * .1) 0 var(--g-ink); }
.g-logo__action { color: var(--g-white); font-size: calc(var(--g-logo-size, 44px) * .5); letter-spacing: .08em;
                  -webkit-text-stroke: calc(var(--g-logo-size, 44px) * .07) var(--g-ink); paint-order: stroke fill;
                  text-shadow: 0 calc(var(--g-logo-size, 44px) * .05) 0 var(--g-ink); }
.g-logo__word span { display: inline-block; animation: g-letter .6s var(--g-spring) both; }
.g-logo__word span:nth-child(odd) { --tilt: -4deg; } .g-logo__word span:nth-child(even) { --tilt: 3deg; }
.g-logo__word span:nth-child(1) { animation-delay: .05s } .g-logo__word span:nth-child(2) { animation-delay: .12s }
.g-logo__word span:nth-child(3) { animation-delay: .19s } .g-logo__word span:nth-child(4) { animation-delay: .26s }
.g-logo__word span:nth-child(5) { animation-delay: .33s } .g-logo__word span:nth-child(6) { animation-delay: .4s }
.g-logo--small { --g-logo-size: 30px; }
.g-logo--small .g-logo__word span { animation: none; }
@keyframes g-letter { from { transform: translateY(40%) scale(.3) rotate(var(--tilt)); opacity: 0 }
                      to { transform: translateY(0) scale(1) rotate(var(--tilt)); opacity: 1 } }

/* ---------- Buttons ---------- */
/* Face + gloss + darker lip; pressing collapses the lip. Colour says what it does. */
.g-btn { --face: var(--g-orange); --lip: var(--g-orange-lip); --text: var(--g-white);
         position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
         min-height: 52px; padding: 12px 26px; border: 0; border-radius: var(--g-radius-pill);
         font: 800 var(--g-text-lg)/1.1 var(--g-font-display); color: var(--text); text-decoration: none; text-align: center;
         background: var(--face); box-shadow: 0 var(--g-lip) 0 var(--lip), 0 12px 24px rgba(30, 12, 80, .3);
         cursor: pointer; transition: transform .12s var(--g-ease), box-shadow .12s var(--g-ease);
         text-shadow: 0 2px 0 rgba(0, 0, 0, .18); isolation: isolate; }
.g-btn::before { content: ""; position: absolute; inset: 4px 10px 50%; border-radius: var(--g-radius-pill) var(--g-radius-pill) 14px 14px;
                 background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.08)); z-index: -1; pointer-events: none; }
.g-btn:hover { transform: translateY(-2px) scale(1.02); }
.g-btn:active { transform: translateY(var(--g-lip)); box-shadow: 0 0 0 var(--lip), 0 4px 10px rgba(30, 12, 80, .25); }
.g-btn img, .g-btn svg { width: 30px; height: 30px; flex: none; }
.g-btn--mint { --face: var(--g-mint); --lip: var(--g-mint-lip); }
.g-btn--sun { --face: var(--g-sun); --lip: var(--g-sun-lip); --text: var(--g-sun-ink); text-shadow: none; }
.g-btn--blue { --face: var(--g-blue); --lip: var(--g-blue-lip); }
.g-btn--violet { --face: var(--g-violet); --lip: var(--g-violet-lip); }
.g-btn--pink { --face: var(--g-pink); --lip: var(--g-pink-lip); }
.g-btn--danger { --face: var(--g-red); --lip: var(--g-red-lip); }
.g-btn--white { --face: var(--g-white); --lip: var(--g-lav-lip); --text: var(--g-ink); text-shadow: none; }
.g-btn--small { min-height: 40px; padding: 8px 18px; font-size: var(--g-text-md); --g-lip: 4px; }
.g-btn--hero { min-height: 68px; padding: 16px 34px; font-size: 24px; --g-lip: 8px; }
.g-btn--pulse { animation: g-pulse 1.8s ease-in-out infinite; }
.g-btn[aria-disabled="true"] { --face: #E9E4F3; --lip: #CFC6E0; --text: var(--g-ink-soft); cursor: default; text-shadow: none; }
.g-btn[aria-disabled="true"]:hover { transform: none; }
@keyframes g-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.05) } }

/* Store button: big two-line pill (small caption + store name). */
.g-store { flex-direction: row; text-align: left; gap: 12px; }
.g-store small { display: block; font-size: 13px; opacity: .85; letter-spacing: .02em; }
.g-store b { display: block; font-weight: 800; }
/* Not in the store yet: a dashed "ticket" that still looks part of the party. */
.g-store[aria-disabled="true"] { --face: rgba(255, 255, 255, .16); --lip: rgba(42, 27, 77, .25); --text: var(--g-white);
                                 border: 3px dashed rgba(255, 255, 255, .75); text-shadow: 0 2px 0 rgba(42, 27, 77, .35); }
.g-store[aria-disabled="true"]::before { display: none; }

/* ---------- Cards ---------- */
.g-card { background: var(--g-white); color: var(--g-ink); border-radius: var(--g-radius-lg); padding: var(--g-space-5);
          box-shadow: var(--g-shadow-card); }
.g-card--lav { background: var(--g-lav); box-shadow: 0 8px 0 var(--g-lav-lip); }
.g-card--tilt-l { transform: rotate(-1.5deg); } .g-card--tilt-r { transform: rotate(1.5deg); }

/* ---------- Chips, stickers, badges ---------- */
.g-chip { --c: var(--g-violet); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--g-radius-pill);
          background: var(--c); color: var(--g-white); font: 800 var(--g-text-sm)/1.3 var(--g-font-display); letter-spacing: .03em;
          box-shadow: 0 3px 0 rgba(42, 27, 77, .35); white-space: nowrap; }
.g-chip--common { --c: var(--g-common); } .g-chip--uncommon { --c: var(--g-uncommon); }
.g-chip--rare { --c: var(--g-rare); } .g-chip--anomaly { --c: var(--g-anomaly); }
.g-chip--sun { --c: var(--g-sun); color: var(--g-sun-ink); }
.g-chip--ink { --c: var(--g-ink); }

/* Sticker: a slapped-on label with a white die-cut edge. */
.g-sticker { --c: var(--g-pink); display: inline-block; padding: 8px 16px; border-radius: var(--g-radius-md);
             background: var(--c); color: var(--g-white); font: 800 var(--g-text-lg)/1.1 var(--g-font-display);
             border: 4px solid var(--g-white); box-shadow: 0 6px 0 rgba(42, 27, 77, .35), 0 10px 22px rgba(30, 12, 80, .3);
             transform: rotate(var(--rot, -6deg)); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); white-space: nowrap; }
.g-sticker--sun { --c: var(--g-sun); color: var(--g-sun-ink); text-shadow: none; }
.g-sticker--mint { --c: var(--g-mint); } .g-sticker--blue { --c: var(--g-blue); } .g-sticker--violet { --c: var(--g-violet); }

/* Burst: a starburst badge for NEW! / FREE. */
.g-burst { --c: var(--g-sun); display: grid; place-items: center; width: var(--size, 110px); height: var(--size, 110px); flex: none; align-self: center; padding: calc(var(--size, 110px) * .18);
           background: var(--c); color: var(--g-sun-ink); text-align: center; font: 800 calc(var(--size, 110px) * .2)/1 var(--g-font-display);
           clip-path: polygon(50% 0, 61% 13%, 77% 6%, 80% 23%, 97% 25%, 90% 41%, 100% 54%, 86% 64%, 90% 81%, 73% 82%, 65% 98%, 50% 88%, 35% 98%, 27% 82%, 10% 81%, 14% 64%, 0 54%, 10% 41%, 3% 25%, 20% 23%, 23% 6%, 39% 13%);
           filter: drop-shadow(0 5px 0 var(--g-ink)); animation: g-spin-wobble 3s ease-in-out infinite; }
.g-burst--pink { --c: var(--g-pink); color: var(--g-white); }
@keyframes g-spin-wobble { 0%, 100% { transform: rotate(-8deg) scale(1) } 50% { transform: rotate(8deg) scale(1.06) } }

/* Speech bubble with a tail (bottom-left by default). */
.g-bubble { position: relative; display: inline-block; padding: 10px 18px; background: var(--g-white); color: var(--g-ink);
            border-radius: var(--g-radius-md); font: 800 var(--g-text-md)/1.25 var(--g-font-display);
            box-shadow: 0 5px 0 var(--g-lav-lip), 0 10px 22px rgba(30, 12, 80, .25); }
.g-bubble::after { content: ""; position: absolute; left: 22px; bottom: -14px; width: 24px; height: 18px; background: var(--g-white);
                   clip-path: polygon(0 0, 100% 0, 15% 100%); }
.g-bubble--right::after { left: auto; right: 22px; clip-path: polygon(0 0, 100% 0, 85% 100%); }

/* POINT 01 — numbered section label. */
.g-point { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 18px; border-radius: var(--g-radius-pill);
           background: var(--g-ink); color: var(--g-sun); font: 800 var(--g-text-md)/1 var(--g-font-display); letter-spacing: .12em;
           box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.g-point b { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: var(--g-radius-pill);
             background: var(--g-sun); color: var(--g-ink); letter-spacing: 0; font-size: 20px; }

/* Numbered step bubble (1 2 3). */
.g-step { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--g-sun);
          color: var(--g-ink); font: 800 22px/1 var(--g-font-display); box-shadow: 0 4px 0 var(--g-sun-lip); }

/* ---------- Effects ---------- */
/* Slowly spinning sunburst rays, as behind reveals in the game. */
.g-rays { position: absolute; inset: -50%; pointer-events: none; opacity: .5;
          background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 7deg, transparent 7deg 18deg);
          -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%);
          animation: g-rotate 60s linear infinite; }
@keyframes g-rotate { to { transform: rotate(360deg) } }

/* Twinkling four-point sparkle. */
.g-sparkle { position: absolute; width: var(--s, 18px); height: var(--s, 18px); background: var(--c, #FFF7C2); pointer-events: none;
             clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
             animation: g-twinkle 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes g-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0) } 50% { opacity: 1; transform: scale(1) rotate(45deg) } }

/* Floating bob for critters and stickers. */
.g-float { animation: g-float var(--t, 4s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes g-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)) } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) * -1)) } }

/* Wobbling egg, drawn in CSS (base + spots colour via --egg / --spot). */
.g-egg { display: block; flex: none; align-self: center; position: relative; width: var(--w, 130px); aspect-ratio: 13 / 17; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
         background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.8) 0 8%, transparent 9%),
                     radial-gradient(circle at 30% 50%, var(--spot, #FF5F7E) 0 7%, transparent 7.5%),
                     radial-gradient(circle at 66% 28%, var(--spot, #FF5F7E) 0 6%, transparent 6.5%),
                     radial-gradient(circle at 62% 70%, var(--spot, #FF5F7E) 0 10%, transparent 10.5%),
                     radial-gradient(circle at 36% 80%, var(--spot, #FF5F7E) 0 5%, transparent 5.5%),
                     var(--egg, #5FE3E0);
         box-shadow: inset -14px -18px 0 rgba(0,0,0,.13), 0 18px 0 -6px rgba(30, 12, 80, .25);
         transform-origin: 50% 90%; animation: g-wobble 2.4s ease-in-out infinite; }
@keyframes g-wobble { 0%, 60%, 100% { transform: rotate(0) } 66% { transform: rotate(-9deg) } 72% { transform: rotate(8deg) }
                      78% { transform: rotate(-5deg) } 84% { transform: rotate(3deg) } }

/* Marquee ticker: duplicate the track content once; it scrolls by half its width. */
.g-marquee { overflow: hidden; background: var(--g-ink); color: var(--g-white); padding: 12px 0; border-block: 4px solid var(--g-sun);
             transform: rotate(var(--rot, -2deg)); margin-inline: -20px; }
.g-marquee__track { display: flex; width: max-content; gap: 28px; animation: g-marquee var(--t, 40s) linear infinite; }
.g-marquee--reverse .g-marquee__track { animation-direction: reverse; }
.g-marquee__item { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--g-font-display); white-space: nowrap; }
.g-marquee__item img { width: 40px; height: 40px; }
.g-marquee__item::after { content: "★"; color: var(--g-sun); margin-left: 18px; }
@keyframes g-marquee { to { transform: translateX(-50%) } }

/* Phone frame around a screenshot. */
.g-phone { position: relative; width: var(--w, 260px); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 40px; flex: none;
           background: linear-gradient(145deg, #3B2A6B, var(--g-ink)); box-shadow: 0 0 0 3px #4E3A88 inset, var(--g-shadow-float); }
.g-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; background: var(--g-violet); }
.g-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 22%; height: 16px; margin-left: -11%; z-index: 1;
                   border-radius: var(--g-radius-pill); background: var(--g-ink); }

/* Language switcher pills. */
.g-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.g-langs a { padding: 4px 12px; border-radius: var(--g-radius-pill); color: inherit; text-decoration: none; font-size: var(--g-text-sm);
             background: rgba(255,255,255,.14); }
.g-langs a:hover { background: rgba(255,255,255,.3); }
.g-langs__short { display: none; }
@media (max-width: 640px) { .g-header .g-langs__long { display: none; } .g-header .g-langs__short { display: inline; } .g-header .g-langs a { padding: 4px 8px; } }
.g-langs a[aria-current] { background: var(--g-sun); color: var(--g-ink); box-shadow: 0 3px 0 var(--g-sun-lip); }

/* Scroll reveal (JS adds .is-in; without JS everything is visible). */
.g-js .g-reveal { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .6s var(--g-ease), transform .8s var(--g-spring); }
.g-js .g-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Document (legal pages) ---------- */
.g-doc { max-width: 780px; margin: 0 auto; }
.g-doc .g-card { padding: clamp(22px, 5vw, 44px); overflow-wrap: anywhere; }
.g-doc .g-card h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin: 32px 0 10px; color: var(--g-ink); }
.g-doc .g-card h2::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--g-violet); box-shadow: 0 3px 0 var(--g-violet-lip); }
.g-doc .g-card p, .g-doc .g-card li { font-weight: 700; color: #3F3366; line-height: 1.6; }
.g-doc .g-card p + p { margin-top: 12px; }
.g-doc .g-card ul, .g-doc .g-card ol { padding-left: 22px; margin: 8px 0; }
.g-doc .g-card li { margin: 6px 0; }
.g-doc .g-card li::marker { color: var(--g-violet); }
.g-doc .g-card a { color: var(--g-violet-lip); font-weight: 900; }
.g-doc .g-updated { display: inline-block; margin: 10px 0 20px; }

.g-doc__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px !important; padding-top: 20px; border-top: 3px dashed var(--g-lav-lip); }
.g-doc .g-card a.g-btn { color: var(--text); }

/* Page with a document: a short gradient band with the title, the card overlapping it. */
.g-doc-page { padding: 96px var(--g-gutter) 80px; min-height: 70vh; }
.g-doc-page__hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 140px 26px 4px; }
.g-doc-page__hero .g-title { font-size: clamp(32px, 6vw, 52px); }
.g-doc-page__hero .g-chip a { color: inherit; text-decoration: none; }
.g-doc-page__hero .g-updated { margin: 0; }
.g-doc-page__critter { position: absolute; right: 0; bottom: -30px; width: 120px; z-index: 2; animation: g-float 4s ease-in-out infinite;
                       filter: drop-shadow(0 12px 12px rgba(30, 12, 80, .35)); }
.g-doc-page .g-card { position: relative; z-index: 1; }
@media (max-width: 640px) { .g-doc-page__hero { padding-right: 90px; } .g-doc-page__critter { width: 84px; bottom: -20px; } }

/* Forms */
.g-form { display: grid; gap: 14px; margin-top: 14px; justify-items: start; }
.g-form .g-field { width: 100%; }
.g-field { display: grid; gap: 6px; font-weight: 900; }
.g-input { font: 800 22px/1.2 var(--g-font-display); letter-spacing: .08em; text-transform: uppercase; padding: 12px 16px; width: 100%;
           border: 3px solid var(--g-lav-lip); border-radius: var(--g-radius-md); background: var(--g-lav); color: var(--g-ink); }
.g-input:focus { outline: none; border-color: var(--g-violet); background: var(--g-white); }
.g-check { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.g-check input { width: 24px; height: 24px; flex: none; margin-top: 1px; accent-color: var(--g-violet); }
.g-notice { border-radius: var(--g-radius-md); padding: 12px 16px; font-weight: 900; margin: 18px 0 0; border: 3px solid; }
.g-notice--ok { background: #DDF8EA; border-color: var(--g-mint); color: #0B5A37; }
.g-notice--error { background: #FFE3E6; border-color: var(--g-red); color: #7A1420; }
.g-notice--draft { background: #FFF4C7; border-color: var(--g-sun-lip); color: var(--g-sun-ink); }

/* ---------- Site chrome (header & footer shared by every page) ---------- */
.g-header { position: sticky; top: 0; z-index: 50; padding: 10px 0; color: var(--g-white); transition: background .3s, box-shadow .3s; }
.g-header.is-stuck, .g-header--solid { background: rgba(42, 27, 77, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
                                       box-shadow: 0 6px 24px rgba(20, 8, 60, .35); }
.g-header__row { display: flex; align-items: center; gap: 14px; }
.g-header .g-logo { flex: none; white-space: nowrap; }
.g-header__nav { display: flex; gap: 4px; margin-left: auto; }
.g-header__nav a { color: var(--g-white); text-decoration: none; font: 800 var(--g-text-md)/1 var(--g-font-display);
                   padding: 10px 12px; border-radius: var(--g-radius-pill); }
.g-header__nav a:hover { background: rgba(255,255,255,.16); }
.g-header .g-langs { margin-left: auto; }
.g-header__nav + .g-langs { margin-left: 8px; }
@media (max-width: 900px) { .g-header__nav { display: none; } }

.g-footer { background: var(--g-night); color: rgba(255,255,255,.75); padding: var(--g-space-7) 0 var(--g-space-6); font-size: var(--g-text-sm); }
.g-footer__row { display: flex; flex-wrap: wrap; gap: var(--g-space-5) var(--g-space-6); align-items: flex-start; justify-content: space-between; }
.g-footer p { max-width: 420px; margin-top: 12px; }
.g-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.g-footer a { color: var(--g-white); text-decoration: none; }
.g-footer a:hover { text-decoration: underline; }
.g-footer small { display: block; margin-top: var(--g-space-5); color: rgba(255,255,255,.5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .g-sparkle { opacity: .8; }
}