/* A handheld case reserves real space for the screen and every control. */
.handheld-console, .handheld-runner {
  --case: #d0d0cc;
  --case-edge: #aaa9a6;
  --case-ink: #44414d;
  --bezel: #77757f;
  --rubber: #27262c;
  --button: #8b305c;
  --button-edge: #541b38;
  --button-ink: #fff4fa;
  --pad-size: 112px;
  color: var(--case-ink);
}
.arcade-shell .handheld-console {
  position: relative;
  margin: 22px 0;
  padding: 12px 14px 22px;
  border: 1px solid var(--case-edge);
  border-radius: 15px 15px 48px 15px;
  background: var(--case);
  box-shadow: inset 2px 3px 0 #ffffff80, inset -2px -4px 0 #00000016, 0 12px 24px #20202418;
  overflow: hidden;
  isolation: isolate;
}
.handheld-console::after {
  content: '';
  display: block;
  width: 56px;
  height: 14px;
  margin: 8px 10px -10px auto;
  background: repeating-linear-gradient(110deg, transparent 0 6px, #78767d 7px 9px, transparent 10px 13px);
  transform: rotate(-8deg);
  pointer-events: none;
}
.handheld-console :is(.toolbar, .tab-strip, .panel-bar, .stage-tools, .game-status, .status) {
  color: var(--case-ink);
  background: transparent;
  border: 0;
  font-size: 11px;
}
.handheld-console :is(.toolbar, .tab-strip) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 10px;
  min-height: 40px;
}
.handheld-console :is(.toolbar, .tab-strip) > p {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}
.handheld-console :is(.toolbar, .tab-strip) > div { display: flex; gap: 5px; flex-wrap: wrap; }
.handheld-console .window-actions { padding: 0; }
.handheld-console .tab-title {
  background: transparent;
  color: var(--case-ink);
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: 0 8px 0 0;
  font-size: 12px;
  font-style: italic;
  font-weight: 800;
}
.handheld-console .tab-dot { background: #95ad63; box-shadow: 0 0 0 2px #46553d25; }
.handheld-console :is(.screen, .console-screen) {
  position: relative;
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101310;
  color: #f4f4e9;
  border: 10px solid var(--bezel);
  border-top-width: 14px;
  border-bottom-width: 18px;
  border-radius: 9px 9px 26px 9px;
  box-shadow: inset 0 0 0 2px #1d2029;
}
.handheld-console :is(.screen, .console-screen) :is(canvas, iframe) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  touch-action: none;
}
.handheld-console .screen > canvas { position: absolute; inset: 0; }
.handheld-console :is(.welcome, .landing, .placeholder) { max-height: 100%; overflow: auto; }
.handheld-console .game-status { padding: 10px 2px 0; min-height: 32px; }
.handheld-console .game-status p { font-size: 11px; line-height: 1.3; }
.handheld-console :is(.toolbar, .tab-strip, .game-status, .stage-tools) button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #77747b;
  border-radius: 7px;
  background: #c0bfbd;
  box-shadow: inset 0 1px 0 #ffffff70, 0 2px 0 #919094;
  color: var(--case-ink);
  font-size: 11px;
  font-weight: 650;
}
.handheld-console :is(.touch-controls, .touch, .controls, .strategy-controls, .menu-controls),
.handheld-runner .touch {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  background: transparent;
  color: var(--case-ink);
  border: 0;
  pointer-events: auto;
}
.handheld-console :is(.touch-controls, .touch), .handheld-runner .touch {
  display: grid;
  grid-template-columns: var(--pad-size) minmax(48px, 1fr) minmax(100px, 190px);
  align-items: center;
  gap: 12px;
  padding: 18px 4px 8px;
}
.handheld-console.fighter-console .touch-controls { grid-template-columns: var(--pad-size) 1fr; }
.handheld-console .walk-controls { grid-column: 1; display: grid; gap: 8px; }
.handheld-console :is(#walk-pad, .dos-pad), .handheld-runner #walk-pad {
  position: relative;
  inset: auto;
  width: var(--pad-size);
  height: var(--pad-size);
  flex: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--rubber);
  color: #a9a6af;
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
  touch-action: none;
  pointer-events: auto;
}
.handheld-console .touch-pad-keys, .handheld-runner .touch-pad-keys { padding: 0; }
.handheld-console .touch-pad-keys > :is(button, span), .handheld-runner .touch-pad-keys > :is(button, span) {
  color: #a9a6af;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  font-size: 19px;
}
.handheld-console .touch-pad-keys > [data-held], .handheld-runner .touch-pad-keys > [data-held] { background: #55515d; color: white; }
.handheld-console :is(.look-pad, .look, .trackpad), .handheld-runner .look {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  min-height: 94px;
  height: 100%;
  max-width: none;
  padding: 8px;
  align-self: stretch;
  border: 1px solid #a5a1a9;
  border-radius: 12px;
  background: #b9b7bd;
  box-shadow: inset 1px 2px 4px #00000017, 0 1px 0 #ffffff80;
  color: var(--case-ink);
  font-size: 11px;
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}
.handheld-console :is(.attacks, .touch-actions, .actions), .handheld-runner .actions {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  max-width: none;
  width: 100%;
  justify-self: end;
  align-self: center;
  pointer-events: auto;
}
.handheld-console .attacks { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 280px; }
.handheld-console :is(.attacks, .touch-actions, .actions) button, .handheld-runner .actions button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 7px 3px;
  border: 1px solid var(--button-edge);
  border-radius: 50%;
  background: var(--button);
  color: var(--button-ink);
  box-shadow: inset 1px 2px 1px #ffffff35, 0 3px 0 var(--button-edge), 0 4px 0 #00000020;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.handheld-console :is(.attacks, .touch-actions, .actions) button:is(:active, [data-held], .pressed),
.handheld-runner .actions button:is(:active, [data-held], .pressed) {
  background: #ad4579;
  box-shadow: inset 1px 2px 3px #00000030, 0 1px 0 var(--button-edge);
  transform: translateY(2px);
}
.handheld-console .touch-actions .fire { grid-column: auto; justify-self: stretch; min-width: 0; min-height: 54px; background: var(--button); }
.handheld-console .touch-tools { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: none; }
.handheld-console :is(.touch-tools, .menu-controls, .strafe-controls) button, .handheld-runner .menu-keys button {
  min-width: 40px;
  min-height: 40px;
  padding: 7px 10px;
  background: #88858d;
  border: 1px solid #6b6774;
  border-radius: 14px;
  color: #fff;
  font-size: 10px;
  line-height: 1.15;
  box-shadow: inset 1px 1px 0 #ffffff35, 0 2px 0 #67646f;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.handheld-console .menu-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 2px 4px; }
.handheld-console .touch-text, .handheld-console .console-options { grid-column: 1 / -1; flex-basis: 100%; width: 100%; padding: 6px 0 0; border: 0; }
.handheld-console .console-options > summary { min-height: 40px; padding: 10px; cursor: pointer; font-size: 11px; }
.handheld-console .console-options > .console-option-body { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px; }
.handheld-console .controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 2px 4px; }
.handheld-console .controls :is(input, button, .restore) { min-height: 42px; font-size: 12px; }
.handheld-console .controls .recipe-guide { font-size: 12px; }
.handheld-console .number-pad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.handheld-console :is(button, input, select):focus-visible, .handheld-runner :is(button, .look):focus-visible { outline: 3px solid #517daa; outline-offset: 3px; }
.handheld-console .strategy-controls { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; padding: 14px 2px 4px; }
.handheld-console .strategy-controls .trackpad { min-height: 110px; }
.handheld-console .strategy-controls .dos-pad { --pad-size: 100px; }
.handheld-console .strategy-controls .mouse-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.handheld-console .strategy-controls .mouse-actions button { flex: 1 1 70px; min-height: 44px; padding: 8px; font-size: 11px; }
.handheld-console :is(.welcome, .landing) :is(h2, p) { color: #e7ebdc; }
.handheld-console .welcome { padding: 18px; }
.handheld-console .welcome::before { width: 48px; height: 48px; background-size: 42px; margin-bottom: 4px; }
.handheld-console .welcome h2 { margin: 12px 0 8px; font-size: clamp(20px, 3vw, 36px); }
.handheld-console .welcome p { font-size: 13px; }
.handheld-console .welcome .download-note { font-size: 10px; }
/* Quake's fullscreen boundary contains its screen and controls together. */
.handheld-console .stage { display: flex; flex-direction: column; min-height: 0; }
.handheld-console .console-screen .runtime { position: absolute; inset: 0; min-height: 0; height: 100%; }
.handheld-console .console-screen .runtime iframe { min-height: 0; }
.handheld-console .console-screen .landing { position: absolute; inset: 0; padding: 20px; }
.handheld-console .console-screen .pause-cover { position: absolute; inset: 0; }
.handheld-console .stage-tools { position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 10px 0 0; }
.handheld-console .panel-bar { padding: 2px 0 12px; }
.handheld-console .status { margin: 0; padding: 10px 0 0; }
.handheld-console .stage .touch-controls { grid-template-columns: var(--pad-size) 1fr; }
.handheld-console .stage .touch-actions { max-width: 250px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Fixed heights use the current visible viewport, including mobile browser chrome. */
.arcade-shell .handheld-console:is(.expanded, :fullscreen), .handheld-console .stage:is(.expanded, :fullscreen) {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  background: var(--case);
  color: var(--case-ink);
}
.handheld-console:is(.expanded, :fullscreen)::after { display: none; }
.handheld-console:is(.expanded, :fullscreen) :is(.screen, .console-screen), .handheld-console .stage:is(.expanded, :fullscreen) .console-screen {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}
.handheld-console:is(.expanded, :fullscreen) :is(.toolbar, .tab-strip, #controls, .touch-controls, .touch, .game-status),
.handheld-console .stage:is(.expanded, :fullscreen) :is(.touch-controls, .stage-tools) { flex-shrink: 0; }
.handheld-console:is(.expanded, :fullscreen) .controls { max-height: 38dvh; overflow: auto; }
.handheld-console:is(.expanded, :fullscreen) .console-options[open] { max-height: 28dvh; overflow: auto; }
.handheld-console:is(.expanded, :fullscreen) .toolbar p, .handheld-console:is(.expanded, :fullscreen) .game-status p { display: none; }
.handheld-console.q3-console .screen { aspect-ratio: auto; height: min(76dvh, 760px); min-height: 420px; }
.handheld-console.q3-console:is(.expanded, :fullscreen) .screen { min-height: 0; }
.handheld-runner { background: var(--case); font-family: 'Trebuchet MS', sans-serif; }
.handheld-runner canvas { min-height: 0; }
.handheld-runner .touch { flex-shrink: 0; display: none; padding: 12px 8px 8px; }
.handheld-runner .actions { max-width: 190px; }
.handheld-runner .touch details { grid-column: 1 / -1; justify-self: center; max-width: none; }
.handheld-runner .touch summary { padding: 7px 16px; }
.handheld-runner .menu-keys { background: var(--case); color: var(--case-ink); }
@media (any-pointer: coarse), (max-width: 900px) { .handheld-runner .touch { display: grid; } }
@media (max-width: 600px) {
  .arcade-shell .handheld-console { --pad-size: 102px; margin-inline: -4px; padding: 10px 9px 18px; border-bottom-right-radius: 36px; }
  .handheld-console :is(.touch-controls, .touch), .handheld-runner .touch { gap: 8px; grid-template-columns: var(--pad-size) minmax(42px, 1fr) minmax(94px, 130px); }
  .handheld-console :is(.attacks, .actions, .touch-actions) { gap: 7px; }
  .handheld-console .attacks { max-width: 210px; }
  .handheld-console :is(.attacks, .actions, .touch-actions) button { font-size: 9px; min-height: 44px; padding-inline: 2px; }
  .handheld-console .touch-actions .fire { min-height: 48px; }
  .handheld-console :is(.screen, .console-screen) { border-width: 8px; border-bottom-width: 14px; }
  .handheld-console .strafe-controls button { min-width: 30px; min-height: 36px; padding: 4px; }
  .handheld-console .touch-tools select { width: 105px; min-height: 40px; font-size: 11px; }
  .handheld-console .toolbar > p { flex-basis: 100%; }
  .handheld-console .toolbar > div { flex-wrap: nowrap; }
  .handheld-console .toolbar button { padding: 6px 9px; }
  .handheld-console .touch-text { flex-wrap: wrap; gap: 5px; }
  .handheld-console .touch-text label { width: 100%; font-size: 11px; }
  .handheld-console .touch-text input { min-width: 0; width: 100px; }
  .handheld-console .save-name { flex-wrap: wrap; }
  .handheld-console .number-pad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .arcade-shell .handheld-console:is(.expanded, :fullscreen), .handheld-console .stage:is(.expanded, :fullscreen) {
    --pad-size: 96px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 150px;
    grid-template-rows: 38px minmax(0, 1fr) auto;
    gap: 7px 10px;
  }
  .handheld-console:is(.expanded, :fullscreen) > :is(.toolbar, .tab-strip, progress), .handheld-console .stage:is(.expanded, :fullscreen) .stage-tools { grid-column: 1 / -1; grid-row: 1; padding: 0; min-height: 0; }
  .handheld-console:is(.expanded, :fullscreen) > .screen, .handheld-console .stage:is(.expanded, :fullscreen) .console-screen { grid-column: 2; grid-row: 2; height: 100%; min-height: 0; border-width: 6px; }
  .handheld-console:is(.expanded, :fullscreen) > #controls:not([hidden]),
  .handheld-console:is(.expanded, :fullscreen) :is(.touch-controls, .touch):not([hidden]),
  .handheld-console .stage:is(.expanded, :fullscreen) .touch-controls:not([hidden]) { display: contents; }
  .handheld-console:is(.expanded, :fullscreen) :is(#walk-pad, .walk-controls),
  .handheld-console .stage:is(.expanded, :fullscreen) #walk-pad { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
  .handheld-console:is(.expanded, :fullscreen) .walk-controls #walk-pad { width: var(--pad-size); }
  .handheld-console:is(.expanded, :fullscreen) :is(.attacks, .actions, .touch-actions),
  .handheld-console .stage:is(.expanded, :fullscreen) .touch-actions { grid-column: 3; grid-row: 2; align-self: end; margin-bottom: 4px; }
  .handheld-console:is(.expanded, :fullscreen) :is(.look, .look-pad) { grid-column: 3; grid-row: 2; align-self: start; height: 68px; min-height: 68px; margin: 0 0 8px; }
  .handheld-console:is(.expanded, :fullscreen) .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .handheld-console:is(.expanded, :fullscreen) :is(.attacks, .actions, .touch-actions) button { min-height: 40px; font-size: 9px; }
  .handheld-console:is(.expanded, :fullscreen) :is(.touch-tools, .game-status, .menu-controls, .console-options) { grid-column: 1 / -1; grid-row: 3; align-self: end; padding: 0; margin: 0; }
  .handheld-console:is(.expanded, :fullscreen) .game-status { justify-self: start; }
  .handheld-console:is(.expanded, :fullscreen) .touch-tools { justify-content: flex-end; padding-left: 110px; }
  .handheld-console:is(.expanded, :fullscreen) .touch-text { display: none; }
  .handheld-console:is(.expanded, :fullscreen) .menu-controls { justify-content: center; }
  .handheld-console:is(.expanded, :fullscreen) .menu-controls button { min-height: 34px; padding: 6px 8px; }
  .handheld-console:is(.expanded, :fullscreen) .toolbar > p { display: none; }
  .handheld-console:is(.expanded, :fullscreen):not(:has(:is(.touch-controls, .touch, #controls):not([hidden]))) > .screen { grid-column: 1 / -1; }
  .handheld-console.adventure-console:is(.expanded, :fullscreen) { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: 38px minmax(0, 1fr); }
  .handheld-console.adventure-console:is(.expanded, :fullscreen) > .screen { grid-column: 1; }
  .handheld-console.adventure-console:is(.expanded, :fullscreen) > #controls:not([hidden]) { display: flex; grid-column: 2; grid-row: 2; max-height: 100%; overflow: auto; padding: 0; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: 38px minmax(0, 1fr); }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) > .screen { grid-column: 1; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) > #controls:not([hidden]) { grid-column: 2; grid-row: 2; display: block; overflow: auto; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .strategy-controls { grid-template-columns: 1fr 78px; gap: 6px; padding: 0; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .strategy-controls .dos-pad { --pad-size: 78px; grid-column: auto; grid-row: auto; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .trackpad { min-height: 80px; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .menu-controls { position: static; }
  .handheld-console.q3-console:is(.expanded, :fullscreen) { display: flex; }
  .handheld-console.q3-console:is(.expanded, :fullscreen) > .screen { flex: 1; }
  .handheld-runner { display: grid; grid-template-columns: 104px minmax(0, 1fr) 142px; grid-template-rows: minmax(0, 1fr) 32px; gap: 6px; padding: 6px; --pad-size: 90px; }
  .handheld-runner canvas { grid-column: 2; grid-row: 1 / -1; width: 100%; height: 100%; }
  .handheld-runner .touch { display: contents; }
  .handheld-runner #walk-pad { grid-column: 1; grid-row: 1; align-self: center; }
  .handheld-runner .look { grid-column: 3; grid-row: 1; align-self: start; min-height: 68px; height: 68px; }
  .handheld-runner .actions { grid-column: 3; grid-row: 1; align-self: end; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .handheld-runner .actions button { min-height: 38px; font-size: 9px; }
  .handheld-runner .touch details { grid-column: 1; grid-row: 2; }
}
html[data-theme='dark'] .handheld-console {
  --case: #34343f;
  --case-edge: #5d5b6b;
  --case-ink: #e4dfef;
  --bezel: #545260;
  --rubber: #1d1b24;
}
html[data-theme='dark'] .handheld-console :is(.toolbar, .tab-strip, .arcade-controls, .game-status) { background: transparent; color: var(--case-ink); }
html[data-theme='dark'] .handheld-console :is(.actions, .attacks, .touch-actions) button { background: var(--button); color: var(--button-ink); border-color: var(--button-edge); }
html[data-theme='dark'] .handheld-console :is(.look, .look-pad, .trackpad) { background: #4a4756; color: var(--case-ink); }
@media (prefers-reduced-motion: reduce) { .handheld-console *, .handheld-runner * { transition: none !important; } }
.handheld-console :is(.touch-actions, .actions), .handheld-runner .actions { grid-column: 3; }
.handheld-console .stage .touch-actions { grid-column: 2; }
.handheld-console :is(.attacks, .touch-actions, .actions) button, .handheld-runner .actions button { aspect-ratio: 1; }
@media (orientation: landscape) and (max-height: 600px) {
  .handheld-console.fighter-console:is(.expanded, :fullscreen) .dos-pad { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
  .handheld-console:is(.expanded, :fullscreen) .menu-controls button { min-height: 40px; }
}
.handheld-console .toolbar::before { content: 'Emil / pocket arcade'; flex: 1 1 auto; color: #6c456c; font-weight: 800; font-style: italic; font-size: 12px; white-space: nowrap; }
.handheld-console .toolbar > p { flex: 1 1 100%; order: 2; }
.handheld-console:is(.expanded, :fullscreen) .toolbar::before { font-size: 11px; }
html[data-theme='dark'] .handheld-console .toolbar::before { color: #d3b6dc; }
/* The full square remains touchable, including diagonal starting contacts. */
.handheld-console :is(#walk-pad, .dos-pad), .handheld-runner #walk-pad { clip-path: none; background: transparent; }
.handheld-console :is(#walk-pad, .dos-pad)::before, .handheld-runner #walk-pad::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rubber);
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
  pointer-events: none;
}
.handheld-console .touch-pad-keys > button[data-touch-direction*=' '], .handheld-runner .touch-pad-keys > button[data-touch-direction*=' '] { color: transparent; background: transparent; }
@media (orientation: landscape) and (max-height: 600px) {
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) .touch-controls { position: static; padding: 0; }
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) .touch-tools { width: 100%; max-width: none; min-width: 0; height: auto; }
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) .touch-actions { width: 100%; max-width: none; }
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) .look-pad { width: 100%; max-width: none; }
}
.handheld-console:is(.expanded, :fullscreen) .console-options[open] .touch-text { display: flex; }
@media (orientation: landscape) and (max-height: 360px) {
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) :is(.look, .look-pad), .handheld-runner .look { height: 58px; min-height: 58px; }
  .arcade-shell .handheld-console:is(.expanded, :fullscreen) :is(.actions, .attacks, .touch-actions) button, .handheld-runner .actions button { width: 44px; height: 44px; min-height: 44px; justify-self: center; aspect-ratio: 1; padding: 4px 2px; }
}
.handheld-console #walk-pad .touch-pad-keys { padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.handheld-console #walk-pad button[data-touch-direction*=' '] { color: transparent; background: transparent; }
.handheld-console .strategy-options .console-option-body { align-items: end; }
.handheld-console .strategy-options button { min-height: 40px; padding: 8px 10px; font-size: 11px; }
@media (orientation: landscape) and (max-height: 600px) {
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .strategy-options { position: static; max-height: none; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .strategy-options > summary { min-height: 34px; padding: 8px; }
  .handheld-console.strategy-console:is(.expanded, :fullscreen) .strategy-controls .trackpad { height: 80px; }
}
.handheld-console .adventure-keys { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding: 5px 0; background: var(--case); }
.handheld-console .adventure-keys button { flex: 1 1 auto; min-height: 42px; padding: 8px; background: #88858d; color: #fff; border-color: #6b6774; border-radius: 14px; font-size: 11px; box-shadow: 0 2px 0 #67646f; }
/* Finished faceplate, recessed bezel and thumb controls share one material system. */
.arcade-shell .handheld-console:not(.expanded):not(:fullscreen) { --case: #d8d4dc; --case-edge: #aaa3b0; --case-ink: #49414f; --bezel: #4c4b55; --rubber: #303039; --button: #8e456f; --button-edge: #61304d; padding: 19px 20px 24px; border-radius: 24px 24px 54px 24px; border-bottom-width: 6px; background: linear-gradient(125deg, #e5e2e8, #ccc6d4); box-shadow: inset 0 2px 0 #fff9, inset -2px 0 0 #a79dae33, 0 17px 30px -22px #30293888; }
.handheld-console :is(.toolbar, .tab-strip) { gap: 10px; padding-bottom: 13px; }
.handheld-console :is(.toolbar, .tab-strip) > p { font-size: 12px; line-height: 1.4; }
.handheld-console :is(.toolbar, .tab-strip) :is(.tab-title, strong) { font-size: 14px; font-style: italic; color: #63546f; }
.handheld-console :is(.screen, .console-screen) { border-radius: 10px 10px 26px 10px; border-color: #4e4c57; box-shadow: inset 0 0 0 2px #20212b, 0 1px 0 #fff9; }
.handheld-console :is(.toolbar, .tab-strip, .game-status, .stage-tools) button { min-height: 42px; padding: 8px 13px; border-radius: 16px; background: #bdb5c5; border-color: #a49aaf; box-shadow: inset 0 1px 0 #eee8f3, 0 2px 0 #9e94a9; font-size: 11px; color: #493e52; }
.handheld-console :is(.attacks, .touch-actions, .actions) button { background: radial-gradient(ellipse at 35% 15%, #ad648d, #864267 85%); border-color: #61304d; box-shadow: inset 1px 2px 0 #dca4c140, 0 4px 0 #61304d, 0 5px 0 #0002; min-height: 48px; }
.handheld-console :is(.look-pad, .look, .trackpad) { border-style: solid; background: repeating-linear-gradient(0deg, #bbb2c3 0 2px, #b9b0c1 2px 4px); border-color: #a69caf; border-radius: 13px; box-shadow: inset 0 2px 5px #5d536330, 0 1px 0 #f7f1fc; }
.handheld-console::after { height: 19px; width: 65px; margin-top: 15px; opacity: .65; }
@media (max-width: 600px) {
  .arcade-shell .handheld-console:not(.expanded):not(:fullscreen) { padding: 13px 10px 19px; border-radius: 19px 19px 42px 19px; }
  .handheld-console :is(.toolbar, .tab-strip, .stage-tools) button { min-height: 44px; padding-inline: 10px; font-size: 10px; }
}

.arcade-frame[data-game] { --game-cover: none; }
.arcade-frame[data-game="doom"] { --game-cover: url("/assets/arcade-covers/doom.png"); }
.arcade-frame[data-game="doom3"] { --game-cover: url("/assets/arcade-covers/doom3.jpg"); }
.arcade-frame[data-game="doom3-bfg"] { --game-cover: url("/assets/arcade-covers/doom3.jpg"); }
.arcade-frame[data-game="quake"] { --game-cover: url("/assets/arcade-covers/quake.png"); }
.arcade-frame[data-game="quake2"] { --game-cover: url("/assets/arcade-covers/quake2.jpg"); }
.arcade-frame[data-game="quake3"] { --game-cover: url("/assets/arcade-covers/quake3.jpg"); }
.arcade-frame[data-game="monkey-island"] { --game-cover: url("/assets/arcade-covers/monkey-island.png"); }
.arcade-frame[data-game="monkey-island-2"] { --game-cover: url("/assets/arcade-covers/monkey-island-2.jpg"); }
.arcade-frame[data-game="mortal-kombat"] { --game-cover: url("/assets/arcade-covers/mortal-kombat.png"); }
.arcade-frame[data-game="mortal-kombat-2"] { --game-cover: url("/assets/arcade-covers/mortal-kombat-2.jpg"); }
.arcade-frame[data-game="mortal-kombat-3"] { --game-cover: url("/assets/arcade-covers/mortal-kombat-3.png"); }
.arcade-frame[data-game="mortal-kombat-trilogy"] { --game-cover: url("/assets/arcade-covers/mortal-kombat-trilogy.png"); }
.arcade-frame[data-game="street-fighter"] { --game-cover: url("/assets/arcade-covers/street-fighter.jpg"); }
.arcade-frame[data-game="street-fighter-2"] { --game-cover: url("/assets/arcade-covers/street-fighter-2.png"); }
.arcade-frame[data-game="super-street-fighter-2"] { --game-cover: url("/assets/arcade-covers/super-street-fighter-2.png"); }
.arcade-frame[data-game="super-street-fighter-2-turbo"] { --game-cover: url("/assets/arcade-covers/super-street-fighter-2-turbo.gif"); }
.arcade-frame[data-game="settlers"] { --game-cover: url("/assets/arcade-covers/settlers.jpg"); }
.arcade-frame[data-game="settlers-2"] { --game-cover: url("/assets/arcade-covers/settlers-2.jpg"); }
.arcade-frame[data-game] .screen:has(> .arcade-idle:not([hidden])), .arcade-frame[data-game] .screen:has(> #empty:not([hidden])) { background-image: linear-gradient(0deg, #111715f5, #11171570), var(--game-cover); background-size: cover; background-position: center; }
.arcade-shell .arcade-frame[data-game] .welcome { background: transparent; }
.arcade-shell .arcade-frame[data-game] .arcade-idle::before { display: none; }
.arcade-shell .arcade-frame[data-game] .welcome h2 { text-shadow: 0 2px 10px #111a; }
.arcade-frame[data-game] #empty { padding: 25px; text-shadow: 0 2px 10px #111a; }
.control-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.arcade-shell :is(.return, .page-header a, nav a) .control-icon { width: 15px; height: 15px; margin-right: 4px; }
.arcade-shell .loading-mark:empty { display: block; width: 24px; height: 24px; margin: 0 auto 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
html[data-theme='dark'] .arcade-shell .handheld-console:not(.expanded):not(:fullscreen) { --case: #393641; --case-edge: #625b70; --case-ink: #e4dfef; background: linear-gradient(125deg, #4b4556, #35313e); border-color: #655c73; }
/* Engine canvases must not paint over the illustrated idle view before launch. */
.arcade-shell .handheld-console [hidden] { display: none !important; }
.arcade-shell .arcade-frame[data-game] .arcade-idle { color: #f5f1e6; }