/* ============================================================
   KWONMO — emu.css
   웹 에뮬레이터(목록·플레이) 전용. 수치·색은 val.css 토큰만 쓴다.
   플레이 화면은 작업개요서 8장 목업(모바일 390×844, 데스크탑 1280×1000)을 옮긴 것이다.
   게임기 색(--emu-*)도 판을 따른다 — 조간판은 베이지 게임기, 야간판은 어두운 작업대 패널(val.css 판 블록).
   ============================================================ */

.emu-stage { max-width: var(--page-max); margin-inline: auto; padding: var(--sp-lg); }

.emu-bar {
  display: flex; align-items: flex-end; gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm); border-bottom: var(--rule-w) solid var(--rule-ink);
}
/* h1 까지 붙여야 layout.css 의 [data-layout="plain"] .stage h1(1.4rem)을 이긴다 */
.emu-bar h1.emu-h1 { font-family: var(--ed-display); font-size: 1.6rem; color: var(--text); }

.emu-status { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }
.emu-empty { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }

/* ================= 목록 ================= */
.emu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-md); }
.emu-card {
  position: relative; padding: .75rem var(--sp-md);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
}
.emu-card-link { display: block; color: inherit; text-decoration: none; }
/* 대표 이미지 칸. 이미지가 없어도 같은 크기로 비워 둬 한 줄의 카드 배치를 맞춘다.
   비율은 emu-list.js 가 잘라 올리는 크기(640×360)와 짝이다 */
.emu-card-img {
  display: block; aspect-ratio: 16 / 9; margin: var(--sp-xs) 0 var(--sp-sm);
  border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden;
}
.emu-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emu-card-menu {
  position: absolute; top: var(--sp-sm); right: var(--sp-sm);
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-mid); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.emu-card-menu:hover { background: var(--surface-2); color: var(--text); }
.emu-card-menu:disabled { cursor: wait; opacity: .4; }
/* 기종 테두리는 hover 에도 유지한다 — 강조색으로 바뀌면 기종 구분이 사라진다. 대신 바탕을 바꾼다 */
.emu-card[data-system="sfc"] { border-color: var(--emu-sys-sfc); }
.emu-card[data-system="nes"] { border-color: var(--emu-sys-nes); }
.emu-card[data-system="dos"] { border-color: var(--emu-sys-dos); }
.emu-card[data-system="mame"] { border-color: var(--emu-sys-mame); }
.emu-card[data-system="nds"] { border-color: var(--emu-sys-nds); }
.emu-card[data-system="win"] { border-color: var(--emu-sys-win); }
.emu-card[data-system]:hover { background: var(--surface-2); }
/* 마우스 없는 기기의 Windows 게임(emu-list.js) — 누르면 안내만 한다 */
.emu-card.is-locked { opacity: .5; }
.emu-card.is-locked .emu-card-link { cursor: not-allowed; }
/* 제목은 두 줄 높이로 둔다 — 한 줄짜리와 두 줄짜리 카드가 한 줄에 있어도 대표 이미지 위치가 맞는다 */
.emu-card h2 { margin: var(--sp-xs) 0; min-height: 2lh; font-family: var(--ed-display); font-size: 1.05rem; line-height: 1.35; }
.emu-tag {
  display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-mid); font-size: .72rem;
}
.emu-card-when { font-size: .78rem; color: var(--text-dim); }

