@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Russo+One&display=swap');

:root{
  --bg:#050609;
  --paper:#f1eee8;
  --ink:#08090d;
  --white:#f5f3ee;
  --muted:#9aa0ac;
  --pink:#ff00a8;
  --cyan:#03e3f2;
  --purple:#8d35ff;
  --orange:#ff8a00;
  --line:rgba(255,255,255,.14);
  --shadow:#000;
  --display:"Russo One", Impact, "Arial Black", sans-serif;
  --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--white);background:
  radial-gradient(circle at 80% 9%,rgba(141,53,255,.11),transparent 23%),
  radial-gradient(circle at 18% 24%,rgba(255,0,168,.07),transparent 19%),
  #050609;font-family:var(--body);overflow-x:hidden
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;
  background-image:
    linear-gradient(135deg,transparent 0 44%,rgba(255,255,255,.018) 44% 45%,transparent 45% 100%),
    radial-gradient(circle,rgba(3,227,242,.22) 0 1px,transparent 1.5px);
  background-size:160px 160px,18px 18px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.shell{max-width:1480px;margin:0 auto;padding-left:42px;padding-right:42px}

.page-noise{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.065;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")
}
.cursor-spray{
  position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(3,227,242,.075),rgba(255,0,168,.025) 38%,transparent 68%);
  will-change:transform
}

