/* landing.css — Tumla marketing landing (web / and /en).
   Tokens mirror src/index.css (clay aesthetic). No JS, no Tailwind. */
@font-face { font-family: "Bagel Fat One"; src: url("/fonts/BagelFatOne-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --paper:#fdf6e6; --paper2:#f2e6c8; --ink:#3a2410; --ink-soft:#5a3a1f; --label:#7a5a2a;
  --gold1:#fcd34d; --gold2:#f59e0b; --gold-ink:#451a03;
  --edge:rgba(180,150,95,.5); --wood:#1a0e06;
  --display:"Bagel Fat One",system-ui,sans-serif; --ui:"Plus Jakarta Sans",system-ui,sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--ui); color:var(--ink); line-height:1.6;
  background:linear-gradient(180deg,var(--paper),var(--paper2)); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:#b45309; }
h2 { font-family:var(--display); font-size:clamp(26px,3.6vw,36px); margin:0 0 12px; color:var(--ink); }
.muted { color:var(--ink-soft); font-size:16px; margin:0; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

/* Display type in Bagel Fat One is wide, so unbalanced wraps strand single
   words ("… flatt mellom / dere"). Balance every heading, not just the hero. */
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }

.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:26px; color:var(--ink); text-decoration:none; }
.brand img { width:38px; height:38px; filter:drop-shadow(0 4px 6px rgba(40,25,8,.4)); }
.lang { display:flex; gap:2px; background:rgba(26,14,6,.08); border-radius:999px; padding:2px; font-weight:800; font-size:13px; }
.lang a { display:flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; text-decoration:none; color:var(--label); }
.lang a[aria-current="page"] { background:var(--gold1); color:var(--gold-ink); }

