:root {
  --ink: #1a3a4a; --water: #3a9bbf; --bg: #e8f4f8; --gold: #f5c842;
  --coral: #e05a3a; --leaf: #2a7a50; --tile: #f5fafd; --soft: rgba(26,58,74,.70);
  --radius: 24px; --page: 1240px; --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --surface: color-mix(in srgb, var(--tile) 84%, var(--bg));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; min-width: 0; color: var(--ink);
  background: radial-gradient(circle at 84% 10%, #f5c84222, transparent 24rem), radial-gradient(circle at 7% 88%, #3a9bbf24, transparent 32rem), var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
a { color: inherit; } button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Georgia, "Iowan Old Style", serif; letter-spacing: -.035em; }
.topbar, .header {
  position: sticky; top: 0; z-index: 20; min-height: 70px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 11px clamp(18px, 4vw, 54px); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.brand, .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand img, .logo img { width: 38px; height: 38px; }
.topbar nav, .nav { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; }
.topbar nav a, .nav a { padding: 8px 11px; text-decoration: none; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--ink) 72%, var(--soft)); border-radius: 999px; }
.topbar nav a:hover, .topbar nav a.active, .nav a:hover, .nav a.active { color: var(--ink); background: color-mix(in srgb, var(--gold) 24%, transparent); }
.language, .lang-toggle, .lang { display: flex; gap: 4px; }
.language button, .lang-toggle button, .lang button { min-width: 33px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 800; cursor: pointer; }
.language button.active, .lang-toggle button.active, .lang button.active { background: var(--ink); border-color: var(--ink); color: var(--tile); }
main { max-width: var(--page); margin: 0 auto; }
.hero {
  display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: clamp(20px, 4vw, 54px);
  min-height: min(660px, 70vh); padding: clamp(34px, 7vw, 92px) clamp(18px, 4vw, 54px) clamp(38px, 6vw, 76px);
}
.hero-reversed { direction: rtl; } .hero-reversed > * { direction: ltr; }
.hero-stacked { grid-template-columns: minmax(0, 880px); justify-content: center; min-height: auto; }
.hero-copy, .game-copy, .hero-banner-copy { align-self: center; }
.label, .tag, .kicker { display: inline-flex; width: fit-content; padding: 6px 10px; margin-bottom: 15px; border: 1px solid color-mix(in srgb, var(--water) 50%, var(--line)); border-radius: 999px; color: color-mix(in srgb, var(--ink) 85%, var(--water)); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; background: color-mix(in srgb, var(--tile) 72%, transparent); }
h1 { max-width: 9.6ch; font-size: clamp(46px, 6.4vw, 88px); line-height: .96; }
.hero-copy p, .game-copy > p, .hero-banner-copy p, .hero-compact-copy p { max-width: 56ch; margin-top: 20px; color: var(--soft); font-size: clamp(16px, 1.4vw, 19px); }
.actions, .controls, .tap-pad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn, .act-btn, .sun-button, .cast-btn, .game-start { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 10px 17px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); color: var(--tile); box-shadow: 0 9px 22px color-mix(in srgb, var(--ink) 16%, transparent); text-decoration: none; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.btn.secondary, .btn.plain { background: color-mix(in srgb, var(--tile) 80%, transparent); border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn:hover, .act-btn:hover, .sun-button:hover, .cast-btn:hover, .game-start:hover { transform: translateY(-2px); box-shadow: 0 13px 25px color-mix(in srgb, var(--ink) 20%, transparent); }
.hero-map { position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(145deg, color-mix(in srgb, var(--water) 19%, var(--tile)), color-mix(in srgb, var(--gold) 12%, var(--bg))); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.hero-map::before { content: ""; position: absolute; inset: 12% 10%; border: 1px solid color-mix(in srgb, var(--tile) 75%, transparent); border-radius: calc(var(--radius) - 7px); transform: rotate(-3deg); }
.hero-map::after { content: "waterline"; position: absolute; top: 18px; right: 20px; color: color-mix(in srgb, var(--ink) 46%, transparent); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hero-img { position: relative; z-index: 1; width: min(84%, 480px); filter: drop-shadow(0 20px 18px color-mix(in srgb, var(--ink) 15%, transparent)); }
.hero-badge { position: absolute; z-index: 2; right: 7%; bottom: 7%; width: min(24%, 108px); }
.hero-banner { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.hero-banner-img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; background: color-mix(in srgb, var(--water) 15%, var(--tile)); }
.hero-banner-copy, .hero-compact { padding: clamp(28px, 5vw, 66px); } .hero-compact { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(260px, .72fr); gap: 34px; align-items: center; } .hero-inline-img { width: 100%; border-radius: var(--radius); }
.play-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .34fr); gap: clamp(20px, 3vw, 42px); padding: clamp(30px, 5vw, 64px) clamp(18px, 4vw, 54px); border-top: 1px solid var(--line); }
.game-section { max-width: var(--page); margin: 0 auto; padding: clamp(30px, 5vw, 64px) clamp(18px, 4vw, 54px); }
.game-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; margin-bottom: 18px; } .game-head h2, .info-section > h2 { font-size: clamp(34px, 4vw, 56px); }
.scorebar, .hud, .score-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; padding: 7px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.scorebar div, .hud-item, .score-strip span { min-width: 0; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--tile) 82%, transparent); }
.scorebar span, .hud-item span, .score-strip b { display: block; color: color-mix(in srgb, var(--soft) 86%, transparent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scorebar strong, .hud-item strong, .score-strip strong { display: block; margin-top: 2px; font-size: clamp(21px, 2.2vw, 29px); line-height: 1; }
.board-panel, .lake-card, .canvas-wrap { position: relative; width: fit-content; max-width: 100%; padding: 9px; border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, var(--tile) 75%, transparent); border: 1px solid var(--line); box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 11%, transparent); }
canvas, .game-canvas { display: block; max-width: 100%; height: auto; border-radius: max(10px, calc(var(--radius) - 12px)); }
.overlay, .lake-message { position: absolute; inset: 9px; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: max(10px, calc(var(--radius) - 12px)); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(7px); color: var(--ink); font-family: Georgia, serif; font-size: 22px; text-align: center; } .overlay.hidden, .lake-message.hidden { display: none; }
.side { display: grid; align-content: start; gap: 12px; } .info-block, .info-card, .postcard, .page-card, .contact-card { padding: 20px; border-radius: 16px; background: color-mix(in srgb, var(--tile) 76%, transparent); border: 1px solid var(--line); }
.info-block h3, .info-card h3, .postcard h2, .page-card h2, .contact-card h2 { font-size: 21px; } .info-block p, .info-block li, .info-card p, .postcard p, .page-card p, .contact-card p { margin-top: 8px; color: var(--soft); } .info-block ul { margin: 8px 0 0; padding-left: 19px; } .status { padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--water) 13%, transparent); }
.info-section, .page { max-width: var(--page); margin: 0 auto; padding: clamp(28px, 5vw, 66px) clamp(18px, 4vw, 54px); } .info-grid, .page-grid, .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .page-card.wide { grid-column: 1 / -1; }
.footer { margin-top: 22px; padding: 28px clamp(18px, 4vw, 54px); background: color-mix(in srgb, var(--ink) 92%, var(--bg)); color: var(--tile); font-size: 14px; }
/* Rail is a compact contextual navigation rather than a permanent dark wall. */
.rail { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px clamp(18px, 4vw, 54px); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--water) 18%, var(--tile)); } .mark img { width: 30px; height: 30px; } .rail nav { display: flex; gap: 4px; flex-wrap: wrap; } .rail nav a { padding: 7px 10px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 750; } .rail nav a.active { background: var(--ink); color: var(--tile); } .rail .lang { margin-left: auto; } body:has(.rail) main { padding: clamp(34px, 6vw, 76px) clamp(18px, 4vw, 54px); } body:has(.rail) .footer { margin-left: 0; } .postcard { max-width: 430px; margin-top: 26px; } .postcard img { width: 100%; border-radius: 12px; }
@media (max-width: 860px) { .topbar, .header { grid-template-columns: auto 1fr; } .topbar nav, .nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .hero, .hero-banner, .hero-compact, .play-section { grid-template-columns: 1fr; } .hero { min-height: auto; } .hero-map { min-height: 300px; } .side { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .language, .lang-toggle { display: none; } h1 { font-size: clamp(43px, 14vw, 66px); } .hero { padding-top: 44px; } .scorebar, .hud, .score-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .side, .info-grid, .page-grid, .contact-grid { grid-template-columns: 1fr; } .hero-map { min-height: 250px; } .rail { align-items: flex-start; } .rail nav a { font-size: 12px; } }