body.arcade-page{
  background:#050608;
}
body.arcade-page .onen-dominus-indicator{
  display:none!important;
}
body.arcade-page .chat-main > .grid-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.92;
}
body.arcade-page .chat-main > .grid-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(52% 36% at 50% 8%, rgba(0,212,255,.12), transparent 76%),
    radial-gradient(28% 28% at 82% 14%, rgba(77,124,255,.12), transparent 74%),
    linear-gradient(180deg, rgba(5,6,8,.08) 0%, rgba(5,6,8,.38) 100%);
}
body.arcade-page .chat-main > .grid-bg canvas{
  width:100%;
  height:100%;
}
body.arcade-page .app.app-shell{
  position:relative;
  z-index:1;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
}
body.arcade-page .chat-main{
  min-height:0;
  overflow:hidden;
  position:relative;
}
body.arcade-page .chat-main > .main{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
body.arcade-page.onen-signal-bg .chat-main{
  background:
    radial-gradient(58% 42% at 50% 8%, rgba(0,200,240,.12), transparent 76%),
    radial-gradient(30% 28% at 86% 16%, rgba(77,124,255,.12), transparent 78%),
    linear-gradient(180deg, rgba(5,6,8,.56) 0%, rgba(7,10,16,.72) 100%);
}
body.arcade-page.onen-signal-bg .chat-main::before{
  opacity:.18;
}
body.arcade-page.onen-signal-bg .chat-main::after{
  opacity:.12;
}
.main{
  --arc-gap:12px;
  --arc-cyan-soft:color-mix(in srgb,var(--cyan) 18%, transparent);
  --arc-cyan-mid:color-mix(in srgb,var(--cyan) 38%, transparent);
  --arc-cyan-strong:color-mix(in srgb,var(--cyan) 72%, transparent);
  max-width:1220px;
  margin:0 auto;
  padding:30px 20px 56px;
  position:relative;
  overflow:hidden;
}
.main > *{position:relative;z-index:1}
.main::before,
.main::after{
  content:"";
  position:absolute;
  inset:-140px -180px;
  pointer-events:none;
  z-index:0;
}
.main::before{
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb,var(--cyan) 18%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 26%, color-mix(in srgb,var(--cyan) 12%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 76%, color-mix(in srgb,var(--cyan) 10%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 0, color-mix(in srgb,var(--cyan) 16%, transparent), transparent 44%);
  opacity:.38;
  animation:arc-drift 34s linear infinite;
}
.main::after{
  background:
    linear-gradient(color-mix(in srgb,var(--cyan) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--cyan) 4%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.1;
  animation:arc-grid 10s ease-in-out infinite;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:20px;
  align-items:stretch;
  margin-bottom:30px;
}
.hero-copy,
.hero-side{
  position:relative;
  border-radius:28px;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, var(--border) 82%);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 92%, #06101a 8%),color-mix(in srgb,var(--layer2) 84%, #040a12 16%));
  box-shadow:
    0 30px 82px rgba(0,0,0,.3),
    0 0 0 1px color-mix(in srgb,var(--cyan) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -28px 48px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.hero-copy{
  padding:30px 28px 26px;
  transform:translate3d(var(--hero-shift-x,0),var(--hero-shift-y,0),0);
  transition:transform .45s ease;
}
.hero-copy::before,
.hero-copy::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.hero-copy::before{
  width:440px;
  height:440px;
  right:-120px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--cyan) 28%, transparent) 0, color-mix(in srgb,var(--cyan) 12%, transparent) 30%, transparent 70%);
  filter:blur(10px);
  animation:hero-pulse 6.4s ease-in-out infinite;
}
.hero-copy::after{
  left:-40px;
  bottom:-90px;
  width:320px;
  height:220px;
  background:linear-gradient(130deg,color-mix(in srgb,var(--cyan) 18%, transparent),transparent 70%);
  filter:blur(28px);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--layer1) 84%, #06101a 16%);
  border:1px solid color-mix(in srgb,var(--cyan) 34%, transparent);
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 0 30px color-mix(in srgb,var(--cyan) 14%, transparent);
}
.hero-kicker span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 75%, transparent);
}
.hero-copy h1{
  margin:18px 0 0;
  font-size:clamp(38px,6vw,58px);
  line-height:.94;
  letter-spacing:-.05em;
  color:color-mix(in srgb,var(--text) 94%, #f4fbff 6%);
  text-shadow:0 0 30px color-mix(in srgb,var(--cyan) 14%, transparent);
}
.hero-copy p{
  margin:14px 0 0;
  max-width:58ch;
  font-size:15px;
  line-height:1.68;
  color:color-mix(in srgb,var(--sub) 80%, var(--text) 20%);
}
.hero-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:12px;
  color:color-mix(in srgb,var(--muted) 76%, var(--text) 24%);
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 30%, transparent);
  animation:arc-pulse 2.7s ease-in-out infinite;
}
.hero-rail{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.hero-pill{
  min-width:132px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 76%, #05111a 24%),color-mix(in srgb,var(--layer2) 84%, #07111d 16%));
  border:1px solid color-mix(in srgb,var(--cyan) 16%, var(--border) 84%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -16px 24px rgba(0,0,0,.12);
}
.hero-pill .k{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 82%, var(--text) 18%);
}
.hero-pill .v{
  margin-top:6px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.hero-side{
  padding:18px;
  display:grid;
  gap:14px;
}
.hero-side::before{
  content:"";
  position:absolute;
  left:-18%;
  top:-12%;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 14%, transparent),transparent 72%);
  filter:blur(18px);
  pointer-events:none;
}
.hero-chip{
  position:relative;
  padding:16px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--cyan) 16%, var(--border) 84%);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 88%, #07111b 12%),color-mix(in srgb,var(--layer2) 80%, #050c15 20%));
  overflow:hidden;
}
.hero-chip::before{
  content:"";
  position:absolute;
  inset:auto -30% -55% auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 22%, transparent),transparent 70%);
  filter:blur(14px);
}
.hero-chip .k{
  position:relative;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
}
.hero-chip .v{
  position:relative;
  margin-top:8px;
  font-size:14px;
  line-height:1.45;
  color:var(--text);
}
.hero-spectrum{
  border-radius:22px;
  border:1px solid color-mix(in srgb,var(--cyan) 24%, transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 86%, #06101b 14%),color-mix(in srgb,var(--layer2) 74%, #040a12 26%));
  padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -18px 26px rgba(0,0,0,.1);
}
.hero-spectrum .label{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.hero-spectrum .bars{
  display:grid;
  gap:10px;
}
.hero-spectrum .bar{
  position:relative;
  height:10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--layer2) 90%, transparent);
  overflow:hidden;
}
.hero-spectrum .bar::after{
  content:"";
  position:absolute;
  inset:0;
  width:var(--fill,50%);
  border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 18%, transparent),color-mix(in srgb,var(--cyan) 70%, transparent));
  box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 24%, transparent);
  animation:bar-breathe 4.4s ease-in-out infinite;
}
.section-block{margin-top:34px}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.section-block:last-of-type .section-head{margin-bottom:28px}
.section-head h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.03em;
  color:var(--text);
}
.section-head p{
  margin:6px 0 0;
  font-size:13px;
  color:color-mix(in srgb,var(--sub) 82%, var(--text) 18%);
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card{
  position:relative;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--cyan) 14%, var(--border) 86%);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb,var(--cyan) 12%, transparent), transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 94%, #07101a 6%),color-mix(in srgb,var(--layer2) 84%, #040a12 16%));
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:318px;
  box-shadow:
    0 28px 68px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb,var(--cyan) 6%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -20px 38px rgba(0,0,0,.1);
  backdrop-filter:blur(14px);
  transform:translateY(0) scale(1);
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.card > *{
  position:relative;
  z-index:1;
}
.card::before,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.card::before{
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb,var(--cyan) 20%, transparent), transparent 30%),
    linear-gradient(160deg,rgba(255,255,255,.06),transparent 30%,transparent 70%,rgba(255,255,255,.02));
  opacity:.96;
}
.card::after{
  inset:auto 16px 0 16px;
  height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 58%, transparent),transparent);
  opacity:.62;
}
.card:hover,
.card:focus-within{
  transform:translateY(-5px) scale(1.01);
  border-color:color-mix(in srgb,var(--cyan) 46%, var(--border));
  box-shadow:
    0 34px 86px rgba(0,0,0,.3),
    0 0 0 1px color-mix(in srgb,var(--cyan) 18%, transparent),
    0 0 28px color-mix(in srgb,var(--cyan) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 40px color-mix(in srgb,var(--cyan) 10%, transparent);
}
.card:active{transform:translateY(-1px) scale(.992)}
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.card-mark{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 24%, transparent),color-mix(in srgb,var(--cyan) 8%, #07111b 92%));
  border:1px solid color-mix(in srgb,var(--cyan) 32%, transparent);
  color:var(--cyan);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px color-mix(in srgb,var(--cyan) 14%, transparent);
}
.card-mark svg{width:24px;height:24px}
.stat-pill{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--layer1) 76%, #07111a 24%);
  border:1px solid color-mix(in srgb,var(--cyan) 12%, var(--border) 88%);
  font-size:11px;
  color:color-mix(in srgb,var(--sub) 84%, var(--text) 16%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card-pill-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.card-eye{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
}
.card-title{
  font-size:20px;
  line-height:1.16;
  color:var(--text);
  font-weight:700;
  letter-spacing:-.03em;
}
.card-copy{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:84px;
}
.card-sub{
  font-size:13px;
  color:color-mix(in srgb,var(--sub) 82%, var(--text) 18%);
  line-height:1.68;
}
.card-preview{
  position:relative;
  min-height:108px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--cyan) 12%, var(--border) 88%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb,var(--cyan) 16%, transparent), transparent 52%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 82%, #07111b 18%),color-mix(in srgb,var(--layer2) 92%, #040a12 8%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -18px 28px rgba(0,0,0,.14);
  overflow:hidden;
}
.preview-grid,
.preview-stack,
.preview-pads,
.preview-wave{
  position:absolute;
  inset:12px;
}
.preview-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:8px;
}
.preview-grid .piece{
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 26%, var(--layer2)),color-mix(in srgb,var(--cyan) 10%, var(--layer1)));
  box-shadow:0 10px 24px color-mix(in srgb,var(--cyan) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.preview-grid .piece.empty{
  background:color-mix(in srgb,var(--layer1) 70%, transparent);
  border:1px dashed color-mix(in srgb,var(--cyan) 12%, transparent);
  box-shadow:none;
}
.preview-stack{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:10px;
}
.preview-stack .slot{
  border-radius:14px;
  background:rgba(3,8,14,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -10px 18px rgba(0,0,0,.1);
}
.preview-stack .slot.tile2{background:linear-gradient(180deg,rgba(236,244,255,.88),rgba(212,224,235,.78))}
.preview-stack .slot.tile4{background:linear-gradient(180deg,rgba(214,230,241,.9),rgba(191,207,220,.82))}
.preview-stack .slot.tile8{background:linear-gradient(180deg,rgba(122,194,223,.92),rgba(93,162,194,.86))}
.preview-stack .slot.tile16{background:linear-gradient(180deg,rgba(63,175,214,.96),rgba(34,138,178,.9))}
.preview-pads{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:10px;
}
.preview-pads .pad-dot{
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 72%, transparent),color-mix(in srgb,var(--layer2) 90%, transparent));
  border:1px solid color-mix(in srgb,var(--border) 75%, transparent);
  position:relative;
}
.preview-pads .pad-dot::after{
  content:"";
  position:absolute;
  inset:28%;
  border-radius:50%;
  background:color-mix(in srgb,var(--cyan) 56%, transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 28%, transparent);
  opacity:.55;
}
.preview-pads .pad-dot.active::after{
  opacity:1;
  animation:pad-breathe 2.8s ease-in-out infinite;
}
.preview-wave{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.preview-wave .line{
  flex:1;
  min-height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 55%, transparent),color-mix(in srgb,var(--cyan) 12%, transparent));
  box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 14%, transparent);
  height:var(--h,50%);
}
.preview-cards{
  position:absolute;
  inset:14px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:center;
}
.mini-memory-card{
  aspect-ratio:3 / 4;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:700;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, var(--border) 82%);
  box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.mini-memory-card.back{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--cyan) 18%, transparent),transparent 56%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 88%, #07101a 12%),color-mix(in srgb,var(--layer2) 96%, #040a12 4%));
}
.mini-memory-card.back::after{
  content:"";
  width:52%;
  height:52%;
  border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--cyan) 42%, transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 16%, transparent);
}
.mini-memory-card.front{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 26%, var(--layer2)),color-mix(in srgb,var(--cyan) 8%, var(--layer1)));
  color:var(--text);
}
.preview-scoreline{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  background:color-mix(in srgb,var(--layer1) 90%, #07111a 10%);
  border:1px solid color-mix(in srgb,var(--cyan) 18%, transparent);
}
.card-bottom{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:2px;
}
.card-meta{
  display:grid;
  gap:10px;
  padding-top:2px;
}
.card-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.status-cell{
  border:1px solid color-mix(in srgb,var(--cyan) 12%, var(--border) 88%);
  border-radius:16px;
  padding:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 88%, #07111a 12%),color-mix(in srgb,var(--layer2) 96%, #040a12 4%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.status-cell .k{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.status-cell .v{
  margin-top:7px;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
  font-weight:650;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  font-size:12px;
  color:color-mix(in srgb,var(--sub) 82%, var(--text) 18%);
  line-height:1.45;
}
.meta-row span,
.meta-row strong{
  display:block;
  max-width:58%;
}
.meta-row strong{
  color:var(--text);
  font-weight:650;
  text-align:right;
  line-height:1.4;
}
.btn-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
  padding-top:4px;
}
.btn{
  position:relative;
  border:none;
  border-radius:16px;
  padding:11px 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
  min-height:46px;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid transparent;
  transition:opacity .16s ease,border-color .16s ease;
  opacity:0;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn,
.game-choice-btn,
.pad,
.tile,
.board,
.choice-grid{
  -webkit-tap-highlight-color:transparent;
}
.btn.primary{
  background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 90%, #dff9ff 10%),color-mix(in srgb,var(--indigo) 72%, var(--cyan) 28%));
  color:#03111a;
  box-shadow:0 14px 28px color-mix(in srgb,var(--cyan) 26%, transparent), 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover,
.btn.primary:focus-visible{
  transform:translateY(-1px);
  box-shadow:
    0 18px 34px color-mix(in srgb,var(--cyan) 28%, transparent),
    0 10px 24px rgba(0,0,0,.24),
    0 0 0 4px color-mix(in srgb,var(--cyan) 12%, transparent),
    0 0 32px color-mix(in srgb,var(--cyan) 20%, transparent);
}
.btn.primary:hover::before,
.btn.primary:focus-visible::before{
  opacity:1;
  border-color:color-mix(in srgb,var(--cyan) 34%, transparent);
}
.btn.ghost{
  background:color-mix(in srgb,var(--layer1) 76%, #06101a 24%);
  color:var(--text);
  border:1px solid color-mix(in srgb,var(--cyan) 10%, var(--border) 90%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.btn.ghost:hover,
.btn.ghost:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cyan) 30%, var(--border));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 10%, transparent), 0 0 24px color-mix(in srgb,var(--cyan) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
.launch-copy{
  font-size:11px;
  color:color-mix(in srgb,var(--muted) 76%, var(--text) 24%);
  line-height:1.5;
  padding-top:2px;
  max-width:34ch;
}
.daily-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid color-mix(in srgb,var(--cyan) 30%, var(--border));
  background:
    radial-gradient(circle at top right,color-mix(in srgb,var(--cyan) 24%, transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 94%, #06101a 6%),color-mix(in srgb,var(--layer2) 82%, #040a12 18%));
  border-radius:26px;
  padding:30px 24px 24px 28px;
  box-shadow:
    0 26px 68px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb,var(--cyan) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 4px 0 0 color-mix(in srgb,var(--cyan) 42%, transparent);
  overflow:hidden;
}
.daily-card + .grid{margin-top:26px}
.daily-card::after{
  content:"";
  position:absolute;
  inset:auto -60px -60px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 20%, transparent),transparent 68%);
  filter:blur(10px);
}
.daily-copy{
  position:relative;
  z-index:1;
}
.daily-copy h3{
  margin:0;
  font-size:22px;
  letter-spacing:-.03em;
  color:var(--text);
}
.daily-copy p{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.65;
  color:var(--sub);
  max-width:54ch;
}
.daily-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
  margin-bottom:10px;
}
.daily-kicker span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 16px color-mix(in srgb,var(--cyan) 55%, transparent);
}
.daily-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.daily-cta{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:152px;
  position:relative;
  z-index:1;
}
.daily-badge{
  padding:8px 10px;
  border-radius:999px;
  font-size:11px;
  color:var(--text);
  background:color-mix(in srgb,var(--layer1) 78%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 78%, transparent);
}
.game-shell{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center,color-mix(in srgb,var(--cyan) 12%, transparent),transparent 38%),
    rgba(4,7,13,.62);
  backdrop-filter:blur(22px) saturate(1.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}