.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; padding:36px 0 48px; }
.hero h1 { font-family:var(--display); font-size:clamp(34px,5vw,52px); line-height:1.08; margin:0 0 16px; color:var(--ink); }
.hero .lead { font-size:18px; color:var(--ink-soft); margin:0 0 26px; max-width:32ch; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn { font-family:var(--ui); font-weight:800; font-size:16px; border-radius:16px; padding:14px 22px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; }
.btn-appstore, .btn-playstore { background:#111; color:#fff; gap:9px; line-height:1.15; padding:8px 16px; }
.btn-appstore .appstore-logo { width:20px; height:24px; flex:none; }
.btn-playstore .playstore-logo { width:22px; height:24px; flex:none; }
.btn-appstore .appstore-text, .btn-playstore .store-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
.btn-appstore .small, .btn-playstore .small { font-size:10px; font-weight:600; opacity:.75; text-transform:uppercase; letter-spacing:.04em; }
.btn-appstore .big, .btn-playstore .big { font-size:17px; }
.btn-appstore[aria-disabled="true"] { opacity:.85; cursor:default; }
.btn-play { background:linear-gradient(180deg,var(--gold1),var(--gold2)); color:var(--gold-ink);
  box-shadow:0 5px 0 rgba(150,110,30,.4),0 10px 20px rgba(120,80,20,.25),inset 0 2px 0 rgba(255,255,255,.5); }
.btn-play:active { transform:translateY(2px); }

.phone-shot { justify-self:center; width:min(300px,80vw); border:8px solid var(--wood); border-radius:38px; overflow:hidden; background:#000; box-shadow:0 18px 44px rgba(40,25,8,.35); }
/* Kappløpet spilles med skjermen på tvers — liggende ramme i stedet for telefonrammen. */
.tablet-shot { justify-self:center; width:min(460px,92vw); border:9px solid var(--wood); border-radius:26px; overflow:hidden; background:#000; box-shadow:0 18px 44px rgba(40,25,8,.35); }
.tablet-shot img { display:block; width:100%; height:auto; }

section { padding:44px 0; }
.section-head { text-align:center; max-width:46ch; margin:0 auto 28px; }
.section-head h2 { margin:0 0 8px; }
.section-head p { color:var(--ink-soft); margin:0; }
.eyebrow { display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--gold2); margin-bottom:8px; }

.card { background:linear-gradient(180deg,#fdf6e6,#f2e6c8); border:1.5px solid var(--edge); border-radius:22px; padding:22px;
  box-shadow:0 6px 0 rgba(150,110,55,.18),0 12px 26px rgba(60,40,15,.14),inset 0 2px 0 rgba(255,255,255,.65); }
.card h3 { margin:0 0 6px; font-size:19px; color:var(--ink); }
.card p { margin:0; color:var(--ink-soft); font-size:15px; }
/* Modes are illustrated with the game's own clay cast rather than platform
   emoji, which render differently per OS and read flat next to sculpted art. */
.mode-figs { display:flex; align-items:flex-end; justify-content:flex-start; gap:2px; height:52px; margin-bottom:10px; }
.mode-figs img { height:100%; width:auto; filter:drop-shadow(0 5px 6px rgba(40,25,8,.3)); }
.mode-figs img:last-child { transform:scaleX(-1); }
.mode-figs.one img:last-child { transform:none; }

.two-games { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.game-card { background:linear-gradient(180deg,#fdf6e6,#f2e6c8); border:1.5px solid var(--edge); border-radius:24px; padding:24px; text-align:center;
  box-shadow:0 6px 0 rgba(150,110,55,.18),0 12px 26px rgba(60,40,15,.14),inset 0 2px 0 rgba(255,255,255,.65); }
/* Sprites are framed differently (the horse fills its canvas, the castle sits in
   padding), so they get pre-trimmed card variants on a shared disc to read as a
   matched pair rather than two icons at random sizes. */
.game-icon { width:168px; height:168px; margin:0 auto; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fffaf0 0%, #f6ead0 62%, #eeddb8 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), inset 0 -6px 14px rgba(150,110,55,.12); }
.game-card img { width:132px; height:132px; object-fit:contain; filter:drop-shadow(0 7px 9px rgba(40,25,8,.3)); }
.game-card h3 { margin:16px 0 6px; font-size:22px; color:var(--ink); }
.game-card p { margin:0 auto; max-width:34ch; color:var(--ink-soft); font-size:15px; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.feature-img { max-width:260px; margin:0 auto; border-radius:28px; border:8px solid var(--wood); overflow:hidden; background:#000; box-shadow:0 14px 32px rgba(40,25,8,.3); }

.levels { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; padding:0; margin:0; }
.levels li { background:#fff9ee; border:1.5px solid var(--edge); border-radius:14px; padding:10px 16px; font-weight:700; color:var(--ink-soft); }

.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; text-align:center; }
.trust div { background:#fff9ee; border:1.5px solid var(--edge); border-radius:16px; padding:18px 12px; font-weight:700; color:var(--ink-soft); }
.trust-icon { display:block; width:30px; height:30px; margin:0 auto 8px; color:var(--gold2); }
.trust-icon svg { width:100%; height:100%; display:block; }

.shots { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.shots img { width:100%; border-radius:18px; border:1.5px solid var(--edge); box-shadow:0 8px 18px rgba(60,40,15,.14); }
.shots img.wide { grid-column:1/-1; }

.faq { max-width:760px; margin:0 auto; }
.faq details { background:#fff9ee; border:1.5px solid var(--edge); border-radius:14px; padding:4px 18px; margin-bottom:12px; }
.faq summary { font-weight:800; color:var(--ink); cursor:pointer; padding:14px 0; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--gold2); font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq p { margin:0 0 14px; color:var(--ink-soft); }

.closing { text-align:center; }
.closing .cta-row { justify-content:center; }

footer { background:var(--wood); color:#e6d3ad; padding:30px 0; margin-top:30px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
footer a { color:#f0d9a8; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; }

a:focus-visible, .btn:focus-visible, summary:focus-visible { outline:3px solid var(--wood); outline-offset:2px; }

@media (max-width:780px) {
  .hero { grid-template-columns:1fr; text-align:center; gap:24px; padding:24px 0 36px; }
  .hero .lead { margin-left:auto; margin-right:auto; }
  .cta-row { justify-content:center; }
  .phone-shot, .tablet-shot { order:-1; }
  /* .grid-3 holds three short cards — two columns would strand the third,
     so it keeps 3-up until it genuinely stops fitting, then goes single. */
  .trust, .shots { grid-template-columns:1fr 1fr; }
  /* .grid-2 pairs prose with an image and must stack early; the two game cards
     hold their own side by side much longer. */
  .grid-2 { grid-template-columns:1fr; }
}
@media (max-width:620px) { .grid-3, .two-games { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }