/* Krypt Gaming UI theme: tokens, base and public-page sections. Source of truth: DESIGN.md.
   Booking and owner components live in app.css. No booking logic depends on this file. */
@font-face{font-family:Geist;src:url('assets/font-geist.woff2') format('woff2');font-display:swap}
@font-face{font-family:GeistMono;src:url('assets/font-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:PressStart;src:url('assets/font-press-start.woff2') format('woff2');font-display:swap}

:root{
  --bg:#0c0a12; --surface:#15121f; --surface-2:#1b1727;
  --line:#2b2540; --line-strong:#8a82a8;
  --text:#f4f2fa; --text-muted:#a9a3bd;
  --primary:#ff3d9a; --on-primary:#0c0a12;
  --accent:#35c9ff;
  --success:#3ddc97; --warning:#ffb020; --error:#ff6b7a;

  --font-display:PressStart,monospace; --font-body:Geist,system-ui,Arial,sans-serif; --font-mono:GeistMono,ui-monospace,monospace;
  --t-sm:14px; --t-base:16px; --t-lg:18px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --max:1120px; --r-sm:8px; --r-md:14px; --r-pill:999px;
  --glow:0 0 0 3px rgba(255,61,154,.35);

  /* legacy names still used by app.css and owner.html */
  --panel:var(--surface); --ink:var(--text); --muted:var(--text-muted); --pink:var(--primary);
  --green:var(--success); --booking-green:var(--success); --booking-amber:var(--warning); --booking-red:var(--error);
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;box-shadow:var(--glow)}
h1,h2,h3{margin:0}
p{margin:0}

.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;background:var(--bg)}
.ambient::before,.ambient::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(10px);opacity:.9}
.ambient::before{top:-30vmax;right:-20vmax;background:radial-gradient(circle,rgba(255,61,154,.16),transparent 62%);animation:drift 14s ease-in-out infinite alternate}
.ambient::after{bottom:-35vmax;left:-25vmax;background:radial-gradient(circle,rgba(53,201,255,.11),transparent 62%);animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(40px,30px)}}

.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}
.eyebrow{font:12px/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.skip-link{position:absolute;left:12px;top:-64px;z-index:200;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:var(--r-sm);font-weight:700}
.skip-link:focus{top:12px}

/* buttons */
.pill{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid transparent;border-radius:var(--r-pill);padding:0 26px;background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:700;cursor:pointer;transition:filter .2s,box-shadow .2s,transform .2s}
.pill:hover{filter:brightness(1.08);box-shadow:var(--glow);transform:translateY(-1px)}
.pill:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.pill.ghost{background:transparent;color:var(--text);border-color:var(--text)}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.text-link:hover{text-decoration-color:var(--primary)}

/* nav */
.nav{position:fixed;z-index:50;inset:0 0 auto;background:rgba(12,10,18,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{height:68px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font:italic 700 16px var(--font-mono);letter-spacing:.12em;color:var(--text);white-space:nowrap;display:inline-flex;align-items:center;gap:.5ch;min-height:44px}
.wordmark em{font-style:normal;color:var(--primary)}
.links{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--text)}
.links a:not(.pill){display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);transition:color .2s}
.links a:not(.pill):hover{color:var(--text)}
.links .pill{min-height:44px;padding:0 22px}
.menu{display:none;border:1.5px solid var(--line-strong);background:transparent;color:var(--text);border-radius:var(--r-sm);width:44px;height:44px;font-size:20px;cursor:pointer}

/* hero */
.hero{padding:128px 0 var(--s-8)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-7);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);color:var(--text);font-size:var(--t-sm);margin-bottom:var(--s-5)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.hero h1{font:clamp(22px,4.2vw,42px)/1.45 var(--font-display);text-transform:uppercase;margin-bottom:var(--s-5)}
.hero h1 span{display:block;color:var(--primary);text-shadow:0 0 30px rgba(255,61,154,.5)}
.hero-price{font:700 var(--t-lg)/1.3 var(--font-mono);color:var(--accent);margin-bottom:var(--s-4)}
.hero .lead{max-width:52ch;color:var(--text-muted);font-size:var(--t-lg)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin-top:var(--s-6)}
.hero-photo{margin:0;position:relative}
.hero-photo::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--r-md) + 2px);background:linear-gradient(160deg,rgba(255,61,154,.55),transparent 40%,rgba(53,201,255,.5));z-index:0}
.hero-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}

section{padding:var(--s-8) 0}
.section-head{margin-bottom:var(--s-6)}
.section-head h2,.contact-copy h2,.about-copy h2,.cta h2{font:clamp(18px,2.8vw,28px)/1.5 var(--font-display);text-transform:uppercase;margin:var(--s-2) 0 0}
.section-head p{color:var(--text-muted);margin-top:var(--s-3);max-width:60ch}

