/* ============================================================
   The grey brick, the shoebox, the desk. DMG-01 recreation.
   Device internal coordinate system: 360 x 594 px, scaled to fit.
   ============================================================ */

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

:root {
  --shell: #c6c3bc;
  --shell-hi: #d6d3cc;
  --shell-lo: #aeaba4;
  --bezel: #4c4954;
  --navy: #2b2b85;
  --magenta: #a13366;
  --magenta-dk: #7e2450;
  --label-magenta: #8b3a62;
  --stripe-red: #8b1a4a;
  --stripe-blue: #2a2a72;
}

html, body { height: 100%; }

body {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  background: #17110c;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.room {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 190, 110, 0.14), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #241a10 0%, #17110c 100%);
}

.desk {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 64px);
  padding: 28px 16px 40px;
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(255, 200, 120, 0.10), rgba(0,0,0,0.28) 70%),
    repeating-linear-gradient(92deg, rgba(0,0,0,0.10) 0 2px, rgba(255,255,255,0.02) 2px 3px, rgba(0,0,0,0) 3px 90px),
    linear-gradient(180deg, #6d4a2c 0%, #573922 55%, #462d1a 100%);
  flex-wrap: wrap;
}

/* ============================ DEVICE ============================ */

.deviceArea { flex: 0 0 auto; display: flex; justify-content: center; }

.deviceScale { transform-origin: top center; }

.device {
  position: relative;
  width: 360px;
  height: 594px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- top edge (extruded strip with slot + power) ---- */
.topEdge {
  position: absolute;
  top: -17px; left: 5px; right: 5px; height: 22px;
  background: linear-gradient(180deg, #8f8c85 0%, #a6a39c 40%, #b3b0a9 100%);
  border-radius: 7px 7px 0 0;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.25);
  z-index: 3;
}
.slotOpening {
  position: absolute; left: 50%; top: 5px;
  width: 200px; height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #14130f, #2c2a24);
  border-radius: 3px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.9), 0 1px 1px rgba(255,255,255,0.25);
  cursor: pointer;
}
.powerLabel {
  position: absolute; left: 14px; top: -1px;
  font-size: 6.5px; font-weight: 700; letter-spacing: 0.4px;
  color: #5d5a54;
}
.powerSwitch {
  position: absolute; left: 14px; top: 6px;
  width: 62px; height: 13px;
  background: linear-gradient(180deg, #23211d, #3a3831);
  border-radius: 4px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.8);
  cursor: pointer;
}
.powerNub {
  position: absolute; left: 2px; top: 1.5px;
  width: 26px; height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #b9b6af 0 3px, #8f8c85 3px 5px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.4);
  transition: left 0.08s ease-out;
}
.device.on .powerNub { left: 34px; }

/* ---- cartridge peeking from the slot ---- */
.cartPeek {
  position: absolute;
  left: 50%; top: -40px;
  width: 186px; height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #9e9b94 0%, #b6b3ac 70%);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.3), 0 -1px 3px rgba(0,0,0,0.3);
  z-index: 2;
  cursor: grab;
  display: none;
  transition: top 0.12s ease-out;
}
.device.hasCart .cartPeek { display: block; }
.cartPeekRidges {
  position: absolute; left: 14px; right: 14px; top: 6px; height: 16px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 3px, rgba(255,255,255,0.10) 3px 4px, rgba(0,0,0,0) 4px 9px);
  border-radius: 2px;
}

/* ---- shell front ---- */
.shell {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 18%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--shell-hi) 0%, var(--shell) 45%, var(--shell-lo) 100%);
  border-radius: 12px 12px 74px 12px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.22),
    inset 3px 0 5px rgba(255,255,255,0.12),
    inset -3px 0 6px rgba(0,0,0,0.15),
    0 24px 44px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 4;
}

.seam {
  position: absolute; left: 0; right: 0; top: 26px; height: 3px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(255,255,255,0.35));
}
.seamNotchL, .seamNotchR {
  position: absolute; top: 4px; width: 3px; height: 23px;
  background: linear-gradient(90deg, rgba(0,0,0,0.22), rgba(255,255,255,0.3));
}
.seamNotchL { left: 26px; }
.seamNotchR { right: 26px; }

