@font-face {
  font-family: "D2Coding";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://naver.github.io/d2-coding-font/fonts/D2Coding-Regular.woff2") format("woff2");
}

:root {
  color-scheme: light;
  font-family: "SUIT Variable", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: #eaf4f6;
  color: #20313c;
  --page: #eaf4f6;
  --surface: #ffffff;
  --surface-soft: #f4f9fa;
  --surface-raised: #ffffff;
  --line: #c8dbe0;
  --line-strong: #9fbfc7;
  --text: #20313c;
  --muted: #617883;
  --accent: #168a92;
  --accent-soft: #dff3f3;
  --focus: #2b9fb5;
  --shadow: 0 .35rem 1.1rem rgba(45, 83, 92, .1);
}

html.ui-language-pending body {
  visibility: hidden;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
code, pre, .platform-mark span, .pointer-debug, .screen-layout-summary {
  font-family: "D2Coding", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ui-fade-rise {
  from { opacity: 0; transform: translateY(.55rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-dialog-in {
  from { opacity: 0; transform: translateY(.65rem) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-slide-down {
  from { opacity: 0; transform: translateY(-.35rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes controller-dialog-in {
  from { opacity: 0; transform: translateX(-50%) translateY(.65rem) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f5fbfc 0, var(--page) 22rem); color: var(--text); }

.site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .55rem 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.68); }
.site-nav a { padding: .45rem .7rem; border-radius: .4rem; color: var(--muted); font-size: .78rem; font-weight: 750; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding: 1.3rem clamp(1rem,4vw,2.5rem); border-top: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--muted); font-size: .76rem; }
.site-footer > div { display: grid; gap: .25rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .45rem 1rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  box-shadow: 0 .2rem .8rem rgba(45,83,92,.06);
  animation: ui-fade-in .28s ease-out both;
}

.app-brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.platform-mark {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  padding: .3rem;
  border: 1px solid #a9d2d5;
  border-radius: .85rem;
  background: linear-gradient(145deg,#fff,#e7f6f6);
  box-shadow: inset 0 1px 0 #fff, 0 .3rem .8rem rgba(22,138,146,.16);
}
.platform-mark img { display: block; width: 100%; height: 100%; }
.platform-mark span {
  position: absolute;
  right: -.35rem;
  bottom: -.22rem;
  padding: .13rem .3rem;
  border: 2px solid #f7fcfc;
  border-radius: .28rem;
  background: #168a92;
  color: #fff;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.brand-copy { min-width: 0; }
h1 {
  margin: 0;
  color: #203d48;
  font-family: "SUIT Variable", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.52rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}
h1 span {
  display: inline-block;
  margin-right: .22rem;
  padding: .16rem .32rem .12rem;
  border-radius: .25rem;
  background: #dff3f3;
  color: #14777f;
  font-family: "D2Coding", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62em;
  font-weight: 900;
  letter-spacing: .08em;
  vertical-align: .12em;
}
h2 { margin: 0; font-size: 1rem; }
header p { margin: .38rem 0 0; color: var(--muted); font-size: .76rem; letter-spacing: -.015em; }
.language-setting { display: grid; gap: .25rem; flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.language-setting select { min-height: 2.25rem; padding: .35rem 2rem .35rem .65rem; }

button, select, .file-button {
  min-height: 2.65rem;
  border: 1px solid var(--line-strong);
  border-radius: .45rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, #ffffff, #edf6f7);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(45,83,92,.1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}

button:not(:disabled):hover, .file-button:hover { border-color: var(--accent); background: linear-gradient(180deg,#fff,#e4f4f4); color: #0e6970; }
button:not(:disabled):active, .file-button:active,
button[data-active="true"], button[aria-pressed="true"] {
  transform: translateY(2px) scale(.985);
  border-color: var(--accent);
  background: #d8eeee;
  box-shadow: inset 0 3px 7px rgba(27,93,99,.2), 0 1px 2px rgba(45,83,92,.08);
}
button:focus-visible, select:focus-visible, .file-button:focus-within { outline: 3px solid rgba(43,159,181,.3); outline-offset: 2px; border-color: var(--focus); }

#run, .program-field .web-select-button { position: relative; overflow: hidden; isolation: isolate; }
#run { color: #176f63; font-weight: 850; }
#run::after, .program-field .web-select-button::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.16) 45%, transparent 68%);
  transform: translateX(-140%);
  pointer-events: none;
}
#run[data-action-state="prepare"], .program-field .web-select-button[data-action-state="prepare"] {
  border-color: rgba(112,224,161,.78);
  color: #176f63;
  animation: prepare-attention 1.8s ease-in-out infinite;
}
#run[data-action-state="prepare"]::after, .program-field .web-select-button[data-action-state="prepare"]::after { animation: glass-sweep 2.4s ease-in-out infinite; }
#run[data-action-state="start"] {
  border-color: #70e0a1;
  background: linear-gradient(180deg,#f2fff8,#d8f4e5);
  color: #0c604d;
  font-weight: 900;
  animation: start-heartbeat 1.35s ease-in-out infinite;
}
#run[data-action-state="start"]::after { animation: glass-sweep 1.8s ease-in-out infinite; }

@keyframes glass-sweep { 0%, 25% { transform: translateX(-140%); } 70%, 100% { transform: translateX(140%); } }
@keyframes prepare-attention { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 rgba(112,224,161,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 .22rem rgba(112,224,161,.12); } }
@keyframes start-heartbeat { 0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 .25rem rgba(112,224,161,.2); } 12% { transform: scale(1.035); } 24% { transform: scale(1); } 36% { transform: scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 .8rem rgba(112,224,161,.42); } 52% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #run, #run::after, .program-field .web-select-button, .program-field .web-select-button::after { animation: none !important; } }

button, .file-button { white-space: nowrap; }

button:disabled { opacity: .46; cursor: default; filter: saturate(.5); }
.ui-icon { display: inline-block; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; vertical-align: -.2rem; pointer-events: none; }
.sync-now.syncing > .ui-icon { animation: sync-spin .8s linear infinite; }
.sync-now.inspecting > .ui-icon { animation: inspect-pulse 1s ease-in-out infinite alternate; }
.sync-now.uploading > .ui-icon { animation: sync-upload .75s ease-in-out infinite; }
.sync-now.downloading > .ui-icon { animation: sync-download .75s ease-in-out infinite; }
.game-card button.sync-now.inspecting { border-color: #8fcfff; box-shadow: 0 0 0 1px rgba(143,207,255,.4); color: #8fcfff; }
.game-card button.sync-now.uploading { border-color: #f0bd63; color: #ffd98f; }
.game-card button.sync-now.downloading { border-color: #70bfff; color: #a9dcff; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@keyframes inspect-pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes sync-upload { 0% { transform: translateY(.22rem); opacity: .4; } 55% { opacity: 1; } 100% { transform: translateY(-.22rem); opacity: .4; } }
@keyframes sync-download { 0% { transform: translateY(-.22rem); opacity: .4; } 55% { opacity: 1; } 100% { transform: translateY(.22rem); opacity: .4; } }
button > .ui-icon, .file-button > .ui-icon { margin-right: .4rem; }
.web-select-source { display: none !important; }
.web-select-button { min-width: 12rem; text-align: left; }
.web-select-button::before { content: "▾"; float: right; margin-left: .8rem; color: var(--accent); }
.web-select-panel { position: fixed; z-index: 20000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(20,45,52,.58); animation: ui-fade-in .18s ease-out both; }
.web-select-card { width: min(34rem, 100%); max-height: 82vh; overflow: auto; padding: .8rem; border: 1px solid var(--line-strong); border-radius: .7rem; background: var(--surface); box-shadow: 0 1.2rem 3rem rgba(20,52,60,.22); animation: ui-dialog-in .24s cubic-bezier(.2,.75,.25,1) both; }
.web-select-card header { position: sticky; top: 0; padding: .3rem 0 .7rem; background: var(--surface); }
.web-select-options { display: grid; gap: .45rem; }
.web-select-options button { width: 100%; min-height: 3.2rem; text-align: left; }
.web-select-options button[aria-pressed="true"] { border-color: #70e0a1; color: #70e0a1; }
.delete-confirm-panel { background: rgba(82,35,35,.46); }
.delete-confirm-card { display: grid; gap: .9rem; border-color: #e6a3a3; background: linear-gradient(145deg,#fff,#fff3f1); box-shadow: 0 1.2rem 3rem rgba(112,44,44,.22); }
.delete-confirm-card > strong { color: #8e2f38; font-size: 1.05rem; }
.delete-warning { margin: 0; padding: .75rem; border: 1px solid #efb0a8; border-radius: .45rem; color: #842e35; background: #fff0ec; font-weight: 750; line-height: 1.5; }
.delete-confirm-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.delete-confirm-actions .confirm-delete { border-color: #c93e49; color: #fff; background: linear-gradient(180deg,#d95560,#b9323e); box-shadow: 0 .25rem .65rem rgba(169,47,58,.25); }
.delete-confirm-actions .confirm-delete .ui-icon { filter: brightness(0) invert(1); }
.rename-game-panel { background: rgba(45,35,76,.48); }
.rename-game-card { display: grid; gap: .8rem; width: min(92vw, 34rem); border-color: #b8a4df; background: linear-gradient(145deg,#fff,#f5f1ff); box-shadow: 0 1.2rem 3rem rgba(65,42,108,.22); }
.rename-game-card > strong { color: #59428a; font-size: 1.05rem; }
.rename-game-card input { width: 100%; border-color: #b8a4df; background: #fff; color: #33264f; }
.rename-game-info { display: grid; gap: .3rem; padding: .65rem; border: 1px solid #d8cfed; border-radius: .45rem; background: #faf8ff; }
.rename-game-info small { color: #75698c; }
.rename-game-info code { overflow-wrap: anywhere; color: #60469a; user-select: all; }
.rename-game-card p { margin: 0; color: #75698c; font-size: .75rem; line-height: 1.5; }
.rename-game-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.rename-game-actions .confirm-rename { border-color: #8063bd; background: linear-gradient(180deg,#9275cc,#7355ae); color: #fff; box-shadow: 0 .25rem .65rem rgba(91,62,148,.24); }

main { width: min(1200px, 100%); margin: auto; padding: 1rem; }
main > section { animation: ui-fade-rise .34s cubic-bezier(.2,.75,.25,1) both; }
main > section:nth-of-type(2) { animation-delay: .045s; }
main > section:nth-of-type(3) { animation-delay: .09s; }
main > section:nth-of-type(4) { animation-delay: .135s; }
.library { margin-bottom: 1rem; padding: 1rem; border: 1px solid #d9d2bd; border-top: 3px solid #d5ad55; border-radius: .7rem; background: linear-gradient(145deg,#fffdf7,#fbf7ec); box-shadow: var(--shadow); }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.library-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .76rem; }
#drive-status { color: var(--muted); font-size: .72rem; }
.drive-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; border: 1px solid #bddbd2; border-top: 3px solid #4db79c; border-radius: .7rem; background: linear-gradient(145deg,#f7fffc,#edf9f5); box-shadow: var(--shadow); }
.drive-panel[data-connected="true"] { border-color: #78c9ae; background: linear-gradient(135deg,#edfbf5,#fff 65%); }
.drive-panel[data-connected="true"] #drive-status { color: #167257; font-weight: 700; }
.drive-copy { display: grid; gap: .3rem; min-width: 0; max-width: 44rem; }
.drive-copy h2, .drive-copy p { margin: 0; }
.drive-copy p { color: var(--muted); font-size: .76rem; }
.drive-help { color: var(--text); font-size: .76rem; line-height: 1.6; }
.drive-help summary { width: fit-content; max-width: 100%; padding: .35rem 0; cursor: pointer; font-weight: 700; }
.drive-help summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: .2rem; }
.drive-help-content { display: grid; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
.drive-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.drive-connect { display: inline-flex; align-items: center; gap: .48rem; }
.drive-icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.drive-disconnect { min-height: 1.8rem; padding: .25rem .45rem; border-color: var(--line); background: #fff; color: var(--muted); font-size: .65rem; }
.install-menu { margin-top: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface-soft); animation: ui-slide-down .22s ease-out both; }
.install-menu[hidden] { display: none; }
.install-menu > strong { font-size: .85rem; }
.install-menu > p { margin: .3rem 0 .7rem; color: var(--muted); font-size: .75rem; }
.import-buttons { display: flex; gap: .55rem; flex-wrap: wrap; }
.game-library { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: .8rem; }
.library-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.game-card { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .65rem; overflow: hidden; padding: .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface-soft); cursor: pointer; transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; animation: ui-fade-rise .25s ease-out both; }
.game-card:nth-child(2) { animation-delay: .025s; }
.game-card:nth-child(3) { animation-delay: .05s; }
.game-card:nth-child(4) { animation-delay: .075s; }
.game-card:nth-child(n+5) { animation-delay: .1s; }
.game-card:hover { border-color: var(--line-strong); background: #fff; box-shadow: 0 .25rem .75rem rgba(45,83,92,.09); }
.game-card:active { transform: translateY(1px) scale(.995); }
.game-card[data-selected="true"] { z-index: 3; padding-top: 2.15rem; border-color: #319b88; background: linear-gradient(135deg,#f1fffb,#e7f8f3); box-shadow: inset 0 0 0 1px #4ab7a1, 0 .45rem 1.1rem rgba(49,155,136,.18); animation: selected-game-glow 2.2s ease-in-out infinite; }
.game-card[data-selected="true"]::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: .8rem;
  content: var(--ui-selected);
  padding: .35rem .7rem .42rem;
  border-radius: 0 0 .4rem .4rem;
  background: linear-gradient(135deg,#168a92,#36aa8e);
  box-shadow: 0 .2rem .55rem rgba(22,99,105,.22);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.game-card[data-selected="true"]::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(110deg,transparent 18%,rgba(160,255,203,.05) 36%,rgba(190,255,219,.3) 48%,rgba(160,255,203,.06) 60%,transparent 78%); transform: translateX(-130%); animation: selected-game-shine 2.8s ease-in-out infinite; }
@keyframes selected-game-glow { 50% { box-shadow: inset 0 0 0 1px #54cbb0,0 .45rem 1.35rem rgba(49,155,136,.3); } }
@keyframes selected-game-shine { 45%,100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .game-card[data-selected="true"], .game-card[data-selected="true"]::after { animation: none; } }
.game-card { will-change: transform; }
.game-card:focus-visible { outline: 2px solid #70e0a1; outline-offset: 2px; }
.game-card[data-locked="true"] { opacity: .48; pointer-events: none; }
.game-card strong, .game-card small { display: block; }
.game-title-row { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.game-title-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-title-row input { min-width: 8rem; flex: 1 1 14rem; }
.game-title-row button { min-height: 2rem; padding: .3rem .5rem; font-size: .68rem; }
.selected-game-check { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.launch-debug { margin: 0 0 1rem; padding: .75rem; border: 1px solid #29434b; border-radius: .55rem; background: #15262c; color: #eaf7f7; animation: ui-slide-down .22s ease-out both; }
.launch-debug-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.launch-debug strong { color: #9ca8b8; font-size: .72rem; }
.launch-debug button { min-height: 1.9rem; padding: .3rem .65rem; font-size: .68rem; }
.launch-debug pre { min-height: 5rem; max-height: 14rem; margin: .45rem 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #70e0a1; font-size: .68rem; line-height: 1.45; }
.game-card small { margin-top: .25rem; color: #8996a8; }
.game-card .sync-conflict { color: #ff7474; font-weight: 700; }

.sync-source-panel { background: rgba(22,55,70,.5); }
.sync-source-card { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; width: min(92vw, 40rem); height: min(88dvh, 760px); max-height: calc(100dvh - 2rem); overflow: hidden; border-color: #9bc9dc; background: linear-gradient(145deg,#fbfeff,#edf8fc); box-shadow: 0 1.2rem 3rem rgba(23,85,108,.22); }
.sync-source-card > strong { color: #175e77; font-size: 1.05rem; }
.sync-source-card > p { margin-block: .55rem .7rem; }
.sync-browser-identity { padding: .55rem .7rem; border: 1px solid #a9d9c6; border-radius: .45rem; background: #effbf6; color: #23775e; font-family: "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 800; }
.sync-resource-list { min-height: 0; display: grid; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 1rem 4px; scrollbar-gutter: stable; }
.sync-resource-row { display: grid; gap: 7px; margin: 0; padding: 10px; border: 1px solid #c9dce4; border-radius: 10px; background: rgba(255,255,255,.72); }
.sync-resource-row legend { padding: 0 6px; color: #285b6e; font-weight: 800; }
.sync-resource-option { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: .48rem .58rem; border: 1px solid transparent; border-radius: .55rem; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease; }
.sync-resource-option:active { transform: translateY(1px); }
.sync-resource-option input { accent-color: currentColor; }
.sync-resource-option span { color: #405463; font-size: .74rem; line-height: 1.4; }
.sync-resource-local { border-color: #edc37a; background: #fff8e9; color: #9b6414; }
.sync-resource-cloud { border-color: #9bcbea; background: #eef8ff; color: #226f9e; }
.sync-resource-local:has(input:checked) { border-color: #d89125; background: #ffefca; box-shadow: 0 0 0 2px rgba(216,145,37,.16); }
.sync-resource-cloud:has(input:checked) { border-color: #3e9bd1; background: #dff2ff; box-shadow: 0 0 0 2px rgba(62,155,209,.16); }
.sync-resource-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; opacity: .9; }
.sync-resource-matched { display: flex; align-items: center; min-height: 2.25rem; padding: .35rem .55rem; border: 1px solid #a9d9c6; border-radius: .45rem; background: #effbf6; color: #23775e; font-weight: 800; }
.sync-resource-option[data-available="false"] { opacity: .55; }
.sync-source-actions { position: relative; z-index: 1; flex-shrink: 0; margin: 0 -.8rem -.8rem; padding: .8rem; border-top: 1px solid #c5dce5; background: #f4fbfe; box-shadow: 0 -.6rem 1rem rgba(44,104,126,.1); }
.sync-source-actions .confirm-transfer { border-color: #328db1; background: linear-gradient(180deg,#46a7c8,#2e87aa); color: #fff; box-shadow: 0 .25rem .65rem rgba(34,119,151,.24); }
.game-card button.sync-failed { border-color: #ff5252; box-shadow: 0 0 0 1px #ff5252; color: #ff8a8a; }
.game-card button.sync-pending { border-color: #f3c969; box-shadow: 0 0 0 1px #f3c969; color: #ffe29a; }
.game-card button.sync-complete { border-color: #70e0a1; box-shadow: 0 0 0 1px rgba(112,224,161,.45); color: #70e0a1; }
.game-card button.sync-now[hidden] { display: none; }
.game-card .remove-game { min-height: 2rem; padding: .35rem .55rem; color: #ffabab; }
.sync-source-actions { display: grid; gap: .5rem; margin-top: .8rem; }
@media (max-width: 560px) {
  .game-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card > div:first-child { grid-column: 1 / -1; }
  .game-card > button { width: 100%; padding-inline: .35rem; }
  .progress-card { grid-template-columns: 1fr; }
}
.empty-library { margin: 0; color: #8996a8; font-size: .8rem; }
.library-loading { display: grid; gap: .5rem; padding: .8rem; color: #9fb4cf; font-size: .78rem; }
.library-loading progress { width: 100%; height: .7rem; accent-color: #70e0a1; }
.graphics-settings { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; border: 1px solid #bdd8e2; border-top: 3px solid #4eabc5; border-radius: .7rem; background: linear-gradient(145deg,#f8fdff,#edf7fa); box-shadow: var(--shadow); }
.graphics-settings > div { flex: 1 1 18rem; }
.graphics-settings h2 { margin: 0; }
.graphics-settings p { margin: .35rem 0 0; color: var(--muted); font-size: .76rem; }
.graphics-settings label { display: grid; gap: .3rem; color: var(--muted); font-size: .75rem; }
.play-panel { margin-bottom: 1rem; padding: 1rem; border: 1px solid #d0c9e5; border-top: 3px solid #8c79c7; border-radius: .7rem; background: linear-gradient(145deg,#fcfaff,#f3f0fb); box-shadow: var(--shadow); }
.play-heading { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; margin-bottom: .75rem; }
.play-heading h2 { margin: 0; }
#selected-game-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(70%, 34rem);
  padding: .45rem .72rem;
  overflow: hidden;
  border: 1px solid #c8d6e8;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #71808d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  font-family: "Avenir Next", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  font-size: .83rem;
  font-weight: 750;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#selected-game-name::before { width: .48rem; height: .48rem; flex: 0 0 auto; margin-right: .5rem; content: ""; border-radius: 50%; background: #a7b2bc; }
#selected-game-name[data-selected="true"] {
  border-color: #68bbaa;
  background: linear-gradient(135deg,#edfff9,#dcf5ed);
  color: #125f53;
  box-shadow: inset 0 1px 0 #fff, 0 .25rem .7rem rgba(38,143,119,.16);
  font-size: .94rem;
  font-weight: 900;
}
#selected-game-name[data-selected="true"]::before { background: #20a77f; box-shadow: 0 0 0 .22rem rgba(32,167,127,.14), 0 0 .55rem rgba(32,167,127,.48); }
@media (max-width: 560px) {
  .play-heading { gap: .5rem; }
  #selected-game-name { max-width: calc(100% - 4.5rem); }
}
.toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: .65rem; }
.toolbar label { display: grid; gap: .3rem; color: var(--muted); font-size: .75rem; }
.file-button { display: inline-flex !important; align-items: center; color: var(--text) !important; }
.file-button input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
#status { flex: 1 1 100%; min-height: 1.2rem; color: #52727d; font-size: .8rem; }
#status[data-error="true"] { color: #ff9b9b; }
.cache-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .65rem; flex: 1 1 100%; }
.cache-progress[hidden] { display: none; }
.cache-progress progress { width: 100%; height: .75rem; accent-color: #70e0a1; }
.cache-progress span { min-width: 9rem; color: #9fb4cf; font-size: .75rem; text-align: right; }
.cache-progress .progress-status { grid-column: 1 / -1; margin: 0; color: #8996a8; font-size: .72rem; overflow-wrap: anywhere; }
.launch-progress { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45rem .7rem; flex: 1 1 100%; padding: .7rem .8rem; overflow: hidden; border: 1px solid rgba(93,184,255,.42); border-radius: .5rem; background: linear-gradient(135deg,rgba(18,38,55,.92),rgba(18,24,34,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.launch-progress[hidden] { display: none; }
.launch-progress progress { width: 100%; height: .8rem; accent-color: #5db8ff; }
.launch-progress progress::-webkit-progress-value { background-color: #5db8ff; }
.launch-progress progress::-moz-progress-bar { background-color: #5db8ff; }
.launch-progress span { min-width: 3.2rem; color: #8fcfff; font-size: .78rem; font-weight: 800; text-align: right; }
.launch-progress small { grid-column: 1 / -1; color: #a9c7df; overflow-wrap: anywhere; }
.game-card-progress { position: relative; z-index: 1; grid-column: 1 / -1; }
.progress-card {
  z-index: 2;
  grid-template-columns: 1fr;
  min-height: 7.2rem;
  padding: 2.35rem 1rem 1rem;
  border: 2px solid #55afd0;
  border-top: 5px solid #278eb8;
  background: linear-gradient(145deg,#f4fcff,#dff4fb);
  box-shadow: 0 .5rem 1.25rem rgba(39,142,184,.2), inset 0 1px 0 #fff;
  cursor: wait;
  animation: install-card-pulse 1.8s ease-in-out infinite;
}
.progress-card::before { position: absolute; z-index: 2; top: 0; left: 1rem; content: var(--ui-installing); padding: .38rem .75rem .43rem; border-radius: 0 0 .45rem .45rem; background: linear-gradient(135deg,#247fa8,#35a9c7); color: #fff; font-size: .7rem; font-weight: 900; letter-spacing: .05em; }
.progress-card::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(110deg,transparent 18%,rgba(255,255,255,.65) 47%,transparent 72%); transform: translateX(-130%); animation: install-card-shine 2.1s ease-in-out infinite; }
.progress-card > strong { position: relative; z-index: 1; color: #155d78; font-size: .95rem; }
.progress-card .cache-progress progress { height: .9rem; accent-color: #278eb8; }
.progress-card .cache-progress progress::-webkit-progress-value { background-color: #278eb8; }
.progress-card .cache-progress progress::-moz-progress-bar { background-color: #278eb8; }
.progress-card .cache-progress span { color: #176986; font-weight: 850; }
.progress-card .cache-progress .progress-status { color: #397487; font-weight: 700; }
@keyframes install-card-pulse { 50% { border-color: #278eb8; box-shadow: 0 .65rem 1.5rem rgba(39,142,184,.28), inset 0 1px 0 #fff; } }
@keyframes install-card-shine { 45%,100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .progress-card, .progress-card::after { animation: none; } }

.screen-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 72vh;
  background: #000;
  border: 1px solid #303640;
}
.screen-shell button {
  border-color: #526676;
  background: linear-gradient(180deg,rgba(45,56,69,.96),rgba(24,31,40,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.3);
  color: #edf8f8;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.screen-shell button:not(:disabled):hover {
  border-color: #56c6c8;
  background: linear-gradient(180deg,#344f58,#20353d);
  color: #fff;
}
.screen-shell button:not(:disabled):active,
.screen-shell button[data-active="true"],
.screen-shell button[aria-pressed="true"] {
  border-color: #65d7bd;
  background: #183c3c;
  color: #bff9e9;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.42), 0 0 0 1px rgba(101,215,189,.28);
}
.screen-shell button:disabled { color: #9aa9b4; }

#dos { display: grid; width: 100%; height: 100%; place-items: center; contain: strict; overflow: hidden; }
#dos, #dos * { touch-action: none; }
#dos .emulator-mouse-overlay { opacity: 0 !important; pointer-events: none !important; }
#dos.jsdos-rso > div, #dos .window, #dos .window > div { width: 100%; height: 100%; }
#dos canvas { display: block; width: var(--game-canvas-width, auto) !important; height: var(--game-canvas-height, auto) !important; max-width: 100%; max-height: 100%; margin: auto; contain: strict; }
#dos[data-visual-filter="pixel-perfect"] canvas { image-rendering: pixelated !important; }
#dos[data-visual-filter="sharp-hd"] canvas { image-rendering: auto !important; filter: contrast(1.04) saturate(1.02) brightness(1); }
#dos .pixel-upscale-source { opacity: 0; }
#dos .pixel-upscale-output { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; image-rendering: pixelated !important; }
#dos .window > .relative { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.empty-screen { position: absolute; inset: 0; display: grid; place-content: center; gap: .6rem; text-align: center; color: #7b8797; }
.empty-screen strong { color: #70e0a1; font-size: clamp(2rem, 10vw, 7rem); letter-spacing: .2em; }
.pointer-debug { position: absolute; z-index: 10000; top: 2rem; left: .35rem; max-width: calc(100% - .7rem); padding: .25rem .4rem; background: rgba(0,0,0,.72); color: #70e0a1; font-size: clamp(.55rem, 1.6vw, .72rem); line-height: 1.35; white-space: pre-wrap; pointer-events: none; overflow-wrap: anywhere; }
.launch-help { position: absolute; z-index: 10002; left: 50%; top: 18%; width: min(88%, 34rem); transform: translateX(-50%); padding: .8rem 1rem; border: 1px solid rgba(112,224,161,.7); border-radius: .55rem; background: rgba(10,13,18,.9); color: #eef2f6; text-align: center; font-size: clamp(.7rem, 2vw, .9rem); pointer-events: none; }
.launch-help strong { color: #70e0a1; }

.touch-controls { position: absolute; z-index: 20; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.virtual-control { position: absolute; opacity: var(--virtual-control-opacity, 1); pointer-events: auto; touch-action: none; }
.virtual-control > button { width: 100%; height: 100%; }
.virtual-dpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); overflow: hidden; height: auto !important; aspect-ratio: 1 / 1; border: 1px solid rgba(234,242,255,.28); border-radius: 50%; background: radial-gradient(circle,rgba(20,25,32,.18) 0 18%,rgba(20,25,32,.46) 19% 100%); }
.virtual-dpad > button { border: 0; border-radius: 50%; background: transparent; opacity: .62; }
.virtual-dpad > button[data-active="true"] { color: #fff; opacity: 1; filter: drop-shadow(0 0 .35rem #70e0a1); }
.virtual-dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.virtual-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.virtual-dpad button:nth-child(3) { grid-column: 2; grid-row: 3; }
.virtual-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }

/* Virtual controls share one input layout; skins change presentation only. */
.touch-controls[data-skin="classic"] .virtual-dpad {
  overflow: visible;
  border: 0;
  border-radius: .5rem;
  background: transparent;
}
.touch-controls[data-skin="classic"] .virtual-control > button:not(.delete-control) {
  border: 1px solid rgba(226,235,242,.58);
  border-bottom-width: .28rem;
  border-radius: .38rem;
  background: linear-gradient(155deg, rgba(79,89,102,.92), rgba(29,35,44,.94) 68%);
  box-shadow: inset .08rem .1rem .12rem rgba(255,255,255,.18), 0 .18rem .28rem rgba(0,0,0,.45);
  color: #f5f8fa;
  font-family: "D2Coding", ui-monospace, monospace;
  font-weight: 800;
  text-shadow: 0 1px 1px #000;
  opacity: .78;
  transform: translateY(-.1rem);
  transition: transform .06s ease, border-width .06s ease, box-shadow .06s ease, filter .06s ease;
}
.touch-controls[data-skin="classic"] .virtual-dpad > button:not(.delete-control) {
  width: 94%;
  height: 94%;
  justify-self: center;
  align-self: center;
  border-radius: .3rem;
}
.touch-controls[data-skin="classic"] .virtual-control > button:not(.delete-control):active,
.touch-controls[data-skin="classic"] .virtual-control > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="classic"] .virtual-key[data-pressed="true"] > button:not(.delete-control) {
  border-bottom-width: 1px;
  border-color: #83e7c2;
  box-shadow: inset 0 .18rem .28rem rgba(0,0,0,.42), 0 .03rem .08rem rgba(0,0,0,.45);
  filter: brightness(.9);
  transform: translateY(.12rem);
}
.touch-controls[data-skin="arcade"] .virtual-dpad {
  --lever-x: 0%;
  --lever-y: 0%;
  --lever-angle: 180deg;
  overflow: visible;
  border: .18rem solid rgba(12,16,22,.78);
  background: radial-gradient(circle at 38% 32%, rgba(115,129,146,.9), rgba(28,34,43,.9) 42%, rgba(8,11,15,.92) 72%);
  box-shadow: inset 0 0 0 .16rem rgba(220,232,241,.22), 0 .45rem 1rem rgba(0,0,0,.38);
}
.touch-controls[data-skin="arcade"] .virtual-dpad::before {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  content: "";
  transform: translate(calc(-50% + var(--lever-x)), calc(-50% + var(--lever-y))) scale(1.12);
  border: .18rem solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f87373, #a91f32 65%, #56101c);
  box-shadow: inset .1rem .12rem .16rem rgba(255,255,255,.4), 0 .22rem .36rem rgba(0,0,0,.65), 0 0 0 .22rem rgba(7,10,14,.72);
  transition: transform .07s cubic-bezier(.2,.8,.2,1), box-shadow .07s ease;
}
.touch-controls[data-skin="arcade"] .virtual-dpad::after {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 7%;
  height: 27%;
  content: "";
  transform: translate(-50%, -96%) rotate(var(--lever-angle));
  transform-origin: 50% 96%;
  border-radius: 999px;
  background: linear-gradient(90deg, #323943, #d6dce1 45%, #707984 72%, #20262d);
  box-shadow: 0 .12rem .2rem rgba(0,0,0,.55);
  transition: transform .07s cubic-bezier(.2,.8,.2,1);
}
.touch-controls[data-skin="arcade"] .virtual-dpad > button {
  z-index: 1;
  color: rgba(255,255,255,.68);
  opacity: .45;
}
.touch-controls[data-skin="arcade"] .virtual-key > button:not(.delete-control) {
  overflow: hidden;
  border: .18rem solid rgba(19,24,31,.9);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, var(--arcade-light), var(--arcade-main) 50%, var(--arcade-dark) 82%);
  box-shadow: inset 0 .12rem .18rem rgba(255,255,255,.34), 0 .3rem .55rem rgba(0,0,0,.42);
  color: #fff;
  font-weight: 850;
  opacity: .78;
  transform: translateY(-.12rem);
  transition: transform .06s ease, filter .06s ease, box-shadow .06s ease, border-color .06s ease;
}
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="0"] { --arcade-light: #ff9a9f; --arcade-main: #db3855; --arcade-dark: #721326; }
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="1"] { --arcade-light: #ffe082; --arcade-main: #f4a51c; --arcade-dark: #8b4b08; }
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="2"] { --arcade-light: #8ff2bb; --arcade-main: #20b86e; --arcade-dark: #095f3b; }
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="3"] { --arcade-light: #8edcff; --arcade-main: #278dd2; --arcade-dark: #174b85; }
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="4"] { --arcade-light: #d6a1ff; --arcade-main: #914bd1; --arcade-dark: #4e247b; }
.touch-controls[data-skin="arcade"] .virtual-key[data-arcade-color="5"] { --arcade-light: #fff4f7; --arcade-main: #d9dfe7; --arcade-dark: #6e7783; }
.touch-controls[data-skin="arcade"] .virtual-key > button:not(.delete-control):active,
.touch-controls[data-skin="arcade"] .virtual-key > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="arcade"] .virtual-key[data-pressed="true"] > button:not(.delete-control) {
  border-color: #ffd15d;
  box-shadow: inset 0 .28rem .48rem rgba(0,0,0,.48), 0 .05rem .08rem rgba(0,0,0,.42), 0 0 .65rem rgba(255,209,93,.55);
  filter: brightness(.8) saturate(1.08);
  transform: translateY(.16rem) scale(.94);
}
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="up"] { --lever-y: -62%; --lever-angle: 0deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="down"] { --lever-y: 62%; --lever-angle: 180deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="left"] { --lever-x: -62%; --lever-angle: -90deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="right"] { --lever-x: 62%; --lever-angle: 90deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="up-left"] { --lever-x: -46%; --lever-y: -46%; --lever-angle: -45deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="up-right"] { --lever-x: 46%; --lever-y: -46%; --lever-angle: 45deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="down-left"] { --lever-x: -46%; --lever-y: 46%; --lever-angle: -135deg; }
.touch-controls[data-skin="arcade"] .virtual-dpad[data-lever="down-right"] { --lever-x: 46%; --lever-y: 46%; --lever-angle: 135deg; }
.touch-controls[data-skin="eight-bit"] .virtual-dpad,
.touch-controls[data-skin="sixteen-bit"] .virtual-dpad,
.touch-controls[data-skin="handheld"] .virtual-dpad,
.touch-controls[data-skin="modern"] .virtual-dpad { overflow: visible; }
.touch-controls[data-skin="eight-bit"] .virtual-control > button:not(.delete-control),
.touch-controls[data-skin="sixteen-bit"] .virtual-control > button:not(.delete-control),
.touch-controls[data-skin="handheld"] .virtual-control > button:not(.delete-control),
.touch-controls[data-skin="modern"] .virtual-control > button:not(.delete-control) {
  font-weight: 850;
  opacity: .76;
  transition: transform .06s ease, filter .06s ease, box-shadow .06s ease;
}
.touch-controls[data-skin="eight-bit"] .virtual-dpad {
  border: .16rem solid rgba(225,220,205,.65);
  border-radius: .55rem;
  background: linear-gradient(145deg, rgba(214,208,190,.72), rgba(119,114,104,.7));
  box-shadow: inset 0 0 0 .14rem rgba(255,255,255,.18), 0 .35rem .7rem rgba(0,0,0,.35);
}
.touch-controls[data-skin="eight-bit"] .virtual-dpad > button:not(.delete-control) {
  border: .12rem solid #090a0c;
  border-radius: .12rem;
  background: linear-gradient(145deg, #4c5158, #15181d 68%);
  color: #d9dde2;
}
.touch-controls[data-skin="eight-bit"] .virtual-key > button:not(.delete-control) {
  border: .15rem solid #561321;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff7e85, #c8233d 62%, #68101f);
  color: white;
  box-shadow: inset .1rem .1rem .14rem rgba(255,255,255,.3), 0 .24rem .35rem rgba(0,0,0,.45);
}
.touch-controls[data-skin="sixteen-bit"] .virtual-dpad {
  border: .18rem solid rgba(223,218,239,.5);
  background: radial-gradient(circle, rgba(179,171,204,.72), rgba(85,78,108,.76));
  box-shadow: inset 0 0 0 .15rem rgba(255,255,255,.13), 0 .3rem .7rem rgba(0,0,0,.36);
}
.touch-controls[data-skin="sixteen-bit"] .virtual-dpad > button:not(.delete-control) {
  border: .1rem solid #24202e;
  border-radius: .18rem;
  background: linear-gradient(145deg, #625c70, #282431 68%);
  color: #eeeaf5;
}
.touch-controls[data-skin="sixteen-bit"] .virtual-key > button:not(.delete-control) {
  border: .13rem solid rgba(39,32,52,.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--pad-light), var(--pad-main) 64%, #292331);
  color: white;
  box-shadow: inset .1rem .1rem .16rem rgba(255,255,255,.3), 0 .22rem .35rem rgba(0,0,0,.42);
}
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="0"],
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="4"] { --pad-light: #ef9cff; --pad-main: #9250bd; }
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="1"],
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="5"] { --pad-light: #fff084; --pad-main: #d2a527; }
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="2"] { --pad-light: #83eeb9; --pad-main: #269e65; }
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-arcade-color="3"] { --pad-light: #8fd5ff; --pad-main: #3b83c6; }
.touch-controls[data-skin="handheld"] .virtual-dpad {
  border: .16rem solid rgba(224,228,214,.62);
  border-radius: 18%;
  background: linear-gradient(145deg, rgba(177,185,165,.82), rgba(102,111,95,.82));
  box-shadow: inset .12rem .12rem .22rem rgba(255,255,255,.2), 0 .32rem .65rem rgba(0,0,0,.35);
}
.touch-controls[data-skin="handheld"] .virtual-dpad > button:not(.delete-control) {
  border: .1rem solid #252a28;
  border-radius: .16rem;
  background: linear-gradient(145deg, #555d59, #202522 68%);
  color: #d9e0da;
}
.touch-controls[data-skin="handheld"] .virtual-key > button:not(.delete-control) {
  border: .14rem solid #44264d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #d287de, #7d3d91 64%, #3d2048);
  color: #fff;
  box-shadow: inset .1rem .1rem .14rem rgba(255,255,255,.25), 0 .22rem .35rem rgba(0,0,0,.4);
}
.touch-controls[data-skin="modern"] .virtual-dpad {
  border: .14rem solid rgba(91,224,235,.62);
  background: radial-gradient(circle, rgba(44,55,67,.82), rgba(8,12,18,.9));
  box-shadow: inset 0 0 1rem rgba(66,220,230,.12), 0 0 .7rem rgba(38,190,209,.22);
}
.touch-controls[data-skin="modern"] .virtual-dpad > button:not(.delete-control) {
  border: 1px solid rgba(109,232,240,.42);
  background: rgba(15,25,34,.72);
  color: #9cf6ff;
}
.touch-controls[data-skin="modern"] .virtual-key > button:not(.delete-control) {
  border: .12rem solid rgba(255,91,174,.72);
  border-radius: 34%;
  background: linear-gradient(145deg, rgba(62,38,67,.88), rgba(14,18,27,.92));
  color: #fff;
  box-shadow: inset 0 0 .55rem rgba(255,91,174,.15), 0 0 .55rem rgba(255,91,174,.22);
}
.touch-controls[data-skin="eight-bit"] .virtual-control > button:not(.delete-control):active,
.touch-controls[data-skin="eight-bit"] .virtual-control > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="sixteen-bit"] .virtual-control > button:not(.delete-control):active,
.touch-controls[data-skin="sixteen-bit"] .virtual-control > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="handheld"] .virtual-control > button:not(.delete-control):active,
.touch-controls[data-skin="handheld"] .virtual-control > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="modern"] .virtual-control > button:not(.delete-control):active,
.touch-controls[data-skin="modern"] .virtual-control > button[data-active="true"]:not(.delete-control),
.touch-controls[data-skin="eight-bit"] .virtual-key[data-pressed="true"] > button:not(.delete-control),
.touch-controls[data-skin="sixteen-bit"] .virtual-key[data-pressed="true"] > button:not(.delete-control),
.touch-controls[data-skin="handheld"] .virtual-key[data-pressed="true"] > button:not(.delete-control),
.touch-controls[data-skin="modern"] .virtual-key[data-pressed="true"] > button:not(.delete-control) {
  filter: brightness(.72);
  box-shadow: inset 0 .24rem .4rem rgba(0,0,0,.5), 0 0 .4rem rgba(112,224,161,.45);
  transform: translateY(.12rem) scale(.95);
}
.resize-handle { display: none; position: absolute; right: -.35rem; bottom: -.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #70e0a1; }
body[data-control-editing="true"] .resize-handle { display: block; }
.delete-control { display: none; position: absolute; z-index: 3; left: -.45rem; top: -.45rem; width: 1.5rem !important; height: 1.5rem !important; min-height: 0; padding: 0; border-radius: 50%; opacity: 1 !important; background: #b63838 !important; }
body[data-control-editing="true"] .delete-control { display: block; }
.game-tools { position: absolute; z-index: 10001; top: 0; left: 50%; transform: translate(-50%, calc(-100% + 1.8rem)); transition: transform .25s ease; }
.game-tools[data-open="true"] { transform: translate(-50%, 0); }
.game-tools-actions { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; padding: .45rem; border-radius: 0 0 .55rem .55rem; background: rgba(10,13,18,.9); }
.game-tools-actions button { min-height: 2rem; padding: .35rem .55rem; color: #edf8f8; font-size: .7rem; font-weight: 750; }
.tool-symbol { display: inline-grid; width: 1rem; height: 1rem; place-items: center; color: #8de4d2; font-size: 1rem; line-height: 1; }
.game-tools-actions #capture-mouse[aria-pressed="true"] { border-color: #70e0a1; color: #70e0a1; }
.game-tools-toggle { display: block; min-height: 1.8rem; margin: 0 auto; padding: 0 .9rem; border-radius: 0 0 .5rem .5rem; background: rgba(10,13,18,.78); }
.game-tools-toggle > .ui-icon { margin: 0; transition: transform .2s ease; }
.game-tools[data-open="true"] .game-tools-toggle > .ui-icon { transform: rotate(180deg); }
.mouse-controls-panel { position: absolute; z-index: 10003; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.62); animation: ui-fade-in .18s ease-out both; }
.mouse-controls-panel > * { animation: ui-dialog-in .24s cubic-bezier(.2,.75,.25,1) both; }
.snapshot-card { width: min(42rem, 100%); max-height: 88vh; overflow: auto; }
.snapshot-warning { margin: .6rem 0; padding: .65rem .75rem; border: 1px solid #b58932; border-radius: .45rem; background: rgba(181,137,50,.12); color: #ffd277; font-weight: 700; }
.snapshot-warning-primary { display: block; margin: -.1rem 0 .45rem; padding: .45rem .55rem; border-left: 3px solid #ff6868; border-radius: .25rem; background: rgba(255,80,80,.13); color: #ff8b8b; font-size: 1.05rem; }
.snapshot-warning > span { display: block; }
.snapshot-warning a { color: #8fc8ff; }
.snapshot-status { min-height: 2.5rem; display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .75rem; padding: .55rem .7rem; border: 1px solid #46505f; border-radius: .45rem; background: #0c1016; color: #aeb8c5; font-weight: 700; }
.snapshot-status[data-state="working"] { color: #8fc8ff; }
.snapshot-status[data-state="working"]::before { width: .85rem; height: .85rem; content: ""; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: snapshot-spin .7s linear infinite; }
.snapshot-status[data-state="success"] { border-color: #3b8f62; color: #70e0a1; }
.snapshot-status[data-state="error"] { border-color: #b84949; color: #ff8a8a; }
@keyframes snapshot-spin { to { transform: rotate(360deg); } }
.snapshot-slots { display: grid; gap: .65rem; }
.snapshot-slot { width: 100%; display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .75rem; padding: .6rem; color: inherit; text-align: left; border: 1px solid #46505f; border-radius: .55rem; background: #151a22; animation: ui-fade-rise .22s ease-out both; }
.snapshot-slot:nth-child(2) { animation-delay: .025s; }
.snapshot-slot:nth-child(3) { animation-delay: .05s; }
.snapshot-slot:nth-child(4) { animation-delay: .075s; }
.snapshot-slot:nth-child(5) { animation-delay: .1s; }
.snapshot-slot[aria-pressed="true"] { border-color: #70e0a1; outline: 2px solid rgba(112,224,161,.3); }
.snapshot-preview { position: relative; width: 7rem; aspect-ratio: 4 / 3; background: #050608; }
.snapshot-preview img { width: 100%; height: 100%; object-fit: contain; }
.snapshot-preview[data-empty="true"]::after { position: absolute; inset: 0; display: grid; place-items: center; content: "NO DATA"; color: #657080; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.snapshot-slot[data-loading="true"] .snapshot-preview::before { position: absolute; inset: 0; z-index: 1; content: ""; background: rgba(5,6,8,.58); }
.snapshot-slot[data-loading="true"] .snapshot-preview::after { position: absolute; left: 50%; top: 50%; z-index: 2; width: 1.5rem; height: 1.5rem; margin: -.75rem; content: ""; border: 3px solid #8fc8ff; border-right-color: transparent; border-radius: 50%; animation: snapshot-spin .7s linear infinite; }
.snapshot-slot-info { display: grid; gap: .25rem; }
.snapshot-compatibility { width: fit-content; padding: .12rem .4rem; border: 1px solid #b84949; border-radius: 999px; color: #ff8a8a; font-size: .72rem; font-weight: 800; }
.snapshot-card { display: grid; grid-template-rows: auto auto auto auto minmax(0,1fr) auto; overflow: hidden; }
.snapshot-slots { min-height: 0; overflow-y: auto; padding-right: .2rem; grid-auto-rows: max-content; align-content: start; }
.snapshot-slot { min-height: 6.6rem; flex-shrink: 0; }
.snapshot-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: .5rem; padding-top: .75rem; border-top: 1px solid #303a47; background: #10151d; }
@media (max-width: 560px) { .snapshot-slot { min-height: 5.2rem; grid-template-columns: 5rem 1fr; } .snapshot-preview { width: 5rem; } }
#pure-player, #pure-game { width: 100%; min-height: 100vh; }
.mouse-controls-card { width: min(92vw, 38rem); max-height: 92vh; overflow: auto; padding: 1rem; border: 1px solid rgba(112,224,161,.55); border-radius: .75rem; background: #10151d; box-shadow: 0 1rem 3rem rgba(0,0,0,.5); }
.mouse-controls-card header { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; }
.mouse-controls-card header button { min-width: 2rem; padding: .25rem; font-size: 1.2rem; }
.mouse-controls-card > p { margin: .5rem 0 .85rem; color: #aeb8c5; font-size: .82rem; }
.mouse-capture-card { display: grid; gap: .8rem; width: min(92vw, 32rem); }
.mouse-capture-card > p { margin: 0; }
.mouse-capture-visual { display: grid; grid-template-columns: minmax(0,1fr) 6.5rem; align-items: center; gap: 1.1rem; padding: 1rem; border: 1px solid #40505f; border-radius: .7rem; background: linear-gradient(145deg,#18232d,#101820); }
.mouse-capture-screen { position: relative; min-height: 8rem; overflow: hidden; border: .35rem solid #536474; border-radius: .45rem; background: radial-gradient(circle at 72% 30%,rgba(101,215,189,.22),transparent 28%),linear-gradient(150deg,#193348,#091019); box-shadow: inset 0 0 1.8rem rgba(0,0,0,.45); }
.mouse-capture-screen::after { position: absolute; left: 50%; bottom: -.95rem; width: 3.5rem; height: 1.2rem; content: ""; transform: translateX(-50%); border-radius: 50%; background: #536474; }
.mouse-capture-cursor { position: absolute; z-index: 1; left: 62%; top: 42%; color: #fff; font-size: 1.7rem; filter: drop-shadow(0 .12rem .18rem #000); transform: rotate(-35deg); }
.mouse-capture-motion { position: absolute; left: 23%; top: 47%; color: #65d7bd; font-size: 1.3rem; font-weight: 900; letter-spacing: .18rem; transform: rotate(-8deg); }
.mouse-capture-device { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 8.2rem; overflow: hidden; border: 2px solid #8da1b2; border-radius: 3.2rem 3.2rem 2.4rem 2.4rem; background: linear-gradient(90deg,#dce8ed 0 49%,#8094a3 50% 51%,#dce8ed 52%); color: #26333d; font-size: .72rem; font-weight: 900; text-align: center; }
.mouse-capture-device span { padding-top: 1.2rem; }
.mouse-capture-device .mouse-wheel { position: absolute; left: 50%; top: 1.05rem; width: .55rem; height: 1.25rem; padding: 0; transform: translateX(-50%); border-radius: .4rem; background: #3e5260; }
.mouse-capture-guide { display: grid; gap: .45rem; }
.mouse-capture-guide > div { display: grid; grid-template-columns: 4rem 1fr; gap: .65rem; align-items: baseline; padding: .65rem .75rem; border-radius: .5rem; background: #18212b; }
.mouse-capture-guide strong { color: #7be0cb; font-size: .82rem; }
.mouse-capture-guide span { color: #d6e0e7; font-size: .8rem; line-height: 1.45; }
.mouse-capture-card .mouse-capture-note { padding: .65rem .75rem; border-left: 3px solid #f0b85b; border-radius: .35rem; background: rgba(240,184,91,.1); color: #f5cc88; }
.mouse-capture-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.mouse-capture-actions #confirm-mouse-capture { border-color: #4fae99; background: #256b5e; color: #f4ffff; }
@media (max-width: 480px) { .mouse-capture-visual { grid-template-columns: minmax(0,1fr) 4.8rem; } .mouse-capture-device { height: 6.2rem; } }
.screen-layout-card { display: grid; gap: .85rem; width: min(92vw, 34rem); }
.screen-layout-card fieldset { margin: 0; padding: .7rem; border: 1px solid #3a4654; border-radius: .55rem; }
.screen-layout-card legend { padding: 0 .35rem; color: #9fb0bf; font-size: .78rem; font-weight: 800; }
.screen-fit-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.screen-fit-options label, .screen-safe-controls { display: flex; align-items: center; gap: .45rem; padding: .55rem; border-radius: .4rem; background: #171e28; color: #e0e9ef; font-size: .82rem; font-weight: 750; }
.screen-fit-options input, .screen-safe-controls input { accent-color: #65d7bd; }
.screen-size-control { display: grid; grid-template-columns: auto minmax(8rem,1fr) 3.5rem; align-items: center; gap: .65rem; color: #dce6ed; font-size: .82rem; font-weight: 800; }
.screen-size-control input { width: 100%; accent-color: #65d7bd; }
.screen-size-control output { color: #70e0c4; text-align: right; }
.screen-position-grid { display: grid; grid-template-columns: repeat(3,2.5rem); justify-content: center; gap: .35rem; }
.screen-position-grid button { min-width: 0; min-height: 2.5rem; padding: 0; }
.screen-position-grid button[aria-pressed="true"] { color: #fff; }
.screen-layout-summary { min-height: 2.1rem; padding: .55rem .65rem; border-radius: .4rem; background: #0b1118; color: #83d8ca; font-size: .76rem; }
.mouse-button-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.gamepad-card output { display: block; margin: .6rem 0; color: #70e0a1; }
.gamepad-mappings { display: flex; gap: .4rem; flex-wrap: wrap; min-height: 2rem; }
.gamepad-mappings button { padding: .35rem .55rem; font-size: .72rem; }
.gamepad-sticks { display: grid; gap: .45rem; margin: .7rem 0; }
.gamepad-stick { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .45rem .6rem; padding: .45rem; border: 1px solid #303a47; border-radius: .4rem; font-size: .72rem; }
.gamepad-stick select { min-height: 2.2rem; }
.gamepad-sensitivity { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(8rem,1fr) auto 2.8rem; align-items: center; gap: .4rem; color: #9ca8b8; }
.gamepad-sensitivity input { width: 100%; accent-color: #70e0a1; }
.gamepad-sensitivity output { color: #70e0a1; text-align: right; }
.gamepad-mouse-buttons { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.mouse-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; margin-bottom: .8rem; }
.mouse-mode-options > button { display: grid; gap: .45rem; align-content: start; min-height: 12rem; padding: .7rem; border: 2px solid #303a47; background: #171e28; text-align: left; }
.mouse-mode-options > button[data-selected="true"] { border-color: #70e0a1; background: #17271f; }
.trackpad-mode-help { display: grid; gap: .45rem; padding: .7rem; border: 2px solid #70e0a1; background: #17271f; }
.mouse-mode-options small { color: #bdc6d1; line-height: 1.4; }
.mouse-mode-visual { position: relative; display: block; height: 5.2rem; overflow: hidden; border-radius: .5rem; background: linear-gradient(135deg,#243140,#111820); }
.mouse-mode-visual i { position: absolute; font-style: normal; }
.mouse-cursor { right: 22%; bottom: 18%; color: white; font-size: 1.5rem; transform: rotate(-35deg); text-shadow: 0 2px 3px #000; }
.touch-point { left: 27%; top: 24%; width: 2.4rem; height: 2.4rem; border: .32rem solid #70e0a1; border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(112,224,161,.18); }
.finger-path { left: 18%; top: 16%; color: #70e0a1; font-size: 2.6rem; letter-spacing: .3rem; }
.trackpad-visual::after { content: var(--ui-trackpad); position: absolute; left: .5rem; bottom: .35rem; color: #dbe4ed; font-size: .68rem; }
@media (max-width: 560px) { .mouse-mode-options { grid-template-columns: 1fr; } .mouse-mode-options > button { min-height: 9.5rem; } }
.paused-screen { position: absolute; z-index: 10004; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.65rem; padding: 1rem; background: linear-gradient(180deg,#f5fbfc 0,#eaf4f6 100%); text-align: center; animation: ui-fade-in .18s ease-out both; }
.paused-screen > * { animation: ui-dialog-in .24s cubic-bezier(.2,.75,.25,1) both; }
.paused-preview-frame { position: relative;
  width: min(640px, 90vw);
  padding: .72rem .72rem 3.35rem;
  border: 1px solid #82909a;
  border-radius: 1rem;
  background: linear-gradient(145deg,#dfe7e8,#95a5a9 52%,#77878b);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.72), inset 0 -3px 8px rgba(31,47,52,.28), 0 1.2rem 2.7rem rgba(0,0,0,.5);
}
.paused-preview-frame::before {
  position: absolute;
  top: 1.05rem;
  left: 1.05rem;
  z-index: 1;
  width: 28%;
  height: 24%;
  content: "";
  border-radius: 50%;
  background: linear-gradient(135deg,rgba(255,255,255,.16),transparent 65%);
  pointer-events: none;
}
.paused-preview-frame::after {
  position: absolute;
  left: 50%;
  bottom: -1.25rem;
  width: 34%;
  height: 1.4rem;
  content: "";
  border: 1px solid #738287;
  border-radius: 0 0 .75rem .75rem;
  background: linear-gradient(180deg,#8f9da1,#c3ced0);
  box-shadow: 0 .45rem .75rem rgba(0,0,0,.3);
  transform: translateX(-50%);
}
.paused-preview-frame > img { display: block; width: 100%; max-height: 60vh; object-fit: contain; border: .45rem solid #263238; border-radius: .55rem; background: #000; box-shadow: inset 0 0 1.4rem rgba(44,211,199,.12), 0 2px 4px rgba(0,0,0,.4); }
.paused-preview-frame > img:not([src]) { display: none; }
.paused-screen > strong { padding: .5rem .75rem; border: 1px solid #c8dbe0; border-radius: .4rem; background: rgba(255,255,255,.78); color: #45616b; box-shadow: 0 .25rem .65rem rgba(45,83,92,.1); }
.paused-actions { position: absolute; z-index: 2; left: 50%; bottom: .55rem; display: flex; gap: .6rem; transform: translateX(-50%); }
.paused-actions button { min-height: 2.1rem; border-color: rgba(32,63,68,.45); background: rgba(245,251,250,.88); color: #1b4d50; font-weight: 850; text-shadow: none; }
.paused-actions #resume-game { color: #10684f; }
.paused-actions #quit-game { color: #a73542; }
.paused-actions button:not(:disabled):hover { background: #fff; color: #113f42; }
.screen-shell[data-paused="true"] { width: min(720px, 100%); margin-inline: auto; border-color: transparent; background: #eaf4f6; box-shadow: none; }
.screen-shell[data-paused="true"] .touch-controls,
.screen-shell[data-paused="true"] .game-tools,
.screen-shell[data-paused="true"] .pointer-debug { visibility: hidden; }
.screen-shell[data-paused="true"] #dos { visibility: hidden; pointer-events: none; }
.controller-editor { position: fixed; z-index: 10002; left: 50%; bottom: 1rem; width: min(94vw, 850px); transform: translateX(-50%); padding: 1rem; border: 1px solid #465063; border-radius: .5rem; background: rgba(23,27,34,.96); box-shadow: 0 .5rem 2rem #000; animation: controller-dialog-in .24s cubic-bezier(.2,.75,.25,1) both; }
.controller-editor[hidden] { display: none; }
.editor-heading, .editor-actions { display: flex; align-items: end; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.editor-modes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.editor-mode-switch { display: flex; align-items: center; gap: .35rem; color: #d5dce6; font-size: .75rem; font-weight: 700; cursor: pointer; }
.editor-mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
.editor-mode-switch i { position: relative; overflow: hidden; width: 2.8rem; height: 1.4rem; border: 1px solid #647084; border-radius: 1rem; background: #242b35; box-shadow: 0 0 .45rem rgba(143,207,255,.18); transition: border-color .15s, background .15s; }
.editor-mode-switch i::before { content: ""; position: absolute; z-index: 1; top: -.35rem; left: -1.2rem; width: .75rem; height: 2rem; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); transform: skewX(-20deg); animation: editor-switch-shine 2.4s ease-in-out infinite; pointer-events: none; }
.editor-mode-switch i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #d5dce6; transition: transform .15s, background .15s; }
.editor-mode-switch input:checked + i { border-color: #70e0a1; background: rgba(112,224,161,.2); }
.editor-mode-switch input:checked + i::after { background: #70e0a1; transform: translateX(1.4rem); }
.editor-mode-switch input:focus-visible + i { outline: 2px solid #8fcfff; outline-offset: 2px; }
@keyframes editor-switch-shine { 0%, 58% { left: -1.2rem; opacity: 0; } 66% { opacity: 1; } 86%, 100% { left: 3.25rem; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .editor-mode-switch i::before { animation: none; left: 1rem; opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  header, main > section, .install-menu, .game-card, .launch-debug,
  .web-select-panel, .web-select-card, .mouse-controls-panel,
  .mouse-controls-panel > *, .snapshot-slot, .paused-screen,
  .paused-screen > *, .controller-editor {
    animation: none !important;
  }
}
.control-picker[hidden] { display: none; }
.controller-editor p { color: #9ca8b8; font-size: .75rem; }
.control-section-title { display: block; margin-top: .8rem; color: #d5dce6; font-size: .78rem; }
.editor-actions label { display: grid; gap: .25rem; color: #9ca8b8; font-size: .72rem; }
.control-skin-option { min-width: 9rem; }
.control-skin-option select { min-height: 2.35rem; }
.control-opacity-option { min-width: 12rem; }
.control-opacity-option > span { display: flex; align-items: center; gap: .45rem; }
.control-opacity-option input { width: 8rem; }
.control-opacity-option output { min-width: 2.8rem; color: #d9f5ec; font-variant-numeric: tabular-nums; }
.keyboard-palette { display: grid; gap: .3rem; margin-top: .35rem; overflow-x: auto; padding-bottom: .25rem; }
.special-control-palette { margin: .35rem 0 .5rem; }
.special-key-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.special-key-row button { min-height: 2.35rem; padding: .3rem .65rem; font-size: .68rem; }
.keyboard-row { display: flex; justify-content: center; gap: .25rem; min-width: 49rem; }
.keyboard-row button { flex: 0 0 2.7rem; min-width: 2.7rem; min-height: 2.35rem; padding: .3rem; font-size: .68rem; }
.keyboard-row[data-row="0"] { margin-bottom: .35rem; }
.keyboard-row[data-row="0"] button:first-child { margin-right: 1rem; }
.keyboard-row button[data-key="Backspace"] { flex-basis: 5.2rem; }
.keyboard-row button[data-key="Tab"] { flex-basis: 4rem; }
.keyboard-row button[data-key="\\"] { flex-basis: 3.85rem; }
.keyboard-row button[data-key="CapsLock"] { flex-basis: 4.75rem; }
.keyboard-row button[data-key="Enter"] { flex-basis: 5.25rem; }
.keyboard-row button[data-key="Shift"] { flex-basis: 6.7rem; }
.keyboard-row button[data-key="Control"], .keyboard-row button[data-key="Alt"] { flex-basis: 4.5rem; }
.keyboard-row button[data-key^="Mouse"] { flex-basis: 6.5rem; }
.keyboard-row button[data-key=" "] { min-width: 14rem; }
.keyboard-row[data-row="6"] { padding-left: 16rem; }
.keyboard-row[data-row="7"] { padding-left: 16rem; }
.keyboard-row button[data-added="true"] { border-color: #70e0a1; background: rgba(112,224,161,.22); color: #70e0a1; }
.action-keys { display: flex; flex-wrap: wrap; justify-content: end; align-content: end; gap: .4rem; }
.touch-controls button { opacity: .42; border-color: rgba(255,255,255,.35); background: rgba(20,25,32,.5); box-shadow: inset 0 0 0 0 transparent; backdrop-filter: blur(2px); pointer-events: auto; touch-action: none; transition: border-color .08s ease, box-shadow .08s ease; }
.touch-controls button:active,
.touch-controls button[data-active="true"] { border-color: #70e0a1; background: rgba(20,25,32,.5); box-shadow: inset 0 0 0 2px rgba(112,224,161,.9), 0 0 0 1px rgba(112,224,161,.4); }
.touch-controls { transition: opacity .15s ease; }
body[data-input-mode="physical"] .touch-controls { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-control-editing="true"] .touch-controls { visibility: visible; opacity: 1; }
body[data-control-editing="true"] .virtual-control { opacity: 1; }
.screen-shell[data-virtual-controls-visible="false"] .touch-controls { visibility: hidden; opacity: 0; pointer-events: none; }
body[data-control-editing="true"] .screen-shell[data-virtual-controls-visible="false"] .touch-controls { visibility: visible; opacity: 1; pointer-events: auto; }
.game-view-fallback { position: fixed; z-index: 9999; inset: 0; width: 100vw; height: 100dvh; max-height: none; aspect-ratio: auto; border: 0; }
.screen-shell:fullscreen { position: fixed; z-index: 9999; inset: 0; width: 100vw; height: 100dvh; max-height: none; aspect-ratio: auto; border: 0; }
.screen-shell:fullscreen #dos, .screen-shell:fullscreen #dos * { cursor: none !important; }
.screen-shell:fullscreen[data-tools-open="true"] #dos,
.screen-shell:fullscreen[data-tools-open="true"] #dos * { cursor: default !important; }
.screen-shell:fullscreen #dos, .game-view-fallback #dos { width: 100%; height: 100%; }
.screen-shell:fullscreen #dos canvas, .game-view-fallback #dos canvas {
  position: absolute !important;
  left: var(--game-canvas-left, 50%) !important;
  top: var(--game-canvas-top, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  max-width: none;
  max-height: none;
}