:root {
  color-scheme: dark;
  --bg:#0b0e14;
  --surface:#121722;
  --surface2:#171e2c;
  --text:#f4f6fb;
  --muted:#aab3c5;
  --line:#2a3447;
  --accent:#7fe3a1;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, rgba(88,115,170,.18), transparent 34rem), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.boot-locked,
body.portrait-blocked { overflow: hidden; }

.page { width:min(1120px,calc(100% - 28px)); margin:0 auto; padding:28px 0 44px; }
.topbar { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.eyebrow { margin:0 0 4px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(28px,5vw,46px); line-height:1; }
h2 { margin:0 0 10px; font-size:18px; }
p { line-height:1.55; }
.save-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(18,23,34,.86); font-size:13px; white-space:nowrap; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(127,227,161,.12); }

.game-card { overflow:hidden; width:100%; aspect-ratio:4/3; min-height:340px; border:1px solid var(--line); border-radius:18px; background:#000; box-shadow:0 22px 70px rgba(0,0,0,.42); }
#game { width:100%; height:100%; position:relative; background:#000; }
.boot-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; color:#fff; }
.boot-status span { color:var(--muted); font-size:14px; }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.panel { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--surface2),var(--surface)); }
.panel p { margin:0; }

/* Fullscreen launch gate. This provides the user gesture browsers require. */
.start-gate {
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:grid;
  place-items:center;
  padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:rgba(2,4,8,.96);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.start-gate.is-hidden { display:none; }
.start-card { width:min(440px,92vw); text-align:center; padding:30px 24px; border:1px solid #303a4d; border-radius:24px; background:linear-gradient(180deg,#151b27,#0c1018); box-shadow:0 28px 90px rgba(0,0,0,.55); }
.start-card h1 { font-size:clamp(30px,8vw,48px); }
.start-card p { margin:12px auto 22px; max-width:330px; color:#b9c3d5; }
.start-icon { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 18px; border:1px solid #40506a; border-radius:18px; font-size:38px; line-height:1; }
.start-action { display:inline-flex; min-width:190px; justify-content:center; padding:13px 22px; border-radius:999px; background:#f5f7fb; color:#080b11; font-size:14px; font-weight:900; letter-spacing:.08em; }

/* Portrait is deliberately blocked after launch on touch devices. */
.portrait-gate {
  position:fixed;
  inset:0;
  z-index:2147483645;
  display:none;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:28px;
  text-align:center;
  background:#05070b;
  color:white;
  touch-action:none;
}
.portrait-gate.is-visible { display:grid; }
.portrait-gate strong { font-size:24px; }
.portrait-gate span { color:#aeb8ca; font-size:14px; }
.rotate-phone { font-size:54px; margin-bottom:8px; }

/* Custom EmulatorJS touch control sizing. The generated buttons receive b_<id> classes. */
#game .ejs_virtualGamepad_left {
  width:145px !important;
  height:145px !important;
  left:max(18px, env(safe-area-inset-left)) !important;
  bottom:max(32px, env(safe-area-inset-bottom)) !important;
}
#game .ejs_virtualGamepad_right {
  width:210px !important;
  height:170px !important;
  right:max(18px, env(safe-area-inset-right)) !important;
  bottom:max(32px, env(safe-area-inset-bottom)) !important;
}

#game .ejs_virtualGamepad_button.b_up,
#game .ejs_virtualGamepad_button.b_down,
#game .ejs_virtualGamepad_button.b_left,
#game .ejs_virtualGamepad_button.b_right {
  width:50px !important;
  height:50px !important;
  line-height:48px !important;
  border-radius:14px !important;
  border:2px solid rgba(255,255,255,.48) !important;
  background:rgba(8,12,18,.52) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

#game .ejs_virtualGamepad_button.b_magic,
#game .ejs_virtualGamepad_button.b_attack,
#game .ejs_virtualGamepad_button.b_jump {
  width:74px !important;
  height:62px !important;
  line-height:60px !important;
  border-radius:22px !important;
  border:2px solid rgba(255,255,255,.52) !important;
  background:rgba(8,12,18,.58) !important;
  letter-spacing:.01em;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

#game .ejs_virtualGamepad_button.b_pause {
  position:fixed !important;
  left:auto !important;
  top:auto !important;
  right:max(6px, env(safe-area-inset-right)) !important;
  bottom:max(6px, env(safe-area-inset-bottom)) !important;
  z-index:2147483000 !important;
  width:96px !important;
  height:40px !important;
  line-height:34px !important;
  border-radius:14px !important;
  border:2px solid rgba(255,255,255,.5) !important;
  background:rgba(8,12,18,.58) !important;
  font-size:12px !important;
  letter-spacing:.02em;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

#game .ejs_virtualGamepad_button.ejs_virtualGamepad_button_down {
  transform:scale(.93);
  background:rgba(255,255,255,.32) !important;
}

/* Make the game behave like a dedicated handheld in landscape on touch devices. */
@media (orientation:landscape) and (pointer:coarse) {
  html, body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:#000; }
  body { position:fixed; inset:0; }
  .page { width:100vw; height:100dvh; margin:0; padding:0; }
  .topbar, .info-grid { display:none !important; }
  .game-card { width:100vw; height:100dvh; min-height:0; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; }
  #game { width:100vw; height:100dvh; touch-action:none; }
}

@media (max-width:720px) {
  .page { width:min(100% - 18px,1120px); padding-top:18px; }
  .topbar { align-items:flex-start; flex-direction:column; gap:12px; }
  .game-card { min-height:260px; border-radius:12px; }
  .info-grid { grid-template-columns:1fr; }
}

/* v9 launch screen + draggable control designer */
.start-card { cursor:default; }
.start-action {
  border:0;
  cursor:pointer;
  margin:6px auto;
  width:min(300px,100%);
}
.secondary-action {
  background:transparent;
  color:#f5f7fb;
  border:1px solid #40506a;
  font-size:12px;
}
.start-action[hidden] { display:none !important; }

.layout-designer {
  position:fixed;
  inset:0;
  z-index:2147483647;
  background:#05070b;
  color:#fff;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
}
.layout-designer.is-hidden { display:none; }
.designer-stage {
  position:absolute;
  inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  border:1px dashed rgba(255,255,255,.22);
  border-radius:14px;
  background:radial-gradient(circle at center,rgba(255,255,255,.04),transparent 55%);
}
.designer-hint {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.5);
  color:#cbd4e4;
  font-size:12px;
  pointer-events:none;
  white-space:nowrap;
}
.designer-control {
  position:absolute;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  color:#fff;
  border:2px solid rgba(255,255,255,.58);
  background:rgba(18,24,34,.78);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  font-weight:800;
  touch-action:none;
  cursor:grab;
}
.designer-control.is-dragging { cursor:grabbing; outline:3px solid rgba(127,227,161,.48); }
.designer-control.dpad { width:50px; height:50px; border-radius:14px; font-size:23px; }
.designer-control.action { width:74px; height:62px; border-radius:22px; font-size:14px; }
.designer-control.pause { width:92px; height:38px; border-radius:14px; font-size:11px; }
.designer-reset,
.designer-accept {
  position:absolute;
  z-index:10;
  border:0;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}
.designer-reset {
  left:12px;
  top:12px;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.designer-accept {
  right:12px;
  top:12px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#7fe3a1;
  color:#07100a;
  font-size:28px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* The actual emulator controls use the saved viewport-relative positions. */
#game .ejs_virtualGamepad_button.b_up,
#game .ejs_virtualGamepad_button.b_down,
#game .ejs_virtualGamepad_button.b_left,
#game .ejs_virtualGamepad_button.b_right,
#game .ejs_virtualGamepad_button.b_magic,
#game .ejs_virtualGamepad_button.b_attack,
#game .ejs_virtualGamepad_button.b_jump,
#game .ejs_virtualGamepad_button.b_pause {
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:2147483000 !important;
}
#game .ejs_virtualGamepad_button.b_up    { left:var(--ctrl-up-x,12vw) !important; top:var(--ctrl-up-y,68dvh) !important; }
#game .ejs_virtualGamepad_button.b_left  { left:var(--ctrl-left-x,6vw) !important; top:var(--ctrl-left-y,80dvh) !important; }
#game .ejs_virtualGamepad_button.b_right { left:var(--ctrl-right-x,18vw) !important; top:var(--ctrl-right-y,80dvh) !important; }
#game .ejs_virtualGamepad_button.b_down  { left:var(--ctrl-down-x,12vw) !important; top:var(--ctrl-down-y,92dvh) !important; }
#game .ejs_virtualGamepad_button.b_magic  { left:var(--ctrl-magic-x,70vw) !important; top:var(--ctrl-magic-y,65dvh) !important; }
#game .ejs_virtualGamepad_button.b_attack { left:var(--ctrl-attack-x,80vw) !important; top:var(--ctrl-attack-y,80dvh) !important; }
#game .ejs_virtualGamepad_button.b_jump   { left:var(--ctrl-jump-x,90vw) !important; top:var(--ctrl-jump-y,64dvh) !important; }
#game .ejs_virtualGamepad_button.b_pause { left:var(--ctrl-pause-x,96vw) !important; top:var(--ctrl-pause-y,94dvh) !important; }

/* Preserve press feedback while keeping custom positions. */
#game .ejs_virtualGamepad_button.ejs_virtualGamepad_button_down {
  transform:translate(-50%,-50%) scale(.93) !important;
}


/* v2: force readable game-action names instead of Genesis A/B/C labels. */
#game .ejs_virtualGamepad_button.b_magic,
#game .ejs_virtualGamepad_button.b_attack,
#game .ejs_virtualGamepad_button.b_jump {
  font-size: 13px !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-align: center !important;
  white-space: nowrap !important;
}
#game .ejs_virtualGamepad_button.b_magic { font-size: 12px !important; }