.game-player-frame { display: block; width: 100%; height: 100%; border: 0; }
.game-player-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding: .75rem; }
.game-player-control { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; color: #374151; }
.game-player-control label { flex-shrink: 0; }
.game-player-toolbar select { min-height: 44px; max-width: 100%; border: 1px solid #d1d5db; border-radius: .375rem; background: white; padding: .5rem; font: inherit; }
.game-player-hint { margin: 0; padding: 0 .75rem; text-align: center; color: #6b7280; font-size: .75rem; }
#game-tabs { flex-wrap: wrap; }
#game-tabs .tab-btn { min-height: 44px; }
.game-player-control[hidden] { display: none; }
.player-label-mobile { display: none; }
@media (max-width: 767px) {
  .game-player-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding-inline: 8px; }
  .game-player-control { gap: 6px; }
  .game-player-control select { min-width: 0; width: 100%; min-height: 36px; padding: 4px 6px; font-size: 14px; }
  .player-label-desktop { display: none; }
  .player-label-mobile { display: inline; }
  .game-player-toolbar:has(.game-player-control:only-of-type) { grid-template-columns: minmax(0, 1fr); }
  .game-player-toolbar:has(#player-mode-control[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.player-runtime { margin: 0; width: 100vw; height: 100dvh; overflow: hidden; background: black; color: white; font: 1rem/1.5 system-ui, sans-serif; }
.player-runtime #game { width: 100%; height: 100%; }
.player-runtime canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
#player-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; background: #000; }
#player-overlay[hidden], #player-action[hidden] { display: none; }
#player-status { margin: 0; }
#player-action { border: 0; border-radius: .5rem; min-height: 44px; padding: .75rem 1.5rem; color: white; background: #7c3aed; font: 600 1rem/1.5 system-ui, sans-serif; cursor: pointer; }
#player-action:disabled { opacity: .6; cursor: wait; }
.touch-gamepad { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: end; padding: .75rem; gap: .5rem; pointer-events: none; user-select: none; -webkit-user-select: none; }
.touch-gamepad button { min-width: 44px; min-height: 44px; border: 1px solid #ffffff66; border-radius: .5rem; background: #262626cc; color: white; font: 600 .875rem system-ui, sans-serif; pointer-events: auto; touch-action: none; }
.touch-gamepad button.pressed { background: #7c3aed; }
.touch-dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 2px; }
.touch-dpad button:first-child { grid-column: 2; }
.touch-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.touch-dpad button:nth-child(3), .touch-dpad button:nth-child(4) { grid-row: 2; }
.touch-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.touch-menu button { font-size: .625rem; padding: .25rem; }
.touch-actions { display: grid; grid-template-columns: repeat(2, 44px); gap: .25rem; }
.touch-actions button { border-radius: 50%; }
.player-runtime:has(.touch-gamepad) #game { height: calc(100% - 160px); }
@media (min-width: 600px) { .touch-actions { grid-template-columns: repeat(3, 44px); } }
@media (max-width: 360px) {
  .touch-gamepad { display: grid; grid-template-columns: 1fr 1fr; }
  .touch-actions { justify-self: end; }
  .touch-menu { grid-column: 1 / -1; grid-row: 2; }
  .player-runtime:has(.touch-gamepad) #game { height: calc(100% - 210px); }
}
@media (orientation: landscape) { .player-runtime:has(.touch-gamepad) #game { height: 100%; } }