* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #000; font-family: 'Courier New', monospace; color: #f5f5f5;
       display: flex; justify-content: center; padding: 8px; }
main { display: contents; }
#nes-frame { width: min(960px, 100%); background: #000; border: 4px solid #8b1a1a;
             outline: 1px solid #daa520; padding: 10px;
             height: calc(100vh - 16px);
             height: calc(100dvh - 16px); overflow-y: auto; }
.screen { display: flex; flex-direction: column; gap: 8px; }
#title-screen, #credits-screen, #minigame-screen { height: 100%; justify-content: center; }
#title-screen { position: relative; isolation: isolate; overflow: hidden; align-items: center; justify-content: center;
                padding: 24px 18px; background: #4a1b06 url('../assets/intro.webp') center / cover no-repeat; }
#title-screen > * { position: relative; z-index: 1; }
#credits-screen { justify-content: center; }
.hidden { display: none !important; }
.title-art { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.title-art img { max-height: 150px; border: 3px solid #daa520;
                 image-rendering: pixelated; background: rgba(8,8,28,0.6); }
.title-logo { font-size: 52px; color: #ffd23f; text-align: center; line-height: 1.05;
              text-shadow: 3px 0 0 #c0392b, -3px 0 0 #c0392b, 0 3px 0 #c0392b,
                           0 -3px 0 #c0392b, 2px 2px 0 #c0392b, 4px 4px 0 #5a1020; }
.subtitle { text-align: center; color: #9ae19d; }
.start-btn { font-family: inherit; font-size: 20px; padding: 12px; background: #6b1a1a;
             color: #fff; border: 3px solid #f5f5dc; cursor: pointer;
             clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px,
                                100% calc(100% - 6px), calc(100% - 6px) 100%,
                                6px 100%, 0 calc(100% - 6px), 0 6px);
             animation: startblink 1.2s steps(1) infinite; }
.start-btn:hover { background: #8b2020; animation: none; }
@keyframes startblink { 50% { opacity: 0.35; } }
.hint-line { text-align: center; color: #888; font-size: 12px; }

body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
              background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px,
                           transparent 1px 3px); }

.hud { display: flex; align-items: center; justify-content: space-between;
       gap: 8px; border: 2px solid #8b1a1a; background: #000; padding: 4px 8px; }
.hud-area { color: #ffd23f; font-weight: bold; font-size: 15px; }
.hud .verb-btn { padding: 3px 10px; font-size: 12px; }

.play-area { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.verbs { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

.verb-btn { font-family: inherit; background: #6b1a1a; color: #fff;
            border: 2px solid #f5f5dc; padding: 6px 12px; cursor: pointer;
            font-size: 13px; text-align: center; white-space: nowrap;
            clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px,
                               100% calc(100% - 5px), calc(100% - 5px) 100%,
                               5px 100%, 0 calc(100% - 5px), 0 5px); }
.verb-btn:hover { background: #8b2020; }
.verb-btn.armed { background: #ffd23f; color: #6b1a1a; border-color: #6b1a1a; }

#scene-frame { background: #000; border: 10px solid #8b1a1a;
               border-image: repeating-linear-gradient(45deg, #8b1a1a 0 6px, #b03a2e 6px 12px) 10;
               box-shadow: inset 0 0 0 2px #daa520, 0 0 0 2px #000;
               position: relative; flex: 1 1 auto; min-width: 0; }
#scene-img { width: 100%; height: auto; max-height: 48vh;
             object-fit: contain; image-rendering: pixelated; display: block; }

.look-panel { position: absolute; top: 8px; right: 8px; left: auto; z-index: 5;
              background: rgba(8, 8, 28, 0.72); border: 2px solid #daa520;
              padding: 6px; max-width: 45%; pointer-events: none;
              display: flex; flex-direction: column; gap: 5px; }
.look-panel img { max-width: 150px; max-height: 140px; align-self: center;
                  image-rendering: pixelated; }
.look-text { color: #fff; font-size: 12px; line-height: 1.3; }

.dialogue-portrait { max-width: 120px; float: left; margin-right: 10px;
                     border: 2px solid #daa520; image-rendering: pixelated; }

.targets { display: flex; flex-wrap: wrap; gap: 6px; }
.target-btn { font-family: inherit; background: #2a3a6b; color: #dfe6ff;
              border: 2px solid #8fa8d8; padding: 5px 10px; cursor: pointer; font-size: 13px;
              clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px,
                                 100% calc(100% - 4px), calc(100% - 4px) 100%,
                                 4px 100%, 0 calc(100% - 4px), 0 4px); }
.target-btn:hover, .target-btn.focused { background: #3a4a8b; }
.target-btn.exit-btn { background: #3a5a2a; border-color: #8fc88f; }
.target-btn.exit-btn.locked { opacity: 0.45; }
.target-btn.exit-btn.locked:hover { opacity: 0.7; }

.inventory { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px;
             border-top: 2px dashed #8b1a1a; padding-top: 6px; }
.item-btn { font-family: inherit; background: #14532d; color: #c8e6c9;
            border: 2px solid #4a8c5f; padding: 4px 8px; cursor: pointer; font-size: 13px; }
.item-btn.selected { outline: 2px solid #ffd23f; }
.item-icon { height: 22px; width: auto; vertical-align: middle; margin-right: 5px;
             image-rendering: pixelated; }

.hint { background: #000; border: 2px solid #e67e22; color: #ffd23f; padding: 8px; font-size: 13px; }

.textbox { background: #000; border-top: 2px solid #8b1a1a; min-height: 48px;
           padding: 8px 6px 2px; display: flex; flex-direction: column; gap: 4px; }
.scene-desc { color: #fff; font-size: 14px; line-height: 1.4; }
.dialogue { min-height: 64px; }
.dialogue-text { color: #fff; white-space: pre-wrap; font-size: 14px; line-height: 1.4; }
.dialogue-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.opt-btn { font-family: inherit; background: #6b1a1a; color: #ffd23f;
           border: 2px solid #ffd23f; padding: 6px; cursor: pointer; text-align: left;
           font-size: 14px; }
.status { color: #9ae19d; font-size: 13px; border-top: 1px dashed #556;
          margin-top: 4px; padding-top: 4px; }

.minigame-panel { background: #000; border: 4px solid #8b1a1a; outline: 1px solid #daa520;
                  padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mg-header { display: flex; align-items: center; gap: 12px; }
.mg-title { color: #ffd23f; font-size: 19px; font-weight: bold; letter-spacing: 1px; }
.mg-stats { color: #fff; font-size: 15px; margin-left: auto; }
.minigame-portrait { height: 72px; border: 2px solid #daa520; image-rendering: pixelated;
                     background: rgba(8,8,28,0.6); }
.mg-msg { color: #c8f2cd; font-size: 14px; border-top: 1px dashed #556; padding-top: 6px; }
.mg-current { font-size: 22px; color: #fff; letter-spacing: 2px; text-align: center;
              border: 2px solid #5555aa; background: #101030; padding: 14px; }
.mg-racks { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rack { font-family: inherit; background: #6b1a1a; color: #fff; border: 2px solid #f5f5dc;
        padding: 10px 16px; cursor: pointer; font-size: 15px; display: flex;
        flex-direction: column; align-items: center; gap: 4px; min-width: 96px;
        clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px,
                           100% calc(100% - 6px), calc(100% - 6px) 100%,
                           6px 100%, 0 calc(100% - 6px), 0 6px); }
.rack:hover { background: #8b2020; }
.rack-fill { color: #ffd23f; font-size: 12px; letter-spacing: 2px; min-height: 14px; }
.mg-slip { font-size: 17px; color: #ffd23f; letter-spacing: 1px; text-align: center;
           border: 2px solid #5555aa; background: #101030; padding: 12px; }
.mg-shelf { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.result-panel { align-items: center; text-align: center; }
.result-portrait { height: 130px; border: 2px solid #daa520; image-rendering: pixelated;
                   background: rgba(8,8,28,0.6); }
.rack-item { font-family: inherit; background: #14532d; color: #c8e6c9;
             border: 2px solid #4a8c5f; padding: 10px 16px; cursor: pointer; font-size: 15px;
             clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px,
                                100% calc(100% - 5px), calc(100% - 5px) 100%,
                                5px 100%, 0 calc(100% - 5px), 0 5px); }
.rack-item:hover { background: #1b6b3a; }

.credit-line { margin: 2px 0; color: #cfcfe8; font-size: 13px; }
.credit-name { color: #ffd23f; font-weight: bold; }
.credits-stage { width: 100%; max-height: 32vh; object-fit: contain;
                 image-rendering: pixelated; display: block; margin-bottom: 4px; }
#credits-screen { gap: 4px; justify-content: center; overflow-y: auto; }
#credits-screen .title-logo { font-size: 30px; }
#credits-screen .credit-line { text-align: center; }
#credits-screen .start-btn { border-color: #ffd23f; color: #ffd23f; }

@media (max-width: 700px) {
  body { padding: 6px env(safe-area-inset-right)
              calc(env(safe-area-inset-bottom) + 6px) env(safe-area-inset-left);
         padding-top: calc(env(safe-area-inset-top) + 6px); }
  #nes-frame { border-width: 3px; padding: 5px; height: auto;
               max-height: none; overflow: visible; }
  .screen { gap: 5px; }
  .hud { flex-wrap: wrap; row-gap: 3px; padding: 3px 6px; }
  .hud-area { font-size: 12px; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
  .hud .verb-btn { font-size: 11px; padding: 3px 7px; }

  .play-area { flex-direction: column; gap: 5px; }
  #scene-frame { order: 1; width: 100%; }
  #scene-img { height: 30vh; max-height: none; object-fit: contain; }
  #verbs-left { order: 2; }
  #verbs-right { order: 3; }
  .verbs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .verb-btn { padding: 8px 12px; font-size: 14px; min-height: 44px; }

  .targets { gap: 4px; justify-content: center; }
  .target-btn { padding: 8px 10px; font-size: 13px; min-height: 44px; }
  .item-btn { padding: 8px 10px; font-size: 13px; min-height: 44px; }
  .inventory { min-height: 24px; gap: 4px; padding-top: 4px; justify-content: center; }
  .dialogue-options { align-items: stretch; }
  .opt-btn { padding: 6px; font-size: 14px; text-align: left; }
  .dialogue-text, .scene-desc { font-size: 13px; }
  .dialogue { min-height: 40px; }
  .dialogue-portrait { max-width: 72px; }
  .status { font-size: 12px; }
  .textbox { min-height: 40px; padding: 5px 6px; }

  .title-art img { max-height: 100px; }
  .title-logo { font-size: 38px; }
  .start-btn { font-size: 17px; padding: 12px; }

  .credits-stage { max-height: 34vh; }
  #credits-screen .title-logo { font-size: 22px; }
  .credit-line { margin: 1px 0; font-size: 11px; line-height: 1.3; }
  #credits-screen .start-btn { font-size: 15px; padding: 10px; }

  .mg-racks, .mg-shelf { gap: 6px; }
  .rack { min-width: 74px; padding: 10px 10px; }
  .rack-item { padding: 10px 10px; }
}

@media (min-width: 701px) {
  #title-screen .title-art { margin-top: 40px; margin-bottom: 14px; transform: translateY(18px); }
  #title-screen .title-art img { max-height: 125px; }
  #title-screen .start-btn { width: min(280px, 72%); }
}

@media (max-height: 500px) and (orientation: landscape) {
  body { padding: 4px; }
  #nes-frame { border-width: 3px; padding: 6px; height: auto;
               max-height: none; overflow: visible; }
  .screen { gap: 5px; }
  .hud { padding: 3px 6px; }
  .hud-area { font-size: 12px; }
  .hud .verb-btn { font-size: 11px; padding: 3px 7px; }

  .play-area { align-items: stretch; gap: 6px; }
  #scene-frame { flex: 1 1 62%; }
  #scene-img { max-height: 40vh; }
  #verbs-left { flex: 0 0 auto; }
  #verbs-right { flex: 0 0 auto; }
  .verbs { gap: 4px; justify-content: flex-start; }
  .verb-btn { padding: 5px 9px; font-size: 12px; }

  .targets { gap: 4px; }
  .target-btn { padding: 4px 8px; font-size: 12px; }
  .item-btn { padding: 3px 6px; font-size: 12px; }
  .inventory { min-height: 22px; gap: 4px; padding-top: 4px; }
  .textbox { min-height: 38px; padding: 4px 6px; }
  .scene-desc, .dialogue-text { font-size: 12px; line-height: 1.3; }
  .dialogue { min-height: 40px; }
  .dialogue-portrait { max-width: 72px; }
  .opt-btn { padding: 4px 6px; font-size: 12px; }
  .status { font-size: 11px; }

  .mg-title { font-size: 14px; }
  .mg-stats { font-size: 12px; }
  .minigame-portrait { height: 48px; }
  .mg-current { font-size: 16px; padding: 8px; }
  .mg-msg { font-size: 12px; }
  .rack { min-width: 60px; padding: 6px 8px; font-size: 12px; }
  .rack-item { padding: 6px 8px; font-size: 12px; }
}