/* 布局：Shadow 画的梦境铺满屏幕，故事像织线一样往下长；梦里的人用气泡说话，裂痕从屏幕边缘长进来 */
:root{
  --night:#130f1b;     /* 梦外的夜 */
  --pane:#1b1625;      /* 浮层 */
  --edge:#3d3350;      /* 细线 */
  --fg:#efe7f0;        /* 正文 */
  --dim:#ada3b8;       /* 旁白 */
  --gold:#f3c27a;      /* 可点的字、按钮 */
  --rose:#f0a6c0;      /* 危险的粉 */
  --lilac:#b9a6e8;     /* 梦线 */
  --moss:#9cc7a6;      /* 成功 */
  --paper:#f3eadb;
  --ink:#3b2d2a;
  --display:"ZCOOL XiaoWei","Noto Serif SC","Songti SC",serif;
  --body:"Noto Serif SC","Songti SC","STSong",serif;
  --hand:"Ma Shan Zheng","Kaiti SC","STKaiti",cursive;
  color-scheme:dark;
}
html,body{min-height:100%}
body{margin:0;background:var(--night);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.95;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:0;padding-bottom:140px}
button{font:inherit}
.bgimg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:var(--night) center/cover no-repeat;transition:filter 1.6s ease,opacity .8s ease}
.bgimg::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(14,11,20,.15) 0%,rgba(14,11,20,.5) 30%,rgba(14,11,20,.82) 62%,rgba(14,11,20,.92) 100%)}
body.fading .bgimg{opacity:0}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto}
body::before{content:"";position:fixed;top:0;right:0;bottom:auto;left:0;height:env(safe-area-inset-top,0px);z-index:10;background:#110d18}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;padding-top:12px;padding-bottom:16px;background:linear-gradient(180deg,rgba(17,13,24,.97) 0%,rgba(17,13,24,.9) 72%,rgba(17,13,24,0) 100%)}
.bar .top{display:flex;align-items:center;justify-content:space-between;grid-gap:10px}
.logo{font-family:var(--display);font-size:19px;letter-spacing:.12em;color:var(--gold);white-space:nowrap}
.logo small{font-family:var(--body);font-size:12px;color:var(--dim);letter-spacing:.1em;margin-left:8px}
.tools{display:flex;grid-gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ghost{background:rgba(20,16,28,.6);border:1px solid var(--edge);color:var(--dim);font-size:12px;padding:4px 11px;border-radius:999px;cursor:pointer;line-height:1.6}
.ghost:hover,.ghost:focus-visible{color:var(--fg);border-color:var(--dim);outline:none}
.ghost[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.meter{display:flex;align-items:center;grid-gap:8px;margin-top:8px;font-size:11px;color:var(--dim);letter-spacing:.2em}
.meter i{width:22px;height:4px;border-radius:2px;background:rgba(185,166,232,.5)}
.meter i.cr{background:var(--rose);box-shadow:0 0 6px var(--rose)}

/* 故事 */
.story{padding-top:28vh}
.story p{margin:0 0 1.1em;text-shadow:0 1px 12px rgba(0,0,0,.95);animation:rise .7s ease both}
.story p.aside{color:var(--dim);font-size:14px}
.story p.danger{color:var(--rose)}
.story p.ok{color:var(--moss)}
.story h2{font-family:var(--display);font-weight:400;font-size:30px;color:var(--gold);margin:0 0 4px;letter-spacing:.1em;text-shadow:0 0 30px rgba(243,194,122,.35);animation:rise .7s ease both}
.story .room-no{font-size:12px;letter-spacing:.35em;color:var(--dim);margin:0 0 16px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.w{background:none;border:0;padding:0 1px;color:var(--gold);cursor:pointer;border-bottom:1px dashed rgba(243,194,122,.6);text-shadow:0 0 10px rgba(243,194,122,.55);line-height:inherit}
.w:hover,.w:focus-visible{color:#ffe0a8;outline:none;border-bottom-style:solid}
.w.used{color:#dcc6a3;text-shadow:none;border-bottom-color:rgba(220,198,163,.35)}
.acts{margin-top:8px;display:grid;grid-gap:12px}
.panel{background:rgba(24,19,33,.85);border:1px solid var(--edge);border-radius:10px;padding:16px;display:grid;grid-gap:12px;animation:rise .5s ease both}
.panel h4{margin:0;font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold)}
.msg{font-size:14px;color:var(--dim);min-height:1.4em}
.msg.ok{color:var(--moss)}.msg.bad{color:var(--rose)}

/* 气泡 */
.bub{display:flex;grid-gap:12px;align-items:flex-start;margin:0 0 16px;animation:rise .6s ease both}
.bub .av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(243,194,122,.5);background:#2a2233;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.bub .av.mask{object-position:50% 0;background:radial-gradient(circle,#3a3048,#1a1522)}
.bub .tx{position:relative;background:rgba(243,234,219,.94);color:var(--ink);border-radius:4px 14px 14px 14px;padding:8px 14px 10px;min-width:0;max-width:85%}
[hidden]{display:none!important}
.bub .tx .nm{display:block;font-family:var(--display);font-weight:400;font-size:13px;color:#8a5a4e;letter-spacing:.1em}
.bub .tx span b{font-weight:600;color:#7a2a40}
.bub .tx span{display:block;font-size:15px;line-height:1.75}
.bub.rabbit .tx{background:rgba(232,226,240,.94)}
.bub.queen .tx{background:rgba(250,222,226,.95)}
.bub.queen .tx .nm{color:#a3203b}
.bub.soldier .tx{background:rgba(250,240,240,.95)}
.choices{display:grid;grid-gap:8px}
.choices button{text-align:left;background:rgba(24,19,33,.85);border:1px solid var(--edge);color:var(--fg);border-radius:10px;padding:10px 14px;cursor:pointer;line-height:1.6}
.choices button:hover,.choices button:focus-visible{border-color:var(--gold);color:#fff;outline:none}
.choices button::before{content:"› ";color:var(--gold)}

/* 传话卡 / 梦里的纸条 */
.card{margin:6px 0 18px;background:var(--paper);color:var(--ink);border-radius:3px;position:relative;box-shadow:0 18px 40px -18px #000;animation:rise .7s ease both}
.card::before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px dashed rgba(59,45,42,.25);pointer-events:none}
.card .ch{display:flex;justify-content:space-between;align-items:center;grid-gap:10px;padding:12px 16px 0;font-size:12px;letter-spacing:.2em;color:rgba(59,45,42,.6)}
.card pre{white-space:pre-wrap;font-family:var(--body);font-size:15px;line-height:1.8;margin:0;padding:8px 18px 18px;text-shadow:none}
.card.dress{background:#ebe0dd}
.note{margin:6px 0 18px;background:#e9dcc4;color:var(--ink);padding:14px 18px 16px;font-family:var(--hand);font-size:20px;line-height:1.75;transform:rotate(-.6deg);box-shadow:0 18px 40px -18px #000;white-space:pre-wrap;animation:rise .7s ease both;clip-path:polygon(0 2%,6% 0,40% 1.5%,72% 0,100% 2%,99% 97%,70% 100%,35% 98%,0 100%)}
.note small{display:block;font-family:var(--body);font-size:11px;letter-spacing:.25em;color:#8b7a66;margin-bottom:4px}
.copy{background:var(--ink);color:var(--paper);border:0;font-size:12px;letter-spacing:.1em;padding:6px 12px;border-radius:999px;cursor:pointer;position:relative;z-index:1;flex:none}
.btn{background:var(--gold);color:#1d1408;border:0;font-weight:600;padding:10px 20px;border-radius:999px;cursor:pointer}
.btn.soft{background:rgba(20,16,28,.6);color:var(--gold);border:1px solid rgba(243,194,122,.7);font-weight:400}
.btn:disabled{opacity:.35;cursor:default}
.btn:focus-visible,.copy:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.row{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center}
label{display:block;font-size:13px;color:var(--dim);letter-spacing:.08em;margin:0 0 6px}
input[type=text]{background:rgba(20,16,28,.85);border:1px solid var(--edge);color:var(--fg);font:inherit;padding:9px 12px;border-radius:6px;width:100%;min-width:0;box-sizing:border-box}
input:focus{outline:none;border-color:var(--gold)}
.row input{flex:1 1 150px;width:auto}
.seg{display:flex;grid-gap:8px;flex-wrap:wrap}
.seg button{flex:1 1 120px;background:rgba(24,19,33,.8);border:1px solid var(--edge);color:var(--fg);padding:9px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--rose);color:var(--rose)}

/* 裂痕 */
#cracks{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;width:100%;height:100%}
#cracks path{fill:none;stroke:rgba(255,240,250,.75);stroke-width:1.4;filter:drop-shadow(0 0 3px rgba(240,166,192,.9));stroke-dasharray:var(--len);stroke-dashoffset:0;animation:grow 1.2s ease-out both}
@keyframes grow{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.shatter{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;background:rgba(255,245,250,.0);animation:flash 1.6s ease both;display:grid;place-items:center}
.shatter span{font-family:var(--display);font-size:30px;color:#fff;letter-spacing:.3em;text-shadow:0 0 20px var(--rose)}
@keyframes flash{0%{background:rgba(255,245,250,0)}8%{background:rgba(255,245,250,.85)}30%{background:rgba(20,10,20,.9)}100%{background:rgba(20,10,20,0)}}
.shake{animation:shake .5s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,3px)}}

/* 梦的线头 */
.thread{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;grid-gap:8px;background:rgba(24,19,33,.9);border:1px solid var(--lilac);color:var(--lilac);border-radius:999px;padding:8px 14px 8px 10px;cursor:pointer;font-size:13px;box-shadow:0 0 18px rgba(185,166,232,.35)}
.thread svg{width:22px;height:22px}

.hint{border-left:2px solid var(--lilac);padding:4px 0 4px 12px;margin:8px 0;color:var(--fg)}
.hint small{display:block;color:var(--dim);font-size:11px;letter-spacing:.2em}

/* 小游戏 */
.arena{position:relative;height:300px;border-radius:8px;background:radial-gradient(ellipse at 50% 70%,rgba(185,166,232,.18),rgba(0,0,0,.5));border:1px solid var(--edge);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.arena .it{position:absolute;cursor:pointer;width:64px;height:64px;display:grid;place-items:center;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.arena .it svg{width:100%;height:100%}
.hud{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.hud b{color:var(--gold);font-weight:600}
.potions{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px}
.potions button{background:rgba(24,19,33,.8);border:1px solid var(--edge);border-radius:8px;padding:10px 4px;cursor:pointer;color:var(--fg);font-size:13px}
.potions button:hover{border-color:var(--gold)}
.potions svg{width:46px;height:70px;display:block;margin:0 auto 4px}
.height{display:flex;align-items:flex-end;grid-gap:14px}
.ruler{position:relative;width:34px;height:170px;border-left:2px solid var(--dim);flex:none}
.ruler .me{position:absolute;left:4px;bottom:0;width:24px;background:linear-gradient(var(--rose),#a35d78);border-radius:12px 12px 2px 2px;transition:height .6s ease}
.ruler .door{position:absolute;left:-2px;bottom:0;width:34px;height:25px;border:1px dashed var(--gold);border-bottom:0}
.big{font-family:var(--display);font-size:36px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.dial{display:flex;grid-gap:10px;justify-content:center;flex-wrap:wrap}
.dial .col{display:flex;flex-direction:column;align-items:center;grid-gap:4px}
.dial .col button{background:rgba(24,19,33,.8);border:1px solid var(--edge);color:var(--dim);width:48px;height:30px;border-radius:4px;cursor:pointer}
.dial .d{width:48px;height:56px;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:#2a1c10;background:linear-gradient(#a8783f,#e2b071 45%,#e2b071 55%,#8c6031);border-radius:4px;font-variant-numeric:tabular-nums}
.dial .sep{align-self:center;font-family:var(--display);font-size:28px;color:var(--gold)}
.line{display:flex;grid-gap:6px;justify-content:center;flex-wrap:wrap}
.pc{width:52px;height:74px;border-radius:5px;background:#f6efe4;color:#a3203b;display:grid;place-items:center;font-family:var(--display);font-size:18px;box-shadow:0 6px 12px rgba(0,0,0,.5);line-height:1.1;text-align:center}
.pc.blk{color:#222}.pc.me{outline:2px solid var(--gold);outline-offset:2px;background:#ffe9ef}

/* 浮层 */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:rgba(0,0,0,.78);overflow:auto;animation:fadein .3s ease;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{max-width:520px;margin:0 auto;background:var(--pane);border:1px solid var(--edge);border-radius:8px;padding:20px;box-shadow:0 30px 80px -20px #000}
.sheet h3{font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold);margin:0 0 10px}
.sheet p{margin:0 0 .8em}
.dim{color:var(--dim);font-size:14px}
.close{display:flex;justify-content:flex-end;margin:-6px -6px 4px}
.inv{display:flex;grid-gap:8px;align-items:center;flex-wrap:wrap;margin-top:24px}
.inv .lbl{font-size:11px;color:var(--dim);letter-spacing:.25em}
.chip{background:rgba(24,19,33,.8);border:1px solid var(--edge);color:var(--fg);font-size:13px;padding:3px 12px;border-radius:999px}

/* 工作室 */
.studio{padding-top:12px}
.studio h1{font-family:var(--display);font-weight:400;font-size:34px;font-size:clamp(34px,8vw,52px);color:var(--gold);margin:4px 0 0;letter-spacing:.12em;text-align:center;text-shadow:0 0 34px rgba(243,194,122,.4)}
.studio .sub{color:#e6dcef;text-align:center;margin:4px auto 12px;max-width:24em;font-size:15px;text-shadow:0 1px 10px #000,0 0 18px #000}
.frame{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -30px #000,0 0 0 1px var(--edge)}
.frame svg{display:block;width:100%;height:auto}
.bottle{cursor:pointer}
.bottle.locked{cursor:default}
.bottle .glow{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.ids{display:grid;grid-gap:10px}
.ids button{text-align:left;background:rgba(24,19,33,.85);border:1px solid var(--edge);border-radius:10px;padding:12px 14px;color:var(--fg);cursor:pointer}
.ids button:hover,.ids button[aria-pressed=true]{border-color:var(--gold)}
.ids b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--gold);display:block}
.ids span{font-size:13px;color:var(--dim);line-height:1.6}
.ches{position:relative;width:80%;max-width:300px;margin:4px auto 16px;aspect-ratio:1536/1024}
.ches img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}
.ches .body{animation:vanish 4s ease 1.2s forwards}
.ches .face{clip-path:circle(17% at 31% 34%);animation:grin 4s ease 1.2s forwards}
@keyframes vanish{to{opacity:0}}
@keyframes grin{0%{opacity:1}70%{opacity:1;clip-path:circle(17% at 31% 34%)}100%{opacity:.85;clip-path:circle(12% at 31% 36%)}}
.postcard{position:relative;background:#f4ead8;color:var(--ink);padding:10px 10px 12px;border-radius:3px;box-shadow:0 18px 40px -16px #000;transform:rotate(-1deg)}
.postcard .pimg{background:#222 center/cover no-repeat;border-radius:2px;width:100%;margin:0 auto}
.postcard .pmeta{display:grid;grid-gap:2px;padding:8px 4px 0}
.postcard .pmeta b{font-family:var(--display);font-weight:400;font-size:17px;color:#7a2a40}
.postcard .pmeta span{font-size:12px;color:#8b7a66;letter-spacing:.1em}
.postcard .pmeta em{font-family:var(--hand);font-style:normal;font-size:19px;line-height:1.5}
.postcard .pcrack{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}
.postcard .pcrack path{fill:none;stroke:rgba(80,50,60,.55);stroke-width:.5}
.wall{margin-top:16px;display:grid;grid-gap:10px}
.studio .frame{position:relative}
.tap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;text-align:center;font-size:13px;color:#f6e7c8;background:linear-gradient(transparent,rgba(10,8,14,.85));letter-spacing:.08em}
.tap.bad{color:var(--rose)}
.cork{position:relative;margin:14px auto 0;width:100%;max-width:420px;aspect-ratio:1447/984;background:var(--cork) center/100% 100% no-repeat;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6))}
.corkin{position:absolute;left:7.5%;right:9.5%;top:13%;bottom:11%;overflow:auto;padding:6px 4px}
.corkin .minis{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));grid-gap:12px 10px}
.corkin .mini{position:relative;padding:4px 4px 3px}
.corkin .mini::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd6e0,#c0485a);box-shadow:0 2px 3px rgba(0,0,0,.5);z-index:1}
.corkin .mcap{font-size:10px}
.corkempty{height:100%;display:grid;place-items:center;text-align:center;font-family:var(--hand);font-size:16px;font-size:clamp(16px,8vw,22px);color:#6b3f22;line-height:1.5}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));grid-gap:10px}
.mini{background:#f4ead8;border:0;padding:5px 5px 4px;border-radius:2px;cursor:pointer;box-shadow:0 8px 16px -8px #000;display:grid;grid-gap:3px;transition:transform .2s}
.mini:nth-child(odd){transform:rotate(-2deg)}.mini:nth-child(even){transform:rotate(1.5deg)}
.mini:hover,.mini:focus-visible{transform:rotate(0) scale(1.05);outline:none}
.mpic{display:block;aspect-ratio:3/4;background:#222 center/cover no-repeat}
.mcap{font-size:11px;color:#7a2a40;font-family:var(--display);line-height:1.3}
.watchp{position:relative;width:56%;max-width:200px;margin:0 auto 16px}
.watchp img{width:100%;display:block}
.watchp svg{position:absolute;left:12.5%;top:16%;width:47%;height:auto}
.props{display:flex;grid-gap:14px;justify-content:center;align-items:flex-end;margin:0 0 16px}
.props img{width:38%;max-width:140px;height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.note.page{background-size:100% 100%;background-color:transparent;clip-path:none;padding:30px 30px 34px}
.bottlelbl{position:relative;width:38%;max-width:140px}
.bottlelbl img{width:100%!important}
.bottlelbl span{position:absolute;left:18%;right:22%;top:52%;text-align:center;font-family:var(--hand);color:#4a3622;font-size:14px;font-size:clamp(14px,8vw,20px);line-height:1.1}
.bottlelbl small{font-size:.6em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;grid-gap:2px;background:rgba(28,22,36,.85);border:1px solid var(--edge);border-radius:10px;padding:10px 8px 12px;color:var(--fg);cursor:pointer;text-align:center;min-width:0;transition:border-color .2s,transform .2s}
.tile:hover,.tile:focus-visible{border-color:var(--gold);transform:translateY(-2px);outline:none}
.tile img{display:block;height:84px;width:100%;object-fit:contain;margin:0 0 4px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.tile .n{display:block;font-family:var(--display);font-size:16px;color:var(--gold);line-height:1.4}
.tile .d{display:block;font-size:12px;color:var(--dim);line-height:1.55}
.ringgame{position:relative;height:220px;display:grid;place-items:center}
.ringgame .target{width:96px;height:96px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-size:34px;color:var(--gold);background:rgba(243,194,122,.08);cursor:pointer;touch-action:manipulation}
.ringgame .ring{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:3px solid #fff3d6;pointer-events:none}
.rules{color:#2b1d14;padding:9% 9% 9%;margin:6px 0 18px;background:var(--grid) center/100% 100% no-repeat;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));animation:rise .7s ease both}
.rules .rt{text-align:center;font-family:var(--display);font-size:20px;letter-spacing:.5em;margin-bottom:8px;color:#5a1a14}
.rules .rl{display:flex;grid-gap:10px;font-size:15px;line-height:1.9}
.rules .rl b{font-family:var(--display);color:#5a1a14;flex:none}
.rules s.scr{display:inline-block;color:#1a1210;text-decoration:none;background:#1a1210;letter-spacing:-.4em;opacity:.85;transform:rotate(-1deg);margin-right:6px;max-width:5.5em;overflow:hidden;vertical-align:middle;height:1em}
.rules em{font-style:normal;font-family:var(--hand);color:#b0201a;font-size:18px}
.rules .rs{text-align:right;font-family:var(--hand);color:#b0201a;font-size:15px;margin-top:6px}
.bub.window .av{border-radius:6px;border-color:#6b4a2e}
.bub.window .tx{background:rgba(222,216,204,.92)}
.bub.radio .av{background:#2a1c14;object-fit:contain}
.bub.radio .tx{background:rgba(240,225,190,.94);font-family:var(--hand)}
.cand{position:relative;height:150px;display:grid;place-items:center}
.cand img{height:130px;width:auto;filter:drop-shadow(0 0 18px rgba(255,190,90,.6));transition:transform .2s}
.cand img.gust{transform:skewX(-10deg) translateX(6px);filter:drop-shadow(0 0 4px rgba(255,190,90,.3))}
.wind{text-align:center;font-size:19px;letter-spacing:1px;padding:10px 8px;margin:8px 0;border-radius:8px;background:rgba(0,0,0,.3);transition:background .2s,color .2s}
.wind.warn{color:#ffd27a;background:rgba(243,194,122,.18)}
.wind.gust{color:#ff8fa8;background:rgba(224,48,74,.22)}
.wind.after{color:var(--moss);background:rgba(120,170,120,.15)}
.wind.calm{color:var(--dim)}
.btn.big{flex:1;padding:16px}
.btn.hold.on{background:#f3c27a;color:#1d1408}
.leaf{position:absolute;top:6px;right:8px;font-size:13px;color:var(--dim);transition:color .2s}
.leaf.on{color:var(--rose);font-weight:600}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:8px}
.tab{position:relative;background:var(--tablet) center/100% 100% no-repeat;border:0;border-radius:0;color:#f6dfa6;padding:26% 0 34%;text-shadow:0 1px 0 #000;cursor:pointer;font-family:var(--display);font-size:16px;line-height:1.25;box-shadow:inset 0 0 0 3px rgba(240,200,140,.15)}
.tab.picked{filter:drop-shadow(0 0 6px var(--gold))}
.bills{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:6px}
.tile.bill{background:var(--bill) center/100% 100% no-repeat;border:0;border-radius:0;padding:18px 0 22px}
.tile.bill .n{color:#5a1a14;font-size:17px;line-height:1.3}
.tile.bill.picked{filter:drop-shadow(0 0 6px var(--moss))}
.tab .badge,.tile .badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--moss);color:#0c1410;font-size:12px;display:grid;place-items:center;font-family:var(--body)}
.tile.picked{border-color:var(--moss)}
.newtab{width:84px;margin:0 auto 16px;background:var(--tablet) center/100% 100% no-repeat;padding:30px 0 52px;text-align:center;font-family:var(--display);font-size:17px;line-height:1.25;color:#f4e0b0;text-shadow:0 2px 0 rgba(0,0,0,.6);animation:rise 1s ease both}
.hand-mirror{position:relative;width:50%;max-width:180px;aspect-ratio:1;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:8px solid #a07a3a;box-shadow:0 0 0 2px #3b2a14,0 16px 30px -12px #000}
.hand-mirror{background:#1a1418}
.hand-mirror img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 48%);filter:contrast(1.15)}
.hand-mirror .hm-glass{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),transparent 50%)}
.hm2{position:relative;width:46%;max-width:170px;margin:0 auto 16px}
.hm2f{position:relative;width:100%;display:block;z-index:1}
.hm2g{position:absolute;left:10%;top:5%;width:80%;height:52%;border-radius:50%;overflow:hidden;background:#cfd2d4;z-index:2}
.hm2g img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 48%);opacity:.9;mix-blend-mode:multiply}
.callbox{min-height:2.4em;text-align:center;font-family:var(--hand);font-size:20px;color:var(--dim);transition:color .2s}
.callbox.on{color:var(--rose);text-shadow:0 0 10px rgba(240,166,192,.6)}
.des{display:inline-block;width:60px;height:5px;border-radius:3px;background:rgba(240,166,192,.18);overflow:hidden;vertical-align:middle}
.des b{display:block;height:100%;background:linear-gradient(90deg,#f0a6c0,#e0304a);box-shadow:0 0 6px #e0304a}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px}
.gcell{display:grid;grid-gap:6px;min-width:0}
.ptr{position:relative;border:3px solid #8a6a3e;border-radius:3px;box-shadow:0 0 0 2px #2b1d10,0 10px 18px -8px #000;background:#120c0c;overflow:hidden}
.ptr img{display:block;width:100%;height:auto}
.ptr svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.pupil{fill:#140808;transition:cx .25s ease,cy .25s ease,opacity .8s ease}
.ptr.stare .pupil{fill:#3a0000}
.ptr.sleep .pupil{opacity:0}
.yr{background:#c9a46a;color:#2a1c10;border:0;border-radius:3px;padding:3px 0;font-family:var(--display);font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums}
.mir{position:relative;aspect-ratio:3/4;width:80%;max-width:260px;margin:4px auto 14px;border-radius:50%/40%;overflow:hidden;border:6px solid #6b4f2a;background:radial-gradient(circle at 40% 35%,#4b4f5c,#15171d)}
.mir .fig{position:absolute;left:18%;bottom:0;height:88%;opacity:.16;filter:brightness(0) blur(1.5px);animation:ghostin 3s ease both}
@keyframes ghostin{0%{opacity:0}40%{opacity:.22}100%{opacity:.12}}
.bub.ghost .av{opacity:.75}
.mirr{cursor:pointer}
.end{text-align:center;padding:18px 0}
.end .bigt{font-family:var(--display);font-size:30px;color:var(--gold);letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){.ches .body,.ches .face{animation:none}.story p,.story h2,.card,.note,.bub,.modal,.panel{animation:none}#cracks path{animation:none}.bottle .glow{animation:none}.shake{animation:none}}

/* ---- 梦境四 ---- */
.bub.cpy .tx{background:rgba(246,236,222,.95)}
.bub.cpy.dark .av{filter:saturate(.6)}
.bub.cpy.dark .tx{background:rgba(196,196,206,.92)}
.bub.cpy.dark .tx .nm{color:#4a4a5a}
.bub.mirr{justify-content:flex-end}
.bub.mirr .av{border-color:rgba(200,214,232,.7);background:#c8d0da}
.bub.mirr .tx{background:rgba(214,224,236,.92);border-radius:14px 4px 14px 14px;font-style:italic}
.bub.mirr .tx .nm{color:#5a6a82}
.lyric{text-align:center;margin:6px 0 20px;font-family:var(--display);font-size:20px;line-height:1.6;color:#e8eef8;letter-spacing:.08em;text-shadow:0 0 18px rgba(185,200,232,.6),0 1px 10px #000;animation:rise 1.2s ease both}
.lyric small,.lyr small{display:block;font-family:Georgia,serif;font-style:italic;font-size:11px;letter-spacing:.04em;color:rgba(220,228,240,.45);margin-top:2px}
.figure{display:flex;justify-content:center;margin:0 0 14px}
.figure img{width:62%;max-width:240px;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.figure.dark img{filter:drop-shadow(0 0 20px rgba(120,120,160,.5))}
.sticky{position:relative;width:86%;max-width:300px;margin:6px auto 18px;background:var(--sticky) center/100% 100% no-repeat;color:#3a2a1c;padding:26px 28px 34px;animation:rise .7s ease both;filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.sticky small{display:block;font-size:11px;color:#8a6a4e;letter-spacing:.2em;margin-bottom:6px}
.sticky .rev{font-family:var(--hand);font-size:19px;line-height:1.7;white-space:pre-wrap;transform:scaleX(-1);text-align:right}
.clockwrap{display:flex;justify-content:center;margin:0 0 18px}
.mclock{width:60%;max-width:210px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.hallgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:4px;width:100%;max-width:250px;margin:0 auto;transition:transform .6s}
.hallgrid.flip{transform:scaleY(-1)}
.hallgrid.flip .hc{transform:scaleY(-1)}
.hc{position:relative;aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,rgba(220,230,245,.18),rgba(120,130,160,.1));border:1px solid rgba(220,230,245,.15);display:grid;place-items:center;font-family:var(--display);color:var(--gold)}
.hc.cl img{position:absolute;left:10%;top:5%;width:80%;height:90%;object-fit:contain;opacity:.92}
.hc.ex{background:rgba(243,194,122,.2);border-color:var(--gold)}
.hc .me{position:absolute;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,#fff,#f3c27a);box-shadow:0 0 14px #f3c27a}
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-gap:6px;justify-content:center}
.dpad button{height:52px;border-radius:10px;border:1px solid var(--edge);background:rgba(40,32,52,.9);color:var(--gold);font-size:22px;cursor:pointer}
.ewall{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;padding:12px;border-radius:8px;background:var(--cork) center/cover}
.ecard{position:relative;border:0;background:var(--memcard) center/100% 100% no-repeat;color:#3a2a1c;font-family:var(--hand);font-size:14px;line-height:1.5;padding:14px 12px 16px;text-align:left;cursor:pointer;transform:rotate(-1deg);transition:transform .2s;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.ecard:nth-child(even){transform:rotate(1.2deg)}
.ecard.on{outline:2px solid #c0303a;outline-offset:2px}
.ecard.neat{font-family:var(--body);font-size:13px;letter-spacing:.04em}
.ecard .epin{position:absolute;top:-14px;left:50%;width:22px;margin-left:-11px}
.pages{display:grid;grid-gap:8px}
.pg{position:relative;text-align:left;border:0;border-radius:3px;background:#efe3c8;color:#3a2a1c;font-family:var(--hand);font-size:16px;line-height:1.6;padding:10px 14px;cursor:pointer;box-shadow:0 6px 12px -6px #000}
.pg.neat{font-family:var(--body);font-size:14px;background:#f8f4ec;letter-spacing:.05em}
.pg.picked{outline:2px solid var(--moss)}
.pg .badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--moss);color:#0c1410;font-size:12px;display:grid;place-items:center;font-family:var(--body)}
.mframe{position:relative;width:56%;max-width:200px;aspect-ratio:3/4.4;margin:0 auto 16px;border-radius:48% 48% 6px 6px/22% 22% 6px 6px;padding:10px;background:linear-gradient(#efe6d6,#c9bba0);box-shadow:0 0 0 2px #8a7a5e,0 18px 30px -12px #000}
.mglass{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:radial-gradient(circle at 40% 30%,#c9d3df,#8e9bab)}
.mglass .mta{position:absolute;top:6%;right:0;bottom:0;left:0;width:100%;height:94%;object-fit:contain;opacity:.85;transition:opacity .3s,filter .3s}
.mglass .mcl{position:absolute;left:-6%;top:-4%;width:112%;height:110%;object-fit:fill;transition:transform .45s ease;transform-origin:50% 0}
.mframe.open .mcl{transform:translateY(-82%) scaleY(.25)}
.mframe.lag .mta{filter:drop-shadow(0 0 12px #fff) brightness(1.15);opacity:1}
.mline{text-align:center;min-height:3.4em;font-size:15px;line-height:1.7;color:var(--dim)}
.mline.lag b{color:#e8eef8;text-shadow:0 0 10px rgba(200,214,240,.8)}
.lyr{text-align:center;min-height:1.6em;font-family:var(--display);color:#dfe6f2;font-size:16px}
.bmirror{position:relative;width:64%;max-width:220px;aspect-ratio:3/4.2;margin:0 auto;border-radius:46% 46% 8px 8px/20% 20% 8px 8px;background:radial-gradient(circle at 40% 30%,#d4dde8,#7d8a9c);border:8px solid #e3d8c4;box-shadow:0 0 0 2px #8a7a5e,0 16px 28px -12px #000;overflow:hidden}
.bmirror::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M50 70 L20 30 M50 70 L80 26 M50 70 L18 100 M50 70 L84 96 M50 70 L52 130 M50 70 L50 10' stroke='white' stroke-width='.8' fill='none'/%3E%3C/svg%3E") center/100% 100%;opacity:0;transition:opacity .4s}
.bmirror.c1::before{opacity:.35}.bmirror.c2::before{opacity:.6}.bmirror.c3::before{opacity:.9}
.bpt{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.15);cursor:pointer;transition:all .15s}
.bpt.lit{background:#fff;box-shadow:0 0 22px 8px rgba(255,255,255,.85),0 0 40px rgba(185,166,232,.9);transform:scale(1.15)}

.btn.cue{animation:cue .7s ease-in-out infinite alternate;border-color:var(--gold);color:var(--gold)}
@keyframes cue{from{box-shadow:0 0 0 0 rgba(243,194,122,.0)}to{box-shadow:0 0 0 6px rgba(243,194,122,.35)}}
#mb:not(.open) .mta{opacity:0}
.finale{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 34px) 18px 80px;text-align:center}
.finale h1{font-family:var(--display);font-weight:400;font-size:32px;font-size:clamp(32px,8vw,46px);color:var(--gold);margin:6px 0 20px;letter-spacing:.12em;text-shadow:0 0 30px rgba(243,194,122,.4);animation:rise 1s ease both}
.fin-k{font-size:12px;letter-spacing:.4em;color:var(--dim)}
.fin-album{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;margin:0 auto 22px;max-width:360px}
.fin-pc{position:relative;background:#f4ead8;padding:7px 7px 6px;border-radius:2px;box-shadow:0 14px 26px -12px #000;display:grid;grid-gap:5px;transform:rotate(calc((var(--d) - 2.5) * 2deg));animation:rise .9s ease both;animation-delay:calc(var(--d) * .25s)}
.fin-pc .mpic{display:block;aspect-ratio:3/4;background-size:cover}
.fin-pc .mcap{font-family:var(--hand);font-size:13px;color:#7a2a40}
.fin-pc.cr::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L14 28 L10 42 L24 50 M100 70 L84 64 L88 52 L74 46' stroke='white' stroke-width='1' fill='none'/%3E%3C/svg%3E") center/100% 100%;opacity:.8}
.fin-end{display:grid;grid-gap:2px;margin:0 0 26px;animation:rise 1s ease both;animation-delay:1s}
.fin-end small{font-size:12px;letter-spacing:.4em;color:var(--dim)}
.fin-end b{font-family:var(--display);font-weight:400;font-size:28px;color:#e8eef8;letter-spacing:.2em;text-shadow:0 0 18px rgba(185,200,232,.6)}
.fin-end span{font-size:12px;color:var(--dim)}
.fin-lines p{margin:0 0 1.1em;line-height:1.9;text-shadow:0 1px 12px #000;animation:rise 1.2s ease both}
.fin-lines p.danger{color:var(--rose)}
.fin-ly,.fin-ly2,.fin-cr{animation:rise 1.2s ease both}
.fin-ly2{text-align:left}
.fin-cr{display:grid;grid-gap:4px;margin-top:20px;font-size:12px;letter-spacing:.3em;color:var(--dim)}
.fin-cr span:first-child{font-family:var(--display);font-size:18px;color:var(--gold)}

.peekbox{display:grid;grid-gap:10px;padding:10px;border-radius:10px;background:rgba(10,8,14,.45);scroll-margin-top:80px}
.peekrow{display:flex;grid-gap:12px;align-items:center}
.peekrow .mframe{width:40%;max-width:150px;margin:0;flex:none}
.peekside{flex:1;display:grid;grid-gap:8px}
.peekside .mline{text-align:left;min-height:5.2em;font-size:14px}
.peekbtns .btn{flex:1;padding:12px 6px;font-size:15px}
.peekbox .wind{font-size:17px;padding:8px 6px;margin:0}
.peekbox .lyr{font-size:14px;min-height:0}

:root{--cork:url(assets/cork.webp);--grid:url(assets/gridpaper.webp);--bill:url(assets/playbill.webp);--tablet:url(assets/tablet.webp);--sticky:url(assets/sticky.webp);--memcard:url(assets/memcard.webp);}
/* Mobile container baseline; no horizontal document scrolling. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;touch-action:manipulation}
@supports(overflow:clip){html{overflow-x:clip}}
body{width:100%;max-width:100%;padding:66px 16px 140px;padding-top:var(--container-top,66px);padding-bottom:calc(140px + var(--safe-area-inset-bottom,0px));overflow-wrap:break-word;word-wrap:break-word}
body::before{height:var(--container-top,66px);background:#130f1b}
.bar{top:var(--container-top,66px);background:#130f1b;isolation:isolate}
.bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#130f1b;pointer-events:none}
.bar .top{flex-wrap:wrap}
.logo{white-space:normal}.logo small{display:block;margin-left:0}
.tools{margin-left:auto}
.wrap,.panel,.sheet,.card,.bub,.bub .tx,.peekside{min-width:0;max-width:100%}
img,svg{max-width:100%}pre{overflow-wrap:break-word;word-wrap:break-word}
.modal{top:var(--modal-top,0px);right:0;bottom:auto;left:0;height:100vh;height:var(--visible-height,100vh);padding:var(--modal-safe-top,66px) 16px 28px;padding-bottom:var(--container-bottom,28px);overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sheet{width:100%}.thread{right:16px;bottom:18px;bottom:var(--container-bottom,18px)}
button:focus{outline:2px solid var(--lilac);outline-offset:2px}
/* Flex spacing uses margins; grid-gap remains available for Grid on Chrome 61. */
.bar .top,.tools,.meter,.bub,.card .ch,.row,.seg,.thread,.height,.dial,.dial .col,.line,.inv,.tile,.rules .rl,.peekrow{grid-gap:0;gap:0}
.bar .top>*+*,.bub>*+*,.card .ch>*+*,.height>*+*,.rules .rl>*+*,.peekrow>*+*{margin-left:10px}
.tools>*,.row>*,.seg>*,.dial>*,.line>*,.inv>*{margin:4px}
.meter>*+*,.thread>*+*{margin-left:8px}.dial .col>*+*{margin-top:4px}.tile>*+*{margin-top:2px}
.card .ch{flex-wrap:wrap}.card .ch .copy{margin-top:6px;margin-bottom:4px}.bub .tx{flex:1;max-width:none}
.w{background:rgba(243,194,122,.08);border:1px solid rgba(243,194,122,.32);border-radius:5px;padding:1px 5px}
#copyOverlay{z-index:70;background:rgba(0,0,0,.92)}
#copyText{display:block;width:100%;height:48vh;min-height:160px;resize:vertical;font:inherit;font-size:16px;line-height:1.8;color:var(--fg);background:#130f1b;border:1px solid var(--edge);padding:12px;margin-bottom:12px;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#saveNotice{position:fixed;left:16px;right:16px;bottom:12px;z-index:80;background:#522b39;color:#fff;padding:10px}

body.at-entrance{padding:0;overflow-x:hidden;overflow-y:auto}
body.at-entrance::before{display:none}
body.at-entrance .wrap{max-width:none}
.entrance{position:relative;width:100%;min-height:100vh;background:#160f20;overflow:hidden}
.entrance-art{display:block;width:100%;height:100vh;min-height:480px;object-fit:cover;object-position:center center}
.enter-dream{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:72%;max-width:360px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.enter-dream img{display:block;width:100%;height:auto;filter:none}
.enter-dream:active{transform:translateX(-50%) scale(.97)}
.enter-dream:focus{outline:2px solid #f3c27a;outline-offset:8px;border-radius:50px}
@media(min-aspect-ratio:1/1){.entrance-art{object-fit:contain}.enter-dream{bottom:7%;width:40%;max-width:280px}}

/* Full-bleed header paint without widening the scrolling page. */
.bar::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#130f1b;z-index:-1;pointer-events:none}
.bar::before{left:50%;right:auto;width:100vw;transform:translateX(-50%);z-index:-1}
#copyOverlay{align-items:flex-start}
#copyOverlay .sheet{padding:18px;max-height:none;overflow:visible}
#copyOverlay h3{font-size:22px;margin:0 0 8px}
#copyOverlay p{font-size:13px;line-height:1.4;margin:8px 0}
#copyText{font-size:16px;line-height:1.25;padding:8px;min-height:120px;height:auto;resize:none;overflow:hidden;white-space:pre-wrap}

.reward-entry{justify-content:center;margin:18px 0}
.reward-preview{position:relative;margin:16px auto;max-width:540px}
.reward-preview>img{display:block;width:100%;height:auto}
.reward-caption{position:absolute;top:24.4%;left:17%;right:17%;text-align:center;color:#fff0cd;text-shadow:0 1px 3px #563746;font:16px/1.6 serif;overflow-wrap:anywhere}
.reward-caption small{display:block;font-size:12px}

/* Defensive limits for inconsistent native window coordinates. */
body::before{max-height:200px;pointer-events:none}
[hidden]{display:none!important}
#startup[hidden]{display:none!important}

body.at-entrance .wrap,body.at-entrance #app{width:100%;min-height:100vh;transform:none;animation:none;opacity:1;visibility:visible}
.entrance-fallback{display:none;text-align:center;padding:140px 20px 220px;color:#f3c27a;font-size:28px}
.entrance.image-failed .entrance-art{display:none}
.entrance.image-failed .entrance-fallback{display:block}
.enter-dream.image-failed{padding:18px;background:#493254;border:1px solid #d7b977;border-radius:40px;color:#ffe6b1;font-size:24px;line-height:1.4}

/* Audience is a group illustration, not a small inventory prop.
   Attribute selector also covers scenes restored from older save logs. */
.props img[src="assets/audience.webp"]{width:100%;max-width:460px;flex:0 1 auto}
#rewardName{display:block;width:100%;min-width:0;font-size:16px;line-height:1.5;padding:12px;margin:10px 0 18px}
.reward-modal{animation:none}
.reward-modal .sheet{min-width:0;overflow-wrap:break-word}
.reward-preview{width:100%;overflow:hidden}
.reward-preview>img{width:100%;height:auto;transform:none;animation:none}