/* Arcade cabinet styled after public/DOWNWARD_SPIRAL_GAME_FRONT.png */
:root {
  /* updated from js/main.js as Denny's mood darkens */
  --red: #e8241f; --red-dark: #b81512; --red-light: #ff4a3a;
  --yellow: #f2c418; --yellow-dark: #d8a810;
  --blue: #2f7fd6; --orange: #f88820;
  --cream: #f6ecd9; --wall: #ece4d6; --ink: #0c1f4a; --bright: 1;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--wall);
  transition: background 0.6s;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  user-select: none;
}

#cabinet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--red);
  border-radius: 34px 34px 22px 22px;
  padding: 12px 16px 14px;
  box-shadow: inset -10px 0 0 var(--red-dark), inset 10px 0 0 var(--red-light), 12px 14px 0 rgba(0, 0, 0, 0.12);
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

#marquee {
  border-radius: 16px 16px 4px 4px;
  border-bottom: 6px solid #d8ccb4;
  margin-bottom: 10px;
  filter: brightness(var(--bright));
}

#bezel {
  background: var(--yellow);
  padding: 14px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 4px var(--yellow-dark);
}

#screen {
  background: #000;
  border: 8px solid #101018;
  border-radius: 14px;
}

#controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: calc(100% - 8px);
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 22px;
  background: var(--blue);
  border-radius: 10px;
  border-bottom: 6px solid var(--cream);
}

.stick { position: relative; width: 64px; height: 56px; }
.stick .ball {
  position: absolute; left: 14px; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7a6a, #e8241f 55%, #9a1010);
  box-shadow: 0 16px 0 -12px #111, 0 22px 0 -4px #f2c418;
}
.stick .hint { position: absolute; bottom: -2px; width: 100%; text-align: center; color: var(--ink); font-weight: bold; font-size: 11px; }

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 46px);
  column-gap: 12px;
  row-gap: 2px;
  justify-items: center;
}
.buttons span { color: var(--ink); font-weight: bold; font-size: 15px; }

.btn {
  width: 42px; height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn.down, .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.btn.a { background: radial-gradient(circle at 40% 30%, #7ab8ff, #1f5fd0); }
.btn.b { background: radial-gradient(circle at 40% 30%, #fff07a, #e8b810); }
.btn.c { background: radial-gradient(circle at 40% 30%, #ffb070, #e87010); }
.btn.d { background: radial-gradient(circle at 40% 30%, #ff8a7a, #d81f1f); }

.side { display: flex; flex-direction: column; gap: 6px; }
.side button {
  font-family: inherit; font-weight: bold; font-size: 11px;
  background: var(--yellow); color: #0c1f4a;
  border: 2px solid #0c1f4a; border-radius: 6px;
  padding: 3px 8px; cursor: pointer;
}
.side button#camera:not(:disabled) { background: #ff4a3a; color: #fff; }
.side button#camera:disabled { opacity: 0.55; cursor: default; }

/* ---------------- d-pad (touch screens only) ---------------- */
.dpad { display: none; position: relative; width: 120px; height: 120px; flex: none; touch-action: none; }
.dpad i, .dpad b { position: absolute; background: #1a1a24; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); }
.dpad b { left: 40px; top: 40px; width: 40px; height: 40px; box-shadow: none; }
.dpad .up { left: 40px; top: 0; width: 40px; height: 44px; border-radius: 9px 9px 0 0; }
.dpad .down { left: 40px; bottom: 0; width: 40px; height: 44px; border-radius: 0 0 9px 9px; }
.dpad .left { left: 0; top: 40px; width: 44px; height: 40px; border-radius: 9px 0 0 9px; }
.dpad .right { right: 0; top: 40px; width: 44px; height: 40px; border-radius: 0 9px 9px 0; }
.dpad i::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 8px solid transparent;
}
.dpad .up::after { border-top-width: 0; border-bottom-color: #e8e0d0; }
.dpad .down::after { border-bottom-width: 0; border-top-color: #e8e0d0; }
.dpad .left::after { border-left-width: 0; border-right-color: #e8e0d0; }
.dpad .right::after { border-right-width: 0; border-left-color: #e8e0d0; }
.dpad i.on { background: #3a3a54; }

/* ---------------- phones / tablets (body.touch, set in js/main.js fit()) ---------------- */
:root {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
body.touch {
  position: fixed; inset: 0;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.touch #cabinet { padding: 8px 8px 10px; border-radius: 24px 24px 16px 16px; }
.touch #marquee { margin-bottom: 6px; border-bottom-width: 4px; border-radius: 12px 12px 3px 3px; }
.touch #bezel { padding: 6px; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--yellow-dark); }
.touch #screen { border-width: 4px; border-radius: 8px; }
.touch #controls {
  flex-wrap: wrap; justify-content: space-between; gap: 8px 10px;
  width: 100%; margin-top: 8px; padding: 10px 14px 8px;
}
.touch .stick, .touch .buttons span { display: none; }
.touch .dpad { display: block; }
.touch .buttons { grid-template-columns: repeat(2, 54px); gap: 12px; }
.touch .btn {
  width: 54px; height: 46px; touch-action: none;
  font: bold 17px 'Courier New', monospace; color: rgba(12, 31, 74, 0.75);
}
.touch .btn.a::after { content: 'A'; } .touch .btn.b::after { content: 'B'; }
.touch .btn.c::after { content: 'C'; } .touch .btn.d::after { content: 'D'; }
.touch .side { width: 100%; flex-direction: row; justify-content: center; gap: 8px; }
.touch .side button { font-size: 12px; padding: 7px 10px; touch-action: none; }

/* phone on its side: d-pad left of the screen, buttons right, no marquee */
.touch.land #cabinet {
  display: grid; align-items: center; column-gap: 14px; row-gap: 10px;
  grid-template-columns: auto auto auto;
  grid-template-areas: "dpad bezel btns" "dpad bezel side";
  padding: 8px max(12px, var(--sar)) 8px max(12px, var(--sal));
}
.touch.land #marquee { display: none; }
.touch.land #controls { display: contents; }
.touch.land .dpad { grid-area: dpad; }
.touch.land #bezel { grid-area: bezel; }
.touch.land .buttons { grid-area: btns; align-self: end; }
.touch.land .side { grid-area: side; align-self: start; width: auto; flex-direction: column; }