html { color-scheme: dark; }
button { white-space: normal; overflow-wrap: anywhere; }
.local-toolbar { position: fixed; right: max(16px,env(safe-area-inset-right,0px)); top: max(16px,env(safe-area-inset-top,0px)); z-index: 99999; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 4px; border: 1px solid #42433d; border-radius: 12px; background: #0e100f; color: #fffce1; font: 14px ui-sans-serif,system-ui,sans-serif; direction: ltr; color-scheme: dark; }
.local-home { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #fffce1; text-decoration: none; white-space: nowrap; }
.local-language { display: flex; align-items: center; gap: 12px; padding-inline-start: 12px; }
.local-language span { max-width: 100px; color: #c4c4b4; font-size: 12px; }
.local-language select { width: 160px; max-width: 45vw; min-height: 44px; padding: 8px 12px; color: #fffce1; background: #191919; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.local-home:hover, .local-language select:hover { background: #292b26; }
.local-toolbar :is(a,select,button):focus-visible, #subtitle:focus-visible { outline: 2px solid #0ae448; outline-offset: 3px; }
.local-home:active, .local-toolbar-toggle:active { transform: scale(.98); }
#subtitle { min-height: 44px; padding: 8px 16px; border: 1px solid #42433d; border-radius: 8px; background: #191919; color: #fffce1; font: 14px ui-sans-serif,system-ui,sans-serif; }
#subtitle:hover { border-color: #0ae448; }
canvas, svg { direction: ltr; }
.catalog-language-row { display: flex; justify-content: flex-end; margin-bottom: 16px; direction: ltr; }
.local-toolbar.catalog-toolbar { position: relative; top: auto; right: auto; bottom: auto; max-width: 100%; z-index: 2; }
.local-toolbar-toggle, .mobile-game-controls { display: none; }
@media (max-width: 480px) { .local-language span { display: none; } .local-toolbar { max-width: calc(100vw - 16px); } }
@media (any-pointer: coarse) {
  .local-toolbar { right: max(8px,env(safe-area-inset-right,0px)); top: max(8px,env(safe-area-inset-top,0px)); padding: 0; min-width: 44px; min-height: 44px; border-radius: 12px; }
  .local-toolbar-toggle { display: block; box-sizing: border-box; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px; max-height: 44px; padding: 0; border: 0; border-radius: 12px; background: #0e100f; color: #fffce1; font: 14px ui-sans-serif,system-ui,sans-serif; touch-action: manipulation; }
  .local-toolbar:not(.expanded) .local-home, .local-toolbar:not(.expanded) .local-language { display: none; }
  .local-toolbar.expanded { padding: 4px; }
  .local-toolbar .local-home, .local-toolbar select { min-height: 44px; box-sizing: border-box; }
  input[type=text], input[type=number], textarea { font-size: 16px !important; }
  input[type=range] { min-height: 32px; }
  #menuBtn, [data-game="phone-flipper"] #reset { min-width: 44px; min-height: 44px; }
  .mobile-game-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; direction: ltr; }
  .mobile-game-controls button { min-height: 48px; border: 1px solid #7784a7; border-radius: 8px; color: #fff; background: #19243b; font: 18px system-ui; touch-action: none; user-select: none; }
  .mobile-game-controls button.pressed { background: #405584; }
  .mobile-breakout #cv { max-height: calc(100dvh - 140px); width: auto; max-width: 100%; }
  .mobile-breakout #wrap { max-width: calc(100vw - 24px); }
  [data-game="claw-draw-ufo"] .ov,
  [data-game="othellis"] .overlay,
  [data-game="pattern-hacker"] #help,
  [data-game="prefecture-derby"] #intro,
  [data-game="prefecture-derby"] #creditBox,
  [data-game="rakugaki-fighter"] #drawScr,
  [data-game="time-schedule-simulator"] #select,
  [data-game="time-schedule-simulator"] #result,
  [data-game="no-hole-in"] #over {
    box-sizing: border-box; overflow-y: auto; max-height: 100dvh;
    justify-content: safe center; align-items: safe center;
  }
  [data-game="claw-draw-ufo"] .ov > *, [data-game="othellis"] .overlay > *,
  [data-game="rakugaki-fighter"] #drawScr > *, [data-game="time-schedule-simulator"] #select > * { flex-shrink: 0; }
  [data-game="rakugaki-fighter"] .row { width: min(100%,320px); }
  [data-game="claw-draw-ufo"] #bDrop { min-width: 76px; font-size: 14px; line-height: 1.25; }
}