.overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 3vmin, 16px);
  text-align:center;
  padding:clamp(10px, 4vmin, 24px);
  background:rgba(4,14,10,0.82);
  opacity:0;
  transform:scale(0.96);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .overlay{
    background:rgba(4,14,10,0.7);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}
.overlay.visible{opacity:1;transform:scale(1);pointer-events:auto;}
.overlay-title{
  font-weight:900;
  font-size:clamp(1.05rem, 8vmin, 1.7rem);
  letter-spacing:0.08em;
}
.overlay-hint{
  max-width:22em;
  font-size:clamp(0.72rem, 3.4vmin, 0.86rem);
  color:var(--text-muted);
  letter-spacing:0.02em;
  line-height:1.45;
}
.play-button{
  display:flex;
  align-items:center;
  gap:clamp(6px, 2vmin, 10px);
  max-width:100%;
  padding:clamp(10px, 2.4vmin, 16px) clamp(16px, 5vmin, 32px);
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  font-weight:900;
  font-size:clamp(0.88rem, 3.6vmin, 1.05rem);
  letter-spacing:0.06em;
  box-shadow:0 12px 32px rgba(95,232,154,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.play-button:active{transform:translateY(0) scale(0.96);}
.play-button svg{width:clamp(16px, 4vmin, 22px);height:clamp(16px, 4vmin, 22px);}
.pause-glyph{display:flex;gap:clamp(6px, 1.6vmin, 8px);}
.pause-glyph span{
  width:clamp(6px, 1.6vmin, 9px);
  height:clamp(20px, 7vmin, 34px);
  border-radius:5px;
  background:linear-gradient(180deg, var(--text-primary), rgba(255,255,255,0.6));
  box-shadow:0 0 18px rgba(255,255,255,0.35);
}
.overlay-score{
  font-family:var(--font-mono);
  font-size:clamp(0.9rem, 3.8vmin, 1.1rem);
  color:var(--text-muted);
}
.overlay-score-label{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:0.92em;
  letter-spacing:0.04em;
}
.overlay-score #finalScore{
  color:var(--text-primary);
  font-weight:700;
  font-size:clamp(1.05rem, 5vmin, 1.35rem);
}
.new-best-badge{
  font-size:clamp(0.68rem, 2.8vmin, 0.78rem);
  font-weight:700;
  letter-spacing:0.08em;
  color:#221806;
  background:linear-gradient(135deg, var(--gold), #ffe08a);
  padding:clamp(4px, 1vmin, 5px) clamp(10px, 3vmin, 14px);
  border-radius:var(--radius-pill);
  box-shadow:0 8px 20px rgba(255,203,87,0.35);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.new-best-badge.visible{opacity:1;transform:translateY(0);}
.restart-button{
  max-width:100%;
  padding:clamp(10px, 2.2vmin, 13px) clamp(18px, 5vmin, 30px);
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  font-weight:800;
  font-size:clamp(0.82rem, 3.4vmin, 0.95rem);
  letter-spacing:0.04em;
  box-shadow:0 10px 26px rgba(95,232,154,0.32);
  transition:transform 0.15s ease;
}
.restart-button:active{transform:scale(0.96);}
.toast{
  position:absolute;
  top:clamp(8px, 2vmin, 16px);
  left:50%;
  z-index:4;
  max-width:calc(100% - 20px);
  transform:translateX(-50%) translateY(-12px);
  background:rgba(20,16,12,0.94);
  border:1px solid rgba(255,159,67,0.4);
  color:#ffd9ad;
  font-size:clamp(0.7rem, 2.8vmin, 0.8rem);
  font-weight:600;
  line-height:1.35;
  text-align:center;
  padding:8px 14px;
  border-radius:var(--radius-md);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.22s ease;
}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.dpad{
  --dpad-size:clamp(44px, 7.6vmin, 72px);
  direction:ltr;
  display:none;
  grid-template-columns:repeat(3, var(--dpad-size));
  grid-template-rows:repeat(3, var(--dpad-size));
  gap:clamp(4px, 0.8vmin, 8px);
  flex:0 0 auto;
  touch-action:none;
}
.dpad.visible{display:grid;}
.dpad-btn{
  background:rgba(16,36,28,0.92);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  touch-action:none;
  transition:background 0.12s ease, transform 0.1s ease;
}
.dpad-btn svg{width:42%;height:42%;color:var(--snake-head);}
.dpad-btn:active{background:rgba(95,232,154,0.22);transform:scale(0.92);}
.dpad-up{grid-column:2;grid-row:1;}
.dpad-left{grid-column:1;grid-row:2;}
.dpad-left svg{transform:rotate(-90deg);}
.dpad-center{
  grid-column:2;
  grid-row:2;
  border-radius:50%;
  background:linear-gradient(160deg, rgba(95,232,154,0.2), rgba(95,232,154,0.05));
}
.dpad-center svg{width:36%;height:36%;color:var(--text-primary);}
.dpad-center .icon-pause{display:none;}
.dpad.is-live .dpad-center .icon-play{display:none;}
.dpad.is-live .dpad-center .icon-pause{display:block;}
.dpad-right{grid-column:3;grid-row:2;}
.dpad-right svg{transform:rotate(90deg);}
.dpad-down{grid-column:2;grid-row:3;}
.dpad-down svg{transform:rotate(180deg);}
.control-group{
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  padding:clamp(8px, 1.2vh, 14px) clamp(10px, 1.6vw, 16px);
}
.control-group-title{
  font-size:clamp(0.64rem, 1.6vw, 0.74rem);
  font-weight:700;
  letter-spacing:0.08em;
  line-height:1.3;
  color:var(--text-muted);
  margin-bottom:clamp(6px, 1vh, 10px);
}
.mode-selector{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(6px, 1vw, 8px);
}
.mode-btn{
  min-width:0;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  color:var(--text-muted);
  padding:clamp(8px, 1.2vh, 10px) 4px;
  border-radius:var(--radius-pill);
  font-size:clamp(0.74rem, 2.4vw, 0.88rem);
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.15;
  overflow-wrap:anywhere;
  text-align:center;
  transition:background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mode-btn.active{
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  border-color:transparent;
  color:#03150c;
  box-shadow:0 6px 18px rgba(95,232,154,0.35);
}
.mode-btn.is-locked:not(.active){opacity:0.4;}
.color-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(6px, 1.4vw, 10px);
}
.swatch{
  width:clamp(24px, 6.4vw, 36px);
  height:clamp(24px, 6.4vw, 36px);
  padding:0;
  border-radius:50%;
  border:2px solid transparent;
  position:relative;
  flex:0 0 auto;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.swatch.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,232,208,0.25);}
.swatch.active::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 8px var(--teal);
}
.button-group{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(8px, 1.2vw, 10px);
}
.action-btn{
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:clamp(8px, 1.3vh, 12px) clamp(8px, 1.6vw, 16px);
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:clamp(0.75rem, 2.6vw, 0.92rem);
  letter-spacing:0.02em;
  line-height:1.15;
  text-align:center;
  overflow-wrap:anywhere;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.action-btn:active{transform:scale(0.96);}
.action-btn.primary{
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  box-shadow:0 8px 22px rgba(95,232,154,0.3);
}
.action-btn.secondary{
  background:linear-gradient(135deg, #ffb457, #ff8a3d);
  color:#2a1200;
  box-shadow:0 8px 22px rgba(255,138,61,0.28);
}
.action-btn.secondary.is-resume{
  background:linear-gradient(135deg, var(--teal), #3fc4d8);
  color:#04231f;
  box-shadow:0 8px 22px rgba(95,232,208,0.28);
}
.action-btn.ghost{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--panel-border);
  color:var(--text-muted);
}
.app.dpad-on #toggleDpadBtn{
  color:#04231f;
  background:linear-gradient(135deg, var(--teal), #3fc4d8);
  border-color:transparent;
  box-shadow:0 8px 22px rgba(95,232,208,0.24);
}
.app.dpad-on .when-off,
.app:not(.dpad-on) .when-on{display:none;}
.lbl-tiny{display:none;}
.btn-icon{width:16px;height:16px;flex-shrink:0;}
.btn-icon svg{width:100%;height:100%;}
.icon-play{display:none;}
.action-btn.is-resume .icon-pause{display:none;}
.action-btn.is-resume .icon-play{display:block;}
.icon-btn{
  width:clamp(36px, 8vw, 42px);
  height:clamp(36px, 8vw, 42px);
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
}
.icon-btn[hidden]{display:none;}
.icon-btn svg{width:18px;height:18px;}
.icon-btn .icon-exit{display:none;}
.icon-btn.is-active .icon-enter{display:none;}
.icon-btn.is-active .icon-exit{display:block;}
.hint-text{
  font-size:clamp(0.66rem, 1.8vw, 0.75rem);
  color:var(--text-faint);
  text-align:center;
  letter-spacing:0.02em;
  line-height:1.55;
}
html.locale-compact .app-title,
html.locale-compact .overlay-title,
html.locale-compact .control-group-title,
html.locale-compact .score-chip-label,
html.locale-compact .play-button,
html.locale-compact .restart-button,
html.locale-compact .new-best-badge,
html.locale-compact .overlay-score-label,
html.locale-compact .hint-text{
  letter-spacing:0;
}