*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1a1a2e;
  --surface: #16213e;
  --surface2: #0f3460;
  --accent: #e94560;
  --accent2: #533483;
  --text: #eee;
  --text-dim: #999;
  --btn-dir: #2d2d44;
  --btn-dir-active: #3d3d64;
  --btn-act: #c0392b;
  --btn-act2: #2980b9;
  --btn-act3: #27ae60;
  --dpad-size: 52px;
  --act-size: 48px;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }

#overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center;
  z-index: 1000; cursor: pointer;
}
#overlay .overlay-text {
  font-size: clamp(1.2rem, 3vw, 2rem); color: #fff; text-align: center; padding: 2rem;
  border: 2px solid var(--accent); border-radius: 12px; background: rgba(233,69,96,0.15);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* ---- MAIN LAYOUT ---- */
#main-layout {
  flex: 1; display: grid; gap: 8px; min-height: 0; width: 100%; padding: 4px;
}

/* Portrait: game top, keypads side-by-side below */
@media (orientation: portrait) {
  #main-layout {
    grid-template-areas: "game game" "left right";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
  }
}
/* Landscape: left-dpad, center-game, right-actions */
@media (orientation: landscape) {
  #main-layout {
    grid-template-areas: "left game right";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
  }
}
#game-container { grid-area: game; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
#keypad-left { grid-area: left; display: flex; align-items: center; justify-content: center; }
#keypad-right { grid-area: right; display: flex; align-items: center; justify-content: center; }

#game-wrapper {
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center; flex-shrink: 0;
}
#screen {
  background: #000; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid #333; border-radius: 4px;
  position: relative; width: 100%; height: 100%;
}
#screen > canvas {
  display: block; width: 100% !important; height: 100% !important;
  object-fit: contain; image-rendering: auto;
}

/* ---- D-PAD (hollow cross) ---- */
.dpad-hollow {
  display: grid;
  grid-template-columns: var(--dpad-size) var(--dpad-size) var(--dpad-size);
  grid-template-rows: var(--dpad-size) var(--dpad-size) var(--dpad-size);
  gap: 0;
}
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center{ grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }
.dpad-center { width: var(--dpad-size); height: var(--dpad-size); background: transparent; pointer-events: none; }

.action-buttons { display: flex; flex-direction: row; gap: 10px; align-items: center; }

/* ---- BUTTONS ---- */
.vk-btn {
  border: none; cursor: pointer; font-weight: bold; font-family: inherit; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, transform 0.1s, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.vk-btn:active { transform: scale(0.92); }
.vk-dir {
  background: var(--btn-dir); width: var(--dpad-size); height: var(--dpad-size);
  font-size: 1.1rem; border: 2px solid #555;
}
.vk-dir.vk-active { background: var(--btn-dir-active); border-color: var(--accent); }
.dpad-up    { border-radius: 8px 8px 2px 2px; }
.dpad-down  { border-radius: 2px 2px 8px 8px; }
.dpad-left  { border-radius: 8px 2px 2px 8px; }
.dpad-right { border-radius: 2px 8px 8px 2px; }
.vk-act {
  width: var(--act-size); height: var(--act-size); border-radius: 50%;
  font-size: 0.85rem; border: 2px solid rgba(255,255,255,0.25);
}
.vk-act.vk-active { filter: brightness(1.5); transform: scale(0.9); }
.vk-act-j { background: var(--btn-act); }
.vk-act-k { background: var(--btn-act2); }
.vk-act-l { background: var(--btn-act3); }

/* ---- CONTROL BAR ---- */
#control-bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 6px 12px; background: var(--surface); width: 100%; flex-wrap: wrap;
  position: relative; z-index: 1001;
}
.speed-control, .scale-control { display: flex; align-items: center; gap: 6px; }
.speed-label, .scale-label { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
.speed-slider, .scale-slider { width: 80px; accent-color: var(--accent); }
.speed-value, .scale-value { font-size: 0.75rem; min-width: 38px; text-align: center; color: var(--text); }
.rotate-btn, .fullscreen-btn {
  background: var(--surface2); border: 1px solid #555; color: var(--text);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 0.9rem;
  transition: background 0.15s; line-height: 1;
}
.rotate-btn:hover, .fullscreen-btn:hover { background: var(--accent2); }

/* ---- ALERT ---- */
#alert {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center;
  z-index: 2000; cursor: pointer;
}
#alert .message {
  background: #2d1b1b; color: #ff6b6b; padding: 20px 30px;
  border-radius: 8px; max-width: 80%; text-align: center; font-size: 0.95rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
  :root { --dpad-size: 44px; --act-size: 40px; }
  .speed-slider, .scale-slider { width: 60px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  :root { --dpad-size: 50px; --act-size: 46px; }
}
@media (min-width: 1025px) {
  :root { --dpad-size: 60px; --act-size: 54px; }
}
@media (max-width: 360px) {
  :root { --dpad-size: 38px; --act-size: 34px; }
  .speed-slider, .scale-slider { width: 50px; }
  .speed-label, .scale-label, .speed-value, .scale-value { font-size: 0.6rem; }
  #control-bar { gap: 5px; padding: 3px 6px; }
  #main-layout { gap: 4px; padding: 2px; }
}