/* 明德秋光 · Warm silk, cinnabar and aged bronze. */
:root{--ivory:#f7ecd5;--gold:#c7a36b;--ink:#45382e;--muted:#d8cbb5;--cinnabar:#8c4636;--paper:#f4e9d5}
body,.game{background:#302e29}
button{transition:background .2s,color .2s,border-color .2s,transform .2s}
button:focus-visible{outline:2px solid #b77745;outline-offset:4px}
.scenery{filter:saturate(.92);background-position:center}
.scene-wash{background:linear-gradient(90deg,#252c29e8,#29352b78 37%,transparent 74%),linear-gradient(0deg,#202820c7,transparent 40%)}
.grain{opacity:.017}
.ornament-corner,.sky-jewel{display:none}
.border-frame{inset:18px;border:1px solid #f2dfb333;border-radius:2px;box-shadow:none}
.border-frame:before,.border-frame:after{border-color:#ecd8ac80;width:20px;height:20px}

/* Compact controls leave the gate's central plaque unobstructed. */
.topbar{height:98px;padding:0 5%;background:linear-gradient(#241d1866,transparent)}
.brand{color:#fff2d9;font-size:23px;gap:13px;text-shadow:0 2px 8px #302217bb}
.brand-seal{background:#7d4036e8;border:1px solid #dec195;outline-color:#e4c59255;outline-offset:3px;border-radius:2px;font-size:26px}
.brand small{font-size:7px;letter-spacing:2.2px;color:#eadac0}
.topbar nav{gap:9px;padding:5px 9px;background:#352d27c9;border:1px solid #e1c39866;border-radius:4px;box-shadow:0 4px 18px #2e211625;backdrop-filter:blur(12px)}
.top-button{font-size:12px;letter-spacing:1px;padding:9px 10px;color:#f2e5ce;border-radius:2px;min-height:38px}
.top-button>span:first-child{color:#d6b782;font-size:15px}
.top-button:hover{color:#fff6e2;background:#f3dcac1c}
.top-button:disabled{opacity:.43}
.skip{background:#8a493be6;border:1px solid #ddb98491;padding:9px 15px!important;color:#fff0d4}
.skip:hover{background:#a05844}
.skip[aria-pressed=true]{background:#e4c391;color:#4c3429}
.icon-button{color:#e2caa3;padding:0 4px;font-size:24px}
.dot{background:#ebc077;right:4px;top:6px}

.title-screen{top:98px}
.title-copy{left:10.5%;top:9%}
.eyebrow{color:#e0c89b;font-size:10px;letter-spacing:5px}
.eyebrow i{background:#c9a56c;width:36px}
.main-title{font-size:clamp(100px,9.5vw,164px);letter-spacing:15px;line-height:1.09;margin:28px 0;text-shadow:0 5px 25px #242c2860}
.main-title>span{color:#f6e4bb}
.main-title>span:nth-child(2){margin-left:64px}
.main-title em{font-family:var(--serif);font-size:15px;background:#884b3c;border:1px solid #cfaa7c;color:#faeacf;outline-color:#d3b57a45;padding:11px 7px;bottom:14px;border-radius:1px;letter-spacing:6px}
.title-poem{color:#e9e2cb;font-size:19px;text-shadow:0 2px 10px #26372e;line-height:2;letter-spacing:2.5px;margin-bottom:30px}
.title-actions{gap:28px}
.primary-button{background:linear-gradient(115deg,#f4e6c7,#ddc397);border:1px solid #f3dfb9;color:#593f2e;padding:17px 32px;min-width:220px;letter-spacing:4px;border-radius:2px;box-shadow:0 6px 25px #171d2440,inset 0 0 0 4px #e3cfa5,inset 0 0 0 5px #a88a5866;font-size:23px}
.primary-button:hover{background:#f5e5be;box-shadow:0 8px 30px #201f2040,inset 0 0 0 4px #e3cfa5,inset 0 0 0 5px #a88a5866;transform:translateY(-2px)}
.primary-button span{padding-left:20px}
.text-button{color:#ecddc2;font-family:var(--serif);font-size:16px}
.title-hint{color:#c9cfb9;letter-spacing:2px;margin-top:20px}
.title-hint span{border-color:#c6b38966}
.vertical-verse{right:6.5%;top:10%;font-size:17px;color:#f6e6c0;text-shadow:0 2px 9px #26372e;border-right:1px solid #dcc69750;padding-right:13px}
.title-bottom{bottom:38px;left:6%;right:6%;color:#cfceb6;font-size:10px}
#motes i{background:#f9dd93;box-shadow:0 0 7px #f7d28c55;width:2px;height:2px}
.is-playing:is(.outside,.gate,.report) #motes{opacity:.4}

/* The supplied painting is shown without the old zoom or teal colour wash. */
.play-screen{top:98px}
.is-playing .scene-wash{background:linear-gradient(0deg,#26281edb,transparent 52%),linear-gradient(90deg,#29332c44,transparent 65%)}
.is-playing.museum .scenery{filter:saturate(.88) brightness(1.08)}
.is-playing.museum .scene-wash{background:linear-gradient(0deg,#1c292fc2,transparent 65%)}
.is-playing:is(.outside,.gate,.report) .scenery{transform:none;filter:none;background-position:53% top}
.is-playing:is(.outside,.gate,.report) .scene-wash{background:linear-gradient(0deg,#362819d9,transparent 39%),linear-gradient(180deg,#34291b21,transparent 22%)}
.scene-heading{top:4%;left:6%;padding:16px 22px 15px;border:1px solid #ddc39b9c;border-left:3px solid #a06445;background:linear-gradient(100deg,#f5ead5ed,#efe0c9d4);box-shadow:0 5px 24px #402c191a;border-radius:1px;backdrop-filter:blur(10px)}
.scene-heading>span{font-size:9px;letter-spacing:4px;color:#866b4d}
.scene-heading h1{font-size:26px;letter-spacing:3px;color:#543f30;margin:10px 0}
.scene-heading p{font-size:12px;letter-spacing:1px;color:#76614b;margin:8px 0 0}
.scene-marker{right:6%;top:7%;color:#fce8c5;border-color:#e4c192b0;text-shadow:0 2px 6px #362b21}
.is-playing:is(.outside,.gate,.report) .scene-marker{padding:13px 9px 7px;background:#824636db;border:1px solid #ddbb8391;letter-spacing:6px;font-size:15px}

/* A quiet silk sheet for text, with one cinnabar speaker label. */
.dialogue-wrap{left:8%;right:8%;bottom:58px}
.dialogue-meta{margin:0 2px 11px;gap:9px;font-size:10px;letter-spacing:1.5px;color:#fff1d8;text-shadow:0 1px 6px #3d2b18}
.dialogue-meta>span{background:#3d3024bd;padding:7px 12px;border:1px solid #d4b18050;border-radius:2px;backdrop-filter:blur(8px)}
.dialogue-meta button{padding:7px 12px;min-height:32px;color:#fff0d7;background:#423328c9;border:1px solid #dcc29a73;border-radius:2px;backdrop-filter:blur(10px)}
.dialogue-meta button:hover{background:#755139e8}
.dialogue-meta button[aria-pressed=true]{color:#4e3828;background:#efd4a6;text-shadow:none}
.live-dot{background:#e8bf80;box-shadow:none;margin-bottom:2px}
.dialogue-box{padding:23px 35px 17px;min-height:208px;background:radial-gradient(ellipse at top left,#fffaea82,transparent 62%),linear-gradient(108deg,#f7ecd9f7,#eddfc5f2);border:1px solid #e9ce9d;border-radius:3px;box-shadow:0 12px 42px #3b281b40,inset 0 0 0 4px #f3e6ce,inset 0 0 0 5px #b99b6a66;backdrop-filter:blur(16px)}
.dialogue-box:before{inset:10px;border:0;border-left:1px solid #a7855140;border-right:1px solid #a7855140}
.dialogue-box:after{content:'';position:absolute;top:10px;right:10px;width:24px;height:24px;border-top:1px solid #a7855170;border-right:1px solid #a7855170;pointer-events:none}
.name-row{gap:15px;margin-bottom:14px}
#speaker{background:#8b4838;color:#fff0d3;letter-spacing:3px;border:1px solid #b58c61;box-shadow:inset 0 0 0 3px #8b4838,inset 0 0 0 4px #d8b77e59;border-radius:1px;padding:7px 17px;font-size:22px;min-width:98px;text-align:center}
#speakerTag{color:#907c62;font-size:8px;letter-spacing:2px}
.name-line{width:88px;background:linear-gradient(90deg,#ae8d59a1,transparent)}
.dialogue-text{color:#493d32;font-size:clamp(19px,1.65vw,24px);line-height:1.85;letter-spacing:1.5px;min-height:61px;text-shadow:none}
.dialogue-box.thought #speaker{background:#58635a;box-shadow:inset 0 0 0 3px #58635a,inset 0 0 0 4px #d8b77e59}
.dialogue-box.thought .dialogue-text{color:#5a5a49}
.dialogue-bottom{color:#8a7354;font-size:10px;letter-spacing:1.5px;margin-top:12px}
.diamond{color:#98573e;font-size:9px}
.progress-track{height:2px;background:#e5c18c30;margin:6px 6px 0}
.progress-track>div{background:#d3ae74;box-shadow:none}
.play-footer{left:8%;right:8%;bottom:29px;color:#eddbc1;letter-spacing:1.5px;text-shadow:0 1px 5px #35271c}

/* Keep both faces visible and the street opening between them. */
.portrait{right:7%;bottom:185px;height:65%;max-height:540px;filter:sepia(.14) saturate(.82) drop-shadow(0 8px 12px #4027164d)}
.portrait.dim{filter:sepia(.2) saturate(.65) brightness(.84) drop-shadow(0 6px 12px #40271633);opacity:.88;transform:scale(.97)}
.portrait.subordinate{right:auto;left:9%;height:51%;max-height:430px}
.prop-focus{background:radial-gradient(ellipse,#473a29c4,transparent 73%);filter:drop-shadow(0 5px 18px #ffe9a725)}
.prop-focus>span,.prop-focus small{color:#ffedcc;text-shadow:0 1px 5px #403426}
.scan-panel{background:#253939ed;border:1px solid #ccb5839c;border-radius:2px;box-shadow:0 10px 35px #0a273633}
.scan-panel>span{color:#e8d5b1}.scan-panel p{color:#d0d2bd}

.ending-screen{background:linear-gradient(#29372b44,#243226aa);backdrop-filter:blur(5px)}
.ending-screen h1{color:#f4dfb2;text-shadow:0 4px 25px #273f365e}
.ending-screen p{color:#e9e6cc}
.next-mission{background:linear-gradient(110deg,#f4e8d1f0,#e4d4b8ed);border:1px solid #d5b581;border-radius:2px;box-shadow:inset 0 0 0 4px #ece0c7,inset 0 0 0 5px #b59a6c70;color:#57422f}
.next-mission small{color:#966344}.next-mission strong{color:#57422f}.next-mission span{color:#7d6b51}
.ending-note{color:#d4d1b8}

/* Notes, clues and settings use the same paper and ink as dialogue. */
dialog{background:radial-gradient(ellipse at top left,#fff9e9,transparent 65%),#f0e4ce;color:#544738;border:1px solid #c3a370;border-radius:3px;box-shadow:0 30px 100px #251d15b8,inset 0 0 0 5px #f3e6ce,inset 0 0 0 6px #b79b6d7a;padding:32px 40px}
dialog::backdrop{background:#2a241da8;backdrop-filter:blur(8px)}
.modal-head{border-color:#ab895438}.modal-head small{color:#967b59}.modal-head h2{color:#744a35}
.close-button{color:#815d42;border:1px solid #b39a704d;border-radius:2px;font-size:26px;width:38px;height:38px}
.close-button:hover{background:#b4946822}
.modal-foot{border-color:#ab895438;color:#907e61}
.clue-card{border-color:#b29f6c40;padding:21px 3px}.clue-card h3{color:#854b35}.clue-card p{color:#645540;line-height:2}.clue-card small{color:#8e795b}
.clue-art{background:radial-gradient(ellipse,#b59f7330,transparent 68%)}
.flip-button{border-color:#aa945c80;color:#715739;background:#e6d6b850;border-radius:2px}
.flip-button:hover{background:#e1c99e73}
.log-line{border-color:#b29f6c40}.log-line dt{color:#854b35}.log-line dt small{color:#9c8768}.log-line dd{color:#655741;line-height:2}
.setting-row{border-color:#b29f6c40}.setting-row label{color:#71513b}.setting-row input{accent-color:#94533b}.setting-note,.empty-state{color:#7d6c51}
.toast{background:#f4e7cff5;border-color:#c6a678;color:#725037;border-radius:2px;box-shadow:0 5px 35px #3e2c2857;text-shadow:none}

@media(min-width:1700px){
  .title-copy{left:12%;top:10%}.main-title{font-size:165px}
  .dialogue-wrap{left:12%;right:12%;bottom:66px}.play-footer{left:12%;right:12%;bottom:33px}
  .dialogue-box{padding:25px 42px 19px}.portrait{right:12%;bottom:200px;max-height:620px}.portrait.subordinate{left:12%;max-height:500px}
}
@media(max-height:760px) and (min-width:800px){
  .topbar{height:80px}.title-screen,.play-screen{top:80px}.title-copy{top:3%;left:10%}
  .main-title{font-size:102px;margin:18px 0}.title-poem{font-size:17px;margin-bottom:20px}
  .primary-button{padding:12px 26px;min-width:204px;font-size:21px}.title-hint{margin-top:16px}
  .scene-heading{top:3%;padding:12px 18px}.scene-heading h1{font-size:23px;margin:8px 0}
  .dialogue-wrap{bottom:45px}.dialogue-box{min-height:174px;padding:18px 30px 15px}
  #speaker{font-size:19px;padding:5px 14px}.name-row{margin-bottom:9px}.dialogue-text{font-size:20px;min-height:50px}.dialogue-bottom{margin-top:8px}
  .play-footer{bottom:22px}.portrait{bottom:154px;height:65%}.portrait.subordinate{height:51%}
  .ending-screen{padding-bottom:25px}
}
@media(max-width:799px){
  .border-frame{inset:9px}.topbar{height:80px;padding:0 5%}
  .brand{font-size:18px;gap:9px;letter-spacing:2px}.brand-seal{width:27px;height:33px;font-size:23px}.brand small{display:none}
  .topbar nav{gap:1px;padding:3px;border-radius:3px}.top-button{font-size:11px;letter-spacing:0;padding:8px 7px;min-height:34px}.skip{padding:8px 9px!important}.top-button>span:first-child{display:none}
  .title-screen,.play-screen{top:80px}.is-title .scenery{background-position:61% center}.is-title .scene-wash{background:linear-gradient(90deg,#26392aeb,#26382f8c 65%,#28383150),linear-gradient(0deg,#27352ccc,transparent 60%)}
  .title-copy{left:11%;top:9%}.main-title{font-size:110px;letter-spacing:7px;margin:26px 0}.main-title>span:nth-child(2){margin-left:40px}.main-title em{font-size:14px;padding:10px 6px;bottom:12px}
  .title-poem{font-size:17px;letter-spacing:2px;line-height:2;margin-bottom:27px}.eyebrow{font-size:9px;letter-spacing:3px}.eyebrow i{width:27px}.primary-button{font-size:21px;min-width:193px;padding:15px 23px;letter-spacing:3px}.primary-button span{padding-left:15px}.title-actions{gap:21px}.text-button{font-size:14px;letter-spacing:1px}
  .title-hint{font-size:9px;letter-spacing:1px;margin-top:20px}.vertical-verse{right:7%;top:10%;font-size:14px;letter-spacing:7px;padding-right:7px;opacity:.8}.title-bottom{left:8%;bottom:28px;font-size:9px}
  .scene-heading{left:6%;top:3%;padding:12px 16px;border-left-width:2px}.scene-heading h1{font-size:22px;letter-spacing:2px;margin:8px 0}.scene-heading p{font-size:11px;letter-spacing:0}.scene-heading>span{font-size:8px;letter-spacing:3px}
  .is-playing:is(.outside,.gate,.report) .scenery{top:65px;bottom:170px;background-position:54% top}
  .is-playing:is(.outside,.gate,.report) .scene-wash{background:linear-gradient(0deg,#3b3028 13%,#3b302800 47%)}
  .is-playing:is(.outside,.gate,.report) .scene-heading{top:135px;padding:10px 14px;background:#f3e7d2e0}
  .is-playing:is(.outside,.gate,.report) .scene-heading h1{font-size:20px;margin:6px 0 0}.is-playing:is(.outside,.gate,.report) .scene-heading p{display:none}
  .dialogue-wrap{left:4%;right:4%;bottom:47px}.dialogue-meta{margin:0 1px 9px;gap:7px;font-size:9px;letter-spacing:1px}.dialogue-meta>span{padding:8px 10px}.dialogue-meta button{font-size:10px;padding:8px 10px;min-height:33px}
  .dialogue-box{padding:20px 23px 16px;min-height:238px}.name-row{gap:10px;margin-bottom:13px}#speaker{font-size:20px;padding:6px 12px;letter-spacing:2px;min-width:84px}#speakerTag{font-size:7px;letter-spacing:1px}.name-line{width:37px}
  .dialogue-text{font-size:19px;line-height:1.8;letter-spacing:1px;min-height:106px}.dialogue-bottom{font-size:9px;margin-top:12px}.progress-track{margin:5px 4px 0}.play-footer{left:6%;right:6%;bottom:24px;color:#dfcdb2}
  .portrait{bottom:234px;right:-4%;height:43%;max-height:365px}.portrait.subordinate{left:0;right:auto;height:33%;max-height:280px}
  .scan-panel{top:24%;padding:15px}.prop-focus{top:26%;width:205px;left:16%}
  .is-playing:is(.outside,.gate,.report) .prop-focus{top:30%;width:165px;left:5%!important}
  .ending-screen{inset:80px 0 0;padding:20px 8% 30px}.ending-screen h1{font-size:54px;letter-spacing:7px}.ending-screen p{font-size:18px}.next-mission{padding:20px 15px}.next-mission strong{font-size:20px}.ending-actions{gap:19px}.ending-actions .primary-button{min-width:161px;padding:14px 18px}.ending-actions .text-button{font-size:14px}
  dialog{padding:28px;width:91vw;border-radius:3px}.modal-head h2{font-size:26px}.setting-row{gap:10px}.setting-row label{font-size:18px}.toast{font-size:15px}
}
@media(max-width:370px){
  .topbar{padding:0 5%}.brand{font-size:16px;gap:8px}.top-button{font-size:10px;padding:8px 5px}.skip{padding:8px 7px!important}
  .title-copy{left:10%;top:7%}.main-title{font-size:94px}.primary-button{min-width:171px;font-size:19px;padding:14px 20px}.title-actions{gap:15px}.title-poem{font-size:16px}
  .dialogue-box{padding:18px 21px;min-height:228px}.dialogue-text{font-size:18px}.vertical-verse{right:6%;font-size:13px}.title-hint{letter-spacing:0}.dialogue-meta{gap:4px}
}
@media(max-width:799px) and (max-height:720px){
  .is-playing:is(.outside,.gate,.report) .scenery{bottom:140px}
  .is-playing:is(.outside,.gate,.report) .scene-heading{top:85px;padding:8px 12px}.is-playing:is(.outside,.gate,.report) .scene-heading>span{display:none}.is-playing:is(.outside,.gate,.report) .scene-heading h1{font-size:18px;margin:0}
  .portrait{height:40%;bottom:234px}.portrait.subordinate{height:31%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}