/* ---- bezel + screen ---- */
.bezel {
  position: absolute; left: 22px; right: 22px; top: 44px; height: 226px;
  background: linear-gradient(180deg, #56535e 0%, var(--bezel) 30%, #43414b 100%);
  border-radius: 10px 10px 38px 10px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    inset 0 -1px 2px rgba(255,255,255,0.12),
    0 1px 1px rgba(255,255,255,0.35);
}
.bezelStripes {
  position: absolute; left: 16px; right: 16px; top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.stripeSet { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.stripeSet .s1 { height: 2.5px; background: var(--stripe-red); border-radius: 1px; }
.stripeSet .s2 { height: 2.5px; background: var(--stripe-blue); border-radius: 1px; }
.bezelText {
  font-size: 8.5px; letter-spacing: 0.05em; white-space: nowrap;
  color: #d3d2dc; font-weight: 600;
}
.batteryCol {
  position: absolute; left: 8px; top: 108px; width: 42px;
  text-align: center;
}
.led {
  width: 11px; height: 11px; border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at 35% 30%, #58151c, #2e0a10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
  transition: background 1.6s ease-out, box-shadow 1.6s ease-out;
}
.led.on {
  background: radial-gradient(circle at 35% 30%, #ff6b60, #e01818);
  box-shadow: 0 0 8px 2px rgba(255, 40, 40, 0.55), inset 0 1px 1px rgba(255,255,255,0.4);
  transition: background 0.12s, box-shadow 0.12s;
}
.batteryText { display: block; margin-top: 6px; font-size: 6.5px; letter-spacing: 0.05em; color: #d3d2dc; }
.screenWell {
  position: absolute; left: 76px; top: 40px;
  width: 190px; height: 171px;
  background: #6f7b20;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.75),
    inset 0 0 2px 2px rgba(0,0,0,0.5);
  border-radius: 2px;
  overflow: hidden;
}
#screenCanvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.dotmatrix {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(26, 34, 6, 0.17) 0 30%, rgba(0,0,0,0) 30%),
    linear-gradient(180deg, rgba(26, 34, 6, 0.17) 0 30%, rgba(0,0,0,0) 30%);
  background-size: calc(100% / 160) 100%, 100% calc(100% / 144);
}
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 80% at 16% 6%, rgba(255,255,255,0.13), rgba(255,255,255,0) 40%),
    radial-gradient(100% 100% at 100% 100%, rgba(0,0,0,0.10), rgba(0,0,0,0) 40%);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}

/* ---- brand print ---- */
.brand {
  position: absolute; left: 30px; top: 282px;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--navy);
  pointer-events: none;
}
.brandSmall { font-size: 15px; font-weight: 700; font-style: italic; letter-spacing: 0.2px; }
.brandSmall i { font-size: 8px; font-style: normal; vertical-align: super; }
.brandBig { font-size: 21px; font-weight: 800; letter-spacing: 0.5px; }
.brandBig i { font-size: 8px; font-style: normal; vertical-align: super; }

/* ---- d-pad ---- */
.controls { position: absolute; left: 0; right: 0; top: 318px; height: 160px; }
.dpadWell {
  position: absolute; left: 24px; top: 24px;
  width: 124px; height: 124px;
  perspective: 320px;
  background: radial-gradient(circle, rgba(0,0,0,0.16) 0 46%, rgba(0,0,0,0) 62%);
  border-radius: 50%;
}
.dpad {
  position: absolute; left: 16px; top: 16px; width: 92px; height: 92px;
  transition: transform 0.06s ease-out;
  cursor: pointer;
}
.dpad.press-up    { transform: rotateX(16deg); }
.dpad.press-down  { transform: rotateX(-16deg); }
.dpad.press-left  { transform: rotateY(-16deg); }
.dpad.press-right { transform: rotateY(16deg); }
.dpadH, .dpadV {
  position: absolute; background: linear-gradient(180deg, #35353a 0%, #26262a 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.22),
    inset 0 -2px 3px rgba(0,0,0,0.6),
    0 4px 5px rgba(0,0,0,0.45);
}
.dpadH { left: 0; top: 31px; width: 92px; height: 30px; border-radius: 6px; }
.dpadV { left: 31px; top: 0; width: 30px; height: 92px; border-radius: 6px; }
.dpadDimple {
  position: absolute; left: 35px; top: 35px; width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #1d1d21 20%, #38383e 85%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.7);
}

/* ---- A / B ---- */
.abPlate {
  position: absolute; right: 12px; top: 30px;
  width: 176px; height: 116px;
  transform: rotate(-26deg);
}
.abWell {
  position: absolute; left: 8px; top: 22px;
  width: 160px; height: 68px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.05));
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.28), inset 0 -1px 2px rgba(255,255,255,0.35);
}
.btnRound {
  position: absolute; top: 32px;
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #bf4c85 0%, var(--magenta) 45%, var(--magenta-dk) 100%);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.45),
    inset 0 2px 3px rgba(255,255,255,0.35),
    inset 0 -3px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btnB { left: 18px; }
.btnA { right: 18px; }
.btnRound.pressed {
  transform: translateY(3px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.4);
  background: radial-gradient(circle at 36% 30%, #a63a6f 0%, #8c2a58 45%, #701d45 100%);
}
.abLabel {
  position: absolute; font-size: 12px; font-weight: 800;
  color: var(--label-magenta); letter-spacing: 1px;
}
.labB { left: 34px; top: 86px; }
.labA { right: 32px; top: 86px; }

/* ---- start / select ---- */
.startSelect {
  position: absolute; left: 58px; top: 494px;
  display: flex; gap: 28px;
}
.ssGroup { position: relative; width: 76px; height: 48px; transform: rotate(-26deg); }
.ssWell {
  position: absolute; left: 6px; top: 8px; width: 64px; height: 22px;
  border-radius: 11px;
  background: rgba(0,0,0,0.14);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), inset 0 -1px 1px rgba(255,255,255,0.3);
}
.btnPill {
  position: absolute; left: 11px; top: 11.5px; width: 54px; height: 15px;
  border-radius: 8px;
  background: linear-gradient(180deg, #a3a0a8 0%, #838089 60%, #6f6c75 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btnPill.pressed {
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 2px 3px rgba(0,0,0,0.4);
}
.ssLabel {
  position: absolute; bottom: -2px; width: 100%; text-align: center;
  font-size: 9.5px; font-weight: 800; color: var(--label-magenta); letter-spacing: 1.5px;
}

/* ---- speaker grille ---- */
.grille {
  position: absolute; right: 24px; bottom: 24px;
  transform: rotate(-30deg);
  display: flex; gap: 11px;
}
.grille i {
  width: 8px; height: 62px; border-radius: 4px;
  background: linear-gradient(180deg, #7e7b74, #979289);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.45);
}

/* ---- side wheels & jack ---- */
.volWheel, .contrastWheel {
  position: absolute; width: 15px; height: 58px;
  background: linear-gradient(90deg, #6f6c66, #8e8b85 60%, #79766f);
  cursor: pointer; z-index: 2;
}
.volWheel { right: -9px; top: 150px; border-radius: 0 7px 7px 0; }
.contrastWheel { left: -9px; top: 122px; border-radius: 7px 0 0 7px; }
.wheelRidges {
  position: absolute; inset: 2px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.38) 0 2px, rgba(255,255,255,0.12) 2px 3px, rgba(0,0,0,0) 3px 6px);
  background-position-y: 0;
}
.wheelRidges.spin { transition: background-position-y 0.18s ease-out; }
.volLabel, .contrastLabel, .phonesLabel {
  position: absolute; font-size: 6.5px; letter-spacing: 0.1em; color: #7c7973;
  pointer-events: none; z-index: 5;
}
.volLabel { right: -6px; top: 212px; writing-mode: vertical-rl; }
.contrastLabel { left: -6px; top: 184px; writing-mode: vertical-rl; transform: rotate(180deg); }
.phonesJack {
  position: absolute; bottom: -7px; left: 168px; width: 26px; height: 10px;
  background: linear-gradient(180deg, #504d47, #35332e);
  border-radius: 0 0 5px 5px; z-index: 2;
}
.phonesLabel { bottom: -6px; left: 198px; }

/* device settles when a cart is seated */
.device.thunk { animation: thunk 0.18s ease-out; }
@keyframes thunk {
  0% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* =========================== SHOEBOX =========================== */

.shelfArea {
  flex: 0 1 auto;
  display: flex; flex-direction: column; gap: 26px;
  align-items: center;
  max-width: 430px;
}

.shoebox {
  position: relative;
  background:
    repeating-linear-gradient(3deg, rgba(0,0,0,0.05) 0 3px, rgba(0,0,0,0) 3px 14px),
    linear-gradient(180deg, #b08a52 0%, #9c7644 100%);
  border-radius: 6px;
  padding: 18px 18px 20px;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.3),
    inset 0 -2px 4px rgba(255,255,255,0.12),
    0 16px 30px rgba(0,0,0,0.5);
}
.shoeboxLid {
  position: absolute; top: -14px; left: -8px; right: -8px; height: 30px;
  background: linear-gradient(180deg, #bd965c 0%, #a8814c 100%);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.35), inset 0 2px 3px rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.marker {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-weight: 700; font-size: 15px; color: #2e2118;
  transform: rotate(-1.5deg);
  letter-spacing: 1px;
}
.markerSub {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 9px; color: #4a3a2b;
  transform: rotate(1deg);
}
.shelf {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  padding-top: 16px;
  max-width: 390px;
}

/* ---- cartridge ---- */
.cart {
  position: relative;
  width: 106px; height: 126px;
  cursor: grab;
  transition: transform 0.12s ease-out, filter 0.12s;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.4));
}
.cart:hover { transform: translateY(-7px) rotate(-1.2deg); }
.cart:active { cursor: grabbing; }
.cartBody {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #b2afa8 0%, #a19e97 100%);
  border-radius: 7px 7px 5px 5px;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.3);
}
.cartBody::before { /* corner notch, DMG style */
  content: ""; position: absolute; right: -1px; top: 14px; width: 7px; height: 22px;
  background: #7c7973;
  border-radius: 3px 0 0 3px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}
.cartRidges {
  position: absolute; left: 12px; right: 12px; top: 5px; height: 9px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 3px, rgba(255,255,255,0.12) 3px 4px, rgba(0,0,0,0) 4px 9px);
  border-radius: 2px;
}
.cartLabelWrap {
  position: absolute; left: 7px; right: 7px; top: 17px; bottom: 6px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), inset 0 1px 3px rgba(0,0,0,0.3);
}
.cartLabelWrap canvas {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated;
}
.cartSlotGap { /* empty spot left behind in the box */
  width: 106px; height: 126px;
  border-radius: 7px;
  background: rgba(0,0,0,0.18);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.35);
}
.cartTitleTip {
  position: absolute; left: 0; right: 0; bottom: -16px;
  text-align: center;
  font-size: 8px; letter-spacing: 1px; color: rgba(255, 230, 190, 0.5);
  opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
}
.cart:hover .cartTitleTip { opacity: 1; }

