/* Egg Keg site: one shared stylesheet. Mobile-first. Theme vars are set per page: --bg --surface --ink --p --s --a --on-p --on-a --fd --fb --outline */
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb),system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
h1,h2,h3,.wm{font-family:var(--fd),system-ui,sans-serif;line-height:1.08;margin:0;overflow-wrap:break-word}
h2{font-size:clamp(28px,6vw,52px);margin-bottom:12px}
.eyebrow{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--a)}
main section{padding:56px 0}
.lede{font-size:17px;opacity:.88;max-width:620px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 12px}
/* combo ribbon (template + concept) */
.ribbon{background:var(--ink);color:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12.5px;line-height:1.3}
.ribbon .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:8px;padding-bottom:8px}
.ribbon .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-weight:700;white-space:nowrap}
.ribbon .pill i{font-style:normal;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.ribbon .pt{background:var(--p);color:var(--on-p)}
.ribbon .pc{background:var(--a);color:var(--on-a)}
.ribbon .nav2{margin-left:auto;display:flex;gap:10px}
.ribbon .nav2 a{text-decoration:none;opacity:.85;font-weight:700;white-space:nowrap}
.ribbon .nav2 a:hover{opacity:1;text-decoration:underline}
/* header */
.site-h{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.site-h .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand .mark{width:40px;height:40px;border-radius:10px;object-fit:contain;flex:none}
.wm{font-size:22px;letter-spacing:.01em;white-space:nowrap}
.wm .w1{color:var(--p)}.wm .w2{color:var(--s)}
.nav{display:none;margin-left:auto;gap:26px;font-weight:700;font-size:15px}
.nav a{text-decoration:none;opacity:.85}
.site-h .btn{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;background:var(--p);color:var(--on-p);font-weight:800;text-decoration:none;font-size:15px;border:0;line-height:1.2}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px currentColor}
.btn.sm{padding:9px 16px;font-size:13.5px}
/* hero */
.hero{padding:36px 0 64px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(34px,8.4vw,78px);margin:12px 0 16px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.keyart{position:relative;margin-bottom:18px}
.keyart>img.art{width:100%;border-radius:18px;box-shadow:0 24px 48px rgba(0,0,0,.25)}
.lockup{position:absolute;left:10px;bottom:-26px;width:34%;max-width:220px;border-radius:14px;padding:8px;box-shadow:0 12px 26px rgba(0,0,0,.25)}
.lockup img{width:100%;border-radius:8px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tag{font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
/* catalog */
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:32px}
.card{background:var(--surface);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:22px}
.card p{margin:0;opacity:.85;font-size:15px}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.chip{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:8px;background:var(--a);color:var(--on-a)}
.chip.soon{background:transparent;box-shadow:inset 0 0 0 2px var(--a);color:inherit}
.style{font-size:13px;opacity:.7}
/* devices */
.dev-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:end;margin-top:36px}
/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.stat{background:var(--surface);border-radius:16px;padding:14px;font-size:14px}
.stat b{display:block;font-family:var(--fd);font-size:28px;color:var(--p)}
.factsheet{background:var(--surface);border-radius:22px;padding:24px}
.factsheet dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0}
.factsheet dt{font-weight:800;opacity:.7}.factsheet dd{margin:0}
.factsheet .ref{margin-top:20px;display:flex;gap:14px;align-items:center;font-size:13px;opacity:.9}
.factsheet .ref img{width:auto;max-width:150px;max-height:140px;border-radius:10px}
/* footer */
.site-f{padding:40px 0 32px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:14px}
.site-f .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.site-f h4{margin:0 0 10px;font-family:var(--fd)}
.site-f ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;opacity:.85}
.site-f h4.blank{display:none}
.legal{opacity:.65;font-size:12.5px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);padding-top:16px}
.marquee{overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink);padding:12px 0;font-family:var(--fd);font-size:20px}
.marquee div{display:inline-block;animation:mq 40s linear infinite}
.marquee span{display:inline-block;padding-right:36px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee div{animation:none}html{scroll-behavior:auto}}