/* ================= 플레이 — 공통(모바일 기준) ================= */
.emu-console {
  /* 게임 화면 높이를 정할 때 빼는 나머지(상단바·베젤·컨트롤러·여백) 높이. 브레이크포인트마다 다시 준다.
     실측값에 반올림 여유를 더했다(393×700 에서 코어 이름이 찬 상태로 실측 21.05rem) — 넉넉하게 잡으면 실제 폰(주소창·하단 바만큼 화면이 낮다)에서 화면이 과하게 준다.
     컨트롤러 크기·여백을 바꾸면 다시 잰다 */
  --emu-chrome: 21.75rem;
  min-height: 100dvh;
  padding: calc(var(--sp-sm) + var(--safe-t)) var(--sp-md) calc(var(--sp-sm) + var(--safe-b));
  background: var(--emu-body);
  color: var(--emu-ink);
  /* 연타·길게 누르기에 글자 선택·확대 돋보기·문맥 메뉴가 끼어들지 않게 */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.emu-console[hidden], .emu-screen[hidden], .emu-console [hidden] { display: none !important; }

.emu-top, .emu-body { max-width: 30rem; margin-inline: auto; }

.emu-top {
  position: relative;
  /* ← | 제목 | 나머지 버튼은 보이는 만큼 오른쪽에 auto 칸으로 붙는다(기종·브라우저마다 숨는 버튼이 다르다).
     모바일은 사이트 헤더를 숨겨 판 전환까지 여기 들어오므로 버튼을 작게 둬 제목 자리를 남긴다 */
  display: grid; grid-template-columns: 2.4rem 1fr; grid-auto-flow: column; grid-auto-columns: auto;
  align-items: center; gap: .4rem;
  margin-bottom: .5rem;
}
.emu-top-btn {
  display: flex; align-items: center; justify-content: center; gap: .3em; height: 2.4rem; padding: 0 .9rem; white-space: nowrap;
  border: 0; border-radius: var(--radius-md);
  background: var(--emu-face); color: var(--emu-ink);
  font: inherit; font-size: .82rem; text-decoration: none; cursor: pointer;
}
.emu-back, #emuMenu, .emu-full, .emu-mute, .emu-sync-btn, .emu-edition { padding: 0; font-size: 1.1rem; }
#emuMenu, .emu-full, .emu-mute, .emu-sync-btn, .emu-edition { width: 2.4rem; }
.emu-mute[aria-pressed="false"] .ico-muted,
.emu-mute[aria-pressed="true"]  .ico-sound { display: none; }
.emu-full[aria-pressed="false"] .ico-compress,
.emu-full[aria-pressed="true"]  .ico-expand { display: none; }
.emu-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font-size: .95rem; font-weight: 600;
}
.emu-desk, .emu-key { display: none; }

/* NAS 세이브 창. 상단바 아래에 겹쳐 띄운다 — 밀어내면 게임 화면 높이가 그만큼 줄어든다 */
.emu-sync {
  position: absolute; top: calc(100% + var(--sp-xs)); right: 0; z-index: 10;
  width: min(18rem, 100%); padding: var(--sp-md);
  border-radius: var(--radius-md); background: var(--emu-face); color: var(--emu-ink);
}
.emu-sync-info { font-size: .85rem; font-weight: 600; }
.emu-sync-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin: var(--sp-sm) 0; }
.emu-sync-acts button {
  height: 2.5rem; border: 0; border-radius: var(--radius-sm);
  background: var(--emu-xy); color: var(--emu-btn-ink); font: inherit; font-size: .82rem; cursor: pointer;
}
.emu-sync-acts button:disabled { opacity: .45; cursor: default; }
.emu-sync-note { font-size: .72rem; color: var(--emu-ink-sub); }

/* ---------- 화면 ---------- */
/* 모바일은 테두리 액자 없이 화면 띠를 창 폭 끝까지 깐다 — 높이가 모자라 화면이 줄 때 남는 양옆이
   두꺼운 베젤로 보이지 않고 같은 띠 안의 여백이 된다 */
.emu-bezel { margin-inline: calc(50% - 50vw); padding-bottom: .35rem; background: var(--emu-bezel); }
.emu-bezel .emu-status { padding: var(--sp-xl) var(--sp-md); color: var(--emu-bezel-ink); }
/* 폭은 늘 100%, 높이만 창에 맞춰 묶는다. 묶여서 비율보다 납작해지면 에뮬레이터가 안에서 양옆을 비운다 */
.emu-screen {
  width: 100%;
  max-height: calc(100dvh - var(--emu-chrome));
  aspect-ratio: 8 / 7;
  overflow: hidden;
  background: var(--emu-screen);
}
#emuPlayer { width: 100%; height: 100%; }
/* EmulatorJS 가 터치로 시작하면 자기 가상패드를 띄운다. 이 화면은 아래 컨트롤러가 그 역할을 한다 */
#emuPlayer .ejs_virtualGamepad_parent { display: none !important; }
#emuPlayer canvas { image-rendering: pixelated; }
/* js-dos 는 iframe 안에 뜬다(스타일 격리 — emu-play.js loadDosFrame) */
.emu-dos-frame { display: block; width: 100%; height: 100%; border: 0; }