/* flying cart during seating animation */
#flightLayer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#flightLayer .cart { position: absolute; transition: none; margin: 0; }
#flightLayer .cart:hover { transform: none; }

/* ---- reference card ---- */
.refCard {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, rgba(0,0,0,0) 1px 22px),
    linear-gradient(160deg, #f6efdc 0%, #e9dfc4 100%);
  border-radius: 3px;
  padding: 14px 18px 12px;
  transform: rotate(1.4deg);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
  font-family: "Courier New", monospace;
  color: #3a3226;
  max-width: 330px;
}
.refHead {
  font-weight: 700; font-size: 12px; letter-spacing: 3px;
  border-bottom: 2px solid #3a3226;
  padding-bottom: 5px; margin-bottom: 8px;
  text-align: center;
}
.refCard table { border-collapse: collapse; width: 100%; }
.refCard td { font-size: 10.5px; padding: 2.5px 4px; vertical-align: top; }
.refCard td.k { font-weight: 700; white-space: nowrap; text-align: right; padding-right: 10px; }
.refCard em { font-style: italic; color: #6d6250; }
.refFoot {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed #8a7d63;
  font-size: 9px; text-align: center; color: #6d6250; letter-spacing: 0.5px;
}

/* ============================ layout ============================ */

@media (max-width: 900px) {
  .desk { flex-direction: column; gap: 34px; padding-top: 14px; }
  .shelfArea { max-width: 100%; }
}