/* pricing */
.pricing-cards{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-5);max-width:960px}
.price-card{position:relative;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.price-card.featured{border-color:rgba(255,61,154,.55);box-shadow:0 0 50px rgba(255,61,154,.08)}
.price-card.muted-card{background:transparent;border:1.5px dashed var(--line-strong)}
.badge{display:inline-block;font:12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid;border-radius:var(--r-pill);padding:4px 12px;margin-bottom:var(--s-3)}
.badge.live{color:var(--primary);border-color:var(--primary)}
.badge.soon-badge{color:var(--warning);border-color:var(--warning)}
.price-card h3{font-size:22px;font-weight:700;margin-bottom:var(--s-2)}
.price{font:700 44px/1.1 var(--font-mono);color:var(--accent);margin:var(--s-3) 0}
.price small{font:var(--t-sm) var(--font-body);color:var(--text-muted)}
.feature-list{list-style:none;padding:0;margin:var(--s-4) 0 var(--s-5);color:var(--text)}
.feature-list li{padding:6px 0 6px 28px;position:relative}
.feature-list li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:6px;border-left:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.price-note{color:var(--text-muted);font-size:var(--t-sm);margin-bottom:var(--s-5)}
.price-card p{color:var(--text-muted)}

/* games */
.game-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.game-card{position:relative;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);isolation:isolate}
.game-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2;transition:transform .5s}
.game-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 45%,rgba(12,10,18,.92) 100%)}
.game-card:hover img{transform:scale(1.06)}
.game-title{position:absolute;left:12px;right:12px;bottom:12px}
.game-title strong{display:block;font-size:15px;line-height:1.3}
.game-title span{font:12px var(--font-mono);letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}

/* experience */
.perk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.perk{border-top:2px solid var(--primary);padding-top:var(--s-3)}
.perk h3{font-size:18px;margin-bottom:var(--s-2)}
.perk p{color:var(--text-muted);font-size:15px}

/* contact */
.contact-band{border-block:1px solid var(--line);background:var(--surface)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-7);align-items:center}
.contact-copy p{color:var(--text-muted);margin:var(--s-3) 0 var(--s-5);max-width:44ch}
.contact-copy img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.info-card{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.info-card h3{font:12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-2)}
.info-card p,.info-card a{font-size:15px;line-height:1.7;color:var(--text)}
.info-card a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.info-card a:hover{text-decoration-color:var(--primary)}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-7);align-items:center}
.about-copy>p{color:var(--text-muted);max-width:60ch;margin-bottom:var(--s-5)}
.about-copy h3{font-size:18px;margin-bottom:var(--s-3)}
.why{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-5);padding:0;margin:0;list-style:none}
.why li{font-size:15px;color:var(--text)}
.why li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--primary);margin-right:10px}
.about-logo{display:grid;place-items:center}
.about-logo img{width:min(100%,320px);border-radius:50%;box-shadow:0 0 70px rgba(255,61,154,.35);animation:glow 5s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 100px rgba(255,61,154,.5)}}

/* cta + footer */
.cta{text-align:center;border-block:1px solid var(--line);background:radial-gradient(ellipse at center,rgba(255,61,154,.1),transparent 65%)}
.cta p{color:var(--text-muted);margin:var(--s-4) auto 0;max-width:56ch}
.cta .hero-actions{justify-content:center}
footer{padding:var(--s-7) 0 var(--s-5);background:var(--surface);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-6);padding-bottom:var(--s-6)}
.footer-brand p{max-width:34ch;font-size:var(--t-sm);color:var(--text-muted);margin-top:var(--s-2)}
.footer-grid h3{font:12px var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:var(--s-3)}
.footer-links{display:grid;gap:4px;font-size:var(--t-sm);color:var(--text-muted)}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
.footer-links a:hover{color:var(--primary)}
.footer-small{border-top:1px solid var(--line);padding-top:var(--s-4);display:flex;justify-content:space-between;gap:var(--s-4);color:var(--text-muted);font-size:var(--t-sm)}

/* motion */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media(max-width:980px){
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .perk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .hero-grid,.contact-grid,.about-grid,.pricing-cards{grid-template-columns:minmax(0,1fr)}
  .hero-photo img{aspect-ratio:16/10;max-height:380px}
  .about-logo{order:-1}
  .about-logo img{width:180px}
}
@media(max-width:760px){
  .wrap{width:min(calc(100% - 32px),var(--max))}
  .nav-inner{height:64px}
  .menu{display:block}
  .links{display:none;position:absolute;top:64px;left:0;right:0;padding:var(--s-3) var(--s-4) var(--s-5);background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
  .links.open{display:flex}
  .links>a:not(.pill){border-bottom:1px solid var(--line)}
  .links .pill{margin-top:var(--s-4)}
  .hero{padding:96px 0 var(--s-7)}
  section{padding:var(--s-7) 0}
  .contact-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-small{flex-direction:column}
  .why{grid-template-columns:1fr}
}
@media(max-width:520px){
  .status-loc{display:none}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .perk-grid{grid-template-columns:1fr}
  .price{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}