/* Self-hosted fonts (latin subset, SIL OFL 1.1, see fonts/LICENSE.md). Nunito is a variable font covering 400-900. */
@font-face{font-family:'Fredoka One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fredoka-one-latin.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin.woff2) format('woff2');}
/* Seasonal decoration on the title screen (see js/season.js) */
#title-screen{isolation:isolate;} /* lets .season-fx sit between the background and the content */
.season-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;}
.season-fx span{position:absolute;top:-30px;opacity:.55;animation:season-fall linear infinite;}
@keyframes season-fall{
  0%{transform:translate(0,0) rotate(0);}
  50%{transform:translate(18px,380px) rotate(160deg);}
  100%{transform:translate(-6px,760px) rotate(320deg);}
}
@media (prefers-reduced-motion:reduce){.season-fx{display:none;}}
.season-chip{position:absolute;top:18px;left:16px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);font-weight:800;font-size:13px;color:var(--text);box-shadow:0 2px 6px var(--shadow);}

:root{
  --pink:#f48fb1;--lavender:#ce93d8;--peach:#ffcc80;--mint:#b2dfdb;
  --text:#5d4037;--shadow:rgba(180,100,140,0.22);
  --W:420px;--H:700px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  width:100%;height:100%;height:100dvh;
  font-family:'Nunito',sans-serif;
  background:#1a0a2e radial-gradient(ellipse at 50% 45%,#3d1f55 0%,#1a0a2e 70%) fixed;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;user-select:none;overscroll-behavior:none;
  /* Safari only knows the -webkit- ones: without them a held finger (the joystick, 🐾, a drag
     in a game) selected text or brought up the copy bubble, which also cancelled the touch */
  -webkit-user-select:none;-webkit-touch-callout:none;
}
/* Typing still selects as usual */
input,textarea{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;}
img,svg{-webkit-user-drag:none;}
/* Phones: fill the screen (the game canvas grows taller to match; see fitToScreen).
   Tablets/desktops (.scaled): a 420×700 app scaled up to fit the window. */
#app{
  width:min(420px,100vw);
  height:100vh;height:100dvh;
  position:relative;overflow:hidden;
  background:#fff9f0;
  border-radius:clamp(0px,3vw,24px);
  box-shadow:0 0 80px rgba(244,143,177,0.4),0 0 0 1px rgba(255,255,255,0.1);
}
/* safe-area insets for notched devices */
@supports(padding:env(safe-area-inset-bottom)){
  .screen{padding-bottom:max(20px,env(safe-area-inset-bottom));}
  #touch-controls{padding-bottom:max(20px,env(safe-area-inset-bottom));}
}

/* ── SCREENS ── */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;padding:20px 18px;
  overflow-y:auto;
  transition:opacity 0.3s;
}
.screen.hidden{display:none;}
/* A long screen's way out stays at the bottom edge, in thumb reach, while the rest scrolls under
   it (the .screen's padding is undone so the fade reaches the sides and the bottom) */
.screen-foot{
  position:sticky;bottom:-20px;z-index:3;flex-shrink:0;
  margin:auto -18px -20px;width:calc(100% + 36px);box-sizing:border-box;
  padding:18px 18px max(16px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,249,240,0),rgba(255,249,240,0.94) 45%);
  pointer-events:none;
}
.screen-foot > *{pointer-events:auto;}

/* ── TITLE ── */
/* The title is the Den: striped wallpaper with a window, a skirting board, and a wooden floor with
   the cat on its bed. The wall is the top 58%; .title-wall and .title-floor share the same split. */
