@import url("./lib/controls.css");
:root{--paper:#ece3c8;--gold:#d1b47c;--line:rgba(212,175,115,.30);--pane:#152421;--serif:"Noto Serif SC","Songti SC","STSong","SimSun","Playfair Display",Georgia,serif;color-scheme:dark;font-family:var(--serif);color:var(--paper)}
*{box-sizing:border-box}html,body{height:100%;margin:0;overscroll-behavior:none}.desktop{overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 48%,#23322d 0%,#121d1c 41%,#0d1616 79%);isolation:isolate}.desktop:before{content:"";position:fixed;inset:13px;border:1px solid #b09d7324;pointer-events:none}.desktop:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.38' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.outer-mark{position:fixed;bottom:33px;left:33px;font:9px Georgia;letter-spacing:.25em;color:#b79d6899;display:flex;align-items:center;gap:12px}.outer-mark.right{left:auto;right:33px}.outer-mark i{width:24px;border-top:1px solid #b79d6866}
#terminal{position:relative;isolation:isolate;width:min(430px,100vw);height:min(900px,calc(100dvh - 26px));overflow:hidden;border:1px solid #9d8357;border-radius:23px;box-shadow:0 0 0 3px #332e24,0 0 0 4px #76623b80,0 18px 85px #000a,inset 0 0 28px #0008;background:#142321;display:flex;flex-direction:column}
#terminal:after{content:"";position:absolute;inset:6px;border:1px solid #ceae6a43;border-radius:17px;pointer-events:none;z-index:5}
#scene,.glass-shade,#weather-layer,#overlay{position:absolute;inset:0;pointer-events:none}.glass-shade{z-index:-3;background:linear-gradient(180deg,#09141796 0%,#0b171b88 21%,transparent 41%,transparent 75%,#101a17a6),radial-gradient(ellipse at center bottom,rgba(212,122,69,.22),transparent 38%)}#scene{z-index:-4;background:linear-gradient(#0b1316,#122024,#1a2621) center/cover}#scene:before{content:"";position:absolute;inset:0;background:url("./assets/conservatory.svg") center/100% 100% no-repeat}#weather-layer{z-index:-2;overflow:hidden}#overlay{z-index:-1}#overlay iframe{width:100%;height:100%;border:0;pointer-events:none}
.mast{text-align:center;padding:calc(22px + env(safe-area-inset-top,0px)) 25px 0;text-shadow:0 2px 12px #061012}.status{display:flex;align-items:center;gap:12px;color:#d3c7a5;font:10px/1.2 Georgia,var(--serif);letter-spacing:.12em}.status b{font-weight:400}.pilot{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:100%;background:#e1b568;box-shadow:0 0 9px #e6a94a}.rule{flex:1;border-top:1px solid #ccb78650}.status time{font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.14em}.title-sigil{color:#c4a670;display:flex;align-items:center;justify-content:center;gap:9px;margin:clamp(8px,2.1vh,22px) 0 5px}.title-sigil i{width:32px;height:1px;background:linear-gradient(90deg,transparent,#a88c59)}.title-sigil i:last-child{transform:rotate(180deg)}.eyebrow,.plate,.dock-caption,.app-no{font:9px/1.3 Georgia,serif;letter-spacing:.22em;color:var(--gold)}.mast h1{font-family:var(--serif);font-size:clamp(38px,6dvh,57px);font-weight:500;line-height:1.14;margin:7px 0 4px;color:#f4ead1;letter-spacing:.05em}.mast h1 span{font-size:.53em;margin:0 .2em}.mast h1 em{font-weight:400;letter-spacing:.015em}.subtitle{font-size:11px;color:#d7c7a3;display:flex;align-items:center;justify-content:center;gap:11px}.subtitle b{width:14px;border-top:1px solid #bc9c65}#whisper{min-height:40px;background:none;border:0;color:#e3d9bf;font:12px/1.6 var(--serif);max-width:100%;padding:8px 3px;text-shadow:0 1px 5px #07120f}
#field{position:relative;flex:1;min-height:0;margin:0 9px;touch-action:none;user-select:none;-webkit-user-select:none}.object{position:absolute;display:grid;place-items:center;align-content:center;width:100px;height:104px;background:transparent!important;border:0!important;appearance:none;touch-action:none;color:#fff2cc;filter:drop-shadow(0 3px 4px #05100cbf);padding:0;user-select:none;-webkit-touch-callout:none}.art{display:grid;place-items:center;width:75px;height:70px;pointer-events:none}.art img,.door img,.art iframe,.door iframe{width:100%;height:100%;object-fit:contain;border:0;pointer-events:none}.object .name,.dock-wrap button span:last-child{font:600 12px/1.5 var(--serif);letter-spacing:.08em}.object .name{padding:1px 7px;border:1px solid #b29a6255;background:linear-gradient(110deg,#15201deb,#172824e8);border-radius:2px;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.object small{font:7px/1.5 Georgia;letter-spacing:.13em;color:#e6d9b5;text-shadow:0 1px 3px #000,0 0 6px black}.object.lifted{z-index:6;filter:drop-shadow(0 5px 8px #d2a75c80);scale:1.04}.object.running:after{content:"";background:#d7bd77;width:5px;height:5px;border-radius:50%;position:absolute;right:11px;top:12px}.dust{position:absolute;border:2px dotted #eac975;border-radius:50%;width:24px;height:24px;pointer-events:none;animation:dust .6s ease-out forwards}@keyframes dust{to{transform:scale(3);opacity:0}}
.dock-wrap{margin:0 16px calc(13px + env(safe-area-inset-bottom,0px));position:relative}.dock-caption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:8px;letter-spacing:.23em;color:#e2c68d;padding:7px 0}.dock-caption i{width:27px;border-top:1px solid #ccae6b75}.dock-caption span{font-size:10px}#dock{display:grid;grid-template-columns:1fr 1.4fr 1fr;height:72px;border:1px solid #ad8c56;border-radius:10px;background:linear-gradient(175deg,#35443af0 0%,#172620ed 30%,#192720f5 70%,#41382aef);box-shadow:inset 0 0 0 3px #17251d,inset 0 0 0 4px #a58a513d,0 7px 20px #080b0a80;backdrop-filter:blur(16px)}#dock button{color:#e5c993;border:0;background:none;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}#berth:before,#berth:after{content:"";width:1px;height:34px;background:#b69b6655;position:absolute;left:0;bottom:18px}#berth:after{left:auto;right:0}.dock-glyph,.key{display:block;height:29px;font:29px/1 Georgia}.key{width:31px}.door{display:block;width:56px;height:53px;margin-top:-6px}
#windows{position:absolute;inset:0;pointer-events:none;z-index:8}.window{pointer-events:auto;position:absolute;inset:clamp(12px,4.5vh,42px) 6px calc(7px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;background:#152522eF;border:1px solid #b29462;border-radius:13px;box-shadow:0 12px 50px #000a;backdrop-filter:blur(16px);animation:unfold .36s cubic-bezier(.22,1,.36,1);transform-origin:var(--origin,center)}.window.full{inset:0;border-radius:inherit;animation:train .5s cubic-bezier(.22,1,.36,1)}@keyframes unfold{from{transform:scale(.25);opacity:.2}}@keyframes train{from{transform:translateX(80%)}60%{transform:translateX(-1%)}}.window header,#sheet header{display:flex;align-items:center;gap:7px;padding:8px 10px;background:linear-gradient(125deg,#2b352c,#192b28);border-bottom:1px solid var(--line)}.window header strong{flex:1;font-weight:500}.window header button,#dismiss{font-size:19px;min-width:36px;height:33px}.window iframe{width:100%;flex:1;border:0;background:#17241f}.window[hidden],.toast[hidden]{display:none}#sheet{position:absolute;inset:0;width:min(394px,calc(100% - 26px));max-height:min(800px,88dvh);border:1px solid #ab8e5a;border-radius:13px;padding:0;color:var(--paper);background:#142520f7;backdrop-filter:blur(16px);box-shadow:0 12px 65px #0009;overscroll-behavior:contain}#sheet::backdrop{background:#06101199;backdrop-filter:blur(3px)}#sheet header{position:sticky;top:0;z-index:1;justify-content:space-between;padding:15px 18px}#sheet h2{font-size:23px;font-weight:500;margin:3px 0 0}#sheet-body{padding:17px 18px 22px}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.actions{margin-top:16px}.menu{display:grid;gap:9px}.art iframe{background:transparent}.custom-icon{max-width:100%;max-height:100%;aspect-ratio:1;object-fit:cover!important}.brass{border:3px double #bc9857!important;border-radius:50%}.cinnabar{border:3px double #b74636!important;border-radius:4px}.specimen{border:2px solid #bfdbd39c!important;border-radius:15px;box-shadow:0 0 10px #c1e1db55}.cropbox{width:160px;height:160px;display:block;touch-action:none;margin:10px auto;border:1px solid var(--gold);background:#0a1613}.preview-icon{display:grid;place-items:center;height:85px}.preview-icon>*{width:70px;height:70px;border:0}.mote{position:absolute;top:-7%;border-radius:50%;background:#c3dadd;animation:fall var(--duration) linear infinite;animation-delay:var(--delay);opacity:.55}.rain .mote{border-radius:0;height:15px!important;width:1px!important;transform:rotate(12deg)}.dusty .mote{background:#ffd076;box-shadow:0 0 5px #f8b849;animation-direction:reverse}@keyframes fall{to{translate:-22px 112vh}}
@media(max-width:600px){#terminal{width:100vw;height:100dvh;border:0;border-radius:0;box-shadow:none}.outer-mark,.desktop:before{display:none}#terminal:after{inset:4px;border-radius:4px}.mast{padding-top:max(14px,env(safe-area-inset-top))}}
@media(max-height:685px){.mast{padding-top:max(10px,env(safe-area-inset-top))}.title-sigil{margin:1px 0}.mast h1{font-size:34px;margin:2px 0}.art{height:55px;width:61px}.object{height:84px;width:90px}#dock{height:56px}.door{height:40px}.dock-wrap{margin-bottom:max(6px,env(safe-area-inset-bottom))}#whisper{min-height:29px}.dock-caption{padding:2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

#field{position:absolute;inset:7px 9px calc(108px + env(safe-area-inset-bottom,0px));margin:0;pointer-events:none}#field .object{pointer-events:auto}.dock-wrap{margin-top:auto}.mast{pointer-events:none}.mast #whisper{pointer-events:auto}@media(max-height:685px){#field{bottom:calc(78px + env(safe-area-inset-bottom,0px))}}

.seal-object {
  width: 100%;
  aspect-ratio: 116 / 108;
  position: relative;
  background: url("./assets/icons/seal.svg") center / contain no-repeat;
}
.seal-object::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 49%;
  width: 38%;
  aspect-ratio: 1;
  background: url("./assets/cunxin-qiangu.jpg") center / contain no-repeat;
  transform: rotate(7deg);
}