:root {
    --ink: #16251f;
    --paper: #f7efd9;
    --cream: #fff9e9;
    --wood: #945a37;
    --wood-dark: #503521;
    --wood-light: #d69b5e;
    --green: #416d4a;
    --green-dark: #183d2c;
    --yellow: #f4ca52;
    --blue: #7db7b5;
    --shadow: 6px 6px 0 rgba(22, 37, 31, .28);
    --pixel-border: 3px solid var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.site-header {
    position: fixed;
    inset: 18px 22px auto;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 58px;
    padding: 8px 12px;
    border: var(--pixel-border);
    background: rgba(255, 249, 233, .94);
    box-shadow: 4px 4px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: var(--pixel-border); background: #fff; color: var(--ink);
    box-shadow: inset 8px 0 0 var(--ink), inset -8px 0 0 var(--ink);
}
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .08em; }
.brand small { margin-top: 2px; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { padding: 8px 10px; font-size: 13px; font-weight: 800; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--yellow); outline: 2px solid var(--ink); }
.menu-button { display: none; border: 0; background: transparent; font-weight: 900; }

.workshop-hero {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(#8fc4c0 0 58%, #d4b36c 58% 100%);
}
.hero-copy {
    position: absolute;
    z-index: 8;
    top: 105px;
    left: 5vw;
    max-width: 520px;
    padding: 18px 20px;
    border: var(--pixel-border);
    background: rgba(255, 249, 233, .94);
    box-shadow: var(--shadow);
}
.eyebrow { margin: 0 0 10px; font: 900 11px/1 ui-monospace, monospace; letter-spacing: .18em; color: var(--green); }
.hero-copy h1 { margin: 0; font-size: clamp(32px, 4vw, 62px); line-height: 1.04; letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--green); font-style: normal; }
.hero-copy > p:last-child { margin: 13px 0 0; font-weight: 700; }

