/* SPDX-License-Identifier: GPL-3.0-only
 * LSDj fork: 2026 DEADACTIVE (the device's parts after Hortator's simulator, web/sim/sim.css) */
/* The FM-1 panel in the original Game Boy's colours: a light grey body, a blue-grey bezel with its two stripes around
 * a pea-green screen, charcoal knobs and direction buttons, magenta A and B, navy italic print. Positions and sizes
 * come from layout.js (the FM-1's own); only the look is here. */
:root {
  --page: #2c2d33;
  --ink: #e8e6df;
  --dim: #a3a199;
  --body: #c9c5bd;
  --body-hi: #dbd7cf;
  --body-lo: #aeaaa2;
  --tray: #bdb9b1;
  --bezel: #6d6f7c;
  --navy: #2b2f86;
  --magenta: #9a2257;
  --charcoal: #2a2a2f;
  --rubber: #8a8c95;
  --lcd-off: #7f8c2a;
  --print: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 28px 16px 48px; }
h1 { font: italic 700 30px/1.1 var(--print); margin: 0 0 6px; letter-spacing: .01em; }
h1 i { color: #d85a94; }
h1 span { font: 600 13px/1 var(--print); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-left: 8px; }
h2 { font: italic 700 18px/1.2 var(--print); margin: 32px 0 8px; }
.lead { margin: 0 0 20px; color: var(--dim); }
.small { font-size: 13px; color: var(--dim); }
.note { min-height: 1.5em; color: #ffd27a; margin: 10px 0 0; }
a { color: inherit; }
.setup { margin-top: 8px; }
.setup p { margin: 0 0 10px; }
.file input { margin-left: 8px; }
progress { width: 100%; max-width: 420px; height: 6px; display: block; margin: 0 0 10px; }
button.link, label.link { background: none; border: 0; padding: 0; margin-right: 18px; font: inherit; color: var(--dim); text-decoration: underline; cursor: pointer; }
label.link { text-decoration: none; }
table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 14px; }
th, td { text-align: left; padding: 5px 14px 5px 0; border-bottom: 1px solid #44454d; vertical-align: top; }
th { font: 600 12px/1.4 var(--print); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
footer { margin-top: 36px; }

/* ---- the device: drawn at its design size, scaled to fit (app.js sets --scale and the layout) */
.stage { display: flex; justify-content: center; padding-top: 18px; }
.fit { position: relative; }
.device {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--scale, 1));
  background: linear-gradient(168deg, var(--body-hi), var(--body) 38%, var(--body-lo));
  border-radius: 26px 26px 96px 26px;                 /* the Game Boy's one big corner */
  box-shadow: 0 2px 0 rgba(255, 255, 255, .55) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 20px 44px rgba(0, 0, 0, .55);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.device.phone { border-radius: 22px 22px 64px 22px; }
.device > * { position: absolute; }
.device::before {                                     /* the groove across the top, with its two notches */
  content: ""; left: 0; right: 0; top: 17px; height: 3px;
  background: linear-gradient(rgba(0, 0, 0, .22), rgba(255, 255, 255, .5));
}
.device.phone::before { display: none; }
.tray { background: var(--tray); border-radius: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, .28) inset, 0 1px 0 rgba(255, 255, 255, .5); }
.tray.keybed { border-radius: 22px 22px 70px 22px; }
.device.phone .tray.keybed { border-radius: 16px 16px 48px 16px; }

/* the screen: its bezel, the stripes and the print across the top, the power lamp */
.bezel {
  background: linear-gradient(175deg, #7a7c8a, var(--bezel) 30%, #5d5f6b);
  border-radius: 12px 12px 44px 12px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.bezel .stripes { position: absolute; left: 14px; right: 14px; top: 7px; height: 9px;
  background: linear-gradient(var(--magenta) 0 2px, transparent 2px 6px, var(--navy) 6px 8px, transparent 8px); }
.bezel .print { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); padding: 0 8px; background: #6f717e;
  font: 600 9px/14px var(--print); letter-spacing: .14em; color: #d8d8e0; white-space: nowrap; }
.bezel .lamp { position: absolute; left: 9px; top: 42%; width: 9px; height: 9px; border-radius: 50%;
  background: #4a2028; box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset; }
.bezel .lamp-print { position: absolute; left: 1px; top: calc(42% + 13px); width: 26px; text-align: center;
  font: 600 6px/1 var(--print); letter-spacing: .08em; color: #d8d8e0; }
.device.on .bezel .lamp { background: #ff2a3c; box-shadow: 0 0 7px 2px rgba(255, 50, 60, .75); }
.device.phone .bezel .lamp, .device.phone .bezel .lamp-print, .device.phone .bezel .print, .device.phone .bezel .stripes { display: none; }
canvas.lcd { image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 3px; background: var(--lcd-off);
  box-shadow: 0 0 0 3px #4f5160, 0 2px 6px rgba(0, 0, 0, .5) inset; }
.device.off canvas.lcd { filter: saturate(.6) brightness(.8); }

/* the print on the body: the FM-1's name for a control, and under it what it is to the Game Boy */
.lbl { font: italic 600 12px/1 var(--print); letter-spacing: .06em; color: var(--navy); text-align: center; pointer-events: none; white-space: nowrap; }
.lbl .gb { display: block; margin-top: 3px; font: 600 11px/1 var(--print); font-style: normal; color: var(--magenta); letter-spacing: .04em; }
.lbl.idle { opacity: .45; }

/* the knobs: charcoal, like the direction pad */
.enc { border-radius: 50%; cursor: ns-resize; }
.enc .skirt { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #56565e, var(--charcoal) 72%); box-shadow: 0 3px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(0, 0, 0, .08); }
.enc .cap { position: absolute; inset: 7px; border-radius: 50%;
  background: repeating-conic-gradient(#303036 0 5deg, #3a3a41 5deg 10deg); transform: rotate(var(--turn, 0deg)); }
.enc .cap::after { content: ""; position: absolute; left: 50%; top: 3px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: #e8e6df; }
.enc.idle { opacity: .5; }

/* the buttons */
.btn {
  border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #a2a4ad, var(--rubber));
  box-shadow: 0 2px 0 #5f6068, 0 3px 5px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 11px/1.1 var(--print); letter-spacing: .04em; color: #f2f1ec; text-align: center;
}
.btn .gb { font: 700 10px/1 var(--print); color: #ffd9e8; margin-top: 3px; letter-spacing: .02em; }
.btn.dir { background: linear-gradient(180deg, #45454c, var(--charcoal)); box-shadow: 0 2px 0 #141417, 0 3px 5px rgba(0, 0, 0, .45); }
.btn.dir .gb { font-size: 14px; color: #e8e6df; }
.btn.pill { border-radius: 999px; background: linear-gradient(180deg, #9c9ea7, #7b7d86); box-shadow: 0 2px 0 #55565e, 0 3px 5px rgba(0, 0, 0, .35); }
.btn.idle { opacity: .55; }
.btn.down { transform: translateY(2px); box-shadow: 0 0 0 #000, 0 1px 2px rgba(0, 0, 0, .5); }
.btn.latched { outline: 2px dashed var(--navy); outline-offset: 3px; }

/* the keys: two of them are the Game Boy's A and B */
.key { border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #e3dfd7, #cfcbc3); box-shadow: 0 2px 0 #96928a, 0 3px 5px rgba(0, 0, 0, .3); }
.key.black { background: linear-gradient(180deg, #55555c, #3a3a40); box-shadow: 0 2px 0 #1b1b1f, 0 3px 5px rgba(0, 0, 0, .4); }
.key.idle { opacity: .5; }
.key.ab { background: radial-gradient(circle at 40% 28%, #c2437c, var(--magenta) 62%); box-shadow: 0 2px 0 #5c1233, 0 3px 6px rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; font: 700 26px/1 var(--print); color: #f6dbe7; }
.device.phone .key.ab { font-size: 13px; }
.key.step { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12%; box-sizing: border-box;
  font: 700 14px/1 var(--print); color: #77736b; }                       /* DMGo: the white keys are its steps */
.device.phone .key.step { font-size: 9px; }
.key.down { transform: translateY(2px); box-shadow: 0 0 0 #000, 0 1px 2px rgba(0, 0, 0, .5); }

.hint { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; display: none;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy); }
.show-hints .hint { display: block; }
.btn .hint { bottom: -15px; }
.key .hint { bottom: 8px; color: #f6dbe7; }
.device.phone .hint { display: none; }

/* the power switch: on the top edge, where the Game Boy has its own */
.power { border: 0; padding: 0; cursor: pointer; border-radius: 5px; background: #8f8b84; box-shadow: 0 2px 2px rgba(0, 0, 0, .45) inset; }
.power::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 46%; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #d9d5cd 0 2px, #b3afa7 2px 4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: left .12s; }
.power.on::after { left: calc(54% - 3px); }
.power:disabled { cursor: default; opacity: .6; }
.power-print { font: 600 9px/1 var(--print); letter-spacing: .1em; color: var(--navy); white-space: nowrap; pointer-events: none; }
.power.ready { animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 2px 2px rgba(0, 0, 0, .45) inset, 0 0 0 4px rgba(154, 34, 87, .45); } }
@media (prefers-reduced-motion: reduce) { .power.ready { animation: none; } }
.device :focus-visible { outline: 2px dashed var(--navy); outline-offset: 3px; }

/* ---- songs and saves (the song page's code against the simulator: songs.js) */
.songs p { margin: 0 0 10px; }
.act { display: inline-block; margin: 0 8px 8px 0; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--magenta); color: #fbe6ef; font: 600 13px/1.3 var(--print); letter-spacing: .03em; }
.act:hover { filter: brightness(1.12); }
.act[disabled], .act.off { opacity: .45; cursor: default; pointer-events: none; }
#songs-table { max-width: 620px; margin-bottom: 10px; }
#songs-table td.name { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
#songs-table td.do { text-align: right; white-space: nowrap; }
#songs-table button { background: none; border: 0; padding: 0; margin-left: 14px; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
#songs-table button[disabled] { opacity: .45; cursor: default; }