/* ===== base (theme "dark") ===== */
:root {
  --bg: #14161a;
  --page-bg: var(--bg);
  --panel: #1d2026;
  --line: #2c3038;
  --text: #e8eaed;
  --muted: #9aa0a8;
  --accent: #62d26f;
  --accent-ink: #0b1a0d;
  --btn-bg: #272b33;
  --key-bg: #272b33;
  --key-text: var(--text);
  --toast-bg: rgba(20,22,26,.88);
  --err: #ff8a80;
  --dlg-bg: #1d2026;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--page-bg); background-attachment: fixed; color: var(--text); min-height: 100%;
  font: 15px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
main { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
h1 { font-size: 22px; margin: 8px 0 2px; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
#status { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
input[type=range] { accent-color: var(--accent); }

.btn { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 10px 14px; border-radius: 10px; font: inherit; cursor: pointer; text-align: center; display: inline-block; }
.btn:active { filter: brightness(1.25); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.big { padding: 14px 18px; font-size: 16px; }
.btn.wide { width: 100%; margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ===== home ===== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.card .btn { background: var(--btn-bg); }
.card .btn.primary { background: var(--accent); }
.card > .btn { display: block; width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.row:first-of-type { margin-top: 0; }
.row .btn.big { flex: 1 1 130px; }
select { flex: 1 1 140px; min-width: 0; padding: 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--btn-bg); color: var(--text); font: inherit; }
.hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
#msg { margin: 10px 0 4px; min-height: 1.4em; font-size: 13px; color: var(--muted); }
#msg.err { color: var(--err); }
#msg.ok { color: var(--accent); }
details { color: var(--muted); font-size: 13px; margin-top: 8px; }
summary { cursor: pointer; padding: 4px 0; }
details ul { padding-left: 18px; }
.extra { margin-top: 6px; }
.vol { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; }
.vol input { flex: 1; }

.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme { appearance: none; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--btn-bg); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.theme::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(128,128,128,.5); flex: none; }
.theme[aria-checked="true"] { border-color: var(--accent); }

/* ===== game view ===== */
#game { display: flex; flex-direction: column;
  min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); }
.bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.grow { flex: 1; }
.icon { appearance: none; width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; font: 600 14px/1 inherit; }
.icon:active { filter: brightness(1.3); }
.icon:disabled { opacity: .4; }
.icon svg { display: block; }

#screenWrap { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #000;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
#canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#toast { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--toast-bg); font-size: 13px; text-align: center; pointer-events: none; }
#toast.err { color: var(--err); }
#toast.ok { color: var(--accent); }

/* ===== touch controls: centered in the free space under the screen ===== */
#pad { display: none; margin: auto 0; padding: 22px 0 12px; user-select: none; -webkit-user-select: none; touch-action: none; }
@media (pointer: coarse), (max-width: 700px) { #pad { display: block; } }
.key { appearance: none; border: 1px solid var(--line); background: var(--key-bg); color: var(--key-text);
  font: 600 16px/1 inherit; border-radius: 12px; touch-action: none; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; }
.key.active { background: var(--accent); color: var(--accent-ink); }
.shoulders { display: flex; justify-content: space-between; margin-bottom: 24px; }
.shoulders .key { width: 36%; height: 48px; }
.main { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 2px; position: relative; }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; }
.dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.ab { position: relative; width: 142px; height: 130px; }
.key.round { position: absolute; width: 64px; height: 64px; border-radius: 50%; font-size: 21px; }
.key.round.b { left: 0; bottom: 0; }
.key.round.a { right: 0; top: 0; }
.system { display: flex; justify-content: center; gap: 28px; margin-top: 28px; }
.key.small { width: 108px; height: 40px; font-size: 14px; }

/* ===================================================== */
/* ===== theme: Advance (indigo shell, 3D buttons) ===== */
/* ===================================================== */
[data-theme="gba"] {
  --bg: #3b2f7c;
  --page-bg: radial-gradient(120% 70% at 50% 0%, #7461d1 0%, #51419f 42%, #2e2368 100%);
  --panel: rgba(22,14,58,.5);
  --line: rgba(255,255,255,.16);
  --text: #f3f0ff;
  --muted: #c4bbf0;
  --accent: #9df0b0;
  --accent-ink: #12301c;
  --btn-bg: rgba(255,255,255,.1);
  --toast-bg: rgba(20,12,52,.9);
}
[data-theme="gba"] #screenWrap { width: calc(100% - 24px); margin: 12px auto; border: 0; border-radius: 6px;
  box-shadow: 0 0 0 11px #1c1c2b, 0 0 0 13px #0b0b14, 0 0 0 15px rgba(255,255,255,.1), 0 14px 28px rgba(0,0,0,.5); }
[data-theme="gba"] .key, [data-theme="gba"] .icon {
  border: 0; color: #dcd7f7; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  background: linear-gradient(#4d4d6b, #2d2d44);
  box-shadow: 0 5px 0 #14142a, 0 9px 10px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.3);
  transition: transform .04s, box-shadow .04s; }
[data-theme="gba"] .key.active, [data-theme="gba"] .icon:active {
  transform: translateY(4px); color: #fff; filter: none;
  background: linear-gradient(#3b3b57, #272740);
  box-shadow: 0 1px 0 #14142a, 0 2px 4px rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.5); }
[data-theme="gba"] .shoulders .key { border-radius: 16px 16px 6px 6px; }
/* one-piece cross */
[data-theme="gba"] .dpad { gap: 0; }
[data-theme="gba"] .dpad::before { content: ''; grid-area: 2 / 2; background: linear-gradient(#41415d, #2d2d44); box-shadow: 0 5px 0 #14142a; }
[data-theme="gba"] .dpad .key { border-radius: 4px; position: relative; z-index: 1; }
[data-theme="gba"] .dpad .up { border-radius: 14px 14px 3px 3px; }
[data-theme="gba"] .dpad .down { border-radius: 3px 3px 14px 14px; }
[data-theme="gba"] .dpad .left { border-radius: 14px 3px 3px 14px; }
[data-theme="gba"] .dpad .right { border-radius: 3px 14px 14px 3px; }
/* A and B */
[data-theme="gba"] .key.round { color: #2b2166; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background: radial-gradient(circle at 35% 28%, #f4f1ff 0%, #b2a7ea 45%, #7566c8 100%);
  box-shadow: 0 6px 0 #3a2e80, 0 11px 12px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.7); }
[data-theme="gba"] .key.round.active { transform: translateY(5px);
  background: radial-gradient(circle at 35% 28%, #e4dffb 0%, #9d90dc 50%, #6254b4 100%);
  box-shadow: 0 1px 0 #3a2e80, 0 3px 5px rgba(0,0,0,.4), inset 0 3px 6px rgba(0,0,0,.3); }
/* Start and Select as tilted pills */
[data-theme="gba"] .key.small { width: 92px; height: 30px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; transform: rotate(-24deg); }
[data-theme="gba"] .key.small.active { transform: translateY(3px) rotate(-24deg); }
[data-theme="gba"] .system { gap: 34px; }
[data-theme="gba"] .btn.primary { color: var(--accent-ink); border: 0; box-shadow: 0 4px 0 #5fae74, inset 0 1px 1px rgba(255,255,255,.5); }

/* ===================================================== */
/* ===== theme: Neon (glowing outlines) ================= */
/* ===================================================== */
[data-theme="neon"] {
  --bg: #090513;
  --page-bg: radial-gradient(75% 45% at 10% 0%, rgba(255,43,214,.3), transparent 62%),
             radial-gradient(75% 45% at 100% 100%, rgba(0,229,255,.26), transparent 62%), #090513;
  --panel: rgba(18,12,40,.78);
  --line: rgba(0,229,255,.3);
  --text: #eaf7ff;
  --muted: #8fa0c8;
  --accent: #00e5ff;
  --accent-ink: #00131a;
  --btn-bg: rgba(255,255,255,.05);
  --key-bg: rgba(0,229,255,.06);
  --key-text: #86f4ff;
  --toast-bg: rgba(9,5,19,.9);
}
[data-theme="neon"] #screenWrap { border: 1px solid #00e5ff; box-shadow: 0 0 22px rgba(0,229,255,.4), inset 0 0 14px rgba(0,229,255,.2); }
[data-theme="neon"] .key, [data-theme="neon"] .icon { border: 2px solid #00e5ff; color: #86f4ff;
  text-shadow: 0 0 8px rgba(0,229,255,.8);
  box-shadow: 0 0 10px rgba(0,229,255,.45), inset 0 0 10px rgba(0,229,255,.18); }
[data-theme="neon"] .key.round { border-color: #ff2bd6; color: #ff9bee; background: rgba(255,43,214,.07);
  text-shadow: 0 0 8px rgba(255,43,214,.85); box-shadow: 0 0 12px rgba(255,43,214,.55), inset 0 0 12px rgba(255,43,214,.2); }
[data-theme="neon"] .key.small, [data-theme="neon"] .shoulders .key { border-color: #a678ff; color: #cbb0ff; background: rgba(166,120,255,.07);
  text-shadow: 0 0 8px rgba(166,120,255,.85); box-shadow: 0 0 10px rgba(166,120,255,.5), inset 0 0 10px rgba(166,120,255,.2); }
[data-theme="neon"] .key.active { background: #00e5ff; color: #00131a; text-shadow: none;
  box-shadow: 0 0 26px rgba(0,229,255,.95), inset 0 0 8px rgba(255,255,255,.5); }
[data-theme="neon"] .key.round.active { background: #ff2bd6; color: #1a0016; box-shadow: 0 0 28px rgba(255,43,214,.95); }
[data-theme="neon"] .key.small.active, [data-theme="neon"] .shoulders .key.active { background: #a678ff; color: #12002e; box-shadow: 0 0 26px rgba(166,120,255,.95); }
[data-theme="neon"] .btn.primary { box-shadow: 0 0 18px rgba(0,229,255,.6); }
[data-theme="neon"] .card { box-shadow: 0 0 16px rgba(0,229,255,.12), inset 0 0 12px rgba(0,229,255,.05); }

/* ===================================================== */
/* ===== theme: Soft light (raised, pillowy buttons) ==== */
/* ===================================================== */
[data-theme="light"] {
  --bg: #e6e9f0;
  --page-bg: #e6e9f0;
  --panel: #e6e9f0;
  --line: #d3d8e3;
  --text: #2f3646;
  --muted: #667086;
  --accent: #2a9a5a;
  --accent-ink: #ffffff;
  --btn-bg: #e6e9f0;
  --key-bg: #e6e9f0;
  --key-text: #3a4256;
  --toast-bg: rgba(255,255,255,.94);
  --err: #c0392b;
}
[data-theme="light"] .card, [data-theme="light"] .btn, [data-theme="light"] .icon, [data-theme="light"] .key, [data-theme="light"] .theme {
  border: 0; box-shadow: 6px 6px 12px #c3c8d5, -6px -6px 12px #ffffff; }
[data-theme="light"] .card { box-shadow: 8px 8px 16px #c3c8d5, -8px -8px 16px #ffffff; }
[data-theme="light"] .btn:active, [data-theme="light"] .icon:active, [data-theme="light"] .key.active {
  filter: none; background: var(--key-bg); color: var(--accent);
  box-shadow: inset 4px 4px 8px #c3c8d5, inset -4px -4px 8px #ffffff; }
[data-theme="light"] .btn.primary { background: var(--accent); color: #fff; box-shadow: 5px 5px 10px #b6d3c1, -5px -5px 10px #ffffff; }
[data-theme="light"] .card .btn.primary { background: var(--accent); }
[data-theme="light"] select { border: 0; box-shadow: inset 3px 3px 6px #c3c8d5, inset -3px -3px 6px #ffffff; }
[data-theme="light"] .theme[aria-checked="true"] { box-shadow: inset 3px 3px 6px #c3c8d5, inset -3px -3px 6px #ffffff, 0 0 0 2px var(--accent); }
[data-theme="light"] #screenWrap { width: calc(100% - 20px); margin: 10px auto; border: 0; border-radius: 8px;
  box-shadow: 0 0 0 8px #d9dde8, 8px 8px 18px 8px #c3c8d5, -8px -8px 18px 8px #ffffff; }
[data-theme="light"] .key.round { color: #8a5a9e; }
[data-theme="light"] .key.small, [data-theme="light"] .shoulders .key { color: #5a6b86; }
[data-theme="light"] #toast { color: #2f3646; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ===== spacing fixes and dialog ===== */
.card > .btn + .row { margin-top: 14px; }
#cloudState { margin-top: 0; }
#cloudState + .row, #cloudState + div { margin-top: 12px; }

dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--dlg-bg); color: var(--text);
  padding: 18px; width: min(92vw, 420px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin: 0 0 8px; font-size: 17px; }
#dlgText { margin: 0 0 12px; white-space: pre-line; color: var(--muted); font-size: 14px; }
#dlgCode { font: 600 17px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-align: center;
  padding: 12px; margin-bottom: 12px; border-radius: 10px; background: var(--btn-bg); word-break: break-all; user-select: all; -webkit-user-select: all; }
#dlgInput { width: 100%; padding: 12px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--btn-bg); color: var(--text); font: 600 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em; text-transform: uppercase; }
#dlgBtns { display: grid; gap: 8px; }
#dlgBtns .btn { width: 100%; }
[data-theme="gba"] { --dlg-bg: #2d2366; }
[data-theme="neon"] { --dlg-bg: #120a28; }
[data-theme="neon"] dialog { box-shadow: 0 0 24px rgba(0,229,255,.3); }
[data-theme="light"] { --dlg-bg: #e6e9f0; }
[data-theme="light"] dialog { border: 0; box-shadow: 10px 10px 24px rgba(0,0,0,.25); }

.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.keycap { min-width: 130px; }