.emu-line {
  /* 띠는 창 폭이지만 글자는 상단바·컨트롤러 폭에 맞춘다 */
  display: flex; align-items: center; gap: .5rem; width: min(30rem, 100% - 2 * var(--sp-md)); margin-inline: auto; padding-top: .45rem;
  font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 500; color: var(--emu-bezel-ink);
  /* 글자 한 줄 높이를 늘 잡아 둔다 — 코어 이름이 시작 뒤에 들어와 그때 줄이 높아지면 게임 화면이 밀린다 */
  min-height: calc(.45rem + 1lh);
}
.emu-led { width: .45rem; height: .45rem; border-radius: 50%; background: var(--emu-led); }

/* ---------- 컨트롤러 ---------- */
.emu-pad { margin-top: .5rem; touch-action: none; }

.emu-gamepad {
  display: grid; grid-template-columns: 1fr 1fr; row-gap: .5rem;
  grid-template-areas: "sys sys" "dpad abxy";
  align-items: center;
}
/* CHNG — 방향키와 ABXY 자리만 좌우로 맞바꾼다. 붙는 쪽(justify-self)도 같이 뒤집는다 */
.emu-gamepad.is-swapped { grid-template-areas: "sys sys" "abxy dpad"; }
.emu-gamepad.is-swapped .emu-dpad { justify-self: end; }
.emu-gamepad.is-swapped .emu-abxy { justify-self: start; }

.emu-b {
  border: 0; padding: 0; font: inherit; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  transition: transform .06s, filter .06s;
}
.emu-b.is-down { transform: scale(.94); filter: brightness(.82); }

.emu-dpad { grid-area: dpad; position: relative; width: 8.25rem; height: 8.25rem; cursor: pointer; }
.emu-arm { position: absolute; border-radius: .625rem; background: var(--emu-dpad); }
.emu-arm-v { left: 33.34%; width: 33.33%; top: 0; height: 100%; }
.emu-arm-h { top: 33.34%; height: 33.33%; left: 0; width: 100%; }
/* 삼각형은 테두리로 그린다. 눌린 방향만 밝힌다 */
.emu-tri { position: absolute; width: 0; height: 0; border: .48rem solid transparent; }
.emu-tri.up    { top: 1rem;    left: calc(50% - .48rem); border-bottom: .72rem solid var(--emu-dpad-ink); border-top: 0; }
.emu-tri.down  { bottom: 1rem; left: calc(50% - .48rem); border-top: .72rem solid var(--emu-dpad-ink); border-bottom: 0; }
.emu-tri.left  { left: 1rem;   top: calc(50% - .48rem);  border-right: .72rem solid var(--emu-dpad-ink); border-left: 0; }
.emu-tri.right { right: 1rem;  top: calc(50% - .48rem);  border-left: .72rem solid var(--emu-dpad-ink); border-right: 0; }
.emu-tri.is-down { filter: brightness(1.6); }
/* 대각선 표시. 입력 자리는 원래부터 십자 바깥 모서리였다 — 보이게만 한다(play.php) */
.emu-diag { position: absolute; font-size: .75rem; line-height: 1; color: var(--emu-ink-sub); pointer-events: none; }
.emu-diag.ul { top: 10%; left: 10%; }
.emu-diag.ur { top: 10%; right: 10%; }
.emu-diag.dl { bottom: 10%; left: 10%; }
.emu-diag.dr { bottom: 10%; right: 10%; }
.emu-dpad.is-down .emu-arm { filter: brightness(.85); }

