/* ===== Screens: select / room / book ===== */
.scr{position:absolute;inset:0;z-index:12;background:#0B1024;display:flex;flex-direction:column;overflow:hidden}
.scr[hidden]{display:none}
.scr .sbg{position:absolute;inset:0}
.scr .sbg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.scr .sbg .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,36,.5),rgba(11,16,36,0) 25%,rgba(11,16,36,0) 55%,rgba(11,16,36,.9) 100%)}
.scr .stop{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 0}
.scr .stop h1{font-family:var(--head);font-size:20px;margin:0;flex:1;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.scr .stop .x{width:40px;height:40px;border-radius:50%;background:var(--navy-80);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.scr .stop .x svg{width:20px;height:20px}
.scr .scroll{position:relative;z-index:2;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px calc(120px + env(safe-area-inset-bottom))}

/* --- select / hatch --- */
.selscr{position:absolute;inset:0;z-index:18;background:radial-gradient(ellipse at 50% 30%,#1E2B55 0%,#0B1024 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .5s}
.selscr.show{opacity:1;pointer-events:auto}
.selscr h2{font-family:var(--head);font-size:26px;margin:0;line-height:1.25}
.selscr h2 small{display:block;font-family:var(--vi);font-weight:600;color:var(--lagoon);font-size:13px;letter-spacing:.18em;margin-top:6px}
.selscr p{margin:0;color:#C9D1DE;font-size:14.5px;line-height:1.5}
.eggs{display:flex;gap:6px;justify-content:center;width:100%;margin:10px 0}
.egg{flex:1;min-width:0;max-width:124px;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 12px;border-radius:22px;border:2px solid transparent;transition:transform .1s,border-color .1s,background .1s}
.egg .imw{height:104px;display:flex;align-items:flex-end;justify-content:center}
.egg img{max-height:100px;width:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.5));animation:eggidle 3s ease-in-out infinite}
.egg:nth-child(2) img{animation-delay:.5s}.egg:nth-child(3) img{animation-delay:1s}
@keyframes eggidle{50%{transform:translateY(-6px) rotate(-2deg)}}
.egg .nm{font-family:var(--head);font-size:15px}
.egg .ds{font-size:11px;color:#AEB7C7;line-height:1.35;word-break:keep-all}
.egg.picked{border-color:var(--mango);background:rgba(255,184,77,.1);transform:scale(1.06)}
.egg.picked img{animation:eggwob .5s ease-in-out infinite}
@keyframes eggwob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.hatch{position:relative;width:240px;height:240px;display:grid;place-items:center}
.hatch img{position:absolute;width:150px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.5))}
.hatch .e.crack{animation:crack 1.8s ease-in-out forwards}
@keyframes crack{0%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-14deg)}40%{transform:rotate(14deg) scale(1.05)}50%{transform:rotate(0) scale(1.1)}70%{transform:scale(1.2);filter:brightness(3)}100%{transform:scale(1.6);opacity:0;filter:brightness(6)}}
.hatch .b{width:210px;opacity:0;animation:evoin .9s cubic-bezier(.3,1.6,.5,1) 1.7s forwards}
.hatch .glow{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,184,77,.6),rgba(255,184,77,0) 65%);opacity:0;animation:fadein .5s 1.6s forwards,glowpulse 2s ease-in-out 1.6s infinite}
.namebox{display:flex;gap:8px;width:100%;max-width:320px;min-width:0}
.namebox input{flex:1;min-width:0;width:100%;border:0;border-radius:16px;padding:14px 16px;font:inherit;font-family:var(--head);font-size:18px;text-align:center;background:#fff;color:var(--ink);outline:none;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.selscr .qbtn{max-width:320px}

/* --- room --- */
.room .petzone{position:absolute;left:0;right:0;top:calc(56px + env(safe-area-inset-top));bottom:50%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;pointer-events:none}
.room .petbig{flex:0 1 auto;min-height:0;height:100%;max-height:300px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 16px 14px rgba(0,0,0,.45))}
.room .petbig img{height:100%;width:auto;max-width:78vw;object-fit:contain;display:block;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.room .petbig.jump img{animation:petjump .7s cubic-bezier(.3,1.6,.5,1)}
.room .petbig.eat img{animation:eat .9s ease-in-out}
@keyframes eat{0%,100%{transform:none}25%{transform:scaleY(.92) translateY(6px)}50%{transform:scaleY(1.06) translateY(-6px)}75%{transform:scaleY(.95) translateY(4px)}}
.room .pbub{position:relative;flex:none;z-index:3;background:#fff;color:var(--ink);border-radius:18px;padding:9px 14px;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:88%;white-space:normal;text-align:center}
.room .pbub.show{opacity:1;transform:translateY(-4px)}
.room .pbub .vi{font-family:var(--vi);font-weight:800;color:var(--lagoon-d);display:block}
.room .pbub::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top:9px solid #fff;border-bottom:0}
.room .sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 10px calc(var(--navh,64px) + 6px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.rcard{background:rgba(20,28,51,.9);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rcard .ttl{font-family:var(--head);font-size:17px;display:flex;align-items:center;gap:8px}
.rcard .ttl .lv{font-size:12px;color:#C9D1DE;font-family:var(--body)}
.rcard .ttl .lv b{color:var(--mango)}
.rcard .ed{margin-left:auto;font-size:12px;color:#AEB7C7;background:rgba(255,255,255,.08);padding:4px 9px;border-radius:999px}
.stages{display:flex;gap:6px;margin-top:10px}
.stg{flex:1;height:54px;border-radius:14px;background:rgba(255,255,255,.07);display:grid;place-items:center;position:relative;overflow:hidden;border:2px solid transparent}
.stg img{height:40px;width:auto;margin-top:-8px;filter:brightness(.15) saturate(0)}
.stg.on img{filter:none}
.stg.cur{border-color:var(--mango);background:rgba(255,184,77,.12)}
.stg .n{position:absolute;left:0;right:0;bottom:2px;font-size:9px;color:#AEB7C7;text-align:center}
.stg.on .n{color:#fff}
.stg .lk{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;opacity:.7}
.acts{display:flex;gap:8px}
.act{flex:1;background:#fff;color:var(--ink);border-radius:14px;padding:7px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 5px 0 rgba(0,0,0,.3);transition:transform .07s,box-shadow .07s;font-weight:700;font-size:13.5px}
.act:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.act .ic{font-size:19px}
.act .sub{font-size:11px;color:var(--mute);font-weight:600}
.act[disabled]{opacity:.45;pointer-events:none}
.stat3{display:flex;gap:6px;margin-top:6px}
.stat3 div{flex:1;background:rgba(255,255,255,.07);border-radius:10px;padding:4px 6px;text-align:center;display:flex;align-items:baseline;justify-content:center;gap:5px}
.stat3 b{font-family:var(--head);font-size:15px;color:#8CF5E6}
.stat3 span{font-size:11px;color:#AEB7C7}

/* --- book --- */
.tabs{display:flex;gap:6px;background:var(--navy-80);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:5px;margin:0 14px;position:relative;z-index:3}
.tabs button{flex:1;padding:9px 0;border-radius:12px;font-family:var(--head);font-size:14px;color:#AEB7C7}
.tabs button.on{background:#fff;color:var(--ink)}
.tabs button small{display:block;font-family:var(--body);font-size:10px;font-weight:600;opacity:.75}
.bkhead{display:flex;align-items:center;gap:10px;margin:14px 2px 10px}
.bkhead h3{font-family:var(--head);font-size:16px;margin:0;flex:1}
.bkhead .pg{font-size:12px;color:#AEB7C7}
.bkhead .pg b{color:var(--mango)}
.ph{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px 12px;margin-bottom:8px;animation:cardin .3s backwards}
.ph .pl{width:40px;height:40px;border-radius:50%;background:var(--lagoon);display:grid;place-items:center;flex:none;box-shadow:0 4px 0 var(--lagoon-d);transition:transform .07s,box-shadow .07s}
.ph .pl:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lagoon-d)}
.ph .pl svg{width:18px;height:18px}
.ph .pl.on{animation:pulse .6s ease-in-out infinite}
.ph .tx{flex:1;min-width:0}
.ph .vi{font-family:var(--vi);font-weight:800;font-size:16px;color:#fff;display:block}
.ph .ko{font-size:13px;color:#C9D1DE;display:block}
.ph .sc{font-family:var(--head);font-size:13px;color:var(--mango);flex:none;text-align:right}
.ph .sc small{display:block;font-family:var(--body);font-size:10px;color:#AEB7C7;font-weight:600}
.ph.lock{opacity:.45}
.ph.lock .pl{background:#3A4660;box-shadow:0 4px 0 #222A3D}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;position:relative;animation:cardin .4s backwards}
.gi .im{aspect-ratio:3/4;overflow:hidden;background:#141C33;display:grid;place-items:center}
.gi .im img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.gi.npc .im img{object-fit:contain;object-position:50% 100%;width:92%;height:92%;margin-top:8%}
.gi.lock .im img{filter:brightness(0) opacity(.55)}
.gi .nm{font-family:var(--head);font-size:12.5px;padding:7px 8px 8px;text-align:center}
.gi.lock .nm{color:#7B869B}
.gi .bd{position:absolute;right:6px;top:6px;background:var(--lagoon);color:#fff;font-family:var(--head);font-size:10px;padding:3px 7px;border-radius:999px}
.gi .q{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--head);font-size:30px;color:#fff;opacity:.6}
.empty{text-align:center;color:#AEB7C7;padding:40px 10px;font-size:14px;line-height:1.6}
.bossbtn{position:absolute;left:12px;bottom:272px;z-index:6;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#FF8A8A,#FF6B6B 60%,#E85A5A);color:#fff;border-radius:999px;padding:9px 14px 9px 10px;font-family:var(--head);font-size:14px;box-shadow:0 5px 0 #C24A4A,0 10px 24px rgba(255,107,107,.45);animation:bossbob 1.6s ease-in-out infinite;transition:transform .07s,box-shadow .07s}
.bossbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #C24A4A}
.bossbtn[hidden]{display:none}
.bossbtn .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:16px}
@keyframes bossbob{50%{transform:translateY(-4px)}}

@keyframes glowpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12);opacity:.7}}

/* in-page dialog */
.dlg{position:absolute;inset:0;z-index:40;background:rgba(11,16,36,.7);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .25s}
.dlg.show{opacity:1}
.dlg .box{width:100%;max-width:340px;background:var(--cream);color:var(--ink);border-radius:24px;padding:20px 18px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);transform:translateY(12px) scale(.96);transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.dlg.show .box{transform:none}
.dlg h3{font-family:var(--head);font-size:20px;margin:0;text-align:center}
.dlg p{margin:0;text-align:center;color:#4A5568;font-size:14.5px;line-height:1.5}
.dlg input{min-width:0;width:100%;border:2px solid rgba(20,28,51,.12);border-radius:14px;padding:12px 14px;font:inherit;font-family:var(--head);font-size:18px;text-align:center;outline:none;color:var(--ink);background:#fff}
.dlg input:focus{border-color:var(--lagoon)}
.dlg .row{display:flex;gap:8px}
.dlg .row .qbtn{flex:1;font-size:15px;padding:13px 8px}
.dlg .lnk{background:none;color:#C24A4A;font-size:13px;padding:6px}

/* sub screens (room / notebook): keep the bottom menu, hide home-only parts */
.stage.sub .dock{z-index:14}
.stage.sub .petcard,.stage.sub .cta,.stage.sub .bossbtn{display:none}
.dlg{background:rgba(11,16,36,.82)}

/* place quest list (bottom sheet) */
.psheet{position:absolute;inset:0;z-index:30;background:rgba(11,16,36,.6);display:flex;align-items:flex-end;opacity:0;transition:opacity .2s}
.psheet.show{opacity:1}
.psheet .box{width:100%;max-height:78%;display:flex;flex-direction:column;gap:8px;background:var(--cream);color:var(--ink);border-radius:24px 24px 0 0;padding:16px 14px calc(14px + env(safe-area-inset-bottom));transform:translateY(40px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.psheet.show .box{transform:none}
.psheet .hd{display:flex;align-items:center;gap:8px}
.psheet h3{font-family:var(--head);font-size:20px;margin:0;flex:1}
.psheet .x{width:36px;height:36px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.psheet .x svg{width:18px;height:18px}
.psheet p{margin:0;font-size:13px;color:#5B6576}
.psheet .list{overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.qrow{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid rgba(20,28,51,.08);border-radius:16px;padding:10px 12px;text-align:left;box-shadow:0 4px 0 rgba(20,28,51,.08);color:var(--ink)}
.qrow:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(20,28,51,.08)}
.qrow .d{font-family:var(--head);font-size:11px;color:#fff;background:var(--lagoon-d);border-radius:8px;padding:5px 6px;flex:none}
.qrow .t{flex:1;min-width:0;display:flex;flex-direction:column}
.qrow .t b{font-family:var(--head);font-size:15.5px}
.qrow .t small{font-size:12px;color:#7B8494;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.qrow .stars{color:var(--mango);font-size:13px;letter-spacing:1px}
.qrow .pill{font-size:11px;font-weight:700;background:rgba(25,198,193,.15);color:#0A6B68;padding:3px 8px;border-radius:999px}
.qrow .pill.new{background:var(--mango);color:#4A3200}
.qrow .pill.lock{background:rgba(20,28,51,.07);color:#8A93A3}
.qrow.off{opacity:.55;box-shadow:none}