:root{color-scheme:dark;--bg:#0d0e13;--panel:#151720;--panel2:#1b1e29;--line:#2a2e3b;--text:#f2f3f8;--muted:#9da3b4;--accent:#9b8cff;--accent2:#64d7c4;--danger:#ff7777;--radius:18px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -10%,rgba(102,88,195,.16),transparent 35%),var(--bg);color:var(--text);min-height:100vh}button,input,select{font:inherit}.app-shell{max-width:1180px;margin:auto;padding:0 28px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#9c8dff,#6455bd);display:grid;place-items:center;font-weight:900;letter-spacing:-1px;color:#100f1b;box-shadow:0 7px 24px #7869d344}.brand-copy{display:grid;gap:2px}.brand-copy strong{font-size:15px;letter-spacing:.04em}.brand-copy small{font-size:9px;letter-spacing:.22em;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:14px}.version{font-size:10px;letter-spacing:.13em;color:#858b9e}.icon-button{border:1px solid var(--line);border-radius:10px;background:#171923;color:var(--text);padding:8px 12px;cursor:pointer}.hero{min-height:300px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;position:relative;overflow:hidden}.hero-copy{padding:46px 0}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--accent2);font-weight:800;margin:0 0 13px}.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.13;letter-spacing:-.045em;margin:0;max-width:600px}.hero-desc{color:var(--muted);font-size:14px;line-height:1.8;max-width:520px;margin:18px 0}.hero-tags{display:flex;gap:8px;flex-wrap:wrap}.hero-tags span{font-size:9px;letter-spacing:.13em;border:1px solid #373449;background:#1b1a28;color:#c6bfff;padding:7px 10px;border-radius:7px}.hero-art{height:270px;position:relative;display:grid;place-items:center}.cabinet{width:160px;height:220px;background:linear-gradient(120deg,#353244,#191a24 60%);border:3px solid #5b526f;border-radius:18px 18px 12px 12px;transform:perspective(600px) rotateY(-12deg) rotateX(2deg);box-shadow:24px 22px 0 #0006,0 20px 65px #7d65e933;position:relative;padding:15px}.cabinet:before{content:"";position:absolute;inset:7px;border:1px solid #ffffff16;border-radius:12px}.cabinet-screen{height:115px;background:#090d13;border:7px solid #655b79;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 28px #7c67e844}.screen-glow{font-size:34px;font-weight:1000;color:#9df5d9;text-shadow:0 0 12px #64d7c4;letter-spacing:-.1em}.screen-glow span{display:block;font-size:9px;letter-spacing:.4em;text-align:center}.cabinet-control{height:35px;display:flex;align-items:center;justify-content:center;gap:9px}.cabinet-control i{width:22px;height:22px;border-radius:50%;background:#111;border:4px solid #8d80b6;margin-right:13px}.cabinet-control b{width:14px;height:14px;border-radius:50%;background:#ff827f;box-shadow:0 0 10px #ff827f77}.cabinet-control b:last-child{background:#8c83ff;box-shadow:0 0 10px #8c83ff77}.cabinet-slot{height:5px;width:42px;background:#090a0e;margin:0 auto;border-radius:5px}.pixel-star{position:absolute;width:8px;height:8px;background:var(--accent2);box-shadow:0 0 18px var(--accent2)}.star-one{top:36px;left:19%}.star-two{bottom:38px;right:15%;background:#a18fff;box-shadow:0 0 18px #a18fff}.hero-orbit{position:absolute;border:1px solid #8e7fe82a;border-radius:50%;width:260px;height:110px;transform:rotate(-27deg)}.orbit-two{width:300px;height:145px;transform:rotate(42deg);border-color:#64d7c41c}.notice-row{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;border:1px solid #514a744d;background:linear-gradient(90deg,#26223899,#171923);border-radius:14px;margin:2px 0 38px}.notice-icon{flex:none;width:23px;height:23px;border-radius:50%;background:#8e7de5;color:#151321;display:grid;place-items:center;font-weight:900;font-size:13px}.notice-row strong{font-size:12px}.notice-row p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.65}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:0 0 17px}.section-heading h2{font-size:25px;margin:0;letter-spacing:-.03em}.count-pill{font-size:10px;letter-spacing:.1em;border:1px solid var(--line);border-radius:30px;padding:7px 11px;color:#c4c7d4}.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.import-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px;min-width:0}.card-icon{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:12px;letter-spacing:.05em}.nes-icon{background:#273e43;color:#78e2d1}.arcade-icon{background:#342c4d;color:#b6a6ff}.card-body{flex:1;min-width:0}.card-body h3,.bios-copy h3{font-size:13px;margin:0 0 6px}.card-body p,.bios-copy p{font-size:10px;line-height:1.55;color:var(--muted);margin:0}.inline-select{margin-top:8px;max-width:100%;background:#202331;color:#ddd9f3;border:1px solid #3b3a50;border-radius:7px;padding:6px 8px;font-size:10px}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 13px;font-size:11px;font-weight:750;white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s}.button:active{transform:scale(.97)}.button-primary{background:#9b8cff;color:#171425}.button-secondary{background:#282b38;color:#e4e5ed;border:1px solid #3b4050}.file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.bios-panel{margin-top:14px;background:#13151d;border:1px solid var(--line);border-radius:15px;padding:16px 18px}.bios-copy{display:flex;gap:12px;align-items:center}.small-icon{font-size:9px;font-weight:900;letter-spacing:.1em;color:#d4caff;background:#302b48;padding:10px;border-radius:9px}.bios-actions{display:flex;gap:8px;margin-top:14px}.bios-actions select,.library-toolbar select{background:#1c1f2a;color:var(--text);border:1px solid #343847;border-radius:9px;padding:9px 11px;font-size:11px}.bios-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.muted-note{font-size:10px;color:#777e90}.bios-chip{display:flex;align-items:center;gap:8px;background:#202330;border:1px solid #363b4b;border-radius:8px;padding:6px 8px}.bios-chip span{font-size:9px;color:#c3b7ff;font-weight:800}.bios-chip small{font-size:10px;color:#b6bac8}.bios-chip button{border:0;background:transparent;color:#aab0c0;font-size:17px;cursor:pointer}.library-toolbar{display:flex;gap:9px;margin:24px 0 14px}.search-wrap{display:flex;align-items:center;gap:9px;flex:1;background:#171923;border:1px solid var(--line);border-radius:9px;padding:0 12px;color:#9b8cff}.search-wrap input{width:100%;background:transparent;border:0;outline:0;color:var(--text);padding:10px 0;font-size:11px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:150px}.empty-state{grid-column:1/-1;border:1px dashed #343848;border-radius:15px;display:grid;justify-items:center;align-content:center;text-align:center;min-height:180px;padding:22px}.empty-cartridge{font-size:30px;color:#8e81d9;margin-bottom:7px}.empty-state h3{font-size:13px;margin:0 0 6px}.empty-state p{font-size:10px;color:var(--muted);margin:0;max-width:360px;line-height:1.6}.game-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}.game-cover{height:130px;display:flex;flex-direction:column;justify-content:space-between;padding:13px;position:relative;overflow:hidden}.game-cover:after{content:"";position:absolute;width:150px;height:150px;border:1px solid #ffffff22;border-radius:50%;right:-35px;top:5px;box-shadow:0 0 0 16px #ffffff08,0 0 0 32px #ffffff05}.cover-nes{background:linear-gradient(135deg,#25464c,#17232d 70%)}.cover-arcade{background:linear-gradient(135deg,#48366d,#211c35 70%)}.game-cover span{font-size:9px;letter-spacing:.16em;color:#c7c9d6}.game-cover strong{font-size:19px;max-width:80%;line-height:1.1;overflow-wrap:anywhere}.game-cover i{font-size:8px;letter-spacing:.2em;color:#c3c8d4;font-style:normal}.game-card-content{padding:12px}.game-card-meta{display:flex;align-items:center;justify-content:space-between;color:#9ea5b7;font-size:9px}.favorite-button{border:0;background:transparent;color:#9298aa;font-size:20px;cursor:pointer}.favorite-button.active{color:#ffce6a}.game-card h3{font-size:13px;margin:3px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card p{font-size:9px;color:var(--muted);margin:0 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card-actions{display:flex;align-items:center;justify-content:space-between}.play-button{padding:8px 15px}.text-button{background:transparent;border:0;font-size:10px;cursor:pointer}.danger-text{color:#df858a}.compat-panel{margin:40px 0 36px;padding:20px;background:#13151d;border:1px solid var(--line);border-radius:16px}.compact{margin-bottom:15px}.compact h2{font-size:19px}.compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.compat-grid>div{background:#1b1e28;border-radius:10px;padding:12px;display:grid;grid-template-columns:9px 1fr;gap:7px;align-items:center}.compat-grid strong{font-size:10px}.compat-grid small{grid-column:2;color:var(--muted);font-size:9px;line-height:1.45}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-ready{background:#67d9b7;box-shadow:0 0 9px #67d9b777}.status-test{background:#e3b66e;box-shadow:0 0 9px #e3b66e55}.footer{border-top:1px solid #242733;padding:17px 0 25px;display:flex;justify-content:space-between;gap:20px;color:#747b8c;font-size:9px;letter-spacing:.04em}.toast{position:fixed;z-index:50;top:18px;left:50%;transform:translate(-50%,-18px);opacity:0;pointer-events:none;background:#e8e5ff;color:#171425;border-radius:10px;padding:11px 16px;font-size:12px;font-weight:700;box-shadow:0 12px 35px #0008;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Player */
.player-body{background:#08090d;min-height:100dvh;overflow-x:hidden}.player-topbar{height:64px;padding:0 20px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;border-bottom:1px solid #252834;background:#101117}.back-link{color:#c4c5d0;text-decoration:none;font-size:11px}.player-title{text-align:center;display:grid;gap:3px}.player-title strong{font-size:12px}.player-title small{font-size:8px;letter-spacing:.16em;color:#8c92a5}.player-actions{display:flex;justify-content:flex-end;gap:8px}.player-main{min-height:calc(100dvh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}.emulator-stage{width:min(100%,1100px);min-height:250px;display:flex;align-items:center;justify-content:center;background:#050609;border:1px solid #292d3a;border-radius:12px;overflow:hidden}.emulator-stage canvas{max-width:100%;height:auto;object-fit:contain}.player-message{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;color:#d9dbe5}.player-message h2{font-size:15px;margin:15px 0 6px}.player-message p{font-size:11px;color:#9299ab}.loader-ring{width:30px;height:30px;border:3px solid #34384a;border-top-color:#9b8cff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player-help{width:min(100%,1100px);display:flex;justify-content:space-between;gap:15px;color:#7f8698;font-size:10px;padding:13px 2px}.player-error{max-width:650px;background:#3a2027;color:#ffc4c8;border:1px solid #71414a;border-radius:10px;padding:14px;margin-top:15px;font-size:12px;line-height:1.6}
@media(max-width:760px){.app-shell{padding:0 16px}.topbar{height:66px}.version{display:none}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:36px 0 12px}.hero h1{font-size:36px}.hero-desc{font-size:12px}.hero-art{height:185px;grid-row:1;opacity:.95}.cabinet{transform:scale(.72) perspective(600px) rotateY(-12deg) rotateX(2deg)}.hero-copy{grid-row:2}.notice-row{margin-bottom:30px}.import-grid{grid-template-columns:1fr}.import-card{padding:13px;gap:10px}.card-body p{max-width:220px}.file-button{padding:9px 10px;font-size:10px}.library-toolbar{flex-wrap:wrap}.search-wrap{flex-basis:100%}.library-toolbar select{flex:1}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-cover{height:105px;padding:10px}.game-cover strong{font-size:15px}.game-card-content{padding:9px}.game-card h3{font-size:12px}.compat-grid{grid-template-columns:repeat(2,1fr)}.footer{flex-direction:column;gap:7px}.player-topbar{padding:0 10px;grid-template-columns:1fr 1.2fr 1fr;height:56px}.player-main{padding:10px 0;justify-content:flex-start}.emulator-stage{border-radius:0;border-left:0;border-right:0;min-height:230px;width:100%}.player-help{padding:10px 14px;flex-direction:column;font-size:9px}.player-actions .icon-button{padding:7px 8px;font-size:10px}.back-link{font-size:10px}}
@media(max-width:390px){.game-grid{grid-template-columns:1fr 1fr}.game-cover{height:90px}.card-icon{width:38px;height:38px}.file-button{font-size:9px;padding:8px}.bios-actions{flex-wrap:wrap}.bios-actions select{flex:1}.player-title strong{font-size:10px}}

/* Make the native hidden attribute effective even on flex/grid UI components. */
[hidden] { display: none !important; }

/* v0.1.3: visible lifecycle, touch controls, and diagnostics. */
.runtime-status{display:flex;align-items:center;gap:9px;width:min(100%,1100px);min-height:41px;padding:9px 6px;color:#b7bfd0;font-size:12px}
.runtime-status button{margin-left:auto;color:#b4a9ef}.runtime-dot{width:8px;height:8px;border-radius:50%;background:#f2bf75;box-shadow:0 0 9px #f2bf7580;flex-shrink:0}.runtime-dot.running{background:#71dbb3;box-shadow:0 0 9px #71dbb383}.runtime-dot.error{background:#ff8787;box-shadow:0 0 9px #ff878782}
.player-debug{width:min(100%,1100px);margin:7px 0 12px;border:1px solid #3a4150;border-radius:12px;background:#131720;padding:12px 15px;font-size:12px;color:#d0d5e1}.player-debug summary{cursor:pointer}.player-debug pre{white-space:pre-wrap;word-break:break-word;line-height:1.55;background:#07090f;padding:10px;border-radius:8px;max-height:300px;overflow:auto;color:#b9c3d6}
.touch-controls{width:min(100%,950px);align-items:center;justify-content:space-between;gap:16px;padding:12px 10px 18px;user-select:none;-webkit-user-select:none;touch-action:none}.touch-controls:not([hidden]){display:flex}.touch-key{background:#252a3a;border:1px solid #636a84;border-radius:14px;color:#e9ecfa;font-weight:750;min-height:51px;min-width:51px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 -3px 0 #111723;cursor:pointer}.touch-key:active,.touch-key.pressed{background:#8774e9;color:#121021;transform:translateY(1px)}.dpad{display:grid;grid-template-columns:repeat(3,51px);grid-template-rows:repeat(3,51px);gap:2px;align-items:center;justify-items:center}.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}.centerkeys{display:flex;gap:7px;align-items:center;align-self:end;margin-bottom:15px}.touch-key.small{font-size:10px;min-width:61px;min-height:33px;border-radius:18px}.actionkeys{display:flex;align-items:center;gap:12px;transform:rotate(-15deg)}.touch-key.action{min-width:68px;min-height:68px;border-radius:50%;font-size:23px}.touch-key.action.a{background:#6c4671;border-color:#b084be}.touch-key.action.b{background:#366770;border-color:#65a6b5}.touch-key.action.pressed{background:#b58cea;color:#141320}
@media(min-width:1000px) and (hover:hover) and (pointer:fine){.touch-controls:not([hidden]){display:none}}
@media(max-width:590px){.touch-controls{gap:3px;padding:14px 8px}.dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}.touch-key{min-width:40px;min-height:40px;border-radius:10px}.touch-key.action{min-width:53px;min-height:53px;font-size:19px}.actionkeys{gap:6px}.centerkeys{gap:5px;margin-bottom:5px;align-self:flex-end}.touch-key.small{min-width:43px;min-height:27px;font-size:8px;padding:0 3px}.player-main{justify-content:flex-start}.player-debug{margin:9px 8px;width:calc(100% - 16px)}.runtime-status{padding:8px 12px;font-size:11px}}
@media(max-width:740px) and (orientation:landscape){.player-topbar{height:44px}.player-main{padding:2px 0}.emulator-stage{min-height:160px;max-height:calc(100dvh - 150px)}.touch-controls{padding:4px 6px}.dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}.touch-key{min-width:34px;min-height:34px}.touch-key.action{min-width:47px;min-height:47px}.player-help{display:none}.runtime-status{min-height:24px;padding:3px 12px}.centerkeys{margin-bottom:0}}
.test-rom-hint{font-size:12px;color:#a4abba}.test-rom-hint a{color:#b4a8ff;text-underline-offset:3px}

@media(max-width:590px){.actionkeys{transform:none;gap:5px;padding-right:4px}.touch-controls{padding-right:12px}}

/* v0.1.4: non-fatal black-screen warning while collecting real PPU frames. */
.player-hint{max-width:min(100%,1100px);padding:9px 14px;margin:3px 0 4px;border:1px solid #695a32;border-radius:10px;background:#282218;color:#f6d48f;font-size:12px;line-height:1.55}
.nes-stage canvas{display:block;max-width:100%;max-height:min(72dvh,620px);image-rendering:pixelated;image-rendering:crisp-edges}

/* v0.2.1: NES displays 4:3 like a classic TV (the 256x240 source has
   non-square display pixels).  Use more available width on desktop and
   landscape phones, without stretching the arcade/FBNeo canvas. */
#game.emulator-stage.nes-stage {
  width: min(100%, 960px, 95dvh);
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  max-height: none;
  flex-shrink: 0;
  position: relative;
}
/* JSNES Screen.fitInParent writes inline 256:240 CSS sizes.  The classic-TV
   display aspect is intentional here; keep the original 256x240 bitmap. */
#game.nes-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: fill;
}
/* Mobile portrait: already at the full usable viewport width. */
@media (max-width: 760px) and (orientation: portrait) {
  #game.emulator-stage.nes-stage { width: 100%; }
}
/* Landscape handsets: controls float on either side of the game instead
   of consuming a second row of precious vertical space. */
@media (max-height: 520px) and (orientation: landscape) {
  #game.emulator-stage.nes-stage { width: min(100%, 960px, 94dvh); }
  .touch-controls:not([hidden]) {
    position: fixed;
    inset: 44px 0 0;
    z-index: 25;
    width: 100%;
    max-width: none;
    height: calc(100dvh - 44px);
    padding: 0 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }
  .touch-controls .dpad,
  .touch-controls .actionkeys,
  .touch-controls .centerkeys { pointer-events: auto; }
  .touch-controls .centerkeys {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    margin: 0;
  }
  /* In this layout the controls are an overlay, not a content row. */
  .player-main { padding-block: 2px 6px; }
}

/* v0.2.0: compatibility guidance for local arcade ROM sets. */
.rom-compat-note{font-size:11px;line-height:1.65;color:#aeb7c8;margin:4px 0 18px;padding:10px 14px;border-left:2px solid #6dbcae;background:#1b2028;border-radius:0 8px 8px 0}
.bios-panel .rom-compat-note{flex-basis:100%;margin:10px 0 0}
@media(max-width:590px){.rom-compat-note{font-size:10px;margin-top:0}}

/* v0.2.1: slightly wider FBNeo player frame; keep core-controlled ratio. */
.player-body .emulator-stage:not(.nes-stage) { width: min(100%, 1240px); }
.player-body .runtime-status,
.player-body .player-help,
.player-body .player-debug { max-width: 1240px; }

/* Small phones: keep the NES pad and A/B keys inside 320px viewports. */
@media (max-width: 359px) and (orientation: portrait) {
  .touch-controls { gap: 2px; padding: 9px 4px; }
  .dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); }
  .touch-key { min-width: 34px; min-height: 34px; }
  .touch-key.action { min-width: 44px; min-height: 44px; font-size: 17px; }
  .touch-key.small { min-width: 39px; min-height: 24px; font-size: 7px; }
  .actionkeys { gap: 3px; padding-right: 0; }
  .centerkeys { gap: 3px; }
}

/* v0.2.2: make the iPhone saved-file repair action visible next to runtime status. */
.player-body .player-error{width:min(calc(100% - 24px),650px);max-width:650px;align-self:center}
.player-body .player-error .button{margin:5px 8px 0 0;max-width:100%;white-space:normal;min-height:38px}
@media(max-width:480px){.player-body .player-error{margin:12px 12px 8px;padding:13px;font-size:12px}.player-body .player-error .button{padding:10px 12px}}
/* Pixel Arcade v0.3.0 — original 8-bit-inspired design, no external font or CSS CDN. */
:root{color-scheme:dark;--bg:#0b1522;--panel:#172638;--panel2:#213249;--line:#3d5269;--text:#f9f3e8;--muted:#a9bacb;--accent:#ffd778;--accent2:#65d6bd;--danger:#ff8c8c;--radius:3px;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
body{background:#0b1522;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:24px 24px}
.app-shell{max-width:1360px;padding:0 34px}
.topbar{height:76px;border-bottom:3px solid #30475e}
.brand-mark{border:3px solid #06111b;border-radius:1px;width:48px;height:48px;background:#ffd778;color:#101c28;box-shadow:4px 4px 0 #456b77;font:900 17px ui-monospace,monospace;letter-spacing:-1px}
.brand-copy strong{font-weight:850;font-size:17px}.brand-copy small{font:700 10px ui-monospace,monospace;letter-spacing:.16em;color:#98f4d0}
.version{font:700 10px ui-monospace,monospace;letter-spacing:.06em;color:#cbd7e1}
.icon-button{border:2px solid #70859b;border-radius:2px;background:#1b2a3b;padding:8px 13px;font-weight:800;box-shadow:3px 3px 0 #03080e}
.hero{min-height:290px;grid-template-columns:1.2fr .8fr;border-bottom:1px solid #2d465b}
.hero-copy{padding:48px 0 46px}.eyebrow{font:900 11px ui-monospace,monospace;letter-spacing:.19em;color:var(--accent2)}
.hero h1{font-size:clamp(31px,4.8vw,56px);line-height:1.25;letter-spacing:-.055em;color:#fff3d2;text-shadow:4px 4px 0 #0b2238}
.hero-desc{font-size:14px;line-height:1.9;max-width:565px}
.hero-tags span{background:#213449;border:2px solid #4f6d85;border-radius:2px;color:#ffd778;font:850 11px ui-monospace,monospace;padding:7px 12px;box-shadow:3px 3px 0 #091521}
.hero-art{height:270px;overflow:hidden}.cabinet{border:4px solid #101722;border-radius:6px 6px 3px 3px;background:#4d607b;box-shadow:9px 9px 0 #0008,0 0 0 4px #27384a;transform:rotate(3deg);padding:14px}
.cabinet:before{border-color:#90a1b8;border-radius:2px}.cabinet-screen{background:#080c11;border:8px solid #263c55;border-radius:2px;box-shadow:inset 0 0 0 3px #0f1d2a}
.screen-glow{color:#ffd778;text-shadow:4px 4px 0 #0d332d;font:1000 40px ui-monospace,monospace}.screen-glow span{font-size:12px;letter-spacing:.32em}
.cabinet-control i{border-radius:2px;background:#181b27;border-color:#99b0c0}.cabinet-control b{border-radius:2px;background:#f37b86;box-shadow:2px 2px 0 #131826}.cabinet-control b:last-child{background:#ffd778;box-shadow:2px 2px 0 #131826}
.cabinet-slot{background:#0c1722;border-radius:0}.pixel-star{width:8px;height:8px;box-shadow:8px 8px 0 #4acbb2,0 0 0 transparent}.hero-orbit{display:none}
.notice-row{border:2px solid #55727a;border-left:6px solid #72dcc0;border-radius:2px;background:#142a35;margin:24px 0 36px;padding:15px 16px;box-shadow:4px 4px 0 #071522}
.notice-icon{border-radius:1px;color:#0b1a25;background:#ffd778;font:900 16px ui-monospace,monospace}
.notice-row strong{color:#ffe0a4;font-size:13px}.notice-row p{font-size:12px}
.section-heading h2{font-size:27px;color:#fff1d7}.section-heading .eyebrow{margin-bottom:6px}
.count-pill{border:2px solid #4e6a80;border-radius:2px;padding:8px 13px;font:700 11px ui-monospace,monospace;background:#1a2d40;color:#c4e9e2}
.library-pack-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.button{border:2px solid #0a111c;border-radius:2px;padding:11px 16px;font-size:12px;font-weight:850;box-shadow:4px 4px 0 #050d16;transition:filter .12s,transform .12s,box-shadow .12s}
.button:hover{filter:brightness(1.08)}.button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #050d16}.button:disabled{opacity:.45;pointer-events:none}
.button-primary{background:#ffd778;color:#182333}.button-secondary{background:#284058;border-color:#537086;color:#f5f4ee}
.import-card,.bios-panel,.game-card,.compat-panel{background:#182a3b;border:2px solid #3b5369;border-radius:3px;box-shadow:5px 5px 0 #061321}
.import-card{padding:20px}.card-icon{border-radius:1px;width:50px;height:50px;border:2px solid #101824;font:900 14px ui-monospace,monospace}
.nes-icon{background:#275e59;color:#c6ffe1}.arcade-icon{background:#6e566f;color:#ffe9c7}.card-body h3,.bios-copy h3{font-size:15px;color:#ffecd0}.card-body p,.bios-copy p{font-size:11px;line-height:1.6}
.inline-select,.bios-actions select,.library-toolbar select{border:2px solid #4d697e;border-radius:2px;background:#0e2234;color:#f3f8f4;font-size:11px}
.bios-panel{padding:19px 20px}.small-icon{border:2px solid #486a75;background:#17414d;border-radius:1px;color:#ffe0a4;font:900 11px ui-monospace,monospace}
.bios-chip{border:1px solid #7895ad;background:#203e52;border-radius:2px}
.rom-compat-note{border-left:3px solid #f4c875;background:#192f41;color:#aebecb;border-radius:0;font-size:11px}
.search-wrap{background:#142538;border:2px solid #456078;border-radius:2px;color:#ffd778}.search-wrap input{font-size:12px}
.game-grid{gap:17px}.game-card{overflow:hidden}.game-cover{height:148px;border-bottom:2px solid #294259;padding:15px;background-color:#244657;position:relative;isolation:isolate}
.game-cover.cover-nes{background-image:repeating-linear-gradient(0deg,#20394b 0px,#20394b 12px,#294a57 12px,#294a57 16px);background-color:#20394b}
.game-cover.cover-arcade{background-image:repeating-linear-gradient(90deg,#362b49 0px,#362b49 22px,#453354 22px,#453354 26px);background-color:#362b49}
.game-cover:after{content:'▞';position:absolute;top:30%;right:5%;color:#ffffff20;font:900 105px ui-monospace,monospace;z-index:-1;border:none;border-radius:0;width:auto;height:auto;box-shadow:none}
.game-cover span{font:850 12px ui-monospace,monospace;letter-spacing:.13em;color:#b8f2e0}.game-cover strong{font-size:22px;text-shadow:2px 3px 0 #152331}.game-cover i{font:700 9px ui-monospace,monospace;letter-spacing:.08em;color:#efdfc1}
.game-card-content{padding:15px}.game-card-meta{color:#c7d8e8;font:750 10px ui-monospace,monospace}.game-card h3{font-size:15px;margin:8px 0}.game-card p{font-size:11px}.favorite-button.active{color:#ffd778}.play-button{padding:10px 18px}
.compat-panel{padding:23px;margin:42px 0}.compat-grid>div{background:#203449;border:1px solid #38546a;border-radius:2px}.compat-grid strong{font-size:11px;color:#fff1d8}.compat-grid small{font-size:10px}
.status-dot{border-radius:1px}.footer{border-top:2px solid #354c61;font:10px ui-monospace,monospace;letter-spacing:.02em;color:#9db0c0}
.toast{background:#ffe0a0;color:#121f2b;border:2px solid #0f151b;border-radius:2px;box-shadow:5px 5px 0 #0009}
.package-note{font-size:12px;line-height:1.65;color:#b7d0d5;margin:-4px 0 20px;padding:9px 12px;background:#142b36;border-left:3px solid #69d4bb}
.package-progress{padding:13px 15px;margin:0 0 20px;color:#fedc91;background:#213446;border:2px solid #628195;font:700 12px ui-monospace,monospace}
.package-progress[hidden]{display:none!important}
.pixel-dialog{background:#192d3e;color:#fff4df;border:3px solid #93aeb3;border-radius:2px;padding:0;width:min(92vw,500px);max-height:90vh;overflow:auto;box-shadow:10px 10px 0 #03090fd9}
.pixel-dialog::backdrop{background:#03080acb}.pixel-dialog form{padding:22px}.pixel-dialog h2{font-size:22px;margin:19px 0 8px}.pixel-dialog p{font-size:13px;line-height:1.7;color:#b9ced7}
.dialog-top{border-bottom:2px solid #547083;padding-bottom:12px;color:#6fdfc2;font:900 12px ui-monospace,monospace;letter-spacing:.11em}.dialog-symbol{color:#ffd778;margin-right:6px}
.dialog-note{border:1px solid #896b54;background:#3c302f;padding:10px;color:#ffdaa0!important}.restore-choice{display:flex;align-items:center;gap:10px;border:1px solid #526b80;background:#20354b;padding:12px 10px;font-size:12px;margin:8px 0;cursor:pointer}.restore-choice input{accent-color:#fed677}
.dialog-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.player-body .player-header,.player-body .emulator-stage,.player-body .runtime-status{border-radius:2px}
.player-body .player-header{border-bottom:2px solid #47617d}.player-body .player-error{border-radius:2px}
@media(max-width:1050px){.library-pack-actions{max-width:72%}.library-pack-actions .package-action{padding:9px 11px}}
@media(max-width:780px){.app-shell{padding:0 18px}.hero h1{font-size:38px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-pack-actions{max-width:none}}
@media(max-width:590px){.app-shell{padding:0 12px}.topbar{height:68px}.brand-mark{width:40px;height:40px}.brand-copy strong{font-size:15px}.version{font-size:9px}.hero{display:block;min-height:0}.hero-copy{padding:33px 2px 20px}.hero h1{font-size:34px}.hero-art{height:180px}.cabinet{transform:scale(.68) rotate(3deg)}.section-heading{align-items:flex-start;gap:12px;flex-direction:column}.library-pack-actions{width:100%;justify-content:flex-start;gap:8px}.library-pack-actions .count-pill{margin-right:auto}.library-pack-actions .package-action{padding:10px 9px;flex:1;font-size:11px}.import-grid{grid-template-columns:1fr;gap:12px}.import-card{flex-wrap:wrap}.game-grid{grid-template-columns:1fr 1fr;gap:11px}.game-cover{height:117px;padding:10px}.game-cover strong{font-size:17px}.game-card-content{padding:10px}.game-card h3{font-size:12px}.game-card p{font-size:9px}.game-card-actions{gap:6px}.game-card-actions .button{font-size:10px;padding:8px}.compat-grid{grid-template-columns:1fr 1fr}.footer{display:grid;gap:8px}.package-note{margin:8px 0 16px}.player-body .player-header{padding-inline:10px}}
@media(max-width:360px){.game-grid{grid-template-columns:1fr}.game-cover{height:138px}.library-pack-actions .package-action{font-size:10px}.library-pack-actions .count-pill{width:100%}}

/* v0.3.1 - Touch audio activation. Hidden outside NES touch playback. */
.audio-toolbar[hidden]{display:none!important}
.audio-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:min(100%,940px);margin:11px auto;padding:10px 12px;background:#142b36;border:2px solid #456b79;border-radius:3px}
.audio-toolbar .button{padding:9px 13px;box-shadow:2px 2px 0 #071321;font-size:12px}
.audio-toolbar #audioStatus{color:#bdd8d8;flex:1;min-width:135px;font-size:11px;line-height:1.55}
@media(max-width:480px){.audio-toolbar{gap:8px;padding:9px}.audio-toolbar .button{flex:1;padding:10px 8px}.audio-toolbar #audioStatus{flex:0 0 100%}}

/* v0.4.0 - save manager. Kept below legacy responsive rules. */
.save-panel[hidden]{display:none!important}
.save-panel{width:min(100%,980px);background:#112536;border:2px solid #5a8190;box-shadow:5px 5px 0 #020910;margin:14px auto 4px;padding:15px;color:#eff6f4}
.save-top{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:13px}
.save-top h2{margin:2px 0 0;font-size:18px;color:#fff5ca}
.save-kicker{font-size:9px;letter-spacing:.16em;color:#f5c776}
#saveStatus{font-size:11px;color:#bcd5da;max-width:55%;text-align:right;line-height:1.5}
#saveStatus[data-kind="error"]{color:#ff9797}#saveStatus[data-kind="ok"]{color:#8beaaf}
.save-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.save-slot{display:flex;gap:10px;align-items:center;background:#192f40;border:1px solid #426170;padding:10px;min-width:0}
.save-preview{flex:none;width:74px;height:62px;display:grid;place-items:center;background:#0a111b;color:#6e8495;font-size:22px;border:1px solid #3d5766;overflow:hidden}
.save-preview img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.save-slot-copy{display:grid;gap:6px;min-width:0;flex:1}.save-slot-copy strong{font-size:12px}.save-slot-copy small{font-size:10px;color:#a5b9c3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.save-slot-buttons{display:flex;flex-wrap:wrap;gap:5px}.save-slot-buttons .button{font-size:10px;padding:8px 10px}
.save-actions{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:14px}
.save-actions .text-button{color:#9bdce2}.save-note{color:#a4bdc5;font-size:10px;line-height:1.6;margin:12px 0 0}
.game-save-mark{color:#ffda87!important;white-space:normal!important;margin:0 0 8px!important;font-size:10px!important}
.game-card-actions{flex-wrap:wrap;gap:6px}.game-card-actions .text-button{margin-left:auto}
.button:disabled{cursor:wait;opacity:.55}
@media(max-width:760px){.save-panel{padding:12px;margin:10px auto;width:calc(100% - 16px)}.save-slots{grid-template-columns:1fr}.save-slot{padding:8px}.save-preview{width:66px;height:55px}.save-top h2{font-size:15px}.save-actions{gap:8px}.save-actions .button{white-space:normal;text-align:center}}
@media(min-width:761px) and (max-width:1100px){.save-slot{flex-wrap:wrap}.save-slot-buttons{width:100%;justify-content:flex-end}}

/* v0.5.0: single manually operated NES save, reachable without scrolling. */
.save-quickbar[hidden]{display:none!important}
.player-topbar{position:sticky;top:0;z-index:50;min-height:56px;box-sizing:border-box}
.player-topbar .player-actions{align-items:center}
.player-topbar #jumpToSaves:not([hidden]){background:#ffd778;color:#132333;border:2px solid #0a111c;box-shadow:3px 3px 0 #050d16;font-weight:900;white-space:nowrap;min-width:69px;min-height:36px}
.save-quickbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;width:min(100%,960px);padding:12px 10px 9px;box-sizing:border-box;border:2px solid #456e72;background:#173044;margin:6px auto 0}
.save-quickbar .button{min-height:44px;min-width:112px;touch-action:manipulation}
.save-quickbar .save-main-button{min-width:158px;font-size:14px}
.save-quick-meta{font-size:11px;color:#bcd2d8;line-height:1.45;overflow-wrap:anywhere}
.save-slots{grid-template-columns:1fr}
.save-panel{max-width:960px}
.save-slot{max-width:100%}
@media(max-width:760px){
  .player-topbar{grid-template-columns:minmax(52px,1fr) minmax(65px,1.25fr) auto;padding:0 8px}
  .player-topbar .player-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .player-topbar #jumpToSaves:not([hidden]){font-size:11px;padding:7px 8px;min-width:59px}
  .save-quickbar{width:calc(100% - 16px);gap:8px;padding:8px;margin-top:5px}
  .save-quickbar .save-main-button{min-width:140px;flex:1}
  .save-quickbar .button:not(.save-main-button){min-width:108px;flex:1}
  .save-quick-meta{width:100%;text-align:center;font-size:10px}
}
@media(max-width:375px){
  .player-topbar .player-title small{font-size:7px}
  .player-topbar .player-actions{gap:4px}
  .player-topbar #playerLanguage{padding:6px 5px}
  .player-topbar #fullscreenButton{padding:6px 5px}
  .save-quickbar .button{min-height:42px}
}
@media(max-height:520px) and (orientation:landscape){
  /* Side-mounted touch controls remain usable; the sticky header Save button
     is immediately accessible even if the secondary bar is below the fold. */
  .player-topbar{height:44px;min-height:44px}
  .player-topbar #jumpToSaves:not([hidden]){min-height:32px;padding:5px 7px}
  .save-quickbar{padding:5px;margin-top:2px}
  .save-quickbar .button{min-height:34px;padding:5px 9px}
}

.save-quick-status{font-size:11px;color:#9ee4bd;font-weight:800;line-height:1.3}
.save-quick-status[data-kind="error"]{color:#ff9494}
.save-quick-status:empty{display:none}
@media(max-width:760px){.save-quick-status{width:100%;text-align:center}}

/* Pixel Arcade v0.6.0: playing takes priority; settings are secondary. */
.hero{margin-bottom:18px}
.section-heading{margin-top:8px}
.player-main{justify-content:flex-start;gap:8px;padding:12px 14px 26px}
.player-topbar{z-index:40}
.player-main .runtime-status{min-height:32px;max-width:960px;padding:3px 6px;color:#9bacb8;font-size:11px}
.player-main .runtime-status .text-button{color:#98aabc}
.player-main .runtime-dot{width:7px;height:7px}

/* Direction selection and the game controls are directly below the screen. */
.controller-area{width:min(100%,960px);margin:2px auto 4px;min-width:0}
.controller-mode{display:flex;gap:5px;align-items:center;padding:3px 8px 2px}
.controller-mode-button{appearance:none;background:transparent;color:#91a6bb;border:1px solid #4c6375;border-radius:2px;min-height:30px;padding:4px 11px;cursor:pointer;font-size:11px;font-weight:800;touch-action:manipulation}
.controller-mode-button[aria-pressed="true"]{background:#ffd778;border-color:#ffd778;color:#102333}
.controller-area .touch-controls{position:static;width:100%;max-width:none;height:auto;display:block;padding:9px 6px 7px;margin:0;touch-action:none}
.controller-row{width:100%;min-height:152px;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);align-items:center;gap:8px}
.direction-zone{display:flex;align-items:center;justify-content:flex-start;min-width:0;min-height:150px}
.controller-row .dpad{flex:none}
.controller-row .centerkeys{justify-self:center;align-self:end;margin-bottom:12px}
.controller-row .actionkeys{justify-self:end;transform:none}
.virtual-joystick{position:relative;width:152px;height:152px;flex:none;border:3px solid #657f92;border-radius:50%;background:radial-gradient(circle at center,#1f4050 0 27%,#1a3548 28% 57%,#142c3c 58%);box-shadow:inset 0 0 0 8px #132738,inset 0 0 0 10px #3a5b6e;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.virtual-joystick:active{cursor:grabbing}
.virtual-joystick:after{content:"";pointer-events:none;position:absolute;top:50%;left:50%;width:68%;height:68%;transform:translate(-50%,-50%);border:1px dashed #ffffff30;border-radius:50%}
.stick-knob{position:absolute;z-index:1;left:50%;top:50%;width:66px;height:66px;background:#377587;border:3px solid #91c7cb;border-radius:50%;box-shadow:inset 0 -6px 0 #183e52,0 6px 12px #0008;transform:translate(-50%,-50%);pointer-events:none;will-change:transform}

/* One save slot, no duplicated action bars or explanatory paragraphs. */
.player-main .save-panel{width:min(100%,960px);max-width:960px;margin:6px auto 2px;box-shadow:none;padding:14px 16px;border:1px solid #456277;background:#132739}
.player-main .save-top{margin-bottom:9px;min-height:23px}
.player-main .save-top h2{margin:0;font-size:15px;color:#fff0ca}
.player-main #saveStatus{font-size:11px;color:#a9d8c9}
.player-main #saveStatus[data-kind="error"]{color:#ff9898}
.player-main .save-slot{background:#182f42;padding:8px 10px;border:1px solid #3d596c;gap:12px}
.player-main .save-slot-copy strong{font-size:12px}
.player-main .save-preview{width:64px;height:54px}
.player-main .save-quickbar{border:0;background:transparent;box-shadow:none;padding:10px 0 0;margin:0;gap:10px;justify-content:flex-start}
.player-main .save-quickbar .button{flex:1;min-width:0;min-height:43px;max-width:260px}
.player-main .save-quickbar .save-main-button{font-size:13px}
.player-main .save-quick-meta[hidden]{display:none!important}

/* Keep sound and advanced timing available without distracting from gameplay. */
.player-settings{width:min(100%,960px);border:1px solid #354e60;background:#102130;margin:3px auto 7px;color:#cbdbe0}
.player-settings summary{padding:12px 15px;font-size:12px;font-weight:850;cursor:pointer;user-select:none;list-style:none}
.player-settings summary::after{content:"+";float:right;color:#b6c4cc;font-size:16px;line-height:12px}
.player-settings[open] summary::after{content:"−"}
.player-settings summary::-webkit-details-marker{display:none}
.player-settings .audio-toolbar{margin:0;width:100%;border:0;border-top:1px solid #354e60;background:transparent;box-shadow:none;padding:12px;gap:10px}
.player-settings .audio-toolbar .button{min-height:41px}
.player-settings .speed-settings{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-top:1px solid #354e60;font-size:12px}
.player-settings .speed-settings[hidden]{display:none!important}
.player-settings .speed-settings select{max-width:220px;padding:9px 12px;color:#ecf5ef;background:#203a4b;border:1px solid #66869a;border-radius:2px;font:inherit}
.player-body .player-debug{max-width:960px}

@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  .controller-area:not([hidden]){display:none!important}
}
@media (max-width:760px){
  .player-main{padding:5px 8px 20px;gap:7px}
  .controller-row{grid-template-columns:1fr 1fr;grid-template-areas:"dir action" "center center";min-height:0;row-gap:0;column-gap:10px}
  .direction-zone{grid-area:dir;min-height:138px}
  .controller-row .actionkeys{grid-area:action;justify-self:end}
  .controller-row .centerkeys{grid-area:center;justify-self:center;align-self:center;margin:0 0 5px}
  .virtual-joystick{width:136px;height:136px}
  .stick-knob{width:61px;height:61px}
  .controller-area .touch-controls{padding:5px 8px}
  .player-main .save-panel{margin:4px auto 2px;width:100%;padding:12px}
  .player-main .save-quickbar{width:100%;padding:10px 0 0}
  .player-main .save-quickbar .button{min-height:44px;white-space:nowrap}
  .player-settings{width:100%}
}
@media (max-width:380px) and (orientation:portrait){
  .controller-area .touch-controls{padding:5px 2px}
  .direction-zone{min-height:125px}
  .controller-row .dpad{grid-template-columns:repeat(3,39px);grid-template-rows:repeat(3,39px)}
  .virtual-joystick{width:118px;height:118px}
  .stick-knob{width:55px;height:55px}
  .controller-row .actionkeys{gap:8px;padding-right:1px}
  .controller-row .touch-key.action{min-width:53px;min-height:53px}
  .player-topbar{grid-template-columns:minmax(85px,1fr) minmax(75px,1fr) auto;gap:5px}
  .player-topbar .back-link{font-size:10px}
}
@media (max-height:520px) and (orientation:landscape){
  /* The controller becomes a touch-through overlay, leaving the game wide. */
  .controller-area:not([hidden]){position:fixed;z-index:25;inset:44px 0 0;width:100%;height:calc(100dvh - 44px);margin:0;pointer-events:none}
  .controller-area .touch-controls:not([hidden]){position:static;inset:auto;width:100%;height:100%;padding:0;margin:0;display:block;pointer-events:none}
  .controller-area .controller-row{display:block;position:absolute;inset:0;min-height:0;pointer-events:none}
  .controller-area .direction-zone{position:absolute;top:50%;left:8px;transform:translateY(-50%);min-height:0;pointer-events:auto}
  .controller-area .actionkeys{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:auto}
  .controller-area .centerkeys{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);margin:0;pointer-events:auto}
  .controller-area .dpad{grid-template-columns:repeat(3,35px);grid-template-rows:repeat(3,35px)}
  .controller-area .touch-key{min-width:35px;min-height:35px}
  .controller-area .touch-key.action{min-width:50px;min-height:50px}
  .controller-area .virtual-joystick{width:112px;height:112px}
  .controller-area .stick-knob{width:50px;height:50px}
  .controller-area .controller-mode{position:absolute;left:8px;bottom:4px;padding:0;pointer-events:auto}
  .controller-area .controller-mode-button{min-height:26px;padding:3px 7px;font-size:10px}
  .player-main{padding:2px 4px 12px}
  .player-main .save-panel,.player-main .player-settings{position:relative;z-index:1}
}

/* Arcade start is kept outside the EmulatorJS mount to remain visible on black frames. */
.arcade-launch{width:min(100%,1240px);display:flex;justify-content:center;align-items:center;padding:10px 0 5px}
.arcade-launch[hidden]{display:none!important}
.arcade-launch .button{min-width:180px;min-height:46px;font-size:14px}
@media(max-width:590px){.arcade-launch{padding-inline:12px}.arcade-launch .button{width:100%;max-width:420px}}


/* v0.9.7: desktop-only keyboard cheat sheet immediately under the game. */
.desktop-key-guide[hidden]{display:none!important}
.desktop-key-guide{display:none}
@media (min-width:800px) and (hover:hover) and (pointer:fine){
  .desktop-key-guide:not([hidden]){
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:8px 18px;width:min(100%,1100px);margin:0 auto 4px;padding:8px 12px;
    color:#aab8c6;font-size:11px;line-height:1.6;
  }
  .desktop-key-guide-label{font-weight:800;color:#c9d9e3;white-space:nowrap}
  .desktop-key-guide-keys{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 15px}
  .desktop-key-guide-group{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .desktop-key-guide-keycaps{display:inline-flex;align-items:center;gap:3px}
  .desktop-key-guide kbd{
    display:inline-flex;align-items:center;justify-content:center;min-width:22px;
    min-height:23px;padding:1px 5px;border-radius:4px;border:1px solid #52697a;
    background:#162432;color:#e3eef3;font:700 10px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  .desktop-key-guide-meaning{color:#a8b6c1}
  .desktop-key-guide-note{color:#8198a9;white-space:nowrap}
}


/* v0.9.9 — Game taps should never trigger Safari/Chrome double-tap zoom.
   'manipulation' disables double-tap zoom but retains pinch zoom and native
   page panning; d-pad/stick/buttons already use touch-action:none locally.
   No JavaScript touchend suppression: rapid taps must still reach the game. */
@media (pointer:coarse) {
  .player-body, .player-body .playfield, .player-body .emulator-stage,
  .player-body .emulator-stage canvas,
  .player-body button, .player-body a {
    touch-action:manipulation;
  }
  .player-body .touch-controls, .player-body .virtual-joystick,
  .player-body .arcade-landscape-stick, .player-body .arcade-stick-ring,
  .player-body .touch-key, .player-body .arcade-landscape-key,
  .player-body .arcade-face-key {
    touch-action:none;
  }
}

/* v0.10.1: cover iOS WebKit's rotated/scrollable game document too.
   manipulation keeps page scrolling and pinch zoom, but requests no double tap
   zoom. Pointer-based buttons keep touch-action:none and additionally cancel
   native touchstart in player.js for older buggy WebKit versions. */
html.pixel-arcade-player, html.pixel-arcade-player body.player-body,
html.pixel-arcade-player .player-main, html.pixel-arcade-player .playfield,
html.pixel-arcade-player #game, html.pixel-arcade-player #game canvas{
  touch-action:manipulation;
}
html.pixel-arcade-player .touch-key, html.pixel-arcade-player .virtual-joystick,
html.pixel-arcade-player .arcade-landscape-key,
html.pixel-arcade-player .arcade-face-key,
html.pixel-arcade-player #arcadeStickRing{
  touch-action:none;
}

/* v0.10.0 Gamepad integration: a quiet status strip under the game.
   Controls remain in normal document flow, including CSS-rotated iPhone. */
.gamepad-panel{width:min(100%,960px);max-width:960px;margin:3px auto 4px;
  background:#101a25;border:1px solid #304657;border-radius:8px;
  color:#aec6d4;font-size:11px;flex:none;box-sizing:border-box}
.gamepad-head{display:flex;align-items:center;gap:9px;padding:7px 10px;min-height:34px}
.gamepad-head strong{color:#e1ebef;white-space:nowrap;font-size:11px}
.gamepad-led,.gamepad-player-dot{display:inline-block;flex:none;width:7px;height:7px;
  border-radius:50%;background:#556575}
.gamepad-led.connected,.gamepad-player-dot.connected{background:#6bd9b1}
.gamepad-player-dot.active{box-shadow:0 0 0 3px #6bd9b13b;background:#dcfdf5}
.gamepad-status{min-width:0;flex:1;color:#8da6b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gamepad-configure{min-height:28px;border:1px solid #455d6e;border-radius:5px;
  background:transparent;color:#b6d0df;padding:3px 10px;font:inherit;font-weight:750;white-space:nowrap;cursor:pointer}
.gamepad-configure:hover{border-color:#88b5c4}
.gamepad-details[hidden]{display:none!important}
.gamepad-details{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
  border-top:1px solid #273d4d;padding:12px 10px 10px;align-items:end}
.gamepad-details label{display:flex;align-items:center;gap:6px;min-width:0;color:#b9cfd9;font-weight:750}
.gamepad-details select{flex:1;min-width:0;max-width:100%;background:#172938;color:#e8f4f4;
  border:1px solid #536b7a;border-radius:5px;min-height:34px;padding:5px;font:inherit}
.gamepad-swap{min-height:34px;padding:5px 10px;background:#244254;color:#e7f3f5;
  border:1px solid #5b7e8a;border-radius:5px;cursor:pointer;font:inherit;font-weight:750}
.gamepad-swap:disabled{opacity:.45;cursor:default}
.gamepad-hint{grid-column:1/-1;font-size:10px;color:#7f9caa;margin:0;line-height:1.5}
@media(max-width:640px){
  .gamepad-panel{width:calc(100% - 8px);margin:3px auto 7px}
  .gamepad-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gamepad-swap{grid-column:1/-1}
  .gamepad-head{gap:6px;padding:5px 8px}
}