:root{--bg:#000;--fg:#e8e8f0;--key:#2a2a3a;--key-hi:#5b5bd6;--line:#ffffff30}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,1fr);overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#screen{display:flex;justify-content:center;background:#000}
#emu{--ar:1.5;position:relative;width:min(100%,calc((100dvh - 340px) * var(--ar)));aspect-ratio:var(--ar);background:#111;overflow:hidden;touch-action:none}
.emu-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
/* EmulatorJS 자체 화면(메뉴·가상 패드·시작 버튼)은 숨기고 캔버스만 쓴다 */
#emu #ejs-host,#emu .ejs_parent{position:absolute;inset:0;width:100%;height:100%;background:#000}
#emu .ejs_menu_bar,#emu .ejs_virtualGamepad_open,#emu [class*=ejs_menu],#emu .ejs_virtualGamepad_parent,#emu .ejs_start_button,#emu .ejs_context_menu,#emu .ejs_message,#emu .ejs_settings_parent,#emu .ejs_cheat_parent,#emu .ejs_netplay_parent{display:none!important}
#emu canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
#top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}
#bMenu{padding:9px 16px;font-size:13px}
.chip{background:#1d1d29;color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:6px 9px;white-space:nowrap;font:600 12px system-ui}
.chip:active{background:var(--key-hi)}
.pill{background:var(--key);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font:700 12px system-ui;letter-spacing:.06em}
.pill.sm{min-width:56px;padding:12px 0}
.pill.on,.round.on{background:var(--key-hi)}
#pad{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"d a" "m m";align-content:end;align-items:center;row-gap:16px;padding:8px 18px 20px}
#dpad{grid-area:d;position:relative;width:140px;height:140px;justify-self:start;border-radius:50%;background:radial-gradient(circle,#232333 0 28%,#16161f 29% 100%);border:1px solid var(--line)}
.arrow{position:absolute;width:0;height:0;border:12px solid transparent;opacity:.55}
.arrow.up{left:50%;top:10px;transform:translateX(-50%);border-bottom:18px solid #fff;border-top:0}
.arrow.down{left:50%;bottom:10px;transform:translateX(-50%);border-top:18px solid #fff;border-bottom:0}
.arrow.left{top:50%;left:10px;transform:translateY(-50%);border-right:18px solid #fff;border-left:0}
.arrow.right{top:50%;right:10px;transform:translateY(-50%);border-left:18px solid #fff;border-right:0}
.arrow.on{opacity:1}
#mid{grid-area:m;display:flex;flex-direction:row;gap:18px;justify-content:center}
#ab{grid-area:a;position:relative;width:140px;height:120px;justify-self:end}
.round{position:absolute;width:64px;height:64px;border-radius:50%;background:var(--key);color:var(--fg);border:1px solid var(--line);font:800 22px system-ui}
.round.a{right:0;top:6px}.round.b{left:0;bottom:6px}
.round.x,.round.y,.round.c{display:none}
#ab.ab3{width:176px;height:104px}
#ab.ab3 .round{width:54px;height:54px;font-size:20px}
#ab.ab3 .a{left:0;right:auto;top:46px}#ab.ab3 .b{left:60px;bottom:auto;top:26px}#ab.ab3 .c{left:120px;top:6px}
#ab.ab3 .c{display:block}
#ab.ab4{width:154px;height:154px}
#ab.ab4 .round{width:56px;height:56px;font-size:20px}
#ab.ab4 .x,#ab.ab4 .y{display:block}
#ab.ab4 .x{left:49px;top:0;right:auto}#ab.ab4 .y{left:0;top:49px}
#ab.ab4 .a{right:0;left:auto;top:49px}#ab.ab4 .b{left:49px;bottom:0;top:auto}
.hide-lr [data-k=l],.hide-lr [data-k=r]{visibility:hidden}
.hide-select [data-k=select]{display:none}

#overlay{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;z-index:10}
#overlay.hide{display:none}
.box{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.title{font:600 16px system-ui;opacity:.85}
.go,.pick{background:var(--key-hi);color:#fff;border:0;border-radius:999px;padding:14px 28px;font:700 16px system-ui;cursor:pointer}
.pick{background:var(--key)}
[hidden]{display:none!important}

/* 가로 모드: 화면은 중앙, 패드는 양옆에 겹쳐 배치 */
@media (orientation:landscape) and (max-height:520px){
  #app{display:block}
  #screen{position:absolute;inset:0;align-items:center}
  #emu{width:auto;height:100dvh;max-width:100vw;aspect-ratio:var(--ar)}
  #top{position:absolute;left:0;right:0;top:0;padding:6px 10px;pointer-events:none}
  #top>*{pointer-events:auto}
  #bMenu{opacity:.6}
  #pad{position:absolute;inset:auto 0 0 0;height:100%;display:block;padding:0;pointer-events:none}
  #pad>*{pointer-events:auto}
  #dpad{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:140px;height:140px;opacity:.7}
  #ab.ab4{width:154px;height:154px}
  #ab{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));opacity:.8}
  #mid{position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;opacity:.6}
}

.acct{font:13px system-ui;opacity:.75}
.acct a{color:#aab;text-decoration:underline}
#toast{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);background:#000c;border:1px solid var(--line);color:var(--fg);padding:7px 14px;border-radius:999px;font:600 12px system-ui;opacity:0;transition:opacity .25s;pointer-events:none;z-index:20;white-space:nowrap}
#toast.show{opacity:1}

.gname{font:800 20px system-ui;max-width:86vw;text-align:center}
.link{background:none;border:0;color:#aab;text-decoration:underline;font:14px system-ui;padding:6px}
.box{max-width:92vw}
#picker{display:flex;flex-direction:column;gap:12px;width:min(360px,90vw);max-height:68dvh;overflow:auto;touch-action:pan-y;align-items:stretch}
#picker[hidden]{display:none}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-sys{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#14141c;color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:700 14px system-ui}
.pk-sys.cur{border-color:var(--key-hi);background:#1b1b33}
.pk-sys small,#picker .pk-list button small{font:12px system-ui;opacity:.6;white-space:nowrap}
.pk-badge{font:800 11px system-ui;letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:var(--key-hi);color:#fff}
.pk-sys[data-sys=gba] .pk-badge{background:#6a5acd}.pk-sys[data-sys=gb] .pk-badge{background:#6f8f2f}.pk-sys[data-sys=nes] .pk-badge{background:#c0392b}
.pk-sys[data-sys=snes] .pk-badge{background:#8e44ad}.pk-sys[data-sys=segaMD] .pk-badge{background:#2c3e50}.pk-sys[data-sys=segaMS] .pk-badge{background:#2471a3}
.pk-sys[data-sys=segaGG] .pk-badge{background:#17806d}.pk-sys[data-sys=nds] .pk-badge{background:#566573}
.pk-head{display:flex}
.pk-list{display:flex;flex-direction:column;gap:8px}
#picker .pk-list button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:#14141c;color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font:700 15px system-ui}
#picker .pk-list button.cur{border-color:var(--key-hi);background:#1b1b33}
.pk-search{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#101018;color:var(--fg);font:15px system-ui;-webkit-user-select:text;user-select:text}
.pk-empty{opacity:.6;text-align:center;padding:14px;font:14px system-ui}
#panel{position:fixed;inset:0;background:#000b;z-index:15;display:flex;align-items:flex-end;justify-content:center}
#panel[hidden]{display:none}
.sheet{width:min(420px,100%);background:#10101a;border:1px solid var(--line);border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.sheet-title{font:700 14px system-ui;opacity:.7;text-align:center;margin-bottom:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{background:var(--key);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:15px 8px;font:700 14px system-ui}
.big:active{background:var(--key-hi)}
.big.wide{width:100%}
.big.ghost{background:transparent}
.sheet .acct{text-align:center;margin-top:2px}
@media (orientation:landscape) and (max-height:520px){ .sheet{max-height:100dvh;overflow:auto;border-radius:20px} #panel{align-items:center} }