:root {
  color-scheme: light;
  --ink: #173b35;
  --muted: #64756e;
  --paper: #fffaf0;
  --cream: #f5ead4;
  --mint: #dff3df;
  --green: #16715f;
  --green-deep: #0f4d43;
  --green-shadow: #0b4239;
  --amber: #f3ae35;
  --amber-deep: #b86d20;
  --coral: #e76854;
  --red: #c84842;
  --blue: #4a91b9;
  --purple: #8469b5;
  --border: rgba(23, 59, 53, .2);
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background-color: #7bc5ad;
  background-image:
    radial-gradient(circle at 16px 16px, rgba(255,255,255,.18) 0 4px, transparent 4.5px),
    linear-gradient(145deg, rgba(255,231,174,.36), transparent 42%),
    linear-gradient(160deg, #8dd1b8 0%, #62ae99 100%);
  background-size: 42px 42px, 100% 100%, 100% 100%;
}

button { font: inherit; }
button:focus-visible { outline: 4px solid #ffe583; outline-offset: 3px; }

.game-shell {
  width: min(1300px, calc(100vw - 24px));
  margin: 10px auto 18px;
  overflow: hidden;
  background: var(--paper);
  border: 4px solid var(--green-deep);
  border-radius: 28px;
  box-shadow: 0 10px 0 #356e62, 0 28px 70px rgba(20, 65, 56, .28);
}

/* 1280px超ではレイアウト比率を変えず、ゲーム筐体全体を拡大する。 */
.game-shell.is-viewport-scaled {
  width: 1272px;
  max-width: none;
  transform: scale(var(--viewport-scale, 1));
  transform-origin: top center;
}

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px;
  color: white;
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.12) 0 6px, transparent 7px),
    linear-gradient(145deg, #23846e, #125e52);
  background-size: 32px 32px, 100% 100%;
  border-bottom: 4px solid var(--green-shadow);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 270px; }