/* ===== CSS device frames (all screens landscape) ===== */
.dev{position:relative;margin:0;width:100%}
.dev .scr{position:relative;overflow:hidden;background:#000}
.dev .scr img{width:100%;height:100%;object-fit:cover}
.dev figcaption{text-align:center;font-size:12.5px;margin-top:10px;opacity:.8;font-weight:600;letter-spacing:.03em}
.dev-pc .bezel{background:#16181d;border-radius:12px;padding:2.2% 2.2% 3.6%;box-shadow:0 18px 40px rgba(0,0,0,.28);position:relative}
.dev-pc .bezel:after{content:"";position:absolute;left:50%;bottom:1.2%;width:5px;height:5px;border-radius:50%;background:#3a3d46;transform:translateX(-50%)}
.dev-pc .scr{aspect-ratio:16/9;border-radius:3px}
.dev-pc .neck{width:14%;height:36px;margin:0 auto;background:linear-gradient(90deg,#9aa0ab,#cfd3da,#9aa0ab);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.dev-pc .foot{width:36%;height:10px;margin:0 auto;border-radius:10px 10px 4px 4px;background:linear-gradient(#d7dbe2,#9ea4ae)}
.dev-tv .bezel{background:#0b0c10;border-radius:8px;padding:1.1%;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.dev-tv .scr{aspect-ratio:16/9}
.dev-tv .legs{display:flex;justify-content:space-between;padding:0 12%}
.dev-tv .legs i{display:block;width:6%;height:18px;background:#2a2c33;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.dev-tv .pad{position:absolute;right:0;bottom:-4%;width:24%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.dev-iphone .bezel{background:#111;border-radius:13%/28%;padding:3.2% 3.6%;box-shadow:0 0 0 3px #3b3d42 inset,0 16px 30px rgba(0,0,0,.3);position:relative}
.dev-iphone .scr{aspect-ratio:19.5/9;border-radius:10%/22%}
.dev-iphone .island{position:absolute;left:4.6%;top:50%;width:3.2%;height:24%;transform:translateY(-50%);background:#000;border-radius:20px;z-index:2}
.dev-ipad .bezel{background:#1a1b1f;border-radius:4.5%/6%;padding:3.4%;box-shadow:0 0 0 3px #4a4c52 inset,0 16px 30px rgba(0,0,0,.3);position:relative}
.dev-ipad .scr{aspect-ratio:16/9;border-radius:1.6%}
.dev-ipad .cam{position:absolute;left:1.5%;top:50%;width:1%;aspect-ratio:1;border-radius:50%;background:#333;transform:translateY(-50%)}
.dev-android-phone .bezel{background:#202226;border-radius:9%/20%;padding:2.2% 2.4%;box-shadow:0 0 0 2px #5a5d63 inset,0 16px 30px rgba(0,0,0,.3);position:relative}
.dev-android-phone .scr{aspect-ratio:20/9;border-radius:7%/16%}
.dev-android-phone .hole{position:absolute;left:4.4%;top:50%;width:2.2%;aspect-ratio:1;border-radius:50%;background:#000;transform:translateY(-50%);z-index:2;box-shadow:0 0 0 2px #222}
.dev-android-tab .bezel{background:#2b2d31;border-radius:3.5%/5.5%;padding:2.6%;box-shadow:0 0 0 2px #5a5d63 inset,0 16px 30px rgba(0,0,0,.3);position:relative}
.dev-android-tab .scr{aspect-ratio:16/9;border-radius:1.2%}
.dev-android-tab .cam{position:absolute;left:50%;top:1.1%;width:.8%;aspect-ratio:1;border-radius:50%;background:#111;transform:translateX(-50%)}
.dev-iphone .scr img,.dev-android-phone .scr img{object-fit:contain}

/* ===== Template: Playground ===== */
.t-playground .btn{box-shadow:0 5px 0 color-mix(in srgb,var(--p) 60%,#000)}
.t-playground .wm{-webkit-text-stroke:4px var(--outline,#1b1b2e);paint-order:stroke fill;text-shadow:0 3px 0 var(--outline,#1b1b2e)}
.t-playground .keyart>img.art{transform:rotate(1.4deg);border:5px solid #fff}
.t-playground .card{border-radius:26px;border:3px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.t-playground .wave{display:block;width:100%;height:48px}
.t-playground .hero:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--a);opacity:.18;right:-180px;top:-160px}
.t-playground section.alt{background:var(--surface)}
.t-playground section.alt .card,.t-playground section.alt .stat,.t-playground section.alt .factsheet{background:var(--bg)}
/* ===== Template: Arcade ===== */
.t-arcade{font-size:15.5px}
.t-arcade h1,.t-arcade .hero h1{font-size:clamp(20px,4.6vw,48px);line-height:1.3}
.t-arcade h2{font-size:clamp(18px,3.4vw,34px);line-height:1.35}
.t-arcade .card h3{font-size:15px;line-height:1.45}
.t-arcade .wm{font-size:14px}
.t-arcade .btn,.t-arcade .card,.t-arcade .keyart>img.art,.t-arcade .stat,.t-arcade .factsheet,.t-arcade .chip,.t-arcade .lockup,.t-arcade .tag{border-radius:0}
.t-arcade .btn{box-shadow:5px 5px 0 var(--ink);border:3px solid var(--ink)}
.t-arcade .card,.t-arcade .stat,.t-arcade .factsheet{border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.t-arcade .stat b{font-size:18px;line-height:1.6}
.t-arcade .keyart>img.art{border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.t-arcade .hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 5px);pointer-events:none}
.t-arcade .pixrow{height:12px;background:repeating-linear-gradient(90deg,var(--p) 0 12px,var(--s) 12px 24px,var(--a) 24px 36px,transparent 36px 48px)}
/* ===== Template: Crest ===== */
.t-crest .hero{text-align:center;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--p) 30%,transparent),transparent 60%)}
.t-crest .hero-grid{gap:30px}
.t-crest .hero .lede{margin:0 auto}.t-crest .hero .ctas,.t-crest .tags{justify-content:center}
.t-crest .crest-emblem{width:min(240px,62vw);margin:0 auto;border-radius:22px;padding:12px;box-shadow:0 0 0 3px var(--p),0 20px 50px rgba(0,0,0,.35)}
.t-crest .crest-emblem img{width:100%;border-radius:12px}
.t-crest .keyart>img.art{border:3px solid var(--p);border-radius:6px;box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 25%,transparent),0 30px 70px rgba(0,0,0,.45)}
.t-crest .lockup{display:none}
.t-crest h1,.t-crest h2{text-transform:uppercase;letter-spacing:.02em}
.t-crest .card{border:2px solid color-mix(in srgb,var(--p) 70%,transparent);border-radius:10px;background:color-mix(in srgb,var(--surface) 92%,#000)}
.t-crest .card h3{text-transform:uppercase}
.t-crest .btn{border-radius:6px;text-transform:uppercase;letter-spacing:.08em}
.t-crest section h2,.t-crest section>.wrap>.eyebrow{text-align:center}.t-crest .lede.c{margin:0 auto;text-align:center}
.t-crest .rule{height:2px;width:160px;margin:16px auto 0;background:linear-gradient(90deg,transparent,var(--p),transparent)}
/* ===== Template: Poster ===== */
.t-poster .hero h1{font-size:clamp(44px,11vw,108px);line-height:.95;letter-spacing:-.01em}
.t-poster .keyart>img.art{border-radius:0;transform:rotate(-1.5deg)}
.t-poster .lockup{transform:rotate(-3deg)}
.t-poster .cat-rows{display:grid;gap:22px;margin-top:32px}
.t-poster .row{display:grid;grid-template-columns:minmax(0,1fr);background:var(--surface);border-radius:8px;overflow:hidden}
.t-poster .row img{width:100%;aspect-ratio:16/9;object-fit:cover}
.t-poster .row .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.t-poster .row h3{font-size:clamp(28px,5vw,44px);margin:4px 0}
.t-poster .row p{margin:0}
.t-poster .btn{border-radius:6px}
/* ===== Template: Studio ===== */
.t-studio .hero h1{font-weight:700;letter-spacing:-.02em}
.t-studio .wm{font-weight:600;letter-spacing:.16em;font-size:17px}
.t-studio .btn{border-radius:4px}
.t-studio .keyart>img.art{border-radius:4px;box-shadow:none}
.t-studio .lockup{border-radius:4px;box-shadow:none;left:0;bottom:-40px;width:30%}
.t-studio .cat-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px;margin-top:32px;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.t-studio .li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent);align-items:center}
.t-studio .li img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px}
.t-studio .li h3{font-size:19px;margin:6px 0}.t-studio .li p{margin:0;font-size:14.5px;opacity:.8}
.t-studio .stat,.t-studio .factsheet{border-radius:4px;background:transparent;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.t-studio .chip{border-radius:3px}
/* ===== Template: Launcher ===== */
.t-launcher .hero-card{background:var(--surface);border-radius:28px;padding:24px 20px 40px;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.t-launcher .hero{padding-top:24px}
.t-launcher .keyart>img.art{border-radius:20px;box-shadow:none}
.t-launcher .card{border-radius:24px}
.t-launcher .btn{border-radius:14px}
.t-launcher .store{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.t-launcher .store span{font-size:12px;font-weight:800;padding:7px 12px;border-radius:12px;background:var(--ink);color:var(--bg)}
.t-launcher .devices{background:var(--surface);border-radius:28px;margin:0 12px}

/* ===== >=600px ===== */
@media (min-width:600px){
 .wrap{padding:0 28px}
 .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dev-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dev-stage .d-pc,.dev-stage .d-tv,.dev-stage .d-atab{grid-column:1/-1}
 .site-f .wrap{grid-template-columns:1.4fr 1fr 1fr}.legal{grid-column:1/-1}.site-f h4.blank{display:block}
 .t-studio .li{grid-template-columns:180px minmax(0,1fr);gap:22px}
 .lockup{left:-14px;bottom:-34px;width:30%}
}
/* ===== >=960px ===== */
@media (min-width:960px){
 body{font-size:17px}
 .ribbon{font-size:14px}.ribbon .pill{padding:5px 14px}.ribbon .pill i{font-size:11px}
 .wrap{padding:0 32px}
 main section{padding:96px 0}
 .lede{font-size:19px}
 .site-h .wrap{height:78px;gap:22px}
 .brand .mark{width:48px;height:48px;border-radius:12px}
 .wm{font-size:28px}
 .nav{display:flex}.site-h .btn{margin-left:0}
 .hero{padding:64px 0 88px}
 .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:48px}
 .lockup{left:-28px;bottom:-40px}
 .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:40px}
 .card h3{font-size:24px}
 .dev-stage{grid-template-columns:repeat(12,minmax(0,1fr));gap:34px 28px;margin-top:48px}
 .dev-stage .d-pc{grid-column:1/7}.dev-stage .d-tv{grid-column:7/13}
 .dev-stage .d-iphone{grid-column:1/5}.dev-stage .d-ipad{grid-column:5/9}.dev-stage .d-aphone{grid-column:9/13}
 .dev-stage .d-atab{grid-column:4/10}
 .dev-tv .pad{right:-4%;bottom:-6%;width:26%}
 .about-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}
 .stat{padding:18px;font-size:16px}.stat b{font-size:34px}
 .factsheet{padding:30px}
 .marquee{font-size:26px}
 .t-playground .wm{-webkit-text-stroke:5px var(--outline,#1b1b2e)}
 .t-playground .card:nth-child(even){transform:translateY(18px)}
 .t-playground .wave{height:70px}
 .t-playground .hero:before{width:520px;height:520px;right:-140px}
 .t-arcade .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .t-arcade .wm{font-size:20px}
 .t-arcade .pixrow{height:16px;background:repeating-linear-gradient(90deg,var(--p) 0 16px,var(--s) 16px 32px,var(--a) 32px 48px,transparent 48px 64px)}
 .t-arcade .stat b{font-size:24px}
 .t-crest .hero{padding-top:56px}
 .t-crest .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
 .t-crest .crest-emblem{width:300px}
 .t-poster .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
 .t-poster .row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:center}
 .t-poster .row:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.t-poster .row:nth-child(even) img{order:2}
 .t-poster .row img{height:100%}
 .t-poster .row .body{padding:28px 34px 28px 0}.t-poster .row:nth-child(even) .body{padding:28px 0 28px 34px}
 .t-studio .wm{font-size:20px;letter-spacing:.18em}
 .t-studio .cat-list{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
 .t-studio .li{grid-template-columns:200px minmax(0,1fr)}
 .t-studio .lockup{left:0;bottom:-56px;width:28%}
 .t-launcher .hero{padding-top:40px}
 .t-launcher .hero-card{border-radius:36px;padding:48px}
 .t-launcher .devices{border-radius:40px;margin:0 24px}
}