/* X 위 · Y 왼쪽 · A 오른쪽 · B 아래 */
.emu-abxy { grid-area: abxy; justify-self: end; position: relative; width: 9.5rem; height: 9.5rem; }
.emu-abxy .emu-b {
  position: absolute; width: 3.125rem; height: 3.125rem; border-radius: 50%;
  color: var(--emu-btn-ink); font-size: 1.05rem;
}
.emu-xy { background: var(--emu-xy); }
.emu-ab { background: var(--emu-ab); }
.emu-abxy .x { top: 0;    left: calc(50% - 1.5625rem); }
.emu-abxy .b { bottom: 0; left: calc(50% - 1.5625rem); }
.emu-abxy .y { left: 0;   top: calc(50% - 1.5625rem); }
.emu-abxy .a { right: 0;  top: calc(50% - 1.5625rem); }

.emu-sys { grid-area: sys; display: flex; justify-content: space-between; }
.emu-ss {
  width: 6.5rem; height: 2rem; border-radius: 1rem;
  background: var(--emu-ss); color: var(--emu-ss-ink); font-size: .75rem; letter-spacing: .06em;
}

/* ---------- 컨트롤러 탭. SFC 계열은 모양만 맞추고 게임패드 하나뿐이다(emu-play.js) ---------- */
.emu-tabs:not([hidden]) {
  display: grid; grid-template-columns: repeat(3, 1fr) auto auto; gap: .25rem;
  margin-bottom: .5rem; padding: .25rem; border-radius: var(--radius-md); background: var(--emu-face);
}
.emu-tabs button {
  height: 1.75rem; border: 0; border-radius: .5625rem; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--emu-ink-sub);
}
.emu-tabs button[aria-pressed="true"] { background: var(--emu-tab-on); color: var(--emu-tab-on-ink); font-weight: 600; }
.emu-tabs button:disabled { opacity: .4; cursor: default; }
.emu-tabs .emu-tab-act { padding: 0 .55rem; font-size: .72rem; color: var(--emu-ink); background: var(--emu-body); }
/* ---------- 화면 키보드(DOS) — 위 F키·숫자 띠(11칸), 아래 이동키 | Chng·Tab·Shift | 동그란 키(위 Y·N) ---------- */
.emu-kbd { display: grid; row-gap: .3rem; }
.emu-kbd-row { display: grid; grid-template-columns: repeat(11, 1fr); gap: .3rem; }
.emu-kbd-row button, .emu-kbd-main button, .emu-simple button {
  height: 2.1rem; padding: 0; min-width: 0;
  border: var(--hairline) solid var(--emu-key-line); border-radius: .375rem;
  background: var(--emu-key); color: var(--emu-ink); cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .82rem; font-weight: 600;
  touch-action: none;
}
.emu-kbd-f button { font-size: .66rem; }
.emu-kbd-row .fn, .emu-kbd-mid .fn { background: var(--emu-face); font-size: .66rem; }
.emu-kbd-main .arr, .emu-simple .arr { background: var(--emu-dpad); border-color: var(--emu-dpad); color: var(--emu-dpad-ink); }
.emu-kbd-row button.is-down, .emu-kbd-main button.is-down, .emu-simple button.is-down { filter: brightness(.82); }

