/* Dot Matrix — Game Boy emulator shell.
   Crafted-device aesthetic: platinum body, smoked lens, maroon controls. */

:root {
  --bg0: #ece7db;
  --bg1: #d9d2c1;
  --ink: #23272e;
  --device: #d9d3c3;
  --device-hi: #e7e1d2;
  --device-lo: #b9b09c;
  --bezel: #2b2f36;
  --bezel-edge: #1b1e23;
  --lens: #14171a;
  --accent: #9d2f5f;
  --accent-lo: #7a2349;
  --btn: #3a3f47;
  --pill: #6d6a60;
  --card: #fbfaf6;
  --line: #d7d2c4;
  --shadow: 0 30px 70px -30px rgba(30, 26, 16, .55);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #f4f0e6 0%, var(--bg0) 45%, var(--bg1) 100%);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; background: #0001; padding: 0 .3em; border-radius: 4px; }

/* ------------------------------- top bar ------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px clamp(12px, 3vw, 28px);
  height: 53px;
  background: rgba(251, 250, 246, .72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #0001;
  position: relative; z-index: 50;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-mark {
  width: 12px; height: 12px; border-radius: 3px; align-self: center;
  background: linear-gradient(145deg, #9bbc0f, #306230);
  box-shadow: inset 0 0 0 2px #0f380f;
}
.brand-name { font-weight: 800; letter-spacing: .22em; font-size: 15px; }
.brand-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.topnav { display: flex; gap: 4px; }
.nav-btn {
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: #3c4048;
}
.nav-btn:hover { background: #00000010; }
.nav-btn:active { transform: translateY(1px); }

/* -------------------------------- stage -------------------------------- */
.stage {
  flex: 1; display: grid; place-items: center;
  padding: clamp(10px, 3vh, 36px) clamp(10px, 3vw, 32px) clamp(18px, 4vh, 44px);
}

/* -------------------------------- device ------------------------------- */
.device {
  width: min(94vw, 480px);
  background:
    linear-gradient(160deg, var(--device-hi) 0%, var(--device) 42%, var(--device-lo) 100%);
  border-radius: 26px 26px 62px 26px;
  box-shadow:
    var(--shadow),
    inset 0 2px 0 #fff9,
    inset 0 -6px 14px rgba(60, 50, 30, .22);
  padding: clamp(14px, 3.2vw, 22px) clamp(14px, 3.2vw, 22px) clamp(12px, 2.6vw, 18px);
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  user-select: none;
}
.device.touch-off .controls, .device.touch-off .pill-row { opacity: .35; pointer-events: none; }

.bezel {
  background: linear-gradient(170deg, #363b43, var(--bezel) 55%, var(--bezel-edge));
  border-radius: 16px 16px 34px 16px;
  padding: 12px 12px 8px;
  box-shadow: inset 0 2px 6px #000c, 0 1px 0 #fff7;
}
.lens {
  position: relative;
  background: var(--lens);
  border-radius: 8px;
  overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 160 / 144;
  box-shadow: inset 0 0 0 2px #0009, inset 0 0 26px #000d;
}
.lens::after { /* lens glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, #ffffff14 0%, transparent 26%);
}
#screen {
  image-rendering: pixelated;
  display: block;
  width: 480px; height: 432px;
  max-width: 100%;
}
#fx-scanlines { position: absolute; inset: 0; display: none; pointer-events: none; }
#stats-chip {
  position: absolute; top: 6px; left: 6px; display: none;
  font: 600 10px/1 ui-monospace, Menlo, monospace;
  color: #e8f0d0; background: #0009; padding: 4px 7px; border-radius: 6px;
  letter-spacing: .04em; pointer-events: none;
}
#lens-card {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(12, 14, 10, .45); backdrop-filter: blur(2px); padding: 14px;
}
.lens-card-inner {
  background: var(--card); border-radius: 12px; padding: 16px 18px;
  text-align: center; max-width: 300px; box-shadow: 0 12px 30px -12px #000a;
}
.lc-title { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.lc-sub { margin: 8px 0 10px; font-size: 13px; opacity: .8; }
.lc-btns { display: grid; gap: 8px; }
.lc-note { margin-top: 10px; font-size: 11px; line-height: 1.45; opacity: .6; }

.bezel-side {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 2px;
}
.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4a4640; box-shadow: inset 0 1px 2px #0008;
  transition: all .25s;
}
.led.on { background: #ff4d4d; box-shadow: 0 0 8px 2px #ff4d4d88, inset 0 1px 1px #fff8; }
.led.paused { background: #e0a32e; box-shadow: 0 0 7px 1px #e0a32e77; }
.bezel-brand {
  font-size: 11px; font-weight: 800; letter-spacing: .3em; color: #b9bdc7;
  display: flex; align-items: baseline; gap: 8px;
}
.bezel-brand em { font-style: normal; font-weight: 500; font-size: 8px; letter-spacing: .18em; opacity: .7; }

/* ------------------------------ power bar ------------------------------- */
.powerbar {
  display: flex; justify-content: center; gap: 8px;
}
.powerbar button {
  width: 40px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #efe9da, #d3ccb9);
  box-shadow: 0 2px 0 #a49a83, inset 0 1px 0 #fffc;
  color: #4a463c;
}
.powerbar button:active, .powerbar button.active {
  transform: translateY(2px); box-shadow: 0 0 0 #a49a83, inset 0 1px 3px #0003;
  background: #cfc7b4;
}
.powerbar svg { width: 15px; height: 15px; fill: currentColor; }
#btn-mute .mute-x { opacity: 0; }
#btn-mute.active .mute-x { opacity: 1; }

/* ------------------------------ controls -------------------------------- */
.controls {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px 0;
}
.dpad-wrap { width: 34%; max-width: 150px; }
.dpad {
  position: relative; width: 100%; aspect-ratio: 1;
  touch-action: none;
}
.dpad .dp {
  position: absolute; background: linear-gradient(180deg, #3d434c, #23262c);
  box-shadow: 0 3px 0 #14161a, inset 0 1px 0 #ffffff22;
}
.dpad .d-u { left: 33.4%; top: 0; width: 33.3%; height: 36%; border-radius: 6px 6px 0 0; }
.dpad .d-d { left: 33.4%; bottom: 0; width: 33.3%; height: 36%; border-radius: 0 0 6px 6px; }
.dpad .d-l { left: 0; top: 33.4%; height: 33.3%; width: 36%; border-radius: 6px 0 0 6px; }
.dpad .d-r { right: 0; top: 33.4%; height: 33.3%; width: 36%; border-radius: 0 6px 6px 0; }
.dpad .d-c {
  left: 33.4%; top: 33.4%; width: 33.3%; height: 33.3%;
  background: radial-gradient(circle at 50% 42%, #454b55, #22252b 70%);
  box-shadow: none;
}
.dpad .dp.pressed, .dpad[data-d_up="1"] .d-u, .dpad[data-d_down="1"] .d-d,
.dpad[data-d_left="1"] .d-l, .dpad[data-d_right="1"] .d-r {
  background: linear-gradient(180deg, #191c21, #2b2f37);
  box-shadow: 0 1px 0 #14161a, inset 0 2px 4px #000a;
}

.ab-cluster {
  display: flex; gap: 16px; align-items: center;
  transform: rotate(-18deg);
  padding-right: 4%;
}
.ab-btn {
  width: clamp(46px, 11vw, 56px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #b34278, var(--accent) 55%, var(--accent-lo));
  box-shadow: 0 4px 0 #5c1a38, inset 0 2px 3px #ffffff44;
  color: #f6d8e4; font-weight: 800; font-size: 15px;
}
.ab-btn.b { transform: translateY(10px); }
.ab-btn i { font-style: normal; transform: rotate(18deg); }
.ab-btn.pressed, .ab-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #5c1a38, inset 0 3px 5px #00000055;
}
.ab-btn.b.pressed, .ab-btn.b:active { transform: translateY(13px); }

.pill-row {
  display: flex; justify-content: center; gap: 26px;
  padding: 2px 0 0;
}
.pill {
  min-width: 74px; padding: 9px 0 8px; border-radius: 999px;
  background: linear-gradient(180deg, #7a766a, var(--pill));
  box-shadow: 0 3px 0 #4a473e, inset 0 1px 0 #ffffff33;
  color: #efeadb; font-size: 9px; font-weight: 700; letter-spacing: .18em;
  transform: rotate(-12deg);
}
.pill.pressed, .pill:active {
  transform: rotate(-12deg) translateY(2px);
  box-shadow: 0 1px 0 #4a473e, inset 0 2px 4px #0006;
}

.grille {
  display: flex; gap: 7px; justify-content: flex-end;
  padding: 4px 10px 2px; transform: skewX(-24deg);
}
.grille i {
  width: 7px; height: 34px; border-radius: 4px;
  background: linear-gradient(180deg, #a89f8a, #c6bda7);
  box-shadow: inset 0 2px 3px #0007, 0 1px 0 #fff5;
}

/* -------------------------------- drawer -------------------------------- */
#drawer {
  position: fixed; top: 53px; right: 0; height: calc(100dvh - 53px); width: min(360px, 94vw);
  background: var(--card);
  box-shadow: -24px 0 60px -30px #0008;
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.2, .8, .25, 1);
  z-index: 40; display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
}
#drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px 0; border-bottom: 1px solid var(--line);
}
.drawer-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.drawer-tab {
  padding: 9px 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #6a6f78; border-radius: 8px 8px 0 0; white-space: nowrap;
}
.drawer-tab.sel { color: var(--ink); background: #00000008; box-shadow: inset 0 -2px 0 var(--accent); }
#drawer-close { padding: 8px 10px; font-size: 14px; color: #6a6f78; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer-pane { display: none; }
.drawer-pane.sel { display: block; }
.drawer-pane h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.drawer-pane h3 { margin: 0 0 6px; font-size: 13px; }
.help-block { margin-bottom: 16px; }
.help-block p { margin: 0; font-size: 13px; line-height: 1.55; color: #44484f; }
.help-block .ctl { line-height: 1.8; }
.hint { font-size: 12px; line-height: 1.55; color: #5b5f66; margin: 14px 0 0; }
.hint.dim { opacity: .75; }
.row-btns { display: flex; gap: 8px; margin-top: 12px; }

.btn {
  padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 13px;
  background: #ece7da; border: 1px solid var(--line);
  box-shadow: 0 1px 0 #0002;
}
.btn:hover { background: #f3efe4; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent-lo); color: #fff; }
.btn.primary:hover { background: #a8366a; }

#cart-info .ci-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13px;
}
#cart-info .ci-row span { color: #777c85; }
#cart-info .ci-row b { font-weight: 600; text-align: right; }
.cart-empty { padding: 18px 4px; color: #888; font-size: 13px; }

#rom-errors {
  margin-top: 12px; padding: 12px; border-radius: 10px;
  background: #fdecec; border: 1px solid #f0c6c6; font-size: 13px;
}
.err-title { font-weight: 700; color: #9d2f2f; margin-bottom: 6px; }
.err-line { color: #7c4040; margin: 2px 0; }
.err-hint { margin-top: 8px; color: #8a7070; font-size: 12px; line-height: 1.5; }

/* states */
.slot {
  display: flex; align-items: center; gap: 10px;
  padding: 9px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: #fff;
}
.slot-num {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--bezel); color: #cfd4dc;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.slot-shot { width: 56px; height: 50px; border-radius: 6px; object-fit: cover; image-rendering: pixelated; background: var(--lens); }
.slot-shot.empty { display: grid; place-items: center; color: #666; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.slot-info { flex: 1; min-width: 0; }
.slot-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-ts { font-size: 11px; color: #83888f; }
.slot-btns { display: flex; gap: 4px; }
.mini {
  padding: 6px 9px; border-radius: 8px; font-size: 11px; font-weight: 700;
  background: #ece7da; border: 1px solid var(--line);
}
.mini:hover { background: #f3efe4; }
.mini:disabled { opacity: .4; cursor: default; }
.mini.danger { color: #9d2f2f; }

/* options */
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pal-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 600;
  background: #fff;
}
.pal-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pal-dots { display: flex; }
.pal-dots i { width: 12px; height: 12px; border-radius: 3px; margin-right: 2px; }
.opt-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin-bottom: 12px; }
.opt-grid select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px;
}
.opt-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b5f66; display: block; margin: 10px 0 6px; }
.opt-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
.opt-check input { width: 16px; height: 16px; accent-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* keys */
.key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.key-label { font-size: 13px; }
.key-bind {
  min-width: 130px; padding: 7px 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-align: center;
}
.key-bind.capturing { border-color: var(--accent); color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.fixed-keys { margin-top: 14px; font-size: 12px; color: #5b5f66; line-height: 1.9; }

/* ------------------------------- overlays ------------------------------- */
#drop-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center;
  background: rgba(20, 22, 26, .55); backdrop-filter: blur(4px);
}
#drop-overlay.show { display: flex; }
.drop-card {
  border: 2px dashed #ffffff88; border-radius: 20px;
  padding: 40px 56px; text-align: center; color: #fff;
  background: rgba(255, 255, 255, .07);
}
.drop-glyph { font: 800 40px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.drop-text { margin-top: 10px; font-weight: 700; }
.drop-sub { margin-top: 4px; font-size: 12px; opacity: .75; }

#toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 70; pointer-events: none; width: min(440px, 92vw);
}
.toast {
  background: #23272e; color: #eef0e8; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; box-shadow: 0 10px 30px -10px #000a;
  opacity: 0; transform: translateY(8px); transition: all .3s;
  max-width: 100%; text-align: center;
}
.toast.show { opacity: 1; transform: none; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 700px) {
  .brand-sub { display: none; }
  .nav-btn { padding: 8px 8px; font-size: 12px; }
  .stage { padding-top: 8px; }
  .device { width: min(96vw, 430px); border-radius: 22px 22px 50px 22px; }
  #drawer {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: min(72dvh, 560px); max-height: calc(100dvh - 53px);
    transform: translateY(105%);
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
  }
  #drawer.open { transform: none; }
  .ab-cluster { gap: 12px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .stage { padding: 6px; }
  .device { width: min(96vw, 600px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px 14px; }
  .bezel { grid-row: 1 / span 4; }
  .powerbar { grid-column: 2; }
  .controls { grid-column: 2; }
  .pill-row { grid-column: 2; }
  .grille { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}