/* yilan sayfasına özel stiller */
.snake-wrap {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --snake-bg1: #dff3e4;
  --snake-bg2: #d3edd9;
  --snake-body: #2fa36b;
  --snake-head: #1d7f50;
  --snake-food: #ef4444;
  --snake-leaf: #3c9a3c;
  --snake-eye: #ffffff;
}
:root[data-theme="dark"] .snake-wrap {
  --snake-bg1: #1b2a22; --snake-bg2: #18251e; --snake-body: #49c785; --snake-head: #7be0a8;
  --snake-food: #ff6b6b; --snake-leaf: #5fbf5f; --snake-eye: #10241a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .snake-wrap {
    --snake-bg1: #1b2a22; --snake-bg2: #18251e; --snake-body: #49c785; --snake-head: #7be0a8;
    --snake-food: #ff6b6b; --snake-leaf: #5fbf5f; --snake-eye: #10241a;
  }
}
.snake-wrap canvas { width: 100%; height: 100%; }
@media (hover: none) and (pointer: coarse) {
  .snake-wrap { width: min(100%, 480px, max(200px, calc(100vh - 345px))); }
  .snake-wrap { width: min(100%, 480px, max(200px, calc(100svh - 345px))); }
}
.dpad {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(2, 52px);
  gap: 8px;
  justify-content: center;
}
.dpad.touch-controls { display: none; }
@media (hover: none) and (pointer: coarse) { .dpad.touch-controls { display: grid; } }
.dpad [data-yon="up"] { grid-column: 2; grid-row: 1; }
.dpad [data-yon="left"] { grid-column: 1; grid-row: 2; }
.dpad [data-yon="down"] { grid-column: 2; grid-row: 2; }
.dpad [data-yon="right"] { grid-column: 3; grid-row: 2; }