.brand-mark {
  width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 56px;
  border: 3px solid #ffe4a1; border-radius: 19px;
  background: linear-gradient(#ffc75d, #e99b2b); box-shadow: 0 5px 0 #a85f1d;
  font-size: 27px; transform: rotate(-3deg);
}
.brand h1 { margin: 2px 0 0; color: white; font-size: clamp(16px, 1.8vw, 22px); letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.eyebrow, .chapter { margin: 0; font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #ffe39b; }

.hud { display: flex; align-items: stretch; gap: 7px; }
.hud-item {
  position: relative; min-width: 88px; padding: 8px 11px 7px 38px;
  color: var(--ink); background: #fff9e9; border: 3px solid rgba(255,255,255,.82); border-radius: 15px;
  box-shadow: 0 4px 0 rgba(8,59,50,.48), inset 0 -2px 0 #ead9b7;
}
.hud-item::before {
  content: attr(data-icon); position: absolute; left: 8px; top: 50%; translate: 0 -50%;
  width: 24px; height: 24px; display: grid; place-items: center;
  color: white; background: var(--green); border-radius: 50%; font-size: 11px; font-weight: 1000;
}
.hud-item:nth-child(2)::before { background: var(--amber-deep); }
.hud-item:nth-child(3)::before { background: var(--blue); }
.hud-item.satisfaction::before { background: var(--coral); }
.hud-item span { display: block; font-size: 9px; font-weight: 900; color: var(--muted); }
.hud-item strong { display: block; margin-top: 1px; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-item.satisfaction { background: #fff2ea; }
.hud-item.satisfaction.is-warning { color: #8b302b; background: #ffdcd2; animation: warning-pulse .8s infinite alternate; }
.wave-progress i { display: block; width: 100%; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 9px; background: #dfd4bd; }
.wave-progress i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42aa76, #f1bb42); transition: width .2s; }

.time-controls {
  display: flex; gap: 5px; padding: 5px;
  border: 2px solid rgba(255,255,255,.32); border-radius: 15px; background: rgba(7,63,54,.42);
}
.time-controls button {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  color: white; background: rgba(255,255,255,.12); font-weight: 1000; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.18); transition: translate .12s, background .12s;
}
.time-controls button:hover { background: rgba(255,255,255,.3); translate: 0 -1px; }
.time-controls button:active { translate: 0 2px; box-shadow: none; }
.time-controls button.is-active { color: var(--green-deep); background: #ffe09a; }
.time-controls button:disabled { opacity: .35; cursor: not-allowed; translate: 0; }
.time-controls #sound-button.is-muted { color: #ffd0c8; text-decoration: line-through; }

.play-area { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
.stage-column { min-width: 0; display: flex; flex-direction: column; background: #c8dfcc; }
.stage-wrap {
  position: relative; min-width: 0; overflow: hidden;
  background: #c8dfcc; box-shadow: inset -7px 0 0 rgba(15,77,67,.13); flex: 0 0 auto;
}
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
#game-canvas.is-drop-target {
  outline: 7px solid rgba(239,145,110,.9);
  outline-offset: -10px;
  cursor: copy;
  filter: saturate(1.08) brightness(1.03);
}

.overlay {
  position: absolute; inset: 0; display: none; place-items: center;
  padding: 20px; background: rgba(18, 68, 58, .66); backdrop-filter: blur(6px) saturate(.82);
}
.overlay.is-visible { display: grid; animation: overlay-in .25s ease-out; }
.overlay-card {
  position: relative; width: min(540px, 94%); padding: 28px;
  border: 5px solid white; border-radius: 28px; background: #fff9e9;
  box-shadow: 0 9px 0 #bd7730, 0 24px 60px rgba(12, 48, 41, .35);
}
.overlay-card::before {
  content: ""; position: absolute; inset: 8px; z-index: -1;
  border: 2px dashed rgba(184,109,32,.23); border-radius: 19px; pointer-events: none;
}
.overlay-card h2 { margin: 10px 0 12px; font-size: clamp(30px, 4.6vw, 51px); line-height: 1.02; letter-spacing: -.045em; }
.overlay-card h2 span { color: var(--coral); text-shadow: 0 3px 0 #ffd6b3; }
.overlay-card p { color: var(--muted); line-height: 1.65; }
.overlay-card small { display: block; margin-top: 14px; color: #8b765d; font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.title-card { width: min(760px, 96%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(210px, .75fr); align-items: center; gap: 10px; overflow: hidden; }
.title-copy { position: relative; z-index: 2; }
.title-copy > p:not(.chapter) { max-width: 430px; margin: 0; font-size: 13px; }
.title-actions { display: flex; align-items: center; flex-wrap: wrap; }
.title-mascot { position: relative; align-self: end; height: 340px; margin: -12px -18px -29px -20px; }
.title-mascot img {
  position: absolute; right: -10px; bottom: -4px; width: 270px; max-height: 335px; object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(75,43,18,.18)); animation: mascot-float 3s ease-in-out infinite;
}
.title-mascot figcaption {
  position: absolute; z-index: 2; top: 4px; left: -28px; width: 190px; padding: 9px 12px;
  color: var(--ink); background: white; border: 3px solid var(--green); border-radius: 18px 18px 6px 18px;
  font-size: 10px; font-weight: 900; line-height: 1.45; transform: rotate(-2deg); box-shadow: 0 4px 0 rgba(15,77,67,.18);
}
.title-mascot figcaption::after { content: ""; position: absolute; right: 19px; bottom: -10px; width: 14px; height: 14px; background: white; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(45deg); }

.primary-button {
  min-width: 185px; margin-top: 13px; padding: 13px 19px;
  border: 3px solid #e8fff6; border-radius: 16px; color: white;
  background: linear-gradient(#2c9a79, #13705e); font-weight: 1000; cursor: pointer;
  box-shadow: 0 6px 0 var(--green-shadow), 0 10px 18px rgba(22,113,95,.23);
  transition: translate .13s, filter .13s, box-shadow .13s;
}
.primary-button:hover { translate: 0 -2px; filter: brightness(1.08); box-shadow: 0 8px 0 var(--green-shadow), 0 12px 20px rgba(22,113,95,.25); }
.primary-button:active { translate: 0 4px; box-shadow: 0 2px 0 var(--green-shadow); }
.text-button { margin: 12px 0 0 8px; padding: 10px 12px; border: 0; color: var(--green); background: transparent; font-weight: 1000; cursor: pointer; }
.text-button:hover { color: var(--coral); }

.tutorial-card { overflow: hidden; }
.tutorial-card::after {
  content: ""; position: absolute; right: -38px; bottom: -82px; width: 190px; height: 240px;
  background: url("./assets/librarian-guide.png") center / contain no-repeat; opacity: .11; pointer-events: none;
}
.tutorial-card h2 { position: relative; z-index: 1; max-width: 430px; font-size: clamp(26px, 3.3vw, 40px); }
.tutorial-card > p { position: relative; z-index: 1; max-width: 420px; }
.tutorial-topline { display: flex; align-items: center; justify-content: space-between; }
.tutorial-topline > span { padding: 4px 9px; color: var(--green); background: var(--mint); border-radius: 99px; font-size: 11px; font-weight: 1000; }
.tutorial-progress { display: flex; gap: 7px; margin: 17px 0 2px; }
.tutorial-progress i { width: 25px; height: 7px; border-radius: 8px; background: #ded3bc; transform: skew(-12deg); }
.tutorial-progress i.is-active { background: var(--amber); }

.result-card { background: linear-gradient(145deg, #fffaf0, #fff2d0); }
.result-card::after { content: "★ ･ﾟ ✦ ･ﾟ ★"; position: absolute; right: 24px; top: 20px; color: var(--amber); letter-spacing: .18em; font-size: 14px; transform: rotate(4deg); }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 9px; }
.result-stats div { padding: 12px 8px; border: 2px solid rgba(22,113,95,.12); border-radius: 15px; background: white; text-align: center; box-shadow: 0 3px 0 #eadaba; }
.result-stats dt { font-size: 10px; color: var(--muted); font-weight: 800; }
.result-stats dd { margin: 3px 0 0; font-size: 21px; font-weight: 1000; }
.secondary-button { margin-left: 8px; color: var(--green); border-color: #c8eadb; background: #e8f6ea; box-shadow: 0 6px 0 #a5cdbb; }
.secondary-button:hover { color: var(--green-deep); box-shadow: 0 8px 0 #a5cdbb; }

.control-deck {
  min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-left: 4px solid var(--green-deep);
  background-color: #f1dfbd;
  background-image: linear-gradient(90deg, rgba(139,87,34,.045) 1px, transparent 1px), linear-gradient(rgba(139,87,34,.045) 1px, transparent 1px);
  background-size: 18px 18px;
}
.build-area, .facility-detail, .guide-control-card {
  padding: 11px; border: 3px solid #d7ba83; border-radius: 18px;
  background: #fffaf0; box-shadow: 0 5px 0 #b98b53;
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 9px; }
.panel-heading > div, .facility-detail { display: flex; align-items: center; gap: 9px; }
.panel-heading h2, .facility-detail h2 { margin: 0; font-size: 13px; font-weight: 1000; }
.step-number {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
  border: 3px solid white; border-radius: 50%; color: white; background: var(--green);
  box-shadow: 0 3px 0 var(--green-shadow); font-size: 11px; font-weight: 1000;
}
.facility-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.facility-option {
  min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 7px;
  padding: 7px; border: 2px solid #d8c9ac; border-radius: 14px; color: var(--ink); background: white;
  box-shadow: 0 3px 0 #cbb895; text-align: left; cursor: grab; touch-action: none; user-select: none;
  transition: translate .14s, border-color .14s, background .14s, box-shadow .14s;
}
.facility-option:hover { translate: 0 -2px; border-color: #55a78a; box-shadow: 0 5px 0 #b7a27f; }
.facility-option:active { translate: 0 2px; box-shadow: none; }
.facility-option.is-selected { border-color: var(--green); background: #e4f5e7; box-shadow: 0 3px 0 var(--green-shadow), inset 0 0 0 1px white; }
.facility-option.is-disabled { opacity: .46; cursor: not-allowed; translate: 0; box-shadow: 0 2px 0 #cbb895; }
.facility-drag-handle, .facility-select-button {
  min-width: 0; margin: 0; padding: 0; border: 0; color: inherit; background: transparent;
  font: inherit; text-align: left;
}
.facility-drag-handle {
  grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center;
  width: 100%; height: 100%; cursor: inherit;
}
.facility-drag-handle:disabled { cursor: not-allowed; }
.facility-select-button {
  grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: auto auto;
  align-self: stretch; cursor: inherit;
}
.facility-select-button:disabled { cursor: not-allowed; }
.facility-glyph { position: relative; pointer-events: none; }
.facility-glyph.is-dragging { opacity: .58; cursor: grabbing; transform: scale(.94); }
.facility-drag-preview {
  position: fixed !important; z-index: 9999; width: 64px !important; height: 64px !important;
  margin: 0 !important; opacity: .96; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.04) !important;
  filter: drop-shadow(0 7px 7px rgba(33,61,54,.32)) !important;
  will-change: left, top;
}
.facility-option span { min-width: 0; }
.facility-option b, .facility-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facility-option b { font-size: 10px; }
.facility-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.facility-select-button > strong { color: var(--amber-deep); font-size: 12px; }
.facility-select-button > strong::before { content: "￥"; font-size: 9px; }
.facility-glyph {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 3px solid white; border-radius: 50%; color: white; background: var(--green);
  box-shadow: 0 3px 0 rgba(15,77,67,.42); font-size: 11px; font-style: normal; font-weight: 1000;
}
.self-glyph { background: #55a760; }
.return-glyph { background: var(--blue); }
.guide-glyph { background: #cd7b2d; }

.facility-detail { align-items: flex-start; flex-wrap: wrap; }
.facility-detail .step-number { margin-top: 2px; }
.detail-copy { min-width: 0; flex: 1; }
.detail-copy p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.detail-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.detail-actions button { flex: 1; }
.detail-actions .policy-button { flex-basis: 100%; color: #285b52; border-color: #9bc8b8; background: #eff9f3; box-shadow: 0 3px 0 #9bc8b8; }
.detail-actions .policy-button[hidden] { display: none; }
.detail-actions button, .wave-button {
  padding: 8px 10px; border: 2px solid #cbb895; border-radius: 11px;
  color: var(--ink); background: white; box-shadow: 0 3px 0 #cbb895;
  font-weight: 1000; font-size: 10px; cursor: pointer;
}
.detail-actions button:not(:disabled):hover { translate: 0 -1px; }
.detail-actions button:disabled { opacity: .42; cursor: not-allowed; }
.detail-actions .danger-button { color: #a03935; background: #fff0eb; border-color: #efc4b7; box-shadow-color: #efc4b7; }
.wave-button { color: white; border-color: #62b198; background: linear-gradient(#35a17e, #16715f); box-shadow: 0 4px 0 var(--green-shadow); }
.wave-button:hover:not(:disabled) { translate: 0 -1px; filter: brightness(1.07); }
.wave-button:disabled { opacity: .45; cursor: not-allowed; }

.librarian-dialogue {
  position: relative; min-height: 128px; display: grid; grid-template-columns: 142px minmax(0, 1fr);
  align-items: stretch; gap: 8px; padding: 10px 14px 11px;
  border-top: 4px solid var(--green-deep);
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.14) 0 3px, transparent 3.5px),
    linear-gradient(145deg, #45a083, #24745f);
  background-size: 34px 34px, 100% 100%;
  transition: background .2s;
}
.dialogue-portrait { position: relative; min-width: 0; }
.dialogue-portrait img {
  position: absolute; left: -1px; bottom: -11px; width: 142px; height: 142px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 5px 0 rgba(7,52,44,.2));
  transition: opacity .16s, translate .18s;
}
.dialogue-portrait .portrait-normal { opacity: 1; }
.dialogue-portrait .portrait-rush { opacity: 0; translate: 0 5px; }
.librarian-dialogue.is-rushing {
  background: linear-gradient(145deg, #e9894d, #bd5647);
  animation: rush-pulse .65s infinite alternate;
}
.librarian-dialogue.is-rushing .portrait-normal { opacity: 0; translate: 0 5px; }
.librarian-dialogue.is-rushing .portrait-rush { opacity: 1; translate: 0 0; }
.dialogue-bubble {
  position: relative; min-width: 0; padding: 9px 13px 8px;
  border: 3px solid #e3c994; border-radius: 18px; background: #fffaf0;
  box-shadow: 0 5px 0 rgba(8,59,50,.32);
}
.dialogue-bubble::before {
  content: ""; position: absolute; left: -10px; top: 31px; width: 16px; height: 16px;
  border-left: 3px solid #e3c994; border-bottom: 3px solid #e3c994;
  background: #fffaf0; transform: rotate(45deg);
}
.dialogue-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialogue-heading > strong {
  padding: 3px 9px; border-radius: 99px; color: white; background: var(--green);
  font-size: 10px; letter-spacing: .04em;
}
.dialogue-bubble > #game-status { margin: 5px 0 7px; color: var(--ink); font-size: 13px; font-weight: 1000; line-height: 1.35; }
.dialogue-forecast {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding-top: 6px;
  border-top: 2px dashed #e2d4b8;
}
.dialogue-forecast > span {
  flex: 0 0 auto; padding: 3px 7px; border-radius: 8px; color: #7e4322;
  background: #ffe3a6; font-size: 9px; font-weight: 1000;
}
.dialogue-forecast > p { min-width: 0; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.forecast-rushes { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.forecast-rushes span { padding: 4px 7px; border: 2px solid #f0c18d; border-radius: 99px; color: #7e4322; background: #fff0d2; font-size: 8px; font-weight: 1000; }
.forecast-rushes span.is-calm { color: var(--green); border-color: #b9ddc3; background: #e7f4e4; }
.forecast-live { min-height: 13px; margin: 0; color: var(--red); font-size: 10px; font-weight: 1000; }
.librarian-dialogue.is-rushing .forecast-live { color: #b53934; }
.guide-control-card > div { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.guide-control-card > div span { font-size: 18px; }
.guide-control-card > div strong { font-size: 11px; }
.guide-action-button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 7px;
  padding: 8px 9px; border: 2px solid #ffd795; border-radius: 11px; color: white;
  background: linear-gradient(#df923c, #b86624); box-shadow: 0 4px 0 #82451f;
  text-align: left; cursor: pointer;
}
.guide-action-button b { font-size: 10px; }
.guide-action-button small { font-size: 8px; opacity: .9; }
.guide-action-button:not(:disabled):hover { translate: 0 -1px; filter: brightness(1.07); }
.guide-action-button:disabled { color: #80786d; border-color: #ded3c0; background: #e9e1d3; box-shadow: 0 3px 0 #c7baa3; cursor: not-allowed; }
.guide-action-button.is-active:disabled {
  color: white; border-color: #ffd795; background: linear-gradient(#f0a24a, #c66a25);
  box-shadow: 0 4px 0 #82451f; opacity: 1; animation: guide-active-pulse .7s infinite alternate;
}

.statusbar {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  padding: 8px 18px; border-top: 4px solid var(--green-deep); background: #fff7e7; font-size: 11px;
}
.legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.legend-dot { width: 13px; height: 13px; border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.legend-dot.return { background: var(--blue); }
.legend-dot.borrow { background: #55a760; }
.legend-dot.both { background: var(--purple); }
.legend-dot.special { background: #df8339; }

.toast {
  position: absolute; top: 14px; left: 50%; z-index: 4; transform: translate(-50%, -16px) scale(.92);
  padding: 11px 17px; border: 3px solid white; border-radius: 99px; color: white;
  background: var(--coral); box-shadow: 0 5px 0 #9e3d35;
  font-size: 11px; font-weight: 1000; opacity: 0; pointer-events: none; transition: .22s;
}
.toast.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }

@keyframes mascot-float { from, to { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -7px; rotate: 1deg; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rush-pulse { from { box-shadow: 0 5px 0 #b98b53; } to { box-shadow: 0 5px 0 #d76645, 0 0 14px rgba(231,104,84,.35); } }
@keyframes guide-active-pulse { to { filter: brightness(1.12); } }
@keyframes warning-pulse { to { scale: 1.035; } }

@media (max-width: 1120px) {
  .brand { min-width: auto; }
  .brand h1 { max-width: 210px; }
  .eyebrow { display: none; }
  .hud-item { min-width: 76px; padding-left: 33px; }
  .hud-item::before { left: 6px; }
  .play-area { grid-template-columns: minmax(0, 1fr) 324px; }
}

@media (max-width: 900px) {
  .game-shell { width: 100%; margin: 0; border-width: 0; border-radius: 0; box-shadow: none; }
  .topbar { align-items: flex-start; padding: 9px 10px 11px; border-bottom-width: 3px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; font-size: 20px; }
  .brand h1 { max-width: 170px; font-size: 15px; }
  .hud-item { min-width: 65px; padding: 7px 7px 6px 30px; }
  .hud-item:nth-child(3) { display: none; }
  .hud-item strong { font-size: 15px; }
  .hud-item::before { width: 20px; height: 20px; font-size: 9px; }
  .time-controls { position: absolute; z-index: 5; top: 95px; right: 10px; }
  .play-area { grid-template-columns: 1fr; }
  .control-deck { border-top: 4px solid var(--green-deep); border-left: 0; }
  .facility-options { grid-template-columns: repeat(2, 1fr); }
  .statusbar { align-items: center; }
}

@media (max-width: 650px) {
  .hud-item:nth-child(2) { display: none; }
  .title-card { display: block; padding: 22px; }
  .title-mascot { display: none; }
  .title-copy > p:not(.chapter) { font-size: 11px; line-height: 1.45; }
  .title-actions { gap: 2px; }
  .primary-button { min-width: 155px; padding: 10px 13px; }
  .overlay { padding: 10px; overflow: auto; }
  .overlay-card { padding: 20px; border-width: 3px; border-radius: 20px; }
  .overlay-card h2 { font-size: 27px; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .librarian-dialogue { min-height: 118px; grid-template-columns: 100px minmax(0, 1fr); padding-inline: 8px; }
  .dialogue-portrait img { left: -10px; width: 116px; height: 126px; }
  .dialogue-forecast { align-items: flex-start; flex-wrap: wrap; }
  .forecast-rushes { margin-left: 0; }
  .dialogue-bubble > #game-status { font-size: 11px; }
}

/* v1.6: 木製の業務盤・備品台帳・紙の案内札で画面全体を一つのゲームUIにする。 */
:root {
  --wood: #5b351f;
  --wood-dark: #2d1b14;
  --wood-light: #8b572e;
  --brass: #d6aa4d;
  --brass-light: #f3d98d;
  --ledger-line: rgba(92, 65, 34, .2);
}

body {
  min-height: 100vh;
  background-color: #183f36;
  background-image: linear-gradient(rgba(18,69,58,.76), rgba(18,69,58,.82)), url("./assets/wood-texture-v2.jpg");
  background-size: auto, 620px 620px;
}

.game-shell {
  position: relative;
  width: min(1320px, calc(100vw - 8px));
  margin: 4px auto 8px;
  overflow: hidden;
  border: 5px solid var(--wood-dark);
  border-radius: 14px;
  background: #f5e5c5 url("./assets/paper-texture-v2.jpg") center / 520px 520px;
  box-shadow: 0 0 0 2px var(--brass), 0 9px 0 #173a32, 0 20px 44px rgba(6,29,24,.45), inset 0 0 0 2px rgba(255,229,151,.36);
}

.topbar {
  min-height: 66px;
  gap: 12px;
  padding: 7px 13px;
  border-bottom: 4px solid var(--brass);
  color: #fff8e5;
  background-image: linear-gradient(90deg, rgba(22,83,69,.82), rgba(14,60,51,.9)), url("./assets/wood-texture-v2.jpg");
  background-size: auto, 560px 560px;
  box-shadow: inset 0 -3px 0 var(--wood-dark), inset 0 2px 0 rgba(255,255,255,.1);
}

.brand { min-width: 315px; gap: 10px; }
.brand-mark {
  width: 46px; height: 48px; flex-basis: 46px;
  border: 2px solid var(--brass-light); border-radius: 5px;
  background: #2f6d5d; box-shadow: inset 0 0 0 3px #173e35, 0 2px 0 var(--wood-dark);
  font-size: 23px; transform: rotate(-2deg);
  clip-path: polygon(8% 0, 92% 0, 100% 12%, 100% 88%, 92% 100%, 8% 100%, 0 88%, 0 12%);
}
.brand h1 { margin-top: 0; font-size: clamp(15px, 1.55vw, 20px); text-shadow: 0 2px 0 #173e35; }
.eyebrow, .chapter { color: var(--brass-light); letter-spacing: .18em; }

.time-controls {
  gap: 4px; padding: 4px;
  border: 2px solid #a87632; border-radius: 5px;
  background-image: linear-gradient(rgba(38,22,14,.35), rgba(38,22,14,.35)), url("./assets/wood-texture-v2.jpg");
  background-size: auto, 240px 240px; box-shadow: inset 0 0 0 1px rgba(255,232,169,.15);
}
.time-controls button {
  width: 31px; height: 31px;
  border: 1px solid rgba(244,218,145,.44); border-radius: 3px;
  background: rgba(15,67,56,.78); box-shadow: 0 2px 0 #1d130d;
}
.time-controls button:hover { background: #2f806c; }
.time-controls button.is-active { color: #4a301b; background: var(--brass-light); box-shadow: inset 0 0 0 2px #b77d2f; }

.hud { gap: 5px; }
.hud-item {
  min-width: 82px; padding: 6px 8px 5px 31px;
  border: 2px solid var(--brass); border-radius: 4px; color: #2e332c;
  background: #f8ebc8 url("./assets/paper-texture-v2.jpg") center / 350px 350px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 2px 0 #2b1b12;
}
.hud-item::before {
  left: 7px; width: 18px; height: 23px;
  border-radius: 2px; color: #f6d98d; background: #2e6c5c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 9px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.hud-item:nth-child(2)::before { background: #8b5628; }
.hud-item:nth-child(3)::before { background: #467b87; }
.hud-item.satisfaction::before { background: #ae5344; }
.hud-item span { color: #6d604f; font-size: 8px; letter-spacing: .05em; }
.hud-item strong { font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.hud-item.satisfaction { background: #f8e4cd url("./assets/paper-texture-v2.jpg") center / 350px 350px; }
.wave-progress i { height: 3px; margin-top: 4px; border-radius: 0; background: #cdbc98; }
.wave-progress i b { border-radius: 0; background: #3d8a6d; }

.play-area { grid-template-columns: minmax(0, 1fr) 368px; background: #e8d2a9; }
.stage-column { background: #315f53; }
.stage-wrap { background: #315f53; box-shadow: inset -4px 0 0 rgba(26,42,31,.25); }
#game-canvas { background: #315f53; }

.control-deck {
  position: relative; gap: 0; padding: 22px 11px 10px;
  border-left: 7px solid var(--wood-dark);
  background-color: #f4e5c4;
  background-image: linear-gradient(90deg, transparent 30px, rgba(172,78,55,.16) 30px, rgba(172,78,55,.16) 32px, transparent 32px), url("./assets/paper-texture-v2.jpg");
  background-size: auto, 480px 480px;
  box-shadow: inset 4px 0 0 var(--brass), inset 9px 0 14px rgba(76,45,23,.12);
}
.control-deck::before {
  content: "LIBRARY EQUIPMENT LEDGER"; position: absolute; top: 6px; left: 42px;
  color: #8b6335; font: 900 8px Georgia, serif; letter-spacing: .18em;
}
.build-area, .facility-detail, .guide-control-card {
  padding: 10px 8px 12px 22px; border: 0; border-bottom: 2px solid var(--ledger-line);
  border-radius: 0; background: transparent; box-shadow: none;
}
.facility-detail { padding-top: 12px; border-bottom: 0; }
.panel-heading { margin-bottom: 7px; }
.panel-heading h2, .facility-detail h2 { font-family: Georgia, "Yu Mincho", serif; font-size: 14px; letter-spacing: .03em; }
.step-number {
  width: 26px; height: 26px; flex-basis: 26px;
  border: 2px solid var(--brass-light); border-radius: 3px; background: #285f51;
  box-shadow: 0 2px 0 #5e3a20; transform: rotate(-3deg);
}

.facility-options { gap: 6px; }
.facility-option {
  min-height: 72px; grid-template-columns: 58px minmax(0, 1fr); gap: 4px;
  padding: 5px 7px 5px 3px; border: 0; border-left: 4px solid transparent; border-radius: 0;
  color: #31433c; background: rgba(255,250,232,.58); box-shadow: inset 0 -1px 0 rgba(98,69,37,.18);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.facility-option:hover { border-color: var(--brass); background: rgba(255,247,214,.9); box-shadow: inset 0 -1px 0 rgba(98,69,37,.22); translate: 0; }
.facility-option:active { translate: 1px 1px; }
.facility-option.is-selected { border-color: #2c715d; background: rgba(221,237,207,.92); box-shadow: inset 0 0 0 1px rgba(48,104,85,.2); }
.facility-option:disabled { opacity: .48; box-shadow: inset 0 -1px 0 rgba(98,69,37,.13); }
.facility-option b { font-size: 10px; }
.facility-option small { color: #776a58; font-size: 7.5px; }
.facility-option > strong {
  justify-self: start; padding: 2px 7px; border: 1px solid #c69b4a; border-radius: 50%;
  color: #6b451d; background: #f2d788; box-shadow: inset 0 0 0 1px #fff0ba;
  font: 900 10px Georgia, serif;
}
.facility-glyph {
  width: 58px; height: 58px; border: 0; border-radius: 0; background-color: transparent;
  background-image: url("./assets/facility-sprites-v2.png"); background-repeat: no-repeat; background-size: 200% 200%;
  box-shadow: none; color: transparent; text-indent: -9999px; filter: drop-shadow(0 2px 1px rgba(64,38,22,.24));
}
.counter-glyph { background-position: 0 0; }
.self-glyph { background-position: 100% 0; }
.return-glyph { background-position: 0 100%; }
.guide-glyph { background-position: 100% 100%; }

.wave-button, .detail-actions button, .guide-action-button {
  border-radius: 3px;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
}
.wave-button { border: 1px solid var(--brass-light); background: #2c715e; box-shadow: 0 3px 0 #4a2b19; }
.detail-actions button { border-color: #b58d4a; background: rgba(255,249,226,.84); box-shadow: 0 2px 0 #a47a3d; }
.detail-actions .policy-button { border-color: #6d9b88; background: #e2efe1; box-shadow: 0 2px 0 #6f907c; }
.guide-control-card > div { margin-bottom: 6px; }
.guide-control-card > div span { font-size: 15px; }
.guide-action-button { border-color: #ebc878; background: #a7612c; box-shadow: 0 3px 0 #59311b; }

.librarian-dialogue {
  min-height: 96px; grid-template-columns: 112px minmax(0, 1fr); gap: 5px; padding: 5px 12px 6px;
  border-top: 4px solid var(--brass);
  background-image: linear-gradient(90deg, rgba(34,99,82,.76), rgba(21,77,64,.86)), url("./assets/wood-texture-v2.jpg");
  background-size: auto, 430px 430px; box-shadow: inset 0 3px 0 var(--wood-dark);
}
.dialogue-portrait img {
  left: 0; bottom: -6px; width: 112px; height: 112px;
  filter: drop-shadow(0 3px 0 rgba(7,52,44,.2));
}
.dialogue-bubble {
  align-self: center; min-height: 76px; padding: 8px 13px 7px 16px;
  border: 0; border-left: 6px solid var(--brass); border-radius: 0;
  background: #fbefd0 url("./assets/paper-texture-v2.jpg") center / 420px 420px;
  box-shadow: none; filter: drop-shadow(0 3px 1px rgba(35,22,13,.36));
  clip-path: polygon(0 8px, 9px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 9px) 100%, 0 100%);
}
.dialogue-bubble::before { display: none; }
.dialogue-heading > strong {
  padding: 2px 9px 3px; border-radius: 2px; background: #2d6959;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 5px 100%);
}
.dialogue-bubble > #game-status { margin: 3px 0 5px; font-size: 12px; }
.dialogue-forecast { gap: 6px; padding-top: 4px; border-top: 1px solid rgba(116,77,39,.24); }
.dialogue-forecast > span {
  padding: 3px 8px 5px; border-radius: 0; color: #6e421c; background: #edcc70;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.forecast-rushes span {
  padding: 3px 7px 5px; border: 0; border-radius: 0; color: #6e421c; background: #e8c46c;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
}
.forecast-rushes span.is-calm { color: #fff7dc; background: #3f7d66; }
.librarian-dialogue.is-rushing {
  background-image: linear-gradient(90deg, rgba(184,83,49,.72), rgba(133,43,42,.84)), url("./assets/wood-texture-v2.jpg");
}

.statusbar {
  min-height: 32px; padding: 5px 18px; border-top: 3px solid var(--brass); color: #f6e9c8;
  background-image: linear-gradient(rgba(54,30,18,.7), rgba(54,30,18,.7)), url("./assets/wood-texture-v2.jpg");
  background-size: auto, 420px 420px; box-shadow: inset 0 3px 0 #26160f;
}
.legend { color: #f6e9c8; }
.legend-dot { border-color: var(--brass-light); box-shadow: none; }

.toast {
  border: 2px solid #f0d486; border-radius: 3px; background: #b94e42; box-shadow: 0 3px 0 #512a21;
  transform: translate(-50%, -16px) scale(.92) rotate(-1deg);
  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);
}
.toast.is-visible { transform: translate(-50%, 0) scale(1) rotate(-1deg); }

.overlay {
  position: fixed; inset: 0; z-index: 30; padding: 24px;
  background: rgba(17,47,39,.78); backdrop-filter: blur(7px) saturate(.72);
}
.overlay-card {
  border: 9px solid var(--wood); border-radius: 6px;
  background: #fbefd0 url("./assets/paper-texture-v2.jpg") center / 560px 560px;
  box-shadow: 0 0 0 3px var(--brass), 0 14px 0 #2c1a11, 0 28px 55px rgba(0,0,0,.38);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
.overlay-card::before { inset: 9px; z-index: 0; border: 1px solid rgba(143,100,43,.28); border-radius: 0; }
.overlay-card > * { position: relative; z-index: 1; }
.title-card { width: min(820px, 94vw); }
.title-card::after {
  content: ""; position: absolute; left: 51%; top: 22px; bottom: 22px; width: 2px; z-index: 0;
  background: linear-gradient(transparent, rgba(96,63,34,.22) 12%, rgba(96,63,34,.22) 88%, transparent);
  box-shadow: 3px 0 8px rgba(83,49,22,.09);
}
.title-copy > p:not(.chapter) { color: #665c4d; }
.title-mascot figcaption {
  border: 2px solid var(--brass); border-radius: 2px;
  background: #fff7df url("./assets/paper-texture-v2.jpg") center / 330px 330px;
  box-shadow: 0 2px 0 rgba(79,47,24,.28);
  clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.title-mascot figcaption::after { display: none; }
.primary-button {
  border: 2px solid #e8cd7a; border-radius: 3px; background: #276d59;
  box-shadow: 0 5px 0 #402618, 0 8px 12px rgba(46,28,18,.2);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.primary-button:hover { box-shadow: 0 6px 0 #402618, 0 10px 14px rgba(46,28,18,.22); }
.result-card { background: #fbefd0 url("./assets/paper-texture-v2.jpg") center / 560px 560px; }
.result-stats { border-top: 2px solid rgba(116,77,39,.2); border-bottom: 2px solid rgba(116,77,39,.2); }
.result-stats div { border: 0; border-right: 1px solid rgba(116,77,39,.2); border-radius: 0; background: transparent; box-shadow: none; }
.result-stats div:last-child { border-right: 0; }

@media (max-width: 1120px) {
  .play-area { grid-template-columns: minmax(0, 1fr) 330px; }
  .brand { min-width: 250px; }
  .hud-item { min-width: 67px; padding-left: 28px; }
  .hud-item strong { font-size: 15px; }
  .facility-option { grid-template-columns: 50px minmax(0, 1fr); min-height: 66px; }
  .facility-glyph { width: 50px; height: 50px; }
}

@media (max-width: 900px) {
  .game-shell { width: 100%; margin: 0; border-width: 0; border-radius: 0; }
  .topbar { min-height: 76px; }
  .play-area { grid-template-columns: 1fr; }
  .control-deck { border-top: 7px solid var(--wood-dark); border-left: 0; box-shadow: inset 0 4px 0 var(--brass); }
  .librarian-dialogue { min-height: 100px; }
}

@media (max-width: 650px) {
  .topbar { padding: 7px; }
  .brand { min-width: 0; }
  .brand-mark { width: 39px; height: 41px; flex-basis: 39px; border-radius: 4px; }
  .hud-item { min-width: 61px; padding: 5px 4px 5px 25px; }
  .hud-item::before { left: 4px; }
  .overlay { padding: 10px; }
  .overlay-card { border-width: 6px; border-radius: 4px; }
  .title-card::after { display: none; }
  .facility-options { grid-template-columns: 1fr 1fr; }
  .librarian-dialogue { grid-template-columns: 88px minmax(0, 1fr); padding-left: 6px; }
  .dialogue-portrait img { left: 0; width: 92px; height: 92px; }
}

.guide-control-card > div span { color: #2d6959; }
.guide-action-button:disabled {
  color: #685b48;
  border-color: #b69a69;
  background: rgba(230,216,185,.82);
  box-shadow: 0 2px 0 #9d8050;
  opacity: .74;
}
.guide-action-button.is-active:disabled {
  color: #fff8de;
  border-color: #e8c570;
  background: #a7612c;
  box-shadow: 0 3px 0 #59311b;
  opacity: 1;
}

/* v1.7: 明るいオークとセージを使った現代の公共図書館。 */
:root {
  --modern-green: #2f675c;
  --modern-green-deep: #234e46;
  --modern-sage: #89a99e;
  --modern-mint: #dcebe5;
  --modern-oak: #d7b47d;
  --modern-oak-light: #f0d7a7;
  --modern-coral: #ef916e;
  --modern-ink: #263d38;
  --modern-muted: #5f716b;
}

body {
  color: var(--modern-ink);
  background-color: #477f72;
  background-image: linear-gradient(rgba(48,103,91,.84), rgba(48,103,91,.9)), url("./assets/oak-texture-v3.jpg");
  background-size: auto, 720px 720px;
}

.game-shell {
  width: min(1320px, calc(100vw - 8px));
  margin: 4px auto 7px;
  border: 4px solid #e0c28f;
  border-radius: 18px;
  background-color: #faf9f4;
  background-image: linear-gradient(rgba(255,255,255,.76), rgba(255,255,255,.76)), url("./assets/acoustic-texture-v3.jpg");
  background-position: center;
  background-size: auto, 560px 560px;
  box-shadow: 0 0 0 3px #204d44, 0 8px 0 #20483f, 0 18px 38px rgba(15,46,39,.35);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) auto auto;
  min-height: 72px;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 4px solid var(--modern-oak);
  background: linear-gradient(105deg, #326f62, #285c52 68%, #224e46);
  box-shadow: inset 0 -2px 0 rgba(28,67,59,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.brand { min-width: 340px; gap: 11px; }
.brand-mark {
  width: 48px; height: 50px; flex-basis: 48px;
  border: 2px solid #f3ddaF; border-radius: 11px;
  background: #f3f1e8; box-shadow: 0 3px 0 #173f37, inset 0 0 0 3px #79a79a;
  clip-path: none; font-size: 24px; transform: rotate(-1deg);
}
.brand h1 { max-width: none; font-size: clamp(18px, 1.75vw, 23px); letter-spacing: .025em; }
.eyebrow { display: block; color: #f1d7a2; font-size: 10.5px; letter-spacing: .1em; }

.time-controls {
  gap: 5px; padding: 4px;
  border: 2px solid rgba(231,206,157,.7); border-radius: 10px;
  background: rgba(20,67,58,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.time-controls button {
  width: 34px; height: 34px;
  border: 0; border-radius: 7px; background: rgba(255,255,255,.1);
  box-shadow: 0 2px 0 #173d35; font-size: 13px;
}
.time-controls button.is-active { color: #284940; background: #f1d8a5; box-shadow: inset 0 0 0 2px #d0a967; }

.hud { gap: 6px; }
.hud-item {
  min-width: 94px; padding: 7px 9px 6px 34px;
  border: 1px solid #e2c78f; border-radius: 9px;
  color: var(--modern-ink);
  background-color: #fbfaf6;
  background-image: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), url("./assets/acoustic-texture-v3.jpg");
  background-position: center;
  background-size: auto, 360px 360px;
  box-shadow: 0 3px 0 rgba(22,57,50,.75), inset 0 0 0 1px rgba(255,255,255,.58);
}
.hud-item::before {
  left: 8px; width: 20px; height: 25px;
  border-radius: 6px; color: #fff9e8; background: #4d8275;
  clip-path: none; font-size: 10px;
}
.hud-item span { color: #61726c; font-size: 9.5px; letter-spacing: .035em; white-space: nowrap; }
.hud-item strong { font-family: inherit; font-size: 20px; line-height: 1.02; }
.hud-item.satisfaction {
  background-color: #fff4ef;
  background-image: linear-gradient(rgba(255,248,244,.76), rgba(255,248,244,.76)), url("./assets/acoustic-texture-v3.jpg");
}
.wave-progress i { height: 4px; margin-top: 5px; background: #d1d7ce; }
.wave-progress i b { background: linear-gradient(90deg, #4c8b78, #ef9f70); }

.play-area { grid-template-columns: minmax(0, 1fr) 420px; background: #f3efe5; }
.stage-column, .stage-wrap, #game-canvas { background: #79a99e; }

.control-deck {
  gap: 0; padding: 24px 12px 10px;
  border-left: 8px solid var(--modern-oak);
  background-color: #f4f2e9;
  background-image: linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)), linear-gradient(90deg, transparent 35px, rgba(72,126,113,.12) 35px, rgba(72,126,113,.12) 37px, transparent 37px), url("./assets/acoustic-texture-v3.jpg");
  background-size: auto, auto, 520px 520px;
  box-shadow: inset 3px 0 0 #f3ddb2, inset 10px 0 18px rgba(80,97,84,.08);
}
.control-deck::before {
  content: "MODERN LIBRARY SERVICE CONSOLE";
  top: 7px; left: 47px; color: #618078;
  font: 900 9px ui-rounded, "Yu Gothic", sans-serif; letter-spacing: .14em;
}
.build-area, .facility-detail, .guide-control-card {
  padding: 11px 8px 14px 26px;
  border-bottom: 2px solid rgba(66,105,95,.16);
}
.facility-detail { padding-top: 14px; }
.panel-heading { margin-bottom: 9px; }
.panel-heading h2, .facility-detail h2 {
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px; letter-spacing: .01em;
}
.step-number {
  width: 29px; height: 29px; flex-basis: 29px;
  border: 2px solid #e9d6aa; border-radius: 8px;
  background: #3d7669; box-shadow: 0 2px 0 #31584f; transform: none;
  font-size: 12px;
}

.facility-options { gap: 8px; isolation: isolate; }
.facility-option {
  position: relative;
  height: 68px; min-height: 68px; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px;
  padding: 6px 8px 6px 4px;
  border: 1px solid rgba(80,120,109,.16); border-left: 5px solid transparent; border-radius: 12px;
  background: rgba(255,255,252,.68); box-shadow: 0 2px 0 rgba(91,107,95,.15);
  clip-path: none;
}
.facility-option:hover, .facility-option:focus-within { z-index: 20; }
.facility-option:hover { border-color: #91b5aa; background: rgba(255,255,255,.93); box-shadow: 0 3px 0 rgba(91,107,95,.17); translate: 0 -1px; }
.facility-option.is-selected {
  border-color: #4b8a7a; border-left-color: var(--modern-coral);
  background: rgba(220,239,231,.96); box-shadow: 0 2px 0 rgba(68,113,101,.2);
}
.facility-option.is-unavailable:not(.is-disabled) {
  border-color: rgba(126,139,133,.28); background: rgba(244,246,242,.78);
}
.facility-option.is-unavailable:not(.is-disabled) > .facility-drag-handle .facility-glyph,
.facility-option.is-unavailable:not(.is-disabled) > .facility-select-button .facility-name { opacity: .62; }
.facility-option.is-unavailable:not(.is-disabled) > .facility-select-button strong {
  color: #7b7161; border-color: #cfc4ac; background: #e9e2d3;
}
.facility-option.is-disabled { opacity: 1; }
.facility-option.is-disabled > .facility-drag-handle,
.facility-option.is-disabled > .facility-select-button { opacity: .46; }
.facility-drag-handle { width: 50px; height: 56px; }
.facility-select-button > .facility-name { grid-row: 1; min-width: 0; align-self: end; }
.facility-select-button > .facility-name b { font-size: 13px; line-height: 1.25; }
.facility-select-button > strong {
  position: static; grid-row: 2; justify-self: start; align-self: start;
  padding: 3px 8px; border: 1px solid #d9b979; border-radius: 11px;
  color: #604b2d; background: #f4dfae; font: 900 11.5px inherit;
}
.facility-effect-tooltip {
  position: absolute; top: 50%; right: calc(100% + 11px); z-index: 40;
  width: 238px; padding: 12px 13px;
  border: 1px solid rgba(67,112,100,.28); border-radius: 13px;
  color: #52645e; background: rgba(255,253,246,.98);
  box-shadow: 0 9px 24px rgba(35,66,58,.2), 0 2px 0 rgba(129,103,66,.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(8px, -50%); transition: opacity .14s ease, transform .14s ease, visibility .14s;
  text-align: left; white-space: normal;
}
.facility-effect-tooltip::after {
  content: ""; position: absolute; top: 50%; right: -7px;
  width: 12px; height: 12px;
  border-top: 1px solid rgba(67,112,100,.28); border-right: 1px solid rgba(67,112,100,.28);
  background: #fffdf6; transform: translateY(-50%) rotate(45deg);
}
.facility-option:hover > .facility-effect-tooltip,
.facility-option:focus-within > .facility-effect-tooltip {
  opacity: 1; visibility: visible; transform: translate(0, -50%);
}
.facility-option.is-icon-dragging > .facility-effect-tooltip {
  opacity: 0; visibility: hidden; transform: translate(8px, -50%);
}
.facility-option.is-icon-dragging { cursor: grabbing; }
.facility-option .facility-effect-tooltip > b,
.facility-option .facility-effect-tooltip > span,
.facility-option .facility-effect-tooltip > small {
  display: block; overflow: visible; padding: 0; text-overflow: clip; white-space: normal;
}
.facility-option .facility-effect-tooltip > b {
  margin-bottom: 5px; color: #2f685b; font-size: 12px; line-height: 1.35;
}
.facility-option .facility-effect-tooltip > span {
  color: #52645e; font-size: 10.5px; font-weight: 650; line-height: 1.55;
}
.facility-option .facility-effect-tooltip > small {
  margin-top: 7px; color: #b66350; font-size: 9.5px; font-weight: 900; line-height: 1.35;
}
.facility-glyph {
  width: 50px; height: 50px;
  background-image: url("./assets/facility-sprites-v3.png");
  filter: drop-shadow(0 2px 1px rgba(51,69,62,.2));
}
.plant-glyph {
  border: 0; border-radius: 0; color: transparent;
  background-color: transparent; background-image: url("./assets/facility-plant-v1.png?v=1.20.2");
  background-position: center; background-size: contain; background-repeat: no-repeat;
  box-shadow: none; text-indent: -9999px;
}
.reference-glyph {
  border: 0; border-radius: 0; color: transparent;
  background-color: transparent; background-image: url("./assets/facility-reference-v1.png?v=1.20.2");
  background-position: center; background-size: contain; background-repeat: no-repeat;
  box-shadow: none; text-indent: -9999px;
}
.wave-button, .detail-actions button, .guide-action-button {
  border-radius: 9px; clip-path: none; font-size: 11.5px;
}
.wave-button {
  padding: 9px 11px; border: 1px solid #c7dfd6;
  background: #367968; box-shadow: 0 3px 0 #28564c;
}
.guide-control-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 9px; }
.guide-control-card > div { margin-bottom: 0; }
.guide-control-card > div span { color: var(--modern-coral); font-size: 17px; }
.guide-control-card > div strong { font-size: 13px; }
.guide-action-button { padding: 10px 11px; }
.guide-action-button b { font-size: 12px; }
.guide-action-button small { font-size: 9.5px; }
#guide-action-status[hidden] { display: none; }
.guide-action-button:disabled {
  color: #62716c; border-color: #bdcbc5; background: rgba(224,231,226,.82); box-shadow: 0 2px 0 #a8b7b0;
}
.detail-copy p { margin-top: 6px; color: var(--modern-muted); font-size: 10.5px; line-height: 1.45; }
.detail-actions { gap: 7px; }
.detail-actions button { padding: 9px 11px; font-size: 11px; }

.librarian-dialogue {
  min-height: 96px; grid-template-columns: 112px minmax(0, 1fr); gap: 7px; padding: 5px 13px 6px;
  border-top: 5px solid var(--modern-oak);
  background: linear-gradient(100deg, #477f72, #326b5f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12);
}
.dialogue-portrait img { left: 0; bottom: -6px; width: 112px; height: 112px; }
.dialogue-portrait { overflow: hidden; border-radius: 11px; }
.dialogue-portrait img {
  /* 顔だけでなく案内する指まで見える、少し引いたポートレート。 */
  left: -16px;
  bottom: -56px;
  width: 156px;
  height: 156px;
  object-position: center;
}
.dialogue-bubble {
  min-height: 78px; padding: 8px 15px 7px;
  border: 1px solid rgba(72,121,108,.2); border-left: 7px solid var(--modern-coral); border-radius: 13px;
  background-color: #fbfaf6;
  background-image: linear-gradient(rgba(255,255,255,.76), rgba(255,255,255,.76)), url("./assets/acoustic-texture-v3.jpg");
  background-position: center;
  background-size: auto, 440px 440px;
  filter: drop-shadow(0 3px 1px rgba(21,57,49,.25)); clip-path: none;
}
.dialogue-heading > strong { padding: 3px 10px 4px; border-radius: 7px; background: #3e786b; clip-path: none; font-size: 11px; }
.dialogue-bubble > #game-status { margin: 4px 0 7px; font-size: 14px; line-height: 1.4; }
.dialogue-forecast { gap: 8px; padding-top: 6px; }
.dialogue-forecast > span { padding: 4px 9px; border-radius: 7px; background: #f1d59b; clip-path: none; font-size: 10px; }
.dialogue-forecast > p { font-size: 10.5px; line-height: 1.35; }
.forecast-rushes span { padding: 4px 8px; border-radius: 7px; background: #efd49d; clip-path: none; font-size: 9.5px; }
.forecast-live { font-size: 11px; }
.librarian-dialogue.is-rushing { background: linear-gradient(100deg, #e5966c, #bf645c); }

.statusbar {
  min-height: 31px; padding: 5px 18px; border-top: 3px solid var(--modern-oak);
  background: #28594f; box-shadow: inset 0 2px 0 rgba(255,255,255,.08); font-size: 12px;
}
.legend { gap: 16px; color: #f7f3e7; }
.legend-dot { width: 14px; height: 14px; border-color: #f7f0db; }

.overlay { background: rgba(29,72,62,.73); backdrop-filter: blur(8px) saturate(.8); }
.overlay-card {
  border: 8px solid var(--modern-oak); border-radius: 18px;
  background-color: #fbfaf6;
  background-image: linear-gradient(rgba(255,255,255,.76), rgba(255,255,255,.76)), url("./assets/acoustic-texture-v3.jpg");
  background-position: center;
  background-size: auto, 580px 580px;
  box-shadow: 0 0 0 3px #3f7769, 0 12px 0 #28544b, 0 26px 54px rgba(17,50,43,.35);
  clip-path: none;
}
.overlay-card::before { border-color: rgba(74,127,113,.2); border-radius: 11px; }
.title-card { width: min(860px, 94vw); }
.title-card::after { background: linear-gradient(transparent, rgba(72,117,105,.18) 12%, rgba(72,117,105,.18) 88%, transparent); }
.title-copy .chapter { color: #4f7d72; font-size: 11px; }
.overlay-card h2 { font-size: clamp(36px, 4.5vw, 54px); }
.title-copy > p:not(.chapter) { color: #536660; font-size: 15px; line-height: 1.7; }
.title-mascot figcaption {
  border-color: #78a69a; border-radius: 10px;
  background-color: #fffefa;
  background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url("./assets/acoustic-texture-v3.jpg");
  background-position: center;
  background-size: auto, 360px 360px;
  clip-path: none; font-size: 11.5px;
}
.primary-button {
  min-width: 205px; padding: 14px 21px;
  border-color: #d9edE5; border-radius: 11px; background: #397c6c;
  box-shadow: 0 4px 0 #28574d, 0 7px 12px rgba(35,77,67,.2); clip-path: none;
  font-size: 15px;
}
.text-button { font-size: 13px; }
.result-stats dt { font-size: 11px; }
.result-stats dd { font-size: 23px; }
#restart-button,
#restart-button:hover {
  color: #fffef7;
  text-shadow: 0 1px 0 rgba(21, 67, 57, .5);
}

@media (max-width: 1120px) {
  .play-area { grid-template-columns: minmax(0, 1fr) 354px; }
  .brand { min-width: 270px; }
  .brand h1 { max-width: 225px; font-size: 18px; }
  .hud-item { min-width: 72px; padding-left: 30px; }
  .facility-option { height: 68px; min-height: 68px; grid-template-columns: 50px minmax(0, 1fr); }
  .facility-glyph { width: 50px; height: 50px; }
}

@media (max-width: 900px) {
  .play-area { grid-template-columns: 1fr; }
  .control-deck { border-top-color: var(--modern-oak); border-left: 0; }
  .topbar { min-height: 82px; display: flex; }
}

@media (max-width: 650px) {
  .facility-option b { font-size: 11.5px; }
  .facility-option small { font-size: 9px; }
  .librarian-dialogue { grid-template-columns: 94px minmax(0, 1fr); }
  .dialogue-portrait img { left: -16px; bottom: -50px; width: 148px; height: 148px; }
  .dialogue-bubble > #game-status { font-size: 13px; }
  .dialogue-forecast > p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* v1.9: 満足度を主要リソースとして常時読み取れるゲージにする。 */
.hud-item.satisfaction {
  min-width: 176px;
  grid-template-rows: auto auto auto;
  padding: 5px 10px 6px 36px;
  border-color: #e5aa92;
  box-shadow: 0 3px 0 #7c4e43, inset 0 0 0 1px rgba(255,255,255,.62);
}
.hud-item.satisfaction > span {
  color: #7b5148;
  font-size: 10px;
  font-weight: 900;
}
.hud-item.satisfaction > strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 1px 0 2px;
  line-height: 1;
}
.hud-item.satisfaction #satisfaction-value {
  color: #b14f45;
  font: 1000 23px/1 ui-rounded, "Hiragino Maru Gothic ProN", sans-serif;
}
.hud-item.satisfaction strong small {
  color: #8a655d;
  font-size: 9px;
}
.satisfaction-gauge {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(102,70,63,.24);
  border-radius: 99px;
  background: #decfc5;
  box-shadow: inset 0 1px 2px rgba(69,47,43,.18);
}
.satisfaction-gauge b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e57d68, #efaa76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  transition: width .28s ease, background .28s ease;
}
.hud-item.satisfaction.is-caution .satisfaction-gauge b { background: linear-gradient(90deg, #df795e, #e4bb62); }
.hud-item.satisfaction.is-warning {
  color: #762e2b;
  background-color: #ffe0d5;
  animation: warning-pulse .8s infinite alternate;
}
.hud-item.satisfaction.is-warning .satisfaction-gauge b { background: linear-gradient(90deg, #b93737, #e56f55); }

/* 一斉案内の発動時だけ盤面へ重ねる、ゲームらしい横長カットイン。 */
.guide-cutin {
  position: absolute;
  z-index: 24;
  top: 50%;
  right: 20px;
  left: 20px;
  height: 230px;
  overflow: hidden;
  visibility: hidden;
  border: 5px solid #f2dba7;
  border-radius: 18px;
  background: #f8ecd2;
  box-shadow: 0 0 0 3px #3d786a, 0 13px 28px rgba(18,54,47,.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(105%, -50%) rotate(1deg);
}
.guide-cutin::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(253,246,225,.97) 0%, rgba(253,246,225,.88) 31%, rgba(253,246,225,.16) 58%, transparent 78%);
}
.guide-cutin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
.guide-cutin-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 30px;
  width: 42%;
  color: #275d52;
  text-shadow: 0 1px 0 #fff;
  transform: translateY(-50%);
}
.guide-cutin-copy span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff9e9;
  background: #e78468;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .1em;
}
.guide-cutin-copy strong {
  display: block;
  font: 1000 30px/1.15 ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .02em;
}
.guide-cutin-copy p {
  margin-top: 10px;
  color: #5c7169;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}
.guide-cutin.is-visible {
  visibility: visible;
  pointer-events: auto;
  animation: guide-cutin 1.8s cubic-bezier(.18,.82,.22,1) both;
}

@keyframes guide-cutin {
  0% { opacity: 0; transform: translate(105%, -50%) rotate(1deg); }
  14%, 78% { opacity: 1; transform: translate(0, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(-16%, -50%) rotate(-.5deg); }
}

@media (max-width: 900px) {
  .hud-item.satisfaction { min-width: 160px; }
  .guide-cutin { height: 210px; }
  .guide-cutin-copy strong { font-size: 26px; }
}

@media (max-width: 650px) {
  .hud-item.satisfaction { min-width: 150px; }
  .guide-cutin { right: 10px; left: 10px; height: 170px; }
  .guide-cutin-copy { left: 18px; width: 48%; }
  .guide-cutin-copy span { font-size: 7px; }
  .guide-cutin-copy strong { font-size: 20px; }
  .guide-cutin-copy p { margin-top: 6px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-cutin.is-visible { animation-duration: .01ms !important; }
  .satisfaction-gauge b { transition: none; }
}

/* v1.10.2: ロゴを主役にしたタイトルと、読み順を整理したチュートリアル。 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand h1 {
  max-width: 250px;
  font-size: 19px;
  line-height: 1.02;
  letter-spacing: .055em;
}
.brand h1 span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  opacity: .88;
}

.title-card {
  width: min(1120px, 96vw);
  min-height: 600px;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 0;
  padding: 30px 34px 27px;
}
.title-card::after {
  right: 444px;
  left: auto;
  top: 42px;
  bottom: 42px;
}
.title-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  padding-right: 18px;
  text-align: center;
}
.title-copy .chapter {
  color: #6c8b82;
  font-size: 12px;
  letter-spacing: .22em;
}
.title-logo {
  display: block;
  width: min(100%, 630px);
  height: 300px;
  margin: 8px 0 18px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 7px 8px rgba(42,83,70,.13));
  pointer-events: none;
}
.title-copy > .title-lead {
  margin: 0 0 7px;
  color: #315f55;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.35;
  letter-spacing: .035em;
}
.title-copy > .title-description {
  max-width: 500px;
  margin: 0;
  color: #60736c;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.75;
}
.title-actions {
  position: relative;
  z-index: 5;
  width: 100%;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
}
.title-actions button { position: relative; z-index: 1; pointer-events: auto; }
.title-actions .primary-button { min-width: 218px; margin-top: 8px; }
.title-actions .title-guide-button {
  margin-left: 0;
  color: #315f55;
  border-color: #a9c9bf;
  background: #edf5ef;
  box-shadow: 0 4px 0 #9bb8b0, 0 7px 12px rgba(35,77,67,.14);
}
.title-actions .title-guide-button:hover {
  color: #244d44;
  background: #f7fbf8;
  box-shadow: 0 6px 0 #9bb8b0, 0 10px 14px rgba(35,77,67,.16);
}
.title-copy > small {
  margin-top: 17px;
  color: #829089;
  font-size: 9px;
  letter-spacing: .16em;
  text-align: center;
}

.title-card > .title-credit {
  position: absolute;
  right: 454px;
  bottom: 11px;
  left: 34px;
  z-index: 7;
  margin: 0;
  color: #7a8983;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-align: center;
}

.title-credit a {
  color: #547b71;
  text-decoration-color: rgba(84, 123, 113, .45);
  text-underline-offset: 3px;
}

.title-credit a:hover {
  color: #315f55;
  text-decoration-color: currentColor;
}

.title-credit a:focus-visible {
  outline: 3px solid #ffe583;
  outline-offset: 3px;
  border-radius: 2px;
}
.title-mascot {
  height: 560px;
  margin: -10px -26px -27px -20px;
  pointer-events: none;
}
.title-mascot img {
  top: -8px;
  right: auto;
  bottom: auto;
  left: -140px;
  width: 650px;
  height: auto;
  max-height: none;
  animation: none;
}
.title-mascot figcaption {
  top: 28px;
  left: -146px;
  width: 178px;
  padding: 10px 13px;
  color: #355e55;
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}

.tutorial-card {
  width: min(760px, 94vw);
  padding: 28px 30px 24px;
  overflow: hidden;
}
.tutorial-card::after { display: none; }
.tutorial-topline {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(62,112,99,.18);
}
.tutorial-topline .chapter {
  color: #66877e;
  font-size: 10px;
  letter-spacing: .2em;
}
.tutorial-topline > span {
  min-width: 58px;
  padding: 5px 10px;
  border: 1px solid #c7ddd5;
  border-radius: 8px;
  color: #3d6f63;
  background: #edf5f1;
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
}
.tutorial-body {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  align-items: center;
  gap: 31px;
  margin: 22px 0 20px;
}
.tutorial-visual {
  position: relative;
  height: 245px;
  overflow: hidden;
  border: 1px solid #bdd7ce;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.78) 0 3px, transparent 3.5px),
    linear-gradient(155deg, #eef6ef, #d5e8df);
  background-size: 27px 27px, 100% 100%;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.38);
}
.tutorial-visual::after {
  content: "LIBRARY GUIDE";
  position: absolute;
  top: 14px;
  left: 15px;
  color: #6d9388;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .17em;
}
.tutorial-visual img {
  position: absolute;
  left: -14px;
  bottom: -32px;
  width: 250px;
  height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(49,93,81,.16));
}
.tutorial-copy { min-width: 0; }
.tutorial-kicker {
  margin: 0 0 8px;
  color: #d06f59 !important;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.tutorial-card .tutorial-copy h2 {
  max-width: 430px;
  margin: 0 0 13px;
  color: #264f47;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.22;
  letter-spacing: -.035em;
}
.tutorial-copy > #tutorial-message {
  max-width: 430px;
  margin: 0;
  color: #61726c;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.85;
}
.tutorial-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 17px;
  border-top: 1px solid rgba(62,112,99,.18);
}
.tutorial-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(28px, 48px));
  gap: 7px;
  margin: 0;
}
.tutorial-progress i {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: #dce5e0;
  transform: none;
}
.tutorial-progress i.is-active { background: linear-gradient(90deg, #e38368, #edb170); }
.tutorial-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.tutorial-actions .primary-button {
  min-width: 150px;
  margin: 0;
  padding: 11px 18px;
  font-size: 13px;
}
.tutorial-skip-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #b8cec7;
  border-radius: 50%;
  color: #53766c;
  background: #eef5f1;
  box-shadow: 0 3px 0 #b7c9c3;
  cursor: pointer;
  transition: translate .13s, background .13s, box-shadow .13s;
}
.tutorial-skip-button svg { width: 19px; height: 19px; fill: currentColor; }
.tutorial-skip-button:hover { translate: 0 -2px; color: #315f55; background: #f8fbf9; box-shadow: 0 5px 0 #b7c9c3; }
.tutorial-skip-button:active { translate: 0 2px; box-shadow: 0 1px 0 #b7c9c3; }
.tutorial-skip-button:focus-visible {
  outline: 4px solid #ffe583;
  outline-offset: 3px;
}

@media (max-width: 650px) {
  .brand h1 { max-width: 180px; font-size: 15px; }
  .brand h1 span { font-size: 8px; }
  .title-card { display: block; min-height: 0; padding: 22px 23px 52px; }
  .title-card::after, .title-mascot { display: none; }
  .title-copy { padding-right: 0; }
  .title-logo { width: min(100%, 440px); height: 220px; margin: 0 0 10px; }
  .title-copy > .title-lead { font-size: 17px; }
  .title-copy > .title-description { font-size: 12.5px; line-height: 1.65; }
  .title-actions { align-items: stretch; gap: 7px; }
  .title-actions .primary-button { min-width: 170px; }
  .title-card > .title-credit { right: 20px; bottom: 12px; left: 20px; }

  .tutorial-card { padding: 21px 22px 18px; }
  .tutorial-body { grid-template-columns: 112px minmax(0, 1fr); gap: 17px; margin: 17px 0; }
  .tutorial-visual { height: 182px; border-radius: 14px; }
  .tutorial-visual::after { top: 10px; left: 10px; font-size: 6px; }
  .tutorial-visual img { left: -26px; bottom: -21px; width: 190px; height: 190px; }
  .tutorial-kicker { margin-bottom: 6px; font-size: 9.5px; }
  .tutorial-card .tutorial-copy h2 { margin-bottom: 9px; font-size: 24px; line-height: 1.24; }
  .tutorial-copy > #tutorial-message { font-size: 12px; line-height: 1.65; }
  .tutorial-footer { gap: 12px; padding-top: 14px; }
  .tutorial-progress { grid-template-columns: repeat(4, minmax(18px, 32px)); gap: 5px; }
  .tutorial-actions { gap: 3px; }
  .tutorial-actions .primary-button { min-width: 122px; padding: 10px 12px; }
}

/* v1.19.0: 端末内に残る最高記録表示。 */
.title-best-record {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 13px;
  padding: 7px 13px;
  border: 1px solid rgba(76, 123, 111, .22);
  border-radius: 999px;
  color: #667971;
  background: rgba(239, 246, 242, .76);
}
.title-best-record > span {
  color: #4f7d72;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.title-best-record > strong {
  margin-left: 9px;
  font-size: 13.5px;
  line-height: 1;
}
.title-best-record > small {
  display: inline;
  margin: 0 0 0 9px;
  color: #72817b;
  font-size: 10.5px;
  letter-spacing: .02em;
}
.title-best-record.has-record > strong {
  color: #315f55;
  font-size: 19px;
}
.result-card .result-record-note {
  margin: 12px 0 3px;
  padding: 9px 12px;
  border: 1px solid #b9d3ca;
  border-radius: 10px;
  color: #315f55;
  background: #edf5f1;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.result-card .result-record-note.is-new {
  border-color: #e0b66a;
  color: #75480e;
  background: #fff0bb;
  box-shadow: 0 3px 0 rgba(184, 122, 29, .2);
}

@media (max-width: 650px) {
  .title-best-record { flex-wrap: wrap; gap: 3px 0; border-radius: 13px; }
  .title-best-record > small { flex-basis: 100%; margin-left: 0; }
}

/* v1.19.5: 専用背景と独立したシステムロゴのタイトル画面。 */
.title-card {
  min-height: 600px;
  background-color: #f4f0e7;
  background-image: url("./assets/title.png?v=1.20.2");
  background-position: center;
  background-size: cover;
}
.title-card::after {
  top: auto;
  right: 420px;
  bottom: 0;
  left: 0;
  width: auto;
  height: 190px;
  background: linear-gradient(transparent, rgba(250,248,241,.86) 43%, rgba(250,248,241,.98) 76%);
  box-shadow: none;
}
.title-card .title-copy {
  position: absolute;
  right: 480px;
  bottom: 34px;
  left: 8px;
  z-index: 5;
  display: block;
  padding: 0;
}
.title-card .title-copy .chapter,
.title-card .title-mascot {
  display: none;
}
.title-card .title-logo {
  display: block;
  width: min(100%, 610px);
  height: 285px;
  margin: 0 auto 8px;
}
.title-card .title-actions .primary-button {
  margin-top: 0;
}
.title-card .title-copy > small {
  margin-top: 12px;
  color: #5f706a;
}
.title-card > .title-credit {
  right: 480px;
  left: 8px;
  color: #596b64;
}

@media (max-width: 650px) {
  .title-card {
    min-height: 0;
    padding: 22px 23px 52px;
    background-image:
      linear-gradient(rgba(251,250,246,.84), rgba(251,250,246,.91)),
      url("./assets/title.png?v=1.20.2");
    background-position: center, right center;
    background-size: auto, cover;
  }
  .title-card .title-copy {
    position: relative;
    inset: auto;
    display: flex;
    padding: 0;
  }
  .title-card .title-copy .chapter,
  .title-card .title-logo {
    display: block;
  }
  .title-card > .title-credit {
    right: 20px;
    left: 20px;
  }
  .title-card .title-mascot { display: none; }
}

/* v1.19.8: スマホでは主要HUDをタイトル直下へ並べ、司書メッセージを画面末尾へ送る。 */
@media (max-width: 650px) {
  body { overflow-x: hidden; }

  .game-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 0;
    padding: 8px;
  }

  .brand {
    grid-column: 1;
    min-width: 0;
  }

  .brand > div { min-width: 0; }
  .brand h1 { max-width: none; }

  .time-controls {
    position: static;
    grid-column: 2;
    align-self: center;
  }

  .time-controls button {
    width: 30px;
    height: 30px;
  }

  .hud {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .hud-item,
  .hud-item:nth-child(2),
  .hud-item.satisfaction {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 6px 6px 6px 29px;
  }

  .hud-item:nth-child(3) { display: none; }
  .hud-item::before { left: 5px; }
  .hud-item span { overflow: hidden; font-size: 8.5px; text-overflow: ellipsis; }
  .hud-item strong { font-size: 16px; }
  .hud-item.satisfaction #satisfaction-value { font-size: 18px; }
  .hud-item.satisfaction strong small { font-size: 8px; }
  .satisfaction-gauge { height: 6px; }

  /* display:contentsで盤面・設備・凡例・会話欄を同じ並び替え軸へ載せる。 */
  .play-area,
  .stage-column { display: contents; }
  .stage-wrap { order: 20; width: 100%; }
  .control-deck { order: 30; width: 100%; min-width: 0; }
  .statusbar { order: 40; width: 100%; }
  .librarian-dialogue {
    order: 50;
    width: 100%;
    min-width: 0;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 7px 8px 8px 6px;
  }

  .dialogue-portrait img {
    left: -17px;
    bottom: -46px;
    width: 128px;
    height: 128px;
  }

  .dialogue-bubble { min-width: 0; padding-inline: 11px; }
  .dialogue-heading { min-width: 0; }
  .dialogue-forecast { min-width: 0; }
  .dialogue-forecast > p { flex: 1 1 100%; }
  .forecast-rushes { flex: 1 1 100%; margin-left: 0; }
}

/* v1.19.9: タッチ操作では選択中の設備説明をカード列の内側へ展開する。 */
@media (max-width: 650px) {
  /* v1.19.10: 後続の案内・詳細欄より設備説明を手前へ重ねる。 */
  .build-area {
    position: relative;
    z-index: 10;
  }

  .guide-control-card,
  .facility-detail {
    position: relative;
    z-index: 1;
  }

  .facility-option.is-effect-open { z-index: 25; }

  .facility-effect-tooltip {
    top: calc(100% + 8px);
    right: auto;
    left: 0;
    width: calc(200% + 8px);
    max-width: calc(100vw - 28px);
    transform: translateY(-6px);
  }

  .facility-option:nth-child(even) > .facility-effect-tooltip {
    right: 0;
    left: auto;
  }

  .facility-effect-tooltip::after {
    top: -7px;
    right: auto;
    left: 28px;
    border: 0;
    border-top: 1px solid rgba(67,112,100,.28);
    border-left: 1px solid rgba(67,112,100,.28);
    transform: rotate(45deg);
  }

  .facility-option:nth-child(even) > .facility-effect-tooltip::after {
    right: 28px;
    left: auto;
  }

  /* v1.19.11: タッチ由来のhover/focusが残っても、再タップで確実に閉じる。 */
  .facility-option:not(.is-effect-open):hover > .facility-effect-tooltip,
  .facility-option:not(.is-effect-open):focus-within > .facility-effect-tooltip {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  .facility-option.is-effect-open > .facility-effect-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .facility-option.is-icon-dragging > .facility-effect-tooltip {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
}

/* v1.20.0: ゲームオーバー記録の共有と結果カード保存。 */
/* v1.20.2: X投稿機能へ変更。 */
.result-card { width: min(680px, 96%); }
.result-share-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px 18px;
  margin: 14px 0 17px;
  padding: 14px 15px;
  border: 2px solid rgba(57,124,108,.22);
  border-radius: 16px;
  background: rgba(241,249,244,.84);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 4px 0 rgba(49,95,85,.12);
}
.result-share-panel[hidden] { display: none; }
.result-share-copy { min-width: 0; }
.result-share-copy strong {
  display: block;
  color: #315f55;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .02em;
}
.result-share-copy span {
  display: block;
  margin-top: 3px;
  color: #65766f;
  font-size: 10.5px;
  font-weight: 750;
}
.result-share-buttons { display: flex; gap: 8px; }
.result-share-button,
.result-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 13px;
  border: 2px solid #315f55;
  border-radius: 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  transition: translate .12s, box-shadow .12s, opacity .12s;
}
.result-share-button {
  color: #fffdf6;
  background: #397c6c;
  box-shadow: 0 4px 0 #244f45;
}
.result-card-button {
  color: #315f55;
  border-color: #c7ad6a;
  background: #fff5d7;
  box-shadow: 0 4px 0 #c8ad69;
}
.result-share-button:hover,
.result-card-button:hover { translate: 0 -1px; }
.result-share-button:active,
.result-card-button:active { translate: 0 3px; box-shadow: none; }
.result-share-button:disabled,
.result-card-button:disabled { opacity: .48; cursor: wait; translate: 0; }
.result-share-button.is-busy::after,
.result-card-button.is-busy::after { content: "…"; }
.result-share-feedback {
  grid-column: 1 / -1;
  min-height: 1.4em;
  margin: -2px 2px 0 !important;
  color: #397c6c !important;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4 !important;
  text-align: right;
}
.result-share-feedback.is-error { color: #a95043 !important; }
.result-navigation { display: flex; justify-content: center; align-items: center; }

@media (max-width: 650px) {
  .result-card { width: min(560px, 98%); }
  .result-share-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .result-share-buttons { display: grid; grid-template-columns: 1fr; }
  .result-share-button,
  .result-card-button { width: 100%; min-height: 44px; }
  .result-share-feedback { text-align: left; }
  .result-navigation { flex-direction: column; gap: 8px; }
  .result-navigation .secondary-button { margin-left: 0; }
}