/* 양쪽 칸을 같은 폭(1fr)으로 둬 가운데 묶음이 늘 한가운데에 온다(커스텀 탭과 같은 방식). 맞바꾸면 붙는 쪽도 뒤집는다 */
.emu-kbd-main {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "dir mid act";
  align-items: center; margin-top: .3rem;
}
.emu-kbd.is-swapped .emu-kbd-main { grid-template-areas: "act mid dir"; }
.emu-kbd-dir { grid-area: dir; justify-self: start; }
.emu-kbd-act { grid-area: act; justify-self: end; }
.emu-kbd.is-swapped .emu-kbd-dir { justify-self: end; }
.emu-kbd.is-swapped .emu-kbd-act { justify-self: start; }
/* 이동키·동그란 키는 같은 3×3 칸에 십자로 놓는다. 393 폭에서 두 묶음과 가운데가 한 줄에 들어가고, 사이가 벌어져 옆 키가 같이 눌리지 않는 크기 */
.emu-kbd-dir, .emu-kbd-act { display: grid; grid-template-columns: repeat(3, 2.9rem); grid-template-rows: repeat(3, 2.9rem); gap: .15rem; }
.emu-kbd-main .up     { grid-column: 2; grid-row: 1; }
.emu-kbd-main .left   { grid-column: 1; grid-row: 2; }
.emu-kbd-main .right  { grid-column: 3; grid-row: 2; }
.emu-kbd-main .bottom, .emu-kbd-main .down { grid-column: 2; grid-row: 3; }
.emu-kbd-main .top    { grid-column: 2; grid-row: 1; }
.emu-kbd-dir button { height: auto; border-radius: .75rem; font-size: 1.1rem; }
.emu-kbd-act button {
  height: auto; border: 0; border-radius: 50%;
  background: var(--emu-xy); color: var(--emu-btn-ink); font-size: .66rem;
}
.emu-kbd-act .ent { background: var(--emu-ab); }
/* 위 칸 하나에 Y·N 둘 — 세 칸 폭을 차지하고 다른 동그란 키와 같은 크기로 나란히 둔다 */
.emu-kbd-main .emu-kbd-yn { grid-column: 1 / -1; display: flex; justify-content: center; gap: .6rem; }
.emu-kbd-yn button { width: 2.9rem; }
.emu-kbd-mid { grid-area: mid; display: grid; gap: .45rem; }
.emu-kbd-mid button { width: 3rem; height: 1.9rem; border-radius: .95rem; }
.emu-kbd-main .emu-kbd-swap { border: 0; background: var(--emu-ss); color: var(--emu-ss-ink); font-size: .66rem; }

/* ---------- 커스텀 키(DOS, 클래스는 예전 이름 simple) — 입력키 | 자리 바꾸기 | 커서 이동키 ---------- */
.emu-simple:not([hidden]) {
  /* 양쪽 칸을 같은 폭(1fr)으로 둬 자리 바꾸기 버튼이 늘 한가운데에 온다. 두 묶음은 폭이 달라
     (이동키가 더 넓다) 각자 바깥 끝에 붙인다 — 맞바꾸면 붙는 쪽도 뒤집는다 */
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l swap r";
  align-items: center;
  padding-top: .5rem;
}
.emu-simple-l { justify-self: start; }
.emu-simple-r { justify-self: end; }
.emu-simple.is-swapped { grid-template-areas: "r swap l"; }
.emu-simple.is-swapped .emu-simple-l { justify-self: end; }
.emu-simple.is-swapped .emu-simple-r { justify-self: start; }
/* 세 줄 높이를 이동키(3.25rem × 3 + 틈)와 맞춘다 — 더 높으면 컨트롤러가 커져 게임 화면이 줄어든다.
   키 사이를 벌려 둔다 — 붙어 있으면 엄지로 옆 키를 같이 누르기 쉽다 */
.emu-simple-l {
  --emu-simple-gap: .5rem;
  grid-area: l; display: grid; grid-template-columns: repeat(2, 3.25rem); grid-template-rows: repeat(3, 3rem);
  gap: .525rem var(--emu-simple-gap);
}
.emu-simple-l button { width: 100%; height: 100%; border-radius: .75rem; font-size: .7rem; }
.emu-simple-l .fn { background: var(--emu-face); }
/* 좌클릭·우클릭은 틈 없이 붙여 마우스 버튼 한 벌처럼 보이게 한다 — 각자 틈의 절반씩 넓힌다 */
.emu-simple-l .click { width: calc(100% + var(--emu-simple-gap) / 2); }
.emu-simple-l [data-mouse="0"] { justify-self: start; border-radius: .75rem 0 0 .75rem; }
.emu-simple-l [data-mouse="1"] { justify-self: end; border-radius: 0 .75rem .75rem 0; }
/* 작게 둔다 — 가운데 칸이 좁아야 양쪽 1fr 칸에 넓은 이동키 묶음이 들어가고, 이동키와 사이가 벌어져 잘못 눌리지 않는다.
   글자 대신 가운데 점 하나(::before) */