.scene-frame { position: absolute; inset: 0; overflow: hidden; }
.scene-sky { position: absolute; inset: 0; background: linear-gradient(#87bdbb, #d7d19a); }
.scene-sky::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 24px 24px;
}
.pixel-cloud { position: absolute; width: 84px; height: 22px; background: rgba(255,255,255,.75); box-shadow: 18px -16px 0 rgba(255,255,255,.75), 44px -8px 0 rgba(255,255,255,.75); }
.cloud-one { top: 18%; right: 16%; }
.cloud-two { top: 31%; left: 46%; transform: scale(.65); opacity: .65; }

.workshop-track {
    position: absolute;
    z-index: 3;
    left: max(24px, 3vw);
    right: max(24px, 3vw);
    bottom: 8vh;
    display: grid;
    grid-template-columns: .85fr 1.2fr 1.15fr 1fr .9fr .68fr;
    min-width: 1080px;
    height: min(48vh, 440px);
    border: 6px solid var(--wood-dark);
    border-bottom-width: 12px;
    background: var(--wood-dark);
    box-shadow: 10px 12px 0 rgba(22,37,31,.28);
}
.room, .extension {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 0;
    border-right: 6px solid var(--wood-dark);
    background-color: #e8bc75;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(80,53,33,.08) 1px, transparent 1px);
    background-size: 20px 20px;
}
.room { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.room:hover, .room:focus-visible { z-index: 2; filter: brightness(1.12); outline: 5px solid var(--yellow); outline-offset: -8px; }
.room:active { transform: translateY(3px); }
.room::after { content: ""; position: absolute; inset: auto 0 0; height: 22px; background: repeating-linear-gradient(90deg, #85502f 0 30px, #9f633d 30px 60px); border-top: 4px solid var(--wood-dark); }
.room-sign {
    position: absolute; z-index: 5; top: 14px; left: 50%; transform: translateX(-50%);
    min-width: 74px; padding: 5px 8px; border: 3px solid var(--ink); background: var(--cream);
    box-shadow: 3px 3px 0 var(--ink); font: 900 12px/1 ui-monospace, monospace; white-space: nowrap;
}
.room-reception { background-color: #e5c890; }
.door { position: absolute; left: 18%; bottom: 22px; width: 45%; height: 66%; border: 5px solid var(--wood-dark); background: #496d58; box-shadow: inset -10px 0 rgba(0,0,0,.12); }
.door::after { content: ""; position: absolute; right: 7px; top: 50%; width: 6px; height: 6px; background: var(--yellow); border: 2px solid var(--ink); }
.desk { position: absolute; right: 8%; bottom: 22px; width: 30%; height: 25%; background: var(--wood); border: 4px solid var(--wood-dark); }

.room-gallery { background-color: #eac56d; }
.display { position: absolute; bottom: 22px; display: grid; place-items: center; border: 4px solid var(--ink); font: 900 11px/1 ui-monospace, monospace; box-shadow: 4px 0 0 rgba(0,0,0,.15); }
.display::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -17px; height: 13px; background: var(--ink); }
.display-rpg { left: 7%; width: 27%; height: 42%; color: #f7dfa1; background: #784846; }
.display-sketch { left: 37%; width: 27%; height: 50%; background: #d7e4d8; background-image: linear-gradient(#9cb6b0 1px, transparent 1px), linear-gradient(90deg, #9cb6b0 1px, transparent 1px); background-size: 8px 8px; }
.display-timer { right: 6%; width: 27%; height: 36%; color: #91f0c0; background: #273c37; }

.room-making { background-color: #dca865; }
.blueprint { position: absolute; top: 22%; left: 10%; width: 52%; height: 34%; border: 4px solid var(--ink); background: #477a78; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 10px 10px; transform: rotate(-2deg); }
.workbench { position: absolute; left: 7%; right: 8%; bottom: 22px; height: 22%; border: 4px solid var(--wood-dark); background: var(--wood); }
.workbench::before { content: ""; position: absolute; left: 28%; bottom: 100%; width: 48%; height: 42px; border: 4px solid var(--ink); background: #d8d0b1; }
.lamp { position: absolute; right: 13%; top: 19%; width: 14px; height: 55%; background: var(--ink); }
.lamp::after { content: ""; position: absolute; top: 0; right: -14px; width: 40px; height: 25px; background: var(--yellow); border: 4px solid var(--ink); }

.room-owner { background-color: #cda36c; }
.owner-table { position: absolute; left: 12%; right: 10%; bottom: 22px; height: 18%; border: 4px solid var(--wood-dark); background: var(--wood); }
.panda { position: absolute; z-index: 2; left: 50%; bottom: 20%; width: 76px; height: 110px; transform: translateX(-50%); animation: panda-work 1.5s steps(2, end) infinite; }
.panda-head { position: absolute; z-index: 2; left: 9px; top: 6px; width: 58px; height: 52px; border: 4px solid var(--ink); border-radius: 45%; background: #f8f3de; }
.panda-head::after { content: ""; position: absolute; left: 24px; top: 28px; width: 9px; height: 6px; background: var(--ink); }
.panda-head i, .panda-head b { position: absolute; top: 12px; width: 15px; height: 20px; border-radius: 50%; background: var(--ink); }
.panda-head i { left: 8px; transform: rotate(18deg); }.panda-head b { right: 8px; transform: rotate(-18deg); }
.panda-ear { position: absolute; z-index: 1; top: 0; width: 24px; height: 24px; border: 4px solid var(--ink); border-radius: 50%; background: var(--ink); }
.panda-ear.left { left: 3px; }.panda-ear.right { right: 3px; }
.panda-body { position: absolute; left: 13px; top: 52px; width: 50px; height: 56px; border: 4px solid var(--ink); border-radius: 18px 18px 5px 5px; background: linear-gradient(90deg, var(--ink) 0 25%, #f8f3de 25% 75%, var(--ink) 75%); }

.room-office { background-color: #b8c2a2; }
.files { position: absolute; left: 12%; bottom: 22px; width: 43%; height: 58%; border: 5px solid var(--ink); background: #7d9b86; box-shadow: inset 0 -40px rgba(0,0,0,.08); }
.files::before, .files::after { content: ""; position: absolute; left: 10%; right: 10%; height: 4px; background: var(--ink); }
.files::before { top: 34%; }.files::after { top: 67%; }
.office-window { position: absolute; right: 10%; top: 22%; width: 30%; height: 36%; border: 5px solid var(--ink); background: #8cc5c2; box-shadow: inset 0 -20px rgba(255,255,255,.18); }
.extension { border-right: 0; background: rgba(232,188,117,.32); }
.extension::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(244,202,82,.3) 18px 36px); }
.scaffold { position: absolute; top: 17%; bottom: 0; width: 7px; background: var(--ink); }
.scaffold::before, .scaffold::after { content: ""; position: absolute; height: 7px; width: 86px; background: var(--ink); }
.scaffold::before { top: 27%; }.scaffold::after { top: 68%; }
.scaffold.one { left: 17%; }.scaffold.two { right: 22%; }
.scaffold.two::before, .scaffold.two::after { right: 0; }
.stairs { position: absolute; right: 5%; bottom: 12%; width: 70%; height: 40%; border-left: 8px solid var(--ink); border-bottom: 8px solid var(--ink); transform: skewY(-30deg); }
.ground { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 8vh; border-top: 6px solid var(--ink); background: repeating-linear-gradient(135deg, #4e7146 0 16px, #42623d 16px 32px); }

.room-panel {
    position: absolute; z-index: 18; right: 4vw; bottom: 11vh; width: min(360px, calc(100vw - 32px));
    padding: 20px; border: var(--pixel-border); background: var(--cream); box-shadow: 7px 7px 0 var(--ink);
}
.room-panel h2 { margin: 0 0 8px; font-size: 25px; }.room-panel p { line-height: 1.8; }
.panel-kicker { margin: 0 0 6px !important; color: var(--green); font: 900 10px/1 ui-monospace, monospace; letter-spacing: .16em; }
.panel-close, .guide-close { position: absolute; top: 6px; right: 7px; width: 28px; height: 28px; border: 0; background: transparent; font-weight: 900; cursor: pointer; }
.panel-link { display: inline-block; padding: 8px 10px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-weight: 900; text-decoration: none; }

.guide { position: fixed; z-index: 25; right: 24px; bottom: 24px; width: min(560px, calc(100vw - 48px)); min-height: 116px; pointer-events: none; }
.guide-bot { position: absolute; z-index: 3; right: 0; bottom: 0; width: 112px; height: 112px; border: 4px solid #fff1c8; outline: 4px solid #11172d; border-radius: 22px 22px 14px 14px; background-color: #4c83b8; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 6px 6px; box-shadow: 6px 6px 0 #090c19, inset 0 0 0 3px #75a8d2; cursor: pointer; pointer-events: auto; animation: bot-float 1.4s steps(2, end) infinite; }
.bot-ear { position: absolute; z-index: -1; top: -12px; width: 28px; height: 28px; border: 3px solid var(--ink); background: var(--ink); transform: rotate(45deg); }
.bot-ear.left { left: 4px; }.bot-ear.right { right: 4px; }
.bot-screen { position: absolute; inset: 22px 14px 18px; border: 4px solid var(--ink); border-radius: 10px; background: #29443b; box-shadow: inset 0 -13px rgba(0,0,0,.18); }
.bot-screen i, .bot-screen b { position: absolute; top: 18px; width: 10px; height: 13px; background: #9cf0b7; box-shadow: 0 0 8px #9cf0b7; }
.bot-screen i { left: 15px; }.bot-screen b { right: 15px; }
.bot-foot { position: absolute; bottom: -8px; width: 19px; height: 10px; border: 3px solid var(--ink); background: var(--ink); }
.bot-foot.left { left: 9px; }.bot-foot.right { right: 9px; }
/* 案内板の札にふれている間、案内係は上の板を見上げます */
.guide.is-looking .guide-bot { animation-name: bot-look; }
.guide.is-looking .bot-screen i, .guide.is-looking .bot-screen b { top: 13px; }
.home-page .guide.is-looking .bot-screen i, .home-page .guide.is-looking .bot-screen b { top: 7px; }
.guide-dialog { position: relative; width: calc(100% - 72px); min-height: 142px; margin: 0 72px 38px 0; padding: 19px 82px 17px 22px; border: 4px solid #fff1c8; outline: 4px solid #11172d; color: #fff7db; background: #07080d; box-shadow: 7px 7px 0 #090c19, inset 0 0 0 3px #323746; pointer-events: auto; }
.guide-dialog::after { display: none; }
.guide-dialog[hidden] { display: none; }
.guide-dialog p { margin: 0; }
.guide-speaker { margin-bottom: 9px !important; color: var(--yellow); font: 900 11px/1 ui-monospace, monospace; letter-spacing: .14em; }
.guide-copy { min-height: 3.9em; white-space: pre-line; font-size: 15px; font-weight: 800; line-height: 1.7; letter-spacing: .03em; }
.guide-caret { position: absolute; right: 86px; bottom: 17px; color: var(--yellow); font-size: 10px; animation: rpg-caret .8s steps(2,end) infinite; }
.guide-dialog.is-typing .guide-caret { display: none; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.guide-actions[hidden] { display: none; }
.guide-actions button, .guide-actions a { display: inline-block; padding: 7px 9px; border: 2px solid #fff1c8; color: #fff7db; background: #242735; font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; }
.guide-actions button::before, .guide-actions a::before { content: "▶"; margin-right: 5px; color: var(--yellow); font-size: 8px; }
.guide-actions button:hover, .guide-actions a:hover, .guide-actions button:focus-visible, .guide-actions a:focus-visible { color: var(--ink); background: var(--yellow); outline: 2px solid #fff1c8; outline-offset: 2px; }
.guide-actions button:hover::before, .guide-actions a:hover::before, .guide-actions button:focus-visible::before, .guide-actions a:focus-visible::before { color: var(--ink); }
.sr-only { 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; }
.scroll-cue { position: absolute; z-index: 8; left: 50%; bottom: 13px; transform: translateX(-50%); color: #fff; font: 900 10px/1 ui-monospace, monospace; text-decoration: none; letter-spacing: .1em; text-shadow: 2px 2px 0 var(--ink); }
.scroll-cue span { display: block; margin-top: 4px; font-size: 20px; animation: scroll-hop 1s steps(2,end) infinite; }

.concept-switch {
    position: absolute; z-index: 12; top: 96px; right: 3vw;
    padding: 8px 11px; border: 2px solid var(--ink); background: var(--cream);
    box-shadow: 3px 3px 0 var(--ink); font: 900 11px/1 ui-monospace, monospace;
    text-decoration: none; letter-spacing: .04em;
}
.concept-switch:hover, .concept-switch:focus-visible { background: var(--yellow); outline: 2px solid var(--cream); }

/* 比較用：レトロRPG風の見下ろし工房 */
.topdown-hero {
    position: relative; min-height: 100svh; overflow: hidden;
    background: #6f9a58;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(31,77,47,.09) 18px 36px);
    background-size: 16px 16px, 16px 16px, auto;
}
.topdown-copy {
    position: absolute; z-index: 9; top: 108px; left: 2.5vw; width: min(315px, 28vw);
    padding: 15px 17px; border: var(--pixel-border); background: rgba(255,249,233,.96);
    box-shadow: 6px 6px 0 var(--ink);
}
.topdown-copy h1 { margin: 0; font-size: clamp(29px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.055em; }
.topdown-copy h1 em { color: var(--green); font-style: normal; }
.topdown-copy > p:last-child { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.6; }
.topdown-map-scroll { position: absolute; inset: 0; overflow: auto hidden; scrollbar-width: thin; scrollbar-color: var(--yellow) var(--green-dark); }
.topdown-map { position: relative; width: 100%; min-width: 1040px; height: 100%; min-height: 620px; }
.td-yard { position: absolute; inset: 0; overflow: hidden; }
.td-yard::before, .td-yard::after {
    content: ""; position: absolute; left: 8%; bottom: -8%; width: 110px; height: 68%;
    background: #d8bd79; border: 4px solid #4e713f; transform: rotate(-8deg);
}
.td-yard::after { left: 15%; bottom: -35%; height: 75%; transform: rotate(48deg); }
.td-path { position: absolute; left: 14%; bottom: 0; width: 16%; height: 18%; background: #d8bd79; border: 4px solid #4e713f; border-bottom: 0; }
.td-tree { position: absolute; width: 54px; height: 54px; border: 4px solid var(--ink); background: #2f6645; box-shadow: inset 13px 0 rgba(255,255,255,.08), 6px 6px 0 rgba(22,37,31,.22); transform: rotate(45deg); }
.td-tree::after { content: ""; position: absolute; inset: 13px; background: #477c4d; }
.td-tree.tree-a { left: 5%; bottom: 12%; }.td-tree.tree-b { left: 16%; top: 46%; transform: rotate(45deg) scale(.75); }
.td-mailbox { position: absolute; left: 17%; bottom: 6%; display: grid; place-items: center; width: 42px; height: 32px; border: 4px solid var(--ink); background: #b85e45; color: #fff4da; font: 900 9px/1 ui-monospace, monospace; box-shadow: 4px 4px 0 rgba(22,37,31,.3); }
.td-mailbox::after { content: ""; position: absolute; top: 100%; width: 7px; height: 28px; background: var(--ink); }

.td-building {
    position: absolute; z-index: 2; top: 14%; right: 3%; bottom: 8%; left: 23%;
    display: grid; grid-template-columns: 27% 37% 36%; grid-template-rows: 47% 53%;
    gap: 12px; padding: 13px; border: 8px solid var(--wood-dark); background: #6d4a31;
    box-shadow: 13px 15px 0 rgba(22,37,31,.3), inset 0 0 0 3px #d3a46d;
}
.td-room, .td-extension {
    position: relative; min-width: 0; overflow: hidden; border: 4px solid var(--ink);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); color: var(--ink);
}
.td-room { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.td-room:hover, .td-room:focus-visible { z-index: 5; filter: brightness(1.1); outline: 6px solid var(--yellow); outline-offset: -9px; }
.td-room:active { transform: translateY(2px); }
.td-room-name {
    position: absolute; z-index: 5; top: 10px; left: 10px; padding: 5px 7px;
    border: 3px solid var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink);
    font: 900 11px/1 ui-monospace, monospace; white-space: nowrap;
}
.td-reception { grid-column: 1; grid-row: 2; background-color: #dfc786; background-image: linear-gradient(45deg, rgba(92,64,39,.08) 25%, transparent 25%, transparent 75%, rgba(92,64,39,.08) 75%), linear-gradient(45deg, rgba(92,64,39,.08) 25%, transparent 25%, transparent 75%, rgba(92,64,39,.08) 75%); background-position: 0 0, 12px 12px; background-size: 24px 24px; }
.td-gallery { grid-column: 1; grid-row: 1; background: repeating-linear-gradient(90deg, #d7aa66 0 22px, #c99658 22px 25px); }
.td-making { grid-column: 2; grid-row: 1; background-color: #b9aaa0; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; }
.td-owner { grid-column: 2; grid-row: 2; background: repeating-linear-gradient(0deg, #c79760 0 20px, #b47f50 20px 23px); }
.td-office { grid-column: 3; grid-row: 2; background-color: #9faf8e; background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%); background-size: 22px 22px; }
.td-extension { grid-column: 3; grid-row: 1; background: repeating-linear-gradient(135deg, #b59059 0 20px, #a77c45 20px 40px); }
.td-extension::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(244,202,82,.28) 18px 27px); }
.td-building > .td-wall { display: none; }

.td-counter { position: absolute; right: 10%; top: 25%; width: 28%; height: 58%; border: 4px solid var(--ink); background: var(--wood); box-shadow: inset 0 13px #c98951; }
.td-rug { position: absolute; left: 10%; bottom: 10%; display: grid; place-items: center; width: 43%; height: 30%; border: 3px solid var(--ink); background: #688b79; color: #f8efd5; font: 900 8px/1 ui-monospace, monospace; }
.td-app-pedestal { position: absolute; bottom: 12%; display: grid; place-items: center; width: 23%; height: 42%; border: 4px solid var(--ink); background: #f2e5c6; box-shadow: 4px 4px 0 rgba(22,37,31,.24); font: 900 9px/1 ui-monospace, monospace; }
.td-app-pedestal::before { content: ""; position: absolute; top: -20px; width: 32px; height: 32px; border: 3px solid var(--ink); border-radius: 7px; background: #7b554c; }
.td-app-pedestal.app-a { left: 7%; }.td-app-pedestal.app-b { left: 38%; }.td-app-pedestal.app-c { right: 7%; }
.td-app-pedestal.app-b::before { background: #688f93; }.td-app-pedestal.app-c::before { background: #2e4d43; }
.td-map-table { position: absolute; left: 12%; right: 12%; top: 40%; bottom: 12%; border: 4px solid var(--ink); background: #477a78; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 10px 10px; box-shadow: 6px 6px 0 rgba(22,37,31,.25); }
.td-toolbox { position: absolute; right: 8%; top: 23%; padding: 7px 9px; border: 3px solid var(--ink); background: #c65d3d; font: 900 8px/1 ui-monospace, monospace; }
.td-owner-desk { position: absolute; left: 18%; right: 13%; top: 30%; height: 35%; border: 4px solid var(--ink); background: #865237; box-shadow: inset 0 11px #ad7048; }
.td-owner-desk i, .td-owner-desk b { position: absolute; top: 18%; width: 25%; height: 55%; border: 3px solid var(--ink); background: #314840; }
.td-owner-desk i { left: 16%; }.td-owner-desk b { right: 16%; }
.td-chair { position: absolute; left: 42%; bottom: 10%; width: 20%; height: 19%; border: 4px solid var(--ink); border-radius: 45% 45% 8px 8px; background: #3d6252; }
.td-shelf { position: absolute; top: 29%; width: 19%; height: 57%; border: 4px solid var(--ink); background: #6d573f; background-image: repeating-linear-gradient(0deg, transparent 0 25%, var(--ink) 25% 28%); }
.td-shelf.shelf-a { right: 8%; }.td-shelf.shelf-b { right: 31%; }
.td-file-desk { position: absolute; left: 8%; bottom: 13%; display: grid; place-items: center; width: 31%; height: 28%; border: 4px solid var(--ink); background: #d2bd83; font: 900 9px/1 ui-monospace, monospace; }
.td-cone { position: absolute; z-index: 2; bottom: 14%; width: 0; height: 0; border-right: 15px solid transparent; border-bottom: 42px solid #db6c39; border-left: 15px solid transparent; filter: drop-shadow(3px 3px 0 var(--ink)); }
.td-cone.cone-a { left: 12%; }.td-cone.cone-b { left: 33%; }
.td-stairs { position: absolute; z-index: 2; right: 8%; top: 25%; display: grid; place-items: center; width: 40%; height: 56%; border: 4px solid var(--ink); background: repeating-linear-gradient(0deg, #dfc99b 0 13px, var(--ink) 13px 16px); font: 900 14px/1 ui-monospace, monospace; }
.td-tape { position: absolute; z-index: 3; left: -8%; top: 50%; width: 72%; height: 12px; border: 2px solid var(--ink); background: repeating-linear-gradient(135deg, var(--yellow) 0 12px, var(--ink) 12px 24px); transform: rotate(-10deg); }
.td-corridor-label { position: absolute; z-index: 8; left: 50%; bottom: -26px; transform: translateX(-50%); padding: 5px 12px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 rgba(22,37,31,.35); font: 900 10px/1 ui-monospace, monospace; white-space: nowrap; }

.td-panda {
    --panda-x: 48%; --panda-y: 68%;
    position: absolute; z-index: 10; left: var(--panda-x); top: var(--panda-y); width: 42px; height: 52px;
    pointer-events: none; transform: translate(-50%, -50%); transition: left .7s steps(7, end), top .7s steps(7, end);
    filter: drop-shadow(4px 5px 0 rgba(22,37,31,.3));
}
.td-panda-face { position: absolute; z-index: 2; left: 3px; top: 1px; width: 36px; height: 34px; border: 3px solid var(--ink); border-radius: 46%; background: #f8f3de; }
.td-panda-face b, .td-panda-face em { position: absolute; top: 9px; width: 9px; height: 12px; border-radius: 50%; background: var(--ink); }
.td-panda-face b { left: 6px; transform: rotate(18deg); }.td-panda-face em { right: 6px; transform: rotate(-18deg); }
.td-panda-face::after { content: ""; position: absolute; left: 14px; top: 20px; width: 6px; height: 4px; background: var(--ink); }
.td-panda-ear { position: absolute; z-index: 1; top: -2px; width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--ink); }
.td-panda-ear.left { left: 0; }.td-panda-ear.right { right: 0; }
.td-panda-body { position: absolute; left: 8px; top: 29px; width: 27px; height: 21px; border: 3px solid var(--ink); border-radius: 8px; background: linear-gradient(90deg, var(--ink) 0 24%, #f8f3de 24% 76%, var(--ink) 76%); }
.td-panda.is-walking { animation: td-panda-step .14s steps(2, end) 5; }
.td-room-panel { top: 108px; right: 3vw; bottom: auto; }
.concept-switch-back { top: auto; right: auto; bottom: 18px; left: 24px; }
.concept-caption { position: absolute; z-index: 7; right: 120px; bottom: 18px; margin: 0; color: #f9edce; font: 900 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-shadow: 2px 2px 0 var(--ink); }

/* 比較案本体：部屋単位で増改築できる2.5D工房 */
.iso-world { position: relative; width: max(100%, 1180px); height: 100%; min-height: 700px; perspective: 1450px; perspective-origin: 58% 42%; }
.iso-world::before { content: ""; position: absolute; right: 3%; bottom: 3%; width: 72%; height: 20%; border-radius: 50%; background: rgba(30,66,39,.23); filter: blur(4px); transform: skewX(-18deg); }
.iso-building {
    position: absolute; z-index: 3; left: 64%; top: 52%; width: 760px; height: 490px;
    transform-style: preserve-3d; transform-origin: center;
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-45deg);
}
.iso-room {
    position: absolute; display: block; margin: 0; padding: 0; overflow: visible;
    border: 5px solid var(--wood-dark); background: #d6a565; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12);
    transform-style: preserve-3d;
}
button.iso-room { cursor: pointer; transition: filter .15s ease; }
button.iso-room:hover, button.iso-room:focus-visible { z-index: 20; filter: brightness(1.13); outline: 8px solid var(--yellow); outline-offset: -11px; }
button.iso-room:active { filter: brightness(.95); }
.iso-gallery, .iso-reception { left: 0; width: 240px; height: 240px; }
.iso-making, .iso-owner { left: 250px; width: 260px; height: 240px; }
.iso-extension, .iso-office { left: 520px; width: 240px; height: 240px; }
.iso-gallery, .iso-making, .iso-extension { top: 0; }
.iso-reception, .iso-owner, .iso-office { top: 250px; }
.iso-gallery { background: repeating-linear-gradient(90deg, #d8ab69 0 23px, #c38e53 23px 26px); }
.iso-making { background-color: #a9aaa2; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 20px 20px; }
.iso-extension { background: repeating-linear-gradient(135deg, #b78d54 0 20px, #a67a43 20px 40px); }
.iso-reception { background-color: #dfc985; background-image: linear-gradient(45deg, rgba(80,53,33,.09) 25%, transparent 25%, transparent 75%, rgba(80,53,33,.09) 75%); background-size: 26px 26px; }
.iso-owner { background: repeating-linear-gradient(0deg, #c8945e 0 21px, #b47c4c 21px 24px); }
.iso-office { background-color: #9dac8c; background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%); background-size: 22px 22px; }
.iso-wall { position: absolute; z-index: 1; display: block; border: 4px solid var(--wood-dark); background-color: #b97647; background-image: linear-gradient(rgba(255,255,255,.1) 2px, transparent 2px), linear-gradient(90deg, rgba(78,48,29,.14) 2px, transparent 2px); background-size: 28px 22px; backface-visibility: hidden; }
.iso-wall-back { left: -5px; top: -5px; width: calc(100% + 10px); height: 68px; transform-origin: top; transform: rotateX(90deg); box-shadow: inset 0 -9px rgba(74,45,28,.18); }
.iso-wall-left { left: -5px; top: -5px; width: 68px; height: calc(100% + 10px); transform-origin: left; transform: rotateY(-90deg); box-shadow: inset -9px 0 rgba(74,45,28,.2); }
.iso-room-name {
    position: absolute; z-index: 15; left: 16px; top: 17px; padding: 6px 9px;
    border: 3px solid var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink);
    font: 900 12px/1 ui-monospace, monospace; white-space: nowrap;
    transform: translateZ(72px) rotateZ(45deg) rotateX(-58deg); transform-origin: left top;
}
.iso-showcase, .iso-tool-crate, .iso-counter, .iso-welcome, .iso-worktable, .iso-desk, .iso-chair, .iso-shelf, .iso-files, .iso-stair, .iso-caution, .iso-scaffold { position: absolute; display: grid; place-items: center; border: 4px solid var(--ink); font: 900 10px/1 ui-monospace, monospace; transform: translateZ(18px); box-shadow: 7px 7px 0 rgba(22,37,31,.22); }
.iso-showcase { top: 96px; width: 48px; height: 70px; background: #efe2c2; }
.iso-showcase::after { content: ""; position: absolute; inset: 9px 7px 28px; border: 3px solid var(--ink); background: #754d48; }
.iso-showcase.case-rpg { left: 34px; }.iso-showcase.case-cad { left: 96px; }.iso-showcase.case-time { left: 158px; }
.iso-showcase.case-cad::after { background: #648a8e; }.iso-showcase.case-time::after { background: #2d4840; }
.iso-worktable { left: 45px; top: 82px; width: 154px; height: 95px; background: #477a78; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 10px 10px; }
.iso-worktable i { width: 55%; height: 45%; border: 3px solid #e7e1c6; transform: rotate(-7deg); }
.iso-tool-crate { right: 18px; bottom: 18px; width: 68px; height: 48px; background: #bd5c3e; }
.iso-counter { right: 24px; top: 68px; width: 73px; height: 125px; background: var(--wood); box-shadow: inset 14px 0 #ad7148, 7px 7px 0 rgba(22,37,31,.22); }
.iso-welcome { left: 24px; bottom: 24px; width: 100px; height: 62px; background: #688b79; color: #f9efd5; font-size: 8px; }
.iso-desk { left: 48px; top: 75px; width: 160px; height: 88px; background: #855137; box-shadow: inset 0 15px #aa6f48, 7px 7px 0 rgba(22,37,31,.22); }
.iso-desk i, .iso-desk b { position: absolute; top: 24px; width: 45px; height: 38px; border: 3px solid var(--ink); background: #2f4940; }.iso-desk i { left: 24px; }.iso-desk b { right: 24px; }
.iso-chair { left: 101px; bottom: 18px; width: 56px; height: 46px; border-radius: 40% 40% 8px 8px; background: #3d6252; }
.iso-shelf { top: 55px; width: 53px; height: 135px; background: #6c573e; background-image: repeating-linear-gradient(0deg, transparent 0 29px, var(--ink) 29px 33px); }
.iso-shelf.shelf-one { right: 24px; }.iso-shelf.shelf-two { right: 89px; }
.iso-files { left: 25px; bottom: 27px; width: 78px; height: 60px; background: #d2bb81; }
.iso-stair { right: 24px; top: 45px; width: 94px; height: 146px; background: repeating-linear-gradient(0deg, #dfca9b 0 17px, var(--ink) 17px 21px); font-size: 14px; }
.iso-caution { left: 16px; top: 110px; width: 130px; height: 14px; background: repeating-linear-gradient(135deg, var(--yellow) 0 13px, var(--ink) 13px 26px); transform: translateZ(42px) rotate(-12deg); }
.iso-scaffold { top: 48px; width: 8px; height: 142px; background: var(--ink); }.iso-scaffold::before, .iso-scaffold::after { content: ""; position: absolute; width: 105px; height: 7px; background: var(--ink); }.iso-scaffold::before { top: 30px; }.iso-scaffold::after { bottom: 30px; }
.iso-scaffold.scaffold-a { left: 26px; }.iso-scaffold.scaffold-b { left: 132px; }
.iso-panda {
    --panda-x: 365px; --panda-y: 380px;
    position: absolute; z-index: 30; left: var(--panda-x); top: var(--panda-y); width: 48px; height: 64px;
    pointer-events: none; transform-origin: center bottom;
    transform: translate(-50%, -50%) translateZ(84px) rotateZ(45deg) rotateX(-58deg);
    transition: left .75s steps(7, end), top .75s steps(7, end);
    filter: drop-shadow(5px 7px 0 rgba(22,37,31,.32));
}
.iso-panda-face { position: absolute; z-index: 2; left: 3px; top: 3px; width: 42px; height: 40px; border: 4px solid var(--ink); border-radius: 46%; background: #f8f3de; }
.iso-panda-face b, .iso-panda-face em { position: absolute; top: 10px; width: 10px; height: 15px; border-radius: 50%; background: var(--ink); }.iso-panda-face b { left: 7px; transform: rotate(18deg); }.iso-panda-face em { right: 7px; transform: rotate(-18deg); }
.iso-panda-face::after { content: ""; position: absolute; left: 16px; top: 24px; width: 7px; height: 5px; background: var(--ink); }
.iso-panda-ear { position: absolute; z-index: 1; top: 0; width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; background: var(--ink); }.iso-panda-ear.left { left: 0; }.iso-panda-ear.right { right: 0; }
.iso-panda-body { position: absolute; left: 9px; top: 37px; width: 31px; height: 25px; border: 4px solid var(--ink); border-radius: 9px; background: linear-gradient(90deg, var(--ink) 0 24%, #f8f3de 24% 76%, var(--ink) 76%); }
.iso-panda.is-walking { animation: iso-panda-step .15s steps(2, end) 5; }
.iso-tree { position: absolute; z-index: 2; width: 66px; height: 66px; border: 5px solid var(--ink); background: #2f6544; box-shadow: inset 15px 0 rgba(255,255,255,.08), 8px 9px 0 rgba(22,37,31,.25); transform: rotate(45deg); }.iso-tree::after { content: ""; position: absolute; inset: 17px; background: #4a7d4f; }
.iso-tree.tree-one { left: 23%; bottom: 12%; }.iso-tree.tree-two { left: 17%; top: 45%; transform: rotate(45deg) scale(.7); }
.iso-sign { position: absolute; z-index: 4; left: 24%; bottom: 19%; padding: 9px 11px; border: 4px solid var(--ink); background: var(--wood); color: #fff3d5; box-shadow: 5px 5px 0 rgba(22,37,31,.28); font: 900 11px/1.4 ui-monospace, monospace; text-align: center; }.iso-sign::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 34px; background: var(--ink); transform: translateX(-50%); }
.iso-floor-sign { position: absolute; z-index: 5; right: 14%; bottom: 7%; padding: 6px 10px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 rgba(22,37,31,.3); font: 900 10px/1 ui-monospace, monospace; }

/* 比較案：昔のRPGの室内マップ風トップダウン */
.rpg-hero { position: relative; min-height: 100svh; overflow: hidden; background: #4e874d; }
.rpg-copy { position: absolute; z-index: 12; top: 108px; left: 2.5vw; width: min(315px, 28vw); padding: 15px 17px; border: var(--pixel-border); background: rgba(255,249,233,.97); box-shadow: 6px 6px 0 var(--ink); }
.rpg-copy h1 { margin: 0; font-size: clamp(29px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.055em; }.rpg-copy h1 em { color: var(--green); font-style: normal; }.rpg-copy > p:last-child { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.6; }
.rpg-map-scroll { position: absolute; inset: 0; overflow: auto hidden; scrollbar-width: thin; scrollbar-color: var(--yellow) var(--green-dark); }
.rpg-world { position: relative; width: 100%; min-width: 1120px; height: 100%; min-height: 680px; background-color: #5a9254; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 16px 16px; }
.rpg-grass { position: absolute; inset: 0; overflow: hidden; }.rpg-grass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 19px, rgba(34,83,46,.08) 19px 38px); }
.rpg-path { position: absolute; z-index: 1; left: 54%; bottom: -4%; width: 115px; height: 26%; border: 4px solid #537646; background: repeating-linear-gradient(0deg, #cbb173 0 15px, #bfa365 15px 18px); transform: translateX(-50%); }
.rpg-tree { position: absolute; z-index: 2; width: 58px; height: 58px; border: 4px solid var(--ink); background: #2e6542; box-shadow: inset 14px 0 rgba(255,255,255,.08), 6px 7px 0 rgba(22,37,31,.24); transform: rotate(45deg); }.rpg-tree::before { content: ""; position: absolute; inset: 15px; background: #4b7f50; }.rpg-tree.tree-left { left: 8%; bottom: 13%; }.rpg-tree.tree-right { right: 3%; top: 11%; transform: rotate(45deg) scale(.72); }
.rpg-pond { position: absolute; z-index: 1; left: 8%; top: 43%; width: 145px; height: 76px; border: 6px solid #467443; border-radius: 46%; background: repeating-linear-gradient(0deg, #72aaa1 0 9px, #81bbb0 9px 16px); box-shadow: 0 5px 0 rgba(22,37,31,.2); }
.rpg-building {
    position: absolute; z-index: 4; top: 14%; right: 3%; bottom: 9%; left: 25%;
    display: grid; grid-template-columns: 1fr 1.22fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 15px; padding: 17px; border: 12px solid #4e321f; background: #4e321f;
    box-shadow: 0 18px 0 #2d2119, 10px 25px 0 rgba(22,37,31,.28), inset 0 0 0 4px #d39b5f;
}
.rpg-building::before { content: ""; position: absolute; z-index: 30; left: -12px; right: -12px; top: -12px; height: 17px; border-bottom: 4px solid var(--ink); background: repeating-linear-gradient(90deg, #a7623e 0 30px, #bc764a 30px 60px); pointer-events: none; }
.rpg-building::after { content: ""; position: absolute; z-index: 31; left: -12px; right: -12px; bottom: -28px; height: 28px; border: 4px solid var(--ink); border-top: 0; background: linear-gradient(90deg, #6e432b 0 46%, transparent 46% 54%, #6e432b 54% 100%); pointer-events: none; }
.rpg-building-sign { position: absolute; z-index: 35; left: 50%; top: -28px; transform: translateX(-50%); padding: 5px 11px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font: 900 10px/1 ui-monospace, monospace; white-space: nowrap; }
.rpg-room { position: relative; z-index: 2; display: block; min-width: 0; overflow: hidden; margin: 0; padding: 0; border: 4px solid var(--ink); color: var(--ink); box-shadow: inset 0 13px #a96c43, inset 13px 0 #96603e; }
button.rpg-room { cursor: pointer; transition: filter .15s ease, transform .15s ease; }.rpg-room:hover, .rpg-room:focus-visible { z-index: 12; filter: brightness(1.12); outline: 7px solid var(--yellow); outline-offset: -10px; }.rpg-room:active { transform: translateY(2px); }
.rpg-gallery { grid-column: 1; grid-row: 1; background: repeating-linear-gradient(90deg, #d8aa67 0 22px, #c58f53 22px 25px); }
.rpg-making { grid-column: 2; grid-row: 1; background-color: #aaa79e; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 18px 18px; }
.rpg-extension { grid-column: 3; grid-row: 1; background: repeating-linear-gradient(135deg, #b58a52 0 20px, #a47742 20px 40px); }
.rpg-reception { grid-column: 1; grid-row: 2; background-color: #dec684; background-image: linear-gradient(45deg, rgba(80,53,33,.08) 25%, transparent 25%, transparent 75%, rgba(80,53,33,.08) 75%); background-size: 24px 24px; }
.rpg-owner { grid-column: 2; grid-row: 2; background: repeating-linear-gradient(0deg, #c9965e 0 20px, #b47d4d 20px 23px); }
.rpg-office { grid-column: 3; grid-row: 2; background-color: #9ead8e; background-image: linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.08) 75%); background-size: 22px 22px; }
.rpg-room-name { position: absolute; z-index: 8; top: 20px; left: 50%; transform: translateX(-50%); padding: 5px 8px; border: 3px solid var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink); font: 900 11px/1 ui-monospace, monospace; white-space: nowrap; }
.rpg-window { position: absolute; top: 13px; width: 48px; height: 17px; border: 3px solid var(--ink); background: #79aaa7; box-shadow: inset 0 5px rgba(255,255,255,.2); }.rpg-window.window-a { left: 15px; }.rpg-window.window-b { right: 17px; }
.rpg-display { position: absolute; bottom: 17%; display: grid; place-items: end center; width: 25%; height: 43%; padding-bottom: 8px; border: 4px solid var(--ink); background: #eee0bd; box-shadow: 4px 4px 0 rgba(22,37,31,.22); font: 900 9px/1 ui-monospace, monospace; }.rpg-display::before { content: ""; position: absolute; top: 9px; width: 34px; height: 34px; border: 3px solid var(--ink); background: #754c48; }.rpg-display.display-one { left: 7%; }.rpg-display.display-two { left: 38%; }.rpg-display.display-three { right: 7%; }.rpg-display.display-two::before { background: #648a8e; }.rpg-display.display-three::before { background: #2d4840; }
.rpg-blueprint { position: absolute; left: 10%; right: 34%; top: 32%; bottom: 15%; border: 4px solid var(--ink); background: #477a78; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 9px 9px; transform: rotate(-2deg); }
.rpg-bench { position: absolute; right: 8%; top: 32%; width: 19%; height: 52%; border: 4px solid var(--ink); background: var(--wood); box-shadow: inset 11px 0 #ad7148; }.rpg-crate { position: absolute; right: 8%; bottom: 8%; display: grid; place-items: center; width: 23%; height: 22%; border: 3px solid var(--ink); background: #bd5c3e; font: 900 9px/1 ui-monospace, monospace; }
.rpg-counter { position: absolute; right: 11%; top: 29%; width: 28%; height: 58%; border: 4px solid var(--ink); background: var(--wood); box-shadow: inset 10px 0 #ad7148; }.rpg-mat { position: absolute; left: 10%; bottom: 10%; display: grid; place-items: center; width: 43%; height: 31%; border: 3px solid var(--ink); background: #688b79; color: #f9efd5; font: 900 8px/1 ui-monospace, monospace; }
.rpg-owner-desk { position: absolute; left: 15%; right: 13%; top: 31%; height: 35%; border: 4px solid var(--ink); background: #855137; box-shadow: inset 0 12px #aa6f48; }.rpg-owner-desk i, .rpg-owner-desk b { position: absolute; top: 20%; width: 25%; height: 56%; border: 3px solid var(--ink); background: #2f4940; }.rpg-owner-desk i { left: 17%; }.rpg-owner-desk b { right: 17%; }.rpg-stool { position: absolute; left: 42%; bottom: 9%; width: 18%; height: 20%; border: 4px solid var(--ink); border-radius: 45% 45% 8px 8px; background: #3d6252; }
.rpg-books { position: absolute; top: 29%; width: 20%; height: 57%; border: 4px solid var(--ink); background: #6c573e; background-image: repeating-linear-gradient(0deg, transparent 0 25%, var(--ink) 25% 28%); }.rpg-books.books-a { right: 8%; }.rpg-books.books-b { right: 31%; }.rpg-file-table { position: absolute; left: 8%; bottom: 13%; display: grid; place-items: center; width: 31%; height: 28%; border: 4px solid var(--ink); background: #d2bb81; font: 900 9px/1 ui-monospace, monospace; }
.rpg-stair { position: absolute; right: 8%; top: 26%; display: grid; place-items: center; width: 41%; height: 57%; border: 4px solid var(--ink); background: repeating-linear-gradient(0deg, #dfc99b 0 13px, var(--ink) 13px 16px); font: 900 14px/1 ui-monospace, monospace; }.rpg-pole { position: absolute; top: 24%; bottom: 10%; width: 7px; background: var(--ink); }.rpg-pole::before, .rpg-pole::after { content: ""; position: absolute; left: 0; width: 90px; height: 7px; background: var(--ink); }.rpg-pole::before { top: 20%; }.rpg-pole::after { bottom: 21%; }.rpg-pole.pole-a { left: 12%; }.rpg-pole.pole-b { left: 48%; }.rpg-warning { position: absolute; z-index: 3; left: 4%; top: 53%; width: 60%; height: 11px; border: 2px solid var(--ink); background: repeating-linear-gradient(135deg, var(--yellow) 0 12px, var(--ink) 12px 24px); transform: rotate(-10deg); }
.rpg-corridor-v, .rpg-corridor-h { position: absolute; z-index: 20; pointer-events: none; background: #d29c5d; }.rpg-corridor-v { left: 32.2%; top: 46%; width: 2.2%; height: 8%; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }.rpg-corridor-h { left: 65.3%; top: 46%; width: 2.2%; height: 8%; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.rpg-entrance { position: absolute; z-index: 36; left: 50%; bottom: -29px; width: 70px; height: 45px; border-right: 5px solid var(--ink); border-left: 5px solid var(--ink); background: repeating-linear-gradient(0deg, #cbb173 0 10px, #bfa365 10px 13px); transform: translateX(-50%); }
.rpg-panda { --panda-x: 49%; --panda-y: 71%; position: absolute; z-index: 40; left: var(--panda-x); top: var(--panda-y); width: 42px; height: 53px; pointer-events: none; transform: translate(-50%, -50%); transition: left .72s steps(7,end), top .72s steps(7,end); filter: drop-shadow(4px 5px 0 rgba(22,37,31,.3)); }.rpg-panda-face { position: absolute; z-index: 2; left: 3px; top: 2px; width: 36px; height: 35px; border: 3px solid var(--ink); border-radius: 45%; background: #f8f3de; }.rpg-panda-face b, .rpg-panda-face em { position: absolute; top: 9px; width: 9px; height: 13px; border-radius: 50%; background: var(--ink); }.rpg-panda-face b { left: 6px; transform: rotate(18deg); }.rpg-panda-face em { right: 6px; transform: rotate(-18deg); }.rpg-panda-face::after { content: ""; position: absolute; left: 13px; top: 21px; width: 6px; height: 4px; background: var(--ink); }.rpg-panda-ear { position: absolute; z-index: 1; top: 0; width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--ink); }.rpg-panda-ear.left { left: 0; }.rpg-panda-ear.right { right: 0; }.rpg-panda-body { position: absolute; left: 8px; top: 31px; width: 27px; height: 21px; border: 3px solid var(--ink); border-radius: 8px; background: linear-gradient(90deg, var(--ink) 0 24%, #f8f3de 24% 76%, var(--ink) 76%); }.rpg-panda.is-walking { animation: rpg-panda-step .14s steps(2,end) 5; }
.rpg-room-panel { top: 108px; right: 3vw; bottom: auto; }.rpg-concept-links { position: absolute; z-index: 13; left: 24px; bottom: 18px; display: flex; gap: 7px; }.rpg-concept-links a { padding: 8px 11px; border: 2px solid var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink); font: 900 11px/1 ui-monospace, monospace; text-decoration: none; }.rpg-concept-links a:hover { background: var(--yellow); }.rpg-caption { position: absolute; z-index: 8; right: 120px; bottom: 18px; margin: 0; color: #f9edce; font: 900 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-shadow: 2px 2px 0 var(--ink); }

/* RPG版の作り込み：地図、建築、UIを16bit風の共通ルールへ統一 */
.rpg-page .site-header { color: #fff4d5; border-color: #efe0ae; background: #19203b; box-shadow: 4px 4px 0 #080b15, inset 0 0 0 2px #5a6384; }
.rpg-page .brand-mark { border-color: #efe0ae; background: #fff4d5; box-shadow: inset 8px 0 0 var(--ink), inset -8px 0 0 var(--ink); }
.rpg-page .site-nav a:hover, .rpg-page .site-nav a:focus-visible { color: var(--ink); background: var(--yellow); outline-color: #fff4d5; }
.rpg-hero { background: #3f7547; box-shadow: inset 0 0 0 8px #152a22; }
.rpg-copy { top: auto; bottom: 72px; left: 28px; width: 335px; padding: 18px 20px; color: #fff7db; border: 4px solid #fff1c8; outline: 4px solid #11172d; outline-offset: 0; background: #17203e; box-shadow: 7px 7px 0 #090c19, inset 0 0 0 3px #4c587d; }
.rpg-copy::before { content: "◆"; position: absolute; right: 13px; bottom: 9px; color: var(--yellow); font-size: 12px; animation: rpg-caret .8s steps(2,end) infinite; }
.rpg-copy .eyebrow { color: #f4ca52; }.rpg-copy h1 { font-size: clamp(27px, 3vw, 43px); text-shadow: 3px 3px 0 #090c19; }.rpg-copy h1 em { color: #9de2a7; }.rpg-copy > p:last-child { padding-right: 18px; }
.rpg-world { min-width: 1180px; background-color: #4e864c; background-image: linear-gradient(rgba(255,255,255,.04) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.04) 2px, transparent 2px), repeating-linear-gradient(135deg, transparent 0 23px, rgba(29,69,39,.09) 23px 46px); background-size: 16px 16px, 16px 16px, auto; }
.rpg-world::before { content: ""; position: absolute; z-index: 1; right: 2.2%; top: 11%; bottom: 6.5%; left: 24.8%; border: 4px solid #315f3c; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 4px rgba(23,53,34,.18); }
.rpg-world::after { content: ""; position: absolute; z-index: 50; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(8,13,19,.025) 3px 4px); }
.rpg-path { left: 59%; width: 94px; height: 20%; border-color: #315f3c; background: repeating-linear-gradient(0deg, #d0b676 0 13px, #bfa261 13px 16px); box-shadow: inset 8px 0 rgba(255,255,255,.08), inset -8px 0 rgba(77,66,42,.08); }
.rpg-fence { position: absolute; z-index: 2; background: repeating-linear-gradient(90deg, #765036 0 7px, transparent 7px 28px); border-top: 6px solid #593b2a; border-bottom: 6px solid #593b2a; }.rpg-fence.fence-top { left: 4%; right: 4%; top: 8%; height: 34px; }.rpg-fence.fence-left { left: 2%; top: 15%; bottom: 8%; width: 34px; border: 0; border-right: 6px solid #593b2a; border-left: 6px solid #593b2a; background: repeating-linear-gradient(0deg, #765036 0 7px, transparent 7px 28px); }
.rpg-flower { position: absolute; z-index: 2; width: 9px; height: 9px; background: #f5d05c; box-shadow: 18px 0 #f29b74, 36px 0 #f3e6bb, 9px 16px #f29b74, 27px 17px #f5d05c, 45px 15px #f3e6bb; }.rpg-flower.flowers-a { left: 15%; bottom: 25%; }.rpg-flower.flowers-b { right: 8%; bottom: 16%; transform: scale(.8); }
.rpg-lamppost { position: absolute; z-index: 3; bottom: 11%; width: 8px; height: 52px; border: 2px solid var(--ink); background: #34433c; }.rpg-lamppost::before { content: ""; position: absolute; left: 50%; top: -16px; width: 23px; height: 23px; border: 3px solid var(--ink); background: #ffe27b; box-shadow: 0 0 12px rgba(255,226,123,.6); transform: translateX(-50%); }.rpg-lamppost.lamp-left { left: 52%; }.rpg-lamppost.lamp-right { left: 65%; }
.rpg-tree.tree-small { left: 18%; top: 22%; transform: rotate(45deg) scale(.58); }.rpg-pond { left: 7%; top: 46%; border-width: 5px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.08), 0 5px 0 rgba(22,37,31,.2); }

.rpg-building { top: 12%; right: 4%; bottom: 10%; left: 27%; display: block; padding: 0; border-width: 14px; background-color: #c7935b; background-image: linear-gradient(rgba(83,56,34,.1) 2px, transparent 2px), linear-gradient(90deg, rgba(83,56,34,.1) 2px, transparent 2px); background-size: 24px 24px; box-shadow: 0 20px 0 #2b211a, 12px 30px 0 rgba(18,33,25,.32), inset 0 0 0 5px #e1b374; }
.rpg-building::before { left: -14px; right: -14px; top: -14px; height: 22px; border: 4px solid var(--ink); background: repeating-linear-gradient(90deg, #955839 0 28px, #b56e45 28px 56px); box-shadow: inset 0 -6px rgba(67,38,25,.2); }
.rpg-building::after { left: -14px; right: -14px; bottom: -32px; height: 32px; border-width: 4px; background: linear-gradient(90deg, #6d422b 0 45%, transparent 45% 55%, #6d422b 55% 100%); box-shadow: inset 0 -8px rgba(31,23,18,.18); }
.rpg-building-sign { top: -34px; padding: 7px 14px; border-width: 4px; font-size: 11px; box-shadow: 4px 4px 0 var(--ink); }
.rpg-room { position: absolute; overflow: visible; border-width: 5px; box-shadow: inset 0 15px #9e6440, inset 15px 0 #875636, 0 4px 0 rgba(37,26,19,.3); }
.rpg-gallery { left: 2%; top: 3%; width: 27.5%; height: 42%; }.rpg-making { left: 35%; top: 3%; width: 30%; height: 42%; }.rpg-extension { right: 2%; top: 3%; width: 27.5%; height: 42%; }.rpg-reception { left: 2%; bottom: 3%; width: 27.5%; height: 42%; }.rpg-owner { left: 35%; bottom: 3%; width: 30%; height: 42%; }.rpg-office { right: 2%; bottom: 3%; width: 27.5%; height: 42%; }
.rpg-hall { position: absolute; z-index: 1; border: 3px solid rgba(86,55,34,.4); background-color: #d7a969; background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(91,60,37,.11) 22px 24px); }.rpg-hall.hall-horizontal { left: 2%; right: 2%; top: 45.5%; height: 9%; }.rpg-hall.hall-left { left: 29.8%; top: 3%; bottom: 3%; width: 4.8%; }.rpg-hall.hall-right { left: 65.2%; top: 3%; bottom: 3%; width: 4.8%; }
.rpg-hall-emblem { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 55px; height: 55px; border: 4px solid #6e422b; border-radius: 50%; color: #263b32; background: #e0bd79; box-shadow: inset 0 0 0 5px #b77e4a; transform: translate(-50%,-50%); font-size: 24px; }
.rpg-room-name { top: 17px; padding: 5px 9px; color: #fff0c8; border-color: #f2d798; background: #352a28; box-shadow: 3px 3px 0 #111; font-size: 10px; }
.rpg-door { position: absolute; z-index: 15; display: block; background-color: #d6a568; background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(91,60,37,.12) 13px 15px); }
.rpg-door.door-right { right: -7px; top: 50%; width: 16px; height: 48px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: translateY(-50%); }.rpg-door.door-left { left: -7px; top: 50%; width: 16px; height: 48px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: translateY(-50%); }.rpg-door.door-bottom { left: 50%; bottom: -7px; width: 50px; height: 16px; border-right: 4px solid var(--ink); border-left: 4px solid var(--ink); transform: translateX(-50%); }.rpg-door.door-top { left: 50%; top: -7px; width: 50px; height: 16px; border-right: 4px solid var(--ink); border-left: 4px solid var(--ink); transform: translateX(-50%); }
.rpg-window { top: 10px; height: 13px; background: repeating-linear-gradient(90deg, #79aaa7 0 12px, #4c7774 12px 15px); }.rpg-window.window-a { left: 13px; }.rpg-window.window-b { right: 13px; }
.rpg-room-light { position: absolute; z-index: 3; top: 52px; width: 12px; height: 12px; border: 3px solid var(--ink); background: #ffe16d; box-shadow: 0 0 10px #ffe16d; }.rpg-room-light.light-a { left: 22px; }.rpg-room-light.light-b { right: 22px; }
.rpg-display { bottom: 14%; width: 24%; height: 45%; border-width: 3px; }.rpg-display::before { top: 8px; width: 29px; height: 29px; }.rpg-gallery-rope { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 8%; height: 5px; background: #9d3e38; box-shadow: 0 -48px 0 rgba(157,62,56,.32); }
.rpg-blueprint { left: 8%; right: 32%; top: 31%; bottom: 12%; }.rpg-bench { right: 6%; top: 31%; width: 18%; height: 54%; }.rpg-crate { right: 5%; bottom: 5%; width: 22%; height: 21%; }.rpg-crate.crate-b { left: 7%; right: auto; bottom: 6%; width: 35px; height: 35px; padding: 0; color: transparent; }.rpg-crate.crate-b::after { content: "×"; color: #5d2e24; font-size: 18px; }.rpg-desk-lamp { position: absolute; z-index: 3; left: 20%; top: 24%; width: 9px; height: 36px; background: var(--ink); }.rpg-desk-lamp::after { content: ""; position: absolute; left: -12px; top: -7px; width: 32px; height: 17px; border: 3px solid var(--ink); background: var(--yellow); }
.rpg-counter { right: 8%; top: 27%; width: 30%; height: 61%; }.rpg-counter i { position: absolute; left: 50%; top: 11px; width: 18px; height: 12px; border: 3px solid var(--ink); background: #f0e2b9; transform: translateX(-50%); }.rpg-mat { left: 9%; bottom: 8%; width: 41%; }.rpg-sofa { position: absolute; left: 8%; top: 32%; width: 40%; height: 22%; border: 4px solid var(--ink); border-radius: 8px; background: #6a8b78; box-shadow: inset 0 8px #88a694; }.rpg-plant { position: absolute; right: 10%; top: 12%; width: 19px; height: 22px; border: 3px solid var(--ink); background: #8d5636; }.rpg-plant::before { content: ""; position: absolute; left: 50%; bottom: 15px; width: 29px; height: 29px; border: 3px solid var(--ink); border-radius: 50%; background: #3c774c; transform: translateX(-50%); }
.rpg-owner-rug { position: absolute; z-index: 0; left: 14%; right: 14%; top: 24%; bottom: 12%; border: 4px solid #6f4732; background: repeating-linear-gradient(90deg, #d2ae68 0 14px, #c49659 14px 28px); }.rpg-owner-desk { z-index: 2; left: 18%; right: 18%; top: 31%; height: 34%; }.rpg-stool { z-index: 3; bottom: 8%; }.rpg-coffee { position: absolute; z-index: 3; right: 25%; top: 42%; width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: #f2e5c4; }.rpg-paper-stack { position: absolute; z-index: 3; left: 25%; top: 40%; width: 27px; height: 20px; border: 3px solid var(--ink); background: #e9dfc0; box-shadow: 4px 4px 0 #6c8c8b; }
.rpg-books { top: 27%; height: 59%; }.rpg-file-table { left: 7%; bottom: 11%; }.rpg-cabinet { position: absolute; left: 7%; top: 29%; width: 29%; height: 29%; border: 4px solid var(--ink); background: #789080; box-shadow: inset 0 -10px rgba(0,0,0,.09); }.rpg-cabinet::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; background: var(--ink); }.rpg-clock { position: absolute; right: 10%; top: 12%; width: 25px; height: 25px; border: 4px solid var(--ink); border-radius: 50%; background: #f2e3bd; }.rpg-clock::before { content: ""; position: absolute; left: 10px; top: 4px; width: 3px; height: 9px; background: var(--ink); transform-origin: bottom; transform: rotate(25deg); }
.rpg-extension { box-shadow: inset 0 15px rgba(114,72,41,.5), inset 15px 0 rgba(98,61,36,.5), 0 4px 0 rgba(37,26,19,.3); }.rpg-stair { right: 7%; top: 24%; width: 40%; height: 60%; }.rpg-brick { position: absolute; width: 43px; height: 27px; border: 3px solid var(--ink); background: repeating-linear-gradient(90deg, #ac5f42 0 19px, #7b3f32 19px 22px); }.rpg-brick.brick-a { left: 8%; bottom: 11%; }.rpg-brick.brick-b { left: 27%; bottom: 17%; transform: rotate(7deg); }
.rpg-entrance { bottom: -33px; width: 82px; height: 54px; background: repeating-linear-gradient(0deg, #cfb576 0 11px, #bda05e 11px 14px); }.rpg-entrance::before, .rpg-entrance::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 48px; border: 3px solid var(--ink); background: #855237; }.rpg-entrance::before { left: -14px; }.rpg-entrance::after { right: -14px; }
.rpg-helper { position: absolute; z-index: 41; left: 55%; bottom: 7%; width: 31px; height: 31px; border: 3px solid var(--ink); border-radius: 9px; background: #eee5ca; box-shadow: 3px 4px 0 rgba(22,37,31,.3); animation: helper-hop 1.2s steps(2,end) infinite; }.rpg-helper::before, .rpg-helper::after { content: ""; position: absolute; z-index: -1; top: -7px; width: 12px; height: 12px; border: 3px solid var(--ink); background: var(--ink); transform: rotate(45deg); }.rpg-helper::before { left: 1px; }.rpg-helper::after { right: 1px; }.rpg-helper i, .rpg-helper b { position: absolute; top: 10px; width: 5px; height: 7px; background: #57d985; box-shadow: 0 0 5px #57d985; }.rpg-helper i { left: 6px; }.rpg-helper b { right: 6px; }
.rpg-panda { --panda-x: 49%; --panda-y: 71%; width: 38px; height: 50px; filter: drop-shadow(4px 5px 0 rgba(22,37,31,.34)); }.rpg-panda-face { width: 34px; height: 33px; }.rpg-panda-body { top: 29px; width: 25px; }
.rpg-room-panel { color: #fff7db; border: 4px solid #fff1c8; outline: 4px solid #11172d; background: #17203e; box-shadow: 7px 7px 0 #090c19, inset 0 0 0 3px #4c587d; }.rpg-room-panel .panel-kicker { color: var(--yellow); }.rpg-room-panel .panel-link { color: var(--ink); }
.rpg-page .guide-close { color: #fff7db; }

.preview-section { min-height: 70vh; padding: 110px max(24px, 8vw); background: var(--paper); }
.preview-section h2 { max-width: 750px; margin: 0; font-size: clamp(36px, 6vw, 80px); line-height: 1.1; letter-spacing: -.05em; }
.preview-section > p:last-child { max-width: 650px; margin-top: 28px; font-size: 18px; line-height: 2; }

.home-section, .content-section { padding: 90px max(24px, 7vw); }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.section-title-row h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.1; letter-spacing: -.05em; }
.text-link { padding: 8px 0; font-weight: 900; text-underline-offset: 5px; }

.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ==========================================================================
   展示室に並べる1点＝台座に載った展示物
   上から光が当たり、下に真鍮のキャプション板が付く。
   カード全面が「詳細へ」のリンク（見出しのリンクを ::after で広げている）。
   App Store だけは行き先が違うので、その上に重ねた別のリンクにしている。
   ========================================================================== */
.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 18px;
    border: var(--pixel-border);
    background: var(--cream);
    box-shadow: 7px 7px 0 var(--ink);
}
/* 展示の間（壁付けの明かり付き） */
.exhibit-stage {
    position: relative;
    display: grid;
    place-items: end center;
    height: 156px;
    overflow: hidden;
    border-bottom: 4px solid var(--ink);
    background: linear-gradient(#1d3630, #2c4d3f);
}
/* 天井の小さな照明 */
.exhibit-stage::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 42px;
    height: 13px;
    border: 4px solid #14100c;
    border-top: 0;
    background: #cfa257;
    transform: translateX(-50%);
}
/* 落ちてくる光。触れている間だけ明るくなる。 */
.exhibit-light {
    position: absolute;
    top: 13px;
    left: 50%;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;
    border-top: 152px solid rgba(255,238,186,.26);
    transform: translateX(-50%);
    transition: border-top-color .18s;
}
.app-card:has(h3 a:hover) .exhibit-light,
.app-card:has(h3 a:focus-visible) .exhibit-light { border-top-color: rgba(255,238,186,.46); }
.exhibit-frame {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    padding: 9px;
    border: 5px solid #17130e;
    background: linear-gradient(#f5e9c9, #dcc79a);
    box-shadow: 6px 6px 0 rgba(0,0,0,.34);
}
.exhibit-frame img { display: block; width: 82px; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); border-radius: 18px; background: #fff; }
/* 展示台 */
.exhibit-plinth {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 50%;
    width: 168px;
    height: 22px;
    border: 4px solid #17130e;
    border-bottom: 0;
    background: linear-gradient(#f2e7c8, #c9b68d);
    box-shadow: inset 0 5px 0 rgba(255,255,255,.5);
    transform: translateX(-50%);
}
/* 真鍮のキャプション板。台座に半分かかるように少し持ち上げる。 */
.exhibit-plate {
    display: flex;
    z-index: 2;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin: 0 16px -6px;
    padding: 7px 10px;
    border: 3px solid #4a3a1c;
    color: #3a2d15;
    background: linear-gradient(#e9d296, #c8a961);
    box-shadow: 3px 3px 0 rgba(23,19,14,.34);
    font: 900 10px/1 ui-monospace, monospace;
    letter-spacing: .1em;
    transform: translateY(-13px);
}
.exhibit-plate b { padding: 3px 6px; color: #e9d296; background: #3a2d15; }
.app-card h3 { margin: 0 16px; font-size: 21px; line-height: 1.3; }
.app-card h3 a { color: inherit; text-decoration: none; }
/* 見出しのリンクをカード全面へ広げる＝どこを押しても詳細へ */
.app-card h3 a::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.exhibit-tagline { margin: 9px 16px 0; color: #2c5a44; font-size: 14px; font-weight: 900; line-height: 1.6; }
.exhibit-summary { margin: 7px 16px 0; font-size: 13px; line-height: 1.78; }
.exhibit-actions { display: flex; align-items: stretch; gap: 9px; margin: 15px 16px 0; }
.exhibit-enter,
.exhibit-store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border: 3px solid var(--ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-decoration: none;
}
.exhibit-enter { flex: 1; color: var(--cream); background: var(--green-dark); box-shadow: 3px 3px 0 var(--ink); }
.app-card:has(h3 a:hover) .exhibit-enter,
.app-card:has(h3 a:focus-visible) .exhibit-enter { color: var(--ink); background: var(--yellow); }
.exhibit-store { position: relative; z-index: 2; color: var(--ink); background: var(--cream); box-shadow: 3px 3px 0 var(--ink); }
.exhibit-store:hover,
.exhibit-store:focus-visible { background: var(--yellow); outline: 0; }
/* 展示の背景と台座だけ、アプリごとの色に寄せる */
.app-card.theme-rpg { background: #f4e1c1; }
.app-card.theme-blueprint { background: #dcebea; }
.app-card.theme-timer { background: #e4e8d7; }
.app-card.theme-mind { background: #e7e1ee; }
/* 申請中の展示。アイコンもストアの入口もまだ無いので、枠だけ点線で置いておく */
.exhibit-frame-empty { display: block; width: 82px; aspect-ratio: 1; border: 3px dashed rgba(248,241,220,.5); border-radius: 18px; }
.exhibit-soon { display: flex; align-items: center; padding: 10px 13px; border: 3px dashed var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .04em; opacity: .72; }
.app-card.theme-blueprint .exhibit-stage {
    background-color: #22384c;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 14px 14px;
}
.app-card.theme-blueprint .exhibit-tagline { color: #2a5566; }
.app-card.theme-timer .exhibit-stage { background: linear-gradient(#2f3a2c, #414f38); }
.app-card.theme-timer .exhibit-tagline { color: #47603a; }

/* ホーム：工房の案内板 */
.signboard-band { color: #f8f1dc; background: var(--green-dark); }
.signboard-band .eyebrow { color: var(--yellow); }
.signboard-list { display: grid; gap: 12px; }
.signboard-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px 14px;
    align-items: center;
    padding: 16px 18px;
    border: 3px solid #f8f1dc;
    color: inherit;
    background: rgba(255,255,255,.06);
    box-shadow: 6px 6px 0 #0c261a;
    text-decoration: none;
}
.signboard-item:hover,
.signboard-item:focus-visible { color: var(--ink); border-color: var(--ink); background: var(--yellow); outline: 0; box-shadow: 6px 6px 0 rgba(9,32,22,.5); }
.signboard-plate { grid-column: 1 / -1; }
.signboard-plate strong { display: block; font-size: 20px; line-height: 1.2; letter-spacing: .05em; }
.signboard-plate small { display: block; margin-top: 5px; color: var(--yellow); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .18em; }
.signboard-item:hover .signboard-plate small,
.signboard-item:focus-visible .signboard-plate small { color: var(--green); }
.signboard-note { font-size: 13px; font-weight: 700; line-height: 1.7; }
.signboard-note time { display: block; margin-bottom: 5px; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .1em; opacity: .78; }
.signboard-arrow { font-size: 18px; text-align: right; }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

/* ==========================================================================
   製作室に並べる1台＝作業台に載った作りかけの道具
   展示室のカードと同じで、カード全面が「製作台を見る」のリンク。
   試作品の絵と目盛りは --progress を共有しているので、進み具合を直せば
   絵の「できている幅」も一緒に動く。
   ========================================================================== */
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 18px;
    border: var(--pixel-border);
    background: var(--cream);
    box-shadow: 7px 7px 0 var(--ink);
}
/* 作業台の天板。木目の上に方眼の下敷きを敷いてある。 */
.bench-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 152px;
    overflow: hidden;
    border-bottom: 4px solid var(--ink);
    background-color: #9a6b3d;
    background-image:
        repeating-linear-gradient(0deg, rgba(40,24,12,.16) 0 2px, transparent 2px 9px),
        linear-gradient(#a9743f, #82562f);
}
/* 天板の奥にある背板 */
.bench-stage::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 46%;
    border-bottom: 4px solid rgba(28,18,10,.45);
    background-color: #3f4a44;
    background-image: radial-gradient(rgba(196,214,206,.5) 2px, transparent 2px);
    background-size: 15px 15px;
}
/* 「作業中」の黄黒テープ。斜めに貼ってある。 */
.bench-tape {
    position: absolute;
    top: 31px;
    right: -56px;
    z-index: 3;
    width: 214px;
    padding: 5px 0;
    border-block: 3px solid #17130e;
    color: #17130e;
    background: repeating-linear-gradient(45deg, var(--yellow) 0 11px, #241708 11px 22px);
    box-shadow: 0 4px 0 rgba(0,0,0,.25);
    text-align: center;
    font: 900 9px/1.4 ui-monospace, monospace;
    letter-spacing: .12em;
    text-shadow: 0 0 4px var(--yellow), 0 0 4px var(--yellow), 0 0 4px var(--yellow);
    transform: rotate(32deg);
}
/* 作りかけの試作品。左が できているところ、右が これから作るところ。 */
.bench-piece {
    position: relative;
    z-index: 2;
    width: min(196px, 62%);
    height: 92px;
    filter: drop-shadow(5px 5px 0 rgba(0,0,0,.28));
}
.bench-piece i,
.bench-piece b { position: absolute; top: 0; bottom: 0; }
.bench-piece i {
    left: 0;
    width: var(--progress, 50%);
    overflow: hidden;
    border: 5px solid var(--ink);
    border-right: 0;
    background-color: #f3ead0;
    background-image:
        linear-gradient(rgba(22,37,31,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,37,31,.13) 1px, transparent 1px);
    background-size: 11px 11px;
}
.bench-piece b {
    right: 0;
    left: var(--progress, 50%);
    border: 5px dashed rgba(23,19,14,.62);
    border-left: 0;
    background: rgba(255,252,240,.3);
}
/* 台に固定している万力 */
.bench-clamp {
    position: absolute;
    z-index: 3;
    bottom: 32px;
    left: 8%;
    width: 34px;
    height: 46px;
    border: 5px solid #14100c;
    background: linear-gradient(#8f9aa2, #5d6870);
    box-shadow: 4px 4px 0 rgba(0,0,0,.3);
}
.bench-clamp::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 100%;
    width: 20px;
    height: 9px;
    border: 4px solid #14100c;
    border-left: 0;
    background: #c9b06a;
}
/* 木札：製作台の番号と、いまの状態 */
.bench-plate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin: 0 16px -4px;
    padding: 7px 10px;
    border: 3px solid #3f2a14;
    color: #f4e6c4;
    background: linear-gradient(#7d5029, #5b3a1d);
    box-shadow: 3px 3px 0 rgba(23,19,14,.34);
    font: 900 10px/1 ui-monospace, monospace;
    letter-spacing: .1em;
    transform: translateY(-13px);
}
.bench-plate b { padding: 3px 6px; color: #3f2a14; background: var(--yellow); }
.project-card h3 { margin: 0 16px; font-size: 21px; line-height: 1.3; }
.project-card h3 a { color: inherit; text-decoration: none; }
.project-card h3 a::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.bench-tagline { margin: 9px 16px 0; color: #8a5220; font-size: 14px; font-weight: 900; line-height: 1.6; }
.bench-summary { margin: 7px 16px 0; font-size: 13px; line-height: 1.78; }
/* 工程の目盛り。10目盛りに区切って、埋まった分だけ黄色くする。 */
.bench-gauge { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; }
.bench-gauge b { font: 900 13px/1 ui-monospace, monospace; letter-spacing: .04em; }
.bench-bar {
    position: relative;
    flex: 1;
    height: 20px;
    overflow: hidden;
    border: 3px solid var(--ink);
    background: #2a2f26;
}
.bench-bar i { display: block; width: var(--progress, 0%); height: 100%; background: repeating-linear-gradient(90deg, var(--yellow) 0 9px, #d5a93c 9px 13px); }
.bench-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), rgba(20,24,18,.9) calc(10% - 3px) 10%);
}
.bench-note { margin: 9px 16px 0; color: #4c6a52; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.bench-actions { display: flex; margin: 14px 16px 0; }
.bench-enter {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border: 3px solid var(--ink);
    color: var(--cream);
    background: var(--green-dark);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}
.project-card:has(h3 a:hover) .bench-enter,
.project-card:has(h3 a:focus-visible) .bench-enter { color: var(--ink); background: var(--yellow); }
/* 試作品の中身は、道具ごとに違うものを描いてある */
.project-card.theme-electric .bench-piece i {
    background-image:
        linear-gradient(#2f6d8a 0 5px, transparent 5px),
        linear-gradient(#c9772f 0 5px, transparent 5px),
        radial-gradient(circle at 22px 66px, #3f7d63 0 7px, transparent 8px),
        linear-gradient(rgba(22,37,31,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,37,31,.13) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 11px 11px, 11px 11px;
    background-position: 0 22px, 0 44px, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
.project-card.theme-mind .bench-piece i {
    background-image:
        radial-gradient(circle at 26px 26px, #6d4c9a 0 9px, transparent 10px),
        radial-gradient(circle at 68px 58px, #3f7d63 0 7px, transparent 8px),
        radial-gradient(circle at 104px 24px, #c9772f 0 6px, transparent 7px),
        linear-gradient(rgba(22,37,31,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,37,31,.13) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 11px 11px, 11px 11px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
/* 節をつなぐ枝。作れているところにしか描かれない（i が はみ出しを切る）。 */
.project-card.theme-mind .bench-piece i::before,
.project-card.theme-mind .bench-piece i::after {
    content: "";
    position: absolute;
    height: 3px;
    background: rgba(31,45,38,.65);
    transform-origin: 0 50%;
}
.project-card.theme-mind .bench-piece i::before { top: 26px; left: 26px; width: 53px; transform: rotate(37deg); }
.project-card.theme-mind .bench-piece i::after { top: 58px; left: 68px; width: 50px; transform: rotate(-43deg); }

.primary-link, .store-link { display: inline-block; margin-top: 15px; padding: 11px 14px; border: var(--pixel-border); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; text-decoration: none; }

.site-header-inner { position: absolute; }
.inner-main { min-height: 80vh; padding-top: 96px; }
.page-hero { padding: 95px max(24px, 8vw) 70px; border-bottom: 5px solid var(--ink); background: #d9bc84; }
.page-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(42px, 7vw, 92px); line-height: 1.02; letter-spacing: -.06em; }
.page-hero > p:last-of-type { max-width: 760px; margin: 24px 0 0; font-size: 18px; line-height: 1.9; }
.content-section { max-width: 1440px; margin: 0 auto; }
.content-section > h2, .split-section h2, .screenshot-section h2 { margin: 0 0 28px; font-size: clamp(32px, 4vw, 58px); letter-spacing: -.045em; }
.document-list { border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 20px; border-bottom: 2px solid var(--ink); background: var(--cream); text-decoration: none; }
.document-row:last-child { border-bottom: 0; }.document-row:hover { background: var(--yellow); }.document-row small, .document-row strong { display: block; }.document-row small { margin-bottom: 5px; font: 800 10px/1 ui-monospace, monospace; color: var(--green); letter-spacing: .1em; }.document-row strong { font-size: 20px; }.document-row p { margin: 6px 0 0; color: #4f5d56; }.document-row.is-draft { opacity: .72; }
.empty-state { padding: 25px; border: 3px dashed var(--ink); background: var(--cream); }.empty-state strong { font-size: 21px; }.empty-state p { margin-bottom: 0; }

/* ==========================================================================
   記録棚：1件＝1冊の本を立てて並べる
   段替えは件数で判定していない。棚の幅で折り返すので、新しい順に詰めれば
   古いものが勝手に下の段へ落ちる。棚板は段の高さ（200px）で繰り返す背景。
   ========================================================================== */
.bookshelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, 66px);
    grid-auto-rows: 300px;
    align-items: end;
    justify-content: start;
    margin-bottom: 58px;
    padding: 0 20px;
    border: 6px solid #3a2412;
    background-color: #5a3a1e;
    background-image:
        repeating-linear-gradient(0deg, rgba(28,16,8,.18) 0 2px, transparent 2px 9px),
        linear-gradient(transparent 0 273px, #2b1a0e 273px 279px, #a06840 279px 294px, #6d4526 294px 300px);
    background-size: auto, 100% 300px;
    box-shadow: 9px 9px 0 rgba(10,14,10,.4), inset 0 0 0 3px rgba(255,231,178,.1);
}
.book { position: static; display: block; width: 63px; height: var(--book-h, 240px); margin-bottom: 21px; text-decoration: none; }
.book-spine {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 22px 0 9px;
    overflow: hidden;
    border: 4px solid #1e150d;
    color: #f6ecd0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.15) 0 6px, transparent 6px, transparent calc(100% - 9px), rgba(0,0,0,.3) calc(100% - 9px)),
        var(--spine, #8a3d3a);
    box-shadow: 4px 0 0 rgba(0,0,0,.22);
    transition: transform .14s;
}
/* 背表紙の金の帯 */
.book-band { position: absolute; top: 12px; right: 6px; left: 6px; height: 3px; background: #e0c07a; box-shadow: 0 6px 0 #e0c07a; }
/* 1列に収める。折り返すと2列目が左に出て、背表紙として読めなくなるため。
   入りきらない題名は下で切れる。薄く消える見せ方にして「続きがある」ことを示す。 */
.book-title {
    flex: 1;
    overflow: hidden;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .04em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    mask-image: linear-gradient(#000 0 86%, transparent);
}
.book-date { flex: none; margin-top: 7px; color: rgba(246,236,208,.72); font: 900 11px/1 ui-monospace, monospace; }
/* 本にさわると少し飛び出す。題名は棚の下の札で読む。 */
.book:hover .book-spine,
.book:focus-visible .book-spine { transform: translateY(-19px); }
.book:focus-visible { outline: 0; }
.book:focus-visible .book-spine { box-shadow: 0 0 0 4px var(--yellow), 4px 0 0 rgba(0,0,0,.22); }
/* 札は棚そのものを基準に置く。本ごとに出すと、端の本で画面からはみ出すため。 */
.book-label {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    z-index: 4;
    display: none;
    align-items: baseline;
    gap: 4px 10px;
    flex-wrap: wrap;
    padding: 11px 13px;
    border: 3px solid var(--ink);
    color: var(--ink);
    background: var(--cream);
    box-shadow: 5px 5px 0 rgba(10,14,10,.42);
}
.book:hover .book-label,
.book:focus-visible .book-label { display: flex; }
.book-label b { padding: 3px 7px; color: var(--cream); background: var(--green-dark); font: 900 10px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.book-label time { color: #4f5d56; font: 900 10px/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.book-label strong { flex-basis: 100%; font-size: 15px; line-height: 1.45; }
/* 1冊でも様になるように、最後にブックエンドを立てる */
.book-end {
    width: 45px;
    height: 93px;
    margin-bottom: 21px;
    border: 4px solid #14100c;
    border-bottom-width: 7px;
    background: linear-gradient(90deg, #99a3ab 0 9px, #6d7880 9px);
    box-shadow: 4px 0 0 rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
    .book-spine { transition: none; }
}

.app-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 45px; align-items: center; padding: 85px max(24px, 8vw) 70px; border-bottom: 5px solid var(--ink); background: #dac18f; }
.app-hero h1 { margin: 0; font-size: clamp(42px, 7vw, 88px); line-height: 1; letter-spacing: -.06em; }.app-hero > div > p { max-width: 750px; line-height: 1.8; }
.app-icon-large { width: 220px; aspect-ratio: 1; object-fit: cover; border: 5px solid var(--ink); border-radius: 44px; background: #fff; box-shadow: 10px 10px 0 var(--ink); }
.app-icon-large.is-empty { display: block; border-style: dashed; background: rgba(255,249,233,.55); box-shadow: none; }
.store-pending { display: inline-block; margin-top: 15px; padding: 11px 14px; border: 3px dashed var(--ink); font-weight: 900; }
.app-tagline { margin: 12px 0 4px; font-size: clamp(21px, 3vw, 37px); font-weight: 900; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }.lead-copy { margin: 0; font-size: 20px; line-height: 2; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.feature-grid article { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 18px; border: 3px solid var(--ink); background: var(--cream); box-shadow: 5px 5px 0 var(--ink); }.feature-grid span { font: 900 20px/1 ui-monospace, monospace; color: var(--green); }.feature-grid p { margin: 0; line-height: 1.7; }
.screenshot-section { max-width: none; color: #f8f1dc; background: var(--green-dark); }.screenshot-section .eyebrow { color: var(--yellow); }.screenshot-row { display: flex; gap: 18px; overflow-x: auto; padding: 8px 6px 24px; scroll-snap-type: x mandatory; }.screenshot-row img { width: min(250px, 68vw); height: auto; flex: 0 0 auto; border: 4px solid #f8f1dc; border-radius: 28px; scroll-snap-align: start; box-shadow: 8px 8px 0 #0d281c; }
.prose { max-width: 880px; font-size: 17px; line-height: 2; }.prose h2 { margin: 2em 0 .7em; font-size: 30px; line-height: 1.35; }.prose h3 { margin: 1.7em 0 .5em; font-size: 21px; }.prose a { color: #235d43; }.prose img { max-width: 100%; height: auto; }.prose figure { margin: 1.8em 0; }.prose figcaption { margin-top: .6em; font-size: 14px; line-height: 1.8; opacity: .78; }.draft-notice { margin-bottom: 28px; padding: 18px; border: 3px solid #ac7827; background: #fff2c7; }.draft-notice p { margin-bottom: 0; }
.detail-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1100px; }.detail-links a { padding: 18px; border: 3px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; text-decoration: none; }
.document-page .document-body { min-height: 40vh; }.document-meta { display: flex; gap: 20px; max-width: 880px; margin: 0 auto 80px; padding: 12px; border-top: 2px solid var(--ink); font: 700 11px/1 ui-monospace, monospace; }

/* ==========================================================================
   工房主の家
   人に会いに行く部屋なので、書類ページではなく RPG の窓の作りにしている。
   ========================================================================== */
.owner-hero { background: #a5763f; color: #fff6e2; }
.owner-hero .eyebrow { color: #ffe9a6; }
.owner-hero > p:last-of-type { color: #f3e4c4; }
.owner-tagline { margin: 14px 0 0; color: #fff6e2; font-size: clamp(19px, 2.6vw, 30px); font-weight: 900; line-height: 1.45; }
/* 会話窓と同じ形のステータス窓 */
.owner-status {
    position: relative;
    margin: 0 auto;
    padding: 26px 22px 22px;
    border-block: 5px solid var(--ink);
    color: #f6ecd0;
    background-color: #16241d;
    background-image: linear-gradient(rgba(255,255,255,.05), transparent 40%);
}
.owner-status-name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    color: var(--yellow);
    font: 900 13px/1 ui-monospace, monospace;
    letter-spacing: .2em;
}
.owner-status-name b { animation: owner-cursor 1.1s steps(1, end) infinite; }
.owner-status dl {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: 2px 16px;
    margin: 0;
    padding: 15px 15px 13px;
    border: 4px solid #f4e6c4;
    outline: 3px solid var(--ink);
    background: #0f1b16;
}
.owner-status dt {
    align-self: center;
    padding: 6px 0;
    color: #9fc4ad;
    font: 900 11px/1.5 ui-monospace, monospace;
    letter-spacing: .1em;
}
.owner-status dd {
    align-self: center;
    margin: 0;
    padding: 6px 0;
    border-bottom: 2px dotted rgba(244,230,196,.22);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.6;
}
.owner-status dd:last-of-type { border-bottom: 0; }
@keyframes owner-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
    .owner-status-name b { animation: none; }
}
.status-chip { display: inline-block; margin-top: 18px; padding: 8px 11px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-weight: 900; }
.preview-notice { position: sticky; z-index: 40; top: 0; padding: 7px 12px; color: #fff; background: #7b3fb0; text-align: center; font-weight: 900; }
.not-found { padding: 140px max(24px, 8vw); }.not-found h1 { margin: 0; font-size: clamp(42px, 7vw, 90px); line-height: 1.05; letter-spacing: -.06em; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 55px max(24px, 7vw); color: #f8f1dc; background: #14271f; }.site-footer strong { font-size: 22px; }.site-footer p { margin: 7px 0; }.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; }.site-footer a { color: inherit; }.site-footer small { grid-column: 1 / -1; opacity: .72; }

@keyframes panda-work { 50% { transform: translate(-50%, 3px) rotate(1deg); } }
/* 扉と部屋をつなぐ暗幕。扉の暗がりが画面いっぱいに広がり、
   入った先の部屋は その同じ暗がりから明るくなります。 */
.room-curtain { display: none; position: fixed; z-index: 60; inset: 0; background: #060d0a; pointer-events: none; }
.is-room-leaving .room-curtain {
    display: block;
    animation: room-close 360ms ease-in 230ms both;
}
.is-room-entering .room-curtain {
    display: block;
    animation: room-open 520ms ease-out 40ms both;
}
.is-room-entering .portrait-game-shell,
.is-room-entering .home-game-shell { animation: room-settle 520ms ease-out both; }
/* 案内板やメニューからの移動も、同じ暗がりを通します。
   ただし扉のような儀式ではないので、ぐっと短く。 */
.is-page-leaving .room-curtain {
    display: block;
    animation: page-close 190ms ease-in both;
}
.is-page-entering .room-curtain {
    display: block;
    animation: room-open 300ms ease-out both;
}
@keyframes page-close { from { opacity: 0; } to { opacity: 1; } }
@keyframes room-close {
    from { clip-path: circle(0% at var(--curtain-x, 50%) var(--curtain-y, 62%)); }
    to { clip-path: circle(150% at var(--curtain-x, 50%) var(--curtain-y, 62%)); }
}
@keyframes room-open { from { opacity: 1; } to { opacity: 0; } }
@keyframes room-settle { from { transform: translateY(9px); } to { transform: none; } }

@keyframes bot-float { 50% { transform: translateY(-5px); } }
@keyframes bot-look { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-5deg) translateY(-5px); } }
@keyframes scroll-hop { 50% { transform: translateY(4px); } }
@keyframes td-panda-step { 50% { transform: translate(-50%, -56%) rotate(2deg); } }
@keyframes iso-panda-step { 50% { transform: translate(-50%, -57%) translateZ(84px) rotateZ(45deg) rotateX(-58deg) rotate(2deg); } }
@keyframes rpg-panda-step { 50% { transform: translate(-50%, -57%) rotate(2deg); } }
@keyframes helper-hop { 50% { transform: translateY(-4px); } }
@keyframes rpg-caret { 50% { transform: translateY(3px); } }

@media (max-width: 900px) {
    .site-header { inset: 10px 10px auto; min-height: 52px; }
    .menu-button { display: block; cursor: pointer; }
    .site-nav { position: absolute; top: calc(100% + 3px); right: -3px; display: none; flex-direction: column; align-items: stretch; min-width: 160px; padding: 7px; border: var(--pixel-border); background: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
    .site-nav.is-open { display: flex; }
    .site-nav a { color: var(--ink); }
    .hero-copy { top: 84px; left: 14px; right: 14px; max-width: 520px; padding: 14px 15px; }
    .hero-copy h1 { font-size: clamp(28px, 9vw, 45px); }
    .hero-copy > p:last-child { font-size: 13px; }
    .scene-frame { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .scene-frame::-webkit-scrollbar { display: none; }
    .workshop-track { left: 0; right: auto; bottom: 8vh; grid-template-columns: repeat(5, 78vw) 58vw; min-width: auto; width: max-content; height: 46vh; }
    .room, .extension { scroll-snap-align: center; }
    .room-panel { left: 16px; right: 16px; bottom: 14vh; width: auto; }
    .guide { right: 12px; bottom: 16px; width: min(500px, calc(100vw - 24px)); }
    .guide-bot { width: 86px; height: 86px; }
    .guide-dialog { width: calc(100% - 46px); min-height: 126px; margin-right: 46px; margin-bottom: 26px; padding: 16px 54px 14px 17px; }
    .guide-copy { min-height: 3.7em; font-size: 13px; line-height: 1.65; }
    .guide-caret { right: 58px; bottom: 14px; }
    .bot-screen { inset: 17px 10px 14px; border-width: 3px; }
    .bot-screen i, .bot-screen b { top: 13px; width: 8px; height: 10px; }
    .bot-screen i { left: 11px; }.bot-screen b { right: 11px; }
    .home-section, .content-section { padding: 68px 18px; }
    .split-section { grid-template-columns: 1fr; }
    .app-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .page-hero { padding: 82px 18px 52px; }
    .app-hero { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 92px 18px 48px; }.app-icon-large { width: 100px; border-width: 3px; border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }.app-hero h1 { font-size: clamp(33px, 8vw, 50px); }
    .feature-grid, .detail-links { grid-template-columns: 1fr; }
    .site-footer { grid-template-columns: 1fr; }.site-footer nav { justify-content: flex-start; }.site-footer small { grid-column: auto; }
    .concept-switch { top: 75px; right: 12px; }
    .topdown-copy { top: 78px; left: 14px; width: 286px; }
    .topdown-copy h1 { font-size: 30px; }
    .topdown-map { min-width: 940px; min-height: 650px; }
    .td-building { top: 25%; left: 12%; right: 3%; bottom: 9%; }
    .iso-world { width: 1100px; min-height: 650px; perspective-origin: 54% 43%; }
    .iso-building { left: 650px; top: 56%; transform: translate(-50%, -50%) scale(.84) rotateX(58deg) rotateZ(-45deg); }
    .iso-tree.tree-one { left: 17%; }.iso-tree.tree-two { left: 10%; }
    .iso-sign { left: 16%; }
    .iso-floor-sign { right: 9%; }
    .rpg-copy { top: 78px; bottom: auto; left: 14px; width: 286px; }.rpg-copy h1 { font-size: 30px; }
    .rpg-world { width: 1080px; min-height: 650px; }
    .rpg-building { top: 24%; right: 3%; bottom: 9%; left: 11%; }
    .rpg-world::before { display: none; }
    .rpg-pond { left: 1%; top: 52%; transform: scale(.72); }.rpg-tree.tree-left { left: 2%; }.rpg-tree.tree-right { right: 1%; }
    .rpg-room-panel { top: auto; right: 90px; bottom: 18px; left: auto; width: min(330px, calc(100vw - 112px)); }
    .rpg-concept-links { left: 12px; bottom: 14px; }.rpg-caption { display: none; }
    .td-room-panel { top: auto; right: 90px; bottom: 18px; left: auto; width: min(330px, calc(100vw - 112px)); }
    .concept-switch-back { top: auto; right: auto; bottom: 14px; left: 12px; }
    .concept-caption { display: none; }
}

@media (max-width: 560px) {
    .brand small { display: none; }.brand strong { font-size: 14px; }
    .section-title-row { align-items: start; flex-direction: column; }
    .app-card h3 { font-size: 18px; }
    .app-hero { grid-template-columns: 1fr; }.app-icon-large { width: 118px; }
    .document-row p { display: none; }.document-row strong { font-size: 16px; }
    .topdown-copy { width: 245px; padding: 11px 13px; }
    .topdown-copy h1 { font-size: 25px; }
    .topdown-copy > p:last-child { display: none; }
    .topdown-map { min-width: 860px; }
    .td-building { left: 8%; }
    .iso-world { width: 980px; min-height: 610px; }
    .iso-building { left: 565px; top: 57%; transform: translate(-50%, -50%) scale(.72) rotateX(58deg) rotateZ(-45deg); }
    .iso-tree.tree-one { left: 13%; }.iso-tree.tree-two { display: none; }
    .iso-sign { left: 14%; bottom: 17%; }
    .iso-floor-sign { display: none; }
    .rpg-copy { width: 245px; padding: 11px 13px; }.rpg-copy h1 { font-size: 25px; }.rpg-copy > p:last-child { display: none; }
    .rpg-world { width: 980px; min-width: 980px; min-height: 610px; }
    .rpg-building { top: 22%; left: 6%; bottom: 10%; }
    .rpg-pond, .rpg-tree.tree-left { display: none; }
    .rpg-room-panel { right: 78px; width: calc(100vw - 92px); padding: 14px; }.rpg-room-panel h2 { font-size: 20px; }.rpg-room-panel p { margin: 6px 0; font-size: 12px; }
    .guide { right: 8px; bottom: 12px; width: calc(100vw - 16px); }
    .guide-dialog { width: calc(100% - 34px); margin-right: 34px; padding-right: 43px; }
    .guide-bot { width: 76px; height: 76px; }
    .guide-speaker { font-size: 10px; }
    .guide-copy { font-size: 12px; }
    .guide-actions { gap: 5px; }.guide-actions button, .guide-actions a { padding: 6px 7px; font-size: 10px; }
    .rpg-concept-links a { padding: 7px 8px; font-size: 10px; }
    .td-room-panel { right: 78px; width: calc(100vw - 92px); padding: 14px; }
    .td-room-panel h2 { font-size: 20px; }.td-room-panel p { margin: 6px 0; font-size: 12px; }
}

@media (max-height: 650px) and (min-width: 901px) {
    .hero-copy { top: 92px; padding: 12px 15px; }
    .hero-copy h1 { font-size: 35px; }
    .workshop-track { height: 46vh; }
}

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

/* 左に庭、右に工房。室内の壁構造はそのまま維持する */
.rpg-hero { background: #3f7547; }
.rpg-world {
    background-color: #4e864c;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.04) 2px, transparent 2px),
        repeating-linear-gradient(135deg, transparent 0 23px, rgba(29,69,39,.09) 23px 46px);
    background-size: 16px 16px, 16px 16px, auto;
}
.rpg-world::before {
    display: block;
    right: 1.8%;
    top: 10%;
    bottom: 5.5%;
    left: 24.5%;
    border-color: #315f3c;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 0 0 4px rgba(23,53,34,.18);
}
.rpg-world::after { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(15,20,29,.018) 3px 4px); }
.rpg-grass { display: block; }
.rpg-path {
    left: 61.8%;
    bottom: -4%;
    width: 86px;
    height: 18%;
    border-color: #315f3c;
}
.rpg-tree.tree-left { left: 8%; bottom: 13%; }
.rpg-tree.tree-small { left: 18%; top: 22%; }
.rpg-pond { left: 6%; top: 45%; }
.rpg-flower.flowers-a { left: 15%; bottom: 25%; }
.rpg-grass .rpg-tree {
    border-radius: 48%;
    background: radial-gradient(circle at 62% 32%, #5d985e 0 21%, #3f7b4c 22% 58%, #2b603f 59% 100%);
    box-shadow: inset 8px 5px rgba(255,255,255,.08), 6px 7px 0 rgba(22,37,31,.2);
    transform: none;
}
.rpg-grass .rpg-tree::before {
    inset: 10px;
    border-radius: 50%;
    background: rgba(94,153,91,.7);
}
.rpg-grass .rpg-tree::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 76%;
    width: 14px;
    height: 25px;
    border: 3px solid var(--ink);
    background: #855b3c;
    transform: translateX(-50%);
}
.rpg-tree.tree-left { left: 8%; top: 24%; bottom: auto; }
.rpg-tree.tree-small { left: 18%; top: 18%; transform: scale(.68); }
.rpg-tree.tree-right,
.rpg-flower.flowers-b,
.rpg-lamppost { display: none; }
.rpg-fence { display: none; }

.rpg-building {
    top: 12%;
    right: 2.5%;
    bottom: 7%;
    left: 26%;
    padding: 0;
    isolation: isolate;
    border: 10px solid #68595c;
    background-color: #e9e5e1;
    background-image:
        linear-gradient(#d4cfcb 1px, transparent 1px),
        linear-gradient(90deg, #d4cfcb 1px, transparent 1px);
    background-size: 24px 24px;
    box-shadow:
        inset 0 0 0 6px #f0edeb,
        0 9px 0 #4f4245,
        10px 16px 0 rgba(33,45,36,.2);
}
.rpg-building::before {
    display: block;
    z-index: 30;
    top: -10px;
    right: -10px;
    left: -10px;
    height: 24px;
    border: 3px solid #68595c;
    background: linear-gradient(to bottom, #f3f0ee 0 14px, #b9b1ae 14px 100%);
    box-shadow: inset 0 -3px rgba(83,72,73,.08);
}
.rpg-building::after {
    display: block;
    z-index: 31;
    right: -10px;
    bottom: -14px;
    left: -10px;
    height: 34px;
    border: 3px solid #68595c;
    background: linear-gradient(to bottom, #f3f0ee 0 17px, #b9b1ae 17px 100%);
    box-shadow: 0 5px 0 rgba(73,63,66,.16), inset 0 -3px rgba(83,72,73,.08);
}
.rpg-building-sign { display: none; }

.rpg-hall {
    z-index: 1;
    border: 4px solid #a9a4a2;
    background-color: #ece9e7;
    background-image:
        linear-gradient(#d1cecc 1px, transparent 1px),
        linear-gradient(90deg, #d1cecc 1px, transparent 1px);
    background-size: 24px 24px;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
}
.rpg-hall.hall-horizontal { left: 0; right: 0; top: 42%; width: auto; height: 16%; }
.rpg-hall.hall-left { left: 47%; top: 55%; bottom: -8%; width: 7%; height: auto; border-top: 0; }
.rpg-hall.hall-right { display: none; }
.rpg-hall-emblem { z-index: 3; width: 44px; height: 44px; border: 3px solid #776565; color: #6f8c8c; background: #f3d38f; box-shadow: inset 0 0 0 4px #d9a85f; }

.rpg-room {
    --wall-face: #667797;
    --wall-trim: #efc59f;
    --wall-edge: #705858;
    --wall-cap: #f0edeb;
    --wall-front: #b9b1ae;
    --wall-outline: #68595c;
    overflow: visible;
    border: 0;
    background-size: 24px 24px;
    box-shadow: 0 3px 0 rgba(82,72,70,.12);
}
.rpg-gallery {
    --wall-face: #607697; --wall-trim: #efc49e; --wall-edge: #705858;
    left: 0; top: 0; width: 31%; height: 39%;
    background-color: #91c2d1;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
}
.rpg-making {
    --wall-face: #6d7b91; --wall-trim: #efc49e; --wall-edge: #705858;
    left: 34%; top: 0; width: 31%; height: 39%;
    background-color: #f1c99d;
    background-image: linear-gradient(rgba(132,97,67,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(132,97,67,.1) 1px, transparent 1px);
}
.rpg-extension {
    --wall-face: #8b755e; --wall-trim: #d9ae84; --wall-edge: #66534b;
    right: 0; top: 0; width: 32%; height: 39%;
    background-color: #d4ba96;
    background-image: linear-gradient(rgba(113,84,57,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(113,84,57,.11) 1px, transparent 1px);
}
.rpg-reception {
    --wall-face: #5d7d91; --wall-trim: #efc49e; --wall-edge: #705858;
    left: 0; bottom: 0; width: 28%; height: 39%;
    background-color: #a8cad2;
    background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
}
.rpg-owner {
    --wall-face: #657593; --wall-trim: #efc49e; --wall-edge: #705858;
    left: 31%; bottom: 0; width: 37%; height: 39%;
    background-color: #edc49a;
    background-image: linear-gradient(rgba(129,92,61,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(129,92,61,.1) 1px, transparent 1px);
}
.rpg-office {
    --wall-face: #647e79; --wall-trim: #e9c49f; --wall-edge: #66595a;
    right: 0; bottom: 0; width: 29%; height: 39%;
    background-color: #9eb8ae;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
}

.rpg-gallery::after, .rpg-making::after, .rpg-extension::after,
.rpg-reception::after, .rpg-owner::after, .rpg-office::after { display: none; }

.rpg-wall {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}
.rpg-wall-back {
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 34%;
    border: 3px solid var(--wall-outline);
    background-color: var(--wall-face);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.065) 0 3px, transparent 3px 24px);
    box-shadow: inset 0 -9px 0 var(--wall-edge);
}
.rpg-wall-back::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -3px;
    right: -3px;
    left: -3px;
    height: 17px;
    border: 3px solid var(--wall-outline);
    background: var(--wall-cap);
    box-shadow: inset 0 -3px rgba(102,89,92,.1);
}
.rpg-wall-back::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;
    height: 17px;
    border-top: 3px solid var(--wall-outline);
    border-bottom: 3px solid var(--wall-outline);
    background: var(--wall-trim);
}
.rpg-wall-side {
    z-index: 7;
    top: 0;
    bottom: 0;
    width: 23px;
    border: 3px solid var(--wall-outline);
    background: linear-gradient(90deg, var(--wall-cap) 0 68%, var(--wall-edge) 68% 100%);
    box-shadow: inset -3px 0 rgba(69,58,60,.12);
}
.rpg-wall-side.wall-left { left: 0; }
.rpg-wall-side.wall-right { right: 0; transform: scaleX(-1); }
.rpg-wall-front {
    z-index: 8;
    bottom: -2px;
    height: 31px;
    border: 3px solid var(--wall-outline);
    background: linear-gradient(to bottom, var(--wall-cap) 0 16px, var(--wall-front) 16px 100%);
    box-shadow: 0 5px 0 rgba(73,63,66,.16), inset 0 -3px rgba(83,72,73,.08);
}
.rpg-wall-front::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 13px;
    height: 40px;
    box-sizing: border-box;
    border: 3px solid var(--wall-outline);
    background: linear-gradient(90deg, var(--wall-cap) 0 62%, var(--wall-edge) 62% 100%);
}
.rpg-wall-front.front-left { left: 0; right: calc(50% + 38px); }
.rpg-wall-front.front-left::after { right: -12px; }
.rpg-wall-front.front-right { right: 0; left: calc(50% + 38px); }
.rpg-wall-front.front-right::after { left: -12px; transform: scaleX(-1); }
.rpg-room > :not(.rpg-wall):not(.rpg-room-name) { z-index: 3; }

/* 用途が読める室内家具 */
.rpg-showcase,
.rpg-toolboard,
.rpg-workbench,
.rpg-tool-cabinet,
.rpg-material-rack,
.rpg-ladder,
.rpg-supply-box,
.rpg-caution-board,
.rpg-waiting-sofa,
.rpg-reception-desk,
.rpg-side-table,
.rpg-main-desk,
.rpg-desk-chair,
.rpg-desk-drawer,
.rpg-record-shelf,
.rpg-file-desk,
.rpg-office-chair {
    position: absolute;
    box-sizing: border-box;
    border-color: #21332e;
}

/* 展示室：同じ形の展示台を三つ並べる */
.rpg-showcase {
    top: 47%;
    width: 25%;
    height: 35%;
    border: 3px solid #21332e;
    background: #eee2c3;
    box-shadow: inset 0 -10px #cbb98f, 4px 5px 0 rgba(33,51,46,.18);
    font: 800 8px/1 ui-monospace, monospace;
}
.rpg-showcase i {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 27px;
    border: 3px solid #21332e;
    background: #754d48;
    transform: translateX(-50%);
}
.rpg-showcase b { position: absolute; right: 2px; bottom: 3px; left: 2px; text-align: center; }
.rpg-showcase.showcase-rpg { left: 6%; }
.rpg-showcase.showcase-draft { left: 37.5%; }
.rpg-showcase.showcase-timer { right: 6%; }
.rpg-showcase.showcase-draft i { background: #5d8589; }
.rpg-showcase.showcase-timer i { background: #24483e; }
.rpg-gallery-bench {
    position: absolute;
    left: 36%;
    top: 87%;
    width: 28%;
    height: 9px;
    border: 3px solid #21332e;
    background: #9a6544;
}

/* 製作室：壁の工具板、中央の作業台、右の工具棚 */
.rpg-toolboard {
    top: 20%;
    left: 9%;
    width: 50%;
    height: 12%;
    border: 3px solid #21332e;
    background-color: #d8c69f;
    background-image: radial-gradient(#8f795e 1.5px, transparent 1.5px);
    background-size: 8px 8px;
}
.rpg-toolboard i,
.rpg-toolboard b { position: absolute; top: 4px; width: 25%; height: 5px; background: #4f6963; }
.rpg-toolboard i { left: 12%; }
.rpg-toolboard b { right: 12%; }
.rpg-workbench {
    top: 46%;
    right: 26%;
    left: 8%;
    height: 36%;
    border: 4px solid #21332e;
    background: #b77b4e;
    box-shadow: inset 0 -13px #8f593d, 5px 6px 0 rgba(33,51,46,.2);
}
.rpg-workbench i,
.rpg-workbench b {
    position: absolute;
    top: 10px;
    width: 27%;
    height: 31%;
    border: 3px solid #21332e;
    background: #456f6d;
}
.rpg-workbench i { left: 12%; }
.rpg-workbench b { right: 12%; }
.rpg-workbench em { position: absolute; right: 5px; bottom: 3px; color: #f8edd2; font: normal 800 8px/1 ui-monospace, monospace; }
.rpg-tool-cabinet {
    top: 44%;
    right: 6%;
    width: 16%;
    height: 39%;
    border: 4px solid #21332e;
    background: #a7543d;
    box-shadow: inset 0 -12px #804332;
}
.rpg-tool-cabinet i { position: absolute; top: 11px; right: 7px; left: 7px; height: 3px; background: #21332e; box-shadow: 0 13px #21332e; }
.rpg-tool-cabinet b { position: absolute; right: 0; bottom: 4px; left: 0; font: 800 8px/1 ui-monospace, monospace; text-align: center; }

/* 増築室：資材棚、脚立、資材箱だけに整理 */
.rpg-caution-board {
    top: 22%;
    left: 50%;
    padding: 4px 8px;
    border: 3px solid #21332e;
    color: #21332e;
    background: #f2c33d;
    font: 900 8px/1 ui-monospace, monospace;
    transform: translateX(-50%);
}
.rpg-material-rack {
    top: 43%;
    left: 8%;
    width: 43%;
    height: 39%;
    border: 4px solid #21332e;
    background: #b88c5c;
    box-shadow: inset 0 -11px #8c6547;
}
.rpg-material-rack i,
.rpg-material-rack b { position: absolute; right: 8px; left: 8px; height: 6px; background: #e1c184; border: 2px solid #21332e; }
.rpg-material-rack i { top: 12px; }
.rpg-material-rack b { top: 31px; }
.rpg-material-rack em { position: absolute; right: 4px; bottom: 3px; font: normal 800 8px/1 ui-monospace, monospace; }
.rpg-ladder {
    top: 42%;
    right: 8%;
    width: 27%;
    height: 40%;
    border-right: 6px solid #21332e;
    border-left: 6px solid #21332e;
    background: repeating-linear-gradient(to bottom, transparent 0 12px, #21332e 12px 17px);
}
.rpg-supply-box {
    top: 70%;
    width: 17%;
    height: 15%;
    border: 3px solid #21332e;
    background: #b9533d;
    font: 800 7px/1 ui-monospace, monospace;
    text-align: center;
}
.rpg-supply-box.supply-a { left: 54%; }
.rpg-supply-box.supply-b { left: 73%; transform: rotate(5deg); }

/* 受付：待合ソファと受付カウンター */
.rpg-waiting-sofa {
    top: 45%;
    left: 8%;
    width: 36%;
    height: 29%;
    border: 4px solid #21332e;
    border-radius: 7px;
    background: #71947e;
    box-shadow: inset 0 11px #91ad98, 4px 5px 0 rgba(33,51,46,.18);
}
.rpg-waiting-sofa i,
.rpg-waiting-sofa b { position: absolute; bottom: -10px; width: 7px; height: 12px; background: #6d4934; }
.rpg-waiting-sofa i { left: 9px; }
.rpg-waiting-sofa b { right: 9px; }
.rpg-reception-desk {
    top: 45%;
    right: 7%;
    width: 42%;
    height: 36%;
    border: 4px solid #21332e;
    background: #a96643;
    box-shadow: inset 0 -13px #844b36, 5px 6px 0 rgba(33,51,46,.2);
}
.rpg-reception-desk i { position: absolute; top: 8px; left: 50%; width: 30px; height: 20px; border: 3px solid #21332e; background: #e8deb9; transform: translateX(-50%); }
.rpg-reception-desk b { position: absolute; right: 4px; bottom: 3px; color: #f8edd2; font: 800 8px/1 ui-monospace, monospace; }
.rpg-side-table { top: 76%; left: 20%; width: 24px; height: 20px; border: 3px solid #21332e; border-radius: 50%; background: #d1aa6d; }
.rpg-reception .rpg-plant { top: 24%; right: 9%; }

/* 工房主の作業場：デスク、二画面、椅子、引き出し */
.rpg-owner-rug { top: 42%; right: 11%; bottom: 10%; left: 11%; border-color: #80533d; background: repeating-linear-gradient(90deg, #d2ae68 0 14px, #c28d51 14px 28px); }
.rpg-main-desk {
    top: 48%;
    right: 17%;
    left: 17%;
    height: 26%;
    border: 4px solid #21332e;
    background: #9c633f;
    box-shadow: inset 0 -11px #75462f, 5px 6px 0 rgba(33,51,46,.2);
}
.rpg-main-desk i,
.rpg-main-desk b { position: absolute; top: 8px; width: 26%; height: 37%; border: 3px solid #21332e; background: #375f59; }
.rpg-main-desk i { left: 14%; }
.rpg-main-desk b { right: 14%; }
.rpg-main-desk em { position: absolute; top: 12px; left: 50%; width: 11px; height: 11px; border: 3px solid #21332e; border-radius: 50%; background: #f1e4bc; transform: translateX(-50%); }
.rpg-desk-chair { top: 73%; left: 42%; width: 18%; height: 14%; border: 4px solid #21332e; border-radius: 45% 45% 7px 7px; background: #3f6555; }
.rpg-desk-drawer { top: 60%; right: 12%; width: 15%; height: 23%; border: 3px solid #21332e; background: #806049; box-shadow: inset 0 -8px rgba(0,0,0,.12); }

/* 事務室：記録棚二本とファイル机 */
.rpg-record-shelf {
    top: 42%;
    width: 18%;
    height: 41%;
    border: 4px solid #21332e;
    background: #6c543c;
    box-shadow: inset 0 -10px #503d2e;
}
.rpg-record-shelf.shelf-a { right: 6%; }
.rpg-record-shelf.shelf-b { right: 27%; }
.rpg-record-shelf i,
.rpg-record-shelf b,
.rpg-record-shelf em { position: absolute; right: 4px; left: 4px; height: 3px; background: #d7bd84; }
.rpg-record-shelf i { top: 23%; }
.rpg-record-shelf b { top: 49%; }
.rpg-record-shelf em { top: 74%; }
.rpg-file-desk { top: 49%; left: 7%; width: 37%; height: 29%; border: 4px solid #21332e; background: #d0b778; box-shadow: inset 0 -11px #aa8e58, 4px 5px 0 rgba(33,51,46,.18); }
.rpg-file-desk i { position: absolute; top: 7px; left: 10px; width: 40%; height: 36%; border: 3px solid #21332e; background: #718f85; }
.rpg-file-desk b { position: absolute; right: 4px; bottom: 3px; font: 800 8px/1 ui-monospace, monospace; }
.rpg-office-chair { top: 75%; left: 18%; width: 17%; height: 13%; border: 3px solid #21332e; border-radius: 45% 45% 6px 6px; background: #496c5d; }
.rpg-office .rpg-clock { top: 22%; right: 8%; }

.rpg-room-name {
    z-index: 10;
    top: 20px;
    padding: 6px 10px;
    color: #22252a;
    border: 3px solid #755f58;
    background: #fffdf9;
    box-shadow: 3px 3px 0 rgba(87,73,69,.25);
    font-size: 11px;
}
.rpg-extension .rpg-room-name { color: #172018; border-color: #5d6247; background: #add65f; }

button.rpg-room:hover, button.rpg-room:focus-visible {
    z-index: 14;
    outline: 5px solid #f0c83d;
    outline-offset: 2px;
    filter: brightness(1.04);
}
.rpg-room:active { transform: translateY(2px); }
.rpg-window { top: 21px; }
.rpg-room-light { top: 61px; }
.rpg-display { bottom: 16%; height: 40%; }
.rpg-blueprint { top: 38%; }
.rpg-bench { top: 38%; height: 47%; }
.rpg-desk-lamp { top: 31%; }
.rpg-counter { top: 36%; height: 52%; }
.rpg-sofa { top: 40%; }
.rpg-plant, .rpg-clock { top: 22%; }
.rpg-owner-rug { top: 42%; }
.rpg-owner-desk { top: 38%; height: 30%; }
.rpg-books { top: 36%; height: 50%; }
.rpg-cabinet { top: 38%; }
.rpg-stair { top: 34%; height: 50%; }
.rpg-pole { top: 31%; }
.rpg-hall-emblem,
.rpg-helper,
.rpg-door { display: none; }
.rpg-entrance {
    left: 50%;
    bottom: -26px;
    width: 82px;
    height: 26px;
    border: 3px solid #68595c;
    background: repeating-linear-gradient(90deg, #d3a469 0 16px, #be8955 16px 19px);
    box-shadow: 0 4px 0 rgba(73,63,66,.16);
}
.rpg-entrance::before,
.rpg-entrance::after { display: none; }
.rpg-panda { --panda-x: 50%; --panda-y: 78%; }

@media (max-width: 900px) {
    .rpg-building { top: 19%; right: 2%; bottom: 7%; left: 25%; }
    .rpg-world::before { left: 23.5%; }
    .rpg-path { left: 61.5%; }
}

@media (max-width: 560px) {
    .rpg-building { top: 18%; right: 2%; bottom: 8%; left: 24%; }
    .rpg-world::before { left: 22.5%; }
    .rpg-pond, .rpg-tree.tree-left { display: block; }
    .rpg-pond { left: 4%; transform: scale(.68); transform-origin: left center; }
    .rpg-tree.tree-left { left: 6%; transform: scale(.82); }
    .rpg-room-name { top: 18px; padding: 5px 8px; font-size: 10px; }
}

/* 歩ける工房マップ */
.workshop-hero[data-workshop-root] {
    position: relative;
    display: block;
    min-height: 100svh;
    overflow: hidden;
    background: #18221d;
}
.workshop-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background: #2d2119;
    isolation: isolate;
}
.workshop-canvas {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: 0;
    cursor: crosshair;
    image-rendering: pixelated;
    pointer-events: auto;
    touch-action: manipulation;
}
.workshop-canvas:focus-visible { box-shadow: inset 0 0 0 4px var(--yellow); }
.workshop-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 18, 14, .68) 0, transparent 29%, transparent 70%, rgba(10, 15, 12, .5) 100%),
        linear-gradient(90deg, rgba(10, 18, 14, .48), transparent 43%);
}
.workshop-copy {
    position: absolute;
    z-index: 4;
    top: 112px;
    left: clamp(20px, 5vw, 74px);
    max-width: 560px;
    padding: 18px 21px 20px;
    color: var(--ink);
    border: var(--pixel-border);
    background: rgba(255, 249, 233, .94);
    box-shadow: 6px 6px 0 rgba(18, 28, 23, .82);
    pointer-events: none;
}
.workshop-copy h1 {
    margin: 0;
    font-size: clamp(35px, 5vw, 69px);
    line-height: 1.02;
    letter-spacing: -.06em;
}
.workshop-copy h1 em { color: var(--green); font-style: normal; }
.workshop-copy > p:last-child { margin: 13px 0 0; font-weight: 800; }
.workshop-help {
    position: absolute;
    z-index: 4;
    right: 20px;
    top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    max-width: 330px;
    pointer-events: none;
}
.workshop-help span {
    padding: 6px 8px;
    border: 2px solid #f9edcb;
    color: #fff8e5;
    background: rgba(19, 29, 24, .8);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
    font: 800 10px/1 ui-monospace, monospace;
    letter-spacing: .06em;
}
.workshop-loading {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 12px;
    color: #fff9e9;
    background: #18261f;
    text-align: center;
    font: 900 13px/1.4 ui-monospace, monospace;
    letter-spacing: .08em;
}
.workshop-loading[hidden] { display: none; }
.workshop-loading span { width: 48px; height: 48px; margin: auto; border: 6px solid #fff9e9; border-right-color: var(--yellow); animation: workshop-load .8s steps(8) infinite; }
.workshop-loading.is-error span { display: none; }
.workshop-talk {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 64px;
    min-width: 96px;
    padding: 10px 15px;
    border: 3px solid var(--ink);
    background: var(--yellow);
    box-shadow: 4px 4px 0 var(--ink);
    font-weight: 900;
    transform: translateX(-50%);
    cursor: pointer;
}
.workshop-talk[hidden] { display: none; }
.workshop-scroll-cue { z-index: 5; }
@keyframes workshop-load { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
    .workshop-stage { min-height: 560px; }
    .workshop-copy { top: 92px; left: 14px; max-width: calc(100% - 28px); padding: 13px 15px 15px; }
    .workshop-copy h1 { font-size: clamp(31px, 10vw, 46px); }
    .workshop-copy > p:last-child { display: none; }
    .workshop-help { top: auto; right: 12px; bottom: 54px; left: 12px; justify-content: center; max-width: none; }
    .workshop-help span:last-child { display: none; }
    .workshop-talk { bottom: 102px; }
}

@media (prefers-reduced-motion: reduce) {
    .workshop-loading span { animation: none; }
}

/* 縦型ゲームシェル：ホームだけをスマートフォン幅の冒険画面として扱う */
.home-page,
.portrait-page {
    overflow-x: hidden;
    background: #10241c;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.025) 2px, transparent 2px);
    background-size: 18px 18px;
}
html.home-scroll-pages { scroll-snap-type: y proximity; scroll-padding-top: 0; }
.home-page .workshop-hero,
.home-page .encounter-stage,
.home-page .signboard-band {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.home-page .workshop-hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    height: 100svh;
    min-height: 0;
    background: #121a16;
}
.home-page .workshop-stage {
    width: 100%;
    height: clamp(520px, calc(100svh - 136px), 800px);
    min-height: 0;
    max-height: 800px;
    border-block: 5px solid #08100c;
    box-shadow:
        0 -10px 0 rgba(8, 16, 12, .72),
        0 10px 0 rgba(8, 16, 12, .72);
}

@media (max-height: 650px) {
    .home-page .workshop-stage {
        height: calc(100svh - 96px);
    }
}
.home-game-shell,
.portrait-game-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
    min-height: 100svh;
    margin: 0 auto;
    overflow: clip;
    background: var(--paper);
    box-shadow: 0 0 0 4px #08130f, 0 0 42px rgba(0,0,0,.48);
}
.home-side-stage {
    position: fixed;
    z-index: 0;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100vw - 430px) / 2));
    overflow: hidden;
    color: #f7e7bd;
    pointer-events: none;
    background-color: #563922;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(20,15,11,.32) 8% 11%, transparent 11% 89%, rgba(20,15,11,.32) 89% 92%, transparent 92%),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(25,16,11,.2) 42px 46px),
        linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%);
}
.home-side-stage::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.5); }
.home-side-stage::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 23%;
    border-top: 8px solid #17110d;
    background:
        linear-gradient(90deg, rgba(0,0,0,.16) 2px, transparent 2px),
        linear-gradient(#875231 0 72%, #2b211a 72%);
    background-size: 64px 100%, auto;
    box-shadow: inset 0 11px rgba(0,0,0,.22);
}
.home-side-stage-left { left: 0; border-right: 4px solid #08130f; }
.home-side-stage-right {
    right: 0;
    border-left: 4px solid #08130f;
    background-color: #183b3a;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(5,21,22,.45) 8% 11%, transparent 11% 89%, rgba(5,21,22,.45) 89% 92%, transparent 92%),
        linear-gradient(rgba(109,171,165,.08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(109,171,165,.08) 2px, transparent 2px),
        radial-gradient(circle at 50% 28%, rgba(92,190,169,.15), transparent 32%);
    background-size: auto, 24px 24px, 24px 24px, auto;
}
.home-side-stage p {
    position: absolute;
    z-index: 2;
    top: 9vh;
    margin: 0;
    font: 900 clamp(12px, 1.3vw, 19px)/1.45 ui-monospace, monospace;
    letter-spacing: .15em;
    text-shadow: 3px 3px 0 #102219;
}
.home-side-stage-right p { right: 13%; text-align: right; }
.home-manifesto {
    position: fixed;
    z-index: 1;
    top: 9vh;
    left: clamp(22px, 3vw, 48px);
    width: min(480px, calc((100vw - 430px) / 2 - 66px));
    padding: clamp(18px, 2.2vw, 30px);
    border: 4px solid #161d19;
    outline: 4px solid #ead59e;
    color: #18251f;
    background: rgba(255,249,233,.96);
    box-shadow: 10px 10px 0 rgba(18,13,9,.48), inset 0 0 0 3px rgba(109,76,42,.14);
}
.home-manifesto::after { content: ""; position: absolute; right: 15px; bottom: 13px; width: 34px; height: 7px; background: var(--yellow); box-shadow: 0 11px 0 var(--green); }
.home-manifesto .eyebrow { margin-bottom: 13px; }
.home-manifesto h1 { margin: 0; font-size: clamp(31px, 3.6vw, 62px); line-height: 1.06; letter-spacing: -.065em; }
.home-manifesto h1 em { color: var(--green); font-style: normal; }
.home-manifesto > p:last-child { margin: 17px 48px 0 0; font-weight: 800; line-height: 1.75; }
.side-window {
    position: absolute;
    z-index: 2;
    right: 11%;
    bottom: 27%;
    width: min(150px, 38%);
    aspect-ratio: 1.25;
    border: 8px solid #211912;
    background:
        radial-gradient(circle at 70% 27%, #f5d36c 0 5%, transparent 6%),
        linear-gradient(#315e6e 0 55%, #173d34 55%);
    box-shadow: inset 0 0 0 4px #b7824d, 8px 8px 0 rgba(0,0,0,.28);
}
.side-window::before,
.side-window::after { content: ""; position: absolute; background: #211912; }
.side-window::before { top: 0; bottom: 0; left: 48%; width: 6px; }
.side-window::after { top: 48%; right: 0; left: 0; height: 6px; }
.side-window i,
.side-window b { position: absolute; z-index: 2; bottom: 8px; width: 18px; height: 28px; background: #1e5a36; box-shadow: 7px -10px 0 #2e7246; }
.side-window i { left: 12px; }.side-window b { right: 12px; }
.side-blueprint {
    position: absolute;
    z-index: 2;
    top: 49%;
    left: 12%;
    width: min(180px, 48%);
    aspect-ratio: 1.4;
    border: 6px solid #211912;
    background-color: #315f66;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 12px 12px;
    box-shadow: 7px 7px 0 rgba(0,0,0,.28);
    transform: rotate(-2deg);
}
.side-blueprint::after { content: "PLAN 01"; position: absolute; right: 9px; bottom: 8px; font: 900 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.side-blueprint i,
.side-blueprint b { position: absolute; border: 3px solid #a7d4d0; }
.side-blueprint i { inset: 18% 48% 25% 13%; }.side-blueprint b { inset: 35% 12% 15% 57%; }
.side-shelf {
    position: absolute;
    z-index: 1;
    right: 9%;
    left: 9%;
    height: 12px;
    border: 4px solid #1b1712;
    background: #a06840;
    box-shadow: 0 64px 0 #a06840, 0 68px 0 #1b1712;
}
.side-shelf.shelf-one { top: 72%; }
.side-shelf.shelf-two { display: none; }
.side-crate {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(82px, 31%);
    aspect-ratio: 1;
    border: 4px solid #24180f;
    color: #3f2b1d;
    background: #bd8150;
    box-shadow: inset 0 0 0 6px #d89e66, 5px 5px 0 rgba(0,0,0,.28);
    font: 900 clamp(10px, 1.1vw, 15px)/1 ui-monospace, monospace;
}
.side-crate.crate-one { left: 13%; bottom: 7%; transform: rotate(-3deg); }
.side-crate.crate-two { left: 38%; bottom: 9%; transform: rotate(3deg); }
.side-signal {
    position: absolute;
    top: 20%;
    left: 50%;
    width: min(168px, 52%);
    aspect-ratio: 1.35;
    border: 5px solid #0c1813;
    background: #24352e;
    box-shadow: inset 0 0 0 5px #557263, 7px 7px 0 rgba(0,0,0,.3);
    transform: translateX(-50%);
}
.side-signal::after { content: "SYSTEM READY"; position: absolute; right: 0; bottom: 8px; left: 0; text-align: center; font: 900 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.side-signal i, .side-signal b { position: absolute; top: 22%; width: 13%; aspect-ratio: 1; background: #8af2b1; box-shadow: 0 0 12px #8af2b1; }
.side-signal i { left: 25%; }.side-signal b { right: 25%; }
.side-pipe { position: absolute; z-index: 1; width: 24px; border: 5px solid #0a1e1e; background: #557772; box-shadow: inset 6px 0 rgba(255,255,255,.1); }
.side-pipe::after { content: ""; position: absolute; width: 58px; height: 24px; border: 5px solid #0a1e1e; background: #557772; }
.side-pipe.pipe-one { top: 39%; right: 10%; height: 29%; }.side-pipe.pipe-one::after { top: 0; right: 0; }
.side-pipe.pipe-two { bottom: 18%; left: 9%; height: 22%; }.side-pipe.pipe-two::after { bottom: 0; left: 0; }
.side-tool-rack {
    position: absolute;
    z-index: 2;
    top: 47%;
    left: 50%;
    width: min(190px, 55%);
    height: 112px;
    border: 6px solid #0a1e1e;
    background-color: #2a5653;
    background-image: radial-gradient(#84a49f 2px, transparent 2px);
    background-size: 15px 15px;
    transform: translateX(-50%);
    box-shadow: 7px 7px 0 rgba(0,0,0,.28);
}
.side-tool-rack i,
.side-tool-rack b { position: absolute; top: 20px; width: 17px; height: 62px; border: 4px solid #101817; border-radius: 10px; background: #d5a84a; }
.side-tool-rack i { left: 27%; transform: rotate(9deg); }.side-tool-rack b { right: 27%; height: 48px; background: #b86c43; transform: rotate(-8deg); }
.side-gear { position: absolute; z-index: 2; display: grid; place-items: center; color: #d8a759; text-shadow: 4px 4px 0 #0d1c15; }
.side-gear.gear-one { right: 14%; top: 65%; font-size: clamp(46px, 6vw, 92px); }
.side-gear.gear-two { left: 15%; top: 70%; font-size: clamp(31px, 4vw, 62px); }

/* ==========================================================================
   部屋ごとの壁
   村で外から見た建物の色と、中に入ったときの壁の色をそろえています。
   置ける場所には決まった空きがあります：左の壁は上に現在地札、右の壁は上に
   案内板が掛かるので、大きな物は左が約32%から、右が約50%から下。
   右の壁の足もとには案内係が立っているので、床の物は左へ寄せています。
   ========================================================================== */

/* ---- 展示室：緑の壁、順路のレール、スポットライト ---- */
.wall-gallery {
    background-color: #2a4a3c;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(8,24,18,.34) 8% 11%, transparent 11% 89%, rgba(8,24,18,.34) 89% 92%, transparent 92%),
        repeating-linear-gradient(90deg, transparent 0 62px, rgba(255,255,255,.035) 62px 64px),
        linear-gradient(rgba(255,255,255,.05), transparent 45%);
}
.wall-gallery::after {
    border-top-color: #14201a;
    background:
        linear-gradient(90deg, rgba(0,0,0,.16) 2px, transparent 2px),
        linear-gradient(#7a5330 0 72%, #2a211a 72%);
    background-size: 64px 100%, auto;
}
/* 壁付けの展示ケース。中の2つは、置いてある物の影。 */
.gal-case {
    position: absolute;
    z-index: 2;
    top: 34%;
    left: 50%;
    width: min(196px, 56%);
    aspect-ratio: 1.18;
    border: 7px solid #17130e;
    background:
        linear-gradient(114deg, rgba(255,255,255,.14) 0 33%, transparent 33% 45%, rgba(255,255,255,.08) 45% 55%, transparent 55%),
        linear-gradient(#1d3630, #12211d);
    box-shadow: inset 0 0 0 4px #c9a463, 8px 8px 0 rgba(0,0,0,.3);
    transform: translateX(-50%);
}
.gal-case i,
.gal-case b { position: absolute; bottom: 16%; width: 22%; border: 4px solid #14120e; }
.gal-case i { left: 17%; height: 40%; background: #e9d7a6; box-shadow: inset 0 0 0 3px #b98f4f; }
.gal-case b { right: 17%; height: 30%; background: #a8cfc0; box-shadow: inset 0 0 0 3px #5d8b7b; }
.gal-label {
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 50%;
    padding: 5px 11px;
    border: 3px solid #17130e;
    color: #22322a;
    background: #efe2bd;
    font: 900 9px/1 ui-monospace, monospace;
    letter-spacing: .16em;
    box-shadow: 3px 3px 0 rgba(0,0,0,.3);
    transform: translateX(-50%);
}
/* 順路のレール（腰の高さの見切り） */
.gal-rail {
    position: absolute;
    z-index: 1;
    top: 67%;
    right: 0;
    left: 0;
    height: 10px;
    border-block: 3px solid #16241d;
    background: #4a6b58;
}
/* 床の展示台。上に小さな作品がのっている。 */
.gal-plinth {
    position: absolute;
    z-index: 2;
    bottom: 8%;
    width: min(78px, 26%);
    height: 96px;
    border: 5px solid #1a140e;
    background: linear-gradient(#efe3c2, #cdbb92);
    box-shadow: 6px 6px 0 rgba(0,0,0,.28);
}
.gal-plinth::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    border: 4px solid #1a140e;
    background: #6fb59a;
    transform: translateX(-50%) rotate(45deg);
}
.gal-plinth.plinth-one { left: 11%; }
.gal-plinth.plinth-two { left: 44%; height: 74px; }
.gal-plinth.plinth-two::after { width: 28px; height: 28px; border-radius: 50%; background: #e0b45c; transform: translateX(-50%); }
/* 右の壁は案内板と案内係で埋まっているので、足もとだけを使う。
   順路のロープ支柱と、床に立てた案内看板。 */
.gal-post {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    width: 14px;
    height: 86px;
    border: 4px solid #1a140e;
    background: linear-gradient(#e0c07a, #b8913f);
}
.gal-post::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 22px;
    height: 22px;
    border: 4px solid #1a140e;
    border-radius: 50%;
    background: #e0c07a;
    transform: translateX(-50%);
}
.gal-post.post-one { left: 8%; }
.gal-post.post-two { left: 32%; }
.gal-rope {
    position: absolute;
    z-index: 1;
    bottom: calc(9% + 62px);
    left: 9%;
    width: 24%;
    height: 26px;
    border-bottom: 5px solid #8a3d3a;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.gal-stand {
    position: absolute;
    z-index: 2;
    bottom: 8%;
    left: 40%;
    display: grid;
    place-items: center;
    width: min(104px, 30%);
    height: 76px;
    padding: 0 6px;
    border: 5px solid #1a140e;
    color: #22322a;
    background: #efe2bd;
    box-shadow: 5px 5px 0 rgba(0,0,0,.28);
    text-align: center;
    font: 900 9px/1.6 ui-monospace, monospace;
    letter-spacing: .14em;
    transform: rotate(-2deg);
}

/* ---- 製作室：鉄の壁、有孔ボード、進み具合の目盛り ---- */
.wall-workbench {
    background-color: #4d545c;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(12,18,24,.36) 8% 11%, transparent 11% 89%, rgba(12,18,24,.36) 89% 92%, transparent 92%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 26px),
        linear-gradient(rgba(255,255,255,.05), transparent 40%);
}
.wall-workbench::after {
    border-top-color: #171b1f;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 58px),
        linear-gradient(#6e737a 0 72%, #232830 72%);
}
.wb-pegboard {
    position: absolute;
    z-index: 2;
    top: 33%;
    left: 50%;
    width: min(200px, 57%);
    height: 128px;
    border: 6px solid #12181c;
    background-color: #2f4a4d;
    background-image: radial-gradient(#86a3a4 2px, transparent 2px);
    background-size: 15px 15px;
    box-shadow: 7px 7px 0 rgba(0,0,0,.28);
    transform: translateX(-50%);
}
.wb-pegboard i,
.wb-pegboard b { position: absolute; top: 19px; border: 4px solid #101817; border-radius: 9px; }
.wb-pegboard i { left: 26%; width: 17px; height: 70px; background: #d5a84a; transform: rotate(8deg); }
.wb-pegboard b { right: 26%; width: 17px; height: 52px; background: #b86c43; transform: rotate(-8deg); }
.wb-plan {
    position: absolute;
    z-index: 2;
    top: 56%;
    left: 11%;
    display: grid;
    align-content: end;
    justify-items: end;
    width: min(168px, 46%);
    aspect-ratio: 1.4;
    padding: 8px;
    border: 6px solid #12181c;
    color: #cfe4e2;
    background-color: #2e5b62;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 12px 12px;
    box-shadow: 7px 7px 0 rgba(0,0,0,.28);
    font: 900 9px/1 ui-monospace, monospace;
    letter-spacing: .12em;
    transform: rotate(-2deg);
}
.wb-bench {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    left: 9%;
    width: min(206px, 62%);
    height: 20px;
    border: 5px solid #14100c;
    background: #9a6b3d;
    box-shadow: 6px 6px 0 rgba(0,0,0,.28);
}
.wb-bench::before,
.wb-bench::after { content: ""; position: absolute; top: 100%; width: 14px; height: 44px; border: 5px solid #14100c; background: #6f4b2b; }
.wb-bench::before { left: 10%; }
.wb-bench::after { right: 10%; }
.wb-lumber {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    width: 20px;
    height: 128px;
    border: 4px solid #1a140e;
    background: #c08a52;
    box-shadow: inset 0 0 0 4px #d9a469;
}
.wb-lumber.lumber-one { right: 13%; transform: rotate(7deg); }
.wb-lumber.lumber-two { right: 23%; height: 104px; background: #a9743f; transform: rotate(-5deg); }
/* 進み具合の目盛り。数字は飾りではなく、いま製作室にあるものの平均。 */
.wb-gauge {
    position: absolute;
    z-index: 2;
    bottom: 23%;
    left: 8%;
    display: grid;
    align-items: center;
    width: min(178px, 54%);
    height: 54px;
    padding: 0 12px;
    border: 5px solid #0e1418;
    background: #23303a;
    box-shadow: inset 0 0 0 5px #5a7280, 7px 7px 0 rgba(0,0,0,.3);
}
/* 床の道具箱と、転がっている歯車 */
.wb-toolbox {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    left: 9%;
    width: min(126px, 36%);
    height: 68px;
    border: 5px solid #14100c;
    background: linear-gradient(#b8433a 0 46%, #8d322b 46%);
    box-shadow: inset 0 0 0 5px #d4695c, 6px 6px 0 rgba(0,0,0,.28);
}
.wb-toolbox i {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 46px;
    height: 20px;
    border: 5px solid #14100c;
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    transform: translateX(-50%);
}
.wb-gear {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #d8a759;
    text-shadow: 4px 4px 0 #14181c;
}
.wb-gear.gear-one { bottom: 8%; left: 44%; font-size: clamp(40px, 4.6vw, 68px); }
.wb-gear.gear-two { bottom: 6%; left: 60%; font-size: clamp(26px, 3vw, 44px); }
.wb-gauge i {
    display: block;
    height: 16px;
    border: 3px solid #0e1418;
    background: linear-gradient(90deg, var(--yellow) 0 var(--wb-progress, 0%), #16212a var(--wb-progress, 0%));
}
.wb-gauge b {
    position: absolute;
    right: 0;
    bottom: -21px;
    left: 0;
    text-align: center;
    font: 900 9px/1 ui-monospace, monospace;
    letter-spacing: .12em;
}

/* ---- 工房主の家：木の壁と煉瓦、夜の窓、暖炉 ---- */
/* 壁の茶色は、掛かっている木札（#6d4526）よりはっきり暗くしておく。
   同じ茶色だと札が壁に沈んで読めなくなるため。 */
.wall-owner.home-side-stage-left {
    background-color: #4f3018;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(24,14,8,.34) 8% 11%, transparent 11% 89%, rgba(24,14,8,.34) 89% 92%, transparent 92%),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(28,16,10,.22) 42px 46px),
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%);
}
.wall-owner.home-side-stage-right {
    background-color: #55291f;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(24,10,8,.4) 8% 11%, transparent 11% 89%, rgba(24,10,8,.4) 89% 92%, transparent 92%),
        repeating-linear-gradient(0deg, rgba(30,14,10,.45) 0 3px, transparent 3px 28px),
        repeating-linear-gradient(90deg, rgba(30,14,10,.45) 0 3px, transparent 3px 56px);
}
.wall-owner::after {
    border-top-color: #1d120c;
    background:
        linear-gradient(90deg, rgba(0,0,0,.16) 2px, transparent 2px),
        linear-gradient(#8a5a30 0 72%, #2b1c12 72%);
    background-size: 58px 100%, auto;
}
/* 夜の窓。月と星が出ている。両脇はカーテン。 */
.ow-window {
    position: absolute;
    z-index: 2;
    top: 33%;
    right: 13%;
    width: min(150px, 40%);
    aspect-ratio: 1.15;
    border: 8px solid #241811;
    background:
        radial-gradient(circle at 72% 26%, #f3e6a8 0 9%, transparent 10%),
        radial-gradient(circle at 30% 44%, #fff 0 2%, transparent 3%),
        radial-gradient(circle at 52% 17%, #fff 0 1.6%, transparent 2.6%),
        radial-gradient(circle at 22% 22%, #fff 0 1.4%, transparent 2.4%),
        linear-gradient(#16213c 0 62%, #0f1728 62%);
    box-shadow: inset 0 0 0 4px #a8763f, 8px 8px 0 rgba(0,0,0,.3), 0 0 34px rgba(243,230,168,.13);
}
.ow-window::before,
.ow-window::after { content: ""; position: absolute; background: #241811; }
.ow-window::before { top: 0; bottom: 0; left: 48%; width: 6px; }
.ow-window::after { top: 48%; right: 0; left: 0; height: 6px; }
.ow-window i,
.ow-window b { position: absolute; z-index: 3; top: -8px; bottom: -8px; width: 22px; border: 4px solid #241811; background: #8a3d3a; }
.ow-window i { left: -8px; }
.ow-window b { right: -8px; }
.ow-shelf {
    position: absolute;
    z-index: 1;
    top: 62%;
    right: 9%;
    left: 9%;
    height: 12px;
    border: 4px solid #1e150d;
    background: #9a6a3f;
    box-shadow: 0 5px 0 rgba(0,0,0,.26);
}
.ow-books {
    position: absolute;
    z-index: 2;
    top: calc(62% - 60px);
    left: 13%;
    width: min(152px, 44%);
    height: 60px;
    background: repeating-linear-gradient(90deg, #b8503f 0 14px, #1e150d 14px 17px, #d59b46 17px 33px, #1e150d 33px 36px, #4a7f6a 36px 52px, #1e150d 52px 55px, #7a5aa0 55px 69px, #1e150d 69px 72px);
}
.ow-mug {
    position: absolute;
    z-index: 2;
    top: calc(62% - 30px);
    right: 17%;
    width: 26px;
    height: 30px;
    border: 4px solid #1e150d;
    background: #efe3c2;
}
.ow-mug::after { content: ""; position: absolute; top: 4px; left: 100%; width: 12px; height: 13px; border: 4px solid #1e150d; border-left: 0; }
.ow-rug {
    position: absolute;
    z-index: 2;
    right: 9%;
    bottom: 6%;
    left: 9%;
    height: 42px;
    border: 5px solid #2a1a12;
    background: repeating-linear-gradient(90deg, #8a3d3a 0 22px, #a85a4a 22px 44px);
    box-shadow: inset 0 0 0 5px #d9b877;
}
/* 暖炉。火は動かさない（部屋の隅で光がちらつくと本文の邪魔になるため）。 */
.ow-fire {
    position: absolute;
    z-index: 2;
    bottom: 8%;
    left: 9%;
    display: grid;
    place-items: end center;
    width: min(184px, 52%);
    height: 128px;
    border: 6px solid #1d120c;
    background: #7d5033;
    box-shadow: 7px 7px 0 rgba(0,0,0,.3), inset 0 0 0 5px #a3703f;
}
/* 写真立ては暖炉の上（マントルピース）に置く。壁の上のほうは案内板の下なので使えない。 */
/* 絨毯の上で寝ている熊猫。夜の部屋なので起こさない。 */
.ow-panda {
    position: absolute;
    z-index: 3;
    bottom: calc(6% + 12px);
    left: 26%;
    width: 100px;
    height: 78px;
    transform: scale(1.45);
    transform-origin: 50% 100%;
    animation: owp-breath 4.6s ease-in-out infinite;
}
/* まるくなった白いからだ */
.owp-body {
    position: absolute;
    bottom: 0;
    left: 6px;
    width: 88px;
    height: 46px;
    border: 4px solid #1e150d;
    border-radius: 40px 40px 22px 22px;
    background: #f7f2e6;
}
/* 前足。左を描いて、右は影で写す。 */
.owp-arm {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 26px;
    height: 30px;
    border: 4px solid #1e150d;
    border-radius: 16px;
    background: #241a12;
    box-shadow: 66px 0 0 #241a12;
}
.owp-head {
    position: absolute;
    top: 0;
    left: 50%;
    width: 62px;
    height: 54px;
    margin-left: -31px;
    border: 4px solid #1e150d;
    border-radius: 50%;
    background: #f7f2e6;
}
/* 黒い丸い耳 */
.owp-ear { position: absolute; top: -8px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #241a12; box-shadow: 30px 0 0 #241a12; }
/* 目のまわりの黒い模様 */
.owp-eye { position: absolute; top: 15px; left: 8px; width: 15px; height: 17px; border-radius: 50% 50% 46% 46%; background: #241a12; box-shadow: 24px 0 0 #241a12; }
/* 閉じたまぶた */
.owp-lid { position: absolute; top: 22px; left: 12px; width: 8px; height: 3px; border-radius: 2px; background: #f7f2e6; box-shadow: 24px 0 0 #f7f2e6; }
.owp-nose { position: absolute; top: 33px; left: 50%; width: 12px; height: 8px; margin-left: -6px; border-radius: 6px 6px 9px 9px; background: #241a12; }
.owp-zzz {
    position: absolute;
    top: -16px;
    left: 4px;
    color: #f0dcae;
    font: 900 12px/1 ui-monospace, monospace;
    letter-spacing: .18em;
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(20,12,6,.7);
    animation: owp-zzz 4.6s ease-in-out infinite;
}
@keyframes owp-breath {
    0%, 100% { transform: scale(1.45); }
    50% { transform: scale(1.45) scaleY(1.04); }
}
@keyframes owp-zzz {
    0%, 100% { opacity: .25; transform: translate(0, 0); }
    50% { opacity: 1; transform: translate(4px, -7px); }
}
@media (prefers-reduced-motion: reduce) {
    .ow-panda, .owp-zzz { animation: none; }
}
.ow-frame {
    position: absolute;
    z-index: 2;
    bottom: calc(8% + 128px);
    width: 46px;
    height: 46px;
    border: 5px solid #2a1a12;
    background: linear-gradient(#3d5a6b 0 62%, #6d8a6a 62%);
    box-shadow: 4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 3px #e2cda2;
}
.ow-frame.frame-one { left: 13%; }
.ow-frame.frame-two { left: 27%; width: 54px; height: 40px; background: linear-gradient(#4a3b5e 0 58%, #7a6a4a 58%); }
.ow-fire::before {
    content: "";
    position: absolute;
    inset: 28% 18% 0;
    border: 5px solid #1d120c;
    border-bottom: 0;
    background: linear-gradient(#1a1008, #2b1a0e);
}
.ow-fire i {
    position: relative;
    z-index: 2;
    width: 38%;
    height: 38px;
    margin-bottom: 7px;
    background: radial-gradient(ellipse at 50% 100%, #ffd166 0 36%, #f08a3c 36% 64%, #c9432b 64% 100%, transparent 100%);
    box-shadow: 0 0 28px rgba(240,138,60,.5);
}

/* ---- 受付の窓：腰板の明るい壁、窓口、記入台、呼び鈴 ---- */
.wall-desk {
    background-color: #6a6f52;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(24,26,16,.3) 8% 11%, transparent 11% 89%, rgba(24,26,16,.3) 89% 92%, transparent 92%),
        /* 腰板の見切り。ここから下が板張り。 */
        linear-gradient(transparent 0 58%, rgba(36,30,18,.42) 58% 59.6%, rgba(122,88,52,.55) 59.6%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px);
}
.wall-desk::after {
    border-top-color: #221a11;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 46px),
        linear-gradient(#a5754a 0 72%, #33241a 72%);
}
/* 窓口の小窓。木の格子を1本渡して「受け渡し口」に見せる。 */
.dk-window {
    position: absolute;
    z-index: 2;
    top: 33%;
    left: 12%;
    width: min(196px, 54%);
    height: 118px;
    border: 6px solid #241c12;
    background: linear-gradient(#cfe3df 0 62%, #a9c6c1 62%);
    box-shadow: 7px 7px 0 rgba(0,0,0,.28), inset 0 0 0 4px #b98c56;
}
.dk-window i {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 50%;
    width: 7px;
    background: #241c12;
    transform: translateX(-50%);
}
.dk-window b {
    position: absolute;
    right: -6px;
    left: -6px;
    bottom: 26px;
    height: 7px;
    background: #241c12;
}
/* 記入台。窓の下に張り出した板。 */
.dk-counter {
    position: absolute;
    z-index: 2;
    top: calc(33% + 128px);
    left: 6%;
    width: min(238px, 68%);
    height: 20px;
    border: 5px solid #241c12;
    background: linear-gradient(#c08a55 0 55%, #8d6039 55%);
    box-shadow: 6px 6px 0 rgba(0,0,0,.26);
}
.dk-pens {
    position: absolute;
    z-index: 3;
    top: calc(33% + 100px);
    left: 52%;
    display: flex;
    gap: 4px;
    align-items: flex-end;
    padding: 4px 5px 0;
    border: 4px solid #241c12;
    border-bottom: 0;
    background: #4b5a45;
}
.dk-pens i { width: 5px; height: 22px; background: #f2d868; }
.dk-pens i:nth-child(2) { height: 27px; background: #b8433a; }
.dk-pens i:nth-child(3) { height: 19px; background: #7db7b5; }
/* 便箋の束。書いていく人のために置いてある。 */
.dk-pad {
    position: absolute;
    z-index: 3;
    top: calc(33% + 96px);
    left: 36%;
    width: 58px;
    height: 24px;
    border: 4px solid #241c12;
    background: repeating-linear-gradient(#fdf6e2 0 5px, #d9cfb4 5px 6px);
    transform: rotate(-3deg);
}
/* 呼び鈴。押すと工房主が出てくる、という約束の物。 */
.dk-bell {
    position: absolute;
    z-index: 3;
    top: calc(33% + 70px);
    left: 10%;
    width: 74px;
    height: 46px;
    border: 5px solid #1b2320;
    border-radius: 40px 40px 0 0;
    background: linear-gradient(#f3cd6b 0 42%, #c99a33 42%);
    box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.dk-bell::after {
    content: "";
    position: absolute;
    right: -11px;
    bottom: -12px;
    left: -11px;
    height: 12px;
    border: 5px solid #1b2320;
    background: #8d6a2c;
}
.dk-bell i {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 4px solid #1b2320;
    border-radius: 50%;
    background: #f3cd6b;
    transform: translateX(-50%);
}
/* 投函口。返事を待たない手紙は、ここへ落ちていく。 */
.dk-slot {
    position: absolute;
    z-index: 2;
    top: 61%;
    left: 14%;
    width: 84px;
    height: 60px;
    border: 5px solid #1b2320;
    background: linear-gradient(#4a6b58 0 30%, #3a5546 30%);
    box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.dk-slot i {
    position: absolute;
    top: 16px;
    right: 12px;
    left: 12px;
    height: 9px;
    border: 3px solid #1b2320;
    background: #12180f;
}
.dk-letter {
    position: absolute;
    z-index: 3;
    width: 42px;
    height: 28px;
    border: 4px solid #1b2320;
    background: #fdf6e2;
}
.dk-letter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(148deg, transparent 46%, #1b2320 46% 50%, transparent 50%),
        linear-gradient(-148deg, transparent 46%, #1b2320 46% 50%, transparent 50%);
}
.dk-letter.letter-one { bottom: 13%; left: 15%; transform: rotate(-7deg); }
.dk-letter.letter-two { bottom: 9%; left: 29%; transform: rotate(6deg); }
.dk-sign {
    position: absolute;
    z-index: 3;
    top: 61%;
    right: 13%;
    padding: 8px 9px;
    border: 4px solid #1b2320;
    background: #e8dcbb;
    color: #2b2318;
    font: 800 11px/1.55 ui-monospace, monospace;
    text-align: center;
    box-shadow: 4px 4px 0 rgba(0,0,0,.28);
    transform: rotate(-3deg);
}

/* ---- サポート窓口：金属の壁、部品の引き出し、修理台 ---- */
.wall-helpdesk {
    background-color: #44585c;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(14,22,24,.34) 8% 11%, transparent 11% 89%, rgba(14,22,24,.34) 89% 92%, transparent 92%),
        /* 腰の高さに渡した金属の帯。ここから下が作業のための面。 */
        linear-gradient(transparent 0 60%, rgba(12,20,22,.5) 60% 61.4%, rgba(96,120,122,.42) 61.4% 64%, rgba(58,76,80,.5) 64%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 38px);
}
.wall-helpdesk::after {
    border-top-color: #131c1e;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 46px),
        linear-gradient(#7f9490 0 72%, #1e2827 72%);
}
/* 部品の小引き出し。取っ手が並ぶことで「探す場所」に見せる。 */
.hd-drawers {
    position: absolute;
    z-index: 2;
    top: 33%;
    left: 11%;
    width: min(198px, 55%);
    height: 116px;
    border: 6px solid #101a1c;
    background: #46565a;
    box-shadow: 7px 7px 0 rgba(0,0,0,.3);
}
.hd-drawers i,
.hd-drawers b {
    position: absolute;
    right: 8px;
    left: 8px;
    height: 42px;
    border: 3px solid #101a1c;
    background:
        /* 取っ手。1段に3つ。 */
        radial-gradient(circle at 16.6% 50%, #d8c48a 0 4px, transparent 4px),
        radial-gradient(circle at 50% 50%, #d8c48a 0 4px, transparent 4px),
        radial-gradient(circle at 83.3% 50%, #d8c48a 0 4px, transparent 4px),
        linear-gradient(90deg, #5c6f72 0 33%, #101a1c 33% 34%, #5c6f72 34% 66%, #101a1c 66% 67%, #5c6f72 67%);
}
.hd-drawers i { top: 9px; }
.hd-drawers b { bottom: 9px; }
/* 修理台。天板は傷んだ木、脚は鉄。 */
.hd-bench {
    position: absolute;
    z-index: 2;
    top: calc(33% + 132px);
    left: 7%;
    width: min(232px, 66%);
    height: 22px;
    border: 5px solid #101a1c;
    background: linear-gradient(#9c7147 0 52%, #6d4e33 52%);
    box-shadow: 6px 6px 0 rgba(0,0,0,.28);
}
.hd-bench::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -34px;
    left: 16px;
    height: 34px;
    border-right: 6px solid #101a1c;
    border-left: 6px solid #101a1c;
}
/* 手もとを照らす灯り。点いているので「開いている窓口」に見える。 */
.hd-lamp {
    position: absolute;
    z-index: 3;
    top: calc(33% + 78px);
    left: 58%;
    width: 46px;
    height: 26px;
    border: 5px solid #101a1c;
    border-radius: 24px 24px 0 0;
    background: #3f5154;
}
.hd-lamp i {
    position: absolute;
    right: 2px;
    bottom: -3px;
    left: 2px;
    height: 8px;
    background: #ffd98a;
    box-shadow: 0 14px 26px rgba(255,217,138,.42);
}
.hd-part {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 32px;
    border: 5px solid #101a1c;
    background: linear-gradient(#7b8a6a 0 40%, #5d6a50 40%);
    box-shadow: 5px 5px 0 rgba(0,0,0,.26);
}
.hd-part::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 7px;
    left: 7px;
    height: 4px;
    background: #101a1c;
}
.hd-part.part-one { bottom: 12%; left: 13%; transform: rotate(-2deg); }
.hd-part.part-two { bottom: 9%; left: 34%; transform: rotate(3deg); }
/* 呼び出しの番号。窓口が動いていることの証。 */
.hd-number {
    position: absolute;
    z-index: 2;
    top: 60%;
    left: 12%;
    width: 116px;
    padding: 7px 8px 9px;
    border: 5px solid #101a1c;
    background: #22302f;
    text-align: center;
    box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.hd-number i {
    display: block;
    color: #9fb6ac;
    font: 800 9px/1.4 ui-monospace, monospace;
    font-style: normal;
    letter-spacing: .08em;
}
.hd-number b {
    display: block;
    margin-top: 3px;
    color: #ffd98a;
    font: 900 30px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    text-shadow: 0 0 14px rgba(255,217,138,.55);
}
/* 工具掛け。2本ぶら下げてある。 */
.hd-rack {
    position: absolute;
    z-index: 2;
    top: 60%;
    right: 13%;
    width: 76px;
    height: 14px;
    border: 5px solid #101a1c;
    background: #6b7d80;
    box-shadow: 5px 5px 0 rgba(0,0,0,.26);
}
.hd-rack i,
.hd-rack b {
    position: absolute;
    top: 12px;
    width: 9px;
    background: #c9d2cf;
    border: 3px solid #101a1c;
}
.hd-rack i { left: 12px; height: 46px; border-radius: 0 0 5px 5px; }
.hd-rack b { right: 12px; height: 34px; border-radius: 0 0 50% 50%; background: #d8c48a; }
.hd-screwbox {
    position: absolute;
    z-index: 2;
    left: 14%;
    bottom: 10%;
    width: 78px;
    height: 34px;
    border: 5px solid #101a1c;
    background:
        linear-gradient(90deg, transparent 0 32%, #101a1c 32% 35%, transparent 35% 65%, #101a1c 65% 68%, transparent 68%),
        linear-gradient(#5c6f72 0 38%, #46565a 38%);
    box-shadow: 5px 5px 0 rgba(0,0,0,.26);
}

/* ---- 書類棚：綴じた紙と判子。約束事をしまう部屋 ---- */
.wall-documents {
    background-color: #4d5058;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(16,18,22,.34) 8% 11%, transparent 11% 89%, rgba(16,18,22,.34) 89% 92%, transparent 92%),
        linear-gradient(transparent 0 64%, rgba(22,24,30,.45) 64% 65.4%, rgba(58,61,70,.5) 65.4%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 44px);
}
.wall-documents::after {
    border-top-color: #16181d;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 46px),
        linear-gradient(#7e8494 0 72%, #22252c 72%);
}
/* 綴じた書類が並ぶ棚。背表紙の幅を変えて、揃いすぎないようにしている。 */
.dc-shelf {
    position: absolute;
    z-index: 2;
    top: 33%;
    left: 11%;
    width: min(200px, 56%);
    height: 122px;
    border: 6px solid #15171c;
    background: #3a3f4a;
    box-shadow: 7px 7px 0 rgba(0,0,0,.3);
}
.dc-shelf i,
.dc-shelf b {
    position: absolute;
    right: 9px;
    left: 9px;
    height: 44px;
    background:
        repeating-linear-gradient(90deg,
            #8a6f4a 0 13px, #15171c 13px 16px,
            #6d7f96 16px 32px, #15171c 32px 35px,
            #9a5a4d 35px 47px, #15171c 47px 50px,
            #7b8c6a 50px 66px, #15171c 66px 69px);
}
.dc-shelf i { top: 10px; }
.dc-shelf b { bottom: 10px; }
.dc-shelf::after {
    content: "";
    position: absolute;
    right: 9px;
    left: 9px;
    top: 58px;
    height: 5px;
    background: #15171c;
}
/* 大きな帳面。開いた見開きに罫線が入っている。 */
.dc-ledger {
    position: absolute;
    z-index: 2;
    top: calc(33% + 136px);
    left: 8%;
    width: min(212px, 62%);
    height: 74px;
    border: 6px solid #15171c;
    background:
        linear-gradient(90deg, transparent 0 48%, #15171c 48% 52%, transparent 52%),
        repeating-linear-gradient(#fdf8ea 0 9px, #cfc7b2 9px 10px);
    box-shadow: 6px 6px 0 rgba(0,0,0,.26);
}
.dc-stack {
    position: absolute;
    z-index: 2;
    width: 74px;
    height: 30px;
    border: 5px solid #15171c;
    background: repeating-linear-gradient(#fdf8ea 0 6px, #b9b1a0 6px 7px);
    box-shadow: 5px 5px 0 rgba(0,0,0,.24);
}
.dc-stack { bottom: 12%; left: 12%; transform: rotate(-2deg); }
.dc-tag {
    position: absolute;
    z-index: 3;
    top: calc(33% + 8px);
    right: 12%;
    padding: 6px 8px;
    border: 4px solid #15171c;
    background: #e6c15c;
    color: #2a2418;
    font: 800 10px/1.5 ui-monospace, monospace;
    text-align: center;
    transform: rotate(4deg);
}
/* 判子。押すと決まる、という部屋の役目そのもの。 */
.dc-stamp {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    left: 12%;
    width: 40px;
    height: 66px;
    border: 5px solid #15171c;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(#6f4b33 0 58%, #b8433a 58%);
    box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.dc-stamp i {
    position: absolute;
    right: -5px;
    left: -5px;
    bottom: -13px;
    height: 13px;
    border: 5px solid #15171c;
    background: #d5544a;
}
.dc-inkpad {
    position: absolute;
    z-index: 2;
    left: 32%;
    bottom: 9%;
    width: 62px;
    height: 26px;
    border: 5px solid #15171c;
    background: linear-gradient(#2f3742 0 44%, #9e3b32 44%);
    box-shadow: 5px 5px 0 rgba(0,0,0,.26);
}
/* 巻いた紙。綴じ紐を1本掛けてある。 */
.dc-scroll {
    position: absolute;
    z-index: 2;
    left: 42%;
    bottom: 10%;
    width: 96px;
    height: 26px;
    border: 5px solid #15171c;
    border-radius: 13px;
    background: linear-gradient(#fdf8ea 0 52%, #d3cab4 52%);
    box-shadow: 5px 5px 0 rgba(0,0,0,.24);
}
.dc-scroll::after {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 30px;
    width: 8px;
    background: #9e3b32;
    box-shadow: 34px 0 #9e3b32;
}
.dc-seal {
    position: absolute;
    z-index: 3;
    top: 60%;
    right: 13%;
    width: 46px;
    height: 46px;
    border: 4px solid #9e3b32;
    color: #d5544a;
    background: rgba(158,59,50,.12);
    font: 900 22px/40px "Hiragino Mincho ProN", serif;
    text-align: center;
    transform: rotate(-8deg);
}

/* ---- 事務室・記録棚：くすんだ壁、書類棚、カレンダー ---- */
.wall-office {
    background-color: #545c4b;
    background-image:
        linear-gradient(90deg, transparent 0 8%, rgba(18,22,16,.32) 8% 11%, transparent 11% 89%, rgba(18,22,16,.32) 89% 92%, transparent 92%),
        linear-gradient(transparent 0 62%, rgba(28,34,24,.45) 62% 63.4%, rgba(52,60,44,.5) 63.4%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 44px);
}
.wall-office::after {
    border-top-color: #1a1e16;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 46px),
        linear-gradient(#8d9382 0 72%, #262c20 72%);
}
.of-binders {
    position: absolute;
    z-index: 2;
    top: 34%;
    left: 11%;
    width: min(190px, 52%);
    height: 106px;
    border: 6px solid #171b14;
    background: #43503c;
    box-shadow: 7px 7px 0 rgba(0,0,0,.28);
}
.of-binders i,
.of-binders b {
    position: absolute;
    right: 9px;
    left: 9px;
    height: 38px;
    background: repeating-linear-gradient(90deg, #c9b06a 0 15px, #171b14 15px 18px, #9c5a44 18px 33px, #171b14 33px 36px, #5d7f9c 36px 51px, #171b14 51px 54px);
}
.of-binders i { top: 9px; }
.of-binders b { bottom: 9px; }
.of-cabinet {
    position: absolute;
    z-index: 2;
    right: 12%;
    bottom: 7%;
    width: min(124px, 38%);
    height: 166px;
    border: 6px solid #14180f;
    background: linear-gradient(#98a08b, #6f7765);
    box-shadow: 7px 7px 0 rgba(0,0,0,.3);
}
.of-cabinet::before { content: ""; position: absolute; inset: 11px; background: repeating-linear-gradient(transparent 0 44px, #14180f 44px 48px); }
.of-cabinet::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 50%;
    width: 34px;
    height: 8px;
    background: #14180f;
    box-shadow: 0 48px 0 #14180f, 0 96px 0 #14180f;
    transform: translateX(-50%);
}
.of-box {
    position: absolute;
    z-index: 2;
    bottom: 8%;
    display: grid;
    place-items: center;
    width: min(84px, 28%);
    height: 62px;
    border: 5px solid #1d1a12;
    color: #3c3524;
    background: #cdbb92;
    box-shadow: inset 0 0 0 5px #e2d4ae, 5px 5px 0 rgba(0,0,0,.28);
    font: 900 clamp(10px, 1.1vw, 14px)/1 ui-monospace, monospace;
}
.of-box.box-one { left: 10%; }
.of-box.box-two { left: 38%; bottom: 10%; }
.of-calendar {
    position: absolute;
    z-index: 2;
    top: 52%;
    left: 11%;
    width: min(158px, 46%);
    height: 112px;
    border: 5px solid #14180f;
    background: #efe6cd;
    box-shadow: 7px 7px 0 rgba(0,0,0,.3);
}
.of-calendar::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 26px; border-bottom: 4px solid #14180f; background: #4a6b58; }
.of-calendar::after { content: ""; position: absolute; right: 24px; bottom: 26px; width: 15px; height: 15px; border: 4px solid #b8433a; border-radius: 50%; }
.of-calendar i {
    position: absolute;
    inset: 36px 11px 11px;
    background:
        repeating-linear-gradient(90deg, #8a9184 0 2px, transparent 2px 22px),
        repeating-linear-gradient(#8a9184 0 2px, transparent 2px 20px);
}
/* 右の壁は足もとだけを使う。書類ワゴン、低い位置の時計、貼りっぱなしの付箋。 */
.of-trolley {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    left: 9%;
    width: min(132px, 38%);
    height: 74px;
    border: 5px solid #14180f;
    background: linear-gradient(#98a08b, #6f7765);
    box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.of-trolley::after {
    content: "";
    position: absolute;
    inset: 9px;
    background: repeating-linear-gradient(#0000 0 22px, #14180f 22px 26px);
}
.of-trolley i {
    position: absolute;
    bottom: 100%;
    left: 14px;
    width: 58px;
    height: 26px;
    border: 5px solid #14180f;
    background: repeating-linear-gradient(90deg, #c9b06a 0 12px, #14180f 12px 15px, #9c5a44 15px 27px, #14180f 27px 30px);
    transform: rotate(-3deg);
}
.of-clock {
    position: absolute;
    z-index: 2;
    bottom: 24%;
    left: 46%;
    width: 58px;
    height: 58px;
    border: 5px solid #14180f;
    border-radius: 50%;
    background: #efe6cd;
    box-shadow: 5px 5px 0 rgba(0,0,0,.28);
}
.of-clock i,
.of-clock b { position: absolute; bottom: 50%; left: 50%; width: 4px; background: #14180f; transform-origin: 50% 100%; }
.of-clock i { height: 18px; transform: translateX(-50%) rotate(38deg); }
.of-clock b { height: 13px; transform: translateX(-50%) rotate(-72deg); }
.of-note {
    position: absolute;
    z-index: 2;
    width: 42px;
    height: 40px;
    border: 3px solid #1d1a12;
    box-shadow: 3px 3px 0 rgba(0,0,0,.24);
}
.of-note.note-one { bottom: 26%; left: 12%; background: #f2d868; transform: rotate(-5deg); }
.of-note.note-two { bottom: 24%; left: 26%; background: #a8cfc0; transform: rotate(4deg); }

.home-page .site-header,
.portrait-page .site-header {
    position: fixed;
    inset: 10px auto auto 50%;
    z-index: 30;
    width: min(410px, calc(100vw - 20px));
    min-height: 54px;
    transform: translateX(-50%);
}
.home-page .brand strong,
.portrait-page .brand strong { font-size: 14px; }
.home-page .brand small,
.portrait-page .brand small { display: none; }
.home-page .menu-button,
.portrait-page .menu-button { display: block; cursor: pointer; }
.home-page .site-nav,
.portrait-page .site-nav {
    position: absolute;
    top: calc(100% + 3px);
    right: -3px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 170px;
    padding: 7px;
    border: var(--pixel-border);
    background: var(--cream);
    box-shadow: 4px 4px 0 var(--ink);
}
.home-page .site-nav.is-open,
.portrait-page .site-nav.is-open { display: flex; }
.home-page .site-nav a,
.portrait-page .site-nav a { color: var(--ink); }
.home-page .workshop-help {
    top: auto;
    right: 12px;
    bottom: 54px;
    left: 12px;
    justify-content: center;
    max-width: none;
}
.home-page .workshop-help span:last-child { display: none; }
.home-page .workshop-talk { bottom: 100px; }

.home-page .guide,
.portrait-page .guide {
    top: 78px;
    right: max(9px, calc((100vw - 430px) / 2 + 9px));
    bottom: auto;
    width: min(390px, calc(100vw - 18px));
    min-height: 78px;
}
.home-page .guide-bot,
.portrait-page .guide-bot {
    top: 0;
    right: 0;
    bottom: auto;
    width: 72px;
    height: 72px;
    border-width: 3px;
    outline-width: 3px;
}
.home-page .bot-screen,
.portrait-page .bot-screen { inset: 14px 9px 12px; border-width: 3px; }
.home-page .bot-screen i, .home-page .bot-screen b,
.portrait-page .bot-screen i, .portrait-page .bot-screen b { top: 11px; width: 8px; height: 10px; }
.home-page .bot-screen i, .portrait-page .bot-screen i { left: 10px; }
.home-page .bot-screen b, .portrait-page .bot-screen b { right: 10px; }
.home-page .guide-dialog,
.portrait-page .guide-dialog {
    width: calc(100% - 34px);
    min-height: 132px;
    margin: 54px 34px 0 0;
    padding: 17px 47px 15px 17px;
}
.home-page .guide-copy,
.portrait-page .guide-copy { min-height: 3.7em; font-size: 13px; line-height: 1.65; }
.home-page .guide-caret,
.portrait-page .guide-caret { right: 51px; bottom: 14px; }

/* 舞台背景を置ける幅では、案内係をゲーム本体の外へ出して右の舞台の下側に立たせます。
   ここは .guide だけの指定で、ゲーム画面側のレイアウトには触れません。 */
@media (min-width: 1120px) {
    .home-page .guide,
    .portrait-page .guide {
        top: auto;
        right: max(20px, calc(((100vw - 430px) / 2 - 340px) / 2));
        bottom: clamp(24px, 5vh, 56px);
        width: min(340px, calc((100vw - 430px) / 2 - 40px));
    }
    .home-page .guide-bot,
    .portrait-page .guide-bot { top: auto; bottom: 0; }
    .home-page .guide-dialog,
    .portrait-page .guide-dialog { margin: 0 34px 54px 0; }
}



.home-page .home-section { padding: 68px 22px; border-top: 6px solid #111a16; }
.home-page .signboard-band { display: flex; min-height: 100svh; flex-direction: column; justify-content: center; }
.home-page .section-title-row h2 { font-size: clamp(33px, 9vw, 43px); }
.home-page .section-title-row { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }

.home-page .site-footer { grid-template-columns: 1fr; padding: 46px 22px; }
.home-page .site-footer nav { justify-content: flex-start; }
.home-page .site-footer small { grid-column: auto; }

/* 下層ページの案内板は、壁に掛かるときだけ出す。
   壁のない幅では、同じ行き先がヘッダーのMENUとフッターにあるので出しません。 */
.signboard-wall { display: none; }

/* 右の壁に案内板を掛ける。案内係はその真下に立っているので、
   札にふれると下から説明が返ってくる（説明文は札から隠し、案内係が読む）。
   カラム側の案内板は複製せず、ここへ「移動」させています。
   下層ページでも同じ板を同じ場所へ掛けるので、部屋を移っても案内板は動きません。 */
@media (min-width: 1280px) {
    /* 案内板が壁に掛かっている＝下にはもう部屋がないので、下向きの誘導は出さない。 */
    .home-page .workshop-scroll-cue { display: none; }
    /* 壁の文字（WORKSHOP ONLINE など）は案内板と同じ高さにあるので、
       板が掛かる幅では隠す。広い画面だと板の脇から半端に覗いてしまうため。 */
    :is(.home-page, .portrait-page) .home-side-stage p { display: none; }
    :is(.home-page, .portrait-page) .signboard-band {
        position: fixed;
        z-index: 3;
        top: clamp(40px, 9vh, 92px);
        right: max(20px, calc(((100vw - 430px) / 2 - 366px) / 2));
        display: block;
        width: min(366px, calc((100vw - 430px) / 2 - 40px));
        min-height: 0;
        padding: 27px 19px 22px;
        border: 5px solid #241708;
        border-top-width: 6px;
        outline: 4px solid #d8b273;
        color: #fdf3d8;
        background-color: #6d4526;
        background-image:
            repeating-linear-gradient(0deg, rgba(28,16,8,.17) 0 2px, transparent 2px 9px),
            linear-gradient(#7d5029, #56331a);
        box-shadow: 11px 11px 0 rgba(6,12,9,.5), inset 0 0 0 3px rgba(255,231,178,.14);
        scroll-snap-align: none;
    }
    /* 板を壁に留めている金具 */
    :is(.home-page, .portrait-page) .signboard-band::before {
        content: "";
        position: absolute;
        top: 10px;
        right: 12px;
        left: 12px;
        height: 11px;
        background:
            radial-gradient(circle at 6px 5px, #e8d3a0 0 4px, rgba(30,18,9,.85) 4px 5px, transparent 6px),
            radial-gradient(circle at calc(100% - 6px) 5px, #e8d3a0 0 4px, rgba(30,18,9,.85) 4px 5px, transparent 6px);
    }
    :is(.home-page, .portrait-page) .signboard-band .section-title-row { margin-bottom: 15px; }
    :is(.home-page, .portrait-page) .signboard-band .eyebrow { margin-bottom: 5px; font-size: 9px; }
    :is(.home-page, .portrait-page) .signboard-band .section-title-row h2 {
        font-size: 27px;
        letter-spacing: .06em;
        text-shadow: 3px 3px 0 rgba(22,12,6,.55);
    }
    :is(.home-page, .portrait-page) .signboard-list { gap: 9px; }
    :is(.home-page, .portrait-page) .signboard-item {
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 3px 10px;
        padding: 11px 13px;
        border: 3px solid #241708;
        color: #1b2a20;
        background: linear-gradient(#f7eed2, #e0d1aa);
        box-shadow: 4px 4px 0 rgba(8,12,9,.45);
    }
    :is(.home-page, .portrait-page) .signboard-plate { grid-column: 1; }
    :is(.home-page, .portrait-page) .signboard-plate strong { font-size: 17px; }
    :is(.home-page, .portrait-page) .signboard-plate small { margin-top: 3px; color: #6d4526; }
    :is(.home-page, .portrait-page) .signboard-arrow {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        font-size: 15px;
    }
    :is(.home-page, .portrait-page) .signboard-item:hover,
    :is(.home-page, .portrait-page) .signboard-item:focus-visible {
        color: #1b2a20;
        border-color: #241708;
        background: linear-gradient(#ffe9a6, #f3cf6b);
        box-shadow: 2px 2px 0 rgba(8,12,9,.45);
        transform: translate(2px, 2px);
    }
    :is(.home-page, .portrait-page) .signboard-item:hover .signboard-plate small,
    :is(.home-page, .portrait-page) .signboard-item:focus-visible .signboard-plate small { color: #4c3117; }
    /* 説明文は案内係の担当。記録棚の「最新の記録」だけは、
       説明ではなく知らせなので札に残す。 */
    :is(.home-page, .portrait-page) .signboard-item:not([data-signboard="records"]) .signboard-note {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
    }
    :is(.home-page, .portrait-page) [data-signboard="records"] .signboard-note { font-size: 11px; line-height: 1.5; }
    :is(.home-page, .portrait-page) [data-signboard="records"] .signboard-note time { margin-bottom: 2px; font-size: 9px; opacity: .72; }
}

/* 縦に余裕のない画面では、案内板と案内係がぶつかるので板を詰める */
@media (min-width: 1280px) and (max-height: 780px) {
    :is(.home-page, .portrait-page) .signboard-band { top: 34px; padding: 24px 15px 17px; }
    :is(.home-page, .portrait-page) .signboard-band .section-title-row { margin-bottom: 11px; }
    :is(.home-page, .portrait-page) .signboard-band .section-title-row h2 { font-size: 23px; }
    :is(.home-page, .portrait-page) .signboard-list { gap: 7px; }
    :is(.home-page, .portrait-page) .signboard-item { padding: 8px 11px; }
    :is(.home-page, .portrait-page) .signboard-plate strong { font-size: 15px; }
}

/* いまいる部屋の札は、押せる案内ではなく「いまここ」の印にする。
   板に押し込まれたように見せて、他の3枚と区別する。 */
.signboard-item.is-current { cursor: default; }
.signboard-exit { display: none; }

@media (min-width: 1280px) {
    .portrait-page .signboard-item.is-current {
        color: #f7ecd2;
        border-color: #1b1206;
        background: linear-gradient(#4b2e17, #3a2310);
        box-shadow: inset 4px 0 0 var(--yellow), inset 0 3px 7px rgba(0,0,0,.45);
    }
    .portrait-page .signboard-item.is-current .signboard-plate small { color: #d8b273; }
    .portrait-page .signboard-item.is-current .signboard-arrow { color: var(--yellow); }

    /* 部屋の中にいるときだけ、村へ帰る出口を板の下へ足す。 */
    .portrait-page .signboard-exit {
        display: block;
        margin-top: 4px;
        padding: 9px 4px 2px;
        border-top: 2px dashed rgba(255,231,178,.28);
        color: #f0dcae;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
    }
    .portrait-page .signboard-exit span { margin-right: 7px; }
    .portrait-page .signboard-exit:hover,
    .portrait-page .signboard-exit:focus-visible { color: var(--yellow); outline: 0; }
}

/* 左の壁に掛ける現在地の木札。右の案内板と同じ作りの板にして、
   「壁の掛け物が左右に一対ある」形にそろえています。
   見出し（h1）はページ本体の担当なので、ここでは名前を大きくするだけに留めます。 */
.room-plate { display: none; }

@media (min-width: 1120px) {
    .portrait-page .room-plate {
        position: fixed;
        z-index: 3;
        top: clamp(40px, 9vh, 92px);
        left: max(20px, calc(((100vw - 430px) / 2 - 320px) / 2));
        display: block;
        width: min(320px, calc((100vw - 430px) / 2 - 40px));
        padding: 22px 20px 20px;
        border: 5px solid #241708;
        border-top-width: 6px;
        outline: 4px solid #d8b273;
        color: #fdf3d8;
        background-color: #6d4526;
        background-image:
            repeating-linear-gradient(0deg, rgba(28,16,8,.17) 0 2px, transparent 2px 9px),
            linear-gradient(#7d5029, #56331a);
        box-shadow: 11px 11px 0 rgba(6,12,9,.5), inset 0 0 0 3px rgba(255,231,178,.14);
    }
    /* 板を壁に留めている金具。右の案内板とそろえる。 */
    .portrait-page .room-plate::before {
        content: "";
        position: absolute;
        top: 10px;
        right: 12px;
        left: 12px;
        height: 11px;
        background:
            radial-gradient(circle at 6px 5px, #e8d3a0 0 4px, rgba(30,18,9,.85) 4px 5px, transparent 6px),
            radial-gradient(circle at calc(100% - 6px) 5px, #e8d3a0 0 4px, rgba(30,18,9,.85) 4px 5px, transparent 6px);
    }
    .room-plate-kicker {
        margin: 11px 0 10px;
        color: var(--yellow);
        font: 900 9px/1 ui-monospace, monospace;
        letter-spacing: .18em;
    }
    .room-plate-name { display: flex; flex-direction: column; margin: 0; }
    .room-plate-name strong {
        font-size: 29px;
        line-height: 1.15;
        letter-spacing: .06em;
        text-shadow: 3px 3px 0 rgba(22,12,6,.55);
    }
    .room-plate-name small {
        margin-top: 7px;
        color: #e3caa0;
        font: 900 10px/1 ui-monospace, monospace;
        letter-spacing: .18em;
    }
    .room-plate-note {
        margin: 15px 0 0;
        color: #f0dcae;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.7;
    }
}

/* 縦に余裕のない画面では、右の案内板と同じだけ札も上へ詰める */
@media (min-width: 1120px) and (max-height: 780px) {
    .portrait-page .room-plate { top: 34px; padding: 19px 16px 16px; }
    .room-plate-name strong { font-size: 25px; }
    .room-plate-note { margin-top: 12px; }
}

/* 下層ページもホームと同じ縦型本体へ統一する */
.portrait-game-shell {
    position: relative;
    z-index: 2;
    background: var(--paper);
}
.portrait-page .inner-main { min-height: 80svh; padding-top: 76px; }
.detail-toolbar {
    position: sticky;
    z-index: 22;
    top: 74px;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 8px 14px;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    background: rgba(239,220,176,.96);
    box-shadow: 0 5px 0 rgba(22,37,31,.2);
}
.detail-toolbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 2px solid var(--ink);
    color: #fff7db;
    background: #17251f;
    box-shadow: 3px 3px 0 rgba(22,37,31,.25);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}
.detail-toolbar a span { color: var(--yellow); font-size: 17px; line-height: 1; }
.detail-toolbar a:hover,
.detail-toolbar a:focus-visible { color: var(--ink); background: var(--yellow); outline: 2px solid var(--ink); outline-offset: 2px; }
.detail-toolbar a:hover span,
.detail-toolbar a:focus-visible span { color: var(--ink); }
.portrait-page .page-hero {
    padding: 52px 22px 48px;
    background:
        linear-gradient(rgba(255,255,255,.08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.08) 2px, transparent 2px),
        #d9bc84;
    background-size: 18px 18px;
}
.portrait-page .page-hero h1 { font-size: clamp(38px, 10vw, 52px); line-height: 1.05; }
.portrait-page .page-hero > p:last-of-type { margin-top: 20px; font-size: 15px; line-height: 1.85; }
.portrait-page .owner-tagline { margin-top: 15px; font-size: 21px; line-height: 1.5; }
/* 工房主の家だけ見出し帯を濃い木の色にする。淡い帯に明るい文字だと概要文が読めないため。 */
.portrait-page .owner-hero {
    background:
        linear-gradient(rgba(255,255,255,.06) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.06) 2px, transparent 2px),
        #8a5a30;
    background-size: 18px 18px;
}
.portrait-page .content-section { width: 100%; max-width: none; padding: 58px 22px; }
.portrait-page .content-section > h2,
.portrait-page .split-section h2,
.portrait-page .screenshot-section h2 { margin-bottom: 23px; font-size: clamp(30px, 8vw, 40px); line-height: 1.2; }
.portrait-page .split-section { grid-template-columns: 1fr; gap: 24px; }
.portrait-page .lead-copy { font-size: 17px; line-height: 1.9; }
.portrait-page .app-grid,
.portrait-page .project-grid,
.portrait-page .feature-grid,
.portrait-page .detail-links { grid-template-columns: 1fr; }
.portrait-page .app-card h3 { font-size: 19px; }
.portrait-page .app-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 50px 22px 48px;
}
.portrait-page .app-icon-large { width: 112px; border-width: 4px; border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
.portrait-page .app-hero h1 { font-size: clamp(38px, 10vw, 50px); }
.portrait-page .app-tagline { font-size: 24px; line-height: 1.35; }
.portrait-page .feature-grid article { grid-template-columns: 38px 1fr; padding: 16px; }
.portrait-page .screenshot-row { margin-right: -22px; padding-right: 22px; }
.portrait-page .screenshot-row img { width: min(230px, 68vw); }
.portrait-page .prose { max-width: none; font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
.portrait-page .prose h2 { font-size: 27px; }
.portrait-page .prose h3 { font-size: 20px; }
.portrait-page .prose pre { max-width: 100%; overflow-x: auto; }
.portrait-page .prose table { display: block; max-width: 100%; overflow-x: auto; }
.portrait-page .document-row { gap: 14px; padding: 17px 15px; }
.portrait-page .document-row strong { font-size: 17px; line-height: 1.45; }
.portrait-page .document-row p { display: none; }
.portrait-page .document-meta { flex-wrap: wrap; gap: 10px 18px; margin: 0 22px 62px; }
.portrait-page .not-found { padding: 90px 22px 110px; }
.portrait-page .not-found h1 { font-size: clamp(38px, 10vw, 50px); }
.portrait-page .site-footer { grid-template-columns: 1fr; padding: 46px 22px; }
.portrait-page .site-footer nav { justify-content: flex-start; }
.portrait-page .site-footer small { grid-column: auto; }

/* NPCとの会話を、スクロール先に現れる1画面のイベントとして見せる */
.encounter-stage {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    color: #fff4d2;
    background-color: #111917;
    background-image:
        radial-gradient(circle at 50% 23%, rgba(244,202,82,.18), transparent 25%),
        linear-gradient(rgba(255,255,255,.025) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.025) 2px, transparent 2px);
    background-size: auto, 16px 16px, 16px 16px;
    border-top: 6px solid #0a100e;
    border-bottom: 6px solid #0a100e;
}
.encounter-stage[hidden] { display: none; }
.encounter-map {
    position: absolute;
    inset: 0 0 auto;
    height: 44%;
    overflow: hidden;
    border-bottom: 5px solid #090d0c;
    background-color: #4e8651;
    background-image:
        linear-gradient(90deg, transparent 48%, rgba(233,199,121,.86) 48% 62%, transparent 62%),
        linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
    background-size: auto, 20px 20px, 20px 20px;
}
.encounter-map::before,
.encounter-map::after {
    content: "";
    position: absolute;
    width: 43%;
    height: 32%;
    background: #244f35;
    box-shadow: inset 0 -12px rgba(0,0,0,.14);
}
.encounter-map::before { top: 8%; left: -8%; }
.encounter-map::after { right: -7%; bottom: 8%; }
.encounter-path { position: absolute; left: 55%; top: 0; width: 14%; height: 100%; background: repeating-linear-gradient(0deg, #d5ae6c 0 25px, #c59a58 25px 29px); }
.encounter-marker {
    position: absolute;
    top: 23%;
    left: 62%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 34px;
    color: #17201c;
    background: var(--yellow);
    border: 3px solid #17201c;
    box-shadow: 3px 3px 0 rgba(0,0,0,.4);
    font: 900 18px/1 ui-monospace, monospace;
    animation: encounter-marker 1s steps(2,end) infinite;
}
.encounter-character {
    position: absolute;
    z-index: 3;
    top: 16%;
    left: 50%;
    width: 142px;
    height: 176px;
    transform: translateX(-50%);
    filter: drop-shadow(8px 9px 0 rgba(0,0,0,.34));
    animation: encounter-character 1.3s steps(2,end) infinite;
}
.encounter-character-head {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 9px;
    width: 124px;
    height: 104px;
    border: 7px solid #111917;
    border-radius: 25px 25px 18px 18px;
    background: #dce7df;
    box-shadow: inset 0 -18px #a6b7ad;
}
.encounter-character-head::before,
.encounter-character-head::after { content: ""; position: absolute; z-index: -1; top: -19px; width: 34px; height: 34px; border: 6px solid #111917; background: #111917; transform: rotate(45deg); }
.encounter-character-head::before { left: 2px; }.encounter-character-head::after { right: 2px; }
.encounter-character-head i,
.encounter-character-head b { position: absolute; top: 37px; width: 19px; height: 24px; background: #82efb0; box-shadow: 0 0 12px #82efb0; }
.encounter-character-head i { left: 25px; }.encounter-character-head b { right: 25px; }
.encounter-character-body {
    position: absolute;
    bottom: 0;
    left: 31px;
    width: 80px;
    height: 81px;
    border: 7px solid #111917;
    background: #879a8e;
    box-shadow: inset 0 -15px #66776e;
}
.encounter-character[data-encounter-character="master"] .encounter-character-head { border-radius: 48%; background: #f7f0d9; box-shadow: inset 24px 0 #171a18, inset -24px 0 #171a18; }
.encounter-character[data-encounter-character="master"] .encounter-character-head::before,
.encounter-character[data-encounter-character="master"] .encounter-character-head::after { border-radius: 50%; transform: none; }
.encounter-character[data-encounter-character="master"] .encounter-character-head i,
.encounter-character[data-encounter-character="master"] .encounter-character-head b { top: 43px; width: 12px; height: 18px; background: #171a18; box-shadow: none; }
.encounter-character[data-encounter-character="master"] .encounter-character-body { background: repeating-linear-gradient(90deg, #171a18 0 21px, #f7f0d9 21px 45px); }
.encounter-character[data-encounter-character="place"] .encounter-character-head { top: 17px; border-radius: 4px; color: #17201c; background: var(--yellow); box-shadow: inset 0 -18px #d2a93b; }
.encounter-character[data-encounter-character="place"] .encounter-character-head::before,
.encounter-character[data-encounter-character="place"] .encounter-character-head::after,
.encounter-character[data-encounter-character="place"] .encounter-character-head i,
.encounter-character[data-encounter-character="place"] .encounter-character-head b { display: none; }
.encounter-character[data-encounter-character="place"] .encounter-character-head::after { content: "!"; z-index: 2; display: grid; place-items: center; inset: 0; width: auto; height: auto; border: 0; color: #17201c; background: transparent; transform: none; font: 900 54px/1 ui-monospace, monospace; }
.encounter-character[data-encounter-character="place"] .encounter-character-body { left: 63px; width: 16px; height: 68px; background: #6c452e; }
/* 管理画面で貼った絵。作り付けの図形と入れ替わる。 */
/* 高さは会話窓の上辺（約54%）に収まるところまで。足元が窓に隠れないようにする。 */
.encounter-character.has-portrait { width: min(72vw, 420px); height: 36%; min-height: 176px; }
.encounter-character.has-portrait .encounter-character-head,
.encounter-character.has-portrait .encounter-character-body { display: none; }
/* 枠は決め打ちにして、絵は縦横比のまま内側へ。足元を下辺にそろえて立たせる。 */
.encounter-portrait { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; image-rendering: pixelated; }
.encounter-portrait[hidden] { display: none; }
.encounter-map.has-backdrop {
    background-color: #111917;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    image-rendering: pixelated;
}
.encounter-map.has-backdrop::before,
.encounter-map.has-backdrop::after,
.encounter-map.has-backdrop .encounter-path,
.encounter-map.has-backdrop .encounter-marker { display: none; }
.encounter-window {
    position: absolute;
    z-index: 4;
    right: 16px;
    bottom: 7%;
    left: 16px;
    min-height: 39%;
    padding: 22px 20px 20px;
    border: 4px solid #fff1c8;
    outline: 4px solid #101521;
    background: #080a0f;
    box-shadow: 7px 7px 0 rgba(0,0,0,.55), inset 0 0 0 3px #343b4b;
}
.encounter-kicker { margin: 0 0 9px; color: var(--yellow); font: 900 10px/1 ui-monospace, monospace; letter-spacing: .17em; }
.encounter-window h2 { margin: 0 0 14px; color: #fff7db; font-size: 25px; line-height: 1.25; }
.encounter-window h2:focus { outline: 0; }
.encounter-message { min-height: 5.4em; margin: 0; white-space: pre-line; font-size: 14px; font-weight: 800; line-height: 1.8; }
.encounter-actions { display: grid; gap: 8px; margin-top: 18px; }
.encounter-actions button,
.encounter-actions a {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 3px solid #fff1c8;
    color: #fff7db;
    background: #252b3a;
    text-align: left;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.encounter-actions button::before,
.encounter-actions a::before { content: "▶"; margin-right: 8px; color: var(--yellow); font-size: 9px; }
.encounter-actions button:hover,
.encounter-actions button:focus-visible,
.encounter-actions a:hover,
.encounter-actions a:focus-visible { color: #17201c; background: var(--yellow); outline: 3px solid #fff1c8; outline-offset: 2px; }
.encounter-caret { position: absolute; right: 17px; bottom: 13px; color: var(--yellow); font-size: 10px; animation: rpg-caret .8s steps(2,end) infinite; }
@keyframes encounter-marker { 50% { transform: translateY(-6px); } }
@keyframes encounter-character { 50% { transform: translate(-50%, 4px); } }

/* 村マップの扉から入ったときだけ、エンカウントステージを建物ファサードへ着せ替える */
.encounter-stage.is-room { overflow: visible; }
.encounter-stage.is-room .encounter-map,
.encounter-stage.is-room .encounter-character,
.encounter-stage.is-room .encounter-window { display: none; }
.room-facade-stage[hidden] { display: none; }
/* ステージ側だけが画面高に追従する。ファサードは固定サイズのまま中央に置き、余りは背景の余白として見せる */
.room-facade-stage {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: 76px 0 34px;
    background: #111a16;
}
.room-facade-bar { padding: 0 16px 12px; }
.room-back {
    min-height: 40px;
    padding: 9px 13px;
    border: 3px solid #f8e9bd;
    color: #fff7db;
    background: #222c2a;
    box-shadow: 4px 4px 0 rgba(0,0,0,.4);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.room-back span { margin-right: 7px; color: var(--yellow); }
.room-back:hover,
.room-back:focus-visible { color: #17201c; background: var(--yellow); outline: 3px solid #f8e9bd; outline-offset: 2px; }

/* 旧ホームの展示室ファサード（屋根・看板・扉）を、4部屋共通の外観として移植。
   高さは中身（屋根・看板・扉・床）に合わせた固定値で、画面高には追従させない */
.gallery-facade {
    position: relative;
    width: 100%;
    height: 632px;
    flex: none;
    margin-block: auto;
    overflow: hidden;
    color: #f8f1dc;
    border-top: 7px solid #101712;
    border-bottom: 7px solid #101712;
    background-color: #895737;
    background-image:
        linear-gradient(90deg, rgba(56,33,20,.34) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.06) 2px, transparent 2px),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(55,31,19,.26) 42px 46px);
    background-size: 72px 100%, 100% 46px, auto;
    box-shadow: inset 0 0 70px rgba(31,18,12,.58);
}
.gallery-facade::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 14px;
    background: #34241a;
    box-shadow: calc(min(100vw, 430px) - 50px) 0 0 #34241a;
}
.gallery-facade::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 86px;
    border-top: 7px solid #18130f;
    background:
        linear-gradient(90deg, rgba(0,0,0,.18) 2px, transparent 2px),
        linear-gradient(#5f402c, #39271d);
    background-size: 54px 100%, auto;
}
.gallery-roof {
    position: absolute;
    z-index: 2;
    top: 0;
    right: -10px;
    left: -10px;
    height: 64px;
    border-bottom: 8px solid #18130f;
    background: repeating-linear-gradient(90deg, #283a31 0 42px, #1b2923 42px 84px);
    box-shadow: inset 0 -13px rgba(0,0,0,.24), 0 9px 0 rgba(22,18,14,.35);
}
.gallery-roof::after { content: ""; position: absolute; right: 16px; bottom: -23px; left: 16px; height: 15px; background: repeating-linear-gradient(90deg, var(--yellow) 0 28px, #f7e4a2 28px 56px); border: 4px solid #18130f; }
.gallery-sign {
    position: absolute;
    z-index: 4;
    top: 88px;
    left: 50%;
    /* 「事務室・記録棚」のような長い部屋名も1行に収め、看板と扉の間隔を4部屋でそろえる */
    width: min(312px, calc(100% - 48px));
    padding: 13px 18px 12px;
    border: 5px solid #f4e3b0;
    outline: 5px solid #171d19;
    color: #f8efd3;
    background: #203a31;
    box-shadow: 8px 8px 0 rgba(23,18,14,.45), inset 0 0 0 3px #4f7565;
    text-align: center;
    transform: translateX(-50%);
}
.gallery-sign::before,
.gallery-sign::after { content: ""; position: absolute; top: -31px; width: 5px; height: 27px; background: #171d19; }
.gallery-sign::before { left: 36px; }.gallery-sign::after { right: 36px; }
.gallery-sign small,
.gallery-sign .gallery-sign-title,
.gallery-sign > span { display: block; }
.gallery-sign small { color: var(--yellow); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .18em; }
.gallery-sign-title { margin: 7px 0 0; font-size: 33px; line-height: 1.08; letter-spacing: .1em; }
.gallery-sign-title:focus { outline: 0; }
.gallery-sign-title:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }
.gallery-sign > span { margin-top: 6px; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .28em; opacity: .72; }
.gallery-door {
    position: absolute;
    z-index: 5;
    bottom: 104px;
    left: 50%;
    width: 174px;
    height: 274px;
    padding: 0;
    border: 0;
    color: #fff4d2;
    background: transparent;
    transform: translateX(-50%);
    cursor: pointer;
    text-decoration: none;
    perspective: 500px;
}
.gallery-door::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: 154px;
    height: 224px;
    border: 7px solid #17120f;
    background: #080b09;
    box-shadow: 8px 8px 0 rgba(0,0,0,.28), inset 0 0 28px #315148;
}
.gallery-door-frame {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 17px;
    width: 140px;
    height: 210px;
    border: 5px solid #17120f;
    background:
        linear-gradient(90deg, transparent 47%, #44291d 47% 53%, transparent 53%),
        linear-gradient(transparent 48%, #44291d 48% 53%, transparent 53%),
        #755038;
    box-shadow: inset 0 0 0 6px #94694a;
    transform-origin: left center;
    transition: transform .58s steps(6,end), filter .58s steps(6,end);
}
.gallery-door-frame::before { content: "OPEN"; position: absolute; top: 18px; left: 50%; padding: 5px 8px; border: 3px solid #17120f; color: #17251f; background: var(--yellow); transform: translateX(-50%); font: 900 9px/1 ui-monospace, monospace; letter-spacing: .13em; }
.gallery-door-frame::after { content: ""; position: absolute; top: 102px; right: 14px; width: 10px; height: 10px; border: 3px solid #17120f; background: var(--yellow); }
.gallery-door-frame i,
.gallery-door-frame b { position: absolute; bottom: 14px; width: 24px; height: 42px; border: 3px solid #42291e; background: #a27754; }
.gallery-door-frame i { left: 20px; }.gallery-door-frame b { right: 20px; }
.gallery-door-action {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 9px 8px;
    border: 3px solid #f8e9bd;
    outline: 3px solid #151c18;
    background: #18251f;
    box-shadow: 4px 4px 0 rgba(0,0,0,.35);
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}
.gallery-door-action b { display: inline-block; margin-left: 7px; color: var(--yellow); animation: rpg-caret .8s steps(2,end) infinite; }
.gallery-door:hover .gallery-door-action,
.gallery-door:focus-visible .gallery-door-action { color: #17251f; background: var(--yellow); outline-color: #f8e9bd; }
.gallery-door:focus-visible { outline: 0; }
.gallery-facade.is-open .gallery-door-frame { transform: rotateY(-76deg); filter: brightness(.78); }
.gallery-facade.is-open .gallery-sign { box-shadow: 0 0 24px rgba(244,202,82,.5), 8px 8px 0 rgba(23,18,14,.45), inset 0 0 0 3px #648f7d; }
.gallery-invitation { position: absolute; z-index: 4; right: 24px; bottom: 18px; left: 24px; margin: 0; color: #f8e9bd; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.65; text-shadow: 2px 2px 0 #17120f; }

/* 部屋ごとの外観：壁・屋根・看板の色だけを変える */
.facade-workbench { background-color: #6d6f78; }
.facade-workbench .gallery-roof { background: repeating-linear-gradient(90deg, #33454f 0 42px, #24333b 42px 84px); }
.facade-workbench .gallery-sign { background: #22323d; box-shadow: 8px 8px 0 rgba(23,18,14,.45), inset 0 0 0 3px #4d6f80; }
.facade-workbench::before { background: #2c333a; box-shadow: calc(min(100vw, 430px) - 50px) 0 0 #2c333a; }
.facade-owner { background-color: #a5763f; }
.facade-owner .gallery-roof { background: repeating-linear-gradient(90deg, #7c3f34 0 42px, #5f2f28 42px 84px); }
.facade-owner .gallery-sign { background: #3a2a22; box-shadow: 8px 8px 0 rgba(23,18,14,.45), inset 0 0 0 3px #7c5b43; }
.facade-owner::before { background: #402a1c; box-shadow: calc(min(100vw, 430px) - 50px) 0 0 #402a1c; }
.facade-office { background-color: #8d8f7d; }
.facade-office .gallery-roof { background: repeating-linear-gradient(90deg, #2f434a 0 42px, #223238 42px 84px); }
.facade-office .gallery-sign { background: #22424a; box-shadow: 8px 8px 0 rgba(23,18,14,.45), inset 0 0 0 3px #55808a; }
.facade-office::before { background: #35392f; box-shadow: calc(min(100vw, 430px) - 50px) 0 0 #35392f; }

@media (max-width: 980px) {
    .home-manifesto {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        min-height: 100svh;
        flex-direction: column;
        justify-content: center;
        width: min(100%, 430px);
        margin: 0 auto;
        padding: 92px 86px 30px 22px;
        border: 0;
        border-bottom: 5px solid #171d1a;
        outline: 0;
        box-shadow: 0 0 0 4px #08130f;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
    .home-manifesto h1 { font-size: clamp(34px, 8.5vw, 43px); }
    .home-manifesto > p:last-child { margin-right: 0; font-size: 14px; }
}

@media (max-width: 720px) {
    .home-side-stage { display: none; }
    .home-game-shell,
    .portrait-game-shell { box-shadow: none; }
    .home-manifesto { box-shadow: none; }
    .home-page .guide,
    .portrait-page .guide { right: 9px; }
}

@media (max-width: 390px) {
    .home-page .site-header,
    .portrait-page .site-header { width: calc(100vw - 16px); }
    .home-manifesto { padding-right: 76px; padding-left: 18px; }
    .home-manifesto h1 { font-size: 32px; }
    .home-page .guide,
    .portrait-page .guide { top: 76px; right: 8px; width: calc(100vw - 16px); }
    .home-page .guide-bot,
    .portrait-page .guide-bot { width: 66px; height: 66px; }
    .home-page .guide-dialog,
    .portrait-page .guide-dialog { margin-top: 49px; }
    .home-page .home-section { padding-right: 18px; padding-left: 18px; }
    .encounter-window { right: 12px; left: 12px; padding: 19px 16px 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .encounter-marker,
    .encounter-character { animation: none; }
    .gallery-door-action b { animation: none; }
    .gallery-door-frame { transition: none; }
}

/* ==========================================================================
   製作台のページ＝工作室の作業板
   帯で「どの台か・どこまで進んだか」を言い切り、その下の有孔ボードへ
   開発途中の1枚を画鋲とテープで貼る。柱は430pxしかないので、貼り紙は
   あくまで「そこに貼ってある」だけの見せ方にして、読むための拡大は
   全画面のルーペ（.loupe）へ渡している。
   ========================================================================== */
.bench-hero-tagline { margin: 15px 0 0; color: #5c3b12; font-size: 21px; font-weight: 900; line-height: 1.45; }
.portrait-page .project-detail .bench-hero p.bench-hero-summary { margin: 18px 0 0; font-size: 15px; line-height: 1.85; }
.bench-hero-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.bench-hero-state .status-chip { margin-top: 0; }
.bench-hero-gauge { display: flex; flex: 1 1 180px; align-items: center; gap: 10px; }
.bench-hero-gauge b { font: 900 13px/1 ui-monospace, monospace; letter-spacing: .04em; }
.portrait-page .project-detail .bench-hero p.bench-hero-note { margin: 13px 0 0; color: #453213; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* 有孔ボードの壁。壁飾りのペグボードと同じ色・同じ穴の間隔にしてある。 */
.board-section {
    max-width: none;
    border-bottom: 5px solid var(--ink);
    color: #f1e7cd;
    background-color: #3d4a44;
    background-image: radial-gradient(rgba(196,214,206,.32) 2px, transparent 2px);
    background-size: 17px 17px;
}
.board-section .eyebrow { color: var(--yellow); }
.board-lead { max-width: 720px; margin: -6px 0 30px; color: #d6e2da; font-size: 14px; line-height: 1.85; }
.board-sheets { display: grid; gap: 40px; }

/* 貼られた1枚。角度は1枚ごとに違うが、同じ紙は毎回同じ角度で貼られる。 */
.board-sheet {
    position: relative;
    margin: 0;
    padding: 13px 13px 0;
    border: 3px solid var(--ink);
    background: var(--cream);
    box-shadow: 9px 10px 0 rgba(6,12,9,.42);
    transform: rotate(var(--tilt, 0deg));
}
/* 上の角2か所を留めているマスキングテープ。紙の外へはみ出させて板に貼る。 */
.board-tape {
    position: absolute;
    z-index: 3;
    top: -13px;
    width: 78px;
    height: 26px;
    border: 2px solid rgba(112,88,36,.34);
    background: repeating-linear-gradient(90deg, rgba(246,229,166,.9) 0 6px, rgba(240,219,148,.9) 6px 12px);
    box-shadow: 0 3px 0 rgba(6,12,9,.22);
}
.tape-left { left: -19px; transform: rotate(-33deg); }
.tape-right { right: -19px; transform: rotate(33deg); }

.board-frame {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 3px solid var(--ink);
    background: #fffdf4;
    cursor: zoom-in;
}
/* 縦に長い画面写真でも、貼り紙が板を独り占めしないところで止める。
   切らずに収めるので余白が出るが、紙の色と同じなので余白として見える。 */
.board-frame img { display: block; width: 100%; max-height: 64vh; height: auto; object-fit: contain; }
.board-frame:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
/* 「押せば読める」ことを紙の上で言う。縮んだ図は文字が読めないため。 */
.board-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 2px solid var(--ink);
    color: var(--ink);
    background: rgba(244,202,82,.95);
    box-shadow: 2px 2px 0 var(--ink);
    font: 900 11px/1 ui-monospace, monospace;
    letter-spacing: .06em;
}
.board-zoom b { font-size: 14px; }
.board-frame:hover .board-zoom,
.board-frame:focus-visible .board-zoom { color: var(--cream); background: var(--green-dark); }

/* 紙の下の余白に書いた札。番号と日付は工房の記録、その下が説明。 */
.board-plate { padding: 13px 3px 15px; }
.board-slug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; color: #6b5330; font: 900 10px/1 ui-monospace, monospace; letter-spacing: .1em; }
.board-slug b { padding: 4px 7px; border: 2px solid #3f2a14; color: #3f2a14; background: var(--yellow); }
/* 札の文字は板ではなく紙の上に載るので、板の明るい文字色を引き継がせない。 */
.board-plate strong { display: block; margin-top: 10px; color: var(--ink); font-size: 17px; line-height: 1.45; }
.board-memo { margin: 9px 0 0; color: #4a5a4e; font-size: 13px; line-height: 1.8; }

.board-empty {
    display: grid;
    place-items: center;
    min-height: 148px;
    border: 3px dashed rgba(241,231,205,.45);
    color: rgba(241,231,205,.7);
    font: 800 12px/1 ui-monospace, monospace;
    letter-spacing: .1em;
}

/* ==========================================================================
   ルーペ＝貼り紙を全画面で広げて読むところ
   紙のままでは図の文字が読めないので、ここだけは工房の演出を薄くして
   「読む」ことに寄せている。指はドラッグで移動、2本指と車輪で拡大。
   ========================================================================== */
.loupe {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* 図を読むところなので、うしろのページは透かさず塞ぐ。 */
    background: #0c1410;
}
.loupe[hidden] { display: none; }
.loupe-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 3px solid #0a120e;
    color: #f4e9cd;
    background: #1b2b23;
}
.loupe-head p { flex: 1; margin: 0; min-width: 0; font-size: 13px; font-weight: 900; line-height: 1.4; }
.loupe-head p small { display: block; margin-bottom: 4px; color: var(--yellow); font: 900 10px/1 ui-monospace, monospace; letter-spacing: .12em; }
.loupe-close {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 3px solid var(--ink);
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 3px 3px 0 rgba(6,12,9,.5);
    cursor: pointer;
    font: 900 13px/1 ui-monospace, monospace;
}
.loupe-view {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    /* 指の操作をこちらで受け取る。既定のスクロールに取られると拡大移動ができない。 */
    touch-action: none;
    cursor: grab;
}
.loupe-view.is-panning { cursor: grabbing; }
/* 枠いっぱいの箱を置き、その中に図を収める（object-fit: contain）。
   max-width / max-height の % で収めようとすると、グリッドの 1fr 行では
   高さが確定扱いにならず指定が無視され、図が枠の下へはみ出す。
   絶対配置＋inset: 0 なら枠の実寸から箱が決まるので、必ず収まる。 */
.loupe-view img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--scale, 1));
    transform-origin: center;
    /* 拡大したときに図の線がぼやけないほうが、図面としては読みやすい。 */
    image-rendering: -webkit-optimize-contrast;
    user-select: none;
    -webkit-user-drag: none;
}
.loupe-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 3px solid #0a120e;
    background: #1b2b23;
}
.loupe-tools button {
    min-width: 52px;
    min-height: 44px;
    border: 3px solid #0a120e;
    color: #f4e9cd;
    background: #2f4a3a;
    box-shadow: 3px 3px 0 rgba(6,12,9,.5);
    cursor: pointer;
    font: 900 15px/1 ui-monospace, monospace;
}
.loupe-tools button:hover,
.loupe-tools button:focus-visible { color: var(--ink); background: var(--yellow); }
.loupe-tools output { min-width: 62px; color: #cfe0d5; text-align: center; font: 900 12px/1 ui-monospace, monospace; }
/* ルーペを開いている間は、後ろのページを動かさない。 */
html.is-loupe-open, html.is-loupe-open body { overflow: hidden; }

@media (max-width: 390px) {
    .board-sheet { padding: 10px 10px 0; }
    .board-sheets { gap: 32px; }
    .loupe-tools button { min-width: 46px; }
}

.feed-link { margin: 18px 0 0; text-align: center; font-size: .82rem; }
.feed-link a { color: var(--ink); opacity: .72; text-decoration: underline; text-underline-offset: 3px; }
.feed-link a:hover, .feed-link a:focus-visible { opacity: 1; }

/* ==========================================================================
   受付の窓（お問い合わせ）
   工房の他の面と同じく、枠は太い線とずらした影。入力欄は生成りの紙。
   ========================================================================== */
.contact-form {
    max-width: 880px;
    margin: 28px auto 80px;
    padding: 26px 22px;
    border: var(--pixel-border);
    background: var(--cream);
    box-shadow: var(--shadow);
}
.contact-form label {
    display: block;
    margin-bottom: 22px;
    font-weight: 900;
    font-size: 15px;
}
.contact-form label small { margin-left: 6px; font-weight: 700; font-size: 12px; opacity: .7; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 11px 12px;
    border: 3px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    /* iOSは16px未満の入力欄に触れると画面を拡大してしまう。ここだけは16pxを下回らせない。 */
    font-size: 16px;
    font-weight: 500;
}
.contact-form textarea { line-height: 1.8; resize: vertical; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.contact-form .field-error {
    display: block;
    margin-top: 7px;
    color: #9a3324;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
}
.form-notice {
    max-width: 880px;
    margin: 26px auto 0;
    padding: 15px 16px;
    border: 3px solid #9a3324;
    background: #fbe3dd;
    font-weight: 700;
}
.form-note { margin: 4px 0 18px; font-size: 13px; line-height: 1.9; opacity: .85; }
.form-note a { color: #235d43; }
.form-actions { text-align: right; }
.form-actions .primary-link { margin-top: 0; border: none; cursor: pointer; font-size: 16px; }
/* 自動投稿よけの欄。読み上げ対象からも外すため、display ではなく画面外へ逃がす。 */
.contact-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-done { padding: 40px 0 90px; }
.contact-done h1 { margin: 6px 0 20px; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.04em; }
.contact-done p { margin: 0 0 12px; line-height: 1.95; }

.portrait-page .contact-form { padding: 20px 16px; }
.portrait-page .form-notice { margin-top: 20px; }

/* 返事の見込みは、書き始める前に伝える。読み終えてからでは遅い。 */
.contact-caveat {
    max-width: 880px;
    margin: 26px auto 0;
    padding: 16px 18px;
    border: 3px solid var(--wood);
    background: #f6e6c8;
}
.contact-caveat p { margin: 0 0 8px; font-size: 14px; line-height: 1.85; }
.contact-caveat p:last-child { margin-bottom: 0; }
.contact-caveat + .contact-form { margin-top: 18px; }

/* 返事の希望は1行のチェック欄。枠で囲うと、そこだけ重く見えるため囲わない。 */
.contact-form .choice-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    /* 直前のメール欄への注釈なので、下より上に寄せて関係を見せる。 */
    margin: -6px 0 26px;
    font-weight: 700;
    font-size: 15px;
}
.contact-form .choice-row input {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--green);
}

/* サポート一覧の足もと。アプリ以外の用件で来た人のための入口。 */
.desk-note {
    margin-top: 26px;
    padding: 18px 20px;
    border: 3px dashed var(--ink);
    background: var(--cream);
}
.desk-note p { margin: 0 0 8px; font-size: 14px; line-height: 1.85; }
.desk-note p:first-child { font-size: 15px; }
.desk-note .primary-link { margin-top: 6px; font-size: 14px; }