:root{
  --bg:#0b0d10;
  --ink:#f3f6ff;

  --stroke:rgba(243,246,255,.92);
  --strokeSoft:rgba(243,246,255,.30);
  --strokeVerySoft:rgba(243,246,255,.16);

  --radius:22px;
  --pad:14px;

  --scoreH: 56px;
  --sidebarW: 92px;
  --nextBoxH: 78px;
  --nextInlineSize: 46px;
  --boardW: 360px;
  --boardH: 640px;
  --gap: 12px;

  --shadow: 0 18px 46px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(900px 600px at 50% 20%, rgba(255,255,255,.06), rgba(0,0,0,0)),
              var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:none;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 800px at 50% 20%, rgba(255,255,255,.05), rgba(0,0,0,0)),
    radial-gradient(800px 600px at 70% 80%, rgba(140,180,255,.04), rgba(0,0,0,0));
  animation: drift 16s ease-in-out infinite alternate;
  opacity:.6;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.12;
  mix-blend-mode: soft-light;
}

@keyframes drift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-16px,8px,0); }
}

.app{
  width:100%;
  max-width:none;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  position:relative;
}

.scorebar{
  width:var(--boardW);
  margin-left: 0;
  height: var(--scoreH);
  border:1px solid rgba(243,246,255,.25);
  border-radius: var(--radius);
  background: rgba(255,255,255,.01);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 0 10px;
  user-select:none;
  column-gap: 12px;
  position:relative;
  overflow:hidden;
}
.scorebar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:40%;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.6;
}

.scorebar .left{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:10px;
  color:rgba(243,246,255,.75);
  justify-self:start;
}
.metric{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.metricLabel{
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(243,246,255,.55);
}
.metricValue{
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink);
  display:inline-block;
}
.scoreValue.pop{
  animation: scorePop .22s ease-out;
}
.scorePlate{
  padding:6px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 12px rgba(0,0,0,.25);
  position:relative;
}
.scorePlate::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:10px;
  background: radial-gradient(120px 60px at 50% 30%, rgba(140,180,255,.18), rgba(0,0,0,0));
  opacity:0;
  pointer-events:none;
}
.scorePlate.flash::after{
  animation: scoreFlash .28s ease-out;
}
.levelMetric .metricValue{
  color:rgba(243,246,255,.78);
}

.scorebar .right{
  display:flex;
  gap:8px;
  align-items:center;
  justify-self:end;
}
.controlCluster{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius: 16px;
  border:1px solid rgba(243,246,255,.22);
  background: rgba(0,0,0,.22);
}
.scorebar .center{
  display:flex;
  align-items:center;
  gap:8px;
  justify-self:center;
}
.nextInline{
  display:flex;
  align-items:center;
  gap:10px;
}
.miniBtn{
  width:30px;
  height:30px;
  border-radius: 12px;
  border:1px solid rgba(243,246,255,.22);
  background: rgba(0,0,0,.18);
  color:rgba(243,246,255,.70);
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
  transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.miniBtn:hover{
  box-shadow: 0 0 0 2px rgba(120,200,255,.18), 0 0 10px rgba(120,200,255,.25);
  color:rgba(243,246,255,.88);
}
.miniBtn:active{
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.miniBtn .icon{
  width:14px;
  height:14px;
  display:block;
}
.miniBtn .icon-play{ display:none; }
.miniBtn.is-paused .icon-play{ display:block; }
.miniBtn.is-paused .icon-pause{ display:none; }
.miniBtn .icon-sound-off{ display:none; }
.miniBtn.is-muted .icon-sound-off{ display:block; }
.miniBtn.is-muted .icon-sound-on{ display:none; }
#btnSound.sound-on{
  box-shadow: 0 0 0 2px rgba(120,200,255,.10), 0 0 12px rgba(120,200,255,.25);
  animation: breathe 2.6s ease-in-out infinite;
}

@keyframes breathe{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

.frame{
  flex:0 0 auto;
  width:var(--boardW);
  height:var(--boardH);
  border:0;
  border-radius: var(--radius);
  background: rgba(255,255,255,.01);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 14px 26px rgba(0,0,0,.32);
  overflow:hidden;
  position:relative;
  padding: 0;
  min-height:0;
}
.frame::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:36%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.7;
}

.play::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(220px 220px at 50% 28%, rgba(255,255,255,.06), rgba(0,0,0,0)),
    radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.55));
  opacity:.9;
}

.inner{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  min-height:0;
}

.play{
  position:relative;
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
  min-height:0;
}

canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering: pixelated;
}

.sidebar{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  align-items:stretch;
  justify-content:center;
}

.nextBox{
  height: var(--nextBoxH);
  border:0;
  border-radius: 18px;
  background: transparent;
  position:relative;
  overflow:hidden;
}
.nextBoxInline{
  height: var(--nextInlineSize);
  width: var(--nextInlineSize);
  border:0;
  border-radius: 12px;
}
.nextBox canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}