.emu-simple .emu-simple-swap {
  grid-area: swap; width: 1rem; height: 1rem; border: 0; border-radius: 50%;
  background: var(--emu-ss); color: var(--emu-ss-ink);
}
.emu-simple-swap::before { content: ""; display: block; width: .3rem; height: .3rem; margin: auto; border-radius: 50%; background: currentColor; }
.emu-simple-r {
  grid-area: r; display: grid; gap: .15rem;
  grid-template-columns: repeat(3, 3.25rem); grid-template-rows: repeat(3, 3.25rem);
}
/* 상하좌우는 네모, 대각선은 작은 원 — 모양으로 갈라 상하좌우를 누르려다 대각선이 걸리지 않게 */
.emu-simple-r button { height: auto; border-radius: .75rem; font-size: 1.1rem; }
.emu-simple-r .up    { grid-column: 2; grid-row: 1; }
.emu-simple-r .left  { grid-column: 1; grid-row: 2; }
.emu-simple-r .right { grid-column: 3; grid-row: 2; }
.emu-simple-r .down  { grid-column: 2; grid-row: 3; }
.emu-simple-r .diag { width: 70%; height: 70%; justify-self: center; align-self: center; border-radius: 50%; font-size: .85rem; }
.emu-simple-r .ul { grid-column: 1; grid-row: 1; }
.emu-simple-r .ur { grid-column: 3; grid-row: 1; }
.emu-simple-r .dl { grid-column: 1; grid-row: 3; }
.emu-simple-r .dr { grid-column: 3; grid-row: 3; }
.emu-kbd-note { margin-top: .4rem; text-align: center; font-size: .72rem; color: var(--emu-ink-sub); }

.emu-note { margin-left: auto; }
.emu-note.is-error { color: var(--emu-ab); }

/* ---------- DOS. 퀵세이브·퀵로드는 DOSBox-X 스테이트 저장 ---------- */
/* 나머지 높이는 고른 탭(emu-play.js 가 data-tab 으로 단다)마다 다르다. 게임패드 탭은 SFC 와 같은 구성이라 기본값을 그대로 쓴다 */
.emu-console[data-system="dos"][data-tab="kbd"] {
  /* 393×700 키보드 탭 실측 23.2rem 에 반올림 여유 */
  --emu-chrome: 23.875rem;
}
.emu-console[data-system="dos"][data-tab="simple"] {
  /* 393×700 커스텀 탭 실측 19.6rem 에 반올림 여유 */
  --emu-chrome: 20.375rem;
}
.emu-console[data-system="dos"] .emu-key { display: none !important; }
/* 데스크톱은 창 높이로 묶지 않아 4:3 그대로 둔다. 모바일은 SFC 와 같은 8:7 틀에 맞춰 화면·패드 자리를 같게 하고,
   4:3 게임 화면은 틀 안에서 js-dos 가 위아래를 검게 비운다(renderAspect) */
@media (min-width: 80.0625em) {
  .emu-console[data-system="dos"] .emu-screen { aspect-ratio: 4 / 3; }
}

