/* SmurfVillage 2026-09-15: shared usability rules, layered after the existing theme. */
:root{--sv-focus:#2c7bff;--sv-radius:18px;--sv-safe-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
html{scroll-padding-top:calc(100px + env(safe-area-inset-top));text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.48;cursor:not-allowed}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--sv-focus)!important;outline-offset:4px!important}
:where(input,select,textarea){max-width:100%;font-size:16px}
:where(.btn,.chip,.iconbtn,.vault-btn,.drawer-close,.menu-toggle){min-height:44px}
:where(.drawer,.panel,.dex-sheet){overscroll-behavior:contain}
:where(.drawer,.panel,.dex-sheet)[inert]{visibility:hidden!important}
:where(.grid,.hero-copy,.section-head>*,.session-copy,.cloud-vault-head>*){min-width:0}
.sv-skip{position:fixed;z-index:2147483647;left:16px;top:-100px;padding:12px 18px;background:var(--bg,#fbfbfd);color:var(--ink,#1d1d1f);border:2px solid var(--sv-focus);border-radius:12px;text-decoration:none}
.sv-skip:focus{top:16px}
.sv-boot{display:none!important}
.sv-app-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1180px;margin:44px auto 0;padding:24px max(20px,env(safe-area-inset-left)) calc(90px + env(safe-area-inset-bottom));border-top:1px solid var(--hairline,rgba(127,127,127,.2));font-size:13px;color:var(--ink-2,#64646b)}
.sv-app-bar p{max-width:62ch;line-height:1.55}
.sv-app-actions{display:flex;gap:8px;flex-wrap:wrap}
.sv-app-actions button,.sv-dialog button{background:var(--surface,#f0f0f5);color:var(--ink,#1d1d1f);border:1px solid var(--hairline,rgba(127,127,127,.25));border-radius:12px;min-height:44px;padding:10px 16px;cursor:pointer}
.sv-dialog{position:fixed;inset:0;margin:auto;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--hairline,rgba(127,127,127,.3));border-radius:24px;background:var(--bg,#fbfbfd);color:var(--ink,#1d1d1f);padding:28px;box-shadow:0 24px 90px #0005}
.sv-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}
.sv-dialog h2{font-size:24px;line-height:1.2;margin:0 0 14px}.sv-dialog p{font-size:15px;line-height:1.65;margin:0 0 20px}
.sv-offline-note{position:fixed;z-index:350;bottom:12px;left:50%;transform:translateX(-50%);background:var(--bg,#fbfbfd);color:var(--ink,#1d1d1f);border:1px solid var(--hairline,#aaa);padding:10px 16px;border-radius:12px;max-width:calc(100vw - 24px);font-size:13px;box-shadow:0 4px 16px #0002}
/* Keep the library a browsing tool, not a second landing page. */
.sv-library-page .hero{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:32px;min-height:0;padding-block:28px;margin-bottom:24px}
.sv-library-page .hero h1{font-size:clamp(30px,4.5vw,54px);line-height:1.08;max-width:17ch}
.sv-library-page .hero .lede{font-size:16px;max-width:56ch;line-height:1.6}
.sv-library-page .hero-visual{min-height:0;height:220px;max-height:220px;border-radius:24px;overflow:hidden}
.sv-library-page .hero-visual img{width:100%;height:100%;object-fit:cover}
.sv-library-page .hero .eyebrow,.sv-library-page .statbar{display:none}
.sv-library-page #playable{scroll-margin-top:104px}
.sv-library-page #playable .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px;align-items:stretch}
.sv-library-page #playable .cart{min-width:0;padding:14px;border-radius:18px;transform:none!important;transition:box-shadow .18s ease,border-color .18s ease;background:var(--surface,#fff)}
.sv-library-page #playable .cart:hover{box-shadow:0 8px 28px #0001}
.sv-library-page #playable .cart img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;margin-bottom:10px}
.sv-library-page #playable .cart strong{font-size:16px;line-height:1.35;min-height:2.7em;display:block;white-space:normal}
.sv-library-page #playable .cart small{font-size:12px;line-height:1.5}
.sv-library-page #playable .cart .play{position:static;display:flex;justify-content:flex-start;gap:6px;margin-top:12px;padding:0;min-height:28px;transform:none;opacity:1}
.library-tools{display:flex;gap:14px;align-items:end;margin:20px 0 16px}.library-search{flex:1}.library-sort{width:190px}
.library-tools label{display:grid;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2,#64646b)}
.library-tools input,.library-tools select{width:100%;min-height:48px;border:1px solid var(--hairline,rgba(127,127,127,.28));border-radius:12px;padding:10px 14px;color:var(--ink,#1d1d1f);background:var(--surface,#fff)}
.library-filters{display:flex;gap:8px;overflow-x:auto;flex-wrap:wrap;padding:4px 4px 10px!important;scrollbar-width:thin}
.library-filters .chip{flex-shrink:0;white-space:nowrap;font-size:13px;padding:10px 15px;cursor:pointer}
.library-filters .chip[aria-pressed=true]{color:#fff;background:#185fd4;border-color:#185fd4}
.library-count{margin:6px 0 18px;color:var(--ink-2,#64646b);font-size:13px;min-height:20px}
.library-empty{padding:36px 24px;text-align:center;border:1px dashed var(--hairline,#aaa);border-radius:18px}.library-empty p{margin:10px 0 20px}
/* Display the canvas and touch controls in separate, stable regions. */
.sv-player .chrome{opacity:1!important;transform:none!important;pointer-events:auto!important}
.sv-player .chrome-title{max-width:none}
.sv-player .chrome-back{padding-inline:10px}.sv-player .chrome-tools{gap:2px}
.sv-player #ejs-container{top:calc(var(--chrome-h) + env(safe-area-inset-top) + 34px)!important;bottom:env(safe-area-inset-bottom)!important;overflow:hidden!important;--gamepad-h:0px}
.sv-player .play-hud{top:calc(var(--chrome-h) + env(safe-area-inset-top));height:34px;width:100%;max-width:100%;justify-content:center;border:0;border-bottom:1px solid var(--hairline);border-radius:0;padding:5px 12px;opacity:1;backdrop-filter:none}
.sv-player .play-hud #hud-game{display:none}.sv-player #hud-detail{overflow:hidden;text-overflow:ellipsis}
.sv-player .tap-audio{bottom:auto;top:calc(var(--chrome-h) + env(safe-area-inset-top) + 44px);max-width:calc(100vw - 32px);font-size:12px}
.sv-player .panel{z-index:310;padding-top:calc(12px + env(safe-area-inset-top));width:min(400px,100vw);max-height:100dvh}.sv-player .scrim{z-index:300}
.sv-panel-heading{display:flex;align-items:center;justify-content:space-between;padding:0 20px 12px}.sv-panel-heading h2{font-size:20px}.sv-panel-heading button{width:44px;height:44px;border:1px solid var(--hairline);border-radius:12px;font-size:24px}
.sv-player #launch-screen{overflow:auto;max-height:100dvh}.sv-player .launch-card{padding:24px}.sv-player .launch-cover{max-height:140px}
.sv-player .ejs_virtualGamepad_left,.sv-player .ejs_virtualGamepad_right{bottom:18px!important;touch-action:none}
.sv-player .ejs_virtualGamepad_button{touch-action:none;user-select:none;-webkit-user-select:none}
.sv-player .ejs_game{background:#000}
.sv-player #sv-touch-controls{display:none}
.sv-player.sv-own-touch .ejs_virtualGamepad_parent{display:none!important}
.sv-player.sv-own-touch #ejs-container{bottom:calc(194px + env(safe-area-inset-bottom))!important}
.sv-player.sv-own-touch #sv-touch-controls{position:fixed;bottom:0;left:0;right:0;height:calc(194px + env(safe-area-inset-bottom));padding:12px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);border-top:1px solid var(--hairline);z-index:100;touch-action:none;user-select:none;-webkit-user-select:none}
.sv-dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px}.sv-pad-button{touch-action:none;border:1px solid var(--hairline);border-radius:13px;background:var(--surface);color:var(--ink);font-size:18px;font-weight:700;min-width:44px;min-height:44px;box-shadow:0 3px 0 var(--hairline);cursor:pointer}
.sv-pad-button.is-held{background:#185fd4;color:#fff;box-shadow:none;transform:translateY(2px)}
.sv-dpad [data-input="4"]{grid-area:1/2}.sv-dpad [data-input="6"]{grid-area:2/1}.sv-dpad [data-input="7"]{grid-area:2/3}.sv-dpad [data-input="5"]{grid-area:3/2}
.sv-action-pad{display:grid;grid-template-columns:repeat(2,56px);gap:12px;align-items:center}.sv-action-pad button{height:56px;border-radius:50%;font-size:22px}.sv-action-pad [data-input="8"]{transform:translateY(-10px)}.sv-action-pad .is-held[data-input="8"]{transform:translateY(-8px)}
.sv-system-pad{display:flex;flex-direction:column;gap:10px}.sv-system-pad button{font-size:10px;font-weight:700;letter-spacing:.03em;min-width:48px;padding:6px}
@media(max-width:700px){
 .sv-library-page .hero{grid-template-columns:1fr;padding-block:20px;gap:16px}.sv-library-page .hero-visual{display:none}.sv-library-page .hero h1{max-width:20ch}.sv-library-page .hero-actions .btn:not(.btn-primary){display:none}
 .sv-library-page #playable .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sv-library-page #playable .cart{padding:10px}.sv-library-page #playable .section-head{display:block}.sv-library-page #playable .section-head p{margin-top:8px}
 .library-tools{flex-wrap:wrap}.library-search{flex-basis:100%}.library-sort{width:100%}.library-sort select{min-height:44px}.library-filters{flex-wrap:nowrap;margin-inline:-4px}.library-filters .chip{font-size:12px;padding:10px 12px}
 .sv-player #btn-fs{display:inline-flex}.sv-player #btn-reset{display:none}.sv-player .title-text{font-size:13px}.sv-player .chrome{gap:4px}.sv-player .chrome-tools{gap:0}.sv-player .iconbtn{width:42px;min-width:42px}
 .sv-app-bar{margin-top:28px}
}
@media(max-width:360px){.sv-system-pad{gap:8px}.sv-dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}.sv-pad-button{min-width:40px;min-height:40px}.sv-action-pad{grid-template-columns:repeat(2,48px);gap:8px}.sv-action-pad button{height:48px}.sv-player.sv-own-touch #sv-touch-controls{padding-inline:8px;gap:6px}.sv-player .chrome .iconbtn{width:40px;min-width:40px}}
@media(orientation:landscape) and (max-height:540px){
 .sv-player{--chrome-h:48px}.sv-player .play-hud{height:26px;font-size:11px}.sv-player #ejs-container{top:calc(74px + env(safe-area-inset-top))!important}
 .sv-player.sv-own-touch #ejs-container{left:158px!important;right:142px!important;bottom:env(safe-area-inset-bottom)!important}
 .sv-player.sv-own-touch #sv-touch-controls{height:calc(100dvh - 74px);top:74px;padding:10px 12px;align-items:center;background:transparent;border:0;pointer-events:none}
 .sv-player.sv-own-touch #sv-touch-controls button{pointer-events:auto}.sv-system-pad{position:absolute;left:22px;bottom:8px;flex-direction:row;gap:10px}.sv-system-pad button{min-height:36px}.sv-action-pad{margin-left:auto}.sv-dpad{transform:translateY(-12px)}
 .sv-player .tap-audio{font-size:11px;min-height:36px;top:80px}.sv-player .launch-inner{grid-template-columns:1fr 1fr}.sv-player #launch-screen{padding:84px 14px 14px}.sv-player .launch-cover{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(hover:none){.cart,.game-card{transform:none!important}.sv-mag-glow,.sv-vignette{display:none!important}}
@supports not (backdrop-filter:blur(1px)){.chrome,.drawer,.panel{background:var(--bg,#fbfbfd)!important}}

/* The legacy shared chrome uses !important z-index:1000; dialogs must clear it. */
.sv-player .panel{z-index:1200!important}.sv-player .scrim{z-index:1190!important}

/* One toolbar during play; native emulator tools remain available from settings. */
.sv-player .ejs_menu_bar{display:none!important}
.sv-advanced{display:grid;gap:8px;margin-top:22px}
.sv-advanced h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.sv-player .sv-advanced .iconbtn,.sv-native-tool{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;height:auto;padding:12px;border:1px solid var(--hairline);border-radius:12px;font-size:13px;color:var(--ink);background:var(--surface);text-align:left}
.sv-player .sv-advanced .iconbtn svg{flex:none}.sv-advanced .rt-rec-dot{position:static!important}

/* Grid children must be allowed to shrink on 320px browsers. */
.content-grid > div,.content-grid .panel-head > div{min-width:0}
@media(max-width:900px){.content-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:400px){.content-grid .panel-head{flex-wrap:wrap;gap:10px}.content-grid .panel{padding:16px}.content-grid .scope-control{max-width:100%;display:flex;flex-wrap:wrap;border-radius:14px}}
.sv-player[data-system="GBA"] .sv-system-pad{display:grid;grid-template-columns:repeat(2,minmax(42px,1fr));gap:8px}
.sv-player[data-system="GBA"] .sv-system-pad button{min-width:42px;min-height:44px;padding:4px;font-size:9px}
@media(max-width:360px){.sv-player[data-system="GBA"] .sv-system-pad{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(4,42px)}.sv-player[data-system="GBA"] .sv-dpad,.sv-player[data-system="GBA"] .sv-action-pad{margin-bottom:32px}}

@media(orientation:portrait),(min-height:541px){
 .sv-player.sv-own-touch #sv-touch-controls{align-items:flex-start;padding-top:8px}
 .sv-player.sv-own-touch .sv-system-pad,.sv-player.sv-own-touch[data-system="GBA"] .sv-system-pad{position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:row;gap:8px;transform:translateX(-50%);margin:0}
 .sv-player.sv-own-touch .sv-system-pad button{min-height:40px;min-width:48px}
 .sv-player.sv-own-touch .sv-action-pad{margin:40px 0 0}
 .sv-player.sv-own-touch .sv-dpad{margin:0}
}

/* The display is a correctly proportioned screen, not a portrait canvas stretched to fill. */
.sv-player{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sv-player .title-text,.sv-player .panel-section h3,.sv-player .launch-title,.sv-player .play-hud{font-family:inherit}
.sv-player .title-text{font-weight:650;letter-spacing:-.015em}
#sv-game-stage{position:fixed;top:calc(var(--chrome-h) + env(safe-area-inset-top) + 34px);left:0;right:0;bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#15191f;overflow:hidden}
.sv-player.sv-own-touch #sv-game-stage{bottom:calc(194px + env(safe-area-inset-bottom))}
.sv-player #sv-game-stage #ejs-container{position:relative!important;inset:auto!important;flex:none!important;width:var(--sv-screen-w,320px)!important;height:var(--sv-screen-h,288px)!important;max-width:100%!important;max-height:100%!important;box-shadow:0 0 0 1px #ffffff12,0 14px 40px #0006;overflow:hidden!important;background:#000}
#sv-game-stage .ejs_canvas{image-rendering:pixelated!important;image-rendering:crisp-edges!important;image-rendering:pixelated!important;filter:none!important}
#sv-display-caption{font:11px/1.3 ui-sans-serif,system-ui,sans-serif;color:#a6b0bc;letter-spacing:.04em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
#sv-game-stage[data-display="lcd"] #ejs-container::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;background-image:linear-gradient(#0000 75%,#0002 75%),linear-gradient(90deg,#0000 75%,#0002 75%);background-size:3px 3px;opacity:.6}
.sv-player .sv-advanced #rc-orb{position:static!important;width:100%!important;height:auto!important;min-height:44px!important;transform:none!important;box-shadow:none!important;background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:12px!important;color:var(--ink)!important;display:flex!important;align-items:center;gap:10px;padding:12px!important}
.sv-player .sv-advanced #rc-orb svg{width:18px;height:18px}.sv-player .sv-advanced #rc-orb .rc-orb-label{position:static!important;opacity:1!important;transform:none!important;background:none!important;color:inherit!important;padding:0!important;font-size:13px!important}
.sv-player #rc-panel{z-index:1250!important;max-height:calc(100dvh - 90px)!important;bottom:12px!important}
@media(orientation:landscape) and (max-height:540px){
 .sv-player #sv-game-stage{top:calc(74px + env(safe-area-inset-top));gap:6px}
 .sv-player.sv-own-touch #sv-game-stage{left:158px;right:142px;bottom:env(safe-area-inset-bottom)}
 #sv-display-caption{font-size:9px;letter-spacing:0}
}