:root{--bg:#0c1220;--panel:#151d30;--card:#1c2740;--line:#27345a;--txt:#e9eefb;--mut:#8f9bbd;--acc:#5ee1a8;--acc2:#7cc4ff;--warn:#ffb15e;--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:15px/1.4 -apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.hidden{display:none!important}
#app{height:100%;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}

/* auth */
#auth{align-items:center;justify-content:center;padding:24px;text-align:center;padding-top:calc(24px + var(--sat))}
#auth .hero{width:160px;filter:drop-shadow(0 12px 24px rgba(94,225,168,.35))}
#auth h1{margin:8px 0 0;font-size:32px;letter-spacing:.5px}
#auth .sub{color:var(--mut);margin:4px 0 20px}
#authForm{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}
#authForm input{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-size:17px;text-align:center}
.btn{padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:600}
.btn.primary{background:linear-gradient(135deg,#5ee1a8,#3fb98a);color:#062117;border:0}
.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}
.link{color:var(--acc2);text-decoration:underline;padding:6px}
.err{color:#ff7b7b;min-height:1.2em;margin:0}
.petpick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.petpick p{width:100%;margin:6px 0 0;color:var(--mut);font-size:14px}
.pc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:14px;border:2px solid var(--line);background:var(--card);width:96px}
.pc input{display:none}
.pc img{width:64px;height:64px;object-fit:contain}
.pc:has(input:checked){border-color:var(--acc);box-shadow:0 0 0 3px rgba(94,225,168,.25)}
.pc.locked{opacity:.45}

/* main */
header{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + var(--sat))}
header .title{flex:1;display:flex;flex-direction:column;line-height:1.15}
header small{color:var(--mut);font-size:12px}
.avatar{width:42px;height:42px;padding:0;background:none;border:0}
.avatar img{width:100%;height:100%;object-fit:contain}
.xp{background:var(--card);border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600}
.ib{width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:18px}

#room{position:relative;height:46vh;min-height:280px;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#1b3a5c 0%,#0c1220 65%);background-size:cover;background-position:center bottom}
#room .stage{display:none}
.bgpick{display:block;margin:8px 0}
.bgc{background:none;border:2px solid transparent;border-radius:12px;padding:4px;color:var(--mut);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bgc.on{border-color:var(--acc);color:#fff}
.bgt{width:100%;aspect-ratio:1;border-radius:9px;object-fit:cover;display:block}
#room .stage{position:absolute;left:50%;bottom:-6%;width:130%;transform:translateX(-50%);pointer-events:none;opacity:.95}
#room{--floor:1%}
#room .floor{display:none;position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(8,10,20,.85) 0%,rgba(8,10,20,.55) 40%,transparent 100%);pointer-events:none}
#room .floor{display:none}
#room .pet::after{content:"";position:absolute;left:50%;bottom:-6px;width:70%;height:12px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.3),transparent 70%);z-index:-1}
.pet{position:absolute;will-change:transform;transform-origin:50% 100%}
.pet .sp{background-repeat:no-repeat;image-rendering:auto;filter:brightness(1.18) contrast(.96) saturate(1.08)}
.pet.flip .sp{transform:scaleX(-1)}
.pet{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pet.rub .sp{filter:brightness(1.18) contrast(.96) saturate(1.08) drop-shadow(0 0 10px rgba(255,140,190,.8))}
.pet.play .sp{transform-origin:50% 100%;animation:playSquish .5s ease-in-out infinite alternate}
@keyframes playSquish{from{scale:1 1}to{scale:1.05 .95}}
.pet.sulk .sp{transform-origin:50% 100%;animation:sulk .9s ease-in-out infinite alternate}
@keyframes sulk{from{scale:1 1}to{scale:1.02 .985}}
.pet.wiggle{animation:wiggle .6s ease-in-out}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-5deg}50%{rotate:4deg}75%{rotate:-3deg}}
.pet.cuddle .sp{animation:cuddle .9s ease-in-out infinite alternate}
.pet.kiss .sp{animation:kiss .7s ease-in-out infinite alternate}
@keyframes cuddle{from{scale:1 1;translate:0 0}to{scale:1.03 .98;translate:0 -2px}}
@keyframes kiss{from{scale:1 1;translate:0 0}to{scale:1.05 .96;translate:0 -3px}}
.pet .bond-heart{position:absolute;left:50%;top:-28px;color:#ff5c91;font-size:24px;line-height:1;text-shadow:0 2px 0 #fff,0 0 8px rgba(255,92,145,.7);pointer-events:none;z-index:5;animation:bondHeart 2.8s ease-out forwards}
@keyframes bondHeart{0%{opacity:0;translate:-50% 12px;scale:.55}18%{opacity:1;scale:1.1}100%{opacity:0;translate:-50% -34px;scale:1}}
.pet .moodlet{position:absolute;left:50%;top:-30px;width:38px;height:38px;transform:translateX(-50%);animation:moodlet 1.4s ease-out forwards;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@keyframes moodlet{0%{opacity:0;translate:0 10px;scale:.6}20%{opacity:1;translate:0 0;scale:1.1}70%{opacity:1;translate:0 -10px;scale:1}100%{opacity:0;translate:0 -26px}}
.affrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:8px}
.affrow img{width:46px;height:46px;object-fit:contain;flex:none}
.affrow .body{flex:1;min-width:0}
.affrow .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.affrow .lv{color:#ff7a9a;font-weight:800;font-size:12px;white-space:nowrap}
.affrow .bar{height:8px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;margin:6px 0 4px;box-shadow:inset 0 0 0 1px rgba(79,227,255,.35)}
.affrow .bar i{display:block;height:100%;background:linear-gradient(90deg,#ff7a9a,#ffd26a);border-radius:99px;transition:width .4s}
.pet .tag{position:absolute;left:50%;top:-4px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.pet .item{position:absolute;right:-10px;bottom:36%;width:34px;filter:drop-shadow(0 2px 3px #000)}
.bubble{position:absolute;left:50%;bottom:calc(100% - 10px);transform:translateX(-50%);width:max-content;min-width:90px;max-width:min(240px,64vw);padding:9px 13px;color:#1b1f2e;font-size:13px;font-weight:600;line-height:1.3;text-align:center;
  background:#fff;border-radius:16px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:pop .25s ease-out;pointer-events:none;z-index:5}
.bubble::after{content:"";position:absolute;left:var(--tail,50%);bottom:-9px;margin-left:-8px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble.fade{opacity:0;transition:opacity .5s}
@keyframes pop{from{scale:.6;opacity:0}to{scale:1;opacity:1}}
.pet.hop{animation:hop .5s ease-out}
@keyframes hop{0%{translate:0 0}40%{translate:0 -28px}100%{translate:0 0}}

.tabs{display:flex;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;color:var(--mut);font-size:11px;font-weight:600}
.tabs button img{width:32px;height:32px;object-fit:contain;filter:grayscale(.7) brightness(.8)}
.tabs button.on{color:var(--txt)}
.tabs button.on img{filter:none}
#panel{flex:1;overflow:auto;overflow-x:hidden;padding:12px 14px calc(16px + var(--sab));-webkit-overflow-scrolling:touch}
.tab{display:flex;flex-direction:column;gap:10px}

.goal{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.goal .ico{font-size:26px;width:36px;text-align:center}
.goal .body{flex:1;min-width:0}
.goal .t{font-weight:600;display:flex;justify-content:space-between;gap:8px}
.goal .t small{color:var(--mut);font-weight:500;white-space:nowrap}
.goal .bar{height:8px;border-radius:999px;background:#0b1020;margin:6px 0;overflow:hidden}
.goal .bar i{display:block;height:100%;background:linear-gradient(90deg,#7cc4ff,#5ee1a8);border-radius:999px;transition:width .3s}
.goal.done .bar i{background:linear-gradient(90deg,#5ee1a8,#f7e45e)}
.goal .week{display:flex;gap:4px}
.goal .week b{width:16px;height:16px;border-radius:5px;background:#0b1020;border:1px solid var(--line)}
.goal .week b.d{background:var(--acc);border-color:var(--acc)}
.goal .week b.t{outline:2px solid rgba(255,255,255,.35)}
.goal .act{display:flex;flex-direction:column;gap:6px}
.goal .act button{width:44px;height:44px;border-radius:12px;background:#0b1020;border:1px solid var(--line);font-size:20px;font-weight:700}
.goal .act .plus{background:linear-gradient(135deg,#5ee1a8,#3fb98a);color:#062117;border:0}
.goal.done .act .plus{background:#2a3a58;color:var(--acc)}
.goal .act .cheer{font-size:22px}
.goal .act .cheer.did{opacity:.4}
.row{display:flex;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.muted{color:var(--mut);font-size:13px}
.add{display:flex;gap:8px}
.add input{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
.add input.n{flex:0 0 64px;text-align:center}
.add .emo{flex:0 0 52px;text-align:center;font-size:20px;padding:6px}

.friend{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.friend img{width:44px;height:44px;object-fit:contain}
.friend .body{flex:1;min-width:0}
.friend .body b{display:block}
.friend .dots{display:flex;gap:4px;margin-top:4px}
.friend .dots span{font-size:13px;opacity:.35}
.friend .dots span.d{opacity:1}
.cheerbox{background:linear-gradient(135deg,#243a62,#1c2740);border:1px solid #3a5a9a;border-radius:16px;padding:12px;display:flex;gap:10px;align-items:center}
.cheerbox img{width:40px}

.rewards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rw{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 4px;text-align:center;font-size:11px;color:var(--mut)}
.rw img{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto 4px}
.rw.locked img{filter:grayscale(1) brightness(.4)}
.rw.locked{color:#5a6485}
.rw.got{border-color:var(--acc);color:var(--txt)}
.rw.eq{box-shadow:0 0 0 2px var(--acc2)}
.xpbar{height:10px;background:#0b1020;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb15e,#f7e45e)}

#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:50}
#modal .card{position:relative;width:100%;max-width:480px;background:var(--panel);border-radius:22px 22px 0 0;padding:20px 18px calc(20px + var(--sab));border:1px solid var(--line)}
#modal .close{position:absolute;right:10px;top:10px;width:34px;height:34px}
#modal .close img{width:100%}
#modal h3{margin:0 0 12px}
#modal .card form{display:flex;flex-direction:column;gap:10px}
#modal .card input{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--txt)}
#toast{position:fixed;left:50%;bottom:calc(90px + var(--sab));transform:translateX(-50%);background:#000c;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;z-index:60;max-width:90vw;text-align:center}
.unlock{text-align:center}
.unlock img{width:120px;filter:drop-shadow(0 0 24px rgba(247,228,94,.6));animation:pop2 .6s ease-out}
@keyframes pop2{from{transform:scale(.3) rotate(-20deg)}60%{transform:scale(1.15)}to{transform:scale(1)}}
@media (min-width:700px){#app{max-width:520px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}

#props{position:absolute;inset:0;pointer-events:none}
.prop{position:absolute;bottom:calc(var(--floor) - 3%);transform:translateX(-50%);pointer-events:auto;touch-action:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45));z-index:1;user-select:none;-webkit-user-drag:none}
.prop.item{bottom:var(--floor)}
.prop.drag{filter:drop-shadow(0 0 10px var(--acc));z-index:20}
.shoptabs{display:flex;gap:6px;margin:8px 0 2px;overflow-x:auto;scrollbar-width:none}.shoptabs::-webkit-scrollbar{display:none}
.stab{flex:0 0 auto;border:2px solid transparent;background:#0d1a2e;color:var(--mut);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}.stab.on{color:#fff;border-color:var(--acc);box-shadow:0 0 10px rgba(90,230,255,.35)}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.shopc{background:var(--card,rgba(255,255,255,.06));border:2px solid transparent;border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:12px}
.shopc img{height:56px;object-fit:contain}
.shopc small{color:var(--mut)}
.shopc.owned{border-color:var(--acc)}
.shopc.off{opacity:.55}
.coins{display:inline-block;background:rgba(255,200,60,.15);color:#ffd26a;border-radius:999px;padding:3px 10px;font-weight:700;font-size:13px}

#trip{position:absolute;right:3%;top:4%;width:150px;z-index:3;animation:fly 3.2s ease-in-out infinite;cursor:pointer}
#trip .hull{width:100%;display:block;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5))}
#trip .crew{position:absolute;left:46%;top:26%;transform:translateX(-50%);display:flex;gap:6px}
#trip .crew{gap:2px}#trip .crew img{width:26px;height:26px;object-fit:contain}
#trip .eta{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border-radius:999px;padding:2px 8px}
@keyframes fly{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.adv{background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.adv h3{margin:0 0 6px}
.adv select{background:#131a2b;color:#fff;border:1px solid #2a3450;border-radius:10px;padding:8px;flex:1;min-width:0;font-size:14px}
.adv .row{display:flex;gap:8px;margin:8px 0}
.chk{display:inline-block;min-width:18px;text-align:center;border-radius:50%;background:#2a3450;font-size:11px;line-height:18px}
.chk.ok{background:var(--acc);color:#000}

/* ---------------- Theme: portal lab ---------------- */
:root{--bg:#070b16;--panel:#0c1526;--card:#101d33;--line:#1f4a3a;--acc:#7CFF4F;--acc2:#35d6ff;--gold:#ffd26a;--txt:#f1f6ff;--mut:#93a3c7}
html,body{background:#070b16 radial-gradient(ellipse at 50% -10%,#173a5a 0%,#0a1428 45%,#070b16 80%);
  background-image:radial-gradient(1px 1px at 12% 18%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 68% 8%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 32%,#9fe7ff99 50%,transparent 51%),
  radial-gradient(1px 1px at 30% 62%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 55% 80%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 90%,#7CFF4F88 50%,transparent 51%),radial-gradient(1px 1px at 92% 72%,#fff7 50%,transparent 51%),
  radial-gradient(ellipse at 50% -10%,#173a5a 0%,#0a1428 45%,#070b16 80%);background-attachment:fixed}
h3{font-size:17px;margin:6px 0 4px;color:#fff;text-shadow:0 0 12px rgba(124,255,79,.35)}
h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);margin-right:8px;vertical-align:2px}
/* 9-slice game frame for cards */
.goal,.friend,.rw,.shopc,.adv,.cheerbox,.pc,#authForm input,.add input,#modal .card input{border:0;background:#0d1a2e;border-radius:14px;
  box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.35),inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.45)}
.goal,.friend,.adv{background:linear-gradient(180deg,#132540,#0c1729)}
.goal.done{box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.9),0 0 16px rgba(124,255,79,.25),0 6px 18px rgba(0,0,0,.45)}
.goal .ico{width:44px;height:44px;line-height:44px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#1f4d6b,#0b1a2c);box-shadow:inset 0 0 0 1px rgba(53,214,255,.35)}
.goal .bar{height:10px;background:#050a14;box-shadow:inset 0 0 0 1px #1c2a45}
.goal .bar i{background:linear-gradient(90deg,#35d6ff,#7CFF4F);box-shadow:0 0 10px rgba(124,255,79,.5)}
.goal.done .bar i{background:linear-gradient(90deg,#7CFF4F,#ffd26a)}
.goal .week b{background:#050a14;border-color:#1c2a45;border-radius:50%}
.goal .week b.d{background:var(--acc);border-color:var(--acc);box-shadow:0 0 6px var(--acc)}
/* portal-green pill buttons from the game */
.btn.primary,.goal .act .plus,.tabs button.on::after{border-image:url(/ui/pill.png) 22 fill / 14px stretch}
.btn.primary{background:none;border:14px solid transparent;border-image:url(/ui/pill.png) 22 fill / 14px stretch;color:#063a12;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.35);padding:2px 10px;line-height:22px;filter:drop-shadow(0 4px 10px rgba(124,255,79,.35))}
.goal .act .plus{background:linear-gradient(180deg,#9dff6f,#48d92a);color:#063a12;box-shadow:0 3px 0 #1f8a12,0 0 12px rgba(124,255,79,.35);border-radius:14px}
.goal .act .plus:active{transform:translateY(2px);box-shadow:0 1px 0 #1f8a12}
.goal.done .act .plus{background:#1a2b47;color:var(--acc);box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.5)}
.goal .act button{background:#0a1526;box-shadow:inset 0 0 0 1px #24355a;border:0}
.btn{background:linear-gradient(180deg,#1a2c4a,#101d33);border:0;box-shadow:inset 0 0 0 1.5px rgba(53,214,255,.35)}
/* header */
header{background:linear-gradient(180deg,rgba(9,16,30,.95),rgba(9,16,30,.6));border-bottom:1px solid rgba(124,255,79,.25)}
header .title b,header .title>*:first-child{font-weight:800;letter-spacing:.3px;text-shadow:0 0 14px rgba(53,214,255,.5)}
.avatar{filter:drop-shadow(0 0 6px rgba(124,255,79,.5))}
.xp,.coins{background:linear-gradient(180deg,#3b2c0a,#241a05);box-shadow:inset 0 0 0 1.5px rgba(255,210,106,.6),0 0 10px rgba(255,210,106,.25);color:var(--gold);border:0}
/* room framed like the game's teleporter panel */
#room{box-shadow:inset 0 0 0 2px rgba(124,255,79,.55),inset 0 0 40px rgba(0,0,0,.6);border-radius:0 0 18px 18px}
#room::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 -30px 40px -20px rgba(124,255,79,.25)}
/* tabs */
.tabs{background:linear-gradient(180deg,#0f1b30,#0a1222);border:0;box-shadow:0 -1px 0 rgba(124,255,79,.25),0 -8px 24px rgba(0,0,0,.5);position:relative;z-index:2;padding:4px 4px 0}
.tabs button{position:relative;border-radius:12px 12px 0 0;transition:transform .15s}
.tabs button.on{background:linear-gradient(180deg,rgba(124,255,79,.18),transparent);color:#fff}
.tabs button.on img{filter:drop-shadow(0 0 8px rgba(124,255,79,.8));transform:translateY(-2px) scale(1.1)}
.tabs button.on::after{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:999px;background:var(--acc);box-shadow:0 0 10px var(--acc);border-image:none}
/* rewards / shop */
.rw.got{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 14px rgba(124,255,79,.3);background:radial-gradient(circle at 50% 30%,#1c3b2a,#0d1a2e)}
.rw.locked{background:#0a1220;box-shadow:inset 0 0 0 1px #1a2440}
.shopc.owned{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 12px rgba(124,255,79,.25)}
.shopc:not(.owned):not(.off){box-shadow:inset 0 0 0 1.5px rgba(255,210,106,.45)}
.shopc small{color:var(--gold)}
.xpbar{background:#050a14;box-shadow:inset 0 0 0 1px #1c2a45;border:0;height:12px}
.xpbar i{background:linear-gradient(90deg,#ffb15e,#ffd26a);box-shadow:0 0 10px rgba(255,210,106,.5)}
.pc:has(input:checked){box-shadow:inset 0 0 0 2px var(--acc),0 0 16px rgba(124,255,79,.35)}
.bgc.on{border-color:var(--acc);box-shadow:0 0 10px rgba(124,255,79,.4)}
/* bubbles from the game */
.bubble{background:#fff;color:#111;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.35);border:2px solid #dfe9f5}
#modal .card{background:linear-gradient(180deg,#132540,#0a1222);border:0;box-shadow:inset 0 0 0 2px rgba(124,255,79,.5),0 -10px 40px rgba(0,0,0,.6)}
#toast{background:#0d1a2ee6;box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.6),0 6px 20px rgba(0,0,0,.5)}
.cheerbox{background:linear-gradient(135deg,#1a2f5a,#0d1a2e);box-shadow:inset 0 0 0 1.5px rgba(53,214,255,.6),0 0 14px rgba(53,214,255,.2)}
#auth .hero{filter:drop-shadow(0 0 30px rgba(124,255,79,.55))}
#auth h1{text-shadow:0 0 20px rgba(124,255,79,.6),0 2px 0 #063a12;color:#dfffd2}

/* ---------------- Theme 2: bright Archero-space ---------------- */
:root{--bg:#0d2148;--panel:#143061;--card:#1c3d78;--line:#3fa8ff;--acc:#7CFF4F;--acc2:#4fe3ff;--gold:#ffd26a;--txt:#ffffff;--mut:#b9d3ff}
html,body{background:#0d2148 radial-gradient(ellipse at 50% -10%,#2a5aa8 0%,#153a75 45%,#0d2148 85%);
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 68% 8%,#fffd 50%,transparent 51%),radial-gradient(2px 2px at 84% 32%,#bff3ff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 30% 62%,#fffb 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 80%,#fffa 50%,transparent 51%),radial-gradient(2px 2px at 8% 90%,#7CFF4Fcc 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 72%,#fffb 50%,transparent 51%),
  radial-gradient(ellipse at 50% -10%,#2a5aa8 0%,#153a75 45%,#0d2148 85%);background-attachment:fixed}
#panel{background:linear-gradient(180deg,rgba(20,48,97,.55),rgba(13,33,72,.2))}
.goal,.friend,.rw,.shopc,.adv,.cheerbox,.pc,#authForm input,.add input,#modal .card input{background:linear-gradient(180deg,#265393,#1a3d78);
  box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.55),inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,20,60,.45)}
.goal,.friend,.adv{background:linear-gradient(180deg,#2a5ca3,#1b4184)}
.goal.done{background:linear-gradient(180deg,#2f7a63,#1d5a4a);box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.95),0 0 16px rgba(124,255,79,.35),0 6px 16px rgba(0,20,60,.45)}
.goal .ico{background:radial-gradient(circle at 50% 35%,#3f8fd9,#1f4f96);box-shadow:inset 0 0 0 1.5px rgba(191,243,255,.6)}
.goal .bar,.xpbar{background:#0e2350;box-shadow:inset 0 0 0 1px #3b6fc2}
.goal .week b{background:#0e2350;border-color:#3b6fc2}
.goal .act button{background:#12305f;box-shadow:inset 0 0 0 1px #4a86d6}
.goal.done .act .plus{background:#1f5a44}
.btn{background:linear-gradient(180deg,#3d7fd6,#2457a8);box-shadow:inset 0 0 0 1.5px rgba(191,243,255,.6),0 3px 0 #163d7c;color:#fff;font-weight:700}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px rgba(191,243,255,.6),0 1px 0 #163d7c}
/* cyan glow label plates (Archero map labels) */
h3{display:inline-block;padding:4px 14px;border-radius:8px;background:linear-gradient(180deg,#2f8fe0,#1e64c0);color:#e8fbff;text-shadow:0 1px 0 #0b3a7a;
  box-shadow:inset 0 0 0 1.5px rgba(191,243,255,.85),0 0 14px rgba(79,227,255,.55);font-size:15px;margin:6px 0 8px}
h3::before{display:none}
.muted{color:var(--mut)}
header{background:linear-gradient(180deg,rgba(13,33,72,.95),rgba(13,33,72,.65));border-bottom:1px solid rgba(79,227,255,.45)}
#roomTitle{color:#e8fbff}
.xp,.coins{background:linear-gradient(180deg,#f7c548,#e08d12);box-shadow:inset 0 0 0 1.5px #ffe9a3,0 3px 0 #8a5303;color:#3a2200;font-weight:800}
#room{box-shadow:inset 0 0 0 2px rgba(79,227,255,.75),inset 0 0 40px rgba(0,10,40,.5)}
#room::after{box-shadow:inset 0 -30px 40px -20px rgba(79,227,255,.3)}
.tabs{background:linear-gradient(180deg,#1b437f,#143061);box-shadow:0 -1px 0 rgba(79,227,255,.5),0 -8px 24px rgba(0,10,40,.4)}
.tabs button{color:#b9d3ff}
.tabs button.on{background:linear-gradient(180deg,rgba(79,227,255,.25),transparent);color:#fff}
.tabs button.on::after{background:var(--acc2);box-shadow:0 0 10px var(--acc2)}
.tabs button.on img{filter:drop-shadow(0 0 8px rgba(79,227,255,.9))}
#modal .card{background:linear-gradient(180deg,#245097,#143061);box-shadow:inset 0 0 0 2px rgba(79,227,255,.7),0 -10px 40px rgba(0,10,40,.6)}
#toast{background:#1e4a8fee;box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.8),0 6px 20px rgba(0,10,40,.5);color:#fff}
.cheerbox{background:linear-gradient(135deg,#2c66b8,#1a3d78)}
.shopc:not(.owned):not(.off){box-shadow:inset 0 0 0 1.5px rgba(255,210,106,.7)}
.pc:has(input:checked){box-shadow:inset 0 0 0 2px var(--acc),0 0 16px rgba(124,255,79,.45)}
/* loot: game icons already have their own frame */
.rw,.rw.got,.rw.locked{background:none;box-shadow:none;padding:4px 2px;color:#e8fbff}
.rw img{width:64px;height:64px}
.rw.got img{filter:drop-shadow(0 0 8px rgba(124,255,79,.7))}
.rw.locked img{filter:grayscale(1) brightness(.55)}
.rw.locked{color:#8fb0e6}
/* mood chip */
.moodchip{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:8px 12px;border:0;border-radius:14px;color:#fff;font:inherit;font-weight:700;text-align:left;
  background:linear-gradient(180deg,#5a3fbf,#3a2590);box-shadow:inset 0 0 0 1.5px rgba(210,180,255,.7),0 4px 0 #26165f}
.moodchip.set{background:linear-gradient(180deg,#2a5ca3,#1b4184);box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.55),0 4px 0 #0f2a5c}
.moodchip img{width:34px;height:34px;object-fit:contain}
.moodchip .q{width:34px;height:34px;border-radius:50%;background:#fff3;display:grid;place-items:center;font-size:20px}
.moodchip span:nth-child(2){flex:1}
.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.md{border:0;border-radius:14px;padding:8px 4px;background:linear-gradient(180deg,#265393,#1a3d78);box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.4);color:#fff;font:inherit;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.md img{width:52px;height:52px;object-fit:contain}
.md.on{box-shadow:inset 0 0 0 2px var(--acc),0 0 12px rgba(124,255,79,.5)}
.friend img.moodi{width:22px;height:22px;border-radius:0;background:none;box-shadow:none;vertical-align:-5px;margin-left:6px;object-fit:contain}
/* vibes */
.friend .vibe{flex:0 0 auto;margin-left:6px;padding:6px 10px;background:linear-gradient(180deg,#ff8fb3,#e0497e);box-shadow:inset 0 0 0 1.5px #ffd1e0,0 3px 0 #8f1f4a;color:#fff}
.vibes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.vb{border:0;background:none;color:#fff;font:inherit;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0}
.vb .ic{width:64px;height:64px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:inset 0 0 0 3px #fff,0 0 14px var(--c)}
.vb .ic img{width:42px;height:42px;object-fit:contain}
.vb:active .ic{transform:scale(.92)}
.vlist{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.vrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:linear-gradient(180deg,#265393,#1a3d78);box-shadow:inset 0 0 0 1.5px var(--c)}
.vrow .av{width:40px;height:40px;object-fit:contain}
.vrow .ic{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px var(--c))}
.vrow b{display:block}
/* ship expedition (Archero co-op layout) */
.ship{position:relative;padding:8px 0 0;text-align:center}
.ship .dest{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px}
.ship .dest b{font-size:18px;text-shadow:0 0 12px rgba(79,227,255,.8)}
.ship .dest button{background:none;border:0;color:#fff;font-size:24px;padding:0 8px;opacity:.85}
.ship .stage{position:relative;height:210px;border-radius:16px;overflow:hidden;background:#061024 url(/bg/deepspace.webp) center/cover;box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.5)}
.ship .dome{position:absolute;inset:auto 0 0 0;height:150px;background:linear-gradient(180deg,rgba(120,220,255,0),rgba(120,220,255,.28) 60%,rgba(200,240,255,.45));pointer-events:none}
.ship .hull{position:absolute;left:50%;bottom:0;width:300px;height:118px;transform:translateX(-50%);background:url(/props/seats.webp) center bottom/300px auto no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.ship .seat{position:absolute;bottom:52px;width:110px;text-align:center}
.ship .seat.l{left:calc(50% - 150px)}.ship .seat.r{left:calc(50% + 40px)}
.ship .seat img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(79,227,255,.7))}
.ship .seat .chair{width:76px;height:76px;margin:0 auto;border-radius:50%;background:rgba(10,30,70,.7);box-shadow:inset 0 0 0 3px #ffd26a,0 0 12px rgba(255,210,106,.7);display:grid;place-items:center;color:#ffd26a;font-size:36px;font-weight:800;cursor:pointer}
.ship .seat .chair img{border:0;box-shadow:none;width:70px;height:70px}
.ship .seat .chair.wait{font-size:22px}
.ship .seat .nm{margin-top:6px;display:inline-block;padding:2px 10px;border-radius:10px;font-weight:800;font-size:12px;color:#fff;background:rgba(10,30,70,.85);box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.7)}
.ship .seat .nm:empty{display:none}
.ship .go{margin-top:12px;display:inline-block;padding:10px 32px;border:0;border-radius:14px;font:inherit;font-weight:800;font-size:17px;color:#5a3400;
  background:linear-gradient(180deg,#ffd75a,#f7a91b);box-shadow:inset 0 0 0 2px #fff0b5,0 5px 0 #b06d0a}
.ship .go:disabled{filter:grayscale(1);opacity:.6}
.ship .go:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px #fff0b5,0 2px 0 #b06d0a}
.ship .meta{margin-top:8px;font-size:13px;color:var(--mut)}
.ship .chk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#0e2350;font-size:12px;vertical-align:-4px;margin:0 2px}
.ship .chk.ok{background:var(--acc);color:#063a12}
.ship select{background:#1a3d78;color:#fff;border:0;border-radius:10px;padding:6px 10px;box-shadow:inset 0 0 0 1.5px rgba(79,227,255,.5)}
/* modal cards: no horizontal overflow */
#modal .card,#modal .card *{min-width:0;max-width:100%;box-sizing:border-box}
#panel>*{max-width:100%}
/* brighter room */
#room .floor{background:linear-gradient(to top,rgba(10,30,80,.85) 0%,rgba(10,30,80,.5) 40%,transparent 100%)}
#room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#4fe3ff,transparent);box-shadow:0 0 12px #4fe3ff;pointer-events:none;z-index:1}
.affrow .duo{display:flex;flex:none;gap:2px;width:80px}
.affrow .duo img{width:38px;height:38px;object-fit:contain;flex:none}
.affrow .duo img+img{margin-left:0}
.affrow.bond .top b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.affrow.bond .lv{color:#ffd26a}
/* v16: tabs + room editing */
.tabs{padding:6px 2px 0;gap:2px}
.tabs button{padding:6px 0 5px;font-size:10px;gap:3px;border-radius:12px;letter-spacing:-.2px}
.tabs button img{width:34px;height:34px;filter:none;opacity:.75;transition:transform .15s,opacity .15s}
.tabs button.on{background:linear-gradient(180deg,rgba(90,230,255,.22),rgba(90,230,255,.06));color:#fff}
.tabs button.on img{opacity:1;filter:drop-shadow(0 0 8px rgba(90,230,255,.9));transform:translateY(-2px) scale(1.12)}
.tabs button.on::after{content:none}
.prop{transition:filter .15s}
#room.editing .prop{cursor:grab}
#room.editing .prop:not(.drag){filter:drop-shadow(0 8px 6px rgba(0,0,0,.45)) drop-shadow(0 0 2px rgba(90,230,255,.5))}
.prop.sel{filter:drop-shadow(0 0 4px var(--acc)) drop-shadow(0 0 12px var(--acc))!important}
#ptool{position:absolute;left:8px;right:8px;top:8px;z-index:40;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:rgba(6,14,30,.88);border:1px solid rgba(90,230,255,.5);border-radius:12px;padding:6px 8px;backdrop-filter:blur(6px)}
#ptool b{flex:1 1 100%;font-size:12px;color:var(--acc)}
#ptool button{background:#132a4a;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}
#ptool button.warn{background:#5a1f2e}
#ptool button.x{margin-left:auto;background:transparent;color:var(--mut)}
#room.editing .pet{pointer-events:none}
#room:not(.editing) .prop{pointer-events:none}
.shop{grid-template-columns:repeat(3,minmax(0,1fr))}.shopc{min-width:0;overflow:hidden}.shopc span,.shopc small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bgpick h4{margin:10px 0 4px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.5px}
.bgrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bgrow .bgc span:last-child{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#room .floor{height:26%;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 50%,transparent 100%)}
#room[data-kind="room"] .floor{background:linear-gradient(to top,rgba(0,0,0,.28) 0%,transparent 100%)}
.remind{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 10px}
.remind .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#2a5ca3;color:#fff;font-weight:700;font-size:14px}
.remind .chip b{cursor:pointer;opacity:.8}
.remind input[type=time]{flex:1;min-width:110px;margin:0}
.pet .held{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.pet .held.flip{transform:translate(-50%,-50%) scaleX(-1)}
.pet .held.neck{transform:translate(-50%,-52%) scaleY(.8);clip-path:inset(36% 0 0 0)}
.pet .held.neck.flip{transform:translate(-50%,-52%) scale(-1,.8);clip-path:inset(36% 0 0 0)}
.pet .held.food{animation:chomp .38s ease-in-out infinite alternate}
@keyframes chomp{from{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}to{transform:translate(-50%,-50%) scale(.82) rotate(6deg)}}
.pet.chomp .sp{animation:playBounce .38s ease-in-out infinite alternate}
.give{text-align:center}.give .big{width:96px;height:96px;object-fit:contain;margin:4px auto 6px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.give .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:8px 0}
.give .btn .av{width:34px;height:34px;object-fit:contain}

.tabs button{position:relative}.tabs .badge{position:absolute;top:2px;right:calc(50% - 24px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b5c;color:#fff;font:700 11px/18px system-ui;text-align:center;box-shadow:0 0 0 2px #0d2148}

.pet.portalout{animation:portalout .9s ease-in forwards}.pet.portalin{animation:portalin .9s ease-out}
@keyframes portalout{to{opacity:0;filter:brightness(2) hue-rotate(90deg);scale:.2 1.3}}@keyframes portalin{from{opacity:0;filter:brightness(2) hue-rotate(90deg);scale:.2 1.3}}
/* ---------------- Pocket Pals ---------------- */
.petpick.big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:52vh;overflow-y:auto;padding:4px 2px}
.petpick.big .pc{width:auto;padding:6px 4px;font-size:10px;text-align:center;gap:2px}
.petpick.big .pc img{width:56px;height:56px;object-fit:contain}
.petpick.big .pc.on{box-shadow:inset 0 0 0 2px var(--acc),0 0 10px rgba(124,255,79,.4)}
.pc img{width:72px;height:72px;object-fit:contain}
.chip{border:0;border-radius:999px;padding:6px 12px;background:#1a3d78;color:#fff;font:inherit;font-weight:700;font-size:12px}.chip.on{background:var(--acc);color:#052}
.pet .held.back{opacity:0}
.pet .sp{filter:none;image-rendering:auto}
.pet.rub .sp{filter:drop-shadow(0 0 10px rgba(255,140,190,.8))}
/* ---------------- Theme: Pocket Mortys (game UI) ---------------- */
:root{--acc:#5ad232;--acc2:#38c6f4;--gold:#ffd23f;--txt:#1a1f24;--mut:#55656d;--ink:#111;--panel:#dff6fb;--card:#fff}
html,body{font-family:"Baloo 2",system-ui,sans-serif;color:var(--txt);background:#5fd0e8 url(/pmui/tile.webp) center/260px repeat;background-attachment:fixed}
#panel{background:rgba(255,255,255,.5)}
/* white comic panels with heavy black outline */
.goal,.friend,.rw,.shopc,.adv,.cheerbox,.pc,.md,.vrow,#modal .card,.ship,.moodchip,.rail{background:#fff;color:var(--txt);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink)}
#authForm input,.add input,#modal .card input,select,textarea{background:#fff;color:var(--txt);border:3px solid var(--ink);border-radius:12px;box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
#authForm input::placeholder,.add input::placeholder{color:#8a9aa2}
.goal.done{background:#c9f5b7;box-shadow:0 4px 0 var(--ink)}
.goal .ico{background:#dff6fb;border:2px solid var(--ink);box-shadow:none}
.goal .bar,.xpbar{background:#e6eef1;border:2px solid var(--ink);box-shadow:none}.goal .bar i,.xpbar i{background:var(--acc)}
.goal .week b{background:#e6eef1;border-color:var(--ink);color:var(--txt)}.goal .week b.on{background:var(--acc)}
.goal .act button{background:#fff;border:2px solid var(--ink);color:var(--txt);box-shadow:0 3px 0 var(--ink)}.goal .act .plus{background:var(--acc);color:#0c2a05}
.muted,small{color:var(--mut)}
/* skewed game buttons */
.btn,.ship .go,.btn.primary,.chip.on{background:none;border:0;border-image:url(/pmui/GreenBtnUp.png) 36 fill / 18px stretch;padding:12px 22px;color:#062a04;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:none;border-radius:0}
.btn:not(.primary){border-image:url(/pmui/BlueBtnUp.png) 36 fill / 18px stretch;color:#032a3d}
.btn.small{padding:6px 16px;border-image-width:12px}
.btn:active,.ship .go:active{transform:translateY(2px) scale(.98);filter:brightness(.92)}
.btn.danger{border-image:url(/pmui/BackBtnUp.png) 36 fill / 18px stretch;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.chip{background:#fff;border:2px solid var(--ink);color:var(--txt);box-shadow:0 2px 0 var(--ink)}.chip.on{background:var(--acc);border:2px solid var(--ink);border-image:none;padding:6px 14px;border-radius:999px;box-shadow:0 2px 0 var(--ink);color:#062a04}
/* yellow title plates */
h3{background:none;border:0;border-image:url(/pmui/TitleBox_Gold.png) 30 70 30 12 fill / 14px 34px 14px 6px stretch;padding:8px 10px 8px 14px;color:#3a2600;text-shadow:none;box-shadow:none;font-weight:800;display:inline-block;margin:6px 0}
/* header */
header{background:#38c6f4;border-bottom:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.15)}
header h1,#roomTitle{color:#fff;text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink);font-weight:800}
header small{color:#0b3a4a}
.avatar{filter:none;width:46px;height:46px;background:#fff url(/pmui/SlotPanel_Frame.png) center/100% 100% no-repeat;border:3px solid var(--ink);border-radius:12px;padding:2px;box-shadow:0 3px 0 var(--ink)}
.avatar img{width:100%;height:100%;object-fit:contain;border-radius:0;border:0;box-shadow:none}
.xp,.coins{background:#ffd23f;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:#3a2600;font-weight:800}
#room{border:3px solid var(--ink);border-top:0;box-shadow:0 5px 0 var(--ink);border-radius:0 0 18px 18px}
#room::after{display:none}
/* tabs */
.tabs{background:#fff;border-top:3px solid var(--ink);box-shadow:0 -6px 20px rgba(0,60,80,.15)}
.tabs button{color:var(--mut)}.tabs button.on{background:#dff6fb;color:var(--txt);border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0}.tabs button.on::after{content:none}
.tabs button.on img{filter:none;transform:translateY(-2px) scale(1.1)}
.tabs .badge{background:#ff3b3b;border:2px solid var(--ink);color:#fff}
.shopc.owned{border-color:var(--acc)}.shopc.off{opacity:.55}
.moodchip{background:#c9a8ff}
.remind .chip{background:#fff}
/* speech bubble: game speech box */
.bubble{background:#fff;color:var(--txt);border:3px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);font-weight:700}
.bubble::after{border-top-color:var(--ink)}
/* auth */
#auth{background:#5fd0e8 url(/pmui/tile.webp) center/260px repeat}
#auth .hero{width:200px;image-rendering:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
#auth h1{color:#fff;text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
#auth p,#auth .muted{color:#0b3a4a}
#auth a{color:#0b3a4a;font-weight:700}
#modal{background:rgba(0,40,60,.55)}
#modal .close{background:url(/pmui/CloseBtn.png) center/contain no-repeat;border:0;box-shadow:none}#modal .close img{display:none}
.toast{background:#fff;color:var(--txt);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700}
.petpick.big .pc.on{border-color:var(--acc);box-shadow:0 4px 0 var(--acc)}

.ico{height:1.15em;width:auto;vertical-align:-.22em;display:inline-block}
.goal .act .plus .ico{height:1.1em;width:1.1em;object-fit:contain}.q.ico{height:1.6em}
.xp{display:inline-flex;align-items:center;gap:4px}

.pet .held.gift{cursor:pointer;pointer-events:auto;animation:giftbob 1.2s ease-in-out infinite}
@keyframes giftbob{0%,100%{transform:translate(-50%,-50%) rotate(-8deg)}50%{transform:translate(-50%,-54%) rotate(8deg)}}

/* night */
#room.night{box-shadow:inset 0 0 0 9999px rgba(8,12,52,.62)}
#room.night .pet .sp{filter:brightness(.62) contrast(.96) saturate(.8)}
#room.night .prop,#room.night .stage{filter:brightness(.55) saturate(.8)}
#room.night::before{content:"";position:absolute;right:6%;top:7%;width:44px;height:44px;border-radius:50%;background:#fff7c2;box-shadow:-14px 6px 0 -4px #0e1240,0 0 26px 8px rgba(255,247,194,.35);z-index:1;pointer-events:none}
.pet.asleep .sp{transform-origin:50% 100%;animation:breathe 2.6s ease-in-out infinite alternate}
@keyframes breathe{from{scale:1 1;rotate:-4deg}to{scale:1.03 .97;rotate:-4deg}}
.pet .zz{position:absolute;color:#fff;font-weight:900;font-size:16px;text-shadow:0 0 4px #000,0 2px 0 #000;pointer-events:none;z-index:4;animation:zz 2.6s ease-out forwards}
@keyframes zz{0%{opacity:0;translate:0 0;font-size:14px}20%{opacity:1}100%{opacity:0;translate:26px -60px;font-size:34px}}

.profile .pets{display:flex;justify-content:center;gap:10px;margin:6px 0}
.profile .pets img{width:72px;height:72px;border-radius:14px;border:2px solid var(--ink);background:#fff}
.profile .stats{display:flex;gap:14px;justify-content:center;font-weight:700;margin:6px 0}
.profile .stats .ico{width:16px;height:16px;vertical-align:-3px}
.profile .dots{justify-content:center;margin-bottom:10px}
.profile .row{display:flex;flex-direction:column;gap:8px}

.slots{display:flex;gap:10px;margin:8px 0 12px}
.slot{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);text-align:center}
.slot.on{background:var(--acc);box-shadow:0 3px 0 var(--ink),0 0 0 3px #fff inset}
.slot .lbl{font-size:12px;font-weight:800;opacity:.7}
.slot img,.slot .plus{width:64px;height:64px;border-radius:12px;border:2px solid var(--ink);background:#fff}
.slot .plus{display:grid;place-items:center;font-size:34px;font-weight:900;border-style:dashed;color:#888}
.slot b{font-size:13px;line-height:1.15}
.slot.empty b{font-weight:600;font-size:12px;opacity:.7}
.slot .x{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:#e33;color:#fff;border:2px solid var(--ink);font-weight:900;line-height:1;padding:0}
/* ---- beach: sea dip ---- */
#room .pet.wet::after{bottom:calc(var(--dip) - 5px);width:96%;height:14px;background:radial-gradient(ellipse,rgba(255,255,255,.7) 0 30%,rgba(190,240,250,.45) 55%,transparent 72%);z-index:0;animation:ripple 1.8s ease-in-out infinite}
@keyframes ripple{0%,100%{scale:1 1;opacity:.85}50%{scale:1.18 1.25;opacity:.55}}
.pet .splash{position:absolute;left:50%;bottom:calc(var(--dip) - 6px);width:70%;height:30px;transform:translateX(-50%);pointer-events:none;z-index:5;background:radial-gradient(circle at 20% 90%,#fff 0 4px,transparent 5px),radial-gradient(circle at 50% 70%,#fff 0 5px,transparent 6px),radial-gradient(circle at 80% 90%,#fff 0 4px,transparent 5px),radial-gradient(circle at 35% 40%,#e6fbff 0 3px,transparent 4px),radial-gradient(circle at 68% 35%,#e6fbff 0 3px,transparent 4px);animation:splash .9s ease-out forwards}
@keyframes splash{0%{opacity:0;scale:.4 .3}25%{opacity:1;scale:1 1}100%{opacity:0;scale:1.4 1.5;translate:0 -14px}}
#sndBtn{position:absolute;right:8px;top:8px;z-index:30;width:32px;height:32px;border-radius:50%;border:2px solid var(--ink,#1a1a2e);background:rgba(255,255,255,.85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4z' fill='%231a1a2e'/><path d='M16 8.5q3 3.5 0 7' stroke='%231a1a2e' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/20px no-repeat;padding:0;box-shadow:0 2px 0 var(--ink,#1a1a2e)}
#sndBtn:not(.on){opacity:.75}#sndBtn:not(.on)::after{content:"";position:absolute;left:5px;top:13px;width:18px;height:2.5px;background:#c0392b;rotate:-40deg;border-radius:2px}
#sndBtn.hidden{display:none}
/* ---- seasonal ambience ---- */
#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:28}
.fx-p{position:absolute;top:-6%;display:block;width:10px;height:10px;animation:fall linear infinite;opacity:.9}
.fx-p.winter{background:#fff;border-radius:50%;box-shadow:0 0 4px rgba(255,255,255,.8)}
.fx-p.autumn{width:11px;height:8px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#e07b2a,#b8451c);animation-name:fallSway}
.fx-p.autumn:nth-child(3n){background:linear-gradient(135deg,#f0b429,#d97b1d)}.fx-p.autumn:nth-child(3n+1){background:linear-gradient(135deg,#c93b2a,#8e2318)}
.fx-p.spring{width:8px;height:8px;border-radius:60% 60% 60% 10%;background:linear-gradient(135deg,#ffd3e2,#ff9fc0);animation-name:fallSway}
@keyframes fall{0%{transform:translateY(0)}100%{transform:translateY(60vh)}}
@keyframes fallSway{0%{transform:translateY(0) translateX(0) rotate(0)}25%{transform:translateY(15vh) translateX(18px) rotate(90deg)}50%{transform:translateY(30vh) translateX(-12px) rotate(200deg)}75%{transform:translateY(45vh) translateX(16px) rotate(300deg)}100%{transform:translateY(60vh) translateX(0) rotate(400deg)}}
.fx-sun{position:absolute;inset:-20% -20% auto auto;width:70%;height:70%;background:radial-gradient(circle at 70% 25%,rgba(255,250,200,.55) 0,rgba(255,240,170,.22) 22%,transparent 50%);mix-blend-mode:screen}
.fx-heat{position:absolute;left:0;right:0;bottom:0;height:45%;background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 6px,rgba(255,255,255,.05) 6px 8px);opacity:.6;animation:heat 3.2s ease-in-out infinite alternate;mix-blend-mode:overlay}
@keyframes heat{from{transform:translateY(0) scaleY(1);opacity:.35}to{transform:translateY(-4px) scaleY(1.04);opacity:.7}}
.fx-gull{position:absolute;left:-8%;width:22px;height:10px;animation:gullfly linear forwards;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'><path d='M1 6q5-6 11 0q6-6 11 0' stroke='%23334' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;opacity:.8}
.fx-gull.rev{left:auto;right:-8%;animation-name:gullflyRev;scale:-1 1}
@keyframes gullfly{0%{transform:translateX(0) translateY(0)}25%{transform:translateX(30vw) translateY(-8px)}50%{transform:translateX(60vw) translateY(4px)}75%{transform:translateX(90vw) translateY(-6px)}100%{transform:translateX(125vw) translateY(0)}}
@keyframes gullflyRev{0%{transform:translateX(0)}25%{transform:translateX(-30vw) translateY(-8px)}50%{transform:translateX(-60vw) translateY(4px)}75%{transform:translateX(-90vw) translateY(-6px)}100%{transform:translateX(-125vw)}}
#room.night .fx-sun,#room.night .fx-heat,#room.night .fx-gull{display:none}
#room[data-kind="room"] .fx-p,#room[data-kind="room"] .fx-sun,#room[data-kind="room"] .fx-heat,#room[data-kind="room"] .fx-gull{display:none}
#room .castle{position:absolute;background:url(/props/sandcastle.webp?v=31) no-repeat 0 0;image-rendering:pixelated;pointer-events:none;transition:opacity 1.6s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
#room .castle.fade{opacity:0}
#room .rdate{position:absolute;background-repeat:no-repeat;background-position:0 0;image-rendering:pixelated;pointer-events:none;transition:opacity 1.6s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
#room .rdate.fade{opacity:0}
#room .rdate.sky{z-index:1;filter:none}
.pet.tipsy{animation:tipsy 1.6s ease-in-out infinite}
@keyframes tipsy{0%,100%{rotate:-4deg}50%{rotate:4deg}}
/* ---- beach: living shoreline ---- */
#shore{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;z-index:0;overflow:hidden}
#shore .shimmer{position:absolute;left:-10%;right:-10%;bottom:calc(var(--sea) + 4px);height:34%;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.28) 22px 26px,transparent 26px 60px),repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.18) 38px 41px,transparent 41px 90px);background-size:120px 100%,180px 100%;mask:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.25) 45%,transparent);-webkit-mask:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.25) 45%,transparent);animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:120px 0,-180px 0}}
#shore .foam{position:absolute;left:-6%;right:-6%;bottom:calc(var(--sea) + 2px);height:22px;border-radius:50% 50% 40% 40%/100% 100% 30% 30%;background:linear-gradient(to bottom,rgba(255,255,255,.95),rgba(230,248,255,.75) 55%,rgba(255,255,255,0));filter:blur(.4px);transform-origin:50% 0;animation:lap 5.2s ease-in-out infinite}
#shore .foam.f2{height:11px;left:-2%;right:-10%;opacity:.8;animation:lap 5.2s ease-in-out -2.6s infinite;background:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,0))}
@keyframes lap{0%,100%{translate:0 -4px;opacity:.3;scale:1 .5}45%{translate:-8px 14px;opacity:1;scale:1 1}70%{translate:-4px 9px;opacity:.65;scale:1 .8}}
#room.night #shore{opacity:.45}

.cheek{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,70,95,.7) 0%,rgba(255,70,95,.45) 40%,rgba(255,70,95,0) 100%);opacity:0;transition:opacity .45s;pointer-events:none;z-index:2}
.pet.blushing:not(.noblush) .cheek{opacity:1}
.pet .sendhome{position:absolute;left:50%;top:18px;transform:translateX(-50%);pointer-events:auto;background:#ff5a7a;color:#fff;border:2px solid #fff;border-radius:999px;font:700 11px/1 inherit;padding:5px 10px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.3);cursor:pointer}
.pet .sendhome:disabled{opacity:.6}