/* ---------- NDS: 두 화면을 위아래로 그려 세로로 긴 2:3 ---------- */
.emu-console[data-screen="nds"] .emu-screen { aspect-ratio: 2 / 3; }
/* 모바일에서는 세로로 긴 화면이 컨트롤러에 밀려 너무 작아진다 — NDS 만 컨트롤러를 줄여 그 높이를 화면에 준다 */
@media (max-width: 80em) {
  .emu-console[data-screen="nds"] {
    /* 393×760 코어 이름이 찬 상태로 실측 18.7rem 에 반올림 여유. 아래 컨트롤러 크기·배치를 바꾸면 다시 잰다 */
    --emu-chrome: 19.375rem;
  }
  .emu-console[data-screen="nds"] .emu-gamepad { row-gap: .4rem; }
  .emu-console[data-screen="nds"] .emu-dpad { width: 6.25rem; height: 6.25rem; }
  .emu-console[data-screen="nds"] .emu-tri.up    { top: .75rem; }
  .emu-console[data-screen="nds"] .emu-tri.down  { bottom: .75rem; }
  .emu-console[data-screen="nds"] .emu-tri.left  { left: .75rem; }
  .emu-console[data-screen="nds"] .emu-tri.right { right: .75rem; }
  .emu-console[data-screen="nds"] .emu-abxy { width: 7.25rem; height: 7.25rem; }
  .emu-console[data-screen="nds"] .emu-abxy .emu-b { width: 2.5rem; height: 2.5rem; }
  .emu-console[data-screen="nds"] .emu-abxy .x,
  .emu-console[data-screen="nds"] .emu-abxy .b { left: calc(50% - 1.25rem); }
  .emu-console[data-screen="nds"] .emu-abxy .y,
  .emu-console[data-screen="nds"] .emu-abxy .a { top: calc(50% - 1.25rem); }
}

/* ---------- 모바일·태블릿: 사이트 헤더와 FAB 를 숨기고 이 화면 상단바가 대신한다 ---------- */
@media (max-width: 80em) {
  [data-layout="console"] .masthead,
  [data-layout="console"] .fab { display: none; }
}

/* ---------- 세로 태블릿: 폰 배치를 넓힌다 ----------
   폰 폭(30rem)에 묶인 상단바·패드가 창 폭 화면 아래 가운데에 작게 떠 있지 않게 화면과 같은 폭으로 펴고,
   두 손 엄지가 양 끝에 닿도록 패드를 한 단계 키운다(zoom — 안쪽 rem 배치를 그대로 비례로 키운다).
   가로 태블릿은 배치 자체가 달라야 해서 여기 넣지 않는다.
   --emu-chrome 은 820×1180 코어 이름이 찬 상태 실측(게임패드 24.9 · 키보드 27.5 · 커스텀 23.05 · NDS 21.95rem)에 반올림 여유 */
@media (min-width: 40em) and (max-width: 80em) and (orientation: portrait) {
  .emu-console { --emu-chrome: 25.625rem; }
  .emu-console[data-system="dos"][data-tab="kbd"] { --emu-chrome: 28.25rem; }
  .emu-console[data-system="dos"][data-tab="simple"] { --emu-chrome: 23.75rem; }
  .emu-console[data-screen="nds"] { --emu-chrome: 22.625rem; }
  .emu-top, .emu-body { max-width: none; }
  .emu-line { width: calc(100% - 2 * var(--sp-md)); }
  .emu-pad { zoom: 1.25; }
}

/* ================= 플레이 — 데스크톱 ================= */
@media (min-width: 80.0625em) {
  .emu-console {
    min-height: 0; padding: var(--sp-lg);
    background: none; color: var(--text);
  }

  /* 목록(.emu-stage) 콘텐츠 폭과 맞춘다 */
  .emu-top, .emu-body { max-width: calc(var(--page-max) - 2 * var(--sp-lg)); }
  .emu-top { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
  .emu-title { flex: 1; text-align: left; font-size: 1rem; }
  .emu-top-btn {
    border: var(--hairline) solid var(--line);
    background: var(--surface); color: var(--text);
  }
  .emu-top-btn:hover { border-color: var(--accent); color: var(--accent); }
  .emu-top-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .emu-back, .emu-sync-btn { padding: 0 .9rem; font-size: .88rem; }
  .emu-sync-btn { width: auto; }
  .emu-sync { border: var(--hairline) solid var(--line); background: var(--surface); color: var(--text); }
  .emu-sync-note { color: var(--text-dim); }
  .emu-desk { display: inline; }
  .emu-top-btn.emu-desk { display: flex; }
  .emu-mob { display: none; }

  .emu-body { padding: 1.25rem 4.875rem 1.5rem; border-radius: 1.75rem; background: var(--emu-body); color: var(--emu-ink); }
  /* 데스크톱은 실제 키보드·마우스·게임패드로 하니 화면 컨트롤러가 한 화면에 다 보이지 않아도 된다 —
     창 높이로 묶지 않고 본체 폭을 다 쓴다(컨트롤러는 스크롤해서 본다) */
  /* 데스크톱은 본체 안에 베젤 액자를 그대로 둔다 */
  .emu-bezel { margin-inline: 0; padding: .6rem .6rem .35rem; border-radius: 1.125rem; }
  .emu-line { width: auto; padding: .45rem .25rem 0; }
  .emu-screen { max-height: none; margin-inline: auto; border-radius: .375rem; }
  /* NDS 는 세로로 길어 폭을 다 쓰면 화면 한 장이 창 높이를 넘는다 — 두 화면이 창 안에 다 들어오게 높이로 묶는다.
     빼는 높이는 화면 위아래의 상단바·본체 여백·베젤·상태줄(1700×880 실측 8.35rem + 여유) */
  .emu-console[data-screen="nds"] .emu-screen { width: min(100%, calc((100dvh - var(--header-total) - 10.5rem) * 2 / 3)); }
  .emu-kbd-note.emu-desk { display: block; }
  .emu-kbd-row button { height: 2.25rem; }
  .emu-kbd-dir, .emu-kbd-act { grid-template-columns: repeat(3, 3.75rem); grid-template-rows: repeat(3, 3.75rem); gap: .35rem; }
  .emu-kbd-act button { font-size: .75rem; }
  .emu-kbd-mid { gap: .6rem; }
  .emu-kbd-mid button { width: 4.25rem; height: 2.25rem; border-radius: 1.125rem; }

  /* 커스텀 키 — 넓은 본체에서는 키와 간격을 키워 작아 보이지 않게 한다. 세 줄 높이는 이동키(3.75rem × 3 + 틈)와 맞춘다 */
  .emu-simple-l { --emu-simple-gap: .6rem; grid-template-columns: repeat(2, 3.75rem); grid-template-rows: repeat(3, 3.5rem); gap: .625rem var(--emu-simple-gap); }
  .emu-simple-l button { font-size: .78rem; }
  .emu-simple-r { gap: .35rem; grid-template-columns: repeat(3, 3.75rem); grid-template-rows: repeat(3, 3.75rem); }
  .emu-simple-r button { font-size: 1.25rem; }

  .emu-pad { margin-top: 1.5rem; }
  .emu-console.is-padless .emu-pad { display: none; }

  .emu-gamepad {
    grid-template-columns: 1fr auto 1fr; column-gap: var(--sp-lg); row-gap: 1rem;
    grid-template-areas: "dpad sys abxy";
  }
  .emu-gamepad.is-swapped { grid-template-areas: "abxy sys dpad"; }
  .emu-sys { gap: 1rem; }
  .emu-ss { width: 6.25rem; height: 2.25rem; font-size: .7rem; }
  .emu-key { display: inline; margin-left: .6em; font-weight: 500; opacity: .7; }

  .emu-dpad { width: 7.5rem; height: 7.5rem; }
  .emu-tri.up { top: .8rem; } .emu-tri.down { bottom: .8rem; } .emu-tri.left { left: .8rem; } .emu-tri.right { right: .8rem; }

  .emu-abxy { width: 8.25rem; height: 8.25rem; }
  .emu-abxy .emu-b { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
  .emu-abxy .x, .emu-abxy .b { left: calc(50% - 1.375rem); }
  .emu-abxy .y, .emu-abxy .a { top: calc(50% - 1.375rem); }
  .emu-abxy-keys {
    display: block; position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
    white-space: nowrap; margin: 0; font-size: .68rem; color: var(--emu-ink-sub);
  }
}