.game-shell.open{opacity:1;pointer-events:auto}
.arcade-presence{
  position:relative;
  z-index:2;
  display:grid;
  gap:2px;
  width:max-content;
  max-width:min(100%,320px);
  margin:0 0 18px auto;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--cyan) 26%, transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 84%, #07111a 16%),color-mix(in srgb,var(--layer2) 94%, #040a12 6%));
  box-shadow:0 16px 32px rgba(0,0,0,.2), 0 0 24px color-mix(in srgb,var(--cyan) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
}
.arcade-presence .presence-title{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
  white-space:nowrap;
}
.arcade-presence .presence-state{
  font-size:12px;
  color:var(--text);
}
.game-panel{
  display:flex;
  flex-direction:column;
  width:min(1080px,100%);
  max-height:min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px),920px);
  background:
    radial-gradient(circle at top right,color-mix(in srgb,var(--cyan) 10%, transparent),transparent 26%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 97%, transparent),color-mix(in srgb,var(--layer2) 92%, transparent));
  border:1px solid color-mix(in srgb,var(--border) 82%, transparent);
  border-radius:30px;
  padding:24px;
  box-shadow:
    0 46px 110px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.02),
    inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(22px) scale(.975);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.game-shell.open .game-panel{transform:translateY(0) scale(1)}
