/* Fishbowl: the virtual pet and the games under it. Everything is scoped to .fb so it can sit on any page. */
.fb{--fb-gold:#FFB703; --fb-coral:#FF5C8A; --fb-kelp:#3DDC97; --fb-ink:#06284A; --fb-text:#EAF8FF;
  font-family:"Shantell Sans","Comic Sans MS","Chalkboard SE",system-ui,sans-serif; color:var(--fb-text); line-height:1.45}
.fb *,.fb *::before,.fb *::after{box-sizing:border-box}
.fb [hidden]{display:none !important}
.fb-games,.fb-shop{text-shadow:none}
.fb p{max-width:none}
.fb button{font-family:inherit; line-height:inherit}
.fb-device{max-width:560px; margin:0 auto; border-radius:28px; overflow:hidden; background:rgba(4,12,43,.55); border:2px solid rgba(255,255,255,.18); box-shadow:0 18px 40px rgba(0,0,0,.3); text-shadow:none}
.fb-hud{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.7rem .8rem .4rem}
.fb-lvl{width:3.3rem; height:3.3rem; border-radius:50%; background:var(--fb-gold); color:#2B1A00; display:grid; place-items:center; align-content:center; box-shadow:0 3px 0 #B07A00; line-height:1}
.fb-lvl b{font-family:"Bagel Fat One",sans-serif; font-size:1.45rem; font-weight:400}
.fb-lvl small{font-size:.55rem; font-weight:800; letter-spacing:.06em}
.fb-lvl.pop{animation:fb-pop .6s}
.fb .realname{color:#FFD84D}
.fb-who{font-weight:800; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-xpbar{height:.7rem; border-radius:999px; background:rgba(255,255,255,.15); overflow:hidden; margin:.2rem 0 .1rem}
.fb-xpbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--fb-kelp),#9FE0F5); border-radius:999px; transition:width .6s}
.fb-xptext{font-size:.75rem; opacity:.8}
.fb-coins{display:flex; align-items:center; gap:.3rem; background:#fff; color:var(--fb-ink); font-weight:800; padding:.3rem .7rem .3rem .4rem; border-radius:999px}
.fb-coins svg{width:1.3rem; height:1.3rem}
.fb-meters{display:flex; justify-content:space-around; padding:.2rem .6rem .55rem}
.fb-meter{display:grid; justify-items:center; gap:.15rem; background:none; border:0; color:var(--fb-text); font-size:.7rem; font-weight:700; cursor:pointer; padding:0}
.fb-ring{--v:50; width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; font-size:1.25rem;
  background:radial-gradient(closest-side,#0B2350 79%,transparent 80% 100%),conic-gradient(var(--c,var(--fb-kelp)) calc(var(--v)*1%),rgba(255,255,255,.15) 0)}
.fb-ring.low{--c:var(--fb-coral); animation:fb-pulse 1.2s infinite} .fb-ring.mid{--c:var(--fb-gold)}
.fb-stage{position:relative; touch-action:none; user-select:none; -webkit-user-select:none}
.fb-stage.fb-scrub{cursor:none} /* the sponge is the cursor in the bath */
.fb-canvas{display:block; width:100%; height:auto; aspect-ratio:400/420}
.fb-say{position:absolute; left:50%; top:.6rem; transform:translateX(-50%); max-width:86%; margin:0; background:#fff; color:var(--fb-ink); font-weight:700; font-size:.9rem;
  padding:.4rem .8rem; border-radius:14px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.2); transition:opacity .3s}
.fb-say:empty{opacity:0}
.fb-say a{color:#B06A00}
.fb-tray{min-height:5.6rem; display:flex; gap:.5rem; justify-content:center; align-items:center; flex-wrap:wrap; padding:.6rem .7rem; background:rgba(4,12,43,.35)}
.fb-hint{width:100%; text-align:center; font-size:.82rem; opacity:.85; margin:0}
.fb-btn{border:0; border-radius:999px; padding:.55rem 1.05rem; font-weight:800; cursor:pointer; background:var(--fb-gold); color:#2B1A00; box-shadow:0 4px 0 #B07A00; touch-action:manipulation; text-decoration:none; display:inline-block}
.fb-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #B07A00}
.fb-btn.alt{background:#fff; color:var(--fb-ink); box-shadow:0 4px 0 #9FB3C8}
.fb-btn[disabled]{opacity:.45; cursor:default; transform:none}
.fb-food{display:grid; justify-items:center; gap:.1rem; width:4.6rem; padding:.35rem .2rem; border-radius:16px; background:#fff; color:var(--fb-ink); border:0; font-size:.7rem; font-weight:800; cursor:grab; touch-action:none}
.fb-food svg{width:2.4rem; height:2.4rem}
.fb-food.locked{opacity:.5; cursor:not-allowed}
.fb-switch{width:5rem; height:2.8rem; border-radius:999px; border:0; background:#22305E; position:relative; cursor:pointer}
.fb-switch::after{content:""; position:absolute; top:.3rem; left:.3rem; width:2.2rem; height:2.2rem; border-radius:50%; background:#FFE27A; transition:left .25s}
.fb-switch[aria-pressed="false"]::after{left:2.5rem; background:#8C9BC2}
.fb-rooms{display:grid; grid-template-columns:repeat(5,1fr); background:#06284A}
.fb-rooms button{border:0; background:none; color:var(--fb-text); font-size:.68rem; font-weight:700; padding:.5rem 0 .55rem; display:grid; justify-items:center; gap:.1rem; cursor:pointer; opacity:.7}
.fb-rooms button span{font-size:1.35rem; line-height:1}
.fb-rooms button[aria-current="true"]{opacity:1; background:rgba(255,255,255,.1); box-shadow:inset 0 3px 0 var(--fb-gold)}
/* shop */
.fb-shop{max-width:560px; margin:1rem auto 0; padding:1rem 1.1rem; border-radius:22px; background:rgba(4,12,43,.45); border:2px solid rgba(255,255,255,.18)}
.fb-shop h3,.fb-games h3{font-family:"Bagel Fat One",sans-serif; font-weight:400; font-size:1.5rem; margin:0 0 .4rem; line-height:1.1}
.fb-tabs{display:flex; gap:.4rem; margin:.4rem 0 .8rem}
.fb-tabs button{font-weight:800; font-size:.85rem; border:2px solid rgba(255,255,255,.25); background:none; color:var(--fb-text); border-radius:999px; padding:.3rem .8rem; cursor:pointer}
.fb-tabs button[aria-pressed="true"]{background:var(--fb-gold); border-color:var(--fb-gold); color:#2B1A00}
.fb-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem}
.fb-item{display:grid; gap:.3rem; justify-items:center; text-align:center; padding:.7rem .5rem; border-radius:16px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.15)}
.fb-item.on{border-color:var(--fb-gold)} .fb-item.locked{opacity:.55}
.fb-item svg{width:4.2rem; height:3.2rem}
.fb-item b{font-size:.9rem}
.fb-item .fb-btn{padding:.35rem .8rem; font-size:.82rem}
.fb-item small{font-size:.8rem; opacity:.85}
.fb-rename{display:flex; gap:.5rem; margin-top:1rem}
.fb-rename input{flex:1; min-width:0; font:inherit; padding:.5rem .8rem; border-radius:12px; border:2px solid var(--fb-gold); background:rgba(255,255,255,.1); color:var(--fb-text)}
/* the games under the bowl */
.fb-games{margin:1.6rem auto 0; padding:0}
.fb-games > p{margin:0 0 .9rem; opacity:.9}
.fb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr)); gap:.7rem}
.fb-card{display:grid; grid-template-rows:auto 1fr; border-radius:20px; overflow:hidden; background:#fff; color:var(--fb-ink); text-decoration:none; border:0; text-align:left; cursor:pointer; padding:0; box-shadow:0 6px 0 rgba(4,12,43,.35); transition:transform .15s; text-shadow:none}
.fb-card:hover,.fb-card:focus-visible{transform:translateY(-3px)}
.fb-card canvas{display:block; width:100%; height:auto; aspect-ratio:2/1}
.fb-card .fb-cb{padding:.55rem .75rem .75rem; display:grid; gap:.15rem; align-content:start}
.fb-card b{font-family:"Bagel Fat One",sans-serif; font-weight:400; font-size:1.15rem; line-height:1.1}
.fb-card small{font-size:.8rem; opacity:.75; line-height:1.3}
.fb-card .fb-xp{justify-self:start; margin-top:.3rem; font-size:.72rem; font-weight:800; background:#E3F9EE; color:#1E8C5C; border-radius:999px; padding:.15rem .55rem}
.fb-card .fb-xp.none{background:#FFE9EF; color:#B02A55}
/* overlays */
.fb-overlay{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(4,12,43,.78); padding:1rem}
.fb-overlay.top{z-index:61}
.fb-levelup{max-width:22rem; text-align:center; padding:1.4rem 1.2rem; border-radius:26px; background:linear-gradient(180deg,#46B5DE,#0B3274); border:3px solid var(--fb-gold); animation:fb-pop .5s}
.fb-levelup .big{font-family:"Bagel Fat One",sans-serif; font-size:3.4rem; line-height:1; color:var(--fb-gold); margin:.2rem 0; text-shadow:3px 3px 0 #06284A}
.fb-levelup ul{list-style:none; padding:0; margin:.6rem 0 1rem}
.fb-promo{display:block; font-family:"Bagel Fat One",sans-serif; font-weight:400; font-size:1.35rem; color:var(--fb-gold); margin-bottom:.2rem}
.fb-gamebox{width:min(400px,100%); display:grid; gap:.5rem}
.fb-gamehud{display:flex; justify-content:space-between; align-items:center; font-weight:800}
.fb-gamehud b{font-family:"Bagel Fat One",sans-serif; font-weight:400; font-size:1.6rem; color:var(--fb-gold)}
.fb-gamewrap{position:relative}
.fb-gamecanvas{width:100%; height:auto; aspect-ratio:360/540; max-height:72vh; border-radius:20px; touch-action:none; display:block; background:#1766A8; margin:0 auto}
.fb-gameend{text-align:center; padding:1rem; border-radius:20px; background:rgba(4,12,43,.6); border:2px solid rgba(255,255,255,.2)}
.fb-gameend h4{font-family:"Bagel Fat One",sans-serif; font-weight:400; font-size:1.6rem; margin:.2rem 0}
.fb-countdown{position:absolute; inset:0; display:grid; place-items:center; font-family:"Bagel Fat One",sans-serif; font-size:5rem; color:#fff; text-shadow:4px 4px 0 #06284A; pointer-events:none}
.fb-earned{color:var(--fb-gold); font-weight:800}
.fb-loot{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.fb-loot span{background:#fff; color:var(--fb-ink); font-weight:800; padding:.35rem .8rem; border-radius:999px; animation:fb-pop .5s}
.fb-toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem); transform:translateX(-50%); z-index:70; background:#fff; color:var(--fb-ink); font-weight:800; padding:.6rem 1.1rem; border-radius:999px; max-width:90vw; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; transition:opacity .2s; pointer-events:none}
.fb-toast.show{opacity:1}
@keyframes fb-pop{0%{transform:scale(.6)} 60%{transform:scale(1.12)} 100%{transform:scale(1)}}
@keyframes fb-pulse{50%{transform:scale(1.08)}}
@media (max-width:520px){ .fb-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem} .fb-card .fb-cb{padding:.5rem .6rem .65rem} .fb-card b{font-size:1rem} .fb-card small{font-size:.72rem} .fb-card .fb-xp{font-size:.64rem; padding:.15rem .45rem} }
@media (prefers-reduced-motion: reduce){ .fb-ring.low{animation:none} }

/* windowed mode (main page): a live picture of the bowl that scrolls with the page; tap it for the real bowl */
.fb-peek{display:grid; justify-items:center; gap:.45rem; width:100%; max-width:360px; margin:0 auto; padding:.8rem .8rem 1rem; border-radius:28px; border:2px solid rgba(255,255,255,.18); background:rgba(4,12,43,.55); box-shadow:0 18px 40px rgba(0,0,0,.3); color:var(--fb-text); font:inherit; text-shadow:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .15s}
.fb-peek:hover{transform:translateY(-2px)}
.fb-peek:active{transform:scale(.98)}
.fb-peekcanvas{display:block; width:100%; height:auto; aspect-ratio:1; border-radius:22px}
.fb-peekwho{font-weight:800; font-size:.95rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fb-peeklvl{color:var(--fb-gold)}
.fb-peekfeel{font-size:.8rem; opacity:.85; text-align:center}
.fb-peekgo{display:inline-block; margin-top:.15rem; background:var(--fb-gold); color:#2B1A00; font-weight:800; padding:.5rem 1.15rem; border-radius:999px; box-shadow:0 4px 0 #B07A00}
.fb-window{position:fixed; inset:0; z-index:50; overflow-y:auto; overscroll-behavior:contain; background:rgba(2,10,35,.95); padding:calc(env(safe-area-inset-top,0px) + .4rem) .4rem calc(env(safe-area-inset-bottom,0px) + .4rem)}
.fb-window-in{max-width:560px; margin:0 auto}
/* the whole bowl fits one screen: HUD, meters, tray and rooms keep their size, the bowl takes what is left */
.fb-window .fb-device{display:flex; flex-direction:column; max-height:880px; background:#0A1B45;
  height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - .8rem);
  height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - .8rem)}
.fb-window .fb-device > *{flex:none}
.fb-window .fb-stage{flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.fb-window .fb-canvas{flex:none; aspect-ratio:auto}
.fb-window .fb-device.fb-shopping .fb-stage{flex:0 0 34%}
.fb-window .fb-shop{flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0; max-width:none; border:0; border-radius:0; padding:.7rem .8rem}
.fb-window .fb-hud{grid-template-columns:auto minmax(0,1fr) auto auto; gap:.5rem; padding:.5rem .6rem .3rem}
.fb-window .fb-xptext{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-window .fb-meters{padding:.1rem .5rem .35rem}
.fb-window .fb-tray{min-height:0; padding:.45rem .6rem}
.fb-window .fb-hint{font-size:.76rem}
.fb-x{width:2.4rem; height:2.4rem; border-radius:50%; border:0; background:#fff; color:var(--fb-ink); font-size:1.05rem; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #9FB3C8; touch-action:manipulation}
.fb-x:active{transform:translateY(2px); box-shadow:0 1px 0 #9FB3C8}
@media (max-height:720px){
  .fb-window .fb-lvl{width:2.8rem; height:2.8rem} .fb-window .fb-lvl b{font-size:1.2rem}
  .fb-window .fb-ring{width:2.4rem; height:2.4rem; font-size:1.05rem} .fb-window .fb-meter{font-size:.62rem}
  .fb-window .fb-rooms button{padding:.35rem 0 .4rem} .fb-window .fb-rooms button span{font-size:1.15rem}
}
html.fb-locked,html.fb-locked body{overflow:hidden}
html.fb-locked main{z-index:45} /* lift the page above its floating pills while the bowl window is open */