:root {
  --ink: #12304a;
  --ink-soft: #45647b;
  --sky-900: #0d6998;
  --sky-700: #168bbb;
  --sky-500: #37b8d3;
  --sky-100: #dff6fb;
  --sky-50: #effaff;
  --sea-700: #0b8c82;
  --sea-500: #22ad9e;
  --sea-100: #d9f5ef;
  --sand: #fff9ea;
  --coral: #ff8066;
  --gold: #e7a835;
  --line: #d7e7ee;
  --line-strong: #b8d6e2;
  --white: #ffffff;
  --shadow-sm: 0 8px 20px rgba(28, 106, 138, .08);
  --shadow: 0 18px 45px rgba(28, 106, 138, .12);
  --radius: 22px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f3b843; outline-offset: 3px; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.section-anchor { scroll-margin-top: 88px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; color: var(--ink); background: var(--white); border-radius: 8px; box-shadow: var(--shadow); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.top-note { padding: 7px 20px; color: #176374; background: #d7f5f0; font-size: 12px; font-weight: 700; letter-spacing: .01em; text-align: center; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(215, 231, 238, .9); backdrop-filter: blur(14px); }
.nav-shell { display: flex; align-items: center; gap: 28px; width: min(1210px, calc(100% - 40px)); min-height: 70px; margin: 0 auto; }
.brand { display: inline-flex; flex: 1 0 auto; align-items: center; gap: 10px; color: #173957; font-weight: 650; letter-spacing: -.02em; }
.brand strong { color: var(--sea-700); }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--white); background: linear-gradient(145deg, var(--sky-700), var(--sea-500)); border-radius: 12px; box-shadow: 0 5px 13px rgba(19, 152, 178, .26); font-size: 27px; font-weight: 800; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 23px; color: #3c5b70; font-size: 14px; font-weight: 650; }
.site-nav a { padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.site-nav a:hover { color: var(--sea-700); border-color: var(--sea-500); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 750; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { color: var(--white); background: linear-gradient(135deg, #139b9a, #1685bd); box-shadow: 0 8px 18px rgba(19, 140, 163, .2); }
.button-primary:hover { box-shadow: 0 12px 22px rgba(19, 140, 163, .28); }
.button-small { min-height: 39px; padding: 0 16px; font-size: 14px; }
.menu-toggle { display: none; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 11px; font-size: 14px; font-weight: 750; }
.hero { position: relative; overflow: hidden; padding: 76px 0 70px; background: linear-gradient(180deg, #f7fdff 0%, #e8f8fb 100%); border-bottom: 1px solid #d6eaf0; }
.hero::before { position: absolute; top: -280px; right: 6%; width: 580px; height: 580px; background: radial-gradient(circle, rgba(114, 211, 230, .34), rgba(114, 211, 230, 0) 67%); content: ""; }
.hero::after { position: absolute; right: -7%; bottom: -55px; left: -7%; height: 125px; background: radial-gradient(100% 90px at 35% 100%, transparent 63%, rgba(126, 215, 230, .25) 64%, rgba(126, 215, 230, .25) 69%, transparent 70%), radial-gradient(80% 100px at 75% 100%, transparent 60%, rgba(174, 239, 245, .8) 61%, rgba(174, 239, 245, .8) 69%, transparent 70%); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .7fr); gap: 64px; align-items: center; }
.hero-copy { max-width: 670px; }
.eyebrow { margin: 0 0 13px; color: var(--sea-700); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 740px; margin-bottom: 20px; color: #143855; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.055em; }
h2 { margin-bottom: 17px; color: #153b58; font-size: clamp(30px, 3.4vw, 45px); line-height: 1.1; letter-spacing: -.045em; }
h3 { color: #17405e; letter-spacing: -.025em; }
.hero-lead { max-width: 645px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 29px; }
.text-link { color: var(--sea-700); font-size: 14px; font-weight: 750; }
.text-link:hover { color: var(--sky-900); text-decoration: underline; text-underline-offset: 4px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 34px 0 0; color: #426275; font-size: 13px; list-style: none; }
.hero-points span { display: inline-grid; width: 17px; height: 17px; place-items: center; margin-right: 4px; color: var(--sea-700); background: var(--sea-100); border-radius: 50%; font-size: 11px; font-weight: 900; }
.mission-card { position: relative; overflow: hidden; min-height: 328px; padding: 31px; color: #1c4e65; background: rgba(255,255,255,.88); border: 1px solid rgba(183, 218, 228, .84); border-radius: 26px; box-shadow: var(--shadow); }
.mission-card-top { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.pulse-dot { width: 8px; height: 8px; background: var(--sea-500); border-radius: 50%; box-shadow: 0 0 0 5px rgba(34, 173, 158, .15); }
.mission-number { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 12px; color: #173d5b; font-size: 58px; font-weight: 780; letter-spacing: -.06em; line-height: 1; }
.mission-number small { color: #497186; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.progress-track { width: 100%; height: 8px; overflow: hidden; background: #ddecf2; border-radius: 99px; }
.progress-track.large { height: 10px; margin: 22px 0 18px; }
.progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--sea-500), var(--sky-500)); border-radius: inherit; transition: width .35s ease; }
.mission-card > p { max-width: 260px; margin: 15px 0 0; color: #557487; font-size: 13px; }
.mission-illustration { position: absolute; right: 4px; bottom: -13px; width: 230px; height: 145px; opacity: .9; }
.sun-ray { position: absolute; right: 61px; bottom: -59px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255, 213, 112, .55) 0 10%, rgba(255, 234, 173, .21) 11% 39%, transparent 40%); }
.little-fish { position: absolute; right: 64px; bottom: 45px; color: var(--sky-700); font-size: 68px; transform: rotate(-18deg); }
.bubble { position: absolute; border: 2px solid rgba(56, 175, 207, .38); border-radius: 50%; }
.b-one { right: 175px; bottom: 50px; width: 12px; height: 12px; }.b-two { right: 130px; bottom: 100px; width: 8px; height: 8px; }.b-three { right: 22px; bottom: 91px; width: 17px; height: 17px; }
.hero-art { position: absolute; border: 1px solid rgba(102, 196, 213, .2); border-radius: 50%; pointer-events: none; }.hero-art-left { left: -88px; bottom: 64px; width: 200px; height: 200px; }.hero-art-right { top: 47px; right: -86px; width: 170px; height: 170px; }
.game-section { padding: 80px 0; background: var(--white); }
.section-heading { max-width: 640px; margin-bottom: 38px; }.section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }.section-heading p:not(.eyebrow) { margin-bottom: 0; color: var(--ink-soft); }
.inline-heading { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 36px; }.inline-heading > div { flex: 0 0 47%; }.inline-heading > p { max-width: 430px; margin-bottom: 7px; color: var(--ink-soft); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(295px, .65fr); gap: 25px; align-items: stretch; }
.game-card, .session-card, .log-card { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.game-card { padding: 20px; border-radius: 24px; }
.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }.stat-card { min-width: 0; padding: 12px 13px; background: var(--sky-50); border: 1px solid #dbeef3; border-radius: 14px; }.stat-card span { display: block; overflow: hidden; color: #567486; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.stat-card strong { display: block; overflow: hidden; margin-top: 3px; color: #146c7c; font-size: 16px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.notice { margin: 0 0 14px; padding: 10px 13px; border-radius: 10px; font-size: 13px; font-weight: 650; }.notice-warning { color: #984231; background: #fff0eb; border: 1px solid #ffd5ca; }
.canvas-wrap { position: relative; overflow: hidden; aspect-ratio: 800 / 430; background: #e4f8fc; border: 1px solid #cae6ed; border-radius: 18px; }.canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.start-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 100%; color: #1b455e; background: rgba(240, 251, 253, .79); border: 0; cursor: pointer; transition: opacity .22s; }.start-overlay[hidden] { display: none; }.start-overlay:hover { background: rgba(239, 251, 253, .9); }.start-overlay strong { display: block; font-size: 18px; }.start-overlay small { display: block; max-width: 330px; margin-top: 5px; color: #587786; font-size: 13px; font-weight: 500; }.play-icon { display: grid; width: 56px; height: 56px; place-items: center; padding-left: 2px; color: var(--white); background: linear-gradient(135deg, var(--sea-500), var(--sky-700)); border-radius: 18px; box-shadow: 0 10px 20px rgba(21, 143, 171, .24); font-size: 21px; }
.control-panel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 15px; padding: 13px 14px; background: #f8fdff; border: 1px solid #deedf2; border-radius: 15px; }.cost-control { display: flex; align-items: center; gap: 10px; color: #4c6e80; font-size: 12px; font-weight: 750; }.segmented { display: flex; gap: 4px; }.cost-button { min-width: 31px; padding: 4px 7px; color: #496a7e; background: var(--white); border: 1px solid #cfe3ea; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800; }.cost-button.is-selected, .cost-button:hover { color: var(--white); background: var(--sea-700); border-color: var(--sea-700); }.keyboard-help { margin: 0; color: #5a7889; font-size: 12px; text-align: center; }.keyboard-help kbd { display: inline-block; padding: 1px 5px; color: #375b6e; background: #edf6f8; border: 1px solid #d1e4e9; border-bottom-width: 2px; border-radius: 4px; font-family: inherit; font-size: 11px; font-weight: 750; }.cast-button { justify-self: end; min-height: 40px; }
.touch-controls { display: none; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin-top: 10px; }.button-control { color: #356176; background: #f4fafc; border-color: #cfe3ea; }.button-control span { font-size: 12px; }
.side-stack { display: flex; flex-direction: column; gap: 20px; }.session-card, .log-card { border-radius: 21px; }.session-card { padding: 24px; background: linear-gradient(145deg, #f0fbff, #f9fffd); }.session-heading, .log-heading { display: flex; align-items: center; gap: 12px; }.icon-swatch { display: grid; width: 36px; height: 36px; place-items: center; color: var(--sea-700); background: var(--sea-100); border-radius: 11px; font-size: 24px; font-weight: 800; }.mini-label { margin: 0 0 2px; color: #5d7a89; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.session-heading h3, .log-heading h3 { margin: 0; font-size: 19px; }.small-copy { margin: 0; color: #587787; font-size: 13px; }.log-card { display: flex; flex: 1; flex-direction: column; min-height: 302px; padding: 22px; }.log-heading { justify-content: space-between; }.log-status { display: inline-flex; align-items: center; gap: 5px; color: #508092; font-size: 11px; font-weight: 750; }.log-status i { width: 7px; height: 7px; background: var(--sea-500); border-radius: 50%; }.simulation-log { display: flex; flex: 1; flex-direction: column; gap: 10px; max-height: 308px; padding: 15px; margin-top: 15px; overflow-y: auto; background: #f7fbfc; border: 1px solid #dfedf1; border-radius: 13px; color: #456979; font-size: 12px; }.simulation-log p { margin: 0; }.simulation-log time { margin-right: 5px; color: #7795a1; font-size: 11px; }.simulation-log .success { color: #15786f; }.simulation-log .highlight { color: #a26318; font-weight: 750; }.simulation-log .warning { color: #a8513d; }
.content-section { padding: 96px 0; }.two-column-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .65fr); gap: 100px; align-items: end; }.two-column-intro > div { max-width: 570px; }.section-lead { max-width: 520px; margin-bottom: 0; color: var(--ink-soft); font-size: 18px; }.side-copy { max-width: 510px; margin: 0 0 6px; color: var(--ink-soft); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-top: 44px; }.step-card { min-height: 224px; padding: 24px; background: #fbfeff; border: 1px solid #deedf2; border-radius: 18px; }.step-number { display: inline-block; margin-bottom: 42px; color: #177e87; font-size: 13px; font-weight: 850; letter-spacing: .08em; }.step-card h3 { margin-bottom: 8px; font-size: 18px; }.step-card p { margin-bottom: 0; color: #587787; font-size: 13px; }
.benefit-band { padding: 49px 0; background: linear-gradient(100deg, #1d8ea6, #239fa3); color: var(--white); }.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px; }.benefit-grid > div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.3); }.benefit-grid > div:first-child { padding-left: 0; border-left: 0; }.benefit-icon { display: grid; width: 31px; height: 31px; place-items: center; margin-bottom: 12px; color: #176b7b; background: #d5f5ef; border-radius: 10px; font-size: 19px; font-weight: 800; }.benefit-grid h3 { margin-bottom: 5px; color: var(--white); font-size: 16px; }.benefit-grid p { margin-bottom: 0; color: rgba(255,255,255,.82); font-size: 13px; }
.guide-section { padding: 97px 0; background: #f5fbfd; border-top: 1px solid #e2f0f4; border-bottom: 1px solid #e2f0f4; }.creature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 43px; }.creature-card { position: relative; overflow: hidden; min-height: 326px; padding: 19px 20px 19px; background: var(--white); border: 1px solid #dcecf1; border-radius: 18px; box-shadow: 0 7px 18px rgba(28,106,138,.055); }.creature-card .creature-art { position: relative; display: grid; height: 111px; place-items: center; margin: -19px -20px 18px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.38); }.creature-art::before, .creature-art::after { position: absolute; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; content: ""; }.creature-art::before { bottom: -48px; left: -20px; width: 160px; height: 84px; }.creature-art::after { right: -23px; bottom: -37px; width: 150px; height: 69px; }.creature-perch .creature-art { background: linear-gradient(135deg, #dcf9e8, #91dbbc); }.creature-tetra .creature-art { background: linear-gradient(135deg, #d8f8fb, #84d1e4); }.creature-ray .creature-art { background: linear-gradient(135deg, #d6effc, #9dbbe5); }.creature-leviathan .creature-art { background: linear-gradient(135deg, #fff5ce, #f4c762); }.fish-shape { position: relative; z-index: 1; width: 79px; height: 42px; background: currentColor; border-radius: 50% 58% 53% 50%; filter: drop-shadow(0 7px 6px rgba(20,77,94,.15)); }.fish-shape::before { position: absolute; top: 12px; left: -22px; width: 29px; height: 21px; background: currentColor; clip-path: polygon(0 50%, 100% 0, 100% 100%); content: ""; }.fish-shape::after { position: absolute; top: 14px; right: 16px; width: 6px; height: 6px; background: white; border-radius: 50%; content: ""; }.creature-perch .fish-shape { color: #239d70; }.creature-tetra .fish-shape { color: #168fb3; }.creature-leviathan .fish-shape { color: #d48b1b; }.ray-shape { position: relative; z-index: 1; color: #436cab; font-size: 87px; font-weight: 900; transform: rotate(-12deg); }.creature-tag { margin-bottom: 7px; color: #628293; font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }.creature-card h3 { margin-bottom: 8px; font-size: 20px; }.creature-card > p:not(.creature-tag) { min-height: 62px; margin-bottom: 12px; color: #587787; font-size: 13px; }.creature-card > strong { color: #16787b; font-size: 17px; }
.strategy-section { background: var(--white); }.strategy-grid { display: grid; grid-template-columns: minmax(340px, .87fr) minmax(0, 1fr); gap: 88px; align-items: center; }.strategy-art { position: relative; min-height: 420px; overflow: hidden; background: linear-gradient(155deg, #d9f7fb 0%, #97deec 100%); border: 1px solid #c6e6ed; border-radius: 28px; }.strategy-sun { position: absolute; top: 48px; right: 70px; width: 70px; height: 70px; background: #ffe89a; border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,240,169,.32), 0 0 0 43px rgba(255,250,212,.24); }.strategy-wave { position: absolute; right: -30px; left: -30px; border-radius: 50% 50% 0 0; }.strategy-wave.one { bottom: -76px; height: 220px; background: #55c4db; transform: rotate(2deg); }.strategy-wave.two { bottom: -115px; height: 225px; background: #168bac; transform: rotate(-2deg); }.strategy-fish { position: absolute; z-index: 2; top: 175px; left: 31%; color: #1584a3; font-size: 102px; transform: rotate(-9deg); }.strategy-hook { position: absolute; z-index: 3; top: 72px; left: 44%; color: #5a7184; font-family: Georgia, serif; font-size: 190px; line-height: 1; transform: rotate(-18deg); }.check-list { display: grid; gap: 19px; padding: 0; margin: 31px 0 0; list-style: none; }.check-list li { display: flex; gap: 13px; }.check-list li > span { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; margin-top: 1px; color: var(--sea-700); background: var(--sea-100); border-radius: 50%; font-size: 13px; font-weight: 900; }.check-list strong { display: block; color: #21475f; font-size: 14px; }.check-list p { margin: 2px 0 0; color: #5b7a8a; font-size: 13px; }
.faq-section { padding: 99px 0; background: #f5fbfd; }.faq-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr); gap: 100px; }.faq-intro { max-width: 360px; }.faq-intro > p:not(.eyebrow) { margin-bottom: 23px; color: var(--ink-soft); }.faq-list { display: grid; align-content: start; gap: 9px; }.faq-list details { padding: 0 20px; background: var(--white); border: 1px solid #d9ebf0; border-radius: 12px; }.faq-list summary { position: relative; padding: 16px 31px 16px 0; color: #284e65; cursor: pointer; font-size: 14px; font-weight: 750; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { position: absolute; top: 15px; right: 0; color: var(--sea-700); content: "+"; font-size: 22px; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { padding: 0 0 17px; margin: -2px 0 0; color: #5b7888; font-size: 13px; }.faq-list details a { color: var(--sea-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-section { padding: 80px 0; background: var(--white); }.contact-panel { display: grid; grid-template-columns: 1fr minmax(300px, .55fr); gap: 70px; align-items: center; padding: 50px 56px; background: linear-gradient(120deg, #e4f8fb 0%, #f6fffb 100%); border: 1px solid #cde8ed; border-radius: 25px; }.contact-panel h2 { margin-bottom: 10px; }.contact-panel > div > p:not(.eyebrow) { max-width: 540px; margin-bottom: 0; color: #597787; }.contact-card { padding: 24px; background: var(--white); border: 1px solid #d5e9ed; border-radius: 17px; box-shadow: 0 10px 18px rgba(29,103,130,.06); }.contact-card span { display: block; margin-bottom: 6px; color: #668595; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.contact-card a { color: var(--sea-700); font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -.03em; }.contact-card a:hover { text-decoration: underline; text-underline-offset: 4px; }.contact-card p { margin: 10px 0 0; color: #698595; font-size: 12px; }
.site-footer { padding: 55px 0 20px; color: #d6e4e9; background: #16475d; }.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .85fr; gap: 80px; }.footer-brand { color: var(--white); }.footer-brand strong { color: #83dfe0; }.site-footer p { max-width: 355px; margin: 14px 0 0; color: #aec7d0; font-size: 13px; }.site-footer h3 { margin: 4px 0 14px; color: var(--white); font-size: 13px; }.site-footer a:not(.brand) { display: block; width: fit-content; margin: 7px 0; color: #b8d0d7; font-size: 13px; }.site-footer a:not(.brand):hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 23px; margin-top: 42px; border-top: 1px solid rgba(204,232,238,.16); color: #9ebbc5; font-size: 11px; }
.result-dialog { width: min(460px, calc(100% - 32px)); padding: 34px; color: #24495e; background: var(--white); border: 1px solid #cde5eb; border-radius: 22px; box-shadow: 0 25px 80px rgba(15,68,91,.3); text-align: center; }.result-dialog::backdrop { background: rgba(18, 62, 78, .33); backdrop-filter: blur(3px); }.result-dialog .eyebrow { margin-bottom: 8px; }.result-dialog h2 { margin-bottom: 10px; font-size: 30px; }.result-dialog > p:not(.eyebrow) { margin-bottom: 23px; color: #5b7888; }.result-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 15px; color: #c88119; background: #fff3c9; border-radius: 16px; font-size: 25px; }.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px; margin-bottom: 22px; background: #f4fbfc; border: 1px solid #dcedf1; border-radius: 14px; }.result-stats span { display: block; color: #668393; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }.result-stats strong { display: block; margin-top: 3px; color: var(--sea-700); font-size: 16px; }
@media (max-width: 930px) { .site-nav { gap: 14px; }.nav-shell { gap: 18px; }.hero-grid, .game-layout, .strategy-grid, .faq-grid { grid-template-columns: 1fr; }.hero-grid { gap: 34px; }.mission-card { width: min(500px, 100%); }.side-stack { display: grid; grid-template-columns: .75fr 1.25fr; }.log-card { min-height: 250px; }.two-column-intro, .contact-panel { gap: 35px; }.steps-grid, .creature-grid { grid-template-columns: repeat(2, 1fr); }.benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }.benefit-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }.strategy-art { min-height: 340px; }.faq-intro { max-width: 510px; } }
@media (max-width: 720px) { .container, .nav-shell { width: min(100% - 32px, 1160px); }.desktop-cta { display: none; }.menu-toggle { display: inline-block; }.site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 15px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); box-shadow: 0 10px 25px rgba(35,105,131,.1); }.site-nav.is-open { display: flex; }.site-nav a { padding: 11px 0; }.nav-shell { min-height: 63px; }.hero { padding: 53px 0 58px; }.hero-grid { gap: 27px; } h1 { font-size: clamp(38px, 12vw, 52px); }.hero-lead { font-size: 16px; }.hero-actions { gap: 17px; }.hero-points { gap: 8px 13px; margin-top: 25px; }.mission-card { min-height: 290px; padding: 25px; }.game-section, .content-section, .guide-section, .faq-section { padding: 62px 0; }.inline-heading, .two-column-intro, .contact-panel { grid-template-columns: 1fr; }.inline-heading { display: block; }.inline-heading > p { margin-top: 3px; }.game-card { padding: 12px; border-radius: 18px; }.hud { gap: 7px; }.stat-card { padding: 10px; border-radius: 11px; }.stat-card strong { font-size: 14px; }.control-panel { grid-template-columns: 1fr auto; padding: 10px; }.keyboard-help { display: none; }.cast-button { justify-self: end; }.touch-controls { display: grid; }.side-stack { grid-template-columns: 1fr; }.session-card, .log-card { padding: 19px; }.log-card { min-height: 230px; }.two-column-intro { gap: 4px; }.steps-grid, .creature-grid { grid-template-columns: 1fr; }.steps-grid { margin-top: 29px; }.step-card { min-height: auto; }.step-number { margin-bottom: 24px; }.benefit-grid { grid-template-columns: 1fr 1fr; gap: 25px 10px; }.benefit-grid > div { padding-left: 10px; }.strategy-grid { gap: 37px; }.strategy-art { min-height: 290px; }.strategy-hook { top: 46px; }.faq-grid { gap: 31px; }.faq-list details { padding: 0 15px; }.contact-section { padding: 57px 0; }.contact-panel { padding: 31px 23px; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 20px; }.footer-grid > div:first-child { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: 3px; margin-top: 30px; } }
@media (max-width: 390px) { .brand { font-size: 14px; }.brand-mark { width: 31px; height: 31px; border-radius: 10px; font-size: 24px; }.menu-toggle { padding: 7px 8px; font-size: 12px; }.hero-actions { align-items: flex-start; flex-direction: column; }.mission-number { font-size: 51px; }.cost-control { gap: 5px; }.cost-control > span { display: none; }.segmented { gap: 2px; }.cost-button { min-width: 29px; }.cast-button { padding: 0 15px; }.result-dialog { padding: 26px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.legal-page { min-height: calc(100vh - 155px); padding: 68px 20px 82px; background: linear-gradient(180deg, #f1fbfd, #ffffff 36%); }
.legal-card { width: min(780px, 100%); padding: clamp(28px, 6vw, 58px); margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow-sm); }
.legal-card h1 { margin-bottom: 8px; font-size: clamp(38px, 6vw, 58px); }
.legal-card h2 { margin: 37px 0 9px; font-size: 23px; }
.legal-card > p { color: #527181; }
.legal-card > p a { color: var(--sea-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { margin-bottom: 32px; color: #6b8998 !important; font-size: 13px; }
.legal-back { margin-top: 37px; }
.legal-footer { padding: 8px 0 18px; }
.legal-footer .footer-bottom { margin-top: 0; padding-top: 14px; }
.legal-footer a { color: #c1d9df; }
@media (max-width: 720px) { .legal-page { padding: 39px 16px 58px; }.legal-card h2 { margin-top: 30px; }.legal-footer .footer-bottom { flex-direction: row; justify-content: space-between; } }


/* Contact address styling for rivuqela.info. */
.contact-address{display:block;margin-top:10px;color:#45647b;font-size:13px;font-style:normal;font-weight:700;line-height:1.45}.contact-address::before{content:"Address · ";color:#d1607a;font-weight:800}@media(max-width:700px){.contact-address{font-size:12px;margin-top:8px}}