.game-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex:0 0 auto;
}
.game-head h2{
  margin:0;
  font-size:28px;
  color:var(--text);
  letter-spacing:-.04em;
}
.game-head p{
  margin:8px 0 0;
  font-size:13px;
  color:var(--sub);
  line-height:1.55;
  max-width:56ch;
}
.close-btn{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--border) 88%, transparent);
  background:color-mix(in srgb,var(--layer1) 78%, transparent);
  color:var(--text);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.close-btn:hover,
.close-btn:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cyan) 26%, var(--border));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 8%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
.close-btn:active{transform:translateY(1px) scale(.98)}
.game-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
  min-height:0;
  overflow:auto;
  padding-right:2px;
}
.surface{
  position:relative;
  min-width:0;
  border:1px solid color-mix(in srgb,var(--border) 82%, transparent);
  background:
    radial-gradient(circle at top,color-mix(in srgb,var(--cyan) 7%, transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 94%, transparent),color-mix(in srgb,var(--layer2) 94%, transparent));
  border-radius:26px;
  padding:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -18px 28px rgba(0,0,0,.1);
}
.surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.04),transparent 26%,transparent 72%,rgba(255,255,255,.015));
}
.surface > *{position:relative;z-index:1}
.surface.game-enter{
  animation:surface-in .34s cubic-bezier(.2,.8,.2,1);
}
.game-side{
  display:grid;
  gap:12px;
}
.metric{
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 88%, transparent),color-mix(in srgb,var(--layer2) 94%, transparent));
  padding:15px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.metric .k{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.metric .v{
  margin-top:7px;
  font-size:22px;
  line-height:1;
  color:var(--text);
  font-weight:700;
  letter-spacing:-.04em;
}
.hint{
  font-size:12px;
  color:var(--sub);
  line-height:1.62;
}
.instruction{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 16px;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, transparent);
  background:color-mix(in srgb,var(--layer1) 78%, transparent);
  color:var(--sub);
  font-size:12px;
  line-height:1.6;
}
.instruction strong{color:var(--text)}
.instruction::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:4px;
  background:var(--cyan);
  box-shadow:0 0 16px color-mix(in srgb,var(--cyan) 48%, transparent);
  flex:0 0 auto;
}
.status-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 82%, transparent),color-mix(in srgb,var(--layer2) 92%, transparent));
  margin-bottom:14px;
}
.status-banner .title{
  font-size:13px;
  color:var(--text);
  font-weight:700;
}
.status-banner .sub{
  margin-top:4px;
  font-size:12px;
  color:var(--sub);
}
.status-banner.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 12%, transparent), 0 0 34px color-mix(in srgb,var(--cyan) 10%, transparent);
}
.status-banner.solved{
  animation:solved-pulse .9s ease;
}
.board-frame{
  display:grid;
  gap:16px;
}
.board{
  position:relative;
  width:min(100%,448px,calc(100dvh - 320px));
  aspect-ratio:1 / 1;
  margin:0 auto;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(7,14,24,.96),rgba(9,15,24,.84));
  border:1px solid color-mix(in srgb,var(--border) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -20px 40px rgba(0,0,0,.28),
    0 24px 48px rgba(0,0,0,.22);
  overflow:hidden;
  touch-action:none;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.board.board-live{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -20px 40px rgba(0,0,0,.28),
    0 24px 48px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in srgb,var(--cyan) 18%, transparent),
    0 0 34px color-mix(in srgb,var(--cyan) 14%, transparent);
}
.board.board-solved{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -20px 40px rgba(0,0,0,.22),
    0 24px 48px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb,var(--cyan) 26%, transparent),
    0 0 54px color-mix(in srgb,var(--cyan) 22%, transparent);
}
.board-grid{
  position:absolute;
  inset:14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:var(--arc-gap);
}
.cell{
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), inset 0 -10px 16px rgba(0,0,0,.18);
}
.tile-layer{
  position:absolute;
  inset:14px;
}
.tile{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  line-height:1;
  padding:0;
  font-variant-numeric:tabular-nums;
  -moz-font-feature-settings:"tnum";
  -webkit-font-feature-settings:"tnum";
  font-feature-settings:"tnum";
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease,
    color .18s ease;
  transform:translate3d(0,0,0);
}
.tile > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
}
.tile.pop{animation:tile-pop .22s ease}
.tile.merge{animation:merge-flare .32s ease}
.tile.puzzle{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 30%, var(--layer2)),color-mix(in srgb,var(--cyan) 10%, var(--layer1)));
  box-shadow:
    0 16px 30px color-mix(in srgb,var(--cyan) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px color-mix(in srgb,var(--cyan) 18%, transparent);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.tile.grid{
  will-change:transform;
  letter-spacing:-.05em;
}
.value-pulse{animation:value-pulse .28s ease}
.overlay{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(7,11,18,.62);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.overlay.show{opacity:1;pointer-events:auto}
.overlay-card{
  max-width:340px;
  border-radius:22px;
  padding:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 96%, transparent),color-mix(in srgb,var(--layer2) 92%, transparent));
  border:1px solid color-mix(in srgb,var(--cyan) 24%, var(--border));
  text-align:center;
  box-shadow:0 22px 44px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.overlay-card h3{
  margin:0;
  font-size:22px;
  color:var(--text);
  letter-spacing:-.03em;
}
.overlay-card p{
  margin:10px 0 0;
  font-size:13px;
  color:var(--sub);
  line-height:1.6;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  background:color-mix(in srgb,var(--layer1) 90%, transparent);
  font-size:10px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.status-badge strong{
  color:var(--text);
  font-size:12px;
  letter-spacing:normal;
  text-transform:none;
}
.memory-board-wrap{
  display:flex;
  justify-content:center;
  overflow:auto;
  padding-bottom:4px;
}
.memory-board{
  --memory-cols:4;
  width:min(100%,560px);
  display:grid;
  grid-template-columns:repeat(var(--memory-cols),minmax(0,1fr));
  gap:12px;
  margin:0 auto;
  perspective:1200px;
}
.memory-board.board-live{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 14%, transparent),0 0 24px color-mix(in srgb,var(--cyan) 10%, transparent);
  border-radius:24px;
  padding:8px;
}
.memory-board.cleared{
  animation:solved-pulse .8s ease;
}
.memory-card{
  border:none;
  background:none;
  padding:0;
  aspect-ratio:3 / 4;
  perspective:1200px;
  cursor:pointer;
}
.memory-card-inner{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.memory-card.flipped .memory-card-inner{
  transform:rotateY(180deg);
}
.memory-card.matched .memory-card-inner{
  opacity:.28;
  transform:rotateY(180deg) scale(.96);
}
.memory-card-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, var(--border) 82%);
  box-shadow:0 16px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.memory-card-back{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--cyan) 16%, transparent),transparent 56%),
    linear-gradient(180deg,color-mix(in srgb,var(--layer1) 92%, #07101a 8%),color-mix(in srgb,var(--layer2) 98%, #040a12 2%));
}
.memory-card-back::before,
.memory-card-back::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--cyan) 26%, transparent);
}
.memory-card-back::before{
  inset:22%;
}
.memory-card-back::after{
  inset:34%;
}
.memory-card-front{
  transform:rotateY(180deg);
  font-size:clamp(20px,3vw,28px);
  font-weight:700;
  color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 28%, var(--layer2)),color-mix(in srgb,var(--cyan) 10%, var(--layer1)));
  text-shadow:0 1px 0 rgba(0,0,0,.16);
}
.memory-card.matched .memory-card-front{
  box-shadow:0 0 0 1px rgba(0,223,160,.34), 0 0 28px rgba(0,223,160,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.pad-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  max-width:420px;
  margin:0 auto;
  transition:box-shadow .16s ease,transform .16s ease;
}
.pad-grid.board-live{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 16%, transparent),0 0 26px color-mix(in srgb,var(--cyan) 14%, transparent);
  border-radius:28px;
}
.pad{
  aspect-ratio:1 / 1;
  border-radius:24px;
  border:1px solid color-mix(in srgb,var(--border) 78%, transparent);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -18px 28px rgba(0,0,0,.18);
}
.pad::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 45%,rgba(0,0,0,.08));
  opacity:.55;
}
.pad::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 42%, transparent),transparent 70%);
  opacity:.4;
  transition:opacity .14s ease,transform .14s ease;
}
.pad.active,
.pad.pressed{
  transform:scale(.975);
  border-color:color-mix(in srgb,var(--cyan) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--cyan) 30%, transparent),
    0 0 36px color-mix(in srgb,var(--cyan) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -18px 28px rgba(0,0,0,.18);
}
.pad.active::after,
.pad.pressed::after{
  opacity:1;
  transform:scale(1.08);
}
.pad.ripple::before{
  animation:pad-ripple .42s ease;
}
.pad.c0{background:linear-gradient(180deg,rgba(86,186,237,.22),rgba(40,82,116,.28))}
.pad.c1{background:linear-gradient(180deg,rgba(86,129,245,.22),rgba(36,54,112,.28))}
.pad.c2{background:linear-gradient(180deg,rgba(67,199,188,.22),rgba(24,76,71,.28))}
.pad.c3{background:linear-gradient(180deg,rgba(205,230,247,.18),rgba(86,102,118,.22))}
.panel-note{
  margin-top:16px;
  text-align:center;
  font-size:12px;
  color:var(--sub);
}
.operative-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--cyan) 18%, transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--cyan) 8%, var(--layer2));
  font-size:13px;
  color:var(--text);
  margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  transition:box-shadow .16s ease,transform .16s ease;
}
.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid.board-live{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 16%, transparent),0 0 28px color-mix(in srgb,var(--cyan) 12%, transparent);
  border-radius:20px;
}
.game-choice-btn{
  min-height:56px;
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  background:color-mix(in srgb,var(--layer1) 92%, transparent);
  color:var(--text);
  font-size:13px;
  font-weight:650;
  padding:12px;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.game-choice-btn:active{transform:translateY(1px) scale(.98)}
.game-choice-btn:hover,
.game-choice-btn:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cyan) 40%, var(--border));
  background:color-mix(in srgb,var(--cyan) 10%, var(--layer1));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 8%, transparent);
}
.game-choice-btn.selected{
  border-color:color-mix(in srgb,var(--cyan) 40%, var(--border));
  background:color-mix(in srgb,var(--cyan) 12%, var(--layer1));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 8%, transparent);
}
.game-choice-btn.correct{
  border-color:rgba(0,223,160,.45);
  background:rgba(0,223,160,.12);
}
.game-choice-btn.wrong{
  border-color:rgba(255,61,90,.42);
  background:rgba(255,61,90,.12);
}
.operative-feed{display:grid;gap:10px}
.operative-bubble{
  padding:13px 14px;
  border-radius:18px;
  background:color-mix(in srgb,var(--layer1) 92%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  font-size:13px;
  color:var(--text);
  line-height:1.6;
}
.analyzing-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-weight:600;
}
.thinking-dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.thinking-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:color-mix(in srgb,var(--cyan) 76%, transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 26%, transparent);
  animation:dot-pulse 1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2){animation-delay:.12s}
