/* ===================== Kontrolleur — additions on top of kontrolleur.css ===================== */

/* --- "Get Started" keeps OUR solid button. Use the `background` shorthand so the gradient
       fills the whole pill cleanly (the base .btn-cta uses a 2-layer outline clip that
       mangled the corners of a solid fill). --- */
.btn-cta.solid{ background:var(--grad); background-clip:border-box; border-color:transparent; color:#fff; }
.btn-cta.solid:hover{ filter:brightness(1.08); box-shadow:0 10px 30px rgba(160,0,200,.5); }
.btn-cta.solid .pip{ background:rgba(255,255,255,.22); }
.btn-cta,.btn-ghost{ white-space:nowrap; }

/* --- nav active link: make the underline absolute so it doesn't add height
       (it was making the active item taller and pushing its text out of line) --- */
.nav-links a{ position:relative; }
.nav-links a.active::after{ position:absolute; left:14px; right:14px; bottom:4px; margin-top:0; width:auto; height:2px; }
@media(max-width:420px){ .nav-inner .btn-cta{ height:38px; padding:0 13px; font-size:11.5px; gap:7px; } .nav-inner .btn-cta .pip{ width:18px; height:18px; } }

/* --- scroll-reveal entrance animations --- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-rv-stagger]>*{ opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-rv-stagger].in>*{ opacity:1; transform:none; }
[data-rv-stagger].in>*:nth-child(1){ transition-delay:.03s; }
[data-rv-stagger].in>*:nth-child(2){ transition-delay:.11s; }
[data-rv-stagger].in>*:nth-child(3){ transition-delay:.19s; }
[data-rv-stagger].in>*:nth-child(4){ transition-delay:.27s; }
[data-rv-stagger].in>*:nth-child(5){ transition-delay:.35s; }
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-rv-stagger]>*{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* --- nav: keep it opaque enough that content never shows through it on browsers that
       don't render backdrop-filter (some Android), which looked like the nav "overlapping".
       Adds the -webkit- prefix and a near-solid @supports fallback. --- */
header.nav{ -webkit-backdrop-filter:blur(14px); background:linear-gradient(to bottom,rgba(8,6,14,.97),rgba(8,6,14,.88)); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  header.nav{ background:rgba(8,6,14,.98); }
}

/* --- mobile nav (the design hides nav-links <1080px with no menu; add a real one) --- */
.navtoggle{ display:none; width:44px; height:44px; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; }
.navtoggle span{ display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s, opacity .2s; }
body.menu-open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .navtoggle span:nth-child(2){ opacity:0; }
body.menu-open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav{ position:fixed; left:0; right:0; top:74px; z-index:49; background:rgba(8,6,14,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding:16px 0 24px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:transform .26s ease, opacity .26s ease; }
body.menu-open .mnav{ transform:none; opacity:1; pointer-events:auto; }
.mnav .container{ display:flex; flex-direction:column; gap:6px; }
.mnav .mlink{ font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:14px 12px; border-radius:11px; transition:.18s; }
.mnav .mlink:hover,.mnav .mlink.active{ color:#fff; background:rgba(168,120,255,.09); }
.mnav .btn-cta{ margin-top:12px; justify-content:center; height:50px; }
@media(max-width:1080px){ .navtoggle{ display:flex; } }
@media(min-width:1081px){ .mnav{ display:none; } }
@media(max-width:720px){ .mnav{ top:64px; } }

/* --- language toggle (EN/DE) --- */
.langtoggle{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 13px; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-family:var(--font-ui); font-weight:800; font-size:12px; letter-spacing:.08em; cursor:pointer; transition:background .18s,border-color .18s,color .18s; }
.langtoggle:hover{ color:#fff; border-color:var(--line-strong); background:var(--surface-2); }
.langtoggle svg{ color:var(--violet); flex:none; }
.langtoggle.mlang{ width:100%; justify-content:center; height:50px; margin-top:8px; }
/* on phones the nav is just logo + hamburger; the Get Started pill made the bar overflow
   and pushed the hamburger off the right edge. It still lives in the hero + the menu. */
@media(max-width:720px){ .nav-right .langtoggle, .nav-right .btn-cta{ display:none; } }

/* --- legal pages (Terms / Privacy) on the dark theme --- */
.legal{ width:min(880px,92vw); margin:0 auto; padding:54px 0 64px; }
.legal .kicker{ margin-bottom:18px; }
.legal h1{ font-weight:800; letter-spacing:-1px; line-height:1.05; font-size:clamp(30px,4.6vw,54px); }
.legal .legal-wrap{ width:100%; }
.legal .legal-meta,.legal .updated{ color:var(--muted-2); font-size:13px; font-weight:600; letter-spacing:.03em; margin:12px 0 36px; }
.legal .legal-meta b{ color:var(--muted); }
.legal h2{ font-weight:800; letter-spacing:-.4px; font-size:21px; margin:36px 0 12px; color:#fff; }
.legal h3{ font-weight:700; font-size:16.5px; margin:22px 0 8px; color:var(--ink); }
.legal p,.legal li{ color:var(--muted); font-size:15px; line-height:1.72; margin-bottom:12px; }
.legal ul,.legal ol{ padding-left:22px; margin-bottom:14px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--violet); }
.legal a:hover{ color:#fff; text-decoration:underline; }
.legal strong,.legal b{ color:var(--ink); }
.legal hr{ border:none; border-top:1px solid var(--line); margin:30px 0; }

/* ============ MOBILE FIXES ============ */
/* the PNG hero floaters overlapped the text and got cut off on the right — drop them on small screens */
@media(max-width:900px){ .hero-objs{ display:none!important; } }
/* belt-and-suspenders against any horizontal overflow */
html{ overflow-x:hidden; }
.wrap{ overflow-x:hidden; }

/* marketing "Our Focus" — compact grid instead of huge stacked cards on mobile */
@media(max-width:760px){
  .focus-row{ grid-template-columns:repeat(2,1fr)!important; gap:12px; }
  .focus-item{ padding:22px 12px; border-radius:14px; }
  .focus-item .ring{ width:58px; height:58px; margin-bottom:12px; }
  .focus-item .ring svg{ width:24px; height:24px; }
  .focus-item h3{ font-size:14px; }
  /* 5th tile (Growth) was an awkward half-width orphan; make it a full-width capstone */
  .focus-row .focus-item:nth-child(5){ grid-column:1 / -1; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:14px; padding:16px 18px; }
  .focus-row .focus-item:nth-child(5) .ring{ width:48px; height:48px; margin:0; }
  .focus-row .focus-item:nth-child(5) .ring svg{ width:22px; height:22px; }
}

/* home "A New Spin" features: horizontal carousel on mobile to save vertical space */
@media(max-width:760px){
  .features{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; }
  .features::-webkit-scrollbar{ display:none; }
  .features > .feature-card{ flex:0 0 84%; scroll-snap-align:start; padding:26px; transform:none; }
}

/* games: mobile search popup + bottom-sheet sort */
.gsearch{ position:fixed; inset:0; z-index:300; background:rgba(8,6,14,.97); backdrop-filter:blur(12px); display:none; padding:16px; }
.gsearch.open{ display:block; }
.gsearch .gs-top{ display:flex; gap:10px; align-items:center; }
.gsearch .gs-field{ flex:1; display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line-strong); border-radius:13px; padding:0 16px; height:54px; box-shadow:0 0 0 3px rgba(160,0,200,.14); }
.gsearch .gs-field svg{ color:var(--violet); flex:none; }
.gsearch .gs-field input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font:500 16px var(--font-ui); }
.gsearch .gs-field input::placeholder{ color:var(--muted-2); }
.gsearch .gs-close{ width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:13px; background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.gsearch .gs-hint{ color:var(--muted-2); font-size:12.5px; padding:14px 4px 0; }
.gsearch .gs-results{ margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 116px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.gsearch .gs-row{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:9px 12px; cursor:pointer; color:var(--ink); font-family:inherit; }
.gsearch .gs-row:hover,.gsearch .gs-row:active{ border-color:var(--line-strong); background:var(--surface-2); }
.gsearch .gs-thumb{ width:50px; height:50px; flex:none; border-radius:9px; background:var(--surface-2); background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.08); }
.gsearch .gs-rmeta{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.gsearch .gs-rt{ font-weight:700; font-size:15px; color:#fff; }
.gsearch .gs-rs{ font-size:12px; color:var(--muted-2); text-transform:capitalize; }
.gsearch .gs-rrtp{ font-weight:800; font-size:13px; color:var(--violet); flex:none; }
.gsearch .gs-empty{ color:var(--muted-2); font-size:14px; padding:26px 6px; text-align:center; }
@media(min-width:721px){ .gsearch{ display:none!important; } }
@media(max-width:720px){
  /* tabs scroll horizontally instead of stacking */
  .controls .tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .controls .tabs::-webkit-scrollbar{ display:none; }
  .controls .tab{ flex:none; padding:10px 14px; font-size:11.5px; }
  /* search = compact icon button on the LEFT (opens the popup), sort takes the RIGHT */
  .controls .filter-row{ flex-direction:row; gap:10px; align-items:stretch; }
  .controls .bigsearch{ flex:none; width:52px; padding:0; justify-content:center; cursor:pointer; }
  .controls .bigsearch > input{ display:none; }
  .controls .sortsel{ flex:1; width:auto; justify-content:space-between; }
  .sortsel .sortmenu{ position:absolute; top:calc(100% + 8px); left:0; right:0; bottom:auto; min-width:0; z-index:200; padding:8px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
  .sortsel .sortmenu button{ padding:14px; font-size:15px; }
}

/* games grid: two compact columns on phones (cards were one-per-row and oversized) */
@media(max-width:560px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .art .title h3{ font-size:16px; }
  .art .title .prov{ font-size:7.5px; letter-spacing:.24em; margin-top:8px; }
  .stats{ padding:13px 9px 22px; }
  .stat{ padding:8px 4px; }
  .stat .k{ font-size:8.5px; letter-spacing:.1em; }
  .stat .v{ font-size:11.5px; }
  .card .desc{ display:none; }
  .art .ribbon{ width:34px; height:38px; font-size:8px; }
  .lockoverlay span{ font-size:18px; }
  .lockoverlay small{ font-size:8px; }
}

/* --- contact form status message --- */
.form-status{ grid-column:1/-1; display:none; border-radius:12px; padding:13px 16px; font-size:13.5px; font-weight:600; line-height:1.45; }
.form-status.show{ display:block; }
.form-status.ok{ background:linear-gradient(120deg,rgba(124,0,188,.34),rgba(200,31,214,.2)); border:1px solid var(--line-strong); color:#fff; }
.form-status.err{ background:rgba(236,72,153,.12); border:1px solid rgba(236,72,153,.42); color:#ffd6e8; }

/* iOS renders bare playing-card suits (U+2660 etc.) as colour emoji, especially under lang=zh/ja; force text presentation everywhere (site has no intentional emoji, all icons are SVG). */
body{font-variant-emoji:text;-webkit-font-feature-settings:normal;}