.topbar,.room-topbar{
  max-width:1480px;margin:0 auto;padding:22px 42px;display:flex;align-items:center;gap:34px;
  position:relative;z-index:30
}
.topbar{justify-content:space-between}
.mini-logo{width:148px;height:56px;display:flex;align-items:center}
.mini-logo img{width:100%;height:100%;object-fit:contain}
.topnav{display:flex;align-items:center;gap:34px;margin-left:auto;margin-right:auto}
.topnav a{
  font:700 12px var(--display);letter-spacing:.03em;position:relative;padding:7px 0
}
.topnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--cyan);transform:skewX(-20deg);transition:.18s
}
.topnav a:hover::after{right:0}
.top-actions{display:flex;gap:18px;align-items:center}
.lang{font-size:12px;color:#c4c7ce;font-weight:700}

.comic-button{
  appearance:none;border:0;position:relative;isolation:isolate;cursor:pointer;
  color:#090a0c;font:800 15px var(--display);letter-spacing:.015em;
  min-height:54px;padding:0 25px;transform:skewX(-5deg);
  transition:transform .13s ease,filter .13s ease;
  box-shadow:8px 8px 0 #000,0 0 0 4px var(--paper);
}
.comic-button>*{transform:skewX(5deg)}
.comic-button::before{
  content:"";position:absolute;z-index:-1;inset:0;background:inherit;
  clip-path:polygon(2% 6%,96% 0,100% 76%,95% 100%,5% 95%,0 26%)
}
.comic-button:hover{transform:skewX(-5deg) translate(-2px,-3px);filter:saturate(1.2)}
.comic-button:active{transform:skewX(-5deg) translate(2px,2px);box-shadow:4px 4px 0 #000,0 0 0 4px var(--paper)}
.comic-button:disabled{filter:grayscale(.85);opacity:.45;cursor:not-allowed}
.comic-button.orange{background:var(--orange)}
.comic-button.purple{background:var(--purple);color:white}
.comic-button.cyan{background:var(--cyan)}
.comic-button.compact{min-height:42px;font-size:12px;padding:0 26px;box-shadow:5px 5px 0 #000,0 0 0 3px var(--cyan)}
.comic-button.giant{min-height:64px;padding:0 30px;font-size:17px;display:inline-flex;align-items:center;gap:26px}
.comic-button.full{width:100%;justify-content:center;margin-top:14px}
.mini-grid{font-size:22px}

.hero{
  min-height:750px;padding-top:36px;padding-bottom:70px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:42px;align-items:center;position:relative
}
.hero-copy{position:relative;z-index:4}
.hero-logo-wrap{position:relative;width:min(100%,680px);height:255px;margin-left:-42px;margin-bottom:-8px}
.hero-logo{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 18px 12px #000)}
.burst{position:absolute;z-index:0;filter:blur(.2px)}
.burst-a{
  width:120px;height:160px;left:7%;bottom:4%;background:var(--pink);
  clip-path:polygon(0 20%,35% 25%,18% 0,48% 16%,63% 0,69% 33%,100% 12%,76% 52%,100% 60%,72% 69%,80% 100%,49% 78%,31% 100%,30% 69%,0 80%,20% 52%)
}
.burst-b{
  width:150px;height:130px;right:4%;top:20%;background:var(--cyan);
  clip-path:polygon(0 15%,38% 31%,33% 0,55% 25%,80% 3%,76% 35%,100% 28%,79% 55%,98% 79%,63% 70%,52% 100%,38% 70%,7% 89%,21% 57%,0 48%,28% 39%)
}
.hero-title{
  font-family:var(--display);font-size:clamp(58px,5.8vw,99px);line-height:.91;letter-spacing:-.055em;
  margin:8px 0 24px;text-shadow:7px 7px 0 #000,-2px 2px 0 #000
}
.hero-title span{display:block}
.hero-title .pink{color:var(--pink);text-shadow:5px 5px 0 #000}
.cyan-text{color:var(--cyan)}
.hero-desc{
  max-width:690px;font-size:17px;line-height:1.56;color:#e1e2e6;margin:0 0 26px
}
.hero-desc strong{color:white}
.hero-desc em{font-style:normal;color:var(--cyan);font-weight:700}
.scribble{display:inline-block;color:#c8c8ce;transform:rotate(-2deg);font-style:italic}
.hero-cta{display:flex;gap:22px;flex-wrap:wrap;margin:29px 0 27px}
.feature-strip{
  width:min(100%,720px);padding:18px 0;border-top:1px solid #343944;border-bottom:1px solid #343944;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px
}
.feature-mini{display:flex;gap:11px;align-items:center;padding:0 12px;border-right:1px solid #2a2e37}
.feature-mini:last-child{border:0}
.feature-mini>b{font-size:23px;color:var(--cyan)}
.feature-mini span{display:flex;flex-direction:column}
.feature-mini strong{font-size:11px}
.feature-mini small{font-size:10px;color:var(--muted);margin-top:3px}

.hero-art{
  --px:0px;--py:0px;position:relative;height:650px;transform:translate(var(--px),var(--py));
  transition:transform .08s linear
}
.hand-note{
  font-family:"Comic Sans MS","Segoe Print",cursive;color:#55eaff;font-weight:700;font-style:italic;
  transform:rotate(-5deg);line-height:1.06;text-shadow:2px 2px 0 #000
}
.note-tagline{position:absolute;right:20%;top:0;font-size:18px;z-index:4}
.comic-bubble{
  position:absolute;color:#101014;background:var(--paper);padding:18px 24px;
  font:800 25px/1 var(--display);text-align:center;z-index:6;filter:drop-shadow(7px 8px 0 #000);
  clip-path:polygon(5% 0,94% 4%,100% 19%,94% 78%,78% 81%,87% 100%,62% 83%,7% 88%,0 67%,3% 9%)
}
.hello{left:5%;top:92px;transform:rotate(-8deg)}
.hear{right:2%;top:110px;transform:rotate(8deg)}
.crown{position:absolute;color:var(--orange);font-size:70px;z-index:7;text-shadow:5px 5px 0 #000}
.crown-top{top:88px;left:48%;transform:rotate(-8deg)}
.monitor-wrap{position:absolute;left:15%;right:5%;top:160px;height:390px;transform:rotate(-5deg);z-index:3}
.monitor-shadow{position:absolute;inset:20px -6px 30px 30px;background:#000;clip-path:polygon(7% 0,96% 11%,90% 87%,15% 100%,0 72%)}
.monitor{
  position:absolute;inset:0 30px 70px 0;background:#e7e7e0;border:14px solid #090a0c;
  clip-path:polygon(7% 0,98% 8%,93% 95%,12% 100%,0 70%);padding:27px 34px 45px
}
.monitor::after{
  content:"";position:absolute;inset:3px;border:4px solid #fff;clip-path:inherit;pointer-events:none
}
.monitor-screen{
  position:relative;width:100%;height:100%;background:
  radial-gradient(circle at 50% 50%,rgba(0,229,242,.14),transparent 56%),
  #05080c;border:9px solid #1a161e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:35px;
  overflow:hidden;clip-path:polygon(3% 0,98% 4%,94% 96%,0 100%)
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(to bottom,transparent 0 4px,rgba(255,255,255,.08) 4px 5px)
}
.ai-eyes{display:flex;gap:92px;align-items:center}
.ai-eyes i{display:block;width:52px;height:17px;background:var(--cyan);transform:rotate(31deg);box-shadow:0 0 17px rgba(3,227,242,.7)}
.ai-eyes i::after{content:"";display:block;width:52px;height:17px;background:var(--cyan);transform:rotate(-62deg)}
.ai-mouth{width:130px;height:72px;border:12px solid var(--pink);border-top-width:5px;border-radius:7px 7px 80px 80px;position:relative;transform:rotate(3deg)}
.ai-mouth span{position:absolute;width:62px;height:40px;background:#ff43bd;left:35px;top:38px;border-radius:40px 40px 10px 10px;transform:rotate(-10deg)}
.monitor-bottom{position:absolute;right:38px;bottom:15px;display:flex;gap:8px}
.monitor-bottom i{width:11px;height:11px;border-radius:50%;border:3px solid #161318}
.monitor-bottom .power{background:var(--cyan)}
.monitor-stand{position:absolute;bottom:27px;left:42%;width:110px;height:105px;background:#ddd;border:12px solid #08090d;clip-path:polygon(28% 0,79% 0,100% 100%,0 100%)}
.monitor-base{position:absolute;left:29%;right:20%;bottom:0;height:45px;background:#eee;border:12px solid #08090d;transform:skewX(-13deg)}
.host-label{
  position:absolute;z-index:8;left:28%;bottom:46px;background:var(--paper);color:#111;padding:12px 35px;
  font:800 16px var(--display);transform:rotate(-5deg) skewX(-8deg);box-shadow:7px 8px 0 #000;border:3px solid #111
}
.equation-note{
  position:absolute;right:-4%;top:245px;z-index:8;display:flex;flex-direction:column;align-items:center;
  background:var(--paper);color:#15151a;padding:12px 18px;font:800 16px var(--display);transform:rotate(5deg);box-shadow:7px 7px 0 #000
}
.equation-note b{font-size:20px;color:var(--pink)}
.domain-note{position:absolute;right:0;bottom:8px;font:700 29px "Comic Sans MS",cursive;transform:rotate(-7deg);color:white}
.domain-note b{color:var(--cyan)}
.mic{position:absolute;z-index:9;left:3%;bottom:80px;width:68px;height:220px;transform:rotate(22deg)}
.mic-head{width:70px;height:82px;border:9px solid #090a0c;background:repeating-linear-gradient(0deg,#5b6067 0 4px,#17191d 4px 8px);border-radius:38px}
.mic-body{width:32px;height:140px;margin:-4px auto 0;background:linear-gradient(90deg,#111,#ef118f 42%,#333);border:7px solid #090a0c;clip-path:polygon(7% 0,93% 0,76% 100%,25% 100%)}
.pixel-cluster{position:absolute;width:130px;height:80px;opacity:.75;background:radial-gradient(circle,var(--cyan) 0 3px,transparent 3px);background-size:14px 14px}
.pc1{right:-3%;top:290px;transform:rotate(9deg)}
.pc2{left:-6%;top:320px;background-image:radial-gradient(circle,var(--pink) 0 3px,transparent 3px)}

.chaos-divider{
  overflow:hidden;display:flex;width:110%;margin-left:-5%;gap:40px;padding:12px 0;background:var(--cyan);color:#061014;
  font:800 15px var(--display);transform:rotate(-1deg);box-shadow:0 6px 0 #000;white-space:nowrap
}
.chaos-divider span{min-width:220px;text-align:center}

.section{padding-top:92px;padding-bottom:104px;border-bottom:1px solid #252933}
.section-heading{display:flex;justify-content:center;align-items:center;gap:28px;margin-bottom:42px}
.paper-title{
  position:relative;display:inline-block;background:var(--paper);color:#0c0c10;padding:11px 32px;
  transform:rotate(-1.6deg);box-shadow:9px 9px 0 #000
}
.paper-title::before,.paper-title::after{
  content:"";position:absolute;background:var(--paper);z-index:-1
}
.paper-title::before{inset:-6px 11px 5px -13px;clip-path:polygon(0 11%,100% 0,96% 85%,8% 100%)}
.paper-title::after{width:40px;height:35px;right:-26px;bottom:4px;clip-path:polygon(0 0,100% 47%,8% 100%)}
.paper-title h2{margin:0;font:800 clamp(32px,4vw,55px)/1 var(--display);letter-spacing:-.03em}

.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode-card{
  min-height:380px;position:relative;padding:25px 23px 55px;color:#0b0b0f;border:6px solid #050609;
  outline:2px solid rgba(255,255,255,.12);box-shadow:10px 12px 0 #000;
  clip-path:polygon(3% 1%,98% 4%,100% 91%,93% 100%,5% 96%,0 12%);
  transition:.18s ease
}
.mode-card:hover{transform:translateY(-8px) rotate(-1deg)}
.mode-orange{background:linear-gradient(145deg,#ff8a00,#ff6b00)}
.mode-pink{background:linear-gradient(145deg,#ff008f,#c80084)}
.mode-cyan{background:linear-gradient(145deg,#00dbec,#00a9ca)}
.mode-purple{background:linear-gradient(145deg,#a443ff,#6726d8)}
.mode-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:radial-gradient(circle,#000 0 2px,transparent 2.7px);background-size:13px 13px;
  mask-image:linear-gradient(135deg,transparent 15%,#000)
}
.mode-name{
  position:relative;z-index:2;display:inline-block;background:var(--paper);padding:10px 20px;margin:2px 0 30px;
  font:800 39px/1 var(--display);transform:rotate(-3deg);box-shadow:6px 7px 0 #000
}
.mode-name.smaller{font-size:27px}
.mode-icon{position:relative;z-index:2;font:800 90px/1 var(--display);text-align:center;margin:8px auto 26px;text-shadow:5px 5px 0 rgba(0,0,0,.35)}
.mode-card p{position:relative;z-index:2;font-weight:700;line-height:1.45;margin:0}
.tape{
  position:absolute;z-index:4;bottom:17px;left:20px;right:20px;background:#0b0b0f;color:white;padding:8px;
  font:700 10px var(--display);text-align:center;transform:rotate(-1deg)
}

.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step-card{
  min-height:390px;position:relative;background:linear-gradient(180deg,#10131a,#08090d);border:2px solid #253240;
  padding:68px 22px 24px;box-shadow:7px 9px 0 #000;clip-path:polygon(2% 2%,98% 0,100% 95%,92% 100%,4% 98%,0 9%)
}
.step-card:nth-child(2){border-color:#0b9db6}
.step-card:nth-child(3){border-color:#b9630c}
.step-card:nth-child(4){border-color:#8531bc}
.splat{
  position:absolute;left:10px;top:8px;width:57px;height:57px;display:grid;place-items:center;color:#050609;
  font:800 29px var(--display);clip-path:polygon(50% 0,62% 24%,83% 7%,80% 33%,100% 35%,77% 52%,98% 71%,69% 68%,68% 100%,51% 75%,29% 100%,32% 72%,1% 81%,24% 55%,0 43%,29% 36%,19% 9%,43% 27%)
}
.n1{background:var(--pink)} .n2{background:var(--cyan)} .n3{background:var(--orange)} .n4{background:var(--purple);color:white}
.step-visual{height:135px;display:grid;place-items:center;margin-bottom:19px}
.laptop{
  width:180px;height:95px;margin-left:auto;margin-right:auto;border:8px solid #c8ccd4;border-bottom-width:14px;
  background:#080b10;color:var(--pink);font:800 14px var(--display);transform:rotate(3deg);box-shadow:5px 6px 0 #000
}
.phone{
  width:75px;height:130px;margin-left:auto;margin-right:auto;border:8px solid #d7d9df;border-radius:12px;background:#08090d;box-shadow:5px 6px 0 #000
}
.fake-qr{
  display:block;width:43px;height:43px;background:
    linear-gradient(90deg,#fff 25%,transparent 25% 50%,#fff 50% 75%,transparent 75%),
    linear-gradient(#fff 25%,transparent 25% 50%,#fff 50% 75%,transparent 75%);
  background-size:13px 13px
}
.mini-ai{
  width:135px;height:115px;margin:auto;background:#0b0f16;border:10px solid #d6d9de;box-shadow:7px 7px 0 #000;
  grid-template-columns:1fr 1fr;gap:4px;color:var(--cyan);font:800 42px var(--display);transform:rotate(-3deg)
}
.mini-ai em{grid-column:1/-1;color:var(--pink);font-style:normal;font-size:44px;text-align:center;margin-top:-30px}
.emoji{font-size:96px;filter:drop-shadow(5px 6px 0 #000)}
.step-card h3{font:800 21px/1.08 var(--display);margin:0 0 10px}
.step-card p{color:#b8bdc7;font-size:13px;line-height:1.5;margin:0}
.more-than-game{
  margin-top:40px;min-height:160px;padding:26px 36px 26px 250px;position:relative;border-top:1px solid #29313a;border-bottom:1px solid #29313a;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px
}
.compact-bubble{left:10px;top:14px;font-size:21px;transform:rotate(-6deg)}
.more-than-game ul{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 28px;padding:0;margin:0;list-style:none}
.more-than-game li{font-size:13px;font-weight:700}
.more-than-game li::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--pink);color:#fff;margin-right:8px}
.good-people{font-size:16px;text-align:right}

.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.kicker{font:700 11px var(--display);letter-spacing:.12em;color:var(--cyan)}
.about h2{font:800 clamp(48px,5.5vw,85px)/.94 var(--display);letter-spacing:-.045em;margin:18px 0 0}
.about h2 span{color:var(--pink)}
.about-right p{font-size:18px;line-height:1.7;color:#bec3cc;margin:0 0 30px}
blockquote{
  margin:0;padding:26px 28px;background:var(--paper);color:#111;font:800 26px/1.25 var(--display);
  transform:rotate(1deg);box-shadow:8px 8px 0 #000;clip-path:polygon(1% 5%,98% 0,100% 89%,94% 100%,4% 96%,0 18%)
}
.tiny-chaos{
  margin-top:20px;background:transparent;color:var(--cyan);border:0;padding:5px 0;cursor:pointer;font:700 11px var(--display);letter-spacing:.08em
}

.faq .paper-title{margin-bottom:34px}
.faq-list{max-width:980px;margin-left:auto}
.faq details{border-top:1px solid #30353f;padding:22px 0}
.faq details:last-child{border-bottom:1px solid #30353f}
.faq summary{font:700 20px var(--display);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--pink);font-size:28px}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);line-height:1.7;max-width:800px}

.final-cta{
  min-height:260px;padding-top:54px;padding-bottom:60px;display:grid;grid-template-columns:.8fr 1.6fr .55fr;gap:30px;align-items:center
}
.paper-title.tilted{transform:rotate(-4deg)}
.final-buttons{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.bye{font-size:22px;text-align:center}
.footer{
  min-height:96px;border-top:1px solid #30323b;display:grid;grid-template-columns:180px 1fr 2fr 1fr;gap:22px;align-items:center;color:#8c919d;font-size:10px
}
.footer-logo{width:160px}
.footer nav{display:flex;gap:22px;justify-content:center;font-weight:800;color:#bec1c7}
.footer strong{text-align:right;color:white;text-decoration:underline}

/* Modal */
.modal-layer{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);
  display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:.18s
}
.modal-layer.open{opacity:1;pointer-events:auto}
.join-modal{
  width:min(100%,510px);background:#0c0e14;border:2px solid #343845;padding:34px;position:relative;
  box-shadow:16px 18px 0 #000,0 0 0 3px #0c0e14,0 0 0 5px var(--pink);
  clip-path:polygon(1% 3%,96% 0,100% 11%,98% 96%,8% 100%,0 89%)
}
.modal-x{
  position:absolute;right:20px;top:15px;border:0;background:transparent;color:white;font-size:32px;cursor:pointer
}
.join-modal h2{font:800 56px/.92 var(--display);margin:16px 0}
.join-modal h2 b{color:var(--pink)}
.join-modal p{color:var(--muted);line-height:1.5}
.join-modal input,.player-screen input{
  width:100%;height:78px;background:#050609;color:white;border:3px solid #424755;outline:0;padding:0 18px;
  font:800 34px var(--display);letter-spacing:.1em;text-transform:uppercase;box-shadow:5px 6px 0 #000
}
.join-modal input:focus,.player-screen input:focus{border-color:var(--cyan)}
.form-error{min-height:20px;margin-top:13px;color:#ff628d;font-weight:700;font-size:12px}
.toast{
  position:fixed;z-index:2000;left:50%;bottom:28px;transform:translate(-50%,30px);background:#f4f1e9;color:#0b0b0e;
  padding:14px 22px;font:700 12px var(--display);opacity:0;pointer-events:none;transition:.18s;box-shadow:6px 7px 0 #000
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#ff5f7d}

/* Rooms */
.room-page{min-height:100vh}
.room-topbar{justify-content:space-between}
.room-pill{font:700 12px var(--display);border:1px solid #393e49;padding:10px 16px}
.room-pill b{color:var(--cyan)}
.lobby{
  max-width:1480px;margin:0 auto;padding:35px 42px 70px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px
}
.lobby-main,.players-panel{
  min-height:620px;background:#0b0d12;border:2px solid #262b34;position:relative;padding:40px;box-shadow:9px 10px 0 #000
}
.lobby-main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background-image:radial-gradient(circle at 50% 55%,rgba(3,227,242,.08),transparent 40%)
}
.lobby-kicker{font:700 10px var(--display);letter-spacing:.15em;color:#989eaa}
.lobby-main h1,.player-screen h1,.not-found-screen h1{
  font:800 clamp(58px,7vw,105px)/.86 var(--display);letter-spacing:-.045em;margin:17px 0
}
.lobby-main h1 span,.player-screen h1 span,.not-found-screen h1 span{color:var(--pink)}
.lobby-main>p{color:#b2b8c3}.lobby-main>p b{color:var(--cyan)}
.mega-code{
  font:800 clamp(78px,11vw,178px)/.9 var(--display);letter-spacing:.08em;color:var(--cyan);margin:23px 0 35px;
  text-shadow:9px 9px 0 #000,0 0 26px rgba(3,227,242,.25)
}
.host-actions{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.join-url{margin-top:27px;color:#6e7480;font:600 12px ui-monospace,monospace}
.host-hint{margin-top:23px;max-width:560px;color:#747b87;font-size:11px;line-height:1.5}
.players-panel{padding:24px}
.players-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #30353e;padding:0 3px 17px}
.players-header h2{font:800 25px var(--display);margin:0}
.players-header span{font:700 10px var(--display);color:var(--cyan)}
.player-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.nobody{min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#747a85}
.nobody strong{font:800 25px var(--display);margin-top:20px;color:#c2c7ce}
.nobody small{margin-top:6px}
.mini-monitor-face{
  width:150px;height:125px;border:9px solid #d8d9db;background:#070b11;box-shadow:8px 8px 0 #000;
  display:grid;grid-template-columns:1fr 1fr;place-items:center;color:var(--cyan);font:800 36px var(--display);transform:rotate(-3deg)
}
.mini-monitor-face b{grid-column:1/-1;color:var(--pink);font-size:48px;line-height:.5;margin-top:-22px}
.player-row{
  min-height:64px;padding:10px 12px;border:1px solid #2f3540;background:#10131a;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;
  clip-path:polygon(0 7%,98% 0,100% 90%,3% 100%)
}
.player-avatar{display:grid;place-items:center;width:40px;height:40px;background:var(--purple);font:700 13px var(--display);box-shadow:4px 4px 0 #000}
.player-row strong{font:700 15px var(--display)}
.player-row i{font-style:normal;font:700 9px var(--display);color:var(--cyan)}
.host-ai-line{
  grid-column:1/-1;background:#f1eee8;color:#0e0e12;padding:18px 24px;display:flex;gap:16px;align-items:center;
  transform:rotate(-.4deg);box-shadow:8px 8px 0 #000;font:700 14px var(--display)
}
.host-ai-line span{color:var(--pink)}

.player-screen{
  min-height:calc(100vh - 100px);padding:30px 20px 60px;display:grid;place-items:center
}
.join-card,.waiting-card{
  width:min(100%,560px);background:#0b0d12;border:2px solid #2d333d;padding:35px;box-shadow:10px 12px 0 #000;position:relative;text-align:center
}
.join-logo{width:330px;height:160px;object-fit:contain;margin-top:-15px}
.join-card .small-bubble{
  top:-12px;right:-25px;left:auto;font-size:15px;padding:12px 18px;transform:rotate(7deg)
}
.player-screen h1{font-size:56px}
.player-screen input{text-align:center;margin-top:16px}
.waiting-face{
  width:235px;height:190px;margin:10px auto 35px;border:13px solid #e6e4de;background:#060a10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;box-shadow:10px 10px 0 #000;transform:rotate(-3deg)
}
.waiting-face .ai-eyes{gap:60px}
.waiting-face .ai-eyes i{width:37px;height:12px}
.waiting-face .ai-eyes i::after{width:37px;height:12px}
.waiting-face .ai-mouth{width:90px;height:50px;border-width:8px}
.waiting-face .ai-mouth span{width:45px;height:28px;left:24px;top:26px}
.waiting-card h1{font-size:42px}
.waiting-card p{color:#a5abb5;line-height:1.55}
.waiting-pulse{margin-top:28px;color:var(--cyan);font:700 12px var(--display);letter-spacing:.12em;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.45}}
.hidden{display:none!important}
.not-found-screen{min-height:calc(100vh - 100px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.not-found-screen .compact-bubble{position:relative;left:auto;top:auto;margin-bottom:10px}
.not-found-screen p{color:#959ca7;margin:5px 0 35px}

@media(max-width:1100px){
  .topnav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-art{height:600px;max-width:720px;width:100%;margin:0 auto}
  .mode-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .final-cta{grid-template-columns:1fr;text-align:center}
  .footer{grid-template-columns:160px 1fr 1fr}.footer nav{display:none}
  .lobby{grid-template-columns:1fr}.players-panel{min-height:400px}.nobody{min-height:280px}
}
@media(max-width:720px){
  .shell,.topbar,.room-topbar{padding-left:18px;padding-right:18px}
  .topbar{padding-top:13px;padding-bottom:13px}
  .mini-logo{width:112px;height:44px}
  .lang{display:none}
  .comic-button.compact{padding:0 16px}
  .hero{padding-top:15px;padding-bottom:55px}
  .hero-logo-wrap{height:180px;margin-left:-18px;width:calc(100% + 36px)}
  .hero-title{font-size:clamp(48px,15vw,72px)}
  .hero-desc{font-size:15px}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:16px}
  .comic-button.giant{width:100%;justify-content:center}
  .feature-strip{grid-template-columns:1fr;gap:12px}
  .feature-mini{border-right:0;border-bottom:1px solid #292e37;padding:7px 4px 14px}
  .feature-mini:last-child{border:0}
  .hero-art{height:490px;margin-top:8px}
  .note-tagline{font-size:12px;right:7%}
  .hello{left:-4%;top:55px;font-size:14px;padding:13px 16px}
  .hear{right:-4%;top:71px;font-size:14px;padding:13px 16px}
  .crown-top{font-size:45px;top:72px;left:48%}
  .monitor-wrap{left:4%;right:-4%;top:120px;height:310px}
  .monitor{border-width:10px;padding:22px 25px 38px}
  .ai-eyes{gap:63px}.ai-eyes i,.ai-eyes i::after{width:38px;height:13px}
  .ai-mouth{width:96px;height:56px;border-width:9px}
  .ai-mouth span{width:45px;height:30px;left:24px;top:27px}
  .mic{left:-2%;bottom:50px;transform:rotate(22deg) scale(.72)}
  .equation-note{right:-7%;top:220px;font-size:11px;padding:8px 10px}
  .host-label{left:23%;bottom:36px;padding:9px 20px;font-size:11px}
  .domain-note{font-size:19px;right:2%;bottom:0}
  .section{padding-top:70px;padding-bottom:76px}
  .section-heading{display:block}
  .section-heading .hand-note{margin:24px 0 0 10px;font-size:13px}
  .paper-title h2{font-size:31px}
  .mode-grid,.steps-grid{grid-template-columns:1fr}
  .mode-card{min-height:335px}
  .more-than-game{padding:155px 12px 25px;display:block}
  .compact-bubble{left:50%;transform:translateX(-50%) rotate(-6deg);top:17px}
  .more-than-game ul{grid-template-columns:1fr}
  .good-people{text-align:left;margin-top:25px}
  .about h2{font-size:51px}
  .about-right p{font-size:16px}
  blockquote{font-size:20px}
  .final-cta{padding-top:50px;padding-bottom:70px}
  .footer{grid-template-columns:1fr 1fr;padding-top:20px;padding-bottom:25px}.footer-logo{width:130px}.footer>span{display:none}
  .lobby{padding:20px 16px 50px}
  .lobby-main,.players-panel{padding:24px;min-height:auto}
  .mega-code{font-size:70px}
  .host-actions{display:grid;width:100%}.host-actions .comic-button{width:100%}
  .host-ai-line{display:block;line-height:1.5}
  .host-ai-line span{display:block;margin-bottom:6px}
  .join-card,.waiting-card{padding:25px 20px}
  .player-screen h1{font-size:43px}
  .join-logo{height:135px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}