.snake-shell{padding-top:20px;}
.brick-phone{
  max-width:520px;
  margin:0 auto;
  border-radius:22px;
  border:1px solid rgba(196,196,212,0.18);
  background:rgba(247,247,247,0.02);
  box-shadow: 0 0 22px rgba(184,255,200,0.08);
  overflow:hidden;
}
.brick-phone__topbar{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(196,196,212,0.12);
}
.badge{
  font-size:12px;
  color:var(--tmh-text-soft);
}
.brick-phone__screen{
  position:relative;
  display:grid;
  place-items:center;
  padding:14px;
  gap:10px;
}
#snakeCanvas{
  width:min(420px, 80vw);
  height:auto;
  background:rgba(5,6,8,0.7);
  border:1px solid rgba(184,255,200,0.18);
  border-radius:14px;
  outline:none;
}
.snake-hud{
  width:min(420px, 80vw);
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--tmh-text-soft);
}
.snake-hud__msg{flex:1; text-align:right;}
.brick-phone__controls{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap:8px;
  padding:14px;
  border-top:1px solid rgba(196,196,212,0.12);
}
.dpad{
  border-radius:14px;
  border:1px solid rgba(196,196,212,0.18);
  background:rgba(184,255,200,0.04);
  color:var(--tmh-text-main);
  padding:12px;
  cursor:pointer;
}
.dpad.ok{grid-column:2; grid-row:2;}
.dpad.up{grid-column:2; grid-row:1;}
.dpad.left{grid-column:1; grid-row:2;}
.dpad.right{grid-column:3; grid-row:2;}
.dpad.down{grid-column:2; grid-row:3;}
.brick-phone__footer{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid rgba(196,196,212,0.12);
  justify-content:space-between;
}