.thinking-dots span:nth-child(3){animation-delay:.24s}
.signal-timer{
  height:10px;
  margin:14px 0 16px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb,var(--layer1) 84%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.signal-timer-bar{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 60%, transparent),color-mix(in srgb,var(--cyan) 18%, transparent));
  box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 16%, transparent);
  transition:width .05s linear;
}
.signal-choice{
  min-height:64px;
  font-size:14px;
  letter-spacing:.01em;
}
.operative-bubble small{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
}
.pattern-seq{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.pattern-chip{
  min-width:46px;
  min-height:46px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  background:color-mix(in srgb,var(--layer1) 92%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  color:var(--text);
}
.status-line{
  font-size:12px;
  color:var(--sub);
  text-align:center;
  margin-top:12px;
  min-height:18px;
}
.response-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:color-mix(in srgb,var(--layer1) 92%, transparent);
  border:1px solid color-mix(in srgb,var(--border) 84%, transparent);
  font-size:11px;
  color:var(--text);
  margin:0 auto;
}
.daily-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.summary-stack{display:grid;gap:10px}
.hidden{display:none!important}
@keyframes arc-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 36%, transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--cyan) 0%, transparent)}
}
@keyframes arc-drift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(10px,-8px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes arc-grid{
  0%,100%{opacity:.06}
  50%{opacity:.1}
}
@keyframes hero-pulse{
  0%,100%{transform:scale(.96);opacity:.72}
  50%{transform:scale(1.08);opacity:1}
}
@keyframes bar-breathe{
  0%,100%{opacity:.8}
  50%{opacity:1}
}
@keyframes pad-breathe{
  0%,100%{transform:scale(.92);opacity:.8}
  50%{transform:scale(1.04);opacity:1}
}
@keyframes tile-pop{
  0%{opacity:.4;transform:scale(.88)}
  60%{opacity:1;transform:scale(1.06)}
  100%{transform:scale(1)}
}
@keyframes merge-flare{
  0%{filter:brightness(1);transform:scale(.92)}
  40%{filter:brightness(1.12);transform:scale(1.1)}
  75%{filter:brightness(1.04);transform:scale(1.03)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes value-pulse{
  0%{transform:scale(.94);opacity:.75}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes pad-ripple{
  0%{opacity:.25;transform:scale(.96)}
  55%{opacity:.55;transform:scale(1.03)}
  100%{opacity:.2;transform:scale(1)}
}
@keyframes solved-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 0%, transparent)}
  50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 24%, transparent),0 0 32px color-mix(in srgb,var(--cyan) 18%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 0%, transparent)}
}
@keyframes surface-in{
  0%{opacity:0;transform:translateY(10px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dot-pulse{
  0%,100%{opacity:.3;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}
@keyframes sp-empty-pulse{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 0 rgba(0,212,255,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 18px rgba(0,212,255,.18)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 0 rgba(0,212,255,0)}
}
@keyframes sp-movable-pulse{
  0%,100%{box-shadow:0 16px 30px color-mix(in srgb,var(--cyan) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb,var(--cyan) 18%, transparent)}
  50%{box-shadow:0 16px 30px color-mix(in srgb,var(--cyan) 18%, transparent), 0 0 18px color-mix(in srgb,var(--cyan) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb,var(--cyan) 30%, transparent)}
}
@keyframes sp-board-glow{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -20px 40px rgba(0,0,0,.22), 0 24px 48px rgba(0,0,0,.24), 0 0 0 1px color-mix(in srgb,var(--cyan) 26%, transparent), 0 0 54px color-mix(in srgb,var(--cyan) 22%, transparent)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -20px 40px rgba(0,0,0,.22), 0 24px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(0,212,255,0), 0 0 0 rgba(0,212,255,0)}
}
@keyframes sp-tile-enter{
  0%{opacity:0;transform:scale(.94)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes sp-tile-solved{
  0%{transform:scale(1)}
  45%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
@keyframes sp-modal-panel-in{
  0%{opacity:0;transform:translateY(10px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.game-shell.open.sp-facelift-modal .game-panel{
  animation:sp-modal-panel-in .22s cubic-bezier(.2,.8,.2,1);
}
.surface.sp-facelift-surface{
  display:flex;
  align-items:center;
  min-height:640px;
  padding:16px 18px 18px;
}
.surface.sp-facelift-surface .sp-board-frame{
  width:100%;
  gap:10px;
  justify-items:center;
}
.surface.sp-facelift-surface .sp-difficulty-row{
  width:min(100%,520px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.difficulty-btn{
  min-height:44px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--cyan) 14%, var(--border) 86%);
  background:color-mix(in srgb,var(--layer1) 92%, #07111a 8%);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.difficulty-btn:hover,
.difficulty-btn:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cyan) 40%, var(--border));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 8%, transparent);
}
.difficulty-btn.selected{
  background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 90%, #dff9ff 10%),color-mix(in srgb,var(--indigo) 72%, var(--cyan) 28%));
  color:#04111a;
  border-color:transparent;
  box-shadow:0 14px 28px color-mix(in srgb,var(--cyan) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
}
.surface.sp-facelift-surface .sp-hero-banner,
.surface.sp-facelift-surface .sp-instruction{
  width:min(100%,520px);
}
.surface.sp-facelift-surface .sp-hero-banner{
  margin-bottom:4px;
}
.surface.sp-facelift-surface .sp-instruction{
  margin:0 0 8px;
  padding:10px 12px;
  opacity:.85;
  font-size:11px;
}
.surface.sp-facelift-surface .sp-flash{
  width:min(100%,520px);
  min-height:18px;
  text-align:center;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease;
}
.surface.sp-facelift-surface .sp-flash.show{
  opacity:1;
  transform:translateY(0);
}
.surface.sp-facelift-surface .sp-facelift-board{
  width:min(100%,420px);
  transform:scale(1.04);
  transform-origin:center;
}
.surface.sp-facelift-surface .sp-empty-indicator{
  position:absolute;
  inset:14px auto auto 14px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(4,10,18,.72),rgba(7,12,20,.5));
  border:1px dashed color-mix(in srgb,var(--cyan) 28%, transparent);
  animation:sp-empty-pulse 2.5s ease-in-out infinite;
  pointer-events:none;
}
.surface.sp-facelift-surface .tile.puzzle{
  z-index:2;
  cursor:default;
  transition:
    transform 120ms cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease,
    color .18s ease;
}
.surface.sp-facelift-surface .tile.puzzle[disabled]{
  opacity:.94;
}
.surface.sp-facelift-surface .tile.puzzle.movable{
  cursor:pointer;
  animation:sp-movable-pulse 2.4s ease-in-out infinite;
}
.surface.sp-facelift-surface .tile.puzzle.movable:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0,0,0,.4),
    0 16px 30px color-mix(in srgb,var(--cyan) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px color-mix(in srgb,var(--cyan) 30%, transparent);
}
.surface.sp-facelift-surface .tile.puzzle.movable:active{
  transform:translateY(1px);
}
.surface.sp-facelift-surface .tile.puzzle.stagger{
  animation:sp-tile-enter .22s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--tile-delay,0ms);
}
.surface.sp-facelift-surface .tile.puzzle.restored{
  animation:sp-tile-solved .28s ease 1;
}
.surface.sp-facelift-surface .sp-solved-card{
  max-width:360px;
}
.surface.sp-facelift-surface .sp-solved-kicker{
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:800;
}
.game-side.sp-facelift-side{
  gap:12px;
}
.game-side.sp-facelift-side .sp-side-stack{
  display:grid;
  gap:12px;
}
.game-side.sp-facelift-side .sp-metric{
  padding:18px;
}
.game-side.sp-facelift-side .sp-action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.game-side.sp-facelift-side .sp-hint{
  padding:0 2px;
}
.board.sp-facelift-board.challenge-restored{
  animation:sp-board-glow .6s ease;
}
.board.sp-facelift-board.board-solved{
  animation:sp-board-glow 1.5s ease forwards;
}
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-body{grid-template-columns:1fr}
}
@media (max-width:768px){
  body.arcade-page .chat-main > .grid-bg{opacity:.78}
  .main{padding:18px 14px 110px}
  .hero-copy{padding:24px 20px 20px}
  .hero-copy h1{font-size:38px}
  .hero-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-side{grid-template-columns:1fr}
  .surface.sp-facelift-surface .sp-facelift-board{
    width:min(100%,360px);
    transform:none;
  }
  .surface.sp-facelift-surface .tile.puzzle.movable{
    animation:sp-movable-pulse 1.9s ease-in-out infinite;
  }
  .grid,
  .choice-grid,
  .choice-grid.three,
  .daily-mini-grid{grid-template-columns:1fr}
  .card{min-height:auto;gap:16px}
  .card-copy{min-height:0}
  .card-bottom{gap:12px}
  .card-status-grid{grid-template-columns:1fr}
  .meta-row span,
  .meta-row strong{max-width:none}
  .memory-board{gap:10px}
  .daily-card{flex-direction:column;align-items:flex-start;padding:26px 20px 22px}
  .daily-card + .grid{margin-top:22px}
  .daily-cta{width:100%;justify-content:flex-start;min-width:0}
  .game-shell{
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
    align-items:flex-end;
  }
  .game-panel{
    padding:14px 14px 16px;
    border-radius:22px;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
  }
  .game-head{
    position:sticky;
    top:0;
    z-index:3;
    margin:-14px -14px 12px;
    padding:14px 14px 10px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--layer1) 96%, transparent),color-mix(in srgb,var(--layer1) 82%, transparent),transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .game-head h2{font-size:24px}
  .game-head p{font-size:12px}
  .close-btn{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }
  .surface{padding:16px}
  .board{width:min(100%,340px,calc(100dvh - 300px))}
  .surface.sp-facelift-surface .sp-facelift-board{
    width:min(100%,340px,calc(100dvh - 300px));
  }
  .surface.sp-facelift-surface .sp-difficulty-row{gap:8px}
  .arcade-presence{
    width:min(260px,100%);
    margin:0 0 16px auto;
  }
}
@media (max-width:480px){
  .hero-rail{grid-template-columns:1fr}
  .hero-copy h1{font-size:34px}
  .board-grid,
  .tile-layer{inset:10px}
  .board{border-radius:24px}
  .memory-board{gap:8px}
}
@media (max-width:926px) and (orientation:landscape){
  .game-shell{align-items:stretch}
  .game-panel{
    width:min(100%,980px);
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  }
  .game-head h2{font-size:22px}
  .board,
  .surface.sp-facelift-surface .sp-facelift-board{
    width:min(100%,280px,calc(100dvh - 220px));
  }
}
@media (prefers-reduced-motion: reduce){
  .main::before,
  .main::after,
  .hero-copy,
  .hero-copy::before,
  .hero-dot,
  .hero-spectrum .bar::after,
  .preview-pads .pad-dot.active::after,
  .surface.game-enter,
  .status-banner.solved,
  .tile,
  .pad,
  .card,
  .btn,
  .difficulty-btn,
  .close-btn,
  .value-pulse,
  .board.board-live,
  .board.board-solved,
  .game-shell.open.sp-facelift-modal .game-panel,
  .surface.sp-facelift-surface .tile.puzzle.stagger,
  .surface.sp-facelift-surface .tile.puzzle.restored,
  .surface.sp-facelift-surface .tile.puzzle.movable,
  .surface.sp-facelift-surface .sp-flash,
  .surface.sp-facelift-surface .sp-empty-indicator,
  .memory-card-inner,
  .pad.ripple::before{
    animation:none!important;
    transition:none!important;
  }
}