:root {
  color-scheme: light;
  --ink: #fff9ed;
  --brown: #573a27;
  --gold: #e1b55e;
  --panel: rgba(255, 244, 222, .97);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body.museum-page {
  background: #c98a53;
  color: var(--ink);
  font-family: "Yu Gothic UI", "Noto Sans JP", sans-serif;
}
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #f3d589; outline-offset: 4px; }
.museum { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
#museum-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.museum-touch-controls, .hud-controls-mobile { display: none; }
.museum-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(55, 37, 24, .13), transparent 18%, transparent 86%, rgba(55, 37, 24, .08));
}
.museum-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 30px 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(98, 73, 55, .72), rgba(98, 73, 55, .16) 38%, rgba(98, 73, 55, .13) 68%, rgba(98, 73, 55, .7));
}
.museum-wordmark { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.museum-mark { display: none; }
.museum-wordmark strong { font-size: 20px; letter-spacing: .02em; font-weight: 750; text-shadow: 0 1px 3px rgba(42, 29, 21, .32); }
.museum-wordmark small { display: none; }
.museum-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 0 0 10px 10px;
  background: rgba(93, 70, 54, .45);
  color: #fffaf1;
  text-decoration: none;
  font-size: 15px;
  font-weight: 650;
  transition: background .2s, border-color .2s;
  backdrop-filter: blur(8px);
}
.museum-back:hover { background: rgba(73, 53, 40, .75); border-color: rgba(255, 255, 255, .42); }
.museum-back span { color: #f4d58f; font-size: 18px; }
.museum-caption { display: none; }
.museum-center-mark {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.museum-center-mark span {
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, .55);
}
.museum.is-playing .museum-center-mark { opacity: .68; }
.museum-prompt {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 87px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 245, 221, .58);
  border-radius: 7px;
  background: rgba(91, 60, 41, .92);
  color: #fff9ed;
  box-shadow: 0 6px 22px rgba(50, 31, 20, .23);
  font-size: 14px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.museum-prompt[hidden], .museum-card[hidden] { display: none; }
kbd {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(255, 246, 222, .48);
  border-radius: 4px;
  background: rgba(35, 28, 24, .58);
  color: #fffaf1;
  font: 700 12px "DM Mono", monospace;
}
.museum-card {
  position: absolute;
  z-index: 4;
  top: auto;
  right: auto;
  bottom: 83px;
  left: 34px;
  width: min(400px, calc(100vw - 44px));
  padding: 22px 24px 16px;
  transform: none;
  border: 4px solid #765039;
  border-radius: 13px;
  background: var(--panel);
  color: #442f21;
  box-shadow: 0 16px 38px rgba(55, 33, 20, .28);
  backdrop-filter: blur(9px);
}
.museum-card::before { display: none; }
.museum-card-close {
  position: absolute;
  top: 7px;
  right: 11px;
  width: 31px;
  height: 31px;
  border: 0;
  background: transparent;
  color: #765039;
  cursor: pointer;
  font-size: 25px;
  font-weight: 400;
}
.museum-card-kicker {
  display: none;
  margin: 0 0 9px;
  color: #86603a;
  font: 10px "DM Mono", monospace;
  letter-spacing: .16em;
}
.museum-card h1 {
  margin: 0 35px 12px 0;
  padding: 0 0 12px;
  border-bottom: 2px solid rgba(97, 65, 43, .62);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: .02em;
}
.museum-card-description { margin: 0; color: #4b3525; font-size: 16px; line-height: 1.6; }
.museum-card-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #6e5039;
  font-size: 12px;
}
.museum-card-hint kbd {
  min-width: 22px;
  height: 22px;
  border-color: rgba(95, 65, 43, .38);
  background: rgba(95, 65, 43, .1);
  color: #63462e;
  font-size: 11px;
}
.museum-welcome {
  position: absolute;
  z-index: 5;
  inset: 72px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 5vw;
  background: linear-gradient(90deg, rgba(42, 31, 22, .23), rgba(42, 31, 22, .06) 38%, transparent 63%);
  transition: opacity .72s ease, visibility .72s;
}
.museum.is-playing .museum-welcome { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-panel {
  width: min(440px, calc(100% - 40px));
  padding: clamp(26px, 3vw, 38px);
  border: 3px solid #7b563a;
  border-radius: 12px;
  background: rgba(255, 245, 224, .94);
  color: #432f22;
  box-shadow: 0 22px 52px rgba(45, 29, 19, .26);
  text-align: left;
  backdrop-filter: blur(10px);
}
.welcome-eyebrow { display: none; }
.welcome-panel h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 750; line-height: 1.26; letter-spacing: .04em; }
.welcome-panel h1 em { color: #a06c35; font-style: normal; }
.welcome-copy { margin: 14px 0 0; color: #674b35; font-size: 15px; letter-spacing: .03em; }
.welcome-rule { width: 66px; height: 2px; margin: 21px 0 15px; background: #c99a50; }
.welcome-controls { margin: 0; color: #70553d; font-size: 12px; letter-spacing: .02em; }
.welcome-controls span { color: #674723; font-family: "DM Mono", monospace; font-weight: 700; }
#museum-enter {
  min-width: 190px;
  margin-top: 24px;
  padding: 13px 19px;
  border: 1px solid #7b563a;
  border-radius: 5px;
  background: #7b563a;
  color: #fff7e7;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .08em;
  transition: background .2s, color .2s, transform .2s;
}
#museum-enter:hover { transform: translateY(-2px); background: #5c3d28; }
#museum-enter span { margin-left: 13px; font-family: sans-serif; font-size: 17px; }
.welcome-note { margin: 15px 0 0; color: #8a7058; font-size: 11px; letter-spacing: .04em; }
.museum-hud {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid rgba(255, 243, 219, .38);
  border-radius: 9px;
  background: rgba(91, 61, 42, .88);
  color: #fff8e9;
  box-shadow: 0 6px 18px rgba(48, 29, 18, .2);
  pointer-events: none;
  white-space: nowrap;
}
.hud-controls { display: flex; align-items: center; gap: 7px; font-size: 14px; letter-spacing: .01em; }
.hud-controls kbd { min-width: 23px; height: 24px; font-size: 12px; }
.hud-controls span { margin-left: 2px; }
.hud-controls i { width: 1px; height: 17px; margin: 0 8px; background: rgba(255, 248, 229, .36); }
.hud-status { display: none; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #d5b875; }
.museum.is-playing .status-dot { background: #8ec29c; }
.museum-noscript {
  position: absolute;
  z-index: 8;
  inset: auto 20px 20px;
  padding: 14px;
  border-radius: 5px;
  background: #573a27;
  text-align: center;
}
@media (max-width: 700px) {
  .museum-header { height: 58px; padding: 0 11px 0 16px; }
  .museum-wordmark strong { font-size: 13px; }
  .museum-back { gap: 5px; padding: 8px 9px; font-size: 11px; }
  .museum-back span { font-size: 14px; }
  .museum-prompt { bottom: 74px; font-size: 12px; }
  .museum-card { right: 12px; bottom: 68px; left: 12px; width: auto; padding: 21px 19px 16px; }
  .museum-card h1 { font-size: 21px; }
  .museum-card-description { font-size: 14px; }
  .museum-card-hint { font-size: 10px; }
  .museum-welcome { inset: 58px 0 0; padding: 16px; }
  .welcome-panel { width: min(390px, 100%); padding: 23px 19px; }
  .welcome-panel h1 { font-size: 34px; }
  .welcome-copy { font-size: 13px; }
  .welcome-controls { line-height: 1.8; font-size: 10px; }
  #museum-enter { min-width: 160px; margin-top: 18px; }
  .museum-hud { bottom: 8px; max-width: calc(100vw - 14px); padding: 7px 9px; }
  .hud-controls { display: none; }
  .hud-controls-mobile { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; }
  .museum-touch-controls {
    position: absolute;
    z-index: 4;
    right: 12px;
    bottom: 120px;
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 5px;
  }
  .museum.is-inspecting .museum-touch-controls { display: none; }
  .museum-touch-controls button {
    border: 1px solid rgba(255,245,223,.6);
    border-radius: 12px;
    background: rgba(75,49,34,.78);
    color: #fff8ec;
    font-size: 29px;
    line-height: 1;
    touch-action: none;
    backdrop-filter: blur(8px);
  }
  .museum-touch-controls button:active { background: rgba(137,91,53,.94); }
  .museum-touch-controls [data-move="w"] { grid-column: 2; grid-row: 1; }
  .museum-touch-controls [data-move="a"] { grid-column: 1; grid-row: 2; }
  .museum-touch-controls [data-move="s"] { grid-column: 2; grid-row: 2; }
  .museum-touch-controls [data-move="d"] { grid-column: 3; grid-row: 2; }
  .hud-controls { gap: 4px; font-size: 10px; }
  .hud-controls kbd { min-width: 18px; height: 20px; font-size: 9px; }
  .hud-controls i { margin: 0 3px; }
  .hud-controls span:nth-of-type(2) { display: none; }
  .hud-controls kbd:nth-of-type(n + 2):nth-of-type(-n + 4) { display: none; }
}


/* Gallery overlay proportions follow the supplied 1670 x 942 reference. */
.museum-vignette { background: linear-gradient(180deg, rgba(71,46,31,.05), transparent 25%, transparent 80%, rgba(120,67,34,.06)); }
.museum-header {
  height: 72px;
  padding: 0 35px;
  background: linear-gradient(90deg, rgba(85,72,65,.51), rgba(85,72,65,.25) 20%, rgba(85,72,65,.07) 60%, rgba(85,72,65,.48));
}
.museum-wordmark strong { font-size: clamp(20px,1.78vw,30px); font-weight: 750; letter-spacing: 0; }
.museum-back {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: clamp(17px,1.74vw,29px);
  font-weight: 750;
}
.museum-back:hover { background: transparent; text-decoration: underline; }
.museum-back span { display: none; }
.museum-center-mark { display: none; }
.museum-card {
  bottom: 88px;
  left: 36px;
  width: min(481px,calc(100vw - 60px));
  min-height: 275px;
  padding: 24px 31px 18px;
  border: 6px solid #604537;
  border-radius: 14px;
  background: rgba(255,243,222,.98);
  color: #3f291f;
  box-shadow: 0 13px 25px rgba(93,47,20,.15);
  backdrop-filter: none;
}
.museum-card h1 {
  margin: 0 0 14px;
  padding: 0 0 11px;
  border-bottom: 3px solid #5e4031;
  font-size: clamp(27px,2.25vw,38px);
  line-height: 1.2;
  font-weight: 750;
}
.museum-card-description { font-size: clamp(17px,1.63vw,27px); line-height: 1.42; }
.museum-card-hint {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 21px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #422f25;
  cursor: pointer;
  font-size: clamp(19px,1.63vw,27px);
  font-weight: 600;
}
.museum-card-hint:hover span { text-decoration: underline; }
.museum-card-hint kbd {
  width: 45px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: #4b3a35;
  color: #fff;
  font: 750 28px "Yu Gothic UI",sans-serif;
}
.museum-hud {
  bottom: 26px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(74,52,39,.75);
  box-shadow: none;
}
.hud-controls { gap: 12px; font-size: clamp(17px,1.52vw,25px); font-weight: 700; }
.hud-controls kbd {
  width: auto;
  min-width: 39px;
  height: 37px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: rgba(57,45,41,.88);
  font: 750 clamp(18px,1.6vw,26px) "Yu Gothic UI",sans-serif;
}
.hud-controls span { margin: 0 8px 0 0; }
.hud-controls i { display: none; }
.museum-prompt { bottom: 96px; font-size: 20px; }
@media (max-width: 700px) {
  .museum-header { height: 58px; padding: 0 14px; }
  .museum-wordmark strong { font-size: 17px; }
  .museum-back { font-size: 14px; }
  .museum-card {
    bottom: 82px;
    left: 12px;
    width: min(390px,calc(100vw - 24px));
    min-height: 0;
    padding: 15px 17px 14px;
    border-width: 4px;
  }
  .museum-card h1 { font-size: 22px; margin-bottom: 9px; padding-bottom: 8px; }
  .museum-card-description { font-size: 14px; }
  .museum-card-hint { margin-top: 10px; font-size: 16px; gap: 9px; }
  .museum-card-hint kbd { width: 29px; height: 29px; font-size: 17px; }
  .museum-hud { bottom: 12px; padding: 6px 7px; }
  .hud-controls { gap: 5px; font-size: 11px; }
  .hud-controls kbd { min-width: 22px; height: 23px; padding: 0 3px; font-size: 11px; }
  .hud-controls span { margin: 0 3px 0 0; }
  .museum-prompt { bottom: 64px; font-size: 13px; }
}

@media (min-width: 701px) {
  .museum-header { height: clamp(46px,7.64vh,72px); padding: 0 2.1vw; }
  .museum-card {
    bottom: 9.35vh;
    left: 2.15vw;
    width: 28.8vw;
    min-height: 29.2vh;
    padding: 1.42vw 1.86vw 1.08vw;
    border-width: clamp(4px,.36vw,6px);
  }
  .museum-card h1 { font-size: clamp(21px,2.25vw,38px); }
  .museum-card-hint { font-size: clamp(16px,1.63vw,27px); }
  .museum-card-hint kbd { width: 2.7vw; height: 2.63vw; font-size: 1.68vw; }
  .museum-hud { bottom: 2.75vh; padding: .48vw .7vw; }
  .hud-controls { gap: .68vw; }
  .hud-controls span { margin: 0 .2vw 0 0; }
  .hud-controls kbd { min-width: 2.35vw; height: 2.22vw; padding: 0 .48vw; }
}
@media (min-width: 701px) {
  .museum-card h1 { margin-bottom: .85vw; padding-bottom: .66vw; }
  .museum-card-hint { margin-top: 1.25vw; }
}
@media (min-width: 701px) {
  .museum-card-description { font-size: 1.54vw; }
}
@media (max-width: 700px) {
  .hud-controls span:nth-of-type(2) { display: inline; }
  .hud-controls kbd:nth-of-type(n + 2):nth-of-type(-n + 4) { display: inline-grid; }
  .museum-card {
    right: 12px;
    left: auto;
    width: min(290px,52vw);
  }
  .museum-card h1 { font-size: clamp(16px,4vw,22px); }
  .museum-card-description { font-size: clamp(12px,3.1vw,14px); }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .museum-card {
    bottom: 76px;
    left: 18px;
    width: min(350px, calc(100vw - 36px));
    min-height: 0;
    padding: 17px 19px 14px;
  }
  .museum-card h1 { font-size: 24px; margin-bottom: 10px; padding-bottom: 8px; }
  .museum-card-description { font-size: 15px; }
  .museum-card-hint { margin-top: 12px; font-size: 15px; gap: 8px; }
  .museum-card-hint kbd { width: 30px; height: 30px; font-size: 18px; }
}
@media (min-width: 701px) and (max-width: 1050px) and (min-height: 850px) {
  .museum-card { right: 18px; left: auto; width: 270px; }
}

/* 暗闇で捕まったときに、画面の縁が一瞬赤く光る */
.museum-alert {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 160px 40px rgba(170, 0, 12, .85);
}
.museum-alert.is-flashing { animation: museum-alert-flash .95s ease-out; }
@keyframes museum-alert-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .museum-alert.is-flashing { animation-duration: .4s; }
}