@tailwind base;
@tailwind components;
@tailwind utilities;

:root{--bg:#04060b;--line:rgba(255,255,255,.105);--muted:#8da0b5;--cyan:#6edcff;--blue:#5476ff;--violet:#a56dff;--green:#71ffc1;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{min-width:320px;overflow-x:hidden;background:var(--bg)}body.menu-open,body.modal-open{overflow:hidden}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{color:inherit}::selection{background:#8de8ff;color:#06121b}
.noscript{position:fixed;z-index:9999;inset:0 0 auto;padding:12px;text-align:center;background:#ffcf69;color:#171007;font-weight:900}
#webgl-canvas,#trail-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#webgl-canvas{z-index:0}#trail-canvas{z-index:7}.noise-layer{position:fixed;z-index:900;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}.vignette-layer{position:fixed;z-index:8;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.38))}
.glass{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),rgba(8,12,21,.65);box-shadow:inset 0 1px rgba(255,255,255,.08),0 32px 100px rgba(0,0,0,.28);backdrop-filter:blur(22px) saturate(130%)}

#cursor{position:fixed;z-index:1000;left:0;top:0;width:28px;height:28px;pointer-events:none!important;transform:translate(-50%,-50%);mix-blend-mode:difference}#cursor i{position:absolute;inset:8px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(108,224,255,.65)}#cursor b{position:absolute;inset:0;border:1px solid rgba(255,255,255,.85);border-radius:50%}
.sound-toggle{position:fixed;z-index:230;right:17px;bottom:17px;min-height:42px;padding:0 13px;display:flex;align-items:center;gap:9px;border-radius:999px;font-size:11px;font-weight:850;cursor:pointer}.sound-toggle>i{width:8px;height:8px;border-radius:50%;background:#68758a}.sound-toggle.active>i{background:var(--green);box-shadow:0 0 18px rgba(113,255,193,.58)}
.site-header{position:fixed;z-index:210;top:0;left:0;right:0;height:86px;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.site-header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.055);font-weight:950}.brand strong{display:block;font-size:14px}.brand small{display:block;color:#75889e;font-size:8px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.desktop-nav{display:flex;gap:4px;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(4,7,13,.5);backdrop-filter:blur(18px)}.desktop-nav a{padding:10px 14px;border-radius:999px;color:#c0ccda;font-size:12px;font-weight:850}.desktop-nav a:hover{background:rgba(255,255,255,.08);color:white}
.menu-toggle{display:none;position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:rgba(6,9,16,.75)}.menu-toggle span{position:absolute;left:12px;width:20px;height:1px;background:#fff;transition:.3s var(--ease)}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}.menu-toggle.open span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;z-index:190;inset:0;padding:120px 22px 40px;display:flex;flex-direction:column;background:rgba(3,5,10,.96);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transform:translateY(-12px)}.mobile-menu.open{opacity:1;visibility:visible;transform:none}.mobile-menu a{padding:20px 0;border-bottom:1px solid var(--line);font-size:clamp(32px,9vw,56px);font-weight:950;letter-spacing:-.055em}

.panel{position:relative;z-index:10}.hero{min-height:100svh;padding:118px 6vw 72px;display:grid;place-items:center;overflow:hidden}.hero-inner{position:relative;z-index:12;width:min(1260px,100%);text-align:center}.hero-kicker{margin-bottom:20px;color:#91a5ba;font-size:clamp(9px,1vw,13px);font-weight:850;letter-spacing:.2em;text-transform:uppercase}.hero-title{margin:0;font-size:clamp(76px,14vw,220px);line-height:.72;letter-spacing:-.095em;font-weight:950}.title-row{display:block}.title-gradient{padding-right:.06em;color:transparent;background:linear-gradient(90deg,#dffaff,#6edcff 28%,#607dff 63%,#af6dff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 16px 50px rgba(89,122,255,.25))}.hero-sub{max-width:740px;margin:38px auto 0;color:#b4c2d2;font-size:clamp(18px,2vw,27px);line-height:1.5}.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}.button-primary,.button-secondary{min-height:56px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:16px;font-size:13px;font-weight:900}.button-primary{color:#061019;background:linear-gradient(135deg,#e5fbff,#85dcff)}.button-secondary{border:1px solid var(--line);background:rgba(255,255,255,.04)}
.hero-ring{position:absolute;z-index:2;left:50%;top:50%;border:1px solid rgba(111,215,255,.13);border-radius:50%;transform:translate(-50%,-50%)}.ring-a{width:min(76vw,1020px);aspect-ratio:1}.ring-b{width:min(54vw,720px);aspect-ratio:1}.compass{position:absolute;z-index:13;right:4vw;bottom:47px;display:grid;justify-items:center;gap:9px}.compass-face{position:relative;width:74px;height:74px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(8,13,24,.46)}.compass-face>span{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#7de1ff;font-size:9px}.compass-needle{position:absolute;left:50%;top:50%;width:2px;height:25px;transform-origin:50% 100%;transform:translate(-50%,-100%);background:linear-gradient(to top,rgba(255,255,255,.2),#79e0ff)}.compass-face>b{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:white}.compass small{color:#71859a;font-size:8px;text-transform:uppercase}.hero-foot{position:absolute;left:4vw;right:4vw;bottom:42px;display:flex;justify-content:space-between;color:#61758a;font-family:ui-monospace,monospace;font-size:9px;text-transform:uppercase}

.statement{min-height:100vh;padding:140px 6vw 90px;display:grid;align-content:center;background:linear-gradient(180deg,rgba(4,6,11,.2),rgba(4,6,11,.86));overflow:hidden}.statement-grid{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:.45fr 2.25fr 1fr;gap:44px}.section-index{color:#708399;font-family:ui-monospace,monospace;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.section-title{margin:0;font-size:clamp(48px,7.2vw,112px);line-height:.92;letter-spacing:-.07em;font-weight:950}.section-copy{color:var(--muted);font-size:clamp(15px,1.35vw,19px);line-height:1.75}.marquee{margin-top:110px;overflow:hidden;border-block:1px solid var(--line);transform:rotate(-2deg) scale(1.04)}.marquee-track{width:max-content;padding:20px 0;display:flex;gap:28px;color:#91a6bb;font-size:clamp(16px,2vw,28px);font-weight:900;letter-spacing:.08em}.marquee-track i{color:var(--cyan);font-style:normal}

.apps{padding:140px 6vw;background:radial-gradient(circle at 50% 35%,rgba(65,106,255,.12),transparent 35%),rgba(4,6,11,.94)}.section-head{width:min(1240px,100%);margin:0 auto 65px;display:grid;grid-template-columns:1.8fr .7fr;gap:60px;align-items:end}.apps-grid{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1400px}.app-card{position:relative;min-height:575px;padding:26px;display:flex;flex-direction:column;overflow:hidden;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),rgba(9,13,23,.78);box-shadow:0 30px 80px rgba(0,0,0,.25);transform-style:preserve-3d;cursor:pointer}.card-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}.card-glow{position:absolute;width:310px;height:310px;right:-100px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(96,211,255,.26),transparent 68%)}.card-top,.app-icon,.card-copy,.card-tags,.card-open{position:relative;z-index:2;transform:translateZ(35px)}.card-top{display:flex;justify-content:space-between}.card-top>span{color:#71849a;font-family:ui-monospace,monospace}.card-top small{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#adc0d2;font-size:9px;text-transform:uppercase}.app-icon{width:110px;height:110px;margin-top:62px;display:grid;place-items:center;border-radius:31px;font-size:46px;font-weight:950;box-shadow:inset -15px -18px 30px rgba(0,0,0,.28),inset 10px 10px 22px rgba(255,255,255,.2),0 30px 55px rgba(0,0,0,.26)}.icon-glossa{background:linear-gradient(145deg,#8ce7ff,#427dff 55%,#172d73)}.icon-scan{color:#0b2032;background:linear-gradient(145deg,#fff,#8eeaff 45%,#1872b7)}.icon-fynta{background:linear-gradient(145deg,#a5d6ff,#3d739c 50%,#12283a)}.card-copy{margin-top:auto}.card-copy h3{margin:0;font-size:clamp(38px,4vw,58px);letter-spacing:-.065em;font-weight:950}.card-copy p{margin:13px 0 0;color:#9badc0}.card-tags{margin-top:24px;display:flex;gap:7px;flex-wrap:wrap}.card-tags span{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);font-size:9px;text-transform:uppercase}.card-open{margin-top:24px;padding-top:20px;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:12px}

.playground{padding:120px 4vw}.playground-shell{width:min(1420px,100%);margin:auto;padding:36px;border-radius:38px}.playground-head .section-title{margin-top:10px}.playground-grid{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.game-card{padding:20px;border:1px solid var(--line);border-radius:25px;background:rgba(2,5,11,.58);position:relative;z-index:30;pointer-events:auto!important}.game-title{display:flex;justify-content:space-between;gap:20px;align-items:center}.game-title small{color:#6edcff;font-family:ui-monospace,monospace;font-size:9px;text-transform:uppercase}.game-title h3{margin:5px 0 0;font-size:24px;letter-spacing:-.04em}.score-cluster{display:flex;gap:8px}.score-cluster span{padding:8px 10px;border:1px solid var(--line);border-radius:11px;color:#8194a8;font-family:ui-monospace,monospace;font-size:8px}.score-cluster b{display:block;margin-top:3px;color:#d2f7ff;font-size:14px}
#hyper-clicker-zone,#chaos-sandbox-zone,#hyper-field,#chaos-field{pointer-events:auto!important;position:relative;z-index:30}.hyper-field,.chaos-field{height:520px;margin-top:16px;overflow:hidden;border:1px solid rgba(103,220,255,.14);border-radius:19px;background:radial-gradient(circle,rgba(62,108,170,.12),transparent 45%),#02050b;touch-action:none}.hyper-field canvas,.chaos-field canvas{position:absolute;inset:0;width:100%;height:100%;z-index:31;pointer-events:auto!important}.hyper-message{position:absolute;z-index:35;left:50%;top:18%;transform:translate(-50%,-50%);font-family:ui-monospace,monospace;font-size:32px;font-weight:950;opacity:0}.game-overlay{position:absolute;z-index:40;inset:0;display:grid;place-content:center;justify-items:center;gap:15px;background:rgba(2,5,11,.86);backdrop-filter:blur(8px)}.game-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.game-overlay p{max-width:430px;padding:0 20px;text-align:center;color:#99adbf}.game-button,.mini-button{padding:13px 17px;border:1px solid rgba(103,220,255,.28);border-radius:13px;background:rgba(103,220,255,.1);font-size:11px;font-weight:900;cursor:pointer;pointer-events:auto!important;position:relative;z-index:45}.chaos-field p{position:absolute;z-index:32;left:15px;bottom:12px;margin:0;color:#65788c;font-size:10px;pointer-events:none}

.idea{padding:150px 6vw;background:radial-gradient(circle at 20% 40%,rgba(77,126,255,.11),transparent 28%),#070a12}.idea-layout{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.idea-layout .section-title{margin-top:14px}.idea-layout .section-copy{margin-top:24px}.idea-form{padding:32px;border-radius:31px}.honeypot{position:absolute!important;left:-9999px!important}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.idea-form label{position:relative;display:grid;gap:9px}.idea-form label>span{color:#8da0b4;font-size:10px;text-transform:uppercase}.idea-form input,.idea-form textarea{width:100%;padding:16px 17px;border:1px solid var(--line);outline:none;border-radius:15px;background:rgba(255,255,255,.035);color:white}.idea-form textarea{min-height:210px;resize:vertical}.idea-form input:focus,.idea-form textarea:focus{border-color:rgba(103,220,255,.45);box-shadow:0 0 0 4px rgba(103,220,255,.06)}.idea-form label>i{position:absolute;left:17px;right:17px;bottom:0;height:1px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--violet))}.idea-form label:focus-within>i{transform:scaleX(1);transition:.4s}.full{margin-top:14px}.form-bottom{margin-top:18px;display:flex;justify-content:space-between;gap:22px;align-items:center}.form-bottom p{max-width:390px;margin:0;color:#6f8297;font-size:11px}.form-bottom p.error{color:#ff9cb6}.form-bottom p.success{color:#8fffc8}.idea-submit{position:relative;min-width:178px;min-height:56px;padding:0 19px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;border:1px solid rgba(103,220,255,.28);border-radius:16px;background:rgba(103,220,255,.09);cursor:pointer}.idea-submit span,.idea-submit b{position:relative;z-index:2}.idea-submit>i{position:absolute;width:130px;height:130px;left:-100px;top:50%;transform:translateY(-50%);border-radius:50%;background:linear-gradient(145deg,#7ee4ff,#5576ff);transition:.5s}.idea-submit:hover{color:#07111b}.idea-submit:hover>i{left:50%;transform:translate(-50%,-50%) scale(2.2)}

.footer{position:relative;z-index:10;padding:45px 6vw;display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);background:#030509}.footer p{margin:6px 0 0;color:#718399;font-size:11px}
.app-modal,.alert-modal{position:fixed;z-index:700;inset:0;padding:80px 20px;display:grid;place-items:center;background:rgba(3,5,10,.96);backdrop-filter:blur(20px);opacity:0;visibility:hidden}.app-modal.open,.alert-modal.open{opacity:1;visibility:visible}.modal-close{position:fixed;right:20px;top:20px;padding:12px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06)}.modal-content{width:min(920px,100%);text-align:center}.modal-index{color:#6edcff;font-family:ui-monospace,monospace;font-size:10px}.modal-icon{width:140px;height:140px;margin:34px auto;display:grid;place-items:center;border-radius:38%;background:linear-gradient(145deg,#8ce7ff,#427dff,#172d73);font-size:64px;font-weight:950}.modal-content h2{margin:0;font-size:clamp(64px,10vw,145px);line-height:.82;letter-spacing:-.085em}.modal-content>p{max-width:720px;margin:26px auto;color:#a9bacb;font-size:19px;line-height:1.7}.modal-specs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.modal-specs span{padding:10px 13px;border:1px solid var(--line);border-radius:999px;font-size:10px;text-transform:uppercase}
.alert-box{width:min(480px,100%);padding:34px;border-radius:28px;text-align:center}.alert-icon{width:65px;height:65px;margin:auto;display:grid;place-items:center;border-radius:50%;background:rgba(113,255,193,.12);color:#89ffc8;font-size:28px}.alert-box h3{font-size:32px;margin:20px 0 8px}.alert-box p{color:#9aacbd;line-height:1.6}.alert-box button{margin-top:18px}

.split-char,.split-word{display:inline-block}
@media(max-width:1024px){#cursor{display:none}.desktop-nav{display:none}.menu-toggle{display:block}.statement-grid,.section-head,.idea-layout{grid-template-columns:1fr}.apps-grid{grid-template-columns:1fr;max-width:760px}.playground-grid{grid-template-columns:1fr}}
@media(max-width:680px){.site-header{height:76px;padding:12px 14px}.brand small{display:none}.sound-toggle{right:10px;bottom:10px}.hero{padding:105px 18px 85px}.hero-title{font-size:clamp(64px,22vw,106px)}.hero-sub{font-size:17px}.compass{right:15px;bottom:25px;transform:scale(.78)}.hero-foot{left:17px;right:auto;bottom:24px}.hero-foot span:last-child{display:none}.statement,.apps,.idea{padding:100px 18px}.section-title{font-size:47px}.app-card{min-height:500px;padding:22px}.playground{padding:85px 10px}.playground-shell{padding:20px 12px}.game-title{align-items:flex-start;flex-direction:column}.score-cluster{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.hyper-field,.chaos-field{height:430px}.idea-form{padding:20px}.form-row{grid-template-columns:1fr}.form-bottom{align-items:stretch;flex-direction:column}.idea-submit{width:100%}.footer{padding:35px 18px 80px;align-items:flex-start;flex-direction:column}}
@media(pointer:coarse){#cursor{display:none}.tilt-card{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}#trail-canvas{display:none}}


/* Playground reliability patch */
#hyper-canvas,
#chaos-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 31 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: auto !important;
  touch-action: none;
}

#hyper-clicker-zone,
#chaos-sandbox-zone,
#hyper-field,
#chaos-field,
#hyper-start-button,
#chaos-clear {
  pointer-events: auto !important;
}

.game-overlay {
  pointer-events: auto;
}

.game-overlay.hidden {
  pointer-events: none !important;
}

#hyper-start-button,
#chaos-clear {
  position: relative;
  z-index: 60 !important;
}


/* Five-game playground */
.playground-selector{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}
.play-tab{
  min-height:48px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#7f92a7;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto!important;
  position:relative;
  z-index:50;
  transition:.25s var(--ease);
}
.play-tab:hover{color:white;background:rgba(255,255,255,.05)}
.play-tab.active{
  color:#071019;
  border-color:rgba(255,255,255,.35);
  background:linear-gradient(135deg,#e5fbff,#85dcff);
  box-shadow:0 14px 34px rgba(103,220,255,.16);
}
.playground-stage{margin-top:20px}
.play-panel{display:none}
.play-panel.active{display:block}
.play-panel[hidden]{display:none!important}
.game-card{min-height:620px}
.game-surface,.memory-field{
  height:540px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid rgba(103,220,255,.14);
  border-radius:19px;
  background:radial-gradient(circle,rgba(62,108,170,.12),transparent 45%),#02050b;
  touch-action:none;
  pointer-events:auto!important;
  position:relative;
  z-index:30;
}
.game-surface canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  pointer-events:auto!important;
  z-index:31!important;
}
.scanline{
  position:absolute;
  z-index:34;
  left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,220,255,.7),transparent);
  animation:scanline 5s linear infinite;
  pointer-events:none;
}
.surface-note{
  position:absolute;
  z-index:32;
  left:15px;
  bottom:12px;
  margin:0;
  color:#65788c;
  font-size:10px;
  pointer-events:none;
}
.memory-field{display:grid;place-items:center}
.memory-grid{
  width:min(440px,78%);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  transform:rotate(45deg);
}
.memory-pad{
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  cursor:pointer;
  pointer-events:auto!important;
  position:relative;
  z-index:33;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.memory-pad:hover{transform:scale(1.03)}
.pad-0{background:linear-gradient(145deg,#133350,#1f85bf)}
.pad-1{background:linear-gradient(145deg,#39245d,#8b55d8)}
.pad-2{background:linear-gradient(145deg,#144738,#36b27d)}
.pad-3{background:linear-gradient(145deg,#573f19,#d89c35)}
.memory-pad.active{
  filter:brightness(1.9) saturate(1.35);
  box-shadow:0 0 36px currentColor;
  transform:scale(1.06);
}
@media(max-width:900px){
  .playground-selector{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .playground-selector{grid-template-columns:1fr}
  .game-card{min-height:560px}
  .game-surface,.memory-field{height:440px}
}


/* Playground hidden-canvas initialization fix v3.1 */
.play-panel {
  width: 100%;
}
.play-panel.active {
  display: block !important;
}
.play-panel:not(.active) {
  display: none !important;
}
.play-panel.is-preparing .game-surface,
.play-panel.is-preparing .memory-field {
  opacity: .55;
}
.play-tab[disabled] {
  opacity: .5;
  cursor: wait;
}


/* Chaos Sandbox performance hint */
#chaos-canvas{
  contain:strict;
  will-change:contents;
  image-rendering:auto;
}


/* Final long-play games v4.0 */
.playground-selector{margin-top:32px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}
.play-tab{min-height:48px;padding:10px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:#7f92a7;font-size:11px;font-weight:900;cursor:pointer;pointer-events:auto!important;position:relative;z-index:50}
.play-tab.active{color:#071019;background:linear-gradient(135deg,#e5fbff,#85dcff);box-shadow:0 14px 34px rgba(103,220,255,.16)}
.playground-stage{margin-top:20px}.play-panel{display:none;width:100%}.play-panel.active{display:block!important}.play-panel[hidden]{display:none!important}
.game-card{min-height:620px}.game-surface,.merge-field{height:540px;margin-top:16px;overflow:hidden;border:1px solid rgba(103,220,255,.14);border-radius:19px;background:radial-gradient(circle,rgba(62,108,170,.12),transparent 45%),#02050b;touch-action:none;pointer-events:auto!important;position:relative;z-index:30}
.game-surface canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;pointer-events:auto!important;z-index:31!important}
.merge-field{display:grid;place-items:center;padding:28px}
.merge-board{width:min(430px,82%);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(255,255,255,.035)}
.merge-cell{display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.045);font-size:clamp(20px,4vw,42px);font-weight:950;color:#dffaff;box-shadow:inset 0 1px rgba(255,255,255,.05);transition:.16s var(--ease)}
.merge-cell[data-value="2"]{background:#15304c}.merge-cell[data-value="4"]{background:#19476b}.merge-cell[data-value="8"]{background:#275b91}.merge-cell[data-value="16"]{background:#3d5cc0}.merge-cell[data-value="32"]{background:#664fc8}.merge-cell[data-value="64"]{background:#8d4cc6}.merge-cell[data-value="128"]{background:#b44b9e}.merge-cell[data-value="256"]{background:#d45f74}.merge-cell[data-value="512"]{background:#e0814e}.merge-cell[data-value="1024"],.merge-cell[data-value="2048"]{background:#f0bf4c;color:#141009;box-shadow:0 0 25px rgba(240,191,76,.35)}
.merge-help{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;color:#687b90;font-size:10px;white-space:nowrap}
@media(max-width:900px){.playground-selector{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.playground-selector{grid-template-columns:1fr}.game-card{min-height:560px}.game-surface,.merge-field{height:440px}.merge-field{padding:18px}.merge-board{width:min(350px,90%)}}


/* Typography and mobile-control polish v4.1 */
.hero-title{
  font-size:clamp(68px,12.4vw,188px);
  line-height:.78;
  letter-spacing:-.085em;
}
.title-row{
  width:max-content;
  max-width:100%;
  margin-inline:auto;
}
.title-gradient{
  padding-right:.035em;
  padding-bottom:.04em;
}
.playground-head{
  display:block;
}
.playground-head .section-title{
  max-width:100%;
  margin-top:12px;
  line-height:.92;
}
.playground-head .section-copy{
  max-width:720px;
  margin:22px 0 0;
  line-height:1.7;
}
.playground-shell{
  overflow:visible;
}
.game-title h3{
  line-height:1.05;
}
@media(max-width:900px){
  .hero-title{
    font-size:clamp(64px,15vw,132px);
    line-height:.8;
  }
}
@media(max-width:680px){
  .hero-title{
    font-size:clamp(56px,20vw,96px);
    line-height:.82;
    letter-spacing:-.075em;
  }
  .hero-kicker{
    letter-spacing:.15em;
  }
  .playground-head .section-title{
    font-size:44px;
    line-height:.94;
  }
  .playground-head .section-copy{
    margin-top:16px;
    font-size:15px;
  }
}


/* Labs visibility fix v4.2 */
.title-gradient {
  color: #83ddff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.title-gradient .split-char {
  color: #83ddff;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #dffaff 0%,
    #6edcff 30%,
    #607dff 66%,
    #af6dff 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 32px rgba(89, 122, 255, .22));
}

/* Browsers without background-clip:text keep a visible cyan fallback. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-gradient .split-char {
    color: #83ddff;
    -webkit-text-fill-color: #83ddff;
    background: none;
  }
}


/* Labs final color + clipping fix v4.3 */
.hero-title,
.title-row,
.title-gradient {
  overflow: visible !important;
}

.title-gradient {
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  padding-left: .03em !important;
  padding-right: .13em !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #55c7ff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

.title-gradient .split-char {
  display: inline-block;
  overflow: visible !important;
  color: #55c7ff !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  text-shadow:
    0 0 18px rgba(55, 180, 255, .18),
    0 10px 35px rgba(45, 90, 210, .18);
}

/* Refined left-to-right premium blue spectrum */
.title-gradient .split-char:nth-child(1) {
  color: #bcefff !important;
  -webkit-text-fill-color: #bcefff !important;
}
.title-gradient .split-char:nth-child(2) {
  color: #72d8ff !important;
  -webkit-text-fill-color: #72d8ff !important;
}
.title-gradient .split-char:nth-child(3) {
  color: #4fb8ff !important;
  -webkit-text-fill-color: #4fb8ff !important;
}
.title-gradient .split-char:nth-child(4) {
  color: #5f86ff !important;
  -webkit-text-fill-color: #5f86ff !important;
}

/* Protect the final S from being clipped by transforms or viewport bounds */
.title-gradient .split-char:last-child {
  padding-right: .08em !important;
  margin-right: .02em !important;
  transform-origin: center center !important;
}

@media (max-width: 680px) {
  .title-gradient {
    max-width: calc(100% - 20px) !important;
    padding-right: .16em !important;
  }

  .title-gradient .split-char:last-child {
    padding-right: .1em !important;
  }
}


/* Rebuilt games v5.0 */
#snake-field,
#brick-field,
#slice-field {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
}

#snake-canvas,
#brick-canvas,
#slice-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

#snake-start,
#snake-end,
#brick-start,
#brick-end,
#slice-start,
#slice-end {
  z-index: 50 !important;
}

#snake-start.hidden,
#snake-end.hidden,
#brick-start.hidden,
#brick-end.hidden,
#slice-start.hidden,
#slice-end.hidden {
  pointer-events: none !important;
}

.slice-flash {
  position: absolute;
  z-index: 38;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
  color: #dffaff;
  font-family: ui-monospace, monospace;
  font-size: clamp(20px, 4vw, 44px);
  font-weight: 950;
  pointer-events: none;
  opacity: 0;
}


/* Desktop game input reliability v5.1 */
#snake-field,
#brick-field,
#slice-field,
#snake-canvas,
#brick-canvas,
#slice-canvas {
  cursor: crosshair;
}

#brick-field,
#brick-canvas {
  cursor: none;
}

@media (pointer: fine) {
  #snake-field,
  #brick-field,
  #slice-field {
    pointer-events: auto !important;
  }
}


/* Clean playground rebuild v6.0 */
.playground-selector{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}
.play-tab{
  min-height:48px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#8295aa;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto!important;
  position:relative;
  z-index:60;
}
.play-tab.active{
  color:#071019;
  background:linear-gradient(135deg,#e8fbff,#84dcff);
}
.play-panel{display:none;width:100%}
.play-panel.active{display:block!important}
.play-panel[hidden]{display:none!important}
.game-card{min-height:620px}
.game-surface{
  height:540px;
  margin-top:16px;
  position:relative!important;
  z-index:30!important;
  overflow:hidden;
  border:1px solid rgba(103,220,255,.14);
  border-radius:20px;
  background:radial-gradient(circle,rgba(52,102,170,.12),transparent 45%),#02050b;
  pointer-events:auto!important;
  touch-action:none!important;
  user-select:none;
  -webkit-user-select:none;
}
.game-surface canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  z-index:31!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.game-overlay{
  z-index:50!important;
  pointer-events:auto!important;
}
.game-overlay.hidden{
  pointer-events:none!important;
}
@media(max-width:900px){
  .playground-selector{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .playground-selector{grid-template-columns:1fr}
  .game-surface{height:440px}
  .game-card{min-height:560px}
}