#title-screen{
  --split:58%;
  padding:0;gap:0;justify-content:flex-start;overflow:hidden;
  background:
    linear-gradient(to bottom, transparent calc(var(--split) - 14px), #fffaf5 calc(var(--split) - 14px) calc(var(--split) - 11px),
      #e6c3b0 calc(var(--split) - 11px) var(--split), rgba(120,80,50,.18) var(--split) calc(var(--split) + 6px), transparent calc(var(--split) + 6px)),
    repeating-linear-gradient(to bottom, #f1d9b5 0 44px, #e4c79d 44px 46px) bottom / 100% calc(100% - var(--split)) no-repeat,
    repeating-linear-gradient(90deg, #fce8ef 0 22px, #f9dde8 22px 44px) top / 100% var(--split) no-repeat,
    #f1d9b5;
}
.title-wall{height:var(--split);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:64px 18px 22px;flex-shrink:0;}
.title-floor{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 18px 20px;}
.title-window{position:relative;width:128px;height:92px;flex-shrink:1;min-height:0;border-radius:10px;border:6px solid #fffaf5;
  background:linear-gradient(to bottom,#bfe3f7 0%,#e3f4fb 70%,#d8efc8 70%,#bfe0a8 100%);
  box-shadow:0 4px 0 #e6c3b0,0 6px 14px var(--shadow);margin-bottom:8px;}
.title-window span{position:absolute;background:#fffaf5;}
.title-window span:first-of-type{left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%);}
.title-window span:last-of-type{top:50%;left:0;right:0;height:5px;transform:translateY(-50%);}
/* October: a jack-o'-lantern on the windowsill (season.js) */
.title-window .title-pumpkin{position:absolute;z-index:1;font-style:normal;right:-62px;bottom:-14px;font-size:30px;line-height:1;}
.title-window::before,.title-window::after{content:'';position:absolute;top:-10px;bottom:-8px;width:30px;background:linear-gradient(90deg,#f8bbd0,#f48fb1);border-radius:6px 6px 14px 14px;opacity:.95;}
.title-window::before{left:-26px;}
.title-window::after{right:-26px;}
.title-facts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.title-facts span{background:rgba(255,255,255,.8);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;color:var(--text);box-shadow:0 2px 6px var(--shadow);}
.title-facts b{color:#ad1457;}
.title-online{margin-top:6px;}
.title-online[hidden]{display:none;}
.title-play{min-width:240px;font-size:22px;padding:14px 36px;}
.title-news{position:relative;border:none;cursor:pointer;touch-action:manipulation;font:900 14px 'Nunito',sans-serif;color:#6a1b9a;background:#fff;border-radius:18px;padding:8px 16px;min-height:40px;box-shadow:0 3px 10px var(--shadow);}
.title-news::after{content:'';position:absolute;top:-7px;left:26px;border:7px solid transparent;border-top:none;border-bottom-color:#fff;} /* the bubble's tail, up toward Play */
.news-dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#e91e63;border:2px solid #fff;animation:newsPulse 1.6s ease-in-out infinite;}
.news-dot[hidden]{display:none;}
@keyframes newsPulse{50%{transform:scale(1.25);}}
#news-box{position:absolute;inset:0;z-index:40;background:rgba(40,20,50,.45);display:flex;align-items:center;justify-content:center;padding:16px;}
#news-box[hidden]{display:none;}
#mail-box{position:absolute;inset:0;z-index:45;background:rgba(40,20,50,.45);display:flex;align-items:center;justify-content:center;padding:16px;}
#mail-box[hidden]{display:none;}
#mail-list{display:flex;flex-direction:column;gap:14px;}
#mail-list section{border-bottom:1px dashed #f0d6e6;padding-bottom:12px;}
#mail-list section:last-child{border-bottom:none;padding-bottom:0;}
#mail-list h4{margin:0;font:900 15px 'Nunito',sans-serif;color:#6a1b9a;}
#mail-list p{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--text);line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;}
#mail-list a{color:#8e24aa;}
.mail-when{font-size:11px;font-weight:800;color:#a1887f;}
.mail-gift{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.mail-gift.done{font-size:12px;font-weight:800;color:#2e7d32;text-align:center;}
.mail-gift-note{font-size:11px;font-weight:800;color:#a1887f;text-align:center;}
.mail-gift-note:empty{display:none;}
.mail-new{font-size:11px;color:#fff;background:#e91e63;border-radius:999px;padding:1px 7px;vertical-align:middle;}
.mail-empty{text-align:center;font-weight:800;color:#8d6e63;}
.btn.title-mail{position:relative;padding:8px 14px;font-size:14px;min-height:44px;}
.title-mail[hidden]{display:none;}
.title-mail.has-new{animation:mailWiggle 2.4s ease-in-out infinite;}
@keyframes mailWiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}88%{transform:rotate(10deg)}92%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}
html.calm .title-mail.has-new{animation:none;}
#hud-mail[hidden]{display:none;}
#hud-mail-count{color:#e91e63;}
.news-card{background:#fffaf5;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.3);width:100%;max-width:420px;max-height:calc(100% - 32px);overflow-y:auto;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;}
.news-card h3{margin:0;text-align:center;font:900 22px 'Nunito',sans-serif;color:#ad1457;}
.news-card h4{margin:6px 0 4px;font:900 14px 'Nunito',sans-serif;color:#6a1b9a;}
.news-card ul{margin:0;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:6px;}
.news-card li{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;}
.news-card .btn{align-self:center;}
.title-welcome{font-size:13px;font-weight:800;color:#6d4c41;background:rgba(255,250,245,.75);border-radius:999px;padding:4px 12px;}
.title-welcome:empty{display:none;}
.title-safe{border:none;cursor:pointer;touch-action:manipulation;font:800 13px 'Nunito',sans-serif;color:#6a1b9a;background:rgba(255,250,245,.9);border-radius:999px;padding:8px 14px;min-height:40px;box-shadow:0 2px 8px var(--shadow);}
.title-safe[hidden],.title-safe-row[hidden]{display:none;}
.title-safe-row{display:flex;gap:6px;align-items:center;}
.title-safe-row#title-move{margin-top:6px;}
#link-moving{display:none;text-align:center;font-size:18px;}
#link-screen.moving>*{display:none;}
#link-screen.moving>#link-moving{display:block;}
#link-screen.moving>#link-back{display:inline-block;}
.title-safe-no{border:none;cursor:pointer;background:rgba(255,250,245,.75);color:#8d6e63;border-radius:50%;width:40px;height:40px;font:900 14px 'Nunito',sans-serif;}
#safe-code{display:flex;flex-direction:column;gap:8px;align-items:center;}
#safe-code[hidden]{display:none;}
#safe-code-text{font:400 18px 'Fredoka One',sans-serif;letter-spacing:.5px;white-space:nowrap;color:#4a148c;background:#f3e5f5;border-radius:12px;padding:10px 12px;user-select:all;-webkit-user-select:all;text-align:center;}
#link-screen .link-restore{display:none;}
#link-screen.restore .link-restore{display:block;}
#link-screen.restore h2 .link-restore{display:inline;}
#link-screen.restore .link-normal,#link-screen.restore #link-steps>.link-card:first-child{display:none;}
#link-passkey[hidden]{display:none;}
#link-steps .link-row{flex-wrap:wrap;justify-content:center;}
#link-screen.restore #link-input,#link-input.long{width:100%;max-width:300px;font-size:17px;letter-spacing:.5px;} /* (a recovery code is 19 long) */
.title-logo{
  font-family:'Fredoka One',cursive;
  font-size:52px;color:var(--text);
  text-shadow:3px 3px 0 var(--pink),6px 6px 0 rgba(244,143,177,.25);
  letter-spacing:2px;text-align:center;
  animation:titleBounce 2.2s ease-in-out infinite;
}
.title-sub{font-size:14px;color:#a0887a;font-weight:700;text-align:center;line-height:1.7;}
/* The first time a new player taps Play, the style screen welcomes them instead (ui.js) */
#custom-screen .first-run-only{display:none;}
#custom-screen.first-run .first-run-only{display:flex;}
#custom-screen.first-run .normal-only{display:none;}
#custom-screen.first-run h2 .first-run-only{display:inline;}
#custom-screen.first-run .first-run-note{display:block;}
#custom-screen.first-run .locked{display:none;} /* a new cat starts with the free looks; the rest are in the shop */
#custom-screen.first-run .btn-row.first-run-only{position:sticky;bottom:14px;z-index:2;}
.first-run-note{font-size:13px;font-weight:700;color:#8d6e63;text-align:center;line-height:1.5;justify-content:center;}
/* The cat on its round bed, just in front of the wall */
#title-cat-preview{
  position:relative;width:150px;height:118px;flex-shrink:0;
  display:flex;align-items:flex-end;justify-content:center;
}
#title-cat-preview::before{content:'';position:absolute;left:8px;right:8px;bottom:4px;height:44px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,#fce4ec 0 48%,#f48fb1 52% 72%,#e57399 76%);box-shadow:0 6px 10px rgba(120,80,50,.22);}
#title-cat-preview canvas{display:block;position:relative;margin-bottom:6px;}

/* ── CUSTOM ── */
#custom-screen{
  background:linear-gradient(170deg,#e8f5e9 0%,#f3e5f5 60%,#fde8f5 100%);
  justify-content:flex-start;padding-top:16px;
  gap:10px;
}
#custom-screen h2{
  font-family:'Fredoka One',cursive;
  font-size:28px;color:var(--text);
  text-shadow:2px 2px 0 var(--pink);
  margin-top:4px;
}
.custom-section{width:100%;max-width:360px;}
.custom-label{
  font-size:12px;font-weight:900;color:#b06090;
  text-transform:uppercase;letter-spacing:1px;
  margin-bottom:6px;display:block;
}
.swatch-row{display:flex;gap:6px;flex-wrap:wrap;}
.swatch{
  width:30px;height:30px;border-radius:50%;
  border:3px solid transparent;cursor:pointer;
  transition:transform .12s,border-color .12s;
  touch-action:manipulation;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.swatch.selected{border-color:#5d4037;transform:scale(1.2);}
.swatch:active{transform:scale(0.9);}
.option-row{display:flex;gap:7px;flex-wrap:wrap;}
.opt-btn{
  padding:6px 12px;border-radius:20px;
  border:2.5px solid transparent;
  background:white;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;
  color:var(--text);box-shadow:0 2px 8px var(--shadow);
  transition:all .12s;touch-action:manipulation;
}
.opt-btn.selected{border-color:var(--pink);background:#fce4ec;color:#ad1457;}
.opt-btn:active{transform:scale(0.93);}

/* cat preview card */
#custom-preview-wrap{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;
  position:sticky;top:0;z-index:3;width:calc(100% + 36px);margin:0 -18px;padding:8px 18px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(252,238,244,0.97) 80%,rgba(252,238,244,0));
}
#preview-canvas-wrap{
  width:100px;height:100px;border-radius:50%;
  background:white;box-shadow:0 4px 18px var(--shadow),0 0 0 3px rgba(244,143,177,0.3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#cat-name-show{
  padding:8px 18px;border-radius:30px;
  border:2.5px solid #f8bbd0;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:700;
  color:var(--text);background:white;text-align:center;outline:none;
  width:180px;box-shadow:0 2px 8px var(--shadow);
}


/* ── GAME SELECT ── */
#level-screen{
  background:linear-gradient(170deg,#fff9f0 0%,#fce4ec 60%,#f3e5f5 100%);
  justify-content:flex-start;
  padding-top:14px;
}
#level-screen h2{
  font-family:'Fredoka One',cursive;font-size:23px;white-space:nowrap;
  color:var(--text);text-shadow:2px 2px 0 var(--peach);
  flex-shrink:0;
}
.level-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px;flex-shrink:1;}
.level-card[hidden]{display:none;}
.level-card{
  background:white;border-radius:16px;padding:11px 16px;
  border:3px solid transparent;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 14px var(--shadow);
  transition:all .15s;touch-action:manipulation;
  flex-shrink:0;
  min-height:60px;
}
.level-card.unlocked{border-color:var(--pink);}
.level-card:active:not(.locked){transform:scale(0.97);}
.level-icon{font-size:32px;flex-shrink:0;}
.level-icon svg{display:block;}
.level-card-name{font-size:15px;font-weight:900;color:var(--text);}
.level-card-desc{font-size:11px;font-weight:700;color:#a0887a;margin-top:2px;}
.level-card-text{flex:1;}
/* A game's own 🏆 leaderboard, at the right of its card (a big enough target on a phone) */
.card-board{flex-shrink:0;margin:-8px -10px -8px 0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:#fff8e1;font-size:18px;box-shadow:inset 0 0 0 2px #ffe082;}
.card-board:active{transform:scale(0.92);}
.level-card.locked .card-board{display:none;}
/* The game menu, grouped by the room each game is in (ui.js renderGameMenu) */
.room-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 2px -2px;
  font-size:13px;font-weight:900;color:#8d6e63;}
.room-head .room-lock,.room-locked .room-lock{font-size:11px;font-weight:900;color:#fff;background:#b39ddb;border-radius:10px;padding:2px 8px;}
.room-locked{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;width:100%;text-align:left;cursor:pointer;
  background:#faf6fd;border:2px dashed #d1c4e9;border-radius:14px;padding:9px 12px;font:inherit;color:inherit;touch-action:manipulation;}
.room-locked:active{transform:scale(0.98);}
.room-locked .rl-name{font-size:14px;font-weight:900;color:var(--text);}
.room-locked .rl-games{grid-column:1/2;font-size:11px;font-weight:700;color:#9575cd;}
.room-locked .room-lock{grid-row:1/3;grid-column:2;}
.head-home{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:none;background:#fff;box-shadow:0 2px 8px var(--shadow);
  font-size:18px;font-weight:900;color:var(--text);cursor:pointer;touch-action:manipulation;}
.level-card.locked{border-color:#e0d6d0;background:#faf6f3;}
.level-card.locked .level-icon{filter:grayscale(1);opacity:.5;}
.level-card.locked .level-card-name::after{content:' 🔒';}

/* ── THE CAT MAP (places Out & About) ── */
#map-screen{background:linear-gradient(170deg,#fff8e1 0%,#f1f8e9 60%,#e3f2fd 100%);justify-content:flex-start;padding-top:16px;gap:8px;}
#map-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #ffe082;}
#map-canvas{width:100%;max-width:360px;aspect-ratio:360/500;border-radius:14px;box-shadow:0 4px 14px rgba(93,64,55,.18);cursor:pointer;touch-action:manipulation;}
#map-note{font-size:13px;font-weight:700;color:#8d6e63;text-align:center;min-height:18px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── GAME OVER / COMPLETE ── */
#gameover-screen{background:linear-gradient(170deg,#fde8f5,#f3e5f5);}
#levelcomplete-screen{background:linear-gradient(170deg,#e8f5e9,#f3e5f5);}
#gameover-screen h2,#levelcomplete-screen h2{
  font-family:'Fredoka One',cursive;font-size:36px;
  color:var(--text);text-align:center;
}
.result-emoji{font-size:72px;animation:titleBounce 1.5s ease-in-out infinite;}
.result-score{font-size:22px;font-weight:900;color:var(--text);}

/* ── BUTTONS ── */
.btn{
  background:linear-gradient(135deg,var(--pink),var(--lavender));
  color:white;border:none;
  padding:12px 36px;border-radius:50px;
  font-family:'Fredoka One',cursive;font-size:18px;
  cursor:pointer;
  box-shadow:0 5px 0 #b06090,0 8px 18px rgba(200,100,150,.3);
  transition:transform .1s,box-shadow .1s;touch-action:manipulation;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b06090;}
.btn-green{background:linear-gradient(135deg,#66bb6a,#26a69a);box-shadow:0 5px 0 #2e7d32,0 8px 16px rgba(50,150,80,.3);}
.btn-green:active{box-shadow:0 2px 0 #2e7d32;}
.btn-sm{font-size:14px;padding:9px 24px;}
.btn-grey{background:linear-gradient(135deg,#ce93d8,#b0bec5);box-shadow:0 5px 0 #7b6080;}
.btn-grey:active{box-shadow:0 2px 0 #7b6080;}
.btn-red{background:linear-gradient(135deg,#ef5350,#d81b60);box-shadow:0 5px 0 #8e1b3a;}
.btn-red:active{box-shadow:0 2px 0 #8e1b3a;}
.btn:disabled{opacity:.6;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ── HUD ── */
#hud{
  position:absolute;top:0;left:0;right:0;
  display:none;
  padding:max(8px,env(safe-area-inset-top)) 10px 6px;
  background:linear-gradient(180deg,rgba(255,249,240,0.96) 60%,rgba(255,249,240,0));
  z-index:20;pointer-events:none;
}
#hud .hud-row{pointer-events:none;}
#hud button{pointer-events:auto;touch-action:manipulation;}
#hud #hud-treats{pointer-events:auto;touch-action:manipulation;cursor:default;} /* (a triple tap: 💼 Boss, input.js) */
.hud-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.hud-pill{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);
  border-radius:20px;padding:5px 9px;
  display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 8px var(--shadow);
  font-size:12px;font-weight:700;color:var(--text);
  min-height:32px;
}
#games-back-btn{
  background:rgba(244,143,177,0.18);
  border:1.5px solid rgba(244,143,177,0.5);
  font-size:13px;
}
#key-indicator{font-size:14px;}

/* ── GAME CANVAS ── */
#game-canvas-wrap{
  position:absolute;inset:0;
  display:none;
  background:#1a1a2e;
  touch-action:none; /* (a hold or drag anywhere over the game is the game's, never a scroll or zoom) */
}
#gameCanvas{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  touch-action:none;
}

/* ── TOUCH CONTROLS ── */
#touch-controls{
  position:absolute;bottom:0;left:0;right:0;
  display:none;
  padding:12px 16px 20px;
  justify-content:space-between;align-items:flex-end;
  pointer-events:none;
  z-index:25;
}
#joystick-zone{
  width:110px;height:110px;
  border-radius:50%;
  /* See-through, with no blur, so what's behind it stays visible; a little stronger while held */
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.35);
  position:relative;pointer-events:auto;
  touch-action:none;
  transition:background .15s,border-color .15s;
}
#joystick-zone.held{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.55);}
#joystick-knob{
  position:absolute;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.35);
  border:2.5px solid rgba(244,143,177,0.6);
  box-shadow:0 2px 6px rgba(180,100,140,.15);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  transition:transform 0.05s,background .15s;
  pointer-events:none;
}
#joystick-zone.held #joystick-knob{background:rgba(255,255,255,0.6);}
.action-btns{display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:auto;}
.touch-action-btn{
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(6px);
  border:2.5px solid rgba(244,143,177,0.6);
  box-shadow:0 3px 12px rgba(180,100,140,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  transition:transform .08s,background .1s;
  pointer-events:auto;
}
.touch-action-btn.pressed{background:rgba(244,143,177,0.5);transform:scale(0.88);}
#scratch-btn{
  background:linear-gradient(135deg,rgba(244,143,177,0.7),rgba(206,147,216,0.7));
  border-color:rgba(244,143,177,0.9);width:72px;height:72px;font-size:26px;
  position:relative;
}
/* Three claw scratches */
.claw-icon{width:38px;height:38px;fill:#fff;stroke:#a8507f;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(120,50,90,.35));pointer-events:none;}
/* In a mini-game with a jump (Catty Uppy), the claw becomes an up arrow */
.jump-icon{display:none;width:34px;height:34px;fill:#fff;stroke:#a8507f;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(120,50,90,.35));pointer-events:none;}
#touch-controls.jump-mode .claw-icon{display:none;}
#touch-controls.jump-mode .jump-icon{display:block;}
/* What 🐾 does right now: Scratch, Water, Kick, Use… */
#paw-label{
  position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  font:900 10px 'Nunito',sans-serif;color:#fff;background:rgba(176,96,144,0.9);
  padding:1px 7px;border-radius:8px;white-space:nowrap;pointer-events:none;
}
#paw-label:empty{display:none;}
.go-tip{font-size:13px;color:#6d4c41;background:rgba(255,255,255,0.7);border-radius:12px;padding:8px 14px;max-width:280px;text-align:center;line-height:1.4;}
.go-tip:empty{display:none;}
#dash-btn{width:52px;height:52px;font-size:20px;margin-right:10px;}
#dash-btn.cooling{opacity:0.45;}
#touch-controls.hide-dash #dash-btn{display:none;}

/* ── POPUP SCORES ── */
.pop{
  position:absolute;pointer-events:none;z-index:30;
  font-size:16px;font-weight:900;
  font-family:'Nunito',sans-serif;color:var(--text);
  animation:popUp 1.1s ease-out forwards;
  white-space:nowrap;
}
@keyframes popUp{0%{transform:translateY(0) scale(.7);opacity:1;}100%{transform:translateY(-60px) scale(1.1);opacity:0;}}
@keyframes titleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes doorShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes keyPulse{0%,100%{filter:drop-shadow(0 0 4px #ffd700)}50%{filter:drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 4px #ff8c00)}}

@media(pointer:coarse){#touch-controls{display:flex;}}
#touch-controls.hide-joystick #joystick-zone{visibility:hidden;pointer-events:none;}
#touch-controls.hidden-all{display:none !important;}
#touch-controls.help-hidden{visibility:hidden;pointer-events:none;}
#touch-controls.hide-scratch .action-btns{visibility:hidden;pointer-events:none;}
/* ── BUTTON RESETS + KEYBOARD FOCUS ── */
button.swatch,button.opt-btn,button.level-card,button.story-card,button.hud-pill{font:inherit;color:inherit;}
button.swatch{padding:0;}
button.level-card{width:100%;text-align:left;font-family:'Nunito',sans-serif;}
.level-card-text,.level-card-name,.level-card-desc{display:block;}
button.hud-pill{border:none;cursor:pointer;font-family:'Nunito',sans-serif;}
.hud-pill.hud-icon{padding:5px 7px;font-size:14px;}
/* Thumb-sized on touch screens: 36 px tall buttons whose tap area reaches a few px further (a
   thumb wants ~44 px), while seven of them and a 5-digit treat count still fit across a phone */
@media (pointer:coarse){
  #hud{padding-left:6px;padding-right:6px;}
  #hud .hud-row{gap:4px;}
  #hud #sticker-count{font-size:11px;}
  #hud .rpg-only.hud-pill{gap:2px;padding-left:6px;padding-right:6px;}
  #hud .hud-pill{min-height:36px;padding-left:7px;padding-right:7px;}
  #hud .hud-pill.hud-icon{min-width:34px;justify-content:center;font-size:16px;padding:5px 5px;}
  #hud button.hud-pill{position:relative;}
  #hud button.hud-pill::after{content:'';position:absolute;inset:-6px -2px;}
}
.hud-spacer{flex:1;}
:focus{outline:none;}
:focus-visible{outline:3px solid #7e57c2;outline-offset:3px;}

/* ── STORY WALKS ── */
.section-label{
  width:100%;max-width:340px;flex-shrink:0;
  font-size:12px;font-weight:900;color:#b06090;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:-6px;
}
.story-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:340px;flex-shrink:0;}
.story-card{
  background:white;border-radius:16px;padding:10px 8px;
  border:3px solid var(--peach);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  box-shadow:0 4px 14px var(--shadow);font-family:'Nunito',sans-serif;
  transition:transform .15s;touch-action:manipulation;
}
.story-card:active:not(:disabled){transform:scale(0.97);}
.map-card{grid-column:1/-1;background:linear-gradient(135deg,#fff8e1,#f1f8e9);border-color:#c5e1a5;}
.story-icon{font-size:28px;}
.story-name{font-size:13px;font-weight:900;color:var(--text);}
.story-sub{font-size:10px;font-weight:700;color:#a0887a;}

/* ── TREATS / SHOP ── */
.treat-pill{
  background:white;border-radius:20px;padding:4px 12px;
  font-size:14px;font-weight:900;color:var(--text);
  box-shadow:0 2px 8px var(--shadow);flex-shrink:0;
}
.treat-hint{font-size:11px;font-weight:700;color:#a0887a;}
.level-head{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.swatch,.opt-btn{position:relative;}
.swatch.locked{opacity:.55;}
.swatch.locked::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;}
.opt-btn.locked{background:#f5f0ee;color:#a0887a;}
.price{font-size:10px;font-weight:900;margin-left:3px;}
.swatch .price{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin:2px 0 0;white-space:nowrap;color:#8d6e63;}
#color-swatches{padding-bottom:12px;}

/* ── DAILY GOALS ── */
.daily-box{width:100%;max-width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;}
#daily-goals{background:white;border-radius:16px;padding:8px 12px;box-shadow:0 4px 14px var(--shadow);}
.daily-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;font-weight:700;color:var(--text);}
.daily-row.done .daily-text{text-decoration:line-through;color:#a0887a;}
.daily-text{flex:1;}
.daily-count{font-weight:900;color:#b06090;font-size:11px;}
.daily-foot{font-size:10px;font-weight:700;color:#a0887a;text-align:center;margin-top:3px;}
.menu-links{flex-shrink:0;}

/* ── COLLECTION ── */
#collection-screen{background:linear-gradient(170deg,#fff9f0 0%,#e8f5e9 60%,#f3e5f5 100%);justify-content:flex-start;padding-top:16px;}
#collection-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 var(--mint);flex-shrink:0;}
#collection-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
#collection-tabs button{
  padding:6px 10px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#collection-tabs button[aria-selected="true"]{border-color:var(--pink);background:#fce4ec;color:#ad1457;}
#collection-summary{font-size:12px;font-weight:900;color:#b06090;flex-shrink:0;min-height:16px;}
#collection-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;width:100%;max-width:360px;flex-shrink:0;}
.coll-card{background:white;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;box-shadow:0 3px 10px var(--shadow);}
#collection-body.compact .coll-card{padding:7px 4px;}
#collection-body.compact .coll-title{display:none;}
#collection-body.compact .coll-emoji{font-size:26px;}
.coll-head{grid-column:1/-1;font-size:13px;font-weight:900;color:#8d6e63;margin:6px 2px -2px;}
.coll-card.missing{background:#f7f2f0;box-shadow:none;border:2px dashed #e0d6d0;}
.coll-emoji{font-size:28px;}
.coll-title{font-size:12px;font-weight:900;color:var(--text);}
.coll-sub{font-size:10px;font-weight:700;color:#a0887a;}

/* ── LEADERBOARDS ── */
#board-screen{background:linear-gradient(170deg,#fff8e1 0%,#fce4ec 55%,#ede7f6 100%);justify-content:flex-start;padding-top:16px;}
#board-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #ffe082;flex-shrink:0;}
.board-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
.board-tabs button{
  padding:6px 10px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#board-pick{display:flex;align-items:center;gap:6px;flex-shrink:0;width:100%;max-width:340px;}
#board-pick button{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:none;background:white;
  box-shadow:0 2px 8px var(--shadow);font-size:22px;font-weight:900;line-height:1;color:#ad1457;cursor:pointer;touch-action:manipulation;padding:0 0 3px;}
#board-games{flex:1;min-width:0;height:40px;padding:0 34px 0 14px;border-radius:20px;border:2.5px solid var(--pink);
  background:#fce4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ad1457' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  -webkit-appearance:none;appearance:none;font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;color:#ad1457;
  cursor:pointer;text-overflow:ellipsis;box-shadow:0 2px 8px var(--shadow);}
#board-games:focus-visible,#board-pick button:focus-visible{outline:3px solid #f8bbd0;outline-offset:2px;}
.board-tabs button[aria-selected="true"]{border-color:var(--pink);background:#fce4ec;color:#ad1457;}
#board-title{font-size:15px;font-weight:900;color:var(--text);flex-shrink:0;}
#board-note{font-size:11px;font-weight:800;color:#b06090;text-align:center;flex-shrink:0;min-height:15px;max-width:340px;}
#board-list{list-style:none;margin:0;padding:0;width:100%;max-width:340px;display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
.board-row{display:flex;align-items:center;gap:8px;background:white;border-radius:14px;padding:4px 12px 4px 8px;box-shadow:0 2px 8px var(--shadow);font-size:13px;font-weight:800;color:var(--text);}
.board-row.me{background:#fff3e0;border:2px solid #ffb74d;}
.board-rank{width:30px;text-align:center;font-weight:900;font-size:13px;color:#a0887a;flex-shrink:0;}
.board-row:nth-child(-n+3) .board-rank{font-size:20px;}
.board-cat{width:34px;height:34px;flex-shrink:0;background:#fdf1f6;border-radius:50%;}
.board-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-score{font-weight:900;color:#ad1457;flex-shrink:0;}
.board-gap,.board-empty{text-align:center;color:#a0887a;font-weight:800;font-size:13px;padding:6px;}
#board-me{font-size:12px;font-weight:700;color:var(--text);text-align:center;flex-shrink:0;display:flex;flex-direction:column;gap:3px;}
.board-reroll{border:none;background:white;border-radius:50%;width:28px;height:28px;font-size:15px;cursor:pointer;box-shadow:0 2px 6px var(--shadow);vertical-align:middle;touch-action:manipulation;}
.board-code{font-size:11px;color:#a0887a;font-weight:800;letter-spacing:.5px;}
#lc-rank{font-size:14px;font-weight:900;color:#ad1457;text-align:center;min-height:20px;white-space:pre-line;}
#jukebox[hidden],#lc-share[hidden],#lc-chal-list[hidden],#lc-chal-btn[hidden],#lc-share-btn[hidden]{display:none;}
/* The leaderboard opened from a result screen goes back to it (and only there) */
/* The age question, and what's different under 13 (js/age.js: <html class="kid">) */
#age-screen{gap:12px;}
#age-screen h2{margin-bottom:0;}
.age-note{font-size:15px;font-weight:800;color:#8d6e63;text-align:center;}
.age-small{font-size:12px;font-weight:700;color:#a1887f;text-align:center;line-height:1.4;}
#age-screen select{font:800 16px Nunito,sans-serif;padding:10px 14px;border-radius:14px;border:2px solid #f8bbd0;width:100%;max-width:320px;background:#fff;color:#5d4037;}
#age-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:320px;}
#age-quick button,#bug-pick button{font:800 14px Nunito,sans-serif;border:2px solid #f8bbd0;background:#fff;border-radius:14px;padding:9px 4px;color:#5d4037;cursor:pointer;touch-action:manipulation;}
#age-quick button.on,#bug-pick button.on{background:#f48fb1;color:#fff;border-color:#f48fb1;}
#age-month-row{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
#age-month-row[hidden]{display:none;}
#bug-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0;}
#bug-pick button{font-size:13px;padding:9px 6px;}
html:not(.kid) .kid-only{display:none !important;}
html.kid .adult-only{display:none !important;}
#cat-name-show{display:block;min-width:120px;width:auto;max-width:200px;text-align:center;box-sizing:border-box;}
#board-screen:not(.from-result) .board-to-result,#board-screen.from-result .board-home{display:none;}
#board-screen:not(.from-menu) .board-to-menu,#board-screen.from-result .board-to-menu{display:none;}
#lc-chal-list{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;}
.lc-chal-note{margin:0;font-size:13px;font-weight:800;color:#6a1b9a;text-align:center;}
.lc-chal-friends{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.fr-chal .fr-who span{color:#6a1b9a;}

/* ── LINK A DEVICE ── */
.link-btn{background:none;border:none;color:#8d6e63;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer;padding:6px;touch-action:manipulation;}
.board-link{margin-top:6px;align-self:center;}
#link-screen{background:linear-gradient(170deg,#e3f2fd 0%,#fce4ec 60%,#fff8e1 100%);justify-content:flex-start;padding-top:20px;}
#link-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #b3e5fc;flex-shrink:0;}
#friends-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #c5e1a5;flex-shrink:0;}
#settings-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #d1c4e9;flex-shrink:0;}
.link-intro{font-size:13px;font-weight:700;color:#8d6e63;text-align:center;max-width:300px;flex-shrink:0;}
#link-steps,#link-choose{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;align-items:center;flex-shrink:0;}
#link-steps[hidden],#link-choose[hidden]{display:none;}
#map-town,.coll-news{white-space:pre-line;font-size:12px;font-weight:800;color:#6d4c41;text-align:center;background:#fff8e1;border:1.5px solid #ffcc80;border-radius:12px;padding:6px 12px;max-width:340px;box-sizing:border-box;}
#map-town:empty{display:none;}
.coll-news{grid-column:1 / -1;margin:0 auto 4px;width:100%;}
/* Friends (js/friends.js) */
/* A long list starts at the top: centred content taller than the screen can't scroll up to its start */
#friends-screen{justify-content:flex-start;}
.fr-open{position:relative;}
.fr-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:#e53935;color:#fff;font-size:11px;font-weight:900;line-height:18px;padding:0 4px;box-sizing:border-box;}
.fr-card{background:white;border-radius:18px;padding:12px 14px;width:100%;max-width:360px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 3px 12px var(--shadow);}
.fr-card[hidden]{display:none;}
.fr-step{font-size:13px;font-weight:900;color:var(--text);}
.fr-code-row{display:flex;align-items:center;gap:10px;}
.fr-code-row b{font-size:22px;letter-spacing:2px;color:#ad1457;font-family:monospace,monospace;}
.fr-note{font-size:12px;font-weight:700;color:#8d6e63;text-align:center;max-width:340px;}
.fr-note:empty,.fr-msg:empty{display:none;}
.fr-msg{font-size:13px;font-weight:800;color:#6a1b9a;text-align:center;max-width:340px;}
.fr-section{width:100%;max-width:360px;display:flex;flex-direction:column;gap:6px;}
.fr-section:empty{display:none;}
.fr-head{font-size:13px;font-weight:900;color:var(--text);margin-top:4px;}
.fr-row{background:white;border-radius:14px;padding:8px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-shadow:0 2px 8px var(--shadow);}
.fr-who{flex:1;min-width:110px;display:flex;flex-direction:column;}
.fr-who b{font-size:14px;color:var(--text);}
.fr-who span{font-size:11px;font-weight:700;color:#8d6e63;}
.fr-acts{display:flex;gap:5px;}
.fr-acts .btn{padding:6px 10px;min-height:36px;font-size:13px;}
.fr-confirm{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;font-weight:800;color:var(--text);}
.fr-confirm .btn{padding:5px 10px;min-height:32px;font-size:12px;}
.fr-empty{font-size:13px;font-weight:700;color:#8d6e63;text-align:center;padding:10px;}
.fr-sent-name{font-size:12px;font-weight:700;color:#8d6e63;padding-left:6px;}
.set-card{background:white;border-radius:18px;padding:14px 16px;width:100%;max-width:340px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;box-shadow:0 3px 12px var(--shadow);}
.set-row{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:900;color:var(--text);}
.set-row output{font-size:13px;color:#ad1457;}
.set-card input[type=range]{width:100%;accent-color:var(--pink);height:28px;margin:0 0 6px;}
.set-card .option-row{justify-content:center;}
.set-note{font-size:12px;font-weight:700;color:#8d6e63;text-align:center;max-width:320px;}
.set-note:empty{display:none;}
#bug-text{width:100%;box-sizing:border-box;min-height:90px;resize:vertical;border:2px solid #f8bbd0;border-radius:12px;padding:8px 10px;font:700 16px Nunito,sans-serif;color:#5d4037;background:#fffaf3;}
#bug-text:focus{outline:none;border-color:var(--pink);}
.set-note a{color:#8e24aa;}
#set-delete-sure{display:flex;flex-direction:column;gap:8px;}
#set-delete-sure[hidden]{display:none;}
/* Calm motion (js/settings.js): no looping or sliding animations; score pops fade in place */
html.calm *:not(.pop),html.calm *:not(.pop)::before,html.calm *:not(.pop)::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
html.calm .season-fx{display:none;}
html.calm .pop{animation-name:popFade;}
@keyframes popFade{0%,60%{opacity:1;}100%{opacity:0;}}
.link-card{background:white;border-radius:18px;padding:14px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 3px 12px var(--shadow);}
.link-step{font-size:13px;font-weight:800;color:var(--text);text-align:center;}
#link-code{font-family:'Fredoka One',cursive;font-size:34px;letter-spacing:3px;color:#ad1457;min-height:0;}
#link-code:empty{display:none;}
.link-note{font-size:11px;font-weight:700;color:#a0887a;text-align:center;min-height:14px;}
.link-row{display:flex;gap:8px;align-items:center;}
#link-input,#fr-input{width:170px;box-sizing:border-box;font-family:'Fredoka One',cursive;font-size:19px;letter-spacing:1.5px;text-align:center;text-transform:uppercase;
  padding:8px;border-radius:14px;border:2.5px solid #f8bbd0;color:var(--text);background:#fffafc;}
#link-input:focus,#fr-input:focus{outline:none;border-color:var(--pink);}
#sm-rooms{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 12px;}
#sm-rooms[hidden]{display:none;}
.sm-rooms-note{width:100%;margin:0 0 2px;font-size:13px;font-weight:700;color:#6d4c41;}
/* (pale, so an example code or initials don't look already typed in) */
#link-input::placeholder,#fr-input::placeholder,.fr-tag-input::placeholder{color:#d7ccc8;opacity:1;}
#link-cats{display:flex;gap:10px;justify-content:center;width:100%;}
.link-cat{flex:1;max-width:160px;background:white;border:2.5px solid #f8bbd0;border-radius:18px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;font-family:'Nunito',sans-serif;box-shadow:0 3px 12px var(--shadow);touch-action:manipulation;}
.link-cat:hover{border-color:var(--pink);}
.link-cat:disabled{opacity:.6;cursor:default;}
.link-cat canvas{background:#fdf1f6;border-radius:50%;}
.link-cat-where{font-size:10px;font-weight:800;color:#a0887a;}
.link-cat-name{font-size:15px;font-weight:900;color:var(--text);}
.link-cat-sub{font-size:11px;font-weight:800;color:#8d6e63;}
.link-cat-keep{margin-top:4px;font-size:12px;font-weight:900;color:#fff;background:var(--pink);border-radius:12px;padding:4px 10px;}

/* ── TOAST ── */
#toast{
  position:absolute;left:50%;top:max(56px,calc(env(safe-area-inset-top) + 48px));
  transform:translate(-50%,-12px);opacity:0;pointer-events:none;z-index:70;
  background:rgba(93,64,55,0.92);color:white;border-radius:18px;padding:8px 16px;
  font-size:13px;font-weight:900;text-align:center;max-width:90%;width:max-content;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .25s,transform .25s;
}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* ── 🐾 GETTING STARTED (tutorial.js): a card under the top bar, and pulses on what it means ── */
#tut-card{
  position:absolute;left:50%;top:max(54px,calc(env(safe-area-inset-top) + 46px));transform:translateX(-50%);z-index:22;
  display:flex;align-items:center;gap:6px;
  width:min(380px,calc(100% - 16px));box-sizing:border-box;padding:4px 4px 4px 8px;
  background:#fffaf3;border:2px solid #f48fb1;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.18);
}
#tut-card[hidden]{display:none;}
#tut-card .tut-n{flex:none;font-size:11px;font-weight:900;color:#fff;background:#ec407a;border-radius:9px;padding:2px 6px;}
#tut-card .tut-text{flex:1;font-size:12.5px;line-height:1.25;color:#4e342e;}
#tut-card .tut-go{flex:none;padding:5px 9px;font-size:12px;}
#tut-card .tut-skip{flex:none;border:0;background:none;font-size:15px;color:#a1887f;padding:4px;cursor:pointer;}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 0 rgba(236,64,122,.7);}50%{box-shadow:0 0 0 8px rgba(236,64,122,0);}}
#hud-phone-btn.tut-pulse,.ph-app.tut-pulse .ph-icon{animation:tutPulse 1.2s ease-in-out infinite;}

/* ── A FRIEND'S INVITE TO PLAY (invites.js) ── */
#invite-banner{
  position:absolute;left:50%;top:max(60px,calc(env(safe-area-inset-top) + 52px));transform:translateX(-50%);z-index:75;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  width:min(360px,calc(100% - 24px));box-sizing:border-box;padding:10px 12px;
  background:#fffaf3;border:3px solid #7e57c2;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:ib-in .3s ease-out;
}
#invite-banner[hidden]{display:none;}
#invite-banner b{flex:1;min-width:150px;font-size:14px;color:#4e342e;}
#ib-pic canvas{border-radius:50%;background:#fff8e1;display:block;}
.ib-acts{display:flex;gap:6px;}
@keyframes ib-in{from{transform:translate(-50%,-16px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}
.fr-acts .btn-duel{background:#7e57c2;}
/* 🎮 Play: which game to invite a friend to */
.fr-play{flex-basis:100%;display:flex;flex-direction:column;gap:6px;padding-top:4px;}
.fr-play > span{font-size:13px;font-weight:800;color:var(--text);}
.fr-play .fr-play-game{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:#ede7f6;color:#4527a0;min-height:44px;}
.fr-play .fr-play-game small{font-size:11px;font-weight:700;color:#6d4c41;}

/* ← says where it goes when the top bar has room for the word (fitHud() in ui.js hides it when not) */

#app.scaled{width:420px;height:700px;}
/* The Dungeon on a wide screen (setWide() in ui.js): the app is as wide as the screen. On a phone
   on its side the top bar goes see-through, as the Dungeon draws its health strip in its middle */
#app.wide{border-radius:0;}
#app.wide.compact #hud{background:none;}
/* …and keeps only ← and ⚙️ (the other buttons move into ⚙️'s menu), so the Dungeon's own row of
   health, floor, tonic and bag has the top edge */
#app.wide.compact #hud .hud-icon:not(#hud-phone-btn),#app.wide.compact #hud-treats{display:none;}
#hud-menu .menu-more{display:none;}
/* (a dot on ⚙️ there for what the hidden buttons' badges would say: red for friends' requests and
   challenges, green for today's goals left) */
#hud-menu-btn{position:relative;}
/* ✈️ Play offline is on (js/offline.js): a little plane on ⚙️, so quiet friends and boards make sense */
html.offline #hud-menu-btn::after{content:'✈️';position:absolute;bottom:-3px;left:-4px;font-size:10px;line-height:1;}
.menu-dot{display:none;position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:#43a047;}
#app.wide.compact #hud-menu-btn.dot-goals .menu-dot,#app.wide.compact #hud-menu-btn.dot-friends .menu-dot{display:block;}
#hud-menu-btn.dot-friends .menu-dot{background:#e53935;}
#hud-menu-btn.dot-mail .menu-dot{display:block;background:#e53935;} /* (an unread message: everywhere, not only in the compact Dungeon) */
#app.wide.compact #hud-menu .menu-more{display:flex;}
#app.wide.compact #hud-menu{display:grid;grid-template-columns:1fr 1fr;min-width:340px;}
#app.wide.compact #hud-menu.hidden{display:none;}
#hud-menu{max-height:calc(100% - 60px);overflow-y:auto;}
@media(min-width:421px){
  #app{box-shadow:0 0 100px rgba(244,143,177,0.5),0 0 0 1px rgba(255,255,255,0.08);}
}
.opt-btn[hidden]{display:none;}
/* The logo is two short lines ("Planet / Hairball ✨"), each kept whole on narrow phones */
.title-logo{white-space:nowrap;font-size:50px;line-height:1.02;}
@media(max-width:400px){.title-logo{font-size:44px;letter-spacing:1px;}}

/* ── CAT SHOP ── */
#shop-screen{background:linear-gradient(170deg,#fff9f0 0%,#fce4ec 55%,#f3e5f5 100%);justify-content:flex-start;padding-top:16px;}
#shop-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 var(--pink);flex-shrink:0;}
#shop-deal{width:100%;max-width:360px;flex-shrink:0;}
.shop-deal-card{
  width:100%;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;cursor:pointer;
  border:2.5px dashed #ff8a65;background:#fff3e0;font:inherit;color:var(--text);text-align:left;
  box-shadow:0 3px 10px var(--shadow);touch-action:manipulation;
}
.deal-text{display:flex;flex-direction:column;gap:1px;font-size:12px;font-weight:800;}
.deal-text b{color:#e64a19;font-size:13px;}
.deal-text small{font-size:10px;color:#a0887a;}
#shop-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
#shop-tabs button{
  padding:6px 10px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#shop-tabs button[aria-selected="true"]{border-color:var(--pink);background:#fce4ec;color:#ad1457;}
/* Nine tabs: tighter on a phone so they sit in two rows (not three with one left over) */
@media (max-width:430px){#shop-tabs{gap:4px 3px;width:calc(100% + 24px);margin:0 -12px;}#shop-tabs button{padding:5px 5px;font-size:11px;border-width:2px;}}
#shop-note{font-size:11px;font-weight:700;color:#a0887a;text-align:center;max-width:340px;flex-shrink:0;}
#shop-note:empty{display:none;}
#shop-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;width:100%;max-width:360px;flex-shrink:0;}
.shop-head{grid-column:1/-1;font-size:13px;font-weight:900;color:#8d6e63;margin:6px 2px -2px;text-align:left;}
.shop-card{
  position:relative;background:white;border-radius:14px;padding:8px 6px 7px;border:2.5px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer;
  box-shadow:0 3px 10px var(--shadow);font:inherit;color:var(--text);touch-action:manipulation;
}
.shop-card:active{transform:scale(0.96);}
.shop-card.owned{background:#f1f8e9;}
.shop-card.unavailable{background:#f7f2f0;box-shadow:none;border:2px dashed #e0d6d0;}
.shop-card.unavailable .shop-pic{opacity:.5;}
.shop-card.luxury{border-color:#ce93d8;}
.shop-card.legendary{border-color:#ffb300;background:linear-gradient(160deg,#fffde7,#fff);}
.shop-pic{display:flex;align-items:center;justify-content:center;border-radius:12px;line-height:1;}
.swatch-pic{border:3px solid white;box-shadow:0 0 0 1px #e0d6d0;border-radius:50%;}
.shop-card .swatch-pic{transform:scale(.8);}
.case-pic .cp-body{position:relative;isolation:isolate;display:block;width:46em;height:74em;margin-top:16em;box-sizing:border-box;padding:4em;
  border-radius:12em;background:var(--case);box-shadow:inset 0 0 0 1.2em var(--case-d),0 2em 4em rgba(0,0,0,.2);}
.cp-ear{position:absolute;top:-12em;width:20em;height:20em;background:var(--case);border-radius:14em 3em 2em 2em;z-index:-1;}
.cp-ear.l{left:3em;transform:rotate(-14deg);}
.cp-ear.r{right:3em;transform:rotate(14deg);border-radius:3em 14em 2em 2em;}
.cp-ear i{position:absolute;inset:3.5em 5em 9em;background:var(--case-i);border-radius:inherit;}
.cp-screen{position:relative;display:block;width:100%;height:100%;border-radius:9em;background:linear-gradient(160deg,#cbb6ff,#ffc6d9 55%,#ffe3c2);}
.cp-screen b{position:absolute;left:50%;top:3em;transform:translateX(-50%);width:14em;height:4.5em;border-radius:3em;background:#1a1420;}
.shop-name{font-size:12px;font-weight:900;line-height:1.15;}
.shop-price{font-size:11px;font-weight:900;color:#b06090;}
.shop-price s{color:#a0887a;font-weight:700;}
.shop-card.unavailable .shop-price{color:#a0887a;font-size:10px;}
.shop-tag{position:absolute;top:4px;right:4px;font-size:8px;font-weight:900;padding:2px 5px;border-radius:8px;background:#fce4ec;color:#ad1457;text-transform:uppercase;}
.shop-card.legendary .shop-tag{background:#ffecb3;color:#e65100;}
.shop-card.luxury .shop-tag{background:#f3e5f5;color:#6a1b9a;}
#shop-modal{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(40,20,40,0.45);padding:16px;}
#shop-modal.hidden{display:none;}
#sm-card{
  background:#fff9f0;border-radius:22px;padding:16px 18px;width:100%;max-width:300px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);border:3px solid var(--pink);
}
#sm-card{max-height:calc(100% - 8px);overflow-y:auto;}
#sm-card.bought{animation:sm-pop .5s ease;}
/* The big picture: your cat or car (turned with #sm-view), or the room with the item in it */
#sm-pic canvas{display:block;width:auto;height:min(170px,34vh);}
#sm-pic canvas.room-pic{height:min(200px,38vh);max-width:100%;object-fit:contain;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
#sm-pic canvas.room-pic.sm-tall{height:min(320px,50vh);}
#sm-view{gap:6px;}
#sm-view[hidden]{display:none;}
#sm-view .opt-btn{min-width:44px;padding:4px 10px;}
@keyframes sm-pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
#sm-tag{font-size:11px;font-weight:900;color:#6a1b9a;min-height:0;}
#sm-tag:empty{display:none;}
#sm-name{font-family:'Fredoka One',cursive;font-size:22px;color:var(--text);font-weight:400;}
#sm-desc{font-size:13px;font-weight:700;color:#8d6e63;}
#sm-when{font-size:12px;font-weight:900;color:#e64a19;}
#sm-when:empty{display:none;}
#sm-price{font-size:13px;font-weight:900;color:#b06090;}
#sm-go:disabled{opacity:.55;cursor:default;}
/* Cat Runner's menu icon: a cat on a little treadmill */
.runner-icon{position:relative;display:inline-flex;width:34px;height:40px;align-items:flex-start;justify-content:center;}
.runner-icon .ri-cat{font-size:24px;line-height:1;margin-top:3px;animation:ri-run .3s ease-in-out infinite alternate;}
.runner-icon::after{content:'';position:absolute;left:2px;right:2px;bottom:6px;height:6px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#37474f 0 4px,#546e7a 4px 7px);animation:ri-belt .4s linear infinite;}
.runner-icon::before{content:'';position:absolute;left:1px;bottom:8px;width:3px;height:26px;border-radius:2px;background:#90a4ae;transform:rotate(-12deg);}
@keyframes ri-run{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes ri-belt{from{background-position:0 0}to{background-position:-7px 0}}
@media (prefers-reduced-motion:reduce){.runner-icon .ri-cat,.runner-icon::after{animation:none;}}

/* Cat Tree Climb's menu icon: a cat bouncing on a little cat tree */
.climb-icon{position:relative;display:inline-flex;width:40px;height:40px;align-items:flex-start;justify-content:center;}
.climb-icon .ci-cat{position:relative;z-index:1;font-size:20px;line-height:1;margin-left:8px;animation:ci-hop .5s ease-in-out infinite alternate;}
.climb-icon::before{content:'';position:absolute;left:17px;top:14px;width:6px;height:24px;border-radius:2px;
  background:repeating-linear-gradient(180deg,#d7b98e 0 3px,#bfa074 3px 5px);}
.climb-icon::after{content:'';position:absolute;left:4px;right:4px;top:20px;height:5px;border-radius:3px;background:#bcaaa4;
  box-shadow:-2px 12px 0 -1px #bcaaa4, 0 17px 0 0 #a1887f;}
@keyframes ci-hop{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.climb-icon .ci-cat{animation:none;}}

/* ── THE CARD SHOP (js/cardshop.js) ── */
#cards-screen{background:linear-gradient(170deg,#f3e5f5 0%,#fce4ec 50%,#fff8e1 100%);justify-content:flex-start;padding-top:16px;gap:10px;}
#cards-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #ce93d8;flex-shrink:0;}
#cs-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
#cs-tabs button{
  padding:5px 8px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);white-space:nowrap;
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#cs-tabs button[aria-selected="true"]{border-color:#ab47bc;background:#f3e5f5;color:#6a1b9a;}
#cs-body{width:100%;max-width:370px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
.cs-keeper{display:flex;align-items:center;gap:10px;width:100%;}
.cs-keeper canvas{flex-shrink:0;background:#fff8e1;border-radius:50%;border:3px solid #26a69a;}
.cs-say{position:relative;background:white;border-radius:16px;padding:8px 12px;box-shadow:0 2px 8px var(--shadow);display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;color:var(--text);text-align:left;}
.cs-say b{font-size:11px;color:#26a69a;}
.cs-say::before{content:'';position:absolute;left:-8px;top:50%;margin-top:-7px;border:7px solid transparent;border-right-color:white;border-left:0;}
.cs-big{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:18px;border:3px solid #ce93d8;background:white;
  box-shadow:0 4px 12px var(--shadow);font:inherit;color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation;}
.cs-big:active{transform:scale(0.98);}
.cs-big.sold{opacity:.65;}
.cs-duel{border-color:#81c784;}
.cs-pack-art{flex-shrink:0;width:64px;height:88px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(135deg,#f48fb1,#ba68c8 55%,#7986cb);border-top:10px solid #ec407a;color:white;box-shadow:0 3px 6px rgba(0,0,0,.2);}
.cs-pack-art b{font-family:'Fredoka One',cursive;font-size:11px;letter-spacing:.5px;}
.cs-pack-art span{font-size:24px;line-height:1;}
.cs-pack-art small{font-size:9px;font-weight:800;}
.cs-duel-art{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:#2e7d5b;display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid #6d4c41;}
.cs-pack-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cs-pack-text b{font-size:16px;font-weight:900;}
.cs-pack-text span{font-size:13px;font-weight:800;color:#b06090;}
.cs-pack-text small{font-size:11px;font-weight:700;color:#a0887a;line-height:1.3;}
.cs-stats,.cs-note{font-size:13px;font-weight:800;color:#6d4c41;text-align:center;line-height:1.45;white-space:pre-line;
  background:rgba(255,255,255,0.88);border:1.5px solid #f8bbd0;border-radius:14px;padding:8px 12px;box-shadow:0 2px 8px var(--shadow);align-self:stretch;}
.cs-specials{grid-template-columns:repeat(3,1fr);}
.cs-specials .cs-slot{background:white;border-radius:14px;padding:6px 4px;box-shadow:0 3px 10px var(--shadow);width:100%;}
.cs-specials .cs-slot.mine{background:#f1f8e9;}
.cs-head{align-self:stretch;font-size:14px;font-weight:900;color:#6a1b9a;margin-top:4px;text-align:left;}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;justify-items:center;}
.cs-deck-grid{grid-template-columns:repeat(5,1fr);gap:6px;}
.cs-slot{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;padding:2px;border-radius:10px;
  font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation;}
.cs-slot:active{transform:scale(0.95);}
.cs-slot small{font-size:10px;font-weight:800;color:#8d6e63;line-height:1.2;text-align:center;}
.cs-slot small.cs-price{color:#b06090;}
.cs-opt{border:2.5px solid transparent;}
.cs-opt.on{border-color:#ab47bc;background:#f3e5f5;}
.cs-opt.locked canvas{opacity:.75;}
.cs-empty{width:62px;height:89px;border-radius:9px;border:2.5px dashed #ce93d8;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#ce93d8;}
.cs-deck-status{width:100%;background:#e8f5e9;border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;text-align:center;font-size:12px;font-weight:700;color:#2e7d32;}
.cs-deck-status b{font-size:14px;color:var(--text);}
.cs-deck-status.bad{background:#fff3e0;color:#e65100;}
.cs-backs-top{display:flex;align-items:center;gap:12px;width:100%;}
.cs-backs-top canvas{flex-shrink:0;}
#cs-detail{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(40,20,40,0.45);padding:16px;}
#cs-detail.hidden{display:none;}
#cs-detail-card{background:#fff9f0;border-radius:22px;padding:14px 16px;width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:10px;border:3px solid #ab47bc;box-shadow:0 10px 40px rgba(0,0,0,0.3);}
#cs-detail-card h3{font-family:'Fredoka One',cursive;font-size:20px;color:var(--text);text-align:center;}
.cs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-items:center;}
.cs-fin{display:flex;flex-direction:column;align-items:center;gap:3px;}
.cs-fin small{font-size:11px;font-weight:800;color:#8d6e63;}

/* ── The top bar's ⚙️ menu (js/hud.js) ── */
#hud-menu-backdrop{position:absolute;inset:0;z-index:24;}
#hud-menu-backdrop.hidden,#hud-menu.hidden,#hud-goals.hidden{display:none;}
/* 🎯 Today's goals, dropped down from the top bar */
#hud-goals{
  position:absolute;right:10px;left:10px;margin-left:auto;max-width:360px;top:calc(max(8px,env(safe-area-inset-top)) + 40px);z-index:25;
  display:flex;flex-direction:column;gap:8px;padding:12px;
  background:#fffaf3;border:2px solid #f8bbd0;border-radius:16px;box-shadow:0 8px 24px rgba(93,64,55,0.22);
}
#hud-goals .section-label{margin:0;}
#hud-goals .btn{align-self:center;}
.goals-badge{background:#43a047;}
#hud-menu{
  position:absolute;right:10px;top:calc(max(8px,env(safe-area-inset-top)) + 40px);z-index:25;
  display:flex;flex-direction:column;gap:2px;min-width:200px;padding:6px;
  background:#fffaf3;border:2px solid #f8bbd0;border-radius:16px;box-shadow:0 8px 24px rgba(93,64,55,0.22);
}
#hud-menu button{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:none;border-radius:11px;
  background:none;font:700 14px 'Nunito',sans-serif;color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation;
}
#hud-menu button:hover,#hud-menu button:focus-visible{background:#fde4ec;}
#hud-menu button b{margin-left:auto;font-size:12px;color:#ad1457;}
@media (pointer:coarse){#hud-menu .key-only{display:none;}}
/* Screens opened from the top bar over a game (hud.js coverGame()) say ← Back instead of 🏠 Home */
#app:not(.covering) .when-cover,#app.covering .when-home{display:none;}

/* The Garage screen (garage.js): your car and its stats, then tabs like the Card Shop's */
/* The Party Table in the Dungeon's hall (party-table.js) */
#party-screen{background:linear-gradient(170deg,#ede7f6 0%,#d1c4e9 55%,#fff8e1 100%);justify-content:flex-start;padding-top:16px;gap:10px;}
#party-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #b39ddb;flex-shrink:0;}
#pt-body{width:100%;max-width:370px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
#pt-body .cs-head{color:#4527a0;}
.pt-intro,.pt-status{font-size:13px;font-weight:700;color:var(--text);margin:0;text-align:center;}
.pt-status{color:#6a1b9a;}
.pt-join{display:flex;gap:8px;align-items:center;}
.pt-code{width:120px;font:900 20px 'Nunito',sans-serif;letter-spacing:4px;text-align:center;text-transform:uppercase;padding:8px;border-radius:12px;border:2.5px solid #b39ddb;background:white;color:var(--text);}
.fr-who .fr-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fr-who .fr-tag{min-height:0;padding:1px 8px;font:900 11px 'Nunito',sans-serif;letter-spacing:1px;border-radius:999px;background:#ede7f6;color:#4527a0;box-shadow:none;}
.fr-who .fr-tag-add{letter-spacing:0;background:transparent;color:#9575cd;border:1.5px dashed #b39ddb;}
.fr-tagbox{align-items:center;}
.fr-tag-input{width:56px;text-align:center;font:900 18px 'Nunito',sans-serif;letter-spacing:3px;text-transform:uppercase;padding:6px;border-radius:10px;border:2px solid #b39ddb;}
.fr-who .fr-party{display:block;font-size:11px;font-weight:800;color:#6a1b9a;}
.pt-share,.pt-invite{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.pt-link{width:100%;max-width:340px;font:700 12px 'Nunito',sans-serif;padding:8px;border-radius:10px;border:2px solid #b39ddb;}
.pt-codebox{display:flex;flex-direction:column;align-items:center;background:white;border-radius:16px;padding:8px 20px;box-shadow:0 3px 10px var(--shadow);}
.pt-codebox small{font-size:11px;font-weight:800;color:#7e57c2;}
.pt-codebox b{font:900 28px 'Nunito',sans-serif;letter-spacing:6px;color:#4527a0;}
.pt-members{display:flex;flex-direction:column;gap:6px;width:100%;}
.pt-member{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:14px;background:white;box-shadow:0 2px 6px var(--shadow);text-align:left;}
.pt-member.away{opacity:.55;}
.pt-member .pt-icon{grid-row:1 / 3;font-size:24px;}
.pt-member b{font-size:13px;color:#4e342e;}
.pt-member small{grid-column:2;font-size:11px;font-weight:700;color:#8d6e63;}
.pt-member em{grid-column:3;grid-row:1 / 3;font-style:normal;font-size:12px;font-weight:900;color:#2e7d32;}
.pt-classes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.pt-chip{padding:6px 10px;border-radius:20px;border:2.5px solid transparent;background:white;font:900 12px 'Nunito',sans-serif;color:var(--text);box-shadow:0 2px 6px var(--shadow);cursor:pointer;touch-action:manipulation;}
.pt-chip.on{border-color:#7e57c2;background:#ede7f6;color:#4527a0;}
.pt-emotes{display:grid;grid-template-columns:repeat(4,42px);gap:8px;justify-content:center;} /* (eight in two even rows, not seven and one) */
.pt-emote{width:42px;height:42px;border-radius:12px;border:none;background:white;font-size:22px;box-shadow:0 2px 6px var(--shadow);cursor:pointer;touch-action:manipulation;}
#party-screen .btn:disabled{opacity:.5;cursor:default;}
/* The Forge in the Dungeon's hall (forge.js) */
#forge-screen{background:linear-gradient(170deg,#efebe9 0%,#d7ccc8 55%,#ffe0b2 100%);justify-content:flex-start;padding-top:16px;gap:10px;}
#forge-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #ffab91;flex-shrink:0;}
#fg-top{width:100%;max-width:370px;flex-shrink:0;}
.fg-stats{background:rgba(255,255,255,0.92);border-radius:14px;padding:8px 12px;box-shadow:0 2px 8px var(--shadow);display:flex;flex-direction:column;gap:3px;text-align:left;}
.fg-stats b{font-size:13px;font-weight:900;color:#4e342e;}
.fg-stats small{font-size:11px;font-weight:700;color:#6d4c41;}
.fg-stats .fg-combo{color:#e65100;font-weight:900;}
.fg-nums{font-size:12px;font-weight:800;color:#5d4037;}
.fg-xp{display:block;height:7px;border-radius:4px;background:#efebe9;overflow:hidden;}
.fg-xp i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffca28,#ff7043);}
#fg-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
#fg-tabs button{
  padding:5px 10px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);white-space:nowrap;
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#fg-tabs button[aria-selected="true"]{border-color:#ff7043;background:#fbe9e7;color:#bf360c;}
#fg-body{width:100%;max-width:370px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
#fg-body .cs-head{color:#4e342e;}
#fg-body .cs-keeper canvas{border-color:#ff7043;}
#fg-body .cs-say b{color:#bf360c;}
.fg-anvil{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;}
.fg-plus{font-size:24px;font-weight:900;color:#6d4c41;}
.fg-slot{width:120px;height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:16px;
  border:3px dashed #a1887f;background:rgba(255,255,255,0.7);font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation;}
.fg-slot.full{border-style:solid;border-color:#ff7043;background:white;}
.fg-slot small{font-size:11px;font-weight:800;}
.fg-slot-icon{font-size:32px;line-height:1;}
.fg-result{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:16px;background:white;box-shadow:0 3px 10px var(--shadow);
  font-size:13px;font-weight:700;color:var(--text);text-align:left;flex-wrap:wrap;}
.fg-res-icon{font-size:30px;flex-shrink:0;}
.fg-res-text{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px;}
.fg-res-text b{font-size:14px;color:#4e342e;}
.fg-res-text small{font-size:11px;color:#8d6e63;}
.fg-go{margin-left:auto;}
.fg-go:disabled{opacity:.5;cursor:default;}
.fg-mats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%;}
.fg-mat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:12px;border:2px solid #d7ccc8;background:white;
  font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation;box-shadow:0 2px 6px var(--shadow);}
.fg-mat:active{transform:scale(0.96);}
.fg-mat.none{opacity:.45;box-shadow:none;}
.fg-mat b{font-size:13px;font-weight:900;}
.fg-mat small{font-size:9.5px;font-weight:800;line-height:1.1;text-align:center;}
.fg-mat-icon{font-size:24px;line-height:1.1;flex-shrink:0;}
.fg-gear{display:flex;flex-direction:column;gap:6px;width:100%;}
.fg-piece{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:14px;
  border:2.5px solid #d7ccc8;background:white;font:inherit;color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation;}
.fg-piece .fg-mat-icon{grid-row:1 / 4;}
.fg-piece b{font-size:13px;}
.fg-piece small{grid-column:2;font-size:11px;font-weight:700;color:#8d6e63;}
.fg-piece em{grid-column:3;grid-row:1 / 4;font-style:normal;font-size:11px;font-weight:900;color:#bf360c;}
.fg-wear{grid-column:2;display:flex;align-items:center;gap:6px;margin-top:3px;}
.fg-wear .fg-xp{width:60px;flex:none;height:5px;}
.fg-wear .fg-xp i{background:#66bb6a;}
.fg-wear.low .fg-xp i{background:#ef5350;}
.fg-wear small{font-size:10px;}
.fg-piece.on{border-color:#ff7043;background:#fbe9e7;}
.fg-set,.fg-recipe{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,0.75);text-align:left;}
.fg-set div,.fg-recipe div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.fg-set b,.fg-recipe b{font-size:13px;color:#4e342e;}
.fg-set small,.fg-recipe small{font-size:11px;font-weight:700;color:#8d6e63;}
.fg-set.on{background:#fff3e0;box-shadow:0 0 0 2.5px #ffb74d;}
.fg-recipe.known{background:white;box-shadow:0 2px 6px var(--shadow);}
.fg-recipe .btn{flex-shrink:0;}
.fg-none{font-size:12px;font-weight:700;color:#8d6e63;margin:0;}
#garage-screen{background:linear-gradient(170deg,#eceff1 0%,#cfd8dc 55%,#fff8e1 100%);justify-content:flex-start;padding-top:16px;gap:10px;}
#garage-screen h2{font-family:'Fredoka One',cursive;font-size:26px;color:var(--text);text-shadow:2px 2px 0 #90a4ae;flex-shrink:0;}
#gr-top{display:flex;align-items:center;gap:8px;width:100%;max-width:370px;flex-shrink:0;}
#gr-top canvas{flex-shrink:0;background:repeating-linear-gradient(90deg,#b0bec5 0 2px,#cfd8dc 2px 26px);border-radius:16px;border:3px solid #fbc02d;}
.gr-stats{flex:1;min-width:0;background:rgba(255,255,255,0.9);border-radius:14px;padding:6px 10px;box-shadow:0 2px 8px var(--shadow);display:flex;flex-direction:column;gap:3px;}
.gr-stats b{font-size:12px;font-weight:900;color:#37474f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gr-bar{display:flex;align-items:center;gap:6px;}
.gr-bar small{width:44px;flex-shrink:0;font-size:10px;font-weight:800;color:#607d8b;text-align:left;}
.gr-bar span{flex:1;height:7px;border-radius:4px;background:#eceff1;overflow:hidden;}
.gr-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#ffb300,#ef5350);}
#gr-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;flex-shrink:0;}
#gr-tabs button{
  padding:5px 10px;border-radius:20px;border:2.5px solid transparent;background:white;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:900;color:var(--text);white-space:nowrap;
  box-shadow:0 2px 8px var(--shadow);cursor:pointer;touch-action:manipulation;
}
#gr-tabs button[aria-selected="true"]{border-color:#fbc02d;background:#fff8e1;color:#e65100;}
#gr-body{width:100%;max-width:370px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
#gr-body .cs-head{color:#37474f;}
#gr-body .cs-opt.on{border-color:#fbc02d;background:#fff8e1;}
.gr-grid{grid-template-columns:repeat(4,1fr);}
.gr-grid canvas{background:#eceff1;border-radius:10px;}
.gr-icon{width:68px;height:54px;display:flex;align-items:center;justify-content:center;font-size:30px;background:#eceff1;border-radius:10px;}

/* ── 📱 The Cat Phone (js/phone.js, since 2026-10-09): the top bar's one button, and the phone ── */
.hud-gone{display:none!important;}
#hud-phone-btn{position:relative;padding:3px 9px;}
#hud-phone-btn svg{display:block;}
#hud-phone-btn .fr-badge{position:absolute;top:-5px;right:-5px;}
#phone-layer{position:absolute;inset:0;z-index:44;display:flex;align-items:center;justify-content:center;}
#phone-layer[hidden]{display:none;}
#phone-dim{position:absolute;inset:0;background:rgba(40,25,50,.5);}
#cat-phone{--case:#f48fb1;--case-d:#f06292;--case-i:#fce4ec;position:relative;z-index:1;isolation:isolate;width:min(318px,calc(100% - 40px));height:min(680px,calc(100% - 90px));margin-top:30px;
  border-radius:46px;background:var(--case);padding:11px;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 3px var(--case-d);
  transform:translateY(40px);opacity:0;transition:transform .22s ease-out,opacity .18s;}
#phone-layer.up #cat-phone{transform:none;opacity:1;}
html.calm #cat-phone{transition:none;}
.ph-ear{position:absolute;top:-22px;width:70px;height:56px;background:var(--case);border-radius:46px 8px 6px 6px;z-index:-1;}
.ph-ear.l{left:22px;transform:rotate(-14deg);}
.ph-ear.r{right:22px;transform:rotate(14deg);border-radius:8px 46px 6px 6px;}
.ph-ear i{position:absolute;inset:12px 16px 10px;background:var(--case-i);border-radius:inherit;}
.ph-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(circle at 20% 15%,#ffe0ec 0 30%,transparent 31%),linear-gradient(160deg,#cbb6ff,#ffc6d9 55%,#ffe3c2);color:#2e2238;}
.ph-paws{position:absolute;inset:0;opacity:.13;pointer-events:none;
  background:radial-gradient(circle,#7b4fd6 0 3px,transparent 4px) 0 0/46px 46px,radial-gradient(circle,#7b4fd6 0 2px,transparent 3px) 9px -7px/46px 46px;}
.ph-status{position:relative;height:42px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:700 14px system-ui,sans-serif;}
.ph-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:90px;height:26px;background:#1a1420;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:5px;}
.ph-island b{width:7px;height:7px;border-radius:50%;background:#3a3050;}
.ph-island i{width:9px;height:6px;border-radius:0 0 6px 6px;background:#f48fb1;}
#ph-home{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;}
#ph-home[hidden],#ph-app[hidden]{display:none;}
.ph-widget{margin:4px 14px 12px;border-radius:22px;background:rgba(255,255,255,.75);padding:10px 12px;display:flex;gap:12px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.ph-widget b{display:block;font-size:15px;}
.ph-widget span{display:block;font-size:12px;font-weight:700;opacity:.8;}
.ph-face{width:56px;height:56px;border-radius:50%;background:#fff3e0;display:grid!important;place-items:center;flex:none;opacity:1!important;}
.ph-grid{display:grid;grid-template-columns:repeat(4,62px);justify-content:space-between;gap:12px 0;padding:0 14px;}
.ph-dock{margin:auto 10px 30px;border-radius:28px;background:rgba(255,255,255,.45);padding:10px 8px 6px;display:grid;grid-template-columns:repeat(4,62px);justify-content:space-between;}
.ph-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;}
.ph-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:28px;box-shadow:0 3px 6px rgba(0,0,0,.15);background:#fff;}
.ph-app:active .ph-icon{transform:scale(.93);}
.ph-label{font:700 10px system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis;}
.ph-badge{position:absolute;top:-6px;right:0;min-width:20px;height:20px;border-radius:10px;background:#e53935;color:#fff;font:800 12px system-ui,sans-serif;display:grid;place-items:center;padding:0 5px;border:2px solid #fff;}
.ph-soon{position:absolute;top:38px;left:50%;transform:translateX(-50%);background:#7b4fd6;color:#fff;font:800 9px system-ui,sans-serif;padding:2px 6px;border-radius:6px;}
.ph-app.soon .ph-icon{filter:grayscale(.5) opacity(.8);}
.ph-folder{background:rgba(255,255,255,.6)!important;display:grid;grid-template-columns:1fr 1fr;padding:6px;gap:3px;font-size:14px;}
.ph-folder i{font-style:normal;display:grid;place-items:center;background:#fff;border-radius:5px;}
#ph-homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:18px;border:0;background:none;cursor:pointer;padding:0;}
#ph-homebar::after{content:'';position:absolute;left:0;right:0;top:7px;height:5px;border-radius:3px;background:#2e2238;opacity:.55;}
#ph-app{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;background:rgba(255,248,243,.94);}
.ph-appbar{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;padding:6px 10px 8px;font:800 15px system-ui,sans-serif;text-align:center;}
.ph-appbar button{background:none;border:0;color:#7b4fd6;font:700 15px system-ui,sans-serif;text-align:left;cursor:pointer;padding:6px 4px;}
#ph-app-body{flex:1;overflow-y:auto;padding:4px 12px 34px;-webkit-overflow-scrolling:touch;}
.ph-goal{background:#fff;border-radius:16px;padding:11px 13px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,.07);font-weight:700;font-size:13.5px;}
.ph-goal.done{opacity:.6;}
.ph-bar{height:8px;border-radius:4px;background:#f1e4ea;margin:8px 0 6px;overflow:hidden;}
.ph-bar i{display:block;height:100%;background:linear-gradient(90deg,#f48fb1,#ec407a);}
.ph-goal small{display:flex;gap:10px;align-items:center;font-weight:700;opacity:.8;}
.ph-goal small span:first-child{flex:1;}
/* 🏅 Achievements (phone.js achApp) */
.ph-ach .ph-achhead{display:flex;gap:10px;align-items:center;}
.ph-achicon{font-size:24px;width:32px;text-align:center;flex:none;}
.ph-ach .ph-achhead div{flex:1;min-width:0;}
.ph-ach .ph-achhead b{display:block;font-size:14px;}
.ph-ach .ph-achhead div span{display:block;font-size:12px;font-weight:700;opacity:.75;line-height:1.3;}
.ph-medals{font-size:14px;white-space:nowrap;flex:none;letter-spacing:-1px;}
.ph-ach small{flex-wrap:wrap;}
.ph-reward{white-space:nowrap;}
.ph-pin{border:none;background:#f6eef2;border-radius:12px;padding:3px 7px;font-size:13px;cursor:pointer;filter:grayscale(1);opacity:.6;}
.ph-pin[aria-pressed="true"]{filter:none;opacity:1;background:#ffe0ec;}
.ph-ach.pinned{box-shadow:0 0 0 2px #f48fb1,0 2px 6px rgba(0,0,0,.07);}
.ph-ach.ready{background:linear-gradient(135deg,#fff,#fff6d6);}
.ph-achtop small{margin-top:2px;}
.ph-ach.has-list .ph-achhead{cursor:pointer;}
.ph-ach .ph-achhead div em.ph-listtoggle{display:block;font-style:normal;font-size:11.5px;font-weight:800;color:#7b4fd6;margin-top:2px;}
.ph-checklist{list-style:none;margin:8px 0 2px;padding:6px 8px;border-radius:12px;background:#fbf5f8;display:grid;gap:2px;}
.ph-checklist li{display:flex;align-items:center;gap:6px;font-size:12.5px;min-height:24px;}
.ph-checklist li.no{opacity:.72;}
.ph-checklist .ph-tick{font-size:12px;flex:none;}
.ph-checklist .ph-ticon{font-size:15px;width:20px;text-align:center;flex:none;}
.ph-checklist .ph-tname{flex:1;min-width:0;}
.ph-checklist small{font-size:11px;opacity:.75;white-space:nowrap;}
.ph-checklist .ph-play{padding:2px 9px;font-size:11.5px;}
.ph-pinline{display:block;width:100%;margin-top:4px;padding:3px 7px;border:none;border-radius:10px;background:rgba(244,143,177,.18);font:inherit;font-size:11.5px;font-weight:800;color:inherit;text-align:left;cursor:pointer;position:relative;overflow:hidden;}
.ph-pinline span{position:relative;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ph-pinline i{position:absolute;left:0;top:0;bottom:0;background:rgba(244,143,177,.35);}
#lc-ach{font-size:13px;font-weight:800;color:#5d4037;text-align:center;max-width:300px;margin:4px auto 0;}
#lc-ach div{margin:4px 0;}
#lc-ach .ph-bar{max-width:220px;margin:5px auto 0;}
.ph-play{background:#f48fb1;color:#fff;border:0;border-radius:10px;padding:4px 12px;font:800 12px system-ui,sans-serif;cursor:pointer;}
.ph-note{text-align:center;font:700 12px system-ui,sans-serif;opacity:.65;margin:12px 0;}
.ph-note.top{margin:0 0 6px;}
.ph-sec{font:800 12px system-ui,sans-serif;color:#7b4fd6;text-transform:uppercase;letter-spacing:.05em;margin:12px 2px 6px;}
.ph-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 2px;}
.ph-game .ph-icon{width:50px;height:50px;border-radius:13px;font-size:25px;}
.ph-game .ph-label{font-size:9.5px;max-width:64px;}
.ph-game.locked .ph-icon{filter:grayscale(1) opacity(.5);}
.ph-lock{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:18px;}
.ph-trophy{position:absolute;top:-5px;right:4px;font-size:13px;line-height:0;}
.ph-trophy svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.ph-soonpage{text-align:center;padding:10px 6px;font-size:14px;line-height:1.45;}
.ph-soonpage .big{font-size:46px;margin:10px 0;}
.ph-soonpage h3{margin:0 0 8px;font-size:20px;}
.ph-soonpage .soon-tag{display:inline-block;background:#7b4fd6;color:#fff;font-weight:800;padding:4px 14px;border-radius:12px;}

/* ── 💼 Boss: a plain work email over the whole window ── */
#boss-screen{position:fixed;inset:0;z-index:2147483000;background:#fff;color:#111;font-family:-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;display:flex;flex-direction:column;
  -webkit-user-select:none;user-select:none;}
#boss-screen[hidden]{display:none;}
.boss-top{height:56px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 8px;font-size:15px;}
.boss-top b{font-size:16px;}
#boss-cancel{background:none;border:0;color:#0a7cff;font:inherit;font-size:16px;cursor:pointer;padding:4px;}
#boss-send{width:30px;height:30px;border-radius:50%;border:0;background:#0a7cff;color:#fff;font-size:16px;cursor:pointer;}
#boss-paw{position:absolute;top:60px;right:8px;background:none;border:0;font-size:11px;opacity:.35;cursor:pointer;padding:6px;}
.boss-f{flex:none;border-bottom:1px solid #e3e3e8;padding:11px 16px;font-size:15px;color:#8a8a8e;}
.boss-f b{color:#111;font-weight:400;}
.boss-subj{color:#111;font-weight:600;}
#boss-body{flex:1;overflow:hidden;padding:14px 16px;font-size:15px;line-height:1.45;white-space:pre-wrap;}
.boss-caret{display:inline-block;width:2px;height:18px;background:#0a7cff;vertical-align:-3px;animation:bossBlink 1s steps(1) infinite;}
@keyframes bossBlink{50%{opacity:0;}}
#boss-kb{flex:none;background:#d1d4db;padding:6px 3px 26px;max-width:100%;}
#boss-kb .sug{display:flex;justify-content:space-around;font-size:15px;color:#222;padding:4px 0 8px;}
#boss-kb .kr{display:flex;justify-content:center;gap:5px;margin-bottom:10px;}
#boss-kb i{flex:0 1 34px;height:42px;background:#fff;border-radius:5px;box-shadow:0 1px 0 #8a8a8e;font-style:normal;display:grid;place-items:center;font-size:19px;color:#111;cursor:pointer;}
#boss-kb i.w{flex-basis:44px;background:#adb3bc;font-size:13px;}
#boss-kb i.sp{flex:0 1 180px;font-size:14px;}
/* (the keyboard shows on every touch screen, tablets too, bigger there; only a computer with no touch hides it) */
@media (min-width:700px){#boss-body{max-width:760px;}
  #boss-kb .kr{gap:7px;} #boss-kb i{flex-basis:62px;height:54px;font-size:22px;} #boss-kb i.w{flex-basis:84px;font-size:15px;} #boss-kb i.sp{flex-basis:380px;font-size:16px;}}
@media not all and (any-pointer:coarse){#boss-kb{display:none;}}
/* (a short screen, like a phone on its side: the Cat Phone turns sideways too, the widget on the
   left and the apps in rows beside it, scrolling if they must) */
@media (max-height:560px){
  #cat-phone{width:min(660px,calc(100% - 150px));height:calc(100% - 54px);margin-top:44px;border-radius:36px;padding:9px;}
  .ph-screen{border-radius:28px;}
  .ph-ear{top:-15px;width:54px;height:42px;}
  .ph-status{height:30px;}
  .ph-island{top:4px;height:22px;}
  #ph-home{overflow-y:auto;display:grid;grid-template-columns:190px 1fr;align-content:start;padding:6px 0 26px;}
  .ph-widget{grid-row:span 2;flex-direction:column;text-align:center;margin:2px 0 8px 12px;}
  .ph-grid,.ph-dock{grid-template-columns:repeat(auto-fill,62px);justify-content:start;gap:10px 8px;padding:0 12px;}
  .ph-dock{margin:12px 12px 0 0;padding:10px 12px 6px;}
  #ph-app-body{padding-bottom:26px;}
}

/* ── The game's own screens inside the Cat Phone (phone.js host()): moved into #ph-app-body while
   open, with .in-phone. They lose their full-window place, backgrounds and ways out (‹ Home is the
   way back), and tighten up to the phone's width. ── */
#ph-app-body.hosting{padding:0 0 30px;}
#ph-app-body > .in-phone{position:static;inset:auto;width:100%;height:auto;min-height:100%;box-sizing:border-box;margin:0;
  padding:4px 10px 16px;gap:10px;justify-content:flex-start;overflow:visible;background:none;transition:none;}
#ph-app-body > .in-phone > h2,#ph-app-body > .in-phone > .level-head{display:none;}
#ph-app-body > .in-phone .screen-foot,#ph-app-body > .in-phone .when-cover,#ph-app-body > .in-phone .when-home,
#ph-app-body > .in-phone .head-home,#ph-app-body > .in-phone .board-home{display:none !important;}
#ph-app-body > .in-phone .treat-pill{display:none;}
#ph-app-body > .in-phone .set-card,#ph-app-body > .in-phone .custom-section{max-width:100%;}
#ph-app-body > .in-phone button,#ph-app-body > .in-phone .btn{max-width:100%;}
/* Messages: its card without the dimmed box around it, and no "Thanks!" (‹ Home closes it) */
#ph-app-body > #mail-box.in-phone{display:block;padding:4px 10px 16px;z-index:auto;}
#ph-app-body > #mail-box.in-phone .news-card{max-height:none;box-shadow:none;background:transparent;padding:0;}
#ph-app-body > #mail-box.in-phone #mail-title,#ph-app-body > #mail-box.in-phone #mail-close{display:none;}
#ph-app-body > #mail-box.in-phone #mail-list section{background:#fff;border-radius:16px;padding:12px 13px;margin-bottom:10px;box-shadow:0 2px 6px rgba(0,0,0,.07);}