/* OFFICE ESCAPE（作り込み版）— 手描きのあたたかい謎解き絵本調。木の茶・クリーム・えんじ・金・ティール。明るい昼。 */
:root {
    --ink: #5B3A24; --mute: #8A6A50; --cream: #FFF6E3; --paper: #FFFBF2;
    --wood: #C98B4B; --woodL: #E8B77E; --woodD: #9C6232;
    --bur: #8E2A3A; --burL: #B84A5A; --gold: #E0B24A; --goldD: #B8862A; --goldL: #FFE7A0; --teal: #2A9D8F;
    --disp: "Fraunces", "Zen Maru Gothic", serif;
    --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #FFF1D6; color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
.ex-backdrop { position: fixed; inset: 0; background:
    radial-gradient(circle at 18% 16%, rgba(255, 231, 160, .8) 0 10%, transparent 36%),
    radial-gradient(circle at 84% 80%, rgba(42, 157, 143, .18) 0 12%, transparent 40%),
    repeating-linear-gradient(90deg, rgba(156, 98, 50, .06) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #FFF4DE, #F6DDB3); }
.ex-stage { position: fixed; overflow: hidden; background: var(--cream); border-radius: 22px; container-type: size;
    box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--gold), 0 30px 80px rgba(91, 58, 36, .3);
    --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --hud: 25cqw; --bag: 19cqw; }
.ex-stage.full { border-radius: 0; box-shadow: none; }
.ex-stage [hidden] { display: none !important; }
.ic { display: inline-grid; place-items: center; }
.ic svg, .ic img { width: 100%; height: 100%; display: block; }

/* ───── 部屋 ───── */
.ex-scene { position: absolute; left: 0; right: 0; top: calc(var(--hud) + var(--st)); bottom: calc(var(--bag) + var(--sb)); overflow: hidden; background: #FFF1D6; }
.ex-svg { width: 100%; height: 100%; display: block; }
.ex-svg text.ex-svg-t { font-family: var(--body); font-weight: 900; }
.ex-svg text.ex-svg-e { font-family: var(--disp); font-weight: 900; }
.ex-svg.in-r { animation: exInR .35s ease-out; } .ex-svg.in-l { animation: exInL .35s ease-out; }
@keyframes exInR { from { transform: translateX(14%); opacity: 0; } } @keyframes exInL { from { transform: translateX(-14%); opacity: 0; } }
.ex-hs { cursor: pointer; outline: none; }
@media (hover: hover) { .ex-hs:hover rect { fill: rgba(255, 231, 160, .22); stroke: rgba(255, 210, 90, .9); stroke-width: 6; } }
.ex-hs:focus-visible rect { stroke: #2A9D8F; stroke-width: 8; }
.ex-sp { transform-box: fill-box; transform-origin: center bottom; }
.ex-sp.bump { animation: exBump .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes exBump { 40% { transform: scale(1.06, .95); } 70% { transform: scale(.98, 1.03); } }
.ex-spk { transform-box: fill-box; transform-origin: center; animation: exTwinkle 1.5s ease-in-out infinite; }
@keyframes exTwinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .75; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
.ex-tut-ring { fill: none; stroke: #FFD95A; stroke-width: 12; stroke-dasharray: 26 16; animation: exSpin 4s linear infinite, exPulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px #fff); }
@keyframes exSpin { to { stroke-dashoffset: -168; } } @keyframes exPulse { 50% { opacity: .55; } }
.ex-glow { animation: exPulse 1.4s ease-in-out infinite; }
.ex-blink { animation: exBlink 1s steps(2) infinite; } @keyframes exBlink { 50% { opacity: .2; } }
.ex-bob { animation: exBob 1s ease-in-out infinite alternate; transform-box: fill-box; } @keyframes exBob { to { transform: translateY(-14px); } }
.ex-gobo { animation: exGobo .8s ease-out; } @keyframes exGobo { from { opacity: 0; filter: blur(12px); } }

/* ───── 上の帯 ───── */
.ex-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(var(--hud) + var(--st)); padding: calc(var(--st) + 2.2cqw) 2.6cqw 0; display: flex; flex-direction: column; gap: 1.8cqw;
    background: linear-gradient(180deg, #FFF8EA, #FBE9CC); border-bottom: 4px solid var(--woodD); box-shadow: 0 3px 0 var(--gold), 0 8px 18px rgba(91, 58, 36, .18); font-size: clamp(11px, 3.4cqw, 18px); }
.ex-hud-row { display: flex; align-items: center; gap: 1.8cqw; }
.ex-grow { flex: 1; }
.ex-plate { min-width: 0; position: relative; display: flex; flex-direction: column; gap: .12em; padding: .35em 1.1em .4em 3.1em; border-radius: 12px; background: linear-gradient(180deg, #FFF0C4, #EDC56E); border: 3px solid var(--goldD); box-shadow: inset 0 0 0 2px #FFF6D6, 0 .2em 0 var(--woodD); }
.ex-plate small { position: absolute; left: .4em; top: 50%; transform: translateY(-50%); width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: var(--c, var(--bur)); color: #fff; font: 900 max(12px, .78em)/1 var(--disp); border: 2px solid #fff; }
.ex-plate b { font: 900 1.06em/1.15 var(--body); white-space: nowrap; color: var(--ink); }
.ex-timer { display: flex; align-items: center; gap: .3em; padding: .3em .8em .3em .4em; border-radius: 999px; background: var(--paper); border: 3px solid var(--woodD); font: 900 1.1em/1 var(--disp); font-variant-numeric: tabular-nums; }
.ex-timer .ic { width: 1.5em; height: 1.5em; }
.ex-timer.hot { background: #FFE2E2; border-color: #E63946; color: #C1121F; animation: exPulse .8s infinite; }
.ex-round { flex: none; cursor: pointer; width: 2.6em; height: 2.6em; border-radius: 50%; border: 3px solid var(--woodD); background: var(--paper); font: 900 1.05em/1 var(--disp); box-shadow: 0 .18em 0 var(--woodD); padding: 0; }
.ex-round:active, .ex-hintbtn:active { transform: translateY(.12em); box-shadow: none; }
.ex-memos { display: flex; gap: 1.4cqw; }
.ex-memos span { width: 7.6cqw; height: 9cqw; min-width: 28px; min-height: 33px; display: grid; place-items: center; border-radius: 7px; border: 2.5px dashed #CDB79A; background: #FBF1DF; font: 900 4.6cqw/1 var(--disp); color: #CDB79A; transform: rotate(-3deg); }
.ex-memos span:nth-child(even) { transform: rotate(3deg); }
.ex-memos span.got { border: 3px solid var(--ink); background: var(--c); color: #fff; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; box-shadow: 0 .5cqw 0 var(--ink); animation: exIn .5s cubic-bezier(.34, 1.56, .64, 1); }
.ex-hintbtn { cursor: pointer; display: flex; align-items: center; gap: .45em; padding: .2em .9em .2em .25em; min-height: 44px; border-radius: 999px; border: 3px solid var(--bur); background: linear-gradient(180deg, #FFF4CF, #FFD97A); font: 900 .95em/1 var(--body); color: var(--bur); box-shadow: 0 .2em 0 var(--bur); }
.ex-hintbtn .face { width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden; border: 2px solid var(--bur); background: #fff; display: grid; place-items: center; }
.ex-hintbtn .face img, .ex-hintbtn .face svg { width: 100%; height: 100%; object-fit: cover; }

/* ───── 矢印 ───── */
.ex-arrow { position: absolute; z-index: 5; top: calc(var(--hud) + var(--st) + (100cqh - var(--hud) - var(--bag) - var(--st) - var(--sb)) / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: .8cqw; background: none; border: 0; padding: 0; cursor: pointer; }
.ex-arrow.left { left: 1.8cqw; align-items: flex-start; } .ex-arrow.right { right: 1.8cqw; align-items: flex-end; }
.ex-arrow b { width: 13cqw; height: 13cqw; min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; padding-bottom: 1.3cqw; background: radial-gradient(circle at 35% 30%, #FFF6D6, #EDC56E); border: 3px solid var(--goldD); box-shadow: 0 .8cqw 0 var(--woodD), 0 0 0 3px #fff; font: 900 10cqw/1 var(--disp); color: var(--bur); }
.ex-arrow small { font: 900 clamp(12px, 2.7cqw, 13px)/1.2 var(--body); background: var(--paper); border: 2px solid var(--woodD); border-radius: 999px; padding: .3em .8em; white-space: nowrap; }
.ex-arrow:active b { transform: translateY(.6cqw); box-shadow: 0 .2cqw 0 var(--woodD), 0 0 0 3px #fff; }

/* ───── 下の帯：持ち物 ───── */
.ex-bag { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: calc(var(--bag) + var(--sb)); padding: 1.4cqw 2.4cqw calc(var(--sb) + 1.4cqw); display: flex; align-items: center; gap: 2cqw;
    background: linear-gradient(180deg, #B97B3F, #9C6232); border-top: 4px solid var(--gold); box-shadow: 0 -6px 16px rgba(91, 58, 36, .2); }
.ex-bag-label { flex: none; width: 10cqw; display: flex; flex-direction: column; align-items: center; gap: .2em; color: #FFF0C4; font: 900 clamp(12px, 2.5cqw, 12px)/1 var(--body); }
.ex-bag-label .ic { width: 7cqw; height: 7cqw; }
.ex-items { flex: 1; display: flex; gap: 1.6cqw; overflow-x: auto; touch-action: pan-x; padding: 1cqw .4cqw; scrollbar-width: none; }
.ex-item { flex: none; cursor: pointer; width: 13cqw; height: 13cqw; min-width: 44px; min-height: 44px; padding: 1cqw; border-radius: 12px; display: grid; place-items: center; background: var(--paper); border: 3px solid var(--goldD); box-shadow: inset 0 0 0 2px #FFF6D6, 0 .6cqw 0 #6E4220; position: relative; }
.ex-item img, .ex-item svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.ex-item .pair { display: flex; width: 100%; height: 100%; } .ex-item .pair img { width: 50%; }
.ex-item.empty { cursor: default; background: rgba(255, 246, 227, .18); border: 2.5px dashed rgba(255, 231, 160, .5); box-shadow: none; }
.ex-item.sel { border-color: #FFD95A; background: #FFF3B8; transform: translateY(-1.2cqw); box-shadow: 0 0 0 4px #FFD95A, 0 0 18px #FFE27A, 0 1.6cqw 0 #6E4220; }
.ex-item.new { animation: exIn .55s cubic-bezier(.34, 1.56, .64, 1); }
.ex-item.on::after { content: "⚡"; position: absolute; right: -.4em; top: -.5em; font-size: clamp(10px, 3cqw, 14px); background: #2ECC71; color: #fff; border-radius: 999px; padding: .1em .3em; border: 2px solid #fff; }
.ex-item.tut { animation: exTutItem 1s ease-in-out infinite; } @keyframes exTutItem { 50% { box-shadow: 0 0 0 6px #FFD95A, 0 0 22px #FFE27A; transform: translateY(-1cqw); } }
.ex-selbar { position: absolute; z-index: 6; left: 2.4cqw; right: 2.4cqw; bottom: calc(var(--bag) + var(--sb) + 1.6cqw); display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2cqw 1.6cqw 3cqw; border-radius: 14px; background: #FFF3B8; border: 3px solid var(--goldD); font: 700 clamp(11px, 3.2cqw, 15px)/1.45 var(--body); box-shadow: 0 .5cqw 0 var(--woodD); }
.ex-selbar span { flex: 1; } .ex-selbar b { color: var(--bur); }
.ex-selbar button { flex: none; cursor: pointer; min-height: 40px; border-radius: 999px; border: 2px solid var(--woodD); background: var(--paper); padding: .3em .8em; font: 900 .95em/1 var(--body); }

/* ───── 会話・告知 ───── */
.ex-talk { position: absolute; z-index: 9; left: 2.6cqw; right: 2.6cqw; bottom: calc(var(--bag) + var(--sb) + 2.4cqw); display: flex; gap: 3cqw; align-items: center; padding: 3cqw 3.6cqw; cursor: pointer;
    background: var(--paper); border: 3px solid var(--woodD); border-radius: 20px; box-shadow: inset 0 0 0 4px #FFF0C4, inset 0 0 0 6px var(--gold), 0 .4em 0 var(--woodD), 0 1em 2em rgba(91, 58, 36, .2); }
.ex-talk-face { flex: none; width: 17cqw; height: 17cqw; border-radius: 50%; overflow: hidden; border: 3px solid var(--c, var(--woodD)); background: #FFF0C4; display: grid; place-items: center; }
.ex-talk-face img, .ex-talk-face svg { width: 100%; height: 100%; object-fit: cover; }
.ex-talk.nar .ex-talk-face { width: 11cqw; height: 11cqw; border-radius: 12px; border: 0; background: none; }
.ex-talk-body { min-width: 0; flex: 1; position: relative; }
.ex-talk small { display: inline-block; margin-bottom: .5em; padding: .35em .9em; border-radius: 999px; background: var(--c); color: #fff; font: 900 clamp(12px, 2.9cqw, 14px)/1 var(--body); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.ex-talk p { margin: 0; min-height: 3.2em; font: 700 clamp(13px, 3.9cqw, 18px)/1.65 var(--body); }
.ex-talk-next { position: absolute; right: 0; bottom: -.6em; font-style: normal; color: var(--goldD); font-size: clamp(10px, 3cqw, 14px); animation: exBob .6s ease-in-out infinite alternate; }
.ex-banner { position: absolute; z-index: 8; left: 0; right: 0; top: calc(var(--hud) + var(--st) + 5cqw); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ex-banner small { font: 900 clamp(11px, 3.4cqw, 16px)/1 var(--disp); letter-spacing: .2em; color: #fff; background: var(--c, var(--bur)); padding: .5em 1.2em; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 3px 0 var(--woodD); }
.ex-banner b { margin-top: .2em; font: 900 clamp(26px, 9.6cqw, 50px)/1.15 var(--body); color: #FFF6E3; -webkit-text-stroke: .16em var(--woodD); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--woodD), 0 .2em .3em rgba(91, 58, 36, .3); letter-spacing: .04em; }
.ex-toast { position: absolute; z-index: 11; left: 50%; top: calc(var(--hud) + var(--st) + 3cqw); transform: translateX(-50%); display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3.6cqw 1.6cqw 2cqw; border-radius: 16px; background: var(--paper); border: 3px solid var(--bur); box-shadow: 0 .4em 0 var(--bur); white-space: nowrap; pointer-events: none; }
.ex-toast .ic { width: 9cqw; height: 9cqw; }
.ex-toast small { display: block; font: 900 clamp(12px, 2.8cqw, 13px)/1 var(--body); color: var(--bur); }
.ex-toast b { font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); }

/* ───── 寄って見る画面（羊皮紙のカード） ───── */
.ex-zoom { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: calc(var(--st) + 3.6cqw) 3.6cqw calc(var(--sb) + 3.6cqw); background: rgba(255, 241, 214, .76); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.ex-card { width: 100%; max-height: 100%; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; align-items: center; gap: 3cqw; padding: 0 4.4cqw 4.6cqw; text-align: center;
    background: radial-gradient(circle at 50% 0, #FFFDF6, var(--paper) 60%, #FBEBD0); border: 4px solid var(--woodD); border-radius: 22px;
    box-shadow: inset 0 0 0 5px #FFF3D0, inset 0 0 0 8px var(--gold), 0 .45em 0 var(--woodD), 0 1.4em 3em rgba(91, 58, 36, .28); }
.ex-card.freeze { animation: exFreeze .18s; } @keyframes exFreeze { 50% { transform: scale(1.03); } }
.ex-card-head { position: sticky; top: 0; z-index: 2; margin: 0 -4.4cqw; padding: 3.6cqw 4cqw 2cqw; width: calc(100% + 8.8cqw); background: linear-gradient(180deg, #FFFDF6 70%, rgba(255, 253, 246, 0)); border-radius: 18px 18px 0 0; }
.ex-card-head b { display: inline-block; padding: .45em 1.6em .5em; background: var(--bur); color: #FFF6E3; font: 900 clamp(15px, 4.6cqw, 23px)/1.3 var(--body); border-radius: 6px; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); word-break: keep-all; overflow-wrap: anywhere; }
.ex-card-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.ex-card-foot { width: 100%; display: flex; justify-content: center; }
.ex-z-lead { margin: 0; font: 700 clamp(13px, 3.8cqw, 18px)/1.65 var(--body); }
.ex-z-note { margin: 0; font: 500 clamp(11px, 3.2cqw, 15px)/1.6 var(--body); color: var(--mute); }
.ex-zmsg { margin: 0; font: 900 clamp(13px, 3.8cqw, 18px)/1.5 var(--body); color: #C1121F; }
.ex-z-item { width: 36cqw; height: 36cqw; padding: 4cqw; border-radius: 22px; background: #FFF3D0; border: 3px solid var(--goldD); display: grid; place-items: center; }
.ex-z-item img, .ex-z-item svg { width: 100%; height: 100%; object-fit: contain; } .ex-z-item .pair { display: flex; width: 100%; height: 100%; } .ex-z-item .pair img { width: 50%; }
.ex-letter { width: 100%; text-align: left; background: #FFFDF6; border: 2px solid #E8D3AE; border-radius: 6px; padding: 4cqw 5cqw; box-shadow: 0 .4cqw 0 #E8D3AE; background-image: repeating-linear-gradient(180deg, transparent 0 1.9em, #F1E2C6 1.9em calc(1.9em + 1px)); }
.ex-letter p { margin: 0 0 .6em; font: 700 clamp(13px, 3.8cqw, 18px)/1.9 var(--body); }
.ex-letter p:last-child { text-align: right; color: var(--bur); }
.ex-script p.t { text-align: left; color: var(--bur); font-weight: 900; } .ex-script b { color: var(--bur); }

/* 鍵・時計・照明 */
.ex-slots { display: flex; gap: 2.4cqw; padding-top: 2cqw; }
.ex-slots span { position: relative; width: 13cqw; height: 15cqw; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #FFF8E6, #F3DEB6); border: 3px solid var(--goldD); font: 900 8.4cqw/1 var(--disp); box-shadow: inset 0 -1cqw 0 rgba(91, 58, 36, .08); }
.ex-slots span.fill { background: #fff; animation: exIn .25s; }
.ex-slots span.col { border: 4px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.ex-slots span.col::before { content: ""; position: absolute; top: -2.2cqw; left: 50%; width: 4cqw; height: 4cqw; margin-left: -2cqw; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.ex-slots.ok span { background: #DDF6E4; border-color: #2ECC71; }
.ex-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; width: 80%; }
.ex-key { cursor: pointer; height: 12.4cqw; min-height: 44px; border-radius: 12px; border: 3px solid var(--woodD); background: linear-gradient(180deg, #FFFDF6, #F1DDB8); font: 900 6.2cqw/1 var(--disp); box-shadow: 0 1cqw 0 var(--woodD); }
.ex-key:active { transform: translateY(.8cqw); box-shadow: 0 .2cqw 0 var(--woodD); }
.ex-key.del { font: 900 4cqw/1 var(--body); background: #FBE1E1; }
.ex-clock { width: 62cqw; height: 62cqw; filter: drop-shadow(0 1.4cqw 0 rgba(91, 58, 36, .25)); }
.ex-mixer { display: flex; flex-direction: column; align-items: center; gap: 3.4cqw; width: 100%; }
.ex-bulb { width: 30cqw; height: 30cqw; border-radius: 50%; display: grid; place-items: center; background: #F7EBD6; border: 4px solid var(--goldD); }
.ex-bulb i { width: 22cqw; height: 22cqw; border-radius: 50%; background: #EFE6D4; border: 3px solid var(--ink); transition: background .2s, box-shadow .2s; }
.ex-bulb i.on { box-shadow: 0 0 6cqw currentColor, 0 0 0 2cqw rgba(255, 255, 255, .6); }
.ex-switches { display: flex; gap: 4cqw; }
.ex-sw { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; background: none; border: 0; padding: 0; }
.ex-sw b { width: 17cqw; height: 17cqw; min-width: 48px; min-height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--c) 40%, #fff); border: 4px solid var(--ink); box-shadow: 0 1.4cqw 0 var(--woodD); transition: transform .1s; }
.ex-sw.on b { background: var(--c); box-shadow: 0 .4cqw 0 var(--woodD), 0 0 4cqw var(--c); transform: translateY(1cqw); }
.ex-sw small { font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); }
.ex-gobo-big { display: flex; gap: 3cqw; padding: 5cqw 6cqw; border-radius: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, #fff), #FFFBF2 70%); border: 3px solid var(--goldD); }
.ex-gobo-big b { font: 900 18cqw/1 var(--disp); color: var(--c); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: 0 0 4cqw var(--c); }

/* 絵コンテ・撮影 */
.ex-sb { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw; width: 100%; }
.ex-sb-cell { cursor: pointer; padding: 1.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; background: #fff; border: 3px solid var(--woodD); border-radius: 10px; box-shadow: 0 .8cqw 0 var(--woodD); transition: transform .12s; }
.ex-sb-cell svg { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 4px; }
.ex-sb-cell small { font: 900 clamp(12px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .14em; color: var(--mute); }
.ex-sb-cell.sel { border-color: var(--bur); box-shadow: 0 .8cqw 0 var(--bur), 0 0 0 1.2cqw rgba(142, 42, 58, .2); transform: translateY(-1cqw) rotate(-1deg); }
.ex-sb-cell:disabled { cursor: default; color: inherit; }
.ex-sb-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 3px dashed var(--burL); border-radius: 6px; font: 900 8cqw/1 var(--disp); color: var(--burL); }
.ex-film { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.ex-film-scr { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 6px solid #3A2A1E; background: #3A2A1E; }
.ex-film-scr svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: exFrame 1s calc(var(--i) * .9s) both; }
@keyframes exFrame { 0% { opacity: 0; transform: scale(1.06); } 15%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.ex-film-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FFFBF2; opacity: 0; animation: exIn .6s 3.6s both; }
.ex-film-end small { font: 900 clamp(14px, 4.4cqw, 22px)/1 var(--disp); letter-spacing: .3em; color: var(--mute); }
.ex-film-end b { font: 900 30cqw/1 var(--disp); color: var(--c); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; }
.ex-film-cap { margin: 0; font: 900 clamp(13px, 3.8cqw, 18px)/1 var(--body); }

/* スコア・ドット絵 */
.ex-score { width: 100%; background: var(--paper); border: 4px solid var(--bur); border-radius: 16px; padding: 5cqw 7cqw 4cqw; box-shadow: inset 0 0 0 2cqw #FFF0C4; }
.ex-score-h { margin: 0 0 2cqw; font: 900 clamp(16px, 5.8cqw, 28px)/1 var(--disp); color: var(--bur); letter-spacing: .06em; }
.ex-score p:not(.ex-score-h) { margin: 0; display: flex; justify-content: space-between; padding: 1.8cqw 0; border-bottom: 2px dashed #E8D3AE; font: 900 clamp(15px, 5.4cqw, 26px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.ex-score p span { color: var(--mute); } .ex-score b.q { color: #E63946; }
.ex-nono { display: grid; grid-template-columns: 9cqw repeat(5, 1fr); gap: 1cqw; width: 84%; align-items: end; }
.ex-nono .cc { font: 900 clamp(11px, 3.4cqw, 16px)/1.15 var(--disp); color: var(--bur); text-align: center; padding-bottom: .6cqw; }
.ex-nono .rc { font: 900 clamp(11px, 3.4cqw, 16px)/1 var(--disp); color: var(--bur); align-self: center; text-align: right; padding-right: 1cqw; white-space: nowrap; }
.ex-nono .rc i { display: inline-block; width: .55em; }
.ex-px { cursor: pointer; aspect-ratio: 1; min-height: 44px; border-radius: 6px; border: 3px solid var(--woodD); background: #FFFDF6; padding: 0; }
.ex-px.g { background: repeating-linear-gradient(45deg, #EADFFF 0 4px, #FFFDF6 4px 8px); }
.ex-px.on { background: #8B5CF6; border-color: #5B33C9; box-shadow: inset 0 -.8cqw 0 rgba(0, 0, 0, .15); }
.ex-nono.done .ex-px.on { animation: exIn .5s; }

/* コード・色ボタン・配線 */
.ex-code { width: 100%; text-align: left; overflow: hidden; background: #FFFDF6; border: 3px solid var(--woodD); border-radius: 12px; font: 700 clamp(12px, 3.7cqw, 18px)/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ex-code-bar { display: flex; align-items: center; gap: 1.2cqw; padding: 1.8cqw 2.6cqw; background: #F3E3C6; border-bottom: 2px solid #E2CBA4; }
.ex-code-bar i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #E63946; } .ex-code-bar i:nth-child(2) { background: var(--gold); } .ex-code-bar i:nth-child(3) { background: #2ECC71; }
.ex-code-bar span { margin-left: 1.4cqw; font: 900 clamp(12px, 2.8cqw, 13px)/1 var(--disp); color: var(--mute); }
.ex-code p { margin: 0; padding: 1.9cqw 2.6cqw; white-space: nowrap; line-height: 1.3; } .ex-code p + p { border-top: 1px solid #F1E4CC; }
.ex-code em { display: inline-block; font-style: normal; color: #C2AE90; width: 1.4em; margin-right: .6em; text-align: right; }
.ex-code .cm { color: #A58C6C; font-family: var(--body); font-weight: 700; } .ex-code .sl { color: var(--bur); }
.ex-code b { display: inline-flex; align-items: center; gap: .3em; vertical-align: -.1em; color: var(--c); } .ex-code b i { width: 1em; height: 1em; border-radius: 3px; background: var(--c); border: 2px solid var(--ink); }
.ex-lamps { display: flex; gap: 3cqw; padding: 2.4cqw 4.6cqw; background: #FBF1DF; border: 3px solid var(--woodD); border-radius: 999px; }
.ex-lamps i { width: 7cqw; height: 7cqw; border-radius: 50%; background: #E8DCC8; border: 2.5px solid var(--ink); transition: transform .15s; } .ex-lamps i.on { transform: scale(1.12); } .ex-lamps.ok { background: #DDF6E4; }
.ex-cbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 4.6cqw; padding: 1cqw 0 2cqw; }
.ex-cbtn { cursor: pointer; width: 22cqw; height: 22cqw; min-width: 56px; min-height: 56px; border-radius: 50%; background: var(--c); border: 4px solid var(--ink); box-shadow: 0 1.4cqw 0 var(--woodD), inset 0 -1.6cqw 0 rgba(0, 0, 0, .12), inset 0 1.2cqw 0 rgba(255, 255, 255, .35); }
.ex-cbtn:active { transform: translateY(1cqw); box-shadow: 0 .4cqw 0 var(--woodD), inset 0 -1.6cqw 0 rgba(0, 0, 0, .12); }
.ex-pipes { display: grid; grid-template-columns: 11cqw 1fr 11cqw; align-items: start; gap: 1cqw; width: 100%; }
.ex-pipe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; padding: 1.4cqw; border-radius: 12px; background: #F3E3C6; border: 3px solid var(--woodD); }
.ex-pipe { cursor: pointer; aspect-ratio: 1; min-height: 44px; padding: 0; border-radius: 8px; border: 2px solid #E2CBA4; background: #FFFDF6; transition: transform .15s; }
.ex-pipe:active { transform: rotate(10deg); }
.ex-pipe svg { width: 100%; height: 100%; display: block; }
.ex-pipe polyline { fill: none; stroke: #C2AE90; stroke-width: 18; stroke-linecap: round; } .ex-pipe circle { fill: #C2AE90; }
.ex-pipe .on polyline { stroke: var(--teal); } .ex-pipe .on circle { fill: var(--teal); }
.ex-pipe .gh polyline { stroke: rgba(255, 196, 60, .55); stroke-width: 30; }
.ex-pipes { align-items: stretch; }
.ex-pipe-io { display: grid; grid-template-rows: repeat(4, 1fr); gap: 1cqw; padding: calc(1.4cqw + 3px) 0; }
.ex-pipe-io span { display: grid; place-items: center; border-radius: 8px; font: 900 clamp(12px, 2.4cqw, 12px)/1.1 var(--disp); color: #fff; background: var(--woodD); writing-mode: vertical-rl; }
.ex-pipe-io.out span { background: var(--teal); }
.ex-pipes.done .ex-pipe-grid { box-shadow: 0 0 0 4px #2ECC71, 0 0 22px #8CF0B0; }

/* 名刺・予定・日程調整 */
.ex-cards { width: 100%; display: grid; gap: 2.4cqw; }
.ex-bcard { display: flex; align-items: center; gap: 3cqw; text-align: left; padding: 2.4cqw 3cqw; background: #fff; border: 2px solid #E2CBA4; border-left: 3cqw solid var(--c); border-radius: 8px; box-shadow: 0 .8cqw 0 rgba(91, 58, 36, .15); }
.ex-bcard svg { width: 11cqw; height: 11cqw; flex: none; }
.ex-bcard b { display: block; font: 900 clamp(13px, 4.3cqw, 21px)/1.2 var(--disp); letter-spacing: .02em; overflow-wrap: anywhere; }
.ex-bcard small { font: 700 clamp(12px, 3cqw, 14px)/1.5 var(--body); color: var(--mute); }
.ex-sched { width: 100%; background: #fff; border: 3px solid var(--woodD); border-radius: 12px; padding: 2cqw 5cqw; }
.ex-sched p { margin: 0; display: flex; align-items: center; gap: 4cqw; padding: 2cqw 0; font: 700 clamp(13px, 3.8cqw, 18px)/1 var(--body); } .ex-sched p + p { border-top: 2px solid #F3E7D3; }
.ex-sched b { font: 900 clamp(18px, 6cqw, 30px)/1 var(--body); width: 1.2em; } .ex-sched svg { width: 12cqw; height: 12cqw; } .ex-sched span { color: #2F9BFF; }
.ex-plan { display: grid; grid-template-columns: 10cqw repeat(3, 1fr); gap: 1.4cqw; width: 100%; }
.ex-plan .hd { display: grid; place-items: center; font: 900 clamp(11px, 3.4cqw, 16px)/1 var(--body); color: var(--bur); }
.ex-cell { cursor: pointer; aspect-ratio: 1.15; min-height: 44px; border-radius: 10px; border: 3px solid var(--woodD); background: #FFFDF6; padding: .6cqw; display: grid; place-items: center; }
.ex-cell.blocked { background: repeating-linear-gradient(45deg, #EADAC0 0 6px, #F6EADA 6px 12px); cursor: default; }
.ex-cell.blocked small { font: 900 clamp(12px, 2.6cqw, 12px)/1.2 var(--body); color: var(--woodD); }
.ex-cell i { width: 100%; height: 100%; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, #fff); display: grid; place-items: center; animation: exIn .3s; } .ex-cell i svg { width: 70%; height: 70%; }
.ex-cell em svg { width: 60%; height: 60%; opacity: .3; }
.ex-plan.done .ex-cell { border-color: #2ECC71; }
.ex-toks { display: flex; gap: 2cqw; width: 100%; justify-content: center; }
.ex-tok { cursor: pointer; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .6cqw; padding: 1.4cqw .6cqw; min-height: 44px; border-radius: 12px; border: 3px solid var(--c); background: #fff; }
.ex-tok svg { width: 10cqw; height: 10cqw; } .ex-tok small { font: 900 clamp(12px, 2.6cqw, 12px)/1.2 var(--body); }
.ex-tok.sel { background: color-mix(in srgb, var(--c) 25%, #fff); transform: translateY(-1cqw); box-shadow: 0 1cqw 0 var(--c); } .ex-tok.used { opacity: .45; }
.ex-conds { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; text-align: left; }
.ex-conds li { position: relative; padding: 1.6cqw 2.4cqw 1.6cqw 8cqw; border-radius: 10px; background: #FFF6DC; border: 2px solid #EAD2A0; font: 700 clamp(12px, 3.5cqw, 16px)/1.45 var(--body); }
.ex-conds li::before { content: ""; position: absolute; left: 2cqw; top: 50%; width: 4cqw; height: 4cqw; margin-top: -2cqw; border-radius: 50%; border: 2.5px solid var(--woodD); background: #fff; }
.ex-conds li.ok { background: #DDF6E4; border-color: #8FD9A8; } .ex-conds li.ok::before { content: "✓"; display: grid; place-items: center; font: 900 3cqw/1 var(--body); color: #fff; background: #2ECC71; border-color: #1E9E55; }

/* 紋章・メモ・扉 */
.ex-emblem { display: flex; flex-direction: column; align-items: center; gap: 3cqw; width: 100%; }
.ex-emblem svg { width: 76cqw; height: 76cqw; filter: drop-shadow(0 1.4cqw 0 rgba(91, 58, 36, .25)); }
.ex-ring { cursor: pointer; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ex-ring-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; width: 100%; }
.ex-rbtn { cursor: pointer; min-height: 44px; border-radius: 10px; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #fff); font: 900 clamp(11px, 3.2cqw, 15px)/1.2 var(--body); }
.ex-emblem.done svg { animation: exSpinOnce 1s ease-out; filter: drop-shadow(0 0 5cqw #FFE27A); } @keyframes exSpinOnce { 50% { transform: scale(1.08); } }
.ex-z-memos { display: flex; gap: 2cqw; }
.ex-z-memos span { width: 9cqw; height: 10.6cqw; display: grid; place-items: center; border-radius: 8px; border: 2.5px dashed #CDB79A; background: #FBF1DF; font: 900 5cqw/1 var(--disp); color: #CDB79A; }
.ex-z-memos span.got { border: 3px solid var(--ink); background: var(--c); color: #fff; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; }
.ex-memo-big { width: 36cqw; height: 42cqw; rotate: -4deg; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; background: var(--c); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 0 1.4cqw 0 var(--ink), inset 0 0 0 1.4cqw rgba(255, 255, 255, .25); animation: exMemo .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes exMemo { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
.ex-memo-big small { font: 900 clamp(11px, 3.2cqw, 15px)/1 var(--body); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .45em 1em; }
.ex-memo-big b { font: 900 24cqw/1 var(--disp); color: #fff; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: 0 .05em 0 var(--ink); }
.ex-z-job { width: 100%; display: flex; gap: 3cqw; align-items: center; text-align: left; padding: 3cqw 3.4cqw; border-radius: 16px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 3px solid var(--c); }
.ex-z-job img { width: 17cqw; height: 17cqw; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); background: #fff; }
.ex-z-job small { font: 900 clamp(12px, 2.9cqw, 14px)/1 var(--body); } .ex-z-job p { margin: .5em 0 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.65 var(--body); }
.ex-guide { width: 100%; display: flex; flex-direction: column; gap: 1.6cqw; }
.ex-guide-row { cursor: pointer; display: flex; align-items: center; gap: 3cqw; text-align: left; padding: 1.8cqw 3cqw; min-height: 44px; border-radius: 12px; border: 3px solid var(--c, var(--woodD)); background: #fff; }
.ex-guide-row:disabled { cursor: default; background: #F6EBD7; }
.ex-guide-row b { flex: none; width: 9cqw; height: 9cqw; display: grid; place-items: center; border-radius: 8px; background: var(--c, var(--bur)); color: #fff; font: 900 4cqw/1 var(--disp); }
.ex-guide-row span { font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); } .ex-guide-row small { display: block; font: 700 clamp(12px, 3cqw, 14px)/1.3 var(--body); color: var(--mute); }
.ex-guide-desc { margin: 0; text-align: left; padding: 2.4cqw 3cqw; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 3px dashed var(--c); font: 700 clamp(12px, 3.6cqw, 17px)/1.65 var(--body); }
.ex-guide-desc b { display: block; color: var(--c); filter: brightness(.7); }
.ex-hint-who { display: flex; align-items: center; gap: 3cqw; width: 100%; }
.ex-hint-who img, .ex-hint-who svg { width: 14cqw; height: 14cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--goldD); background: #FFF0C4; }
.ex-hint-who p { margin: 0; font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); }
.ex-hint { width: 100%; text-align: left; padding: 2.6cqw 3.6cqw; border-radius: 14px; background: #FFF6DC; border: 3px solid var(--goldD); animation: exIn .3s; }
.ex-hint b { font: 900 clamp(12px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .1em; color: var(--bur); } .ex-hint p { margin: .5em 0 0; font: 700 clamp(13px, 3.8cqw, 18px)/1.65 var(--body); }

/* ───── ボタン ───── */
.ex-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border-radius: 999px; min-height: 44px; padding: .75em 2.2em .8em; font: 900 clamp(14px, 4.5cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all; transition: transform .12s; }
.ex-btn:active { transform: translateY(.2em); }
.ex-btn-main { color: #FFF6E3; border: 3px solid #5E1825; background: linear-gradient(180deg, #C2465A, var(--bur)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 .3em 0 #5E1825, 0 .8em 1.6em rgba(142, 42, 58, .3); text-shadow: 0 .08em 0 rgba(60, 10, 20, .5); }
.ex-btn-sub { color: var(--ink); background: linear-gradient(180deg, #FFFDF6, #F3DFBA); border: 3px solid var(--woodD); box-shadow: 0 .3em 0 var(--woodD); }
.ex-btn-s { font-size: clamp(12px, 3.7cqw, 18px); padding: .55em 1.5em .6em; }
.ex-row { display: flex; gap: 2cqw; justify-content: center; flex-wrap: wrap; }
.ex-link { color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--body); padding: .6em; }
.ex-link-btn { background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* ───── 画面 ───── */
.ex-screen { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: calc(var(--st) + 4cqw) 6cqw calc(var(--sb) + 4cqw); text-align: center; background: var(--cream); }
.ex-topbar { width: 100%; display: flex; align-items: center; gap: 3cqw; font-size: clamp(12px, 3.6cqw, 18px); }
.ex-topbar span { min-width: 2.6em; }
.ex-h2 { flex: 1; margin: 0; font: 900 clamp(22px, 7.6cqw, 38px)/1.1 var(--body); color: #FFF6E3; -webkit-text-stroke: .16em var(--woodD); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--woodD); letter-spacing: .06em; }
.ex-keys-pill { display: flex; align-items: center; gap: .3em; padding: .3em .8em .3em .4em; border-radius: 999px; background: var(--paper); border: 2px solid var(--woodD); font: 900 1em/1 var(--disp); }
.ex-keys-pill svg, .ex-keys-pill img { width: 1.6em; height: 1.6em; }

.ex-title { justify-content: flex-end; padding-bottom: calc(var(--sb) + 5cqw); background: none; overflow: hidden; }
.ex-title-bg { position: absolute; inset: 0; z-index: -2; animation: exKen 24s ease-in-out infinite alternate; }
.ex-title-bg img, .ex-title-bg svg, .ex-ending-bg img, .ex-ending-bg svg { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes exKen { to { transform: scale(1.08) translate(-2%, -1%); } }
.ex-title::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 246, 227, .5) 0, rgba(255, 246, 227, .05) 28%, rgba(255, 246, 227, 0) 42%, rgba(255, 246, 227, .88) 62%, rgba(255, 246, 227, .97) 80%); }
.ex-title-crew { order: 1; display: flex; justify-content: center; gap: 1.6cqw; margin-bottom: 1cqw; }
.ex-title-logo { order: 0; } .ex-catch { order: 2; } .ex-title-btns { order: 3; } .ex-title > .ex-note { order: 4; }
.ex-tc { width: min(20cqw, 10.5cqh); animation: exPeek 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.ex-tc .st { width: 100%; height: auto; display: block; }
.ex-tc:has(.st) { width: auto; height: min(44cqw, 16cqh); } .ex-tc:has(.st) .st { width: auto; height: 100%; }
@keyframes exPeek { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2.4cqw) rotate(2deg); } }
.st-ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--c); background: #fff; box-shadow: 0 1cqw 0 rgba(91, 58, 36, .25); }
.st-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-title-logo { margin: calc(var(--st) + 9cqw) 0 auto; flex: none; width: min(84cqw, 34cqh); animation: exFloat 3.4s ease-in-out infinite; }
@keyframes exFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.ex-title-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.4cqw 2cqw rgba(91, 58, 36, .3)); }
.ex-title-text { display: flex; flex-direction: column; align-items: center; rotate: -3deg; }
.ex-title-text small { font: 900 9cqw/1 var(--disp); letter-spacing: .24em; color: var(--bur); -webkit-text-stroke: .1em #FFF6E3; paint-order: stroke fill; text-shadow: 0 .07em 0 var(--woodD); padding-left: .24em; }
.ex-title-text b { position: relative; font: 900 22cqw/1 var(--disp); font-style: italic; letter-spacing: -.01em; color: #FFF6E3; -webkit-text-stroke: .14em var(--woodD); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--woodD), 0 .14em .2em rgba(91, 58, 36, .35); }
.ex-title-text b::after { content: attr(data-t); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: transparent; background: linear-gradient(180deg, #FFF6C8 0%, #F2C24E 45%, #B8862A 80%, #E0B24A 100%); -webkit-background-clip: text; background-clip: text; }
.ex-title-text em { margin-top: 2cqw; font-style: normal; font: 900 clamp(12px, 4cqw, 20px)/1 var(--body); letter-spacing: .3em; background: var(--bur); color: #FFF6E3; padding: .5em .7em .5em 1em; border-radius: 6px; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
.ex-catch { margin: 0; font: 900 clamp(14px, 4.4cqw, 22px)/1.6 var(--body); letter-spacing: .03em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.ex-title-btns { display: flex; flex-direction: column; align-items: center; gap: 2.8cqw; }
.ex-title-btns > .ex-btn-main { font-size: clamp(18px, 6.4cqw, 32px); padding: .55em 3em .6em; animation: exPulseS 1.6s ease-in-out infinite; }
@keyframes exPulseS { 50% { transform: scale(1.05); } }
.ex-title-stats { margin: 0; display: flex; gap: 3cqw; justify-content: center; font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--disp); }
.ex-title-stats span { display: flex; align-items: center; gap: .3em; background: rgba(255, 251, 242, .9); border: 2px solid #E8D3AE; border-radius: 999px; padding: .2em .7em .2em .3em; }
.ex-title-stats svg, .ex-title-stats img { width: 1.6em; height: 1.6em; }
.ex-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; }
.ex-demo-tag { position: absolute; top: calc(var(--st) + 3cqw); left: 3cqw; font: 900 clamp(12px, 2.8cqw, 14px)/1 var(--body); letter-spacing: .12em; background: var(--bur); color: #FFF6E3; padding: .6em 1em; border-radius: 999px; border: 2px solid #fff; }
.ex-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FFD95A; margin-right: .6em; animation: exBlink 1s steps(2) infinite; }
.ex-sound { position: absolute; top: calc(var(--st) + 3cqw); right: 3cqw; cursor: pointer; min-height: 40px; border: 3px solid var(--woodD); background: var(--paper); border-radius: 999px; padding: .4em .9em; font: 900 clamp(12px, 3cqw, 15px)/1 var(--disp); box-shadow: 0 .2em 0 var(--woodD); }

.ex-map { justify-content: flex-start; gap: 3cqw; background: linear-gradient(180deg, #CFEFFF 0, #FFF6E3 34%); overflow-y: auto; touch-action: pan-y; }
.ex-floors { margin-top: 9cqw; width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; padding: 3cqw; border-radius: 26px 26px 10px 10px; background: var(--woodL); border: 4px solid var(--woodD); box-shadow: inset 0 0 0 4px #F3CF9C; position: relative; }
.ex-floors::before { content: ""; position: absolute; left: 50%; top: -8cqw; width: 70%; height: 9cqw; transform: translateX(-50%); background: var(--bur); clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.ex-floor { cursor: pointer; position: relative; display: grid; grid-template-columns: 13cqw 1fr auto; align-items: center; gap: 3cqw; padding: 2.4cqw 3cqw; min-height: 64px; text-align: left; border-radius: 14px; border: 3px solid var(--woodD); background: linear-gradient(180deg, #FFFDF6, #F7E6C6); box-shadow: 0 .8cqw 0 var(--woodD); }
.ex-floor .fl { width: 13cqw; height: 13cqw; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #fff; font: 900 5.6cqw/1 var(--disp); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--woodD); }
.ex-floor .nm { font: 900 clamp(14px, 4.4cqw, 21px)/1.25 var(--body); min-width: 0; }
.ex-floor .nm small { display: block; font: 900 clamp(12px, 2.6cqw, 12px)/1 var(--disp); letter-spacing: .14em; color: var(--mute); margin-bottom: .3em; }
.ex-floor .nm em { display: block; font-style: normal; font: 700 clamp(12px, 3cqw, 14px)/1.4 var(--body); color: var(--mute); }
.ex-floor .st { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 18cqw; gap: .2cqw; }
.ex-floor .st i { width: 5.6cqw; height: 5.6cqw; } .ex-floor .st svg, .ex-floor .st img { width: 100%; height: 100%; }
.ex-floor .st small { width: 100%; text-align: right; font: 900 clamp(12px, 2.6cqw, 12px)/1.2 var(--disp); color: var(--bur); }
.ex-floor .key { position: absolute; right: -1cqw; top: -2cqw; width: 8cqw; height: 8cqw; } .ex-floor .key svg { width: 100%; height: 100%; }
.ex-floor.locked { cursor: default; filter: grayscale(.8); opacity: .65; }
.ex-floor.cleared::after { content: "CLEAR"; position: absolute; left: 1cqw; bottom: -1.6cqw; font: 900 clamp(12px, 2.4cqw, 12px)/1 var(--disp); color: #fff; background: #2ECC71; padding: .3em .6em; border-radius: 999px; border: 2px solid #fff; rotate: -6deg; }
.ex-map-note { margin: 0; font: 700 clamp(11px, 3.2cqw, 15px)/1.6 var(--body); color: var(--mute); }

.ex-how { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
.ex-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2.2cqw; }
.ex-steps li { display: flex; align-items: center; gap: 3cqw; text-align: left; padding: 2.6cqw 3.4cqw; border-radius: 14px; background: var(--paper); border: 3px solid var(--woodD); box-shadow: 0 .25em 0 var(--woodD); }
.ex-steps b { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; font: 900 5cqw/1 var(--disp); color: #fff; background: var(--bur); border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--woodD); }
.ex-steps p { margin: 0; font: 700 clamp(13px, 3.7cqw, 17px)/1.6 var(--body); }
.ex-steps strong, .ex-how-note strong { background: linear-gradient(transparent 58%, var(--goldL) 58%); }
.ex-how-note { width: 100%; text-align: left; padding: 2.8cqw 3.6cqw; border-radius: 14px; background: #FFF3D0; border: 3px dashed var(--goldD); }
.ex-how-note p { margin: 0; font: 700 clamp(12px, 3.5cqw, 16px)/1.6 var(--body); } .ex-how-note p + p { margin-top: .5em; }

.ex-book { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; background: linear-gradient(180deg, #F3E2C3, #FFF6E3 30%); }
.ex-tabs { width: 100%; display: flex; gap: 1.4cqw; }
.ex-tabs button { cursor: pointer; flex: 1; min-height: 44px; border-radius: 12px 12px 0 0; border: 3px solid var(--c); border-bottom: 0; background: color-mix(in srgb, var(--c) 18%, #fff); font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); }
.ex-tabs button.on { background: var(--c); color: #fff; transform: translateY(-1cqw); }
.ex-book-page { width: 100%; margin-top: -3cqw; padding: 3.6cqw; display: flex; flex-direction: column; gap: 2.4cqw; text-align: left; border-radius: 0 0 16px 16px; background: var(--paper); border: 3px solid var(--c, var(--woodD)); background-image: repeating-linear-gradient(180deg, transparent 0 2em, #F3E7D3 2em calc(2em + 1px)); }
.ex-book-head { display: flex; gap: 3cqw; align-items: center; }
.ex-book-head img { width: 20cqw; height: 20cqw; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--c); background: #fff; }
.ex-book-head small { font: 900 clamp(12px, 3cqw, 14px)/1 var(--body); color: var(--mute); } .ex-book-head b { display: block; font: 900 clamp(17px, 5.4cqw, 26px)/1.3 var(--body); }
.ex-book-head p { margin: .3em 0 0; font: 700 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }
.ex-page { padding: 2.4cqw 3cqw; border-radius: 10px; background: #fff; border: 2px solid #EAD8B8; box-shadow: 0 .6cqw 0 #EAD8B8; animation: exIn .3s; }
.ex-page b { font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); color: var(--bur); } .ex-page p { margin: .4em 0 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.65 var(--body); }
.ex-page.locked { background: #F6EEDF; border-style: dashed; } .ex-page.locked b { color: var(--mute); } .ex-page.locked p { color: var(--mute); }
.ex-book-team { text-align: center; } .ex-book-team .t { font: 900 clamp(16px, 5cqw, 24px)/1.3 var(--body); color: var(--bur); margin: 0 0 2cqw; }
.ex-book-team .crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; } .ex-book-team .crew img { width: 100%; height: auto; }
.ex-book-team p { font: 700 clamp(12px, 3.6cqw, 17px)/1.65 var(--body); }

.ex-ending { z-index: 8; overflow: hidden; background: #FFF6E3; justify-content: center; }
.ex-ending-bg { position: absolute; inset: 0; z-index: -2; filter: brightness(1.08) saturate(1.05); animation: exKen 14s ease-out both; }
.ex-ending::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .85), rgba(255, 246, 227, .5) 60%, rgba(255, 246, 227, .85)); }
.ex-ending-head { margin: 0; animation: exIn .8s cubic-bezier(.34, 1.56, .64, 1); }
.ex-ending-head span, .ex-res-head span { position: relative; display: block; font: 900 clamp(34px, 14cqw, 72px)/1.05 var(--disp); font-style: italic; color: #FFF6E3; -webkit-text-stroke: .14em var(--woodD); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--woodD), 0 .16em .2em rgba(91, 58, 36, .3); }
.ex-ending-head span::after, .ex-res-head span::after { content: attr(data-t); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: transparent; background: linear-gradient(180deg, #FFF6C8 0%, #F2C24E 45%, #B8862A 80%, #E0B24A 100%); -webkit-background-clip: text; background-clip: text; }
.ex-ending-sub { margin: 0; font: 900 clamp(16px, 5cqw, 24px)/1.4 var(--body); }
.ex-ending-crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; width: 100%; margin-bottom: 30cqw; }
.ex-end-ch { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1cqw; animation: exEndIn .7s calc(.4s + var(--i) * .35s) cubic-bezier(.34, 1.56, .64, 1) both; }
.ex-end-ch .st { width: 100%; height: auto; } .ex-end-ch small { font: 900 clamp(12px, 2cqw, 12px)/1.2 var(--body); letter-spacing: -.04em; background: var(--c); color: #fff; padding: .3em .45em; border-radius: 10px; white-space: normal; text-align: center; max-width: 100%; }
@keyframes exEndIn { from { transform: translateY(14cqw) scale(.6); opacity: 0; } }
.ex-ending .ex-btn-main { position: absolute; bottom: calc(var(--sb) + 8cqw); }

.ex-result { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 2.6cqw; background: radial-gradient(circle at 50% 0, #FFF3C8, var(--cream) 40%); }
.ex-res-logo { width: 56cqw; } .ex-res-logo .ex-title-text b { font-size: 13cqw; } .ex-res-logo .ex-title-text small { font-size: 5.6cqw; } .ex-res-logo .ex-title-text em { display: none; }
.ex-res-head { margin: 0; rotate: -3deg; animation: exIn .6s cubic-bezier(.34, 1.56, .64, 1); } .ex-res-head span { font-size: clamp(28px, 11cqw, 56px); }
.ex-res-floor { margin: 0; font: 900 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.ex-res-stats { display: flex; gap: 2.2cqw; width: 100%; }
.ex-res-stats > div { flex: 1; display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw 1cqw; border-radius: 14px; background: var(--paper); border: 3px solid var(--woodD); box-shadow: 0 .25em 0 var(--woodD); }
.ex-res-stats small { font: 900 clamp(12px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .16em; color: var(--mute); }
.ex-res-stats b { font: 900 clamp(20px, 7.4cqw, 36px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.ex-res-stats .stars b { display: flex; justify-content: center; gap: .5cqw; } .ex-res-stats .stars i { width: 7cqw; height: 7cqw; } .ex-res-stats .stars svg, .ex-res-stats .stars img { width: 100%; height: 100%; }
.ex-res-stats .stars i.on { animation: exStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; } .ex-res-stats .stars i:nth-child(2) { animation-delay: .25s; } .ex-res-stats .stars i:nth-child(3) { animation-delay: .5s; }
@keyframes exStar { from { transform: scale(0) rotate(-90deg); } }
.ex-res-record { margin: 0; font: 900 clamp(14px, 4.6cqw, 22px)/1 var(--disp); color: #fff; background: var(--bur); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--bur); border-radius: 999px; padding: .45em 1.3em; rotate: -3deg; animation: exIn .6s 1.2s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.ex-res-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.ex-res-missions li { display: flex; align-items: center; gap: 2cqw; text-align: left; padding: .5em 1em .5em .5em; border-radius: 999px; background: #fff; border: 2px solid #EAD8B8; font: 700 clamp(12px, 3.6cqw, 16px)/1.3 var(--body); }
.ex-res-missions i { width: 7cqw; height: 7cqw; flex: none; } .ex-res-missions i svg, .ex-res-missions i img { width: 100%; height: 100%; }
.ex-res-missions li.done i { animation: exStar .5s var(--d) cubic-bezier(.34, 1.56, .64, 1) backwards; }
.ex-res-missions span { flex: 1; } .ex-res-missions b { font: 900 max(12px, .78em)/1 var(--disp); color: #fff; background: #E63946; border-radius: 999px; padding: .35em .6em; }
.ex-res-got { margin: 0; font: 700 clamp(11px, 3.3cqw, 15px)/1.5 var(--body); color: var(--mute); } .ex-res-got b { color: var(--bur); }
.ex-res-match { width: 100%; padding: 3.6cqw 4.2cqw; text-align: left; border-radius: 20px; background: var(--paper); border: 4px solid var(--c, var(--woodD)); box-shadow: inset 0 0 0 4px #FFF3D0, 0 .35em 0 var(--woodD); }
.ex-res-lead { margin: 0 0 1.8cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.ex-res-job { display: flex; align-items: center; gap: 3cqw; } .ex-res-job > div { min-width: 0; }
.ex-res-face { width: 24cqw; height: 24cqw; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--c, var(--ink)); background: #fff; }
.ex-res-type { margin: 0 0 .35em; font: 900 clamp(11px, 3.3cqw, 15px)/1.3 var(--body); color: var(--ct, var(--bur)); }
.ex-res-name { margin: 0; font: 900 clamp(18px, 5.8cqw, 29px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.ex-res-why { margin: 2.4cqw 0 0; padding: 2cqw 2.6cqw; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); font: 900 clamp(12px, 3.6cqw, 17px)/1.6 var(--body); }
.ex-res-desc { margin: 2cqw 0 0; font: 500 clamp(13px, 3.7cqw, 17.6px)/1.7 var(--body); }
.ex-res-sub2 { margin: 3cqw 0 1.6cqw; font: 900 clamp(12px, 3.1cqw, 14px)/1.3 var(--body); color: var(--mute); }
.ex-res-bars { display: flex; flex-direction: column; gap: 2.2cqw; }
.ex-res-bar { display: grid; grid-template-columns: 1fr auto; row-gap: .5em; column-gap: .6em; align-items: end; font: 900 clamp(11px, 3.3cqw, 15px)/1.2 var(--body); }
.ex-res-bar small { margin-left: .5em; font-weight: 700; color: var(--mute); font-size: max(12px, .84em); } .ex-res-bar .v { font-family: var(--disp); font-variant-numeric: tabular-nums; font-size: max(12px, .9em); white-space: nowrap; }
.ex-res-bar i { grid-column: 1 / -1; height: 1em; background: rgba(91, 58, 36, .1); border-radius: 999px; overflow: hidden; }
.ex-res-bar em { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.ex-res-bar.top > span:first-child::before { content: "★ "; color: var(--bur); }
.ex-res-small { margin: 2.6cqw 0 0; font-size: clamp(12px, 2.8cqw, 13.6px); color: var(--mute); line-height: 1.6; }
.ex-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 5cqw; width: 100%; }
.ex-res-btns .ex-btn { min-width: 74cqw; } .ex-res-btns.top { padding-bottom: 0; } .ex-res-btns.top .ex-row .ex-btn { min-width: 0; }

/* ───── 粒子・演出 ───── */
.ex-fx { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.ex-flash { position: absolute; inset: 0; z-index: 21; pointer-events: none; background: #FFFBEA; opacity: 0; }
.ex-flash.on { animation: exFlash .35s ease-out; } .ex-flash.on.long { animation: exFlash 1.3s ease-out; }
@keyframes exFlash { 20% { opacity: .85; } }
.ex-num { position: absolute; z-index: 22; transform: translate(-50%, -50%); pointer-events: none; font: 900 clamp(16px, 5cqw, 26px)/1 var(--disp); color: #FFF6E3; -webkit-text-stroke: .14em var(--bur); paint-order: stroke fill; animation: exNum 1.1s ease-out forwards; }
@keyframes exNum { from { transform: translate(-50%, 0) scale(.6); } 30% { transform: translate(-50%, -110%) scale(1.15); } to { transform: translate(-50%, -200%); opacity: 0; } }
.ex-fly { position: absolute; z-index: 22; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; pointer-events: none; transition: transform .6s cubic-bezier(.5, 0, .3, 1), opacity .6s; }
.ex-fly img, .ex-fly svg { width: 100%; height: 100%; object-fit: contain; }
.ex-wipe { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle, #FFF0C4, #E8B77E); clip-path: circle(0% at 50% 50%); }
.ex-wipe.close { pointer-events: auto; animation: exWipeC .42s ease-in forwards; } .ex-wipe.open { animation: exWipeO .5s ease-out forwards; }
@keyframes exWipeC { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes exWipeO { from { clip-path: circle(80% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
.ex-loading { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 900 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; transition: opacity .4s; }
.ex-loading i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--gold); border: 3px solid var(--woodD); animation: exBob .5s ease-in-out infinite alternate; }
.ex-loading.off { opacity: 0; pointer-events: none; }
.ex-shake { animation: exShake .45s; } .ex-shake-s { animation: exShakeS .3s; }
@keyframes exShake { 20%, 60% { transform: translateX(-2.4cqw); } 40%, 80% { transform: translateX(2.4cqw); } }
@keyframes exShakeS { 25% { transform: translate(-4px, 1px); } 75% { transform: translate(4px, -1px); } }
@keyframes exIn { from { transform: scale(.5); opacity: 0; } }
.ex-pop { animation: exPop .3s cubic-bezier(.34, 1.56, .64, 1); } @keyframes exPop { from { transform: translateY(3cqw) scale(.95); opacity: 0; } }
.ex-toast.ex-pop { animation: exToast .4s cubic-bezier(.34, 1.56, .64, 1); } @keyframes exToast { from { transform: translate(-50%, -4cqw) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ex-title-bg, .ex-title-logo, .ex-tc, .ex-title-btns > .ex-btn-main, .ex-spk, .ex-tut-ring, .ex-ending-bg { animation: none; } }