:root {
  --bg: #1a0f0a;
  --bg2: #2a1a14;
  --panel: #3d2518;
  --panel-hi: #5a3520;
  --wood: #8b4a2a;
  --wood-hi: #c97d42;
  --cream: #f5d6a4;
  --gold: #ffc24d;
  --shadow: #0a0604;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--cream);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at top, #3a2218 0%, var(--bg) 70%),
    var(--bg);
}

#stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  position: relative;
  background:
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border-bottom: 3px solid var(--panel);
  box-shadow: 0 4px 0 var(--shadow);
}

#stage::before,
#stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      var(--wood) 0 8px,
      var(--wood-hi) 8px 16px);
  opacity: 0.5;
}
#stage::before { top: 0; }
#stage::after  { bottom: 0; }

#game {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #12080a;
  box-shadow:
    0 0 0 2px var(--panel-hi),
    0 0 0 4px var(--shadow),
    0 0 24px rgba(255, 180, 80, 0.15);
  border-radius: 2px;
}

#controls {
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  padding: 2vw 4vw max(3vw, env(safe-area-inset-bottom)) 4vw;
  align-items: center;
}

.dpad {
  display: flex;
  gap: 3vw;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  appearance: none;
  border: none;
  background: var(--wood);
  color: var(--cream);
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: none;
  position: relative;
  border-radius: 14px;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.35),
    inset 0 3px 0 rgba(255, 255, 255, 0.18),
    0 4px 0 var(--shadow),
    0 0 0 3px var(--panel);
  transition: transform 60ms ease, box-shadow 60ms ease, background 60ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.btn-dir {
  width: min(18vw, 92px);
  height: min(18vw, 92px);
  font-size: 26px;
}

.btn-jump {
  width: min(26vw, 132px);
  height: min(26vw, 132px);
  border-radius: 50%;
  font-size: 20px;
  background: #c24a2c;
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.35),
    inset 0 4px 0 rgba(255, 255, 255, 0.22),
    0 5px 0 var(--shadow),
    0 0 0 3px var(--panel);
}

.btn-jump::after { border-radius: 50%; }

.btn.pressed,
.btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    0 1px 0 var(--shadow),
    0 0 0 3px var(--panel);
  background: var(--wood-hi);
}
.btn-jump.pressed,
.btn-jump:active {
  background: #e26336;
}

@media (orientation: landscape) {
  #stage { flex: 0 0 72%; }
  #controls {
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    padding: 2vh 4vw;
  }
  .btn-dir { width: min(14vw, 100px); height: min(14vw, 100px); }
  .btn-jump { width: min(18vw, 140px); height: min(18vw, 140px); }
}

#splash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.5;
}