/* ═══════════════════════════════════════════════════════════
   第五关 · 齐马蓝 —— 在 ../level1/style.css、../level3/style3.css 之上新增的样式
   ═══════════════════════════════════════════════════════════ */
#dlg-name.moss{color:#5f7a62}
#dlg-name.blue{color:#2348a8;background:none}
.chip.pen3{background:#e8efe9;color:#3d5a44;box-shadow:0 0 0 2px #9fb6a8 inset,0 3px 5px rgba(0,0,0,.15)}

/* 地面 / 背景 */
#floor{position:absolute;left:0;z-index:0;pointer-events:none;background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px);mask-image:linear-gradient(180deg,transparent 0,#000 30px)}
#poolbg{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%}
#scene.hall5 #vignette,#scene.pool5 #vignette{background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 50%,rgba(10,24,70,.38) 100%)}
#scene.hall5 #grainfx,#scene.pool5 #grainfx{opacity:.35}
#scene.hall5 #L-mist,#scene.pool5 #L-mist{display:none}

/* 起身 / 黑场 */
#wake{position:absolute;inset:0;z-index:30;background:#070806;pointer-events:none;opacity:0}
#wake.on{opacity:1}
#wake.lift{opacity:0;transition:opacity 1.5s ease}

/* 画：蓝色方块叠在画布正中，越大的画占比越大 */
.blk.painting{filter:var(--cut-shadow)}
.blk.painting img{display:block;width:100%;height:100%}
.blk.painting .bluesq{position:absolute;left:50%;top:50%;width:calc(var(--b) * 86%);height:calc(var(--b) * 80%);transform:translate(-50%,-50%);
  background:url(assets/tiles.webp) center/cover,#1f45b8;background-blend-mode:multiply;box-shadow:0 0 0 1px rgba(10,20,60,.25)}

/* 宾客：对着画频频点头 */
.prop.guest{transform-origin:50% 100%}
.prop.guest img{animation:nod 2.6s ease-in-out infinite;animation-delay:var(--nd);transform-origin:50% 85%}
.prop.guest.flipimg img{animation-name:nodf}
@keyframes nod{0%,60%,100%{transform:none}70%{transform:rotate(3deg)}80%{transform:none}88%{transform:rotate(3deg)}}
@keyframes nodf{0%,60%,100%{transform:scaleX(-1)}70%{transform:scaleX(-1) rotate(3deg)}80%{transform:scaleX(-1)}88%{transform:scaleX(-1) rotate(3deg)}}

/* 齐马 */
#zima{position:absolute;transform-origin:50% 100%;filter:var(--cut-shadow)}
#zima img{display:block;width:100%;height:auto}
#zima.glint img{filter:drop-shadow(0 0 14px rgba(80,140,255,.65))}

/* 门：开门时门扇向里转开，后面是泳池的蓝光 */
#vdoor{perspective:900px}
#vdoor .door-leaf{position:relative;display:block;width:100%;transform-origin:8% 50%;transition:transform 1.4s cubic-bezier(.4,.1,.2,1);filter:var(--cut-shadow)}
#vdoor .door-glow{position:absolute;left:9%;width:82%;bottom:1%;height:auto;opacity:0;transition:opacity 1.2s ease .3s;filter:brightness(1.08) drop-shadow(0 0 40px rgba(150,195,255,.9)) drop-shadow(0 0 90px rgba(120,170,255,.6))}
#vdoor.open .door-leaf{transform:rotateY(-78deg)}
#vdoor.open .door-glow{opacity:1}

/* 齐马脚边那一摞手稿 */
.blk.pile img{position:absolute;left:calc(var(--i) * 4px);bottom:calc(var(--i) * 7px);width:92px;transform:rotate(calc(-80deg + var(--i) * 9deg)) scaleY(.32);transform-origin:50% 100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.blk.pile{transition:opacity .4s}
.blk.pile.gone{opacity:0}

/* 飞舞的手稿 */
.mss{position:absolute;left:0;top:0;z-index:15;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 6px 8px rgba(10,20,60,.28))}
.mss img{display:block;width:100%;height:auto}
.mss.back{z-index:3;filter:brightness(.86) blur(.6px) drop-shadow(0 4px 6px rgba(10,20,60,.2))}
/* 风：画面泛起一层蓝，越来越浓 */
#scene.windy #vignette{animation:gustv 1.6s ease-in-out infinite}
@keyframes gustv{50%{filter:brightness(.9)}}
#scene.hall5::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,rgba(40,90,230,0),rgba(30,70,210,.22));opacity:0;transition:opacity 3s ease}
#scene.hall5.blued::after{opacity:1}

/* 卷轴：手稿排序——词块做成小纸条，字号小一些好装下整句 */
#scroll[data-cls="mss"] .strip{flex-basis:1040px;align-content:flex-start}
#scroll[data-cls="mss"] .chip{font-size:19px!important;padding:9px 14px 8px!important;background:#f4ead2;color:#2a3554;
  box-shadow:inset 4px 0 0 #1f45b8,0 0 0 1px rgba(80,70,40,.18) inset,0 3px 5px rgba(0,0,0,.15)}
#scroll[data-cls="mss"] .chip.inked{color:#1f45b8}
#scroll[data-cls="mss"] #bank{gap:10px 12px}
#scroll[data-cls="mss"] .strip:empty:before{content:'把手稿一张张码在这里'}

/* 泳池：跃入、水花、碎片 */
.splash{position:absolute;width:0;height:0;z-index:9;pointer-events:none}
.splash i{position:absolute;left:-60px;top:-20px;width:120px;height:40px;border-radius:50%;border:4px solid rgba(235,244,255,.9);animation:ring 1.6s ease-out forwards}
.splash i:nth-child(2){animation-delay:.25s}.splash i:nth-child(3){animation-delay:.5s}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(2.6);opacity:0}}
.prop.shard .limb{display:block;width:100%;padding-top:60%;background:#2a4fc0;border-radius:30%;box-shadow:0 0 0 2px #f5efe0}
.prop.shard{animation:sink 2.4s ease-in forwards}
@keyframes sink{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(calc(var(--dx) * .7),-80px) rotate(calc(var(--dr) * .5))}100%{transform:translate(var(--dx),120px) rotate(var(--dr));opacity:0}}
#scene.under::after{content:'';position:absolute;inset:0;z-index:30;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(120,170,255,.55),#1d3fa8 80%);animation:under 1.4s ease forwards}
@keyframes under{from{opacity:0}to{opacity:1}}
#clear-text b{color:#1f45b8}

/* 稿纸：一张手稿一行，左边标出第几张，先后一目了然 */
#scroll[data-cls="mss"] .strip.col{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;counter-reset:pg}
#scroll[data-cls="mss"] .strip.col .chip{text-align:left;--r:0deg!important;transform:none}
#scroll[data-cls="mss"] .strip.col .chip:before{counter-increment:pg;content:counter(pg);display:inline-block;width:1.6em;margin-right:6px;color:#1f45b8;font-weight:700;text-align:center;border-right:1px solid rgba(31,69,184,.3)}
#scroll[data-cls="mss"] .strip.col .caret{width:auto;height:4px}

/* 齐马手里的瓷砖：平时垂在身侧，台词时高举过头 */
#zima #tile{position:absolute;left:62%;top:46%;width:40px!important;transform:rotate(-12deg);transition:left .6s cubic-bezier(.3,1.4,.5,1),top .6s cubic-bezier(.3,1.4,.5,1),transform .6s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
#zima.raise #tile{left:58%;top:-8%;width:52px!important;transform:rotate(8deg);filter:drop-shadow(0 0 12px rgba(110,160,255,.85))}