.toast{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: 10px;
  padding:8px 12px;
  border-radius:14px;
  border:2px solid var(--strokeVerySoft);
  background: rgba(0,0,0,.30);
  color:rgba(243,246,255,.82);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  white-space:nowrap;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

.splash{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 24px 18px;
  background:
    radial-gradient(480px 260px at 20% 20%, rgba(255,255,255,.10), rgba(0,0,0,0)),
    radial-gradient(520px 320px at 80% 0%, rgba(255,145,145,.10), rgba(0,0,0,0)),
    rgba(10,12,16,.92);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.splash::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(600px 420px at 20% 30%, rgba(140,180,255,.08), rgba(0,0,0,0)),
    radial-gradient(520px 380px at 80% 70%, rgba(255,146,92,.06), rgba(0,0,0,0));
  opacity:.5;
  animation: splashDrift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
.splash.show{
  opacity:1;
  pointer-events:auto;
}
.splash.show .splashCard{
  animation: cardIn .35s ease-out;
}
.splash.is-gameover.show .splashCard{
  animation: cardUp .4s ease-out;
}
.splashCard{
  width:min(360px, 90%);
  padding:20px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.30));
  text-align:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transform: translateY(0);
  position:relative;
  display:flex;
  margin-bottom: 1rem;
  align-items:center;
  justify-content:center;
}
.splashCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(120,200,255,.6), rgba(255,126,196,.5), rgba(255,214,110,.55));
  opacity:.55;
  z-index:-1;
}
.splashCard::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius: 16px;
  background: radial-gradient(180px 90px at 50% 20%, rgba(140,180,255,.16), rgba(0,0,0,0));
  box-shadow: inset 0 0 18px rgba(255,255,255,.06);
  z-index:-1;
}
.splashLogo{
  max-width:min(260px, 80%);
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.splashLogo img{
  width:100%;
  height:auto;
  display:block;
}
.primaryBtn{
  padding:12px 26px;
  border-radius: 14px;
  border:2px solid rgba(255,255,255,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12));
  color:var(--ink);
  font-weight:900;
  font-size:14px;
  letter-spacing:.18em;
  margin: 1rem;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  margin-top:-2px;
  animation: playPulse 2.8s ease-in-out infinite;
}
.primaryBtn:active{ transform: translateY(1px) scale(.99); }
.splashScore{
  width:min(320px, 88%);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding:8px 12px;
  background: rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.scoreRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  letter-spacing:.06em;
  font-size:12px;
  color:rgba(243,246,255,.8);
}
.scoreRow b{
  color:var(--ink);
  font-size:14px;
}
.scoreRow.high{
  color:rgba(243,246,255,.95);
}
.scoreRow.high b{
  color:rgba(255,214,110,.95);
  text-shadow: 0 0 12px rgba(255,214,110,.35);
}
.scoreRow.last{
  color:rgba(243,246,255,.55);
  font-size:11px;
}
.scoreRow.last b{
  font-size:12px;
  color:rgba(243,246,255,.7);
}
.splashNote,
.splashControls{
  width:min(360px, 90%);
  border:2px solid var(--strokeVerySoft);
  border-radius: 14px;
  padding:10px 12px;
  font-size:12px;
  color:rgba(243,246,255,.78);
  background: rgba(0,0,0,.22);
  text-align:center;
}
.splashControls{
  font-size:11px;
  letter-spacing:.04em;
}

@keyframes cardIn{
  0%{ transform: translateY(6px) scale(.98); opacity:.6; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes cardUp{
  0%{ transform: translateY(16px) scale(.98); opacity:.6; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes playPulse{
  0%{ transform: translateY(0) scale(1); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
  50%{ transform: translateY(-1px) scale(1.03); box-shadow: 0 16px 34px rgba(0,0,0,.5); }
  100%{ transform: translateY(0) scale(1); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
}
@keyframes splashDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-20px,12px,0); }
}

@keyframes scoreFlash{
  0%{ opacity:0; transform: translateY(4px); }
  50%{ opacity:1; transform: translateY(-2px); }
  100%{ opacity:0; transform: translateY(0); }
}

@keyframes scorePop{
  0%{ transform: translateY(2px) scale(.95); text-shadow: 0 0 0 rgba(0,0,0,0); }
  60%{ transform: translateY(-3px) scale(1.04); text-shadow: 0 0 10px rgba(140,180,255,.55); }
  100%{ transform: translateY(0) scale(1); text-shadow: 0 0 0 rgba(0,0,0,0); }
}

.shake{ animation: shake .18s linear; }
@keyframes shake{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3px,2px)}
  50%{transform:translate(2px,-2px)}
  75%{transform:translate(-2px,-1px)}
  100%{transform:translate(0,0)}
}

@media (max-width: 420px){
  :root{ --sidebarW: 84px; --nextBoxH: 72px; --nextInlineSize: 44px; --scoreH: 54px; }
  .miniBtn{ width:28px; height:28px; border-radius: 10px; }
  .miniBtn .icon{ width:13px; height:13px; }
  .scorebar{ border-width:2px; padding:0 8px; }
  .scorebar .left{ gap:8px; font-size:10px; }
  .metricValue{ font-size:14px; }
  .controlCluster{ padding:3px 4px; gap:4px; }
}
@media (max-width: 360px){
  .inner{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .sidebar{
    flex-direction:row;
    justify-content:space-between;
  }
  .nextBox{
    flex:1;
    height: 68px;
  }
}