:root {
  color-scheme: dark;
  --ink: #11171a;
  --blue: #1d3542;
  --green: #51645e;
  --paper: #d7d4c8;
  --red: #a94048;
  --amber: #c89a62;
  --line: rgba(224, 231, 225, 0.2);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: #080c0e;
  color: #f1f2ed;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif;
}

button { font: inherit; letter-spacing: 0; }
button:focus-visible { outline: 2px solid #e0b77b; outline-offset: 3px; }

.game-shell, .scene { position: relative; width: 100%; height: 100%; }
.scene { overflow: hidden; background: #202b2e; }

.school-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #344247 0%, #263337 43%, #171e20 100%); }
.corridor-wall { position: absolute; inset: 8% 0 23%; background: linear-gradient(100deg, #75817d 0 18%, #465656 18% 48%, #253133 48% 100%); clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 100%); }
.window-light { position: absolute; left: 0; top: 8%; width: 28%; height: 70%; background: repeating-linear-gradient(90deg, rgba(205,216,205,.78) 0 14%, #263536 14% 17%); box-shadow: 0 0 70px rgba(199, 214, 197, .22); clip-path: polygon(0 0, 86% 8%, 78% 100%, 0 100%); }
.classroom-doors { position: absolute; right: 0; top: 19%; width: 58%; height: 59%; background: repeating-linear-gradient(90deg, #293638 0 21%, #11191b 21% 22%, #53615d 22% 23%, #293638 23% 44%); transform: perspective(700px) rotateY(-9deg); transform-origin: right center; }
.classroom-doors::after { content: ""; position: absolute; inset: 13% 8%; background: repeating-linear-gradient(90deg, rgba(173,190,179,.18) 0 15%, transparent 15% 23%); }
.floor-lines { position: absolute; inset: 67% -8% 0; background: repeating-linear-gradient(105deg, rgba(214,210,190,.12) 0 2px, transparent 2px 96px), linear-gradient(180deg, #53605c, #1b2425); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.ceiling-lines { position: absolute; inset: 0 0 72%; background: repeating-linear-gradient(82deg, #303c3e 0 16%, #151d1f 16% 17%); clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 68%); }
.archery-sign { position: absolute; top: 21%; right: 7%; z-index: 2; padding: 8px 12px; color: #1d2220; background: #b9b5a6; border: 1px solid #4f5650; writing-mode: vertical-rl; font-size: clamp(12px, 1.1vw, 18px); letter-spacing: .4em; box-shadow: 0 8px 18px #0008; }
.sunset-stripe { position: absolute; left: 25%; top: 9%; width: 5px; height: 70%; background: #9d3e45; opacity: .5; box-shadow: 0 0 28px #aa444c; transform: rotate(6deg); }

.scene-locker .school-scene { background: linear-gradient(180deg, #253033, #101719); }
.scene-locker .corridor-wall { inset: 12% 5% 17%; clip-path: none; background: repeating-linear-gradient(90deg, #465457 0 15%, #1e292c 15% 16%, #607071 16% 17%); border-top: 10px solid #171f21; }
.scene-locker .window-light { left: 12%; top: 4%; width: 52%; height: 18%; clip-path: none; background: repeating-linear-gradient(90deg, #9cacaa 0 29%, #1f2c2e 29% 32%); opacity: .75; }
.scene-locker .classroom-doors { left: auto; right: 10%; top: 18%; width: 22%; height: 57%; background: #303d3f; border: 5px solid #131b1d; transform: none; }
.scene-locker .classroom-doors::before { content: ""; position: absolute; left: 8%; right: 8%; top: 48%; height: 9px; background: #9a9d91; box-shadow: inset 0 0 0 2px #414745, 0 2px 6px #000; }
.scene-locker .classroom-doors::after { display: none; }
.scene-locker .floor-lines { inset: 70% 0 0; clip-path: none; background: repeating-linear-gradient(90deg, #293537 0 9%, #20292b 9% 10%); }
.scene-locker .archery-sign, .scene-locker .sunset-stripe { display: none; }

.scene-festival .school-scene { background: linear-gradient(180deg, #a8b7b2 0 42%, #6b8278 42% 58%, #33463f 58% 100%); }
.scene-festival .ceiling-lines { inset: 0; clip-path: none; background: linear-gradient(172deg, transparent 0 37%, rgba(234,225,198,.72) 37% 38%, transparent 38% 100%); }
.scene-festival .corridor-wall { inset: 36% 4% 18%; clip-path: polygon(0 29%, 52% 0, 100% 22%, 100% 100%, 0 100%); background: linear-gradient(180deg, #6d7e75, #354941); border-top: 4px solid rgba(234,225,198,.72); }
.scene-festival .window-light { left: 8%; top: 18%; width: 18%; height: 38%; clip-path: none; background: #d6d0b9; border: 8px solid #7c5e50; box-shadow: 0 10px 30px rgba(35,49,44,.3); }
.scene-festival .classroom-doors { left: 34%; right: auto; top: 28%; width: 32%; height: 35%; transform: none; background: #7f4d4f; border: 9px solid #e2d7b9; box-shadow: 0 20px 40px rgba(0,0,0,.28); }
.scene-festival .classroom-doors::after { inset: 14% 8%; background: repeating-linear-gradient(90deg, #c5a86e 0 11%, #4d6259 11% 13%); }
.scene-festival .floor-lines { inset: 61% 0 0; clip-path: none; background: repeating-linear-gradient(100deg, rgba(235,221,188,.22) 0 2px, transparent 2px 120px), linear-gradient(180deg, #5d756b, #293b35); }
.scene-festival .archery-sign { display: block; top: 20%; right: 10%; color: #f4ead1; background: #a23f48; border-color: #e0c4a0; writing-mode: horizontal-tb; letter-spacing: .12em; }
.scene-festival .archery-sign::after { content: "祭"; display: block; margin-top: 5px; font-size: 2.4em; text-align: center; }
.scene-festival .sunset-stripe { display: block; left: 0; top: 14%; width: 100%; height: 24px; background: repeating-linear-gradient(90deg, #b6454c 0 5%, #e0c88e 5% 10%, #506c62 10% 15%); box-shadow: 0 7px 22px rgba(0,0,0,.22); transform: none; opacity: .95; }
.scene-stage .classroom-doors { background: #93464c; }
.scene-tent .classroom-doors { left: 53%; width: 29%; background: #d2c5a9; clip-path: polygon(50% 0, 100% 30%, 91% 100%, 9% 100%, 0 30%); }
.scene-clock .window-light { left: 67%; top: 16%; width: 18%; height: 42%; border-radius: 50% 50% 3px 3px; background: radial-gradient(circle, #e1dbc7 0 30%, #4d5d57 31% 34%, #b9c5bd 35%); }
.target-shadow { position: absolute; z-index: 3; right: 15%; bottom: 19%; width: 12%; height: 48%; opacity: 0; background: #101718; clip-path: polygon(42% 0, 66% 5%, 72% 23%, 86% 44%, 74% 100%, 18% 100%, 27% 48%, 18% 28%, 33% 9%); filter: blur(1px); transition: opacity .5s; }
.scene-archery .school-scene { background: linear-gradient(180deg, #8d9790 0 34%, #6b756c 34% 50%, #26362f 50% 100%); }
.scene-archery .ceiling-lines { inset: 0; clip-path: none; background: linear-gradient(176deg, transparent 0 45%, rgba(191,61,69,.42) 45% 46%, transparent 46%), linear-gradient(180deg, rgba(224,190,139,.32), transparent 46%); }
.scene-archery .corridor-wall { inset: 47% 0 17%; clip-path: none; background: repeating-linear-gradient(90deg, #3b5046 0 7%, #273a32 7% 8%); border-top: 3px solid #9d8a69; }
.scene-archery .window-light { left: 12%; top: 31%; width: 13%; height: 32%; clip-path: none; border-radius: 50%; background: radial-gradient(circle, #b84d54 0 16%, #e7ddd0 17% 26%, #344941 27% 31%, #c8b99d 32% 48%, #2e4038 49%); box-shadow: 0 10px 28px #0005; }
.scene-archery .classroom-doors { left: 44%; right: auto; top: 27%; width: 15%; height: 37%; transform: none; border-radius: 50%; background: radial-gradient(circle, #a63e47 0 14%, #eee5d5 15% 25%, #3f5149 26% 30%, #d0c09f 31% 47%, #263932 48%); border: 8px solid #25362f; }
.scene-archery .classroom-doors::after { display: none; }
.scene-archery .floor-lines { inset: 64% 0 0; clip-path: none; background: repeating-linear-gradient(90deg, rgba(212,193,154,.17) 0 2px, transparent 2px 120px), linear-gradient(180deg, #465a50, #1e2d27); }
.scene-archery .archery-sign { display: block; top: 17%; right: 6%; color: #e9ddc7; background: #263932; border-color: #8c7658; writing-mode: vertical-rl; letter-spacing: .35em; }
.scene-archery .archery-sign::after { display: none; }
.scene-archery .sunset-stripe { display: block; left: 0; top: 34%; width: 100%; height: 2px; transform: none; opacity: .8; background: #b44950; box-shadow: 0 0 24px #b44950; }
.scene-archery .target-shadow { opacity: .7; }
.scene-records .school-scene { background: linear-gradient(180deg, #4a5452, #202a2a 58%, #111819); }
.scene-records .ceiling-lines { inset: 0 0 78%; clip-path: none; background: repeating-linear-gradient(90deg, #2a3434 0 24%, #b49a68 24% 25%); }
.scene-records .corridor-wall { inset: 16% 3% 17%; clip-path: none; background: repeating-linear-gradient(90deg, #273332 0 17%, #111918 17% 18%, #56605b 18% 19%); border: 8px solid #18201f; }
.scene-records .corridor-wall::after { content: ""; position: absolute; inset: 8% 4%; background: repeating-linear-gradient(0deg, rgba(201,187,153,.34) 0 3%, transparent 3% 17%); }
.scene-records .window-light { left: 38%; top: 12%; width: 24%; height: 56%; clip-path: none; background: #8b7b5e; border: 10px solid #202a28; box-shadow: 0 0 45px rgba(194,165,107,.2); }
.scene-records .classroom-doors { left: 43%; right: auto; top: 22%; width: 14%; height: 42%; transform: none; background: #c7b98f; border: 7px solid #514b3e; }
.scene-records .classroom-doors::after { inset: 8%; background: repeating-linear-gradient(0deg, #766c55 0 2%, transparent 2% 12%); }
.scene-records .floor-lines { inset: 70% 0 0; clip-path: none; background: repeating-linear-gradient(90deg, #263130 0 12%, #1b2424 12% 13%); }
.scene-records .archery-sign, .scene-records .sunset-stripe { display: none; }
.scene-dawn .school-scene { background: linear-gradient(180deg, #c9d1cb 0 45%, #8fa097 45% 63%, #53665d 63% 100%); }
.scene-dawn .ceiling-lines { inset: 0 0 77%; clip-path: none; background: repeating-linear-gradient(90deg, #e0ded2 0 19%, #93a198 19% 20%); }
.scene-dawn .corridor-wall { inset: 17% 0 24%; clip-path: none; background: #84958d; border-bottom: 9px solid #53645c; }
.scene-dawn .window-light { left: 0; top: 16%; width: 38%; height: 57%; clip-path: none; background: repeating-linear-gradient(90deg, rgba(241,225,183,.9) 0 22%, #586b63 22% 24%); box-shadow: 30px 0 80px rgba(244,213,147,.34); }
.scene-dawn .classroom-doors { right: 6%; top: 24%; width: 50%; height: 43%; transform: none; background: repeating-linear-gradient(90deg, #64776e 0 20%, #33473f 20% 21%); }
.scene-dawn .classroom-doors::after { inset: 11% 6%; background: repeating-linear-gradient(90deg, rgba(230,229,211,.31) 0 18%, transparent 18% 21%); }
.scene-dawn .floor-lines { inset: 68% 0 0; clip-path: none; background: repeating-linear-gradient(105deg, rgba(240,225,184,.2) 0 2px, transparent 2px 95px), linear-gradient(180deg, #83968b, #53675d); }
.scene-dawn .archery-sign { display: block; top: 24%; right: 8%; color: #4d534c; background: #ded9c7; border-color: #7d867d; writing-mode: vertical-rl; letter-spacing: .25em; }
.scene-dawn .sunset-stripe { display: block; left: 34%; top: 17%; width: 3px; height: 56%; transform: rotate(5deg); opacity: .55; background: #c79856; box-shadow: 0 0 26px #d7a85d; }

.status-bar { position: absolute; z-index: 20; left: 0; top: 0; width: 100%; min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 12px clamp(18px, 3vw, 48px); background: linear-gradient(180deg, rgba(5,10,12,.93), rgba(7,13,15,.56), transparent); text-shadow: 0 2px 7px #000; }
.place-block { display: grid; gap: 3px; }
.place-block .day { color: #b7c0ba; font-size: 12px; }
.place-block strong { font-size: clamp(15px, 1.4vw, 21px); font-weight: 500; }
.chapter-mark { color: #bbc2bd; font-size: 12px; letter-spacing: .12em; }
.alert-block { justify-self: end; width: min(230px, 25vw); }
.alert-copy { display: flex; justify-content: space-between; align-items: baseline; color: #c1cac4; font-size: 12px; }
.alert-copy strong { color: #e7eae4; font-size: 16px; }
.pulse-line { height: 22px; display: flex; align-items: center; gap: 4px; overflow: hidden; border-bottom: 1px solid #62706a; }
.pulse-line i { width: 18px; height: 2px; background: #a7464d; transform: skewX(-30deg); }
.pulse-line i:nth-child(3n) { height: 15px; transform: skewX(-20deg) rotate(24deg); }

.sprite-layer { position: absolute; inset: 7% 0 18%; z-index: 6; pointer-events: none; }
.sprite { position: absolute; bottom: -7%; max-height: 102%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.65)); transition: opacity .45s, transform .45s, filter .35s; }
.sprite-teacher { left: 3%; opacity: 0; transform: translateX(-18px) scale(.92); }
.sprite-student { right: 8%; opacity: 0; transform: translateX(18px) scale(.96); }
.sprite.visible { opacity: 1; transform: translateX(0) scale(.98); }
.sprite.dim { filter: brightness(.58) saturate(.72) drop-shadow(0 14px 18px rgba(0,0,0,.65)); }

.trust-meter { position: absolute; z-index: 16; top: 90px; right: clamp(18px, 3vw, 48px); display: grid; grid-template-columns: auto 86px 28px; gap: 8px; align-items: center; padding: 7px 10px; color: #d8ddd8; background: rgba(12,20,21,.66); border-left: 2px solid #bd9161; font-size: 11px; opacity: 0; transition: opacity .3s; }
.trust-meter.visible { opacity: 1; }
.trust-track { height: 4px; background: #152124; }
.trust-track i { display: block; height: 100%; width: 40%; background: #c09b6a; transition: width .5s; }

.dialogue-box { position: absolute; z-index: 30; left: clamp(14px, 4vw, 72px); right: clamp(14px, 4vw, 72px); bottom: clamp(14px, 3vh, 36px); min-height: 168px; padding: 24px 34px 26px; background: rgba(10,20,25,.91); border: 1px solid rgba(188,202,194,.23); border-left: 4px solid #607e86; box-shadow: 0 18px 55px #000b, inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.speaker-row { display: flex; justify-content: space-between; align-items: start; margin-bottom: 13px; }
.speaker { display: inline-block; min-width: 104px; color: #f2e8d8; font-size: 17px; }
.speaker::after { content: ""; display: block; width: 42px; height: 2px; margin-top: 7px; background: #9e434a; }
.quick-actions { display: flex; gap: 5px; }
.quick-actions button { padding: 4px 7px; border: 0; color: #99a6a3; background: transparent; font-family: Arial, sans-serif; font-size: 10px; cursor: pointer; }
.quick-actions button:hover, .quick-actions button.active { color: #f1d5aa; }
.dialogue-text { min-height: 52px; max-width: 900px; margin: 0; color: #e5e8e2; font-size: clamp(15px, 1.45vw, 20px); line-height: 1.85; }
.next-button { position: absolute; right: 22px; bottom: 14px; width: 36px; height: 36px; border: 0; color: #d4c29e; background: transparent; font-size: 35px; cursor: pointer; animation: nextPulse 1.2s ease-in-out infinite; }
@keyframes nextPulse { 50% { transform: translateX(5px); opacity: .55; } }

.choices { display: grid; gap: 8px; margin-top: 13px; max-width: 880px; }
.choices button { padding: 11px 15px; color: #e4e9e3; text-align: left; background: rgba(41,57,60,.9); border: 1px solid #5a6866; border-left: 3px solid #8f4449; cursor: pointer; transition: background .2s, transform .2s; }
.choices button:hover { background: #46595a; transform: translateX(4px); }
.choices button:disabled { color: #87918d; background: rgba(31,43,45,.75); border-left-color: #59615f; cursor: not-allowed; transform: none; }

.title-screen { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 70% 40%, rgba(86,109,101,.28), transparent 32%), linear-gradient(120deg, rgba(14,22,24,.96), rgba(7,10,12,.92)), repeating-linear-gradient(90deg, #263234 0 14%, #131b1d 14% 15%); transition: opacity .8s, visibility .8s; }
.title-screen::before { content: ""; position: absolute; inset: 0 0 0 58%; background: url("assets/yoko.png") 45% 11% / auto 112% no-repeat; opacity: .5; filter: grayscale(.2) brightness(.62); }
.title-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090e10 7%, transparent 70%), linear-gradient(0deg, #090d0f, transparent 40%); }
.title-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.title-noise { position: absolute; inset: 0; z-index: 1; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); mix-blend-mode: soft-light; }
.title-content { position: relative; z-index: 3; width: min(720px, 88vw); transform: translateX(-17%); }
.title-content p { color: #9ea9a4; font-size: 12px; letter-spacing: .18em; }
.title-content h1 { margin: 8px 0; font-size: clamp(64px, 11vw, 150px); font-weight: 400; line-height: 1; letter-spacing: 0; text-shadow: 0 8px 28px #000; }
.title-content h1::first-letter { color: #bd5056; }
.title-rule { width: min(500px, 65vw); height: 1px; margin: 24px 0; background: linear-gradient(90deg, #b64950, transparent); }
.title-content span { color: #c7ccc6; font-size: clamp(13px, 1.3vw, 17px); }
.title-actions { width: min(650px, 100%); display: grid; grid-template-columns: repeat(3, minmax(155px, 1fr)); gap: 10px; margin-top: 38px; }
.primary-button, .secondary-button { min-width: 150px; padding: 12px 20px; cursor: pointer; }
.primary-button { color: #f5eee3; background: #8e383f; border: 1px solid #bd6268; }
.secondary-button { color: #d8ddd8; background: rgba(32,47,50,.7); border: 1px solid #596866; }
.title-credit { position: absolute; z-index: 3; left: 28px; bottom: 22px; color: #65716d; font: 10px Arial, sans-serif; letter-spacing: .12em; }

.investigation-layer { position: absolute; z-index: 22; inset: 0; cursor: crosshair; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 0 90px, rgba(4,9,11,.2) 190px, rgba(4,9,11,.58) 100%); }
.hotspot { position: absolute; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.hotspot span { position: absolute; inset: 13px; border: 1px solid #d3b878; border-radius: 50%; box-shadow: 0 0 0 5px rgba(211,184,120,.11), 0 0 18px #d3b878; animation: cluePulse 1.8s infinite; }
.hotspot.found span { border-color: #71817b; box-shadow: none; animation: none; opacity: .35; }
@keyframes cluePulse { 50% { transform: scale(1.45); opacity: .45; } }
.hotspot-latch { right: 18%; top: 48%; }
.hotspot-locker { left: 43%; top: 41%; }
.hotspot-window { left: 28%; top: 17%; }
.search-progress { position: absolute; left: 50%; bottom: 215px; transform: translateX(-50%); width: min(420px, 70vw); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 14px; background: rgba(9,16,18,.78); border: 1px solid #52605d; font-size: 11px; }
.search-progress div { height: 5px; background: #182326; }
.search-progress i { display: block; width: 0; height: 100%; background: #b8935c; transition: width .4s; }

.festival-map { position: absolute; z-index: 42; inset: 72px 0 0; overflow: hidden; padding: clamp(24px, 4vw, 56px); background: rgba(14,25,25,.9); backdrop-filter: blur(12px); }
.festival-map header { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid #5d7169; }
.festival-map header span, .festival-map footer span { color: #c09a67; font: 11px Arial, sans-serif; letter-spacing: .14em; }
.festival-map header strong { font-weight: 400; color: #dfe5dc; }
.map-route { position: absolute; left: 16%; right: 16%; top: 48%; height: 2px; background: repeating-linear-gradient(90deg, #81938b 0 12px, transparent 12px 23px); transform: rotate(-5deg); }
.map-locations { position: relative; z-index: 2; height: calc(100% - 92px); display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: clamp(18px, 3vw, 42px); align-items: center; }
.map-location { position: relative; min-height: 190px; padding: 26px 24px; display: grid; align-content: end; gap: 8px; color: #e7ece4; text-align: left; background: rgba(41,58,55,.94); border: 1px solid #6c7e76; border-radius: 3px; box-shadow: 0 18px 38px rgba(0,0,0,.24); cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.map-location::before { content: ""; position: absolute; inset: 18px 18px auto; height: 70px; opacity: .75; }
.location-stage::before { background: repeating-linear-gradient(90deg, #b34d55 0 18%, #d4bd83 18% 22%); clip-path: polygon(5% 100%, 5% 46%, 50% 0, 95% 46%, 95% 100%); }
.location-tent::before { background: #c8b893; clip-path: polygon(50% 0, 100% 37%, 88% 100%, 12% 100%, 0 37%); }
.location-clock::before { background: radial-gradient(circle, #d7d1bb 0 24%, #5e7168 25% 31%, #a2484e 32% 34%, transparent 35%), linear-gradient(90deg, transparent 42%, #a89d81 42% 58%, transparent 58%); }
.map-location > span { color: #c5a36f; font: 11px Arial, sans-serif; }
.map-location strong { font-size: 22px; font-weight: 500; }
.map-location small { color: #aebbb4; }
.map-location:hover { transform: translateY(-5px); border-color: #d1b47f; background: #3b504b; }
.map-location.visited { border-color: #a54b52; }
.map-location.visited::after { content: "已记录"; position: absolute; right: 13px; top: 12px; color: #d8b6a0; font-size: 10px; }
.festival-map footer { position: absolute; z-index: 3; left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); bottom: 22px; display: flex; justify-content: space-between; }
.festival-map footer strong { font: 14px Arial, sans-serif; }

.danger-vignette { position: absolute; z-index: 45; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 35px rgba(173,24,38,.76); animation: dangerFlash .35s alternate infinite; }
@keyframes dangerFlash { to { opacity: .45; } }
.qte-panel { position: absolute; z-index: 50; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; background: rgba(7,10,11,.53); backdrop-filter: blur(3px); }
.countdown { width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; border: 6px solid #8d333b; box-shadow: 0 0 0 1px #d48a8f, 0 0 35px #8d333b; }
.countdown span { font: 34px Arial, sans-serif; }
.qte-panel > strong { font-size: 18px; text-shadow: 0 3px 8px #000; }
.qte-actions { display: flex; gap: 12px; }
.qte-actions button { min-width: 138px; padding: 12px; color: #f2eeee; background: #3b1f23; border: 1px solid #a8575d; cursor: pointer; }

.evidence-duel { position: absolute; z-index: 54; inset: 0; display: grid; align-content: center; gap: 24px; padding: clamp(22px, 7vw, 110px); background: rgba(7,12,13,.88); backdrop-filter: blur(7px); }
.duel-statement { max-width: 880px; padding: 28px 30px; border-left: 5px solid #a3434b; background: #1c292b; box-shadow: 0 24px 60px #0008; }
.duel-statement span { color: #c8a06b; font: 10px Arial, sans-serif; letter-spacing: .18em; }
.duel-statement p { margin: 11px 0 0; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.65; }
.duel-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 880px; }
.duel-evidence button { min-height: 92px; padding: 16px; color: #dfe6df; text-align: left; background: #30413e; border: 1px solid #65766f; cursor: pointer; }
.duel-evidence button:hover { border-color: #d0ad78; background: #405550; }
.duel-evidence small { display: block; margin-top: 7px; color: #aab8b0; }

.timeline-panel { position: absolute; z-index: 56; inset: 0; display: grid; align-content: center; gap: 22px; padding: clamp(22px, 6vw, 90px); color: #332f27; background: #cec7b5; background-image: repeating-linear-gradient(0deg, rgba(80,69,53,.12) 0 1px, transparent 1px 32px); }
.timeline-panel header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 13px; border-bottom: 1px solid #8d846e; }
.timeline-panel header span { color: #8b3d43; font: 11px Arial, sans-serif; letter-spacing: .15em; }
.timeline-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.timeline-slots div { min-height: 105px; padding: 16px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; border: 1px dashed #827966; background: rgba(242,237,222,.5); }
.timeline-slots span { width: 28px; height: 28px; display: grid; place-items: center; color: #f3ead8; background: #8d3e44; border-radius: 50%; }
.timeline-slots strong { font-weight: 500; }
.timeline-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.timeline-options button { padding: 14px; min-height: 78px; color: #302d27; background: #e3dcc9; border: 1px solid #938975; cursor: pointer; }
.timeline-options button:disabled { opacity: .35; cursor: default; }
.timeline-reset { justify-self: end; padding: 9px 18px; color: #ece9df; background: #3f4e49; border: 1px solid #69766f; cursor: pointer; }

.archery-threat { position: absolute; z-index: 62; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 24px; background: rgba(10,15,15,.68); backdrop-filter: blur(4px); box-shadow: inset 0 0 110px 28px rgba(151,35,45,.66); }
.trajectory-line { position: absolute; left: 7%; top: 43%; width: 88%; height: 2px; background: #e6d9be; box-shadow: 0 0 15px #fff; transform: rotate(-8deg); transform-origin: right center; animation: trajectory 1s ease-in-out infinite alternate; }
@keyframes trajectory { to { transform: rotate(-5deg) translateX(18px); opacity: .45; } }
.threat-timer { width: 108px; height: 108px; display: grid; place-items: center; border-radius: 50%; border: 5px solid #a84049; background: rgba(17,24,24,.78); box-shadow: 0 0 34px #8d3039; }
.threat-timer span { font: 31px Arial, sans-serif; }
.archery-threat > strong { position: relative; max-width: 660px; text-align: center; font-size: 18px; }
.threat-actions { position: relative; display: flex; gap: 10px; }
.threat-actions button { min-width: 174px; padding: 12px; color: #f1ece4; background: #342225; border: 1px solid #a1545a; cursor: pointer; }

.chain-panel { position: absolute; z-index: 64; inset: 0; display: grid; align-content: center; gap: 22px; padding: clamp(22px, 6vw, 90px); background: rgba(13,23,23,.95); backdrop-filter: blur(8px); }
.chain-panel header, .mechanism-panel header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #63746d; }
.chain-panel header span, .mechanism-panel header span { color: #c29c66; font: 10px Arial, sans-serif; letter-spacing: .16em; }
.chain-panel header strong, .mechanism-panel header strong { font-weight: 400; }
.chain-slots { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 13px; align-items: center; }
.chain-slots div { min-height: 110px; padding: 16px; display: grid; align-content: center; gap: 8px; background: #243532; border: 1px dashed #71827a; }
.chain-slots div span { color: #bb965f; font-size: 11px; }
.chain-slots div strong { font-weight: 500; }
.chain-slots > i { color: #ad4a51; font-size: 25px; font-style: normal; }
.chain-evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chain-evidence button { min-height: 78px; padding: 12px; color: #dde5de; background: #344843; border: 1px solid #677972; cursor: pointer; }
.chain-evidence button:disabled { opacity: .3; cursor: default; }
.chain-reset, .mechanism-reset { justify-self: end; padding: 9px 18px; color: #ece9df; background: #4d3336; border: 1px solid #8f5559; cursor: pointer; }

.mechanism-panel { position: absolute; z-index: 66; inset: 0; display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; grid-template-rows: auto auto auto auto; align-content: center; gap: 18px 30px; padding: clamp(20px, 5vw, 76px); color: #2e2b25; background: #cec6b2; background-image: repeating-linear-gradient(0deg, rgba(77,68,53,.13) 0 1px, transparent 1px 31px); }
.mechanism-panel header { grid-column: 1 / -1; border-bottom-color: #8e846d; }
.mechanism-panel header span { color: #8c3c43; }
.mechanism-visual { grid-row: 2 / 5; position: relative; min-height: 310px; overflow: hidden; border: 1px solid #918772; background: rgba(237,231,213,.5); }
.door-model { position: absolute; left: 21%; top: 15%; width: 52%; height: 72%; border: 12px solid #665e50; background: #9a907b; transform: perspective(480px) rotateY(-13deg); }
.door-model i { position: absolute; right: 7%; top: 46%; width: 40px; height: 7px; background: #55554f; box-shadow: 0 0 0 2px #b8ae99; }
.door-model b { position: absolute; left: -18px; top: 0; bottom: 0; width: 7px; background: #3f433e; }
.wire-model { position: absolute; left: 12%; right: 10%; top: 48%; height: 3px; border-top: 2px dashed #9c3f46; transform: rotate(-12deg); }
.mechanism-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mechanism-slots div { min-height: 88px; padding: 12px; display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: center; border: 1px dashed #817763; background: rgba(244,239,223,.56); }
.mechanism-slots span { width: 27px; height: 27px; display: grid; place-items: center; color: #f1e8d8; background: #8f3e45; border-radius: 50%; }
.mechanism-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mechanism-options button { min-height: 70px; padding: 10px; color: #302d27; background: #e4ddca; border: 1px solid #938875; cursor: pointer; }
.mechanism-options button:disabled { opacity: .32; cursor: default; }

.letter-panel { position: absolute; z-index: 68; inset: 0; display: grid; align-content: center; gap: 18px; padding: clamp(20px, 6vw, 90px); color: #332e25; background: #bcb5a3; background-image: repeating-linear-gradient(90deg, rgba(69,60,47,.08) 0 1px, transparent 1px 34px); }
.letter-panel header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #817764; }
.letter-panel header span { color: #913e45; font: 10px Arial, sans-serif; letter-spacing: .18em; }
.letter-panel header strong { font-weight: 400; }
.letter-sheet { padding: 22px; background: #ddd5c2; border: 1px solid #958a74; box-shadow: 0 18px 45px rgba(55,45,33,.22); }
.letter-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.letter-slots div { min-height: 96px; padding: 13px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; border: 1px dashed #8f836c; background: rgba(247,241,224,.52); }
.letter-slots span { width: 28px; height: 28px; display: grid; place-items: center; color: #f1e8d8; background: #8d3d43; border-radius: 50%; }
.letter-slots strong { font-weight: 500; line-height: 1.6; }
.letter-fragments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.letter-fragments button { min-height: 78px; padding: 13px; color: #302b23; background: #ebe3d0; border: 1px solid #9d917a; cursor: pointer; }
.letter-fragments button:disabled { opacity: .3; cursor: default; }
.letter-reset { justify-self: end; padding: 9px 18px; color: #eee9de; background: #483d34; border: 1px solid #776859; cursor: pointer; }

.ending-panel { position: absolute; z-index: 180; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(8,13,14,.94); backdrop-filter: blur(10px); }
.ending-inner { width: min(760px, 94vw); padding: clamp(28px, 5vw, 60px); text-align: center; background: #152021; border: 1px solid #52615e; border-top: 4px solid #a44149; box-shadow: 0 30px 80px #000; }
.ending-inner > span { color: #c09a67; font: 10px Arial, sans-serif; letter-spacing: .22em; }
.ending-inner h2 { margin: 12px 0 18px; font-size: clamp(30px, 5vw, 55px); font-weight: 400; }
.ending-inner p { margin: 0 auto; max-width: 610px; color: #d4dcd5; line-height: 1.9; }
.ending-stats { margin: 26px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #40504d; border-bottom: 1px solid #40504d; }
.ending-stats div { padding: 13px; border-right: 1px solid #40504d; }
.ending-stats div:last-child { border-right: 0; }
.ending-stats span { display: block; color: #899993; font-size: 10px; }
.ending-stats strong { display: block; margin-top: 5px; color: #e4ded2; }
.ending-actions { display: flex; justify-content: center; gap: 10px; }
.ending-actions button { padding: 11px 18px; color: #e7e8e3; background: #344642; border: 1px solid #64756f; cursor: pointer; }

.modal { position: absolute; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3,7,8,.8); backdrop-filter: blur(8px); }
.notebook { width: min(980px, 96vw); height: min(690px, 90vh); overflow: hidden; color: #302d27; background: #c8c1ad; border: 12px solid #3f342c; border-radius: 5px; box-shadow: 0 28px 70px #000; }
.notebook header, .log-sheet header { display: flex; justify-content: space-between; align-items: center; }
.notebook header { height: 88px; padding: 13px 26px; background: #b7ad96; border-bottom: 1px solid #817966; }
.notebook header span { color: #766b58; font: 9px Arial, sans-serif; letter-spacing: .18em; }
.notebook h2, .log-sheet h2 { margin: 3px 0 0; font-weight: 500; }
.close-button { width: 34px; height: 34px; border: 0; color: inherit; background: transparent; font-size: 26px; cursor: pointer; }
.notebook-tabs { display: flex; padding: 0 24px; background: #a99c82; border-bottom: 1px solid #7c735e; }
.notebook-tabs button { padding: 10px 22px; color: #5c5447; background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.notebook-tabs button.active { color: #2d2b27; border-bottom-color: #8f3e43; }
.notebook-page { height: calc(100% - 130px); padding: 25px 28px; overflow: auto; background: repeating-linear-gradient(0deg, rgba(84,77,64,.12) 0 1px, transparent 1px 31px), #d5cfbd; }
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.evidence-card { min-height: 145px; padding: 16px; text-align: left; color: #312f29; background: rgba(238,234,218,.72); border: 1px solid #9d9580; box-shadow: 0 3px 7px rgba(69,59,45,.12); }
.evidence-card.locked { opacity: .38; filter: grayscale(1); }
.evidence-card strong { display: block; margin-bottom: 10px; font-size: 16px; }
.evidence-card small { color: #766d5d; }
.relationship { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; max-width: 620px; }
.relationship img { width: 110px; height: 140px; object-fit: cover; object-position: top; background: #262e2d; border: 4px solid #eee9d8; box-shadow: 0 4px 10px #5f5748; }
.deduction-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.deduction-slot { min-height: 180px; padding: 17px; border: 1px dashed #736a57; background: rgba(247,241,221,.37); }
.deduction-slot strong { display: block; margin-bottom: 13px; }
.deduction-board > span { align-self: center; font-size: 28px; color: #883a40; }
.clue-chip { width: 100%; margin: 5px 0; padding: 9px; color: #3d382e; text-align: left; background: #e3dcc7; border: 1px solid #9d937e; cursor: pointer; }
.hypothesis { margin-top: 20px; padding: 16px; color: #efeae0; background: #394744; border-left: 4px solid #aa454b; }

.log-sheet { width: min(760px, 94vw); max-height: 82vh; padding: 24px; overflow: auto; color: #dfe3de; background: #111a1d; border: 1px solid #4d5e5c; }
.log-sheet header { position: sticky; top: -24px; padding: 8px 0 14px; background: #111a1d; }
#logContent p { padding: 10px 0; margin: 0; border-top: 1px solid #293639; line-height: 1.65; }
#logContent strong { color: #c49a67; margin-right: 10px; }
.toast { position: absolute; z-index: 200; left: 50%; top: 16%; transform: translate(-50%, -10px); padding: 10px 18px; color: #edf0eb; background: rgba(25,38,39,.94); border: 1px solid #65716e; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .status-bar { min-height: 58px; grid-template-columns: 1fr 1fr; padding: 8px 12px; }
  .chapter-mark { display: none; }
  .alert-block { width: 135px; }
  .sprite-layer { inset: 8% 0 28%; }
  .sprite { max-height: 96%; }
  .sprite-teacher { left: -25%; }
  .sprite-student { right: -22%; }
  .trust-meter { top: 64px; right: 10px; grid-template-columns: auto 55px 22px; }
  .dialogue-box { left: 8px; right: 8px; bottom: 8px; min-height: 218px; padding: 17px 16px 20px; }
  .speaker-row { margin-bottom: 8px; }
  .quick-actions button { padding: 4px; font-size: 9px; }
  .dialogue-text { min-height: 68px; font-size: 14px; line-height: 1.7; padding-right: 9px; }
  .choices { gap: 6px; margin-top: 8px; }
  .choices button { padding: 8px 10px; font-size: 12px; line-height: 1.45; }
  .search-progress { bottom: 235px; width: 84vw; }
  .festival-map { inset: 58px 0 0; padding: 18px 14px 52px; }
  .festival-map header { display: grid; gap: 7px; }
  .map-locations { height: auto; margin-top: 18px; grid-template-columns: 1fr; gap: 9px; }
  .map-location { min-height: 104px; padding: 14px 14px 14px 112px; }
  .map-location::before { left: 14px; right: auto; top: 17px; width: 80px; height: 67px; }
  .map-location strong { font-size: 17px; }
  .map-route { display: none; }
  .duel-evidence { grid-template-columns: 1fr; }
  .evidence-duel { padding: 16px; }
  .duel-statement { padding: 18px; }
  .timeline-panel { padding: 18px 12px; gap: 13px; }
  .timeline-panel header { display: grid; gap: 5px; }
  .timeline-slots, .timeline-options { grid-template-columns: 1fr; gap: 7px; }
  .timeline-slots div { min-height: 50px; padding: 8px; }
  .timeline-options button { min-height: 50px; padding: 8px; }
  .threat-actions { width: 88vw; display: grid; grid-template-columns: 1fr; }
  .threat-actions button { min-width: 0; padding: 9px; }
  .chain-panel { padding: 16px 12px; gap: 12px; }
  .chain-panel header, .mechanism-panel header { display: grid; gap: 5px; }
  .chain-slots { grid-template-columns: 1fr; gap: 6px; }
  .chain-slots div { min-height: 55px; }
  .chain-slots > i { justify-self: center; transform: rotate(90deg); font-size: 18px; }
  .chain-evidence { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .chain-evidence button { min-height: 54px; padding: 7px; font-size: 12px; }
  .mechanism-panel { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; padding: 12px; gap: 9px; overflow: auto; }
  .mechanism-visual { grid-row: auto; min-height: 120px; }
  .door-model { top: 9%; height: 78%; }
  .mechanism-slots, .mechanism-options { grid-template-columns: 1fr; gap: 5px; }
  .mechanism-slots div, .mechanism-options button { min-height: 46px; padding: 7px; }
  .letter-panel { padding: 14px 10px; gap: 10px; }
  .letter-panel header { display: grid; gap: 5px; }
  .letter-sheet { padding: 10px; }
  .letter-slots, .letter-fragments { grid-template-columns: 1fr; gap: 5px; }
  .letter-slots div, .letter-fragments button { min-height: 48px; padding: 7px; }
  .ending-stats { grid-template-columns: 1fr; }
  .ending-stats div { border-right: 0; border-bottom: 1px solid #40504d; }
  .ending-stats div:last-child { border-bottom: 0; }
  .ending-actions { display: grid; grid-template-columns: 1fr; }
  .qte-actions { width: 86vw; display: grid; grid-template-columns: 1fr; }
  .qte-actions button { padding: 9px; }
  .title-screen::before { inset: 0 0 0 25%; opacity: .35; }
  .title-content { transform: none; align-self: end; margin-bottom: 18vh; }
  .title-content h1 { font-size: 72px; }
  .title-actions { margin-top: 28px; }
  .evidence-grid { grid-template-columns: 1fr; }
  .notebook { height: 92vh; border-width: 7px; }
  .notebook header { height: 72px; padding: 8px 14px; }
  .notebook-tabs { padding: 0 4px; }
  .notebook-tabs button { flex: 1; padding: 9px 3px; font-size: 12px; }
  .notebook-page { height: calc(100% - 111px); padding: 16px; }
  .deduction-board { grid-template-columns: 1fr; }
  .deduction-board > span { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 500px) {
  .title-actions { display: grid; grid-template-columns: 1fr; width: min(260px, 100%); }
  .primary-button, .secondary-button { width: 100%; min-width: 0; }
  .title-content { margin-bottom: 12vh; }
}