/* --- Snake: kabinet game --- */
body.game{--bg:#0a0817}
.game-wrap{max-width:600px;margin:0 auto;padding:90px 16px 40px}

.hud{
  display:flex;align-items:center;gap:16px;
  padding:10px 14px;
  border:2px solid var(--line);border-radius:12px 12px 0 0;
  background:#080614;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.stat{display:flex;align-items:center;gap:8px;color:var(--teks);font-size:1rem}
.stat svg{width:18px;height:18px}
.ic-apple{color:#f472b6}
.ic-trophy{color:#fbbf24}
.hud .sp{flex:1}
.iconbtn{
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--redup);cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.iconbtn:hover{color:var(--aksen);border-color:var(--aksen)}
.iconbtn svg{width:16px;height:16px}

.board-frame{
  position:relative;overflow:hidden;
  border:2px solid var(--line);border-top:none;border-radius:0 0 12px 12px;
  background:#0b1020;
  box-shadow:inset 0 0 36px rgba(34,211,238,.10);
}
canvas#board{display:block;margin:0 auto}

/* --- Overlay --- */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;text-align:center;padding:20px;
  background:rgba(4,10,8,.8);backdrop-filter:blur(3px);
}
.overlay.hidden{display:none}
.overlay h2{
  font-size:clamp(1.7rem,6vw,2.8rem);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 16px rgba(34,211,238,.75);
}
.overlay p{color:var(--redup);margin:10px 0 18px;font-size:.95rem}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gbtn{
  padding:10px 22px;border:2px solid #22d3ee;border-radius:8px;
  background:none;color:#22d3ee;cursor:pointer;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 0 12px rgba(34,211,238,.3),inset 0 0 8px rgba(34,211,238,.1);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.gbtn:hover{background:#22d3ee;color:#06121a;box-shadow:0 0 22px rgba(34,211,238,.55)}
.gbtn.alt{border-color:var(--line);color:var(--redup);box-shadow:none}
.gbtn.alt:hover{background:var(--line);color:var(--teks)}

/* --- Panel aturan --- */
.panel{
  width:min(430px,100%);text-align:left;
  background:#0b0919;border:2px solid var(--line);border-radius:14px;
  padding:20px;
}
.panel h3{
  font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  color:#22d3ee;margin-bottom:8px;
}
.row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.row .rl{
  font-family:ui-monospace,Menlo,monospace;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redup);
}
.seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.seg button{
  padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--redup);cursor:pointer;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  transition:all .18s ease;
}
.seg button.on{
  border-color:#22d3ee;background:#22d3ee;color:#0d1f14;
  box-shadow:0 0 10px rgba(34,211,238,.5);
}
.panel .btnrow{margin-top:18px}
.panel .note{margin:12px 0 0;font-size:.72rem;color:var(--redup);letter-spacing:.06em}

/* --- Petunjuk & d-pad --- */
.hint{
  margin:16px auto 0;text-align:center;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--redup);
}
.dpad{
  display:none;
  margin:18px auto 0;
  grid-template-columns:repeat(3,64px);
  grid-template-rows:repeat(3,50px);
  gap:6px;justify-content:center;
}
.dpad button{
  border:1px solid var(--line);border-radius:10px;
  background:#0b0919;color:var(--aksen);
  font-size:1.15rem;cursor:pointer;
}
.dpad button:active{background:var(--line)}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
@media (pointer:coarse){.dpad{display:grid}}

@media (max-width:560px){
  .game-wrap{padding-top:70px}
  .hud{gap:10px;padding:8px 10px}
  .stat{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .gbtn,.iconbtn,.seg button{transition:none}
}