@font-face { font-family: "Nimbus Sans Narrow"; src: url("./assets/fonts/NimbusSansNarrow-Regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Nimbus Sans Narrow"; src: url("./assets/fonts/NimbusSansNarrow-Bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }
:root { color-scheme: dark; font-family: "Nimbus Sans Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ededeb; background: #000; font-synthesis: none; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
.site-header { padding: calc(32px + var(--safe-top)) calc(20px + var(--safe-right)) 0 calc(20px + var(--safe-left)); display: flex; justify-content: center; }
.logo { position: relative; width: 200px; height: 100px; overflow: hidden; }
.logo img { position: absolute; width: 320px; height: 288px; max-width: none; left: -60px; top: -94px; image-rendering: pixelated; }
.site-footer { flex-shrink: 0; padding: 0 calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); color: #999; font-size: 14px; line-height: 1.5; text-align: center; }
[hidden] { display: none !important; }
main { flex: 1; padding: 32px calc(20px + var(--safe-right)) 32px calc(20px + var(--safe-left)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); gap: 12px; }
.choices button { font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid #303030; background: #101010; border-radius: 8px; padding: 22px 24px 18px; font-size: 16px; text-align: center; min-width: 148px; transition: border-color .15s, background .15s; }
button img { display: block; width: 64px; height: 104px; object-fit: contain; margin: 0 auto 18px; }
body:has(#screen:not([hidden])) main { position: relative; padding: calc(72px + var(--safe-top)) calc(20px + var(--safe-right)) calc(72px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
body:has(#screen:not([hidden])) main:has(.choices[hidden]) { padding: calc(56px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
body:has(#screen:not([hidden])) .choices { position: absolute; top: calc(12px + var(--safe-top)); width: min(calc(100% - 40px - var(--safe-left) - var(--safe-right)), 240px); gap: 8px; }
body:has(#screen:not([hidden])) .choices button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; font-size: 0; }
body:has(#screen:not([hidden])) .choices button img { width: 16px; height: 26px; margin: 0; }
body:has(#screen:not([hidden])) .choices button span { margin: 0; }
body:has(#screen:not([hidden])) #screen { position: absolute; }
.choices button span { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: #aaa; letter-spacing: 1px; }
button:hover { border-color: #666; }
button[aria-pressed="true"] { background: #242424; border-color: #aaa; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, canvas:focus-visible { outline: 3px solid #ccc; outline-offset: 5px; }
#screen { position: relative; width: min(100%, 480px); aspect-ratio: 10 / 9; background: #101010; outline: 1px solid #555; outline-offset: 4px; }
#game-area { display: contents; }
canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; }
#screen-toolbar { position: absolute; top: -48px; right: -5px; display: flex; align-items: center; gap: 10px; height: 40px; z-index: 3; }
#mode-switch { display: flex; height: 40px; border: 1px solid #303030; }
#mode-switch button { min-width: 44px; padding: 8px 12px; border: 0; border-radius: 0; background: #000; color: #999; font-size: 14px; white-space: nowrap; }
#mode-switch button + button { border-left: 1px solid #303030; }
#mode-switch button:hover { color: #ededeb; }
#mode-switch button[aria-pressed="true"] { background: #242424; color: #ededeb; font-weight: 700; }
#fullscreen-toggle { display: grid; place-items: center; width: 40px; height: 40px; min-width: 0; padding: 8px; border-radius: 0; background: #000; color: #aaa; }
#fullscreen-toggle:hover { color: #ededeb; }
#fullscreen-toggle svg { width: 22px; height: 22px; }
#fullscreen-toggle .fullscreen-collapse { display: none; }
main:fullscreen { width: 100%; height: 100%; flex: none; background: #000; }
main:fullscreen #fullscreen-toggle .fullscreen-expand { display: none; }
main:fullscreen #fullscreen-toggle .fullscreen-collapse { display: block; }
#keyboard-controls { position: absolute; bottom: calc(20px + var(--safe-bottom)); left: calc(20px + var(--safe-left)); right: calc(20px + var(--safe-right)); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; font-size: 15px; line-height: 1.5; color: #aaa; }
#keyboard-controls span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
kbd { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; font: inherit; font-weight: 700; line-height: 1; color: #ddd; border: 1px solid #303030; border-radius: 0; padding: 4px 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#mode-change-dialog { inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); width: min(360px, calc(100% - 40px - var(--safe-left) - var(--safe-right))); max-height: calc(100% - 40px - var(--safe-top) - var(--safe-bottom)); padding: 24px; border: 1px solid #555; background: #101010; color: #ededeb; font: inherit; }
#mode-change-dialog::backdrop { background: #000b; }
#mode-change-dialog h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.25; }
#mode-change-dialog p { margin: 0 0 20px; color: #aaa; font-size: 16px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; }
#mode-change-dialog button { min-width: 0; padding: 8px 14px; border-radius: 0; font-size: 15px; }
#touch-controls { display: none; width: 100%; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#quickshot-zone { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #303030; background: #000; pointer-events: auto; }
#quickshot-actions { display: grid; grid-template-rows: 44px minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; }
#touch-system { grid-row: 1; pointer-events: auto; }
#touch-fire { grid-row: 2; pointer-events: auto; }
#touch-controls .touch-button { min-width: 0; padding: 0; border: 1px solid #303030; font-size: 18px; font-weight: 700; transition: none; }
#touch-controls .touch-button:hover { border-color: #666; }
#touch-controls .touch-button[aria-pressed="true"] { border-color: #aaa; }
#touch-system .touch-button { font-size: 13px; }
#touch-controls .touch-button:focus-visible { outline-offset: -4px; }
#overlay { position: absolute; inset: 0; display: grid; place-content: center; background: #101010; color: #ddd; text-align: center; padding: 24px; font-size: 14px; line-height: 1.5; }
.loader { width: 24px; height: 24px; border: 2px solid #ffffff30; border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body:has(#screen:not([hidden])):has(.choices[hidden]) { min-height: 100dvh; }
  body:has(#screen:not([hidden])):has(.choices[hidden]) .site-header,
  body:has(#screen:not([hidden])):has(.choices[hidden]) .site-footer,
  body:has(#screen:not([hidden])):has(.choices[hidden]) #keyboard-controls { display: none; }
  body:has(#screen:not([hidden])):has(.choices[hidden]) #touch-controls {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    flex: 0 0 clamp(128px, 28dvh, 240px);
  }
  body:has(#screen:not([hidden])) main:has(.choices[hidden]) {
    padding: calc(56px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
    gap: 16px;
  }
  body:has(#screen:not([hidden])):has(.choices[hidden]) #game-area {
    display: block; position: relative; flex: 1; width: 100%; min-height: 0; min-width: 0;
  }
  #screen-toolbar { position: fixed; top: calc(8px + var(--safe-top)); right: calc(8px + var(--safe-right)); }
  @media (orientation: landscape) {
    body:has(#screen:not([hidden])) main:has(.choices[hidden]) {
      --touch-side-width: clamp(104px, 20vw, 176px);
      --touch-button-size: calc((var(--touch-side-width) - 8px) / 2 * 1.33);
      --touch-actions-width: calc(2 * var(--touch-button-size) + 8px);
      display: grid; grid-template-columns: calc(2 * var(--touch-side-width) - var(--touch-actions-width)) minmax(0, 1fr) var(--touch-actions-width);
      grid-template-rows: minmax(0, 1fr); align-items: stretch;
    }
    body:has(#screen:not([hidden])):has(.choices[hidden]) #game-area { grid-column: 2; grid-row: 1; height: 100%; }
    body:has(#screen:not([hidden])):has(.choices[hidden]) #touch-controls { display: contents; }
    #quickshot-zone {
      position: absolute; left: calc(8px + var(--safe-left)); bottom: calc(8px + var(--safe-bottom));
      width: var(--landscape-joystick-width, clamp(104px, 20vw, 176px));
      height: calc(50% - 8px - var(--safe-bottom));
    }
    #quickshot-actions { grid-column: 3; grid-row: 1; grid-template-rows: 44px auto; align-content: end; gap: 24px; }
    #touch-fire { height: var(--touch-button-size); }
  }
}
@media (max-width: 380px) { button { padding: 18px 12px; min-width: 132px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; }.loader { animation-duration: 2s; } }