/* Dogsy Quest — 2005-2010 casual game look: glossy candy buttons, chunky outlines, pastel parlour */
:root {
  --cream: #fff6e9; --paper: #fffaf2; --pink: #ff8fb7; --pink2: #ff5f98; --pinkdeep: #c9336d;
  --mint: #8fe3c8; --mint2: #3fbf98; --mintdeep: #23866a; --butter: #ffe07a; --butter2: #ffc23d; --butterdeep: #b9791a;
  --sky: #bfe8ff; --lilac: #cdb2ff; --choc: #5b3a29; --choc2: #7a4f36; --wood: #c98b5a; --ink: #4a2f22;
  --shadow: 0 6px 0 rgba(91, 58, 41, .25);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f7c9d8; overflow: hidden; }
body { font-family: 'Baloo 2', 'Trebuchet MS', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased;
  background: radial-gradient(circle at 20% 20%, #ffe3ee 0 12%, transparent 13%) 0 0/60px 60px, radial-gradient(circle at 70% 70%, #ffe3ee 0 10%, transparent 11%) 0 0/60px 60px, #f8c6d7; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

#viewport { position: fixed; inset: 0; display: grid; place-items: center; }
#stage { width: 1280px; height: 800px; position: absolute; left: 50%; top: 50%; transform-origin: center center; border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 6px var(--choc), 0 0 0 12px #ffd1e1, 0 0 0 16px var(--choc), 0 30px 60px rgba(91, 58, 41, .35); background: var(--cream); }

/* ---------- glossy buttons ---------- */
.gbtn { --c1: #ffb3cf; --c2: #ff5f98; --bd: #b02a60; position: relative; border: 3px solid var(--bd); border-radius: 999px; padding: 8px 22px 10px;
  font: 700 18px/1 'Baloo 2'; color: #fff; text-shadow: 0 2px 0 var(--bd); background: linear-gradient(var(--c1), var(--c2));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--bd); transition: transform .08s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gbtn::before { content: ''; position: absolute; left: 10%; right: 10%; top: 3px; height: 42%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)); pointer-events: none; }
.gbtn:hover { transform: translateY(-1px) scale(1.03); filter: brightness(1.05); }
.gbtn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--bd); }
.gbtn.mint { --c1: #b9f5e0; --c2: #37c095; --bd: #1f7d61; }
.gbtn.butter { --c1: #fff0a8; --c2: #ffbe2e; --bd: #b0700e; }
.gbtn.lilac { --c1: #e2d3ff; --c2: #9d7bff; --bd: #5e3fb8; }
.gbtn.sky { --c1: #d4f0ff; --c2: #53b7f0; --bd: #1f6fa3; }
.gbtn.grey { --c1: #f1ece6; --c2: #c6b7a8; --bd: #7a6656; }
.gbtn.small { font-size: 15px; padding: 5px 14px 7px; }
.gbtn:disabled { filter: grayscale(.7); opacity: .7; cursor: default; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--choc); background: linear-gradient(#fff, #ffe4ee); font-size: 20px; box-shadow: 0 3px 0 var(--choc); }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; height: 92px; display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: linear-gradient(#ffd7e6, #ffb6cf); border-bottom: 5px solid var(--choc); z-index: 5;
  box-shadow: inset 0 -8px 0 rgba(201, 51, 109, .12); }
#hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -17px; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 12px -2px, #ffb6cf 11px, var(--choc) 12px 14px, transparent 15px) 0 0/24px 12px repeat-x; }
.logo { position: relative; font-family: 'Chewy', cursive; line-height: .82; transform: rotate(-4deg); width: 170px; }
.logo .l1, .logo .l2, .login h1 span { display: block; font-size: 44px; color: #fff; -webkit-text-stroke: 3px var(--choc); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--choc); }
.logo .l1 { background: linear-gradient(#fff 40%, #ffd1e2); -webkit-background-clip: text; }
.logo .l2 { color: var(--butter); margin-left: 34px; }
.logo .paw { position: absolute; right: 0; top: -2px; font-size: 22px; transform: rotate(20deg); }

.goalbox { width: 400px; background: var(--paper); border: 3px solid var(--choc); border-radius: 18px; padding: 5px 12px 6px; box-shadow: var(--shadow); }
.goal-top { display: flex; justify-content: space-between; font-weight: 800; font-size: 16px; }
.stars { letter-spacing: 2px; color: #e5a300; text-shadow: 0 1px 0 var(--choc); }
.meter { position: relative; height: 18px; border: 3px solid var(--choc); border-radius: 999px; background: #f4e3d6; overflow: visible; margin: 2px 0; }
#meterFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; transition: width .8s cubic-bezier(.3, 1.5, .5, 1);
  background: repeating-linear-gradient(-45deg, #ff7aa9 0 10px, #ff5f98 10px 20px); }
.meter-shine { position: absolute; left: 6px; right: 6px; top: 2px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .6); }
.meter-star { position: absolute; right: -12px; top: -12px; font-size: 22px; filter: drop-shadow(0 2px 0 var(--choc)); }
.goal-sub { font-size: 12.5px; color: var(--choc2); font-weight: 600; }

.coins { display: flex; gap: 10px; }
.coin { display: flex; align-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--choc); border-radius: 999px; padding: 3px 14px 3px 6px; box-shadow: var(--shadow); }
.coin .ci { font-size: 22px; }
.coin b { font-size: 22px; }

.sign { position: relative; margin-left: auto; background: none; border: 0; padding: 12px 0 0; width: 150px; }
.sign .rope { position: absolute; top: -4px; left: 30px; right: 30px; height: 26px; border: 3px solid var(--choc); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sign .board { display: block; position: relative; border: 3px solid var(--choc); border-radius: 12px; padding: 3px 6px 5px; font: 400 26px/1 'Chewy'; color: #fff;
  box-shadow: 0 4px 0 var(--choc); transform-origin: top center; animation: swing 3s ease-in-out infinite; }
.sign small { display: block; font: 700 11px/1.1 'Baloo 2'; }
.sign.closed .board { background: linear-gradient(#c9b6a6, #8f7766); }
.sign.open .board { background: linear-gradient(#9af0cf, #2fb489); }
@keyframes swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.hud-tools { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.clock { font-size: 12px; font-weight: 700; background: var(--paper); border: 2px solid var(--choc); border-radius: 10px; padding: 0 8px; white-space: nowrap; }

/* ---------- screens ---------- */
#screens { position: absolute; top: 92px; left: 0; right: 0; bottom: 90px; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; animation: pop-in .35s ease; }
@keyframes pop-in { from { opacity: 0; transform: scale(.985); } }

/* ---------- parlour scene ---------- */
.wall { position: absolute; left: 0; right: 0; top: 0; height: 310px; background: repeating-linear-gradient(90deg, #ffe2ec 0 34px, #fff3f7 34px 68px); }
.wall .dots { position: absolute; inset: 0; background: radial-gradient(#ffc1d6 2.2px, transparent 2.6px) 17px 20px/68px 40px; opacity: .8; }
.molding { position: absolute; left: 0; right: 0; top: 294px; height: 22px; background: linear-gradient(#fff, #f3d9c6); border-top: 3px solid var(--choc); border-bottom: 3px solid var(--choc); }
.wainscot { position: absolute; left: 0; right: 0; top: 316px; height: 64px; background: repeating-linear-gradient(90deg, #aee9d4 0 76px, #9adfc6 76px 80px); border-bottom: 4px solid var(--choc); }
.floor { position: absolute; left: 0; right: 0; top: 380px; bottom: 0;
  background: conic-gradient(#f5d8b8 25%, #ecc59c 0 50%, #f5d8b8 0 75%, #ecc59c 0) 0 0/64px 64px; }
.floor::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(91, 58, 41, .18), transparent 30%); }

.window { position: absolute; top: 30px; width: 160px; height: 118px; border: 5px solid var(--choc); border-radius: 80px 80px 10px 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.window.w1 { left: 262px; } .window.w2 { left: 668px; }
.window .sky { position: absolute; inset: 0; background: linear-gradient(#8fd3ff, #d9f2ff); transition: background 2s; }
body.night .window .sky { background: linear-gradient(#27306b, #6a5fb0); }
.window .pane { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, var(--choc) 48% 52%, transparent 52%), linear-gradient(transparent 55%, var(--choc) 55% 58%, transparent 58%); }
.curtain { position: absolute; top: 0; bottom: 0; width: 34px; background: repeating-linear-gradient(90deg, #ff9dbf 0 8px, #ff85b0 8px 12px); border: 3px solid var(--choc); }
.curtain.l { left: -3px; border-radius: 0 0 40px 0; } .curtain.r { right: -3px; border-radius: 0 0 0 40px; }
.cloud { position: absolute; width: 54px; height: 18px; background: #fff; border-radius: 20px; animation: drift 38s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 24px; height: 24px; left: 8px; top: -12px; } .cloud::after { width: 18px; height: 18px; left: 26px; top: -8px; }
.c1 { top: 34px; left: -60px; } .c2 { top: 78px; left: -60px; animation-delay: -18s; animation-duration: 50s; } .c3 { top: 56px; left: -60px; animation-delay: -9s; }
@keyframes drift { to { transform: translateX(290px); } }
.sun { position: absolute; right: 44px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: #ffe066; box-shadow: 0 0 0 6px rgba(255, 224, 102, .4); }
body.night .sun { background: #fff8d0; box-shadow: -8px -2px 0 0 #3a3f86 inset, 0 0 12px #fff8d0; }
.garland { position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: radial-gradient(circle at 20px 0, transparent 13px, #ff8fb7 14px 16px, transparent 17px) 0 0/40px 26px repeat-x; }
.wallsign { position: absolute; left: 910px; top: 22px; width: 330px; padding: 14px 10px 16px; text-align: center; font: 400 30px/1 'Chewy'; color: var(--pinkdeep);
  background: var(--paper); border: 5px solid var(--choc); border-radius: 22px; box-shadow: var(--shadow), inset 0 0 0 5px #ffd1e1; transform: rotate(-2deg); }

.station { position: absolute; top: 90px; height: 300px; cursor: default; }
.station[data-go] { cursor: pointer; }
.plaque { position: absolute; left: 50%; bottom: -52px; transform: translateX(-50%); background: var(--paper); border: 3px solid var(--choc); border-radius: 14px;
  padding: 2px 12px 4px; text-align: center; box-shadow: var(--shadow); white-space: nowrap; z-index: 3; }
.plaque b { display: block; font: 400 19px/1.1 'Chewy'; color: var(--pinkdeep); letter-spacing: .3px; }
.plaque span { font-size: 13px; font-weight: 700; color: var(--choc2); }
.plaque em { font-style: normal; color: var(--pinkdeep); }
.bubble { position: absolute; background: #fff; border: 3px solid var(--choc); border-radius: 18px; padding: 6px 12px; font-weight: 700; font-size: 14px; line-height: 1.25;
  box-shadow: var(--shadow); z-index: 4; }

/* door */
.door-st { left: 22px; width: 200px; }
.door { position: absolute; left: 30px; bottom: 0; width: 140px; height: 232px; background: linear-gradient(90deg, #d99a66, #c5824d); border: 5px solid var(--choc); border-radius: 70px 70px 4px 4px; box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .18); }
.door-win { position: absolute; left: 30px; top: 24px; width: 70px; height: 60px; border: 4px solid var(--choc); border-radius: 36px 36px 6px 6px; background: linear-gradient(#bfe8ff, #e8f7ff); }
.knob { position: absolute; right: 16px; top: 128px; width: 16px; height: 16px; border-radius: 50%; background: var(--butter2); border: 3px solid var(--choc); }
.mat { position: absolute; left: -16px; right: -16px; bottom: -26px; height: 20px; background: #ff9dbf; border: 3px solid var(--choc); border-radius: 8px; font: 700 11px/14px 'Baloo 2'; text-align: center; color: #fff; letter-spacing: 3px; }
.scout-dog { position: absolute; left: 84px; bottom: 6px; z-index: 2; }
.scout-dog.walking .dog { animation: hop .5s ease-in-out infinite; }
.scout-bubble { left: -8px; top: -22px; width: 210px; font-size: 13px; }
.scout-bubble::after, .tip::after { content: ''; position: absolute; left: 60%; bottom: -13px; width: 18px; height: 18px; background: #fff; border-right: 3px solid var(--choc); border-bottom: 3px solid var(--choc); transform: rotate(45deg); }
#fetchBtn { position: absolute; left: 118px; bottom: 150px; z-index: 3; transform: rotate(4deg); }
#fetchBtn:hover { transform: rotate(4deg) scale(1.05); }

/* tub */
.tub-st { left: 238px; width: 200px; }
.tub { position: absolute; left: 10px; right: 10px; bottom: 16px; height: 96px; background: linear-gradient(#fff, #e4f3ff); border: 5px solid var(--choc); border-radius: 18px 18px 60px 60px; z-index: 2; }
.tub-rim { position: absolute; left: -12px; right: -12px; top: -12px; height: 18px; background: #fff; border: 4px solid var(--choc); border-radius: 12px; }
.foam { position: absolute; left: -6px; right: -6px; top: -34px; height: 30px;
  background: radial-gradient(circle, #fff 60%, transparent 62%) 0 0/28px 28px repeat-x, radial-gradient(circle, #eaf6ff 60%, transparent 62%) 14px 8px/28px 28px repeat-x; }
.feet i { position: absolute; bottom: -24px; width: 22px; height: 22px; background: var(--butter2); border: 3px solid var(--choc); border-radius: 50% 50% 8px 8px; }
.feet i:first-child { left: 20px; } .feet i:last-child { right: 20px; }
.tub-dogs { position: absolute; left: 8px; right: 8px; bottom: 100px; display: flex; justify-content: center; gap: 0; z-index: 3; }
.tub-dogs .dog { margin: 0 -10px; animation: bob 2.2s ease-in-out infinite; }
.tub-dogs .dog:nth-child(2) { animation-delay: -.7s; } .tub-dogs .dog:nth-child(3) { animation-delay: -1.4s; }
.bubbles-rise i { position: absolute; bottom: 110px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #9fd6ff; background: rgba(255, 255, 255, .6); animation: rise 3.6s ease-in infinite; z-index: 3; }
.bubbles-rise i:nth-child(1) { left: 30px; } .bubbles-rise i:nth-child(2) { left: 70px; animation-delay: -1s; width: 10px; height: 10px; }
.bubbles-rise i:nth-child(3) { left: 120px; animation-delay: -2s; } .bubbles-rise i:nth-child(4) { left: 150px; animation-delay: -.4s; width: 9px; height: 9px; }
.bubbles-rise i:nth-child(5) { left: 96px; animation-delay: -2.7s; } .bubbles-rise i:nth-child(6) { left: 50px; animation-delay: -3.2s; width: 8px; height: 8px; }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-150px) translateX(10px); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes hop { 50% { transform: translateY(-8px); } }

/* mailbox */
.mail-st { left: 458px; width: 150px; }
.mailbox { position: absolute; left: 25px; bottom: 0; width: 100px; height: 240px; }
.mb-post { position: absolute; left: 42px; bottom: 0; width: 18px; height: 110px; background: var(--wood); border: 4px solid var(--choc); }
.mb-body { position: absolute; left: 0; right: 0; top: 30px; height: 104px; background: linear-gradient(#ff9ec2, #ff6fa3); border: 5px solid var(--choc); border-radius: 50px 50px 10px 10px; z-index: 1; }
.mb-slot { position: absolute; left: 22px; right: 22px; top: 30px; height: 9px; background: var(--choc); border-radius: 6px; }
.mb-heart { position: absolute; left: 0; right: 0; top: 50px; text-align: center; font-size: 30px; color: #fff; text-shadow: 0 2px 0 var(--pinkdeep); }
.mb-flag { position: absolute; right: -24px; top: 58px; width: 10px; height: 60px; background: var(--choc); transform-origin: bottom center; transform: rotate(90deg); transition: transform .6s cubic-bezier(.3, 1.8, .5, 1); z-index: 0; }
.mb-flag::after { content: ''; position: absolute; left: 0; top: -2px; width: 30px; height: 22px; background: var(--butter2); border: 3px solid var(--choc); border-radius: 3px; }
.mb-flag.up { transform: rotate(0); }
.flyer { position: absolute; left: 50px; top: 100px; font-size: 30px; opacity: 0; z-index: 6; pointer-events: none; }
.flyer.go { animation: fly 1.8s cubic-bezier(.4, 0, .4, 1) forwards; }
@keyframes fly { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); } 40% { opacity: 1; transform: translate(40px, -120px) rotate(-18deg) scale(1.1); }
  100% { opacity: 0; transform: translate(260px, -240px) rotate(20deg) scale(.7); } }

/* beds */
.beds-st { left: 626px; width: 270px; }
.bed { position: absolute; bottom: 0; width: 128px; height: 150px; }
.bed.b1 { left: 0; } .bed.b2 { right: 0; }
.cushion { position: absolute; left: 0; right: 0; bottom: 18px; height: 56px; background: linear-gradient(#cdb2ff, #a98af0); border: 5px solid var(--choc); border-radius: 60px 60px 26px 26px; }
.cushion::after { content: ''; position: absolute; left: 12px; right: 12px; top: 10px; height: 20px; border-radius: 30px; background: #e9dcff; border: 3px solid var(--choc); }
.bed.b2 .cushion { background: linear-gradient(#9ff0d5, #58cfa8); } .bed.b2 .cushion::after { background: #d8fbee; }
.bed-dogs { position: absolute; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; z-index: 1; }
.bed-dogs .dog { margin: 0 -14px; }
.bed-label { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--choc); }
.bed-label em { font-style: normal; background: var(--pink2); color: #fff; border-radius: 10px; padding: 0 7px; border: 2px solid var(--choc); }
.zzz { position: absolute; left: 110px; top: 60px; font: 400 22px 'Chewy'; color: #8b6fe0; }
.zzz span { display: inline-block; animation: zz 2.4s ease-in-out infinite; opacity: 0; }
.zzz span:nth-child(2) { animation-delay: .6s; font-size: 26px; } .zzz span:nth-child(3) { animation-delay: 1.2s; font-size: 32px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(12px, -30px); } }

/* couch */
.couch-st { left: 914px; width: 340px; top: 90px; }
.couch { position: absolute; left: 0; right: 0; bottom: 10px; height: 140px; }
.c-back { position: absolute; left: 22px; right: 22px; top: 0; height: 92px; background: linear-gradient(#ff9ec2, #ff76a8); border: 5px solid var(--choc); border-radius: 50px 50px 10px 10px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25); }
.c-back::after { content: ''; position: absolute; inset: 18px 30px auto; height: 3px; background: radial-gradient(circle, var(--choc) 3px, transparent 4px) 0 0/40px 10px repeat-x; top: 34px; height: 10px; }
.c-seat { position: absolute; left: 14px; right: 14px; top: 70px; height: 48px; background: linear-gradient(#ffb3cf, #ff8fb7); border: 5px solid var(--choc); border-radius: 18px; }
.c-arm { position: absolute; top: 44px; width: 52px; height: 80px; background: linear-gradient(#ff9ec2, #ff6fa3); border: 5px solid var(--choc); border-radius: 26px 26px 12px 12px; }
.c-arm.l { left: 0; } .c-arm.r { right: 0; }
.c-legs i { position: absolute; bottom: -18px; width: 16px; height: 22px; background: var(--wood); border: 4px solid var(--choc); border-radius: 0 0 8px 8px; }
.c-legs i:first-child { left: 30px; } .c-legs i:last-child { right: 30px; }
.couch-dogs { position: absolute; left: 44px; right: 44px; bottom: 76px; display: flex; justify-content: space-around; align-items: flex-end; z-index: 2; }
.couch-dog { position: relative; cursor: pointer; transition: transform .15s; }
.couch-dog:hover { transform: translateY(-6px) scale(1.06); }
.couch-dog .say { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); background: #fff; border: 3px solid var(--choc); border-radius: 50%; width: 42px; height: 38px;
  display: grid; place-items: center; font-size: 20px; box-shadow: 0 3px 0 rgba(91, 58, 41, .25); animation: bob 1.8s ease-in-out infinite; }
.couch-dog .nm { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 11px; font-weight: 800; background: var(--paper); border: 2px solid var(--choc); border-radius: 8px; padding: 0 5px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.couch-empty { font: 400 20px 'Chewy'; color: var(--pinkdeep); background: rgba(255, 255, 255, .8); border-radius: 14px; padding: 4px 12px; margin-bottom: 30px; }
.plaque.big b { font-size: 21px; }

.dog .tail { transform-origin: 88px 108px; animation: wag .45s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.dog.sleepy .tail { animation: none; }

/* lower row */
.mascot-area { position: absolute; left: 18px; top: 470px; width: 340px; height: 140px; }
.mascot { position: absolute; left: 0; bottom: 0; }
.mascot .dog .head { transform-origin: 60px 80px; animation: tilt 5s ease-in-out infinite; }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
.tip { left: 112px; top: 6px; width: 228px; font-size: 13.5px; min-height: 60px; }
.tip::after { left: -12px; bottom: 26px; transform: rotate(135deg); }
.tip b { color: var(--pinkdeep); }
.tip .gbtn { margin-top: 5px; }

.jar-area { position: absolute; left: 372px; top: 462px; width: 150px; height: 150px; cursor: pointer; text-align: center; }
.jar { position: relative; width: 104px; height: 118px; margin: 0 auto; }
.jar-lid { position: absolute; left: 14px; right: 14px; top: 0; height: 18px; background: linear-gradient(#ffe07a, #ffbe2e); border: 4px solid var(--choc); border-radius: 8px; z-index: 2; }
.jar-glass { position: absolute; left: 4px; right: 4px; top: 14px; bottom: 0; border: 4px solid var(--choc); border-radius: 22px 22px 30px 30px; background: rgba(220, 244, 255, .7); overflow: hidden; }
.jar-glass::after { content: ''; position: absolute; left: 10px; top: 10px; width: 10px; height: 50px; border-radius: 9px; background: rgba(255, 255, 255, .8); }
.jar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffb3cf, #ff6fa3); transition: height 1s; }
.jar-hearts { position: absolute; inset: 0; font-size: 14px; }
.jar-hearts span { position: absolute; }
.jar-label { position: absolute; left: 8px; right: 8px; top: 52px; background: var(--paper); border: 3px solid var(--choc); border-radius: 8px; font: 400 15px/1.2 'Chewy'; color: var(--pinkdeep); z-index: 2; }
.jar-count { font-size: 13px; font-weight: 700; } .jar-count b { font-size: 18px; color: var(--pinkdeep); }

.kennels { position: absolute; left: 540px; top: 478px; width: 330px; height: 132px; display: flex; gap: 8px; align-items: flex-end; cursor: pointer; flex-wrap: nowrap; overflow: hidden; }
.kennel { position: relative; width: 76px; flex: 0 0 76px; text-align: center; }
.kennel .house { position: relative; height: 70px; }
.kennel .roof { position: absolute; left: -4px; right: -4px; top: 0; height: 34px; background: var(--pink2); border: 4px solid var(--choc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.kennel .roof-o { position: absolute; left: -8px; right: -8px; top: -5px; height: 42px; background: var(--choc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.kennel .box { position: absolute; left: 6px; right: 6px; top: 30px; bottom: 0; background: #ffe9c9; border: 4px solid var(--choc); border-top: 0; }
.kennel .hole { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 26px; height: 26px; background: var(--choc); border-radius: 13px 13px 0 0; }
.kennel .light { position: absolute; right: 6px; top: 36px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--choc); background: #45d19c; box-shadow: 0 0 8px #45d19c; }
.kennel.paused .light { background: #ff5f6f; box-shadow: 0 0 8px #ff5f6f; } .kennel.full .light { background: #ffc23d; box-shadow: 0 0 8px #ffc23d; }
.kennel .kn { font-size: 11px; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennel .ks { font-size: 11px; color: var(--choc2); font-weight: 600; }
.kennel.add .box { background: #f4efe9; } .kennel.add .hole { background: none; font-size: 24px; width: auto; line-height: 1; bottom: 6px; color: var(--choc); }
.kennels-title { position: absolute; left: 534px; top: 452px; font: 400 16px 'Chewy'; color: var(--choc); }

.gazette { position: absolute; left: 878px; top: 466px; width: 384px; height: 142px; background: var(--paper); border: 3px solid var(--choc); border-radius: 12px; box-shadow: var(--shadow); padding: 4px 10px; overflow: hidden;
  background-image: repeating-linear-gradient(transparent 0 21px, #f2dccb 21px 22px); background-position: 0 30px; }
.gz-title { font: 400 18px 'Chewy'; color: var(--choc); border-bottom: 2px dashed var(--choc2); text-align: center; }
#gazette { list-style: none; margin: 2px 0 0; padding: 0; font-size: 12.5px; font-weight: 600; line-height: 22px; }
#gazette li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gazette li.fresh { animation: fresh 1.2s ease; }
#gazette time { color: #b89a86; font-size: 11px; margin-right: 5px; }
@keyframes fresh { from { background: #fff0a8; } }

/* ---------- tabs ---------- */
#tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; display: flex; justify-content: center; align-items: center; gap: 10px;
  background: linear-gradient(#b0714a, #8a5334); border-top: 5px solid var(--choc); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .15); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: 132px; height: 66px; border: 4px solid var(--choc); border-radius: 18px;
  background: linear-gradient(#fff8ee, #f3dcc4); font: 700 15px/1 'Baloo 2'; color: var(--choc); box-shadow: 0 5px 0 var(--choc); padding-top: 6px; transition: transform .1s; }
.tab span { font-size: 26px; line-height: 1.1; }
.tab:hover { transform: translateY(-3px); }
.tab.active { background: linear-gradient(#ffd1e2, #ff8fb7); color: #fff; text-shadow: 0 2px 0 var(--pinkdeep); transform: translateY(-4px); }
.badge { position: absolute; right: -10px; top: -12px; font-style: normal; background: var(--pink2); color: #fff; border: 3px solid var(--choc); border-radius: 999px; min-width: 28px; padding: 0 6px; font-size: 15px; line-height: 22px; animation: bob 1.4s infinite; }

/* ---------- shared paper UI ---------- */
.paper { background: var(--paper); border: 4px solid var(--choc); border-radius: 22px; box-shadow: var(--shadow); }
.field { font: 600 15px 'Baloo 2'; color: var(--ink); border: 3px solid var(--choc); border-radius: 12px; padding: 5px 10px; background: #fff; outline: none; width: 100%; }
.field:focus { border-color: var(--pink2); box-shadow: 0 0 0 4px #ffd1e1; }
textarea.field { resize: vertical; line-height: 1.4; }
label.lb { display: block; font-size: 13px; font-weight: 800; color: var(--choc2); margin: 8px 0 2px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { border: 3px solid var(--choc); border-radius: 999px; padding: 2px 14px; background: #fff; font-weight: 800; font-size: 14px; color: var(--choc); }
.pill.on { background: var(--pink); color: #fff; text-shadow: 0 1px 0 var(--pinkdeep); }
h2 { font: 400 32px 'Chewy'; color: var(--pinkdeep); margin: 0; -webkit-text-stroke: 1px var(--choc); }
h3 { font: 400 22px 'Chewy'; color: var(--choc); margin: 10px 0 4px; }
.muted { color: #9a7b67; font-size: 13px; }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pink) transparent; }

/* ---------- map ---------- */
#map { background: linear-gradient(#9fdcff, #cdefff); }
.map-wrap { position: absolute; left: 12px; top: 10px; width: 860px; bottom: 10px; }
#mapSvg { width: 100%; height: 100%; }
#mapSvg .island { cursor: pointer; transition: transform .2s; transform-box: fill-box; transform-origin: center; }
#mapSvg .island:hover { transform: scale(1.04); }
#mapSvg .level { cursor: pointer; }
#mapSvg .level:hover .lvl-ring { stroke: var(--pink2); stroke-width: 5; }
#mapSvg .level.sel .lvl-ring { stroke: var(--butter2); stroke-width: 6; }
#mapSvg .lvl-off { opacity: .5; }
.side { position: absolute; right: 12px; top: 10px; width: 388px; bottom: 10px; padding: 14px 16px; overflow-y: auto; }
.lvl-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.lvl-stat div { background: #fff; border: 2px solid var(--choc); border-radius: 12px; padding: 2px 8px; font-size: 13px; font-weight: 700; }
.lvl-stat b { display: block; font-size: 20px; color: var(--pinkdeep); }
.progress { height: 16px; border: 3px solid var(--choc); border-radius: 999px; background: #f4e3d6; overflow: hidden; }
.progress i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #7fe0bd 0 8px, #4fcaa0 8px 16px); }

/* ---------- leads book ---------- */
.notebook { position: absolute; inset: 12px 24px; }
.nb-tabs { position: absolute; right: -14px; top: 30px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.nb-tab { border: 3px solid var(--choc); border-left: 0; border-radius: 0 14px 14px 0; padding: 4px 12px 4px 16px; font-weight: 800; font-size: 13.5px; text-align: left; background: #fff; color: var(--choc); width: 150px; box-shadow: 3px 3px 0 rgba(91, 58, 41, .2); }
.nb-tab em { float: right; font-style: normal; color: var(--pinkdeep); }
.nb-tab.on { transform: translateX(8px); }
.nb-page { position: absolute; inset: 0 140px 0 0; background: var(--paper); border: 4px solid var(--choc); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 18px 12px 60px;
  background-image: linear-gradient(90deg, transparent 44px, #ffb3cf 44px 47px, transparent 47px), repeating-linear-gradient(transparent 0 33px, #e8f1ff 33px 35px); }
.nb-page::before { content: ''; position: absolute; left: 12px; top: 20px; bottom: 20px; width: 18px; background: radial-gradient(circle, var(--choc) 5px, transparent 6px) 0 0/18px 44px repeat-y; }
.nb-head { display: flex; align-items: center; gap: 14px; }
.nb-head .field { max-width: 360px; }
.book-list { position: absolute; left: 60px; right: 18px; top: 64px; bottom: 44px; overflow-y: auto; }
.lrow { display: grid; grid-template-columns: 50px 1.6fr 1.4fr 1fr 1fr; gap: 10px; align-items: center; padding: 3px 6px; border-radius: 12px; cursor: pointer; font-size: 14px; }
.lrow:hover { background: #ffeaf2; }
.lrow .kn { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .sm { font-size: 12px; color: #9a7b67; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; border: 2px solid var(--choc); border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 800; background: #fff; white-space: nowrap; }
.chip.ready { background: #d9f0ff; } .chip.in_sequence { background: #e9dcff; } .chip.interested { background: #ffd1e2; } .chip.replied { background: #fff0a8; }
.chip.blocked, .chip.not_interested, .chip.unsubscribed, .chip.bounced, .chip.invalid { background: #eee4dc; color: #8b7262; } .chip.finished { background: #d8fbee; } .chip.pushed { background: #d4f0ff; }
.book-more { position: absolute; left: 60px; right: 18px; bottom: 8px; text-align: center; }
.empty { text-align: center; padding: 40px; font: 400 22px 'Chewy'; color: var(--choc2); }

/* ---------- letters ---------- */
.letters-wrap { position: absolute; inset: 12px 24px; }
.lt-head { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.letter-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: calc(100% - 56px); }
.lcard { position: relative; background: var(--paper); border: 4px solid var(--choc); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.lcard::before { content: ''; position: absolute; left: -4px; right: -4px; top: -4px; height: 12px; border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(-45deg, #ff8fb7 0 10px, #fff 10px 20px, #8fd3ff 20px 30px, #fff 30px 40px); border: 4px solid var(--choc); border-bottom: 0; }
.lcard h3 { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.lcard h3 small { font: 700 12px 'Baloo 2'; color: #9a7b67; }
.lcard textarea { flex: 1; min-height: 0; font-size: 13.5px; }
.lcard .acts { display: flex; gap: 8px; margin-top: 8px; }
.varchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.varchips button { border: 2px dashed var(--choc2); background: #fff; border-radius: 8px; font-size: 11.5px; font-weight: 700; padding: 0 6px; color: var(--choc2); }

/* ---------- kennel keys ---------- */
.keys-wrap { position: absolute; inset: 12px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.keys-col { overflow-y: auto; padding: 14px 16px; }
.ibox { display: flex; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--choc); border-radius: 14px; padding: 8px 10px; margin: 8px 0; }
.ibox .kennel { flex: 0 0 60px; width: 60px; transform: scale(.8); }
.ibox .inf { flex: 1; min-width: 0; font-size: 13px; }
.ibox .inf b { font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.toggle { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin: 6px 0; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--pink2); }
.note { background: #fff7d6; border: 2px dashed var(--butterdeep); border-radius: 12px; padding: 6px 10px; font-size: 13px; margin: 8px 0; }

/* ---------- help ---------- */
.help-wrap { position: absolute; inset: 12px 24px; padding: 18px 26px; overflow-y: auto; columns: 2; column-gap: 34px; font-size: 14.5px; line-height: 1.5; }
.help-wrap h2 { column-span: all; margin-bottom: 6px; }
.help-wrap .step { break-inside: avoid; margin-bottom: 12px; }
.help-wrap .step h3 { display: flex; align-items: center; gap: 8px; }
.help-wrap .num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; border: 3px solid var(--choc); font: 400 18px 'Chewy'; }

/* ---------- modal / letter ---------- */
.modal { position: absolute; inset: 0; background: rgba(91, 58, 41, .45); display: grid; place-items: center; z-index: 20; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.modal-card { position: relative; width: 820px; max-height: 720px; background: var(--paper); border: 5px solid var(--choc); border-radius: 24px; box-shadow: 0 10px 0 rgba(91, 58, 41, .35); padding: 18px 24px; overflow-y: auto; animation: boing .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boing { from { transform: scale(.6); opacity: 0; } }
.modal-card .x { position: absolute; right: 14px; top: 12px; }
.letter { background: #fff; border: 3px solid var(--choc); border-radius: 6px; padding: 14px 18px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; position: relative;
  background-image: repeating-linear-gradient(transparent 0 21px, #eef4ff 21px 22px); max-height: 240px; overflow-y: auto; }
.letter.theirs { border-color: var(--pink2); box-shadow: 6px 6px 0 #ffd1e2; }
.letter .stamp { position: absolute; right: 10px; top: 8px; width: 54px; height: 62px; border: 3px dashed var(--pink2); background: #ffeaf2; display: grid; place-items: center; font-size: 28px; transform: rotate(6deg); }
.who { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.who h2 { font-size: 30px; }
.thread { margin: 10px 0; }
.thread .msg { font-size: 13px; border-left: 4px solid var(--lilac); padding: 2px 10px; margin: 6px 0; white-space: pre-wrap; max-height: 120px; overflow-y: auto; background: #faf6ff; border-radius: 0 10px 10px 0; }
.thread .msg.in { border-color: var(--pink2); background: #fff2f7; }
.thread .msg b { font-size: 12px; color: var(--choc2); }
.snips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- toast, confetti, day complete ---------- */
.toast { position: absolute; left: 50%; top: 108px; transform: translateX(-50%); background: var(--paper); border: 4px solid var(--choc); border-radius: 999px; padding: 6px 22px; font-weight: 800; font-size: 17px; z-index: 30; box-shadow: var(--shadow); animation: boing .4s cubic-bezier(.3, 1.6, .5, 1); }
#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
#confetti i { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; animation: fall 2.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(860px) rotate(720deg); } }
.daycard { text-align: center; }
.daycard .big-stars { font-size: 64px; letter-spacing: 8px; margin: 4px 0; }
.daycard .big-stars span { display: inline-block; animation: boing .6s cubic-bezier(.3, 1.8, .5, 1) backwards; filter: drop-shadow(0 4px 0 var(--choc)); }
.daycard .big-stars span:nth-child(2) { animation-delay: .25s; } .daycard .big-stars span:nth-child(3) { animation-delay: .5s; }
.daycard .banner { display: inline-block; font: 400 44px 'Chewy'; color: #fff; -webkit-text-stroke: 3px var(--choc); paint-order: stroke fill; background: linear-gradient(#ff9ec2, #ff5f98);
  padding: 6px 40px; border: 5px solid var(--choc); border-radius: 16px; transform: rotate(-2deg); text-shadow: 0 3px 0 var(--choc); }
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.tally div { background: #fff; border: 3px solid var(--choc); border-radius: 14px; padding: 6px; font-weight: 700; }
.tally b { display: block; font: 400 32px 'Chewy'; color: var(--pinkdeep); }

/* ---------- login ---------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; }
.login-card { width: 380px; background: var(--paper); border: 5px solid var(--choc); border-radius: 28px; padding: 20px 28px 26px; text-align: center; box-shadow: 0 10px 0 rgba(91, 58, 41, .3); }
.login h1 { margin: 0; font-family: 'Chewy'; transform: rotate(-3deg); }
.login h1 span { display: inline; font-size: 52px; } .login h1 .l2 { color: var(--butter); }
.login .field { margin: 12px 0; text-align: center; font-size: 18px; }
.err { color: var(--pinkdeep); font-weight: 700; min-height: 20px; margin-top: 6px; }

/* ---------- report card & vet ---------- */
.report-wrap { position: absolute; inset: 12px 24px; padding: 14px 22px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 10px 0 14px; }
.kpi { position: relative; background: #fff; border: 3px solid var(--choc); border-radius: 16px; padding: 6px 10px 8px; text-align: center; box-shadow: 0 4px 0 rgba(91,58,41,.2); }
.kpi b { display: block; font: 400 34px/1.1 'Chewy'; color: var(--pinkdeep); }
.kpi span { font-size: 13px; font-weight: 800; }
.kpi small { display: block; font-size: 11.5px; color: #9a7b67; font-weight: 600; }
.kpi .grade { position: absolute; right: 6px; top: 4px; font: 400 16px 'Chewy'; color: var(--mintdeep); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 6px 4px 0; border-bottom: 3px solid var(--choc); }
.bars .col { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 1px; min-width: 0; position: relative; }
.bars .s { background: #ffb3cf; border: 2px solid var(--choc); border-radius: 5px 5px 0 0; }
.bars .r { background: #8fe3c8; border: 2px solid var(--choc); border-radius: 5px 5px 0 0; }
.bars .d { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #9a7b67; white-space: nowrap; }
.legend { display: flex; gap: 14px; font-size: 13px; font-weight: 700; margin: 26px 0 4px; }
.legend i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--choc); border-radius: 4px; vertical-align: -2px; margin-right: 4px; }
table.cute { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; }
table.cute th { text-align: left; font-size: 12px; color: var(--choc2); padding: 0 8px; }
table.cute td { background: #fff; padding: 5px 8px; border-top: 2px solid #f0dccc; border-bottom: 2px solid #f0dccc; }
table.cute td:first-child { border-left: 2px solid #f0dccc; border-radius: 10px 0 0 10px; font-weight: 800; }
table.cute td:last-child { border-right: 2px solid #f0dccc; border-radius: 0 10px 10px 0; }
.win { background: var(--butter); border: 2px solid var(--choc); border-radius: 8px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 5px 0; border-bottom: 1px dashed #ecd5c3; font-size: 13.5px; }
.check .ic { font-size: 18px; }
.check .fx { color: var(--pinkdeep); font-weight: 700; font-size: 12.5px; }
.dcard { background: #fff; border: 3px solid var(--choc); border-radius: 16px; padding: 8px 14px; margin-bottom: 12px; }
.dcard h3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 6px; }
.gradebadge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--choc); font: 400 26px 'Chewy'; color: #fff; }
.g-A { background: #37c095; } .g-B { background: #8fd36a; } .g-C { background: #ffbe2e; } .g-D { background: #ff5f6f; }
.pair { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed #ecd5c3; }
.wizard .bigfield { font-size: 20px; padding: 10px 14px; text-align: center; }
.wizard ol { padding-left: 22px; line-height: 1.55; font-size: 14.5px; }
.wizard ol li { margin: 4px 0; }
.wizard .provider { display: flex; align-items: center; gap: 12px; background: #eafff6; border: 3px solid var(--mintdeep); border-radius: 14px; padding: 6px 12px; font-weight: 800; }
.stepdots { display: flex; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.stepdots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--choc); background: #fff; }
.stepdots i.on { background: var(--pink2); }
details.adv summary { cursor: pointer; font-weight: 800; color: var(--choc2); margin: 8px 0; }
.spamscore { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.abpills { display: inline-flex; gap: 4px; }
.abpills button { border: 2px solid var(--choc); border-radius: 8px; background: #fff; font-weight: 800; font-size: 12px; padding: 0 8px; }
.abpills button.on { background: var(--lilac); color: #fff; }

/* ---------- hand-drawn sprites (from the Dogsy Quest sprite sheet) ---------- */
img.dog.sprite { display: block; height: auto; filter: drop-shadow(0 3px 0 rgba(110, 74, 58, .12)); user-select: none; }
.sprite-head { display: inline-block; overflow: hidden; position: relative; }
.sprite-head img { width: 100%; display: block; }
img.prop { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.mailbox { left: 10px; width: 132px; height: auto; }
.mailbox .mb-flag { right: -4px; top: 60px; z-index: 2; }
.bed { width: 132px; height: 150px; }
.bed .bedimg { position: absolute; left: 0; right: 0; bottom: 10px; width: 132px; }
.bed-dogs { bottom: 46px; z-index: 1; }
.bed-dogs img.dog.sprite { margin: 0 -18px; }
.bed-label { bottom: 0; }
.jar { width: 92px; height: 132px; }
.jar img.prop { position: absolute; inset: 0; }
.jar .jar-glass { left: 12px; right: 12px; top: 42px; bottom: 8px; border: 0; background: none; border-radius: 12px 12px 22px 22px; }
.jar .jar-glass::after { display: none; }
.jar-fill { opacity: .55; }
.jar-label { top: 70px; font-size: 13px; }
.gz-scroll { position: absolute; right: 8px; top: 4px; width: 34px; transform: rotate(8deg); }
.tub-dogs .sprite-head { margin: 0 -8px; }
.couch-dog img.dog.sprite { margin-bottom: -6px; }
.scout-dog img.dog.sprite { transition: transform .2s; }
.mascot img.dog.sprite { animation: tilt 5s ease-in-out infinite; transform-origin: 50% 90%; }

.mailbox .mb-flag { display: none; }
.mailbox .mb-flag.up { display: block; position: absolute; left: 50%; top: -30px; right: auto; width: auto; height: auto; background: none; transform: translateX(-50%); font-size: 28px; animation: bob 1.4s ease-in-out infinite; }
.mailbox .mb-flag.up::after { content: '✉️'; position: static; border: 0; background: none; width: auto; height: auto; }
.bed-label { bottom: auto; top: 6px; left: auto; right: 2px; font-size: 0; }
.bed-label em { font-size: 13px; }

/* ---------- polish pass ---------- */
.goal-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-bubble { left: -4px; top: -40px; width: 214px; text-align: center; }
.scout-bubble #fetchBtn { position: static; transform: none; margin-top: 5px; }
.scout-bubble #fetchBtn:hover { transform: scale(1.05); }
.couch-empty { font: 700 14px 'Baloo 2'; color: var(--choc2); background: rgba(255,255,255,.92); border: 2px solid var(--choc); border-radius: 999px; padding: 2px 14px; margin-bottom: 44px; white-space: nowrap; }
.bed-label em.zero { display: none; }
.gazette #gazette li:nth-child(n+5) { display: none; }
.tub-dogs [data-lead], .bed-dogs [data-lead] { cursor: pointer; transition: transform .15s; }
.tub-dogs [data-lead]:hover, .bed-dogs [data-lead]:hover { transform: translateY(-5px) scale(1.06); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985) translateY(1px); } }
img.dog.sprite, .sprite-head img { animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.bed-dogs img.dog.sprite { animation-duration: 5s; }
.fame { position: absolute; left: 446px; top: 22px; width: 206px; display: flex; gap: 8px; justify-content: center; }
.fame::before { content: 'Hall of Fame'; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font: 400 14px 'Chewy'; color: var(--choc); background: var(--butter); border: 2px solid var(--choc); border-radius: 8px; padding: 0 8px; z-index: 2; white-space: nowrap; }
.frame { position: relative; width: 60px; height: 70px; margin-top: 10px; background: #fff8ec; border: 5px solid #e2b04a; outline: 3px solid var(--choc); border-radius: 10px; box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; cursor: pointer; transform: rotate(var(--r, 0deg)); }
.frame .sprite-head { margin-top: 6px; }
.frame.vacant { cursor: default; color: #d6b48a; font: 400 26px 'Chewy'; }
.frame.vacant small { position: absolute; bottom: 2px; font: 700 8.5px 'Baloo 2'; color: #b89a86; }
.frame:not(.vacant):hover { transform: rotate(0) scale(1.08); }
.mascot { cursor: pointer; }
.heartfloat { position: absolute; font-size: 22px; pointer-events: none; z-index: 30; animation: floatup 1.6s ease-out forwards; }
@keyframes floatup { from { opacity: 1; transform: translateY(0) scale(.8); } to { opacity: 0; transform: translateY(-110px) scale(1.3); } }
.coin.bump { animation: boing .5s cubic-bezier(.3, 1.8, .5, 1); }
.rotate-hint { position: fixed; left: 10px; right: 10px; bottom: 12px; z-index: 50; background: #fffaf2; border: 3px solid #5b3a29; border-radius: 16px; padding: 8px 12px; font: 700 14px 'Baloo 2'; color: #5b3a29; display: flex; gap: 8px; align-items: center; justify-content: space-between; box-shadow: 0 4px 0 rgba(91,58,41,.25); }
.fame { left: 436px; width: 226px; }
.frame { flex: 0 0 60px; }
.scout-bubble #fetchBtn { display: flex; margin: 5px auto 0; }

/* ---------- tech-free & game layer ---------- */
#hud { gap: 12px; }
.logo { width: 150px; }
.logo .l1, .logo .l2 { font-size: 40px; }
.goalbox { width: 360px; }
.coin { padding: 3px 10px 3px 5px; }
.coin .ci { font-size: 19px; } .coin b { font-size: 19px; }
.questbtn { display: flex; align-items: center; gap: 4px; border: 3px solid var(--choc); border-radius: 14px; padding: 2px 10px; background: linear-gradient(#fff6d8, #ffe08a);
  box-shadow: var(--shadow); font: 700 17px 'Baloo 2'; color: var(--choc); animation: nudge 3s ease-in-out infinite; }
.questbtn span { font-size: 24px; }
.questbtn.done { display: none; }
@keyframes nudge { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(6deg); } }
.sign { width: 132px; }
.toolrow { display: flex; gap: 4px; }
.toolrow .round { width: 36px; height: 36px; font-size: 17px; }
.round.off { filter: grayscale(1); opacity: .6; }
.quest { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--choc); border-radius: 16px; padding: 8px 12px; margin: 8px 0; }
.quest .qe { font-size: 34px; text-align: center; }
.quest b { font-size: 17px; display: block; }
.quest.done { background: #eafff6; border-color: var(--mintdeep); }
.quest.done b { text-decoration: line-through; text-decoration-color: rgba(35,134,106,.5); }
.quest .tick { font-size: 28px; }
.biscuit-talk { display: flex; gap: 14px; align-items: center; }
.biscuit-talk .bubble { position: relative; flex: 1; font-size: 15px; font-weight: 600; }
.stickers { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 10px; }
.sticker { text-align: center; }
.sticker .disc { width: 86px; height: 86px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 40px; border: 4px dashed #d9c3b0; background: #f7efe6; filter: grayscale(1); opacity: .5; }
.sticker.got .disc { border: 4px solid var(--choc); background: radial-gradient(circle at 35% 30%, #fff, #ffd1e2 60%, #ff9ec2); filter: none; opacity: 1; box-shadow: 0 5px 0 rgba(91,58,41,.25); transform: rotate(-6deg); }
.sticker b { display: block; font-size: 13px; margin-top: 6px; }
.sticker small { display: block; font-size: 11px; color: #9a7b67; line-height: 1.2; }
.speeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.speed { border: 3px solid var(--choc); border-radius: 16px; background: #fff; padding: 8px; text-align: center; cursor: pointer; font-family: inherit; color: var(--ink); }
.speed .se { font-size: 30px; display: block; }
.speed b { display: block; font-size: 15px; }
.speed small { display: block; font-size: 11.5px; color: #9a7b67; line-height: 1.25; }
.speed.on { background: linear-gradient(#ffe3ee, #ffc1d6); box-shadow: 0 4px 0 var(--pinkdeep); transform: translateY(-2px); }
details.fine { margin-top: 12px; border-top: 2px dashed #ecd5c3; padding-top: 6px; }
details.fine > summary { cursor: pointer; font: 400 18px 'Chewy'; color: var(--choc2); }
.arrive { position: absolute; z-index: 5; pointer-events: none; transition: left 1.8s ease-in-out, top 1.8s ease-in-out, opacity .4s; }
.arrive img, .arrive svg { animation: hop .35s ease-in-out infinite; }
.copyhost { margin-top: 8px; }

/* ---------- UX pass: tour, explainers, simpler flows ---------- */
.tab { width: 140px; }
.plaque { cursor: help; }
.plaque:hover { transform: translateX(-50%) scale(1.05); }
.plaque::after { content: '?'; position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--butter); border: 2px solid var(--choc); font: 800 11px/14px 'Baloo 2'; color: var(--choc); text-align: center; }
.tour { position: absolute; inset: 0; z-index: 60; }
.tour-hole { position: absolute; border-radius: 22px; box-shadow: 0 0 0 4000px rgba(60, 35, 25, .62), 0 0 0 5px var(--butter), 0 0 30px 8px rgba(255, 224, 122, .8); transition: all .45s cubic-bezier(.3, 1.2, .5, 1); pointer-events: none; }
.tour-card { position: absolute; width: 380px; background: var(--paper); border: 4px solid var(--choc); border-radius: 22px; padding: 12px 16px 14px; box-shadow: 0 8px 0 rgba(91,58,41,.35); transition: all .45s cubic-bezier(.3, 1.2, .5, 1); }
.tour-card .tc-top { display: flex; gap: 10px; align-items: center; }
.tour-card h3 { margin: 0; font-size: 24px; color: var(--pinkdeep); }
.tour-card p { font-size: 15px; line-height: 1.45; margin: 6px 0 10px; }
.tour-card .tc-foot { display: flex; justify-content: space-between; align-items: center; }
.tour-card .dots { display: flex; gap: 4px; } .tour-card .dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--choc); background: #fff; } .tour-card .dots i.on { background: var(--pink2); }
.explain { text-align: center; }
.explain .big { font-size: 60px; }
.explain p { font-size: 16px; line-height: 1.5; }
.picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; }
.pick { border: 3px solid #ecd5c3; border-radius: 16px; background: #fff; padding: 4px 2px 6px; cursor: pointer; text-align: center; font: 700 12px/1.2 'Baloo 2'; color: var(--ink); }
.pick .dog, .pick .sprite-head { margin: 0 auto; }
.pick:hover { border-color: var(--pink); transform: translateY(-2px); }
.pick.on { border-color: var(--pink2); background: #ffeaf2; box-shadow: 0 4px 0 var(--pinkdeep); }
.flags { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.flags .pick { font-size: 13px; padding: 6px 2px; } .flags .pick span { display: block; font-size: 30px; }
.help-hero { display: flex; gap: 18px; align-items: center; background: linear-gradient(#fff3f8, #ffe3ee); border: 3px solid var(--choc); border-radius: 20px; padding: 10px 18px; column-span: all; margin-bottom: 14px; }
.help-hero .bubble { position: relative; flex: 1; font-size: 15.5px; }
.day3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; column-span: all; margin-bottom: 14px; }
.day3 > div { background: #fff; border: 3px solid var(--choc); border-radius: 18px; padding: 10px 14px; text-align: center; }
.day3 .n { font: 400 40px 'Chewy'; color: var(--pinkdeep); line-height: 1; }
.day3 b { display: block; font-size: 16px; margin: 4px 0; }
.faq { break-inside: avoid; background: #fff; border: 2px solid #ecd5c3; border-radius: 14px; padding: 6px 12px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 15px; }
.faq p { margin: 6px 0 2px; }
.vetcard { display: flex; gap: 14px; align-items: center; background: linear-gradient(#eafff6, #d8fbee); border: 3px solid var(--mintdeep); border-radius: 16px; padding: 8px 12px; margin: 8px 0 12px; }
.vetcard .big { font-size: 38px; }
.tip .gbtn { margin-top: 6px; }

/* ---------- text size (🔤): panels & pop-ups grow, layout stays ---------- */
:root { --tz: 1; }
.toolrow .round { width: 31px; height: 31px; font-size: 15px; border-width: 2px; box-shadow: 0 2px 0 var(--choc); }
.screen:not(#parlour):not(#map) { zoom: var(--tz); }
#map .side { zoom: var(--tz); }
.modal-card { zoom: var(--tz); max-height: calc(730px / var(--tz)); width: calc(820px * (1.12 - var(--tz) * .12)); }
.tour-card, .tip, .scout-bubble, .toast { zoom: calc(1 + (var(--tz) - 1) * .7); }
.plaque, #gazette, .couch-empty { zoom: calc(1 + (var(--tz) - 1) * .5); }
.picker .pick, .flags .pick { font-size: 13px; }

/* ---------- night mode (🌙) ---------- */
body.dark { background: radial-gradient(circle at 20% 20%, #3a2d55 0 12%, transparent 13%) 0 0/60px 60px, #241b36; }
body.dark {
  --cream: #231b35; --paper: #2d2443; --ink: #f3eaff; --choc: #140d1f; --choc2: #d9c6f0;
  --shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
body.dark #stage { box-shadow: 0 0 0 6px #140d1f, 0 0 0 12px #4a3a6b, 0 0 0 16px #140d1f, 0 30px 60px rgba(0,0,0,.5); background: var(--cream); }
body.dark #hud { background: linear-gradient(#4a3668, #3a2a55); }
body.dark #hud::after { background: radial-gradient(circle at 12px -2px, #3a2a55 11px, #140d1f 12px 14px, transparent 15px) 0 0/24px 12px repeat-x; }
body.dark .wall { background: repeating-linear-gradient(90deg, #2e2548 0 34px, #342a52 34px 68px); }
body.dark .wall .dots { background: radial-gradient(#4d3d72 2.2px, transparent 2.6px) 17px 20px/68px 40px; }
body.dark .molding { background: linear-gradient(#4a3b68, #3a2d55); }
body.dark .wainscot { background: repeating-linear-gradient(90deg, #26455c 0 76px, #213d52 76px 80px); }
body.dark .floor { background: conic-gradient(#3b3050 25%, #33294a 0 50%, #3b3050 0 75%, #33294a 0) 0 0/64px 64px; }
body.dark .window .sky { background: linear-gradient(#1b2255, #3d3a8a); }
body.dark .window .sky::after { content: '✦  ·   ✧ ·  ✦'; position: absolute; left: 30px; top: 18px; color: #fff8d0; font-size: 12px; letter-spacing: 4px; }
body.dark .sun { background: #fff8d0; box-shadow: -8px -2px 0 0 #1b2255 inset, 0 0 14px #fff8d0; }
body.dark .cloud, body.dark .cloud::before, body.dark .cloud::after { background: #8a86c6; opacity: .5; }
body.dark .garland { filter: brightness(.8); }
body.dark #tabs { background: linear-gradient(#3a2a55, #2a1e40); }
body.dark .tab { background: linear-gradient(#3d3159, #2f2547); color: var(--ink); }
body.dark .tab.active { background: linear-gradient(#ff8fb7, #c9336d); }
body.dark .field, body.dark .letter, body.dark .ibox, body.dark .kpi, body.dark .dcard, body.dark .quest, body.dark .pick,
body.dark .faq, body.dark .day3 > div, body.dark .lvl-stat div, body.dark .chip, body.dark .pill, body.dark .speed,
body.dark .varchips button, body.dark .abpills button, body.dark .nb-tab, body.dark table.cute td, body.dark .kennel .box,
body.dark .bubble, body.dark .tip, body.dark .round, body.dark .clock, body.dark .coin, body.dark .goalbox, body.dark .plaque,
body.dark .couch-empty, body.dark .jar-label, body.dark .couch-dog .say, body.dark .couch-dog .nm, body.dark .frame {
  background: #372c52; color: var(--ink); border-color: #140d1f; }
body.dark .scout-bubble::after, body.dark .tip::after { background: #372c52; }
body.dark .letter { background-image: repeating-linear-gradient(transparent 0 21px, #43386a 21px 22px); }
body.dark .letter.theirs { box-shadow: 6px 6px 0 #5a2a4a; }
body.dark .gazette { background: #2d2443; background-image: repeating-linear-gradient(transparent 0 21px, #3d3160 21px 22px); background-position: 0 30px; }
body.dark .nb-page { background-color: #2d2443; background-image: linear-gradient(90deg, transparent 44px, #7a3a5a 44px 47px, transparent 47px), repeating-linear-gradient(transparent 0 33px, #3a3060 33px 35px); }
body.dark .lrow:hover { background: #3d3160; }
body.dark .muted, body.dark small, body.dark .sm, body.dark .kennel .ks { color: #b6a6d6 !important; }
body.dark .note { background: #3d3350; border-color: #c9a24a; color: var(--ink); }
body.dark .vetcard, body.dark .help-hero { background: linear-gradient(#2f3d52, #2a3448); }
body.dark .quest.done { background: #213a36; }
body.dark .pick.on, body.dark .speed.on { background: #5a2d4a; }
body.dark h2 { color: #ff9ec2; -webkit-text-stroke: 0; }
body.dark h3, body.dark .gz-title, body.dark .kennels-title { color: #f3eaff; }
body.dark .plaque b { color: #ff9ec2; }
body.dark #map { background: linear-gradient(#18234a, #253466); }
body.dark #mapSvg text { fill: #f3eaff; stroke: #18234a; }
body.dark .login-card { background: #2d2443; color: var(--ink); }
body.dark img.dog.sprite, body.dark .sprite-head img { filter: brightness(.92) drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
body.dark .gbtn.grey { --c1: #6b5f80; --c2: #4b405f; --bd: #1f182c; }

/* ---------- 🧭 grand tour ---------- */
.tab { width: 128px; }
.tour-hero { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; background: linear-gradient(#fff3f8, #ffe3ee); border: 3px solid var(--choc); border-radius: 22px; padding: 12px 20px; }
.tour-hero .lvl { font: 400 20px 'Chewy'; color: var(--choc2); }
.tour-hero h2 { font-size: 44px; line-height: 1; margin: 2px 0 6px; }
.path { display: flex; align-items: center; gap: 0; margin: 10px 0 4px; }
.path .st { flex: 1; text-align: center; font-size: 13px; font-weight: 700; }
.path .st .dot { width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 50%; border: 4px solid var(--choc); display: grid; place-items: center; font-size: 24px; background: #fff; }
.path .st.done .dot { background: #8fe3c8; } .path .st.now .dot { background: #ffe07a; animation: bob 1.6s infinite; }
.path .line { flex: 0 0 50px; height: 5px; background: var(--choc); border-radius: 3px; opacity: .4; }
.bigbar { height: 22px; border: 3px solid var(--choc); border-radius: 999px; background: #f4e3d6; overflow: hidden; margin: 6px 0; }
.bigbar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #ff9ec2 0 12px, #ff7aa9 12px 24px); transition: width 1s; }
.cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; margin: 6px 0 12px; font-size: 12.5px; font-weight: 700; }
.cgrid .mini { height: 8px; border-radius: 6px; background: #f0dccc; overflow: hidden; margin-top: 2px; } .cgrid .mini i { display: block; height: 100%; background: #37c095; }
.locked { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.mystery { width: 86px; height: 96px; border: 3px dashed #c9b1a0; border-radius: 18px; display: grid; place-items: center; font: 400 36px 'Chewy'; color: #c9b1a0; background: repeating-linear-gradient(45deg, #fbf3ea 0 10px, #f5e9dc 10px 20px); position: relative; }
.mystery::after { content: '🔒'; position: absolute; right: -8px; top: -10px; font-size: 20px; }
.shelf { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 12px 4px; border-bottom: 10px solid #c98b5a; border-radius: 0 0 6px 6px; background: linear-gradient(transparent 70%, rgba(201,139,90,.15)); min-height: 110px; }
.trophy { text-align: center; font-size: 11.5px; font-weight: 800; width: 86px; }
.trophy .sprite-head { margin: 0 auto; }
.trophy small { display: block; color: var(--mintdeep); }
body.dark .tour-hero { background: linear-gradient(#3a2d55, #2f2547); }
body.dark .mystery { background: repeating-linear-gradient(45deg, #2f2547 0 10px, #372c52 10px 20px); border-color: #5a4a7a; color: #7a6a9a; }
body.dark .path .st .dot { background: #372c52; } body.dark .path .st.done .dot { background: #23866a; } body.dark .path .st.now .dot { background: #a07a1a; }

/* ---------- 🌍 worlds map ---------- */
.worlds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.worlds-head .lvl { font: 400 18px 'Chewy'; color: var(--choc2); }
.worlds-scroll { position: relative; overflow-x: auto; overflow-y: hidden; margin: 8px -22px -14px; height: 490px; border-top: 3px solid var(--choc);
  background: radial-gradient(ellipse at 20% 110%, #bff0c9 0 22%, transparent 23%), radial-gradient(ellipse at 70% 115%, #a8e6b8 0 25%, transparent 26%),
              linear-gradient(#bfe8ff, #e6f7ff 70%, #d6f5dc); scrollbar-width: thin; scrollbar-color: var(--pink) transparent; }
.worlds-canvas { position: relative; }
.wpath { position: absolute; left: 0; top: 0; }
.wpath .road { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 2 24; opacity: .9; }
.wpath .road.walked { stroke: #ffb3cf; stroke-dasharray: none; stroke-width: 12; opacity: 1; }
.world { position: absolute; width: 150px; margin-left: -75px; margin-top: -70px; text-align: center; cursor: pointer; }
.world .isle { position: relative; width: 120px; height: 104px; margin: 0 auto; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
  background: radial-gradient(ellipse at 50% 30%, #c9f5b0 0 45%, #8fd878 46% 58%, #c98b5a 59%); border: 4px solid var(--choc);
  display: grid; place-items: center; box-shadow: 0 10px 0 rgba(91, 58, 41, .2); transition: transform .2s; }
.world:hover .isle { transform: translateY(-5px) scale(1.04); }
.world .wlabel { font: 400 17px 'Chewy'; color: var(--choc); margin-top: 6px; text-shadow: 0 2px 0 #fff; }
.world small { display: block; font-size: 11.5px; font-weight: 800; color: var(--choc2); }
.world .flag { position: absolute; right: -6px; top: -8px; font-size: 26px; }
.world.now .isle { background: radial-gradient(ellipse at 50% 30%, #fff3b0 0 45%, #ffd24a 46% 58%, #c98b5a 59%); animation: bob 2.2s ease-in-out infinite; }
.world.now .ring { position: absolute; left: 50%; top: -8px; width: 144px; height: 144px; margin-left: -72px; border-radius: 50%;
  background: conic-gradient(#ff5f98 calc(var(--p) * 1%), rgba(255, 255, 255, .6) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.world.now .nowtag { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap; background: var(--pink2); color: #fff; border: 2px solid var(--pinkdeep); border-radius: 999px; padding: 1px 10px; font: 800 12.5px/1.5 'Baloo 2'; box-shadow: 0 2px 0 rgba(91,58,41,.25); z-index: 2; }
.world.now .wlabel { color: var(--pinkdeep); font-size: 20px; }
.world.locked .isle { background: radial-gradient(ellipse at 50% 35%, #eef0f6 0 50%, #cfd4e2 51% 60%, #a9a2b8 61%); border-style: dashed; filter: saturate(.5); }
.world.locked .q { font: 400 44px 'Chewy'; color: #9a93ad; }
.world.locked::after { content: '🔒'; position: absolute; left: 50%; top: -12px; margin-left: 30px; font-size: 22px; }
.world.locked .wlabel { color: #9a93ad; }
.world.more::after { content: '✨'; }
.world.shake .isle { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px) rotate(-3deg); } 40%, 80% { transform: translateX(8px) rotate(3deg); } }
body.dark .worlds-scroll { background: radial-gradient(ellipse at 20% 110%, #2a4a3a 0 22%, transparent 23%), radial-gradient(ellipse at 70% 115%, #24403a 0 25%, transparent 26%), linear-gradient(#1b2255, #2e2a66 70%, #243a3a); }
body.dark .world .wlabel { color: #f3eaff; text-shadow: 0 2px 0 #140d1f; }
body.dark .wpath .road { stroke: #6a64a8; }
.world .wlabel, .world small { display: block; width: 100%; text-align: center; }
.world.now .wlabel { margin-top: 18px; }

/* ---------- header, notifications, full screen ---------- */
.goalbox { padding-bottom: 8px; }
.goal-top { margin-bottom: 2px; }
.gz-title { position: relative; }
.gz-hide { position: absolute; right: 38px; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--choc); background: #fff; font-size: 11px; line-height: 16px; cursor: pointer; color: var(--choc); }
.bell { position: absolute; left: 1210px; top: 540px; width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--choc); background: linear-gradient(#fff6d8, #ffe08a); font-size: 26px; box-shadow: var(--shadow); cursor: pointer; }
.bell em { position: absolute; right: -8px; top: -8px; font-style: normal; background: var(--pink2); color: #fff; border: 3px solid var(--choc); border-radius: 999px; min-width: 26px; padding: 0 5px; font-size: 13px; font-weight: 800; line-height: 20px; }
.bell.ring { animation: shake .5s 2; }
body.dark .gz-hide, body.dark .bell { background: #372c52; color: var(--ink); }
:fullscreen #stage, :-webkit-full-screen #stage { border-radius: 0; }

/* ---------- letters, gmail-style ---------- */
.mailbox-ui { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: calc(100% - 56px); }
.mlist, .mpreview { background: var(--paper); border: 4px solid var(--choc); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; overflow-y: auto; }
.mrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 3px solid #ecd5c3; border-radius: 14px; padding: 10px 12px; margin: 8px 0; cursor: pointer; }
.mrow:hover, .mrow.on { border-color: var(--pink2); background: #fff4f8; }
.mico { font-size: 30px; text-align: center; }
.mtxt b { font-size: 16px; }
.msub { font-size: 13.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.mp-head { display: flex; justify-content: space-between; align-items: center; font: 400 20px 'Chewy'; color: var(--choc); margin-bottom: 8px; }
.mpreview .letter { max-height: none; }
.compose { position: absolute; right: 30px; bottom: 96px; width: 620px; height: 560px; z-index: 50; background: var(--paper); border: 4px solid var(--choc); border-radius: 16px 16px 12px 12px;
  box-shadow: 0 16px 40px rgba(91, 58, 41, .35); display: flex; flex-direction: column; animation: boing .35s cubic-bezier(.3, 1.6, .5, 1); zoom: var(--tz); max-height: calc(690px / var(--tz)); }
.cbar { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#ff9ec2, #ff6fa3); color: #fff; padding: 8px 14px; border-radius: 11px 11px 0 0; font-size: 15px; text-shadow: 0 1px 0 var(--pinkdeep); }
.cbar button { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.ctabs { display: flex; gap: 6px; align-items: center; padding: 6px 14px 0; font-size: 12px; }
.ctabs button { border: 2px solid var(--choc); border-radius: 8px; background: #fff; font-weight: 800; padding: 1px 10px; }
.ctabs button.on { background: var(--lilac); color: #fff; }
.cline { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #ecd5c3; font-size: 14px; }
.cin { flex: 1; border: 0; outline: 0; background: transparent; font: 600 15px 'Baloo 2'; color: var(--ink); }
.cbody { flex: 1; border: 0; outline: 0; resize: none; padding: 12px 14px; font: 500 15px/1.55 'Baloo 2'; color: var(--ink); background: transparent; }
.ccheck { padding: 4px 14px; font-size: 12.5px; font-weight: 700; min-height: 22px; }
.cfoot { display: flex; gap: 8px; align-items: center; padding: 8px 12px 12px; border-top: 1px solid #ecd5c3; }
.cmenu { position: relative; }
.cdrop { position: absolute; bottom: 42px; left: 0; background: #fff; border: 3px solid var(--choc); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; width: 250px; z-index: 5; }
.cdrop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 8px; font: 700 13.5px 'Baloo 2'; color: var(--ink); cursor: pointer; }
.cdrop button:hover { background: #ffeaf2; }
body.dark .mrow, body.dark .cdrop, body.dark .ctabs button { background: #372c52; border-color: #140d1f; color: var(--ink); }
body.dark .mrow:hover, body.dark .mrow.on { background: #4a3a6b; }
body.dark .cdrop button { color: var(--ink); } body.dark .cdrop button:hover { background: #4a3a6b; }

/* ---------- real map ---------- */
#map { background: var(--cream); }
.map-wrap { border: 4px solid var(--choc); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
#leaf { position: absolute; inset: 0; background: #aad3df; }
.maphint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 500; background: rgba(255, 250, 242, .95); border: 3px solid var(--choc); border-radius: 999px; padding: 3px 14px; font-weight: 800; font-size: 13px; pointer-events: none; white-space: nowrap; }
.maplegend { position: absolute; left: 12px; top: 12px; z-index: 500; display: flex; gap: 8px; }
.leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 34px !important; font-size: 20px !important; }
.leaflet-top.leaflet-left { top: 56px; }
.lmark-wrap { background: none; border: 0; }
.lmark { position: absolute; transform: translate(-50%, -100%); background: var(--paper); border: 3px solid var(--choc); border-radius: 16px; padding: 4px 10px 5px; text-align: center; white-space: nowrap; box-shadow: 0 4px 0 rgba(91, 58, 41, .3); cursor: pointer; }
.lmark::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--choc); }
.lmark:hover { transform: translate(-50%, -100%) scale(1.08); z-index: 5; }
.lmark.sel { border-color: var(--pink2); box-shadow: 0 0 0 4px #ffd1e2, 0 4px 0 rgba(91,58,41,.3); }
.lfaces { display: flex; justify-content: center; } .lfaces > * { margin: 0 -5px; }
.lname { font: 400 15px 'Chewy'; color: var(--choc); }
.lcount { font-size: 11px; font-weight: 800; color: var(--choc2); }
.lpop { font-family: 'Baloo 2'; min-width: 220px; }
.lpop > b { display: block; font: 400 18px 'Chewy'; margin-bottom: 4px; }
.lpick { display: flex; align-items: center; gap: 6px; width: 100%; border: 2px solid #ecd5c3; background: #fff; border-radius: 10px; padding: 3px 8px; margin: 3px 0; font: 700 13px 'Baloo 2'; cursor: pointer; text-align: left; }
.lpick span { margin-left: auto; color: var(--choc2); }
.lpick:hover { border-color: var(--pink2); }
.lpop .lnew { margin-top: 6px; }
body.dark .lmark, body.dark .maphint { background: #2d2443; color: var(--ink); }
body.dark .lname { color: var(--ink); }

/* map v2: pastel OSM tiles, compact markers that grow when you zoom in */
#leaf .leaflet-tile-pane { filter: saturate(.75) brightness(1.04) sepia(.08); }
body.dark #leaf .leaflet-tile-pane { filter: invert(.92) hue-rotate(185deg) saturate(.6) brightness(.9); }
.lmark { padding: 0; border: 0; background: none; box-shadow: none; }
.lmark::after { display: none; }
.lface { position: relative; width: 50px; height: 50px; border-radius: 50%; background: var(--paper); border: 3px solid var(--choc); box-shadow: 0 3px 0 rgba(91,58,41,.35); display: grid; place-items: center; overflow: visible; }
.lface > .dog, .lface > .sprite-head { transform: translateY(2px); }
.lface .sprite-head { width: 40px !important; height: 30px !important; }
.lflag { position: absolute; left: -8px; bottom: -6px; font-size: 16px; }
.lnum { position: absolute; right: -8px; top: -8px; background: var(--pink2); color: #fff; border: 2px solid var(--choc); border-radius: 999px; min-width: 20px; font: 800 11px/16px 'Baloo 2'; text-align: center; padding: 0 3px; }
.lmark.sel .lface { border-color: var(--pink2); box-shadow: 0 0 0 4px #ffd1e2; }
.lname { display: none; margin-top: 4px; background: var(--paper); border: 2px solid var(--choc); border-radius: 10px; padding: 0 8px; font: 400 14px 'Chewy'; }
#leaf.zoomed .lname { display: block; }
body.dark .lface, body.dark .lname { background: #2d2443; }

/* ---------- hover explanations (what the cute words mean in real life) ---------- */
.tipbox { position: absolute; z-index: 90; max-width: 300px; background: #3a2a55; color: #fff; font: 600 13px/1.4 'Baloo 2'; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; zoom: calc(1 + (var(--tz) - 1) * .8); }
.tipbox b { color: #ffd1e2; }

.tipbox { display: none !important; }
.tappable, .coin, .goalbox, .clock { cursor: pointer; }
.tappable:hover { filter: brightness(1.05); box-shadow: 0 0 0 3px #ffd1e2; }
.modal-card.small-pop { width: 480px; }
.plainline { background: #fff4d6; border: 2px dashed #e0b04a; border-radius: 12px; padding: 4px 12px; display: inline-block; }
body.dark .plainline { background: #3d3350; }

#leaf .lface .sprite-head img { width: 100% !important; height: auto; }

/* ================= 📱 PHONE LAYOUT (body.phone) =================
   One slim top bar · app-style bottom bar · pannable parlour · one-column pages with a 12px gutter */
.roombar, .pnav { display: none; }
body.phone { overflow: hidden; --gut: 12px; --navh: 64px; }
body.phone #viewport { display: block; }
body.phone #stage { position: fixed; inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; transform: none !important; }
body.phone #tabs, body.phone .hud-tools, body.phone .questbtn { display: none !important; }

/* --- top bar: counters left, open/closed switch right, goal line underneath --- */
body.phone #hud { position: relative; height: auto; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: calc(8px + env(safe-area-inset-top)) var(--gut) 8px; border-bottom-width: 3px; box-shadow: none; }
body.phone #hud::after { display: none; }
body.phone .coins { gap: 6px; }
body.phone .coin { padding: 3px 9px 3px 6px; border-width: 2px; box-shadow: 0 2px 0 rgba(91, 58, 41, .25); gap: 4px; }
body.phone .coin .ci, body.phone .coin b { font-size: 15px; line-height: 1.2; }
body.phone .sign { width: auto; margin-left: auto; padding: 0; }
body.phone .sign .rope, body.phone .sign small { display: none; }
body.phone .sign .board { display: flex; align-items: center; gap: 7px; font: 800 14px/1 'Baloo 2'; letter-spacing: .04em; padding: 7px 13px 7px 10px; border-width: 2px; border-radius: 999px; box-shadow: 0 2px 0 rgba(91, 58, 41, .3); text-shadow: none; }
body.phone .sign .board::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); }
body.phone .sign.open .board::before { background: #eafff6; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 0 8px #fff; }
body.phone .goalbox { order: 10; flex: 1 1 100%; width: auto; display: flex; align-items: center; gap: 8px; background: none; border: 0; box-shadow: none; padding: 0; }
body.phone .goal-top { display: contents; }
body.phone #goalText { order: 0; font-size: 13px; font-weight: 800; white-space: nowrap; }
body.phone .goalbox .meter { order: 1; flex: 1; height: 10px; margin: 0; border-width: 2px; }
body.phone .goalbox .meter-star { display: none; }
body.phone #dayStars { order: 2; font-size: 14px; letter-spacing: 1px; }

/* --- middle: scrolls like a normal phone page --- */
body.phone #screens { position: relative; top: auto; bottom: auto; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.phone .screen { position: relative; inset: auto; min-height: 100%; padding: var(--gut) var(--gut) calc(var(--gut) + 8px); }
body.phone .screen.active { animation: none; }

/* --- parlour: the whole room, pan it with your finger; the shortcut strip glides to each station --- */
body.phone #screens:has(#parlour.active) { overflow: auto; scrollbar-width: none; }
body.phone #screens:has(#parlour.active)::-webkit-scrollbar { display: none; }
body.phone #parlour { width: 1280px; height: 618px; min-height: 0; padding: 0; zoom: var(--pz, 1); }
body.phone .plaque { zoom: 1.15; }
body.phone.on-parlour .roombar { display: flex; position: absolute; left: 0; right: 0; bottom: calc(var(--navh) + env(safe-area-inset-bottom) + 8px); z-index: 8; gap: 6px; overflow-x: auto; padding: 0 var(--gut); scrollbar-width: none; pointer-events: none; }
body.phone .roombar::-webkit-scrollbar { display: none; }
.roombar button { pointer-events: auto; flex-shrink: 0; border: 2px solid var(--choc); background: rgba(255, 250, 242, .94); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 700 13.5px/1 'Baloo 2'; box-shadow: 0 2px 0 rgba(91, 58, 41, .25); backdrop-filter: blur(4px); }
.roombar button.on { background: var(--pink2); color: #fff; border-color: var(--pinkdeep); }
body.dark .roombar button:not(.on) { background: rgba(45, 36, 67, .94); }

/* --- bottom bar: 5 tabs like a real app --- */
body.phone .pnav { display: grid; grid-template-columns: repeat(6, 1fr); flex-shrink: 0; height: calc(var(--navh) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: var(--paper); border-top: 3px solid var(--choc); position: relative; z-index: 9; }
.pnav button { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--choc2); font: 700 11px/1 'Baloo 2'; padding: 0; -webkit-tap-highlight-color: transparent; }
.pnav i { font-style: normal; font-size: 21px; line-height: 1; width: 46px; height: 30px; display: grid; place-items: center; border-radius: 999px; transition: background .15s; }
.pnav button.on { color: var(--pinkdeep); }
.pnav button.on i { background: #ffd1e2; }
body.dark .pnav button.on i { background: #5a3e7a; }
body.dark .pnav button.on { color: #ffb6cf; }
.pbadge { position: absolute; top: 0; left: calc(50% + 8px); font-style: normal; background: var(--pink2); color: #fff; border: 2px solid var(--paper); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px; font: 800 11px/16px 'Baloo 2'; }
.pbadge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; left: calc(50% + 10px); top: 2px; }

/* --- "More" sheet --- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(60, 35, 25, .4); display: flex; align-items: flex-end; animation: fadein .18s; }
.sheet-wrap.closing { opacity: 0; transition: opacity .18s; }
.sheet { width: 100%; background: var(--paper); border-top: 3px solid var(--choc); border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: sheetup .22s cubic-bezier(.2, .9, .3, 1.1); zoom: var(--tz); }
@keyframes sheetup { from { transform: translateY(40%); } }
.sheet .grab { width: 40px; height: 5px; border-radius: 9px; background: #d9c3b3; margin: 0 auto 12px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stile { border: 2px solid #ecd5c3; background: #fff; border-radius: 18px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }
.stile i { font-style: normal; font-size: 28px; line-height: 1.1; }
.stile b { font-size: 15px; }
.stile small { font-size: 11.5px; color: var(--choc2); opacity: .8; }
.stile.on { border-color: var(--pink2); background: #fff4f8; }
.sheet-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.sheet-row button { border: 0; background: #fbeee3; border-radius: 14px; padding: 8px 2px; font: 700 12px/1.2 'Baloo 2'; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sheet-row i { font-style: normal; font-size: 20px; }
.sheet-clock { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--choc2); }
body.dark .stile { background: #3a2f55; border-color: #4d3f6b; }
body.dark .sheet-row button { background: #3a2f55; }

/* --- pages: one column, even 12px gutter, softer cards --- */
body.phone .map-wrap, body.phone .side, body.phone .notebook, body.phone .nb-page, body.phone .letters-wrap, body.phone .keys-wrap,
body.phone .help-wrap, body.phone .report-wrap, body.phone .book-list { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; }
body.phone .paper, body.phone .nb-page, body.phone .mlist, body.phone .mpreview { border-width: 3px; border-radius: 18px; box-shadow: 0 3px 0 rgba(91, 58, 41, .2); }
body.phone .report-wrap, body.phone .help-wrap, body.phone .side { padding: 14px; }
body.phone h2 { font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
body.phone h3 { font-size: 17px; margin: 14px 0 6px; }
body.phone p { margin: 0 0 10px; }
body.phone .muted { line-height: 1.45; }
body.phone .scroll { overflow: visible; }
body.phone .actions { flex-wrap: wrap; gap: 8px; }
body.phone .gbtn { font-size: 16px; padding: 8px 18px 10px; }
body.phone .gbtn.small { font-size: 14px; padding: 6px 13px 8px; }
body.phone input.field, body.phone textarea.field, body.phone select.field { font-size: 16px; } /* no zoom-in while typing */
body.phone .field { max-width: 100%; }
body.phone .ibox { gap: 10px; padding: 10px; margin-bottom: 8px; }
/* map */
body.phone #map.screen { display: none; }
body.phone #map.screen.active { display: block; }
body.phone .map-wrap { height: 52vh; border-width: 3px; border-radius: 18px; margin-bottom: var(--gut); }
body.phone .maphint { white-space: normal; font-size: 12.5px; left: 8px; right: 8px; bottom: 8px; transform: none; text-align: center; border-radius: 12px; border-width: 2px; padding: 4px 8px; }
body.phone .maplegend { left: 8px; top: 8px; flex-wrap: wrap; gap: 6px; }
body.phone .side { overflow: visible; }
/* kennels */
body.phone .notebook { display: flex; flex-direction: column; gap: 10px; }
body.phone .nb-tabs { position: static; flex-direction: row; overflow-x: auto; gap: 6px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 2px; scrollbar-width: none; }
body.phone .nb-tabs::-webkit-scrollbar { display: none; }
body.phone .nb-tab { width: auto; flex-shrink: 0; border: 2px solid var(--choc); border-radius: 999px; font-size: 14px; padding: 6px 12px; box-shadow: none; }
body.phone .nb-tab em { float: none; margin-left: 5px; }
body.phone .nb-tab.on { transform: none; background: var(--pink2) !important; color: #fff; border-color: var(--pinkdeep); }
body.phone .nb-tab.on em { color: #fff; }
body.phone .nb-page { padding: 14px; background-image: none; }
body.phone .nb-page::before { display: none; }
body.phone .nb-head { flex-wrap: wrap; gap: 8px; }
body.phone .nb-head h2 { margin: 0; flex: 1; }
body.phone .nb-head .field { max-width: none; flex: 1 1 100%; order: 3; }
body.phone .book-list { overflow: visible; margin-top: 10px; }
body.phone .book-more { position: static; margin-top: 8px; }
body.phone .lrow { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 10px; align-items: start; padding: 10px 2px; border-radius: 0; border-bottom: 1.5px solid #f0dfd2; }
body.phone .lrow:last-child { border-bottom: 0; }
body.phone .lrow > * { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
body.phone .lrow > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
body.phone .lrow > :nth-child(2) { grid-column: 2; grid-row: 1; }
body.phone .lrow > :nth-child(3) { grid-column: 2; grid-row: 2; }
body.phone .lrow > :nth-child(4) { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
body.phone .lrow > :nth-child(5) { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
body.phone .lrow .kn { font-size: 15px; }
body.phone .lrow .sm { font-size: 12.5px; }
body.phone .lrow .chip { font-size: 11.5px; padding: 1px 8px; white-space: nowrap; }
body.dark.phone .lrow { border-bottom-color: #3d3257; }
/* letters */
body.phone .lt-head { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
body.phone .lt-head h2 { margin: 0; flex: 1; }
body.phone .mailbox-ui, body.phone .letter-cards { grid-template-columns: 1fr; height: auto; gap: var(--gut); }
body.phone .mlist, body.phone .mpreview { overflow: visible; padding: 14px; }
body.phone .mrow { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; margin: 8px 0; padding: 10px 12px; }
body.phone .mrow > .gbtn { grid-column: 2; justify-self: start; }
body.phone .msub { max-width: none; white-space: normal; }
/* settings, results, worlds, help */
body.phone .keys-wrap, body.phone .two, body.phone .grid2, body.phone .grid3, body.phone .speeds, body.phone .day3 { grid-template-columns: 1fr; height: auto; gap: var(--gut); }
body.phone .help-wrap { columns: 1; font-size: 15.5px; }
body.phone .kpis, body.phone .tally, body.phone .cgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.phone .stickers { grid-template-columns: repeat(3, 1fr); }
body.phone .picker { grid-template-columns: repeat(3, 1fr); }
body.phone .flags { grid-template-columns: repeat(2, 1fr); }
body.phone .tour-hero { grid-template-columns: 1fr; text-align: center; padding: 12px; }
body.phone .tour-hero h2 { font-size: 30px; }
body.phone .worlds-head { gap: 8px; }
body.phone .worlds-scroll { margin: 10px -14px -14px; height: 440px; border-radius: 0 0 15px 15px; }
/* popups */
body.phone .modal { position: fixed; padding: 10px; }
body.phone .modal-card, body.phone .modal-card.small-pop { width: calc((100vw - 20px) / var(--tz)); max-height: calc((100dvh - 30px) / var(--tz)); padding: 16px 14px 14px; border-width: 3px; border-radius: 20px; }
body.phone .modal-card .x { right: 10px; top: 10px; width: 38px; height: 38px; font-size: 17px; }
body.phone .modal-card h2 { padding-right: 44px; }
body.phone .compose { position: fixed; left: 6px; right: 6px; top: 6px; bottom: 6px; width: auto; height: auto; max-height: none; zoom: 1; }
body.phone .toast { position: fixed; top: calc(10px + env(safe-area-inset-top)); max-width: calc(100vw - 24px); white-space: normal; text-align: center; font-size: 15px; }
body.phone .tour { position: fixed; }
body.phone .rotate-hint { display: none !important; }
/* phone held sideways: slimmer bars */
@media (max-height: 500px) {
  body.phone { --navh: 52px; }
  body.phone .goalbox { order: 0; flex: 1 1 auto; }
  body.phone #hud { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; }
  body.phone .pnav i { height: 24px; font-size: 18px; }
}
body.phone .msub { line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
body.phone .mtxt { line-height: 1.35; }
body.phone .mrow > .gbtn { font-size: 13.5px; padding: 4px 12px 6px; margin-top: 4px; }
body.phone .lt-head select.field { width: auto; padding: 6px 10px; font-size: 15px; }
body.phone .lt-head h2, body.phone .nb-head h2 { font-size: 26px; }
body.phone .nb-head .gbtn { font-size: 13.5px; padding: 5px 12px 7px; }
body.phone .worlds-scroll { height: auto; }
body.phone .worlds-canvas { zoom: .95; margin-top: -55px; }
body.phone .vetcard { flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
body.phone .vetcard .big { font-size: 30px; }
body.phone .vetcard > div { flex: 1 1 60%; line-height: 1.4; }
body.phone .vetcard .gbtn { flex: 1 1 100%; justify-content: center; }
body.phone .vetcard .muted { line-height: 1.4; }
body.phone .keys-wrap > * { padding: 14px; }
body.phone .report-wrap .row { flex-wrap: wrap; gap: 8px; }
body.phone .report-wrap .row > h2 { flex: 1 1 100% !important; }
body.phone .report-wrap .row > span, body.phone .report-wrap .row > div { display: flex; flex-wrap: wrap; gap: 6px; }
body.phone .kpi { border-width: 2px; border-radius: 14px; padding: 8px 8px 10px; box-shadow: 0 2px 0 rgba(91,58,41,.15); }
body.phone .kpi b { font-size: 28px; }
body.phone .kpi small { line-height: 1.35; margin-top: 2px; }
body.phone .pill { padding: 5px 12px; font-size: 14px; }
body.phone .report-wrap .row > .pills { flex-wrap: nowrap; width: 100%; gap: 6px; }
body.phone .report-wrap .pills .pill { flex: 1; justify-content: center; text-align: center; padding: 6px 4px; font-size: 13.5px; white-space: nowrap; border-width: 2px; }
body.phone .maphint { display: none; }
body.phone .maplegend { top: auto; bottom: 26px; left: 8px; right: 8px; justify-content: center; }
body.phone .maplegend .gbtn { font-size: 13.5px; padding: 5px 12px 7px; }
body.phone .side { font-size: 14.5px; line-height: 1.45; }
body.phone .side h2 { font-size: 24px; }
body.phone .side > .gbtn { width: 100%; justify-content: center; }
body.phone #mapAdd { display: none; }
body.phone .help-hero { flex-direction: column; gap: 6px; padding: 12px; text-align: center; }
body.phone .help-hero > :first-child { zoom: .7; }
body.phone .help-hero .bubble { position: static; width: 100%; font-size: 15px; line-height: 1.45; }
body.phone .help-hero .bubble::after { display: none; }
body.phone .help-hero .actions { justify-content: center; }
body.phone .day3 { gap: 8px; }
body.phone .day3 > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 10px; text-align: left; padding: 10px 12px; border-width: 2px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
body.phone .day3 .n { grid-row: 1 / 3; font-size: 32px; text-align: center; }
body.phone .day3 b { margin: 0; }
body.phone .help-wrap .step h3 { font-size: 17px; }
body.phone .modal-card .actions:has([data-act]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.phone .modal-card .actions [data-act] { justify-content: center; font-size: 14.5px; padding: 8px 6px 10px; white-space: normal; line-height: 1.1; }
body.phone .modal-card .actions [data-act="replied"] { grid-column: 1 / -1; }
body.phone .modal-card h3 { margin: 14px 0 6px; }
body.phone .modal-card .letter { font-size: 14.5px; }
body.phone .modal-card .snips { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
body.phone .modal-card .snips .pill { flex-shrink: 0; }
/* login / loading card: dog centred, fits small phones */
.login-dog { display: flex; justify-content: center; align-items: center; margin: 0 auto 6px; }
.login-dog > * { margin: 0 auto; }
.login-card { max-width: calc(100vw - 32px); }

/* phone logo: small, left of the counters */
body.phone .logo { display: block; width: auto; zoom: .4; margin: -6px 4px -2px 0; flex-shrink: 0; }
body.phone .logo .l1, body.phone .logo .l2 { font-size: 44px; }
@media (max-width: 370px) { body.phone .logo { zoom: .34; } body.phone .coin { padding: 2px 7px 2px 4px; } body.phone .coin .ci, body.phone .coin b { font-size: 14px; } body.phone .sign .board { font-size: 12.5px; padding: 6px 10px 6px 8px; } }
/* speech-bubble tails sit behind the bubble's content (no white square over buttons) */
.scout-bubble, .mascot-area .tip { z-index: 4; }
.scout-bubble::after, .mascot-area .tip::after { z-index: -1; }
.scout-bubble { padding-bottom: 10px; }
/* phones: content may run under the notch / home bar, so pad popups too */
body.phone .modal { padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
body.phone .modal-card, body.phone .modal-card.small-pop { max-height: calc((100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / var(--tz)); }
body.phone .compose { top: calc(6px + env(safe-area-inset-top)); bottom: calc(6px + env(safe-area-inset-bottom)); }
body.phone .sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.login { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* ================= 📬 UNIFIED INBOX (Gmail-style) ================= */
#inbox .gm { position: absolute; inset: 12px 20px; display: grid; grid-template-columns: 200px 390px 1fr; gap: 12px; font-size: 14px; }
.gm > section, .gm > aside { background: var(--paper); border: 3px solid var(--choc); border-radius: 18px; box-shadow: 0 3px 0 rgba(91,58,41,.2); overflow: hidden; min-height: 0; }
.gm-side { padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto !important; }
.gm-folders { display: flex; flex-direction: column; gap: 2px; }
.gm-f { display: flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 0 999px 999px 0; padding: 6px 10px; font: 600 14px 'Baloo 2'; color: var(--ink); text-align: left; }
.gm-f i { font-style: normal; width: 22px; text-align: center; }
.gm-f span { flex: 1; }
.gm-f em { font-style: normal; font-size: 12px; color: var(--choc2); }
.gm-f.has-unread span, .gm-f.has-unread em { font-weight: 800; color: var(--pinkdeep); }
.gm-f:hover { background: #fdeee6; }
.gm-f.on { background: #ffd1e2; font-weight: 800; }
.gm-acc { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--choc2); padding: 0 4px; }
.gm-acc .field { font-size: 13px; padding: 6px 8px; }
.gm-list { display: flex; flex-direction: column; }
.gm-search { display: flex; gap: 6px; padding: 8px; border-bottom: 2px solid #f0dfd2; }
.gm-search .field { flex: 1; padding: 7px 12px; border-radius: 999px; font-size: 14px; }
.gm-rows { flex: 1; overflow-y: auto; }
.gm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-bottom: 1px solid #f0dfd2; cursor: pointer; background: #fffdf9; }
.gm-row:hover { background: #fff3ea; }
.gm-row.on { background: #ffe6ef; }
.gm-row.unread { background: #fff; }
.gm-row.unread .gm-who, .gm-row.unread .gm-sub b, .gm-row.unread time { font-weight: 800; color: var(--ink); }
.gm-row:not(.unread) .gm-who { font-weight: 600; }
.gm-top { display: flex; align-items: baseline; gap: 6px; }
.gm-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.gm-n { font-size: 11.5px; color: var(--choc2); }
.gm-top time { margin-left: auto; font-size: 12px; color: var(--choc2); white-space: nowrap; }
.gm-sub { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gm-sub b { font-weight: 600; }
.gm-av { width: 36px; height: 36px; border-radius: 50%; background: #fff1e6; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.gm-av .me { font-size: 18px; }
.lab { display: inline-block; font-size: 11px; font-weight: 800; padding: 0 7px; border-radius: 6px; line-height: 17px; vertical-align: 1px; white-space: nowrap; background: #eee4dc; color: #6d5646; }
.lab-interested { background: #ffd9e7; color: #b02a60; }
.lab-replied { background: #dff0ff; color: #1f6fa3; }
.lab-ooo { background: #fff0c2; color: #8a5a00; }
.lab-not_interested { background: #ece6f5; color: #5e4a80; }
.lab-unsubscribe { background: #eee; color: #666; }
.lab-bounce { background: #ffe1d6; color: #a63c12; }
.lab-sent { background: #e2f7ee; color: #1f7d61; }
.gm-read { overflow-y: auto !important; padding: 12px 18px 18px; }
.gm-rtop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gm-back { display: none; }
.gm-acts { margin-left: auto; display: flex; gap: 4px; }
.gm-act { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; font-size: 18px; }
.gm-act:hover { background: #fdeee6; }
.gm-subj { font: 700 21px/1.25 'Baloo 2'; margin: 2px 0 4px; color: var(--ink); }
.gm-labels { margin-bottom: 10px; font-size: 13px; }
.gm-more { width: 100%; border: 0; border-top: 1px solid #f0dfd2; border-bottom: 1px solid #f0dfd2; background: #fbf4ee; padding: 6px; font: 700 13px 'Baloo 2'; color: var(--choc2); margin-bottom: 6px; }
.gm-msg { border-bottom: 1px solid #f0dfd2; padding: 10px 0; }
.gm-mhead { display: flex; gap: 10px; align-items: flex-start; }
.gm-mwho { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.gm-mwho .muted { font-size: 12.5px; }
.gm-to { font-size: 12.5px; }
.gm-mhead time { font-size: 12px; color: var(--choc2); white-space: nowrap; }
.gm-body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; margin: 8px 0 0 46px; overflow-wrap: anywhere; }
.gm-snip { display: none; margin: 2px 0 0 46px; font-size: 13px; }
.gm-msg.folded { cursor: pointer; }
.gm-msg.folded .gm-body { display: none; }
.gm-msg.folded .gm-snip { display: block; }
.gm-msg.in .gm-body { background: #fff7fb; border-radius: 12px; padding: 8px 12px; }
.gm-reply { margin-top: 12px; }
.gm-rbox { border: 2px solid #ecd5c3; border-radius: 16px; padding: 10px 12px; background: #fff; box-shadow: 0 4px 14px rgba(91,58,41,.12); }
.gm-rbox textarea { width: 100%; margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
.gm-rbox .snips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gm-empty { text-align: center; color: var(--choc2); padding: 40px 16px; font-weight: 700; line-height: 1.5; }
.gm-read > .gm-empty { margin-top: 80px; }
body.dark .gm-row, body.dark .gm-row.unread { background: var(--paper); }
body.dark .gm-row:hover, body.dark .gm-f:hover { background: #3a2f55; }
body.dark .gm-row.on, body.dark .gm-f.on { background: #5a3e7a; }
body.dark .gm-rbox { background: #2d2443; border-color: #4d3f6b; }
body.dark .gm-msg.in .gm-body { background: #3a2f55; }
body.dark .gm-av { background: #3a2f55; }
body.dark .gm-row, body.dark .gm-msg, body.dark .gm-search { border-color: #3d3257; }

/* 📱 phone: folders become swipeable chips, list first, tap opens the conversation full screen */
body.phone #inbox { padding: 0; }
body.phone #inbox .gm { position: static; display: block; }
body.phone .gm > section, body.phone .gm > aside { border: 0; border-radius: 0; box-shadow: none; background: none; }
body.phone .gm-side { padding: 10px 0 0; gap: 8px; overflow: visible !important; }
body.phone .gm-folders { flex-direction: row; overflow-x: auto; gap: 6px; padding: 0 var(--gut) 2px; scrollbar-width: none; }
body.phone .gm-folders::-webkit-scrollbar { display: none; }
body.phone .gm-f { flex-shrink: 0; border: 2px solid var(--choc); border-radius: 999px; padding: 5px 12px; background: var(--paper); font-size: 13.5px; }
body.phone .gm-f span { flex: none; }
body.phone .gm-f.on { background: var(--pink2); color: #fff; border-color: var(--pinkdeep); }
body.phone .gm-f.on span, body.phone .gm-f.on em { color: #fff; }
body.phone .gm-acc { flex-direction: row; align-items: center; padding: 0 var(--gut); }
body.phone .gm-acc span { white-space: nowrap; }
body.phone .gm-acc .field { flex: 1; font-size: 15px; }
body.phone .gm-search { padding: 8px var(--gut); border: 0; }
body.phone .gm-search .field { font-size: 16px; }
body.phone .gm-rows { overflow: visible; background: var(--paper); border-top: 2px solid #f0dfd2; }
body.phone .gm-row { padding: 11px var(--gut); }
body.phone .gm-read { display: none; }
body.phone .gm.reading .gm-side, body.phone .gm.reading .gm-list { display: none; }
body.phone .gm.reading .gm-read { display: block; padding: 10px var(--gut) 20px; background: var(--paper); min-height: 100%; }
body.phone .gm-back { display: inline-flex; }
body.phone .gm-acts { gap: 0; }
body.phone .gm-act { width: 34px; height: 34px; font-size: 17px; }
body.phone .gm-subj { font-size: 19px; }
body.phone .gm-body, body.phone .gm-snip { margin-left: 0; }
body.phone .gm-rbox textarea { font-size: 16px; }

.tab { width: 112px; }
.gm-rbox .snips .pill { font-size: 13px; padding: 3px 10px; border-width: 2px; }
body.phone .gm-rbox .snips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 6px -12px 0; padding: 0 12px 2px; }
body.phone .gm-rbox .snips .pill { flex-shrink: 0; }
#gmRefresh { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 18px; border-radius: 50%; }
.safebox { background: #eafff6; border: 2px solid var(--mintdeep); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; margin: 4px 0 8px; }
.safebox ul { margin: 6px 0 4px; padding-left: 4px; list-style: none; }
.safebox li { margin: 2px 0; }
body.dark .safebox { background: #24413a; }
.need { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 2px solid #ecd5c3; border-radius: 14px; padding: 10px 12px; margin: 8px 0; text-align: left; line-height: 1.4; }
.need > span { font-size: 26px; }
.guide { column-span: all; background: #eafff6; border: 3px solid var(--mintdeep); border-radius: 18px; padding: 10px 18px 14px; margin-bottom: 14px; }
.guide h3 { margin: 4px 0 6px; }
.guide ol { margin: 0 0 6px; padding-left: 20px; line-height: 1.5; }
.guide li { margin: 3px 0; }
.gm-start { line-height: 1.5; }
body.dark .need { background: #3a2f55; border-color: #4d3f6b; }
body.dark .guide { background: #24413a; }
.shield { background: #eef6ff; border-color: #1f6fa3; }
.shield-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; text-align: center; }
.shield-nums div { background: #fff; border-radius: 10px; padding: 4px 2px; }
.shield-nums b { display: block; font: 400 22px 'Chewy'; color: #1f6fa3; }
.shield-nums span { font-size: 11px; line-height: 1.2; display: block; color: var(--choc2); }
body.dark .shield { background: #243552; }
body.dark .shield-nums div { background: #2d2443; }
body.phone .shield-nums { grid-template-columns: repeat(2, 1fr); }

/* ================= 🚨 ALERT BAR ================= */
.alertbar { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 10px; max-width: 760px; width: calc(100% - 40px);
  background: #fff0f3; border: 3px solid #c9336d; border-radius: 16px; padding: 6px 8px 6px 12px; box-shadow: 0 6px 18px rgba(201, 51, 109, .25); animation: pop-in .3s; }
.alertbar.info { background: #eef6ff; border-color: #1f6fa3; box-shadow: 0 4px 12px rgba(31, 111, 163, .18); }
.alertbar .ab-ico { font-size: 24px; }
.alertbar .ab-txt { flex: 1; font-size: 15px; line-height: 1.25; color: var(--ink); }
.alertbar.alert .ab-txt b { color: #b02a60; }
.ab-more { font-size: 12px; color: var(--choc2); }
.alertcard { border: 3px solid #c9336d; background: #fff7f9; border-radius: 16px; padding: 10px 14px; margin: 10px 0; }
.alertcard.info { border-color: #1f6fa3; background: #f3f9ff; }
.alertcard p { margin: 4px 0 6px; line-height: 1.45; }
.alertcard ol { margin: 4px 0 8px; padding-left: 20px; line-height: 1.5; }
.copybox { background: #fff; border: 2px dashed #c9b3a3; border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.45; user-select: all; }
body.dark .alertbar { background: #4a2438; } body.dark .alertbar.info { background: #243552; }
body.dark .alertcard { background: #3a2433; } body.dark .alertcard.info { background: #243552; } body.dark .copybox { background: #2d2443; }
body.phone .alertbar { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: none; margin: 8px var(--gut) 0; flex-shrink: 0; }
body.phone .alertbar .ab-txt { font-size: 14px; }

/* ================= 📮 EMAIL ACCOUNTS ================= */
.acc-wrap { position: absolute; inset: 12px 20px; padding: 14px 18px; font-size: 14px; }
.acc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.acc-head h2 { margin: 0; }
.acc-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.acc-kpis > div { background: #fff; border: 2px solid #ecd5c3; border-radius: 14px; padding: 6px 10px; text-align: center; }
.acc-kpis b { display: block; font: 400 26px 'Chewy'; color: var(--pinkdeep); }
.acc-kpis b small { font-size: 16px; color: var(--choc2); }
.acc-kpis span { font-size: 12px; color: var(--choc2); font-weight: 700; }
.acc-kpis .bad { border-color: #c9336d; background: #fff0f3; }
.acc-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.acc-tools .field { max-width: 260px; }
.acc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff4d6; border: 2px solid #e0b04a; border-radius: 14px; padding: 6px 10px; margin-bottom: 8px; }
.acc-table { border: 2px solid #ecd5c3; border-radius: 14px; overflow: hidden; background: #fff; }
.acc-row { display: grid; grid-template-columns: 34px minmax(0, 2.2fr) 1.2fr 1.2fr 1.2fr .8fr .8fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #f0dfd2; }
.acc-row:last-child { border-bottom: 0; }
.acc-row.head { background: #fbf4ee; font-size: 12px; font-weight: 800; color: var(--choc2); text-transform: uppercase; letter-spacing: .03em; }
.acc-row.problem { background: #fff5f7; }
.acc-who { display: flex; flex-direction: column; min-width: 0; }
.acc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-who small, .acc-st small { color: var(--choc2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.acc-today { display: flex; flex-direction: column; gap: 3px; }
.bar { display: block; height: 7px; border-radius: 9px; background: #f1e4da; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8fe3c8, #3fbf98); border-radius: 9px; }
.acc-row .bad { color: #c9336d; font-weight: 800; }
.acc-acts { display: flex; gap: 4px; }
.acc-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eef6ff; border: 2px solid #1f6fa3; border-radius: 14px; padding: 8px 12px; margin: 6px 0 10px; }
.acc-mini .gbtn { margin-left: auto; }
.bk-prog { margin: 8px 0 6px; } .bk-prog .bar { margin-top: 4px; height: 9px; }
.bk-list { max-height: 220px; overflow-y: auto; font-size: 13.5px; line-height: 1.45; }
.bk-list .no span { color: #b02a60; }
.gm-compose-btn { border: 0; border-radius: 16px; background: linear-gradient(#ffd1e2, #ff8fb7); color: #fff; text-shadow: 0 1px 0 var(--pinkdeep); font: 800 16px 'Baloo 2'; padding: 12px 18px; box-shadow: 0 3px 0 var(--pinkdeep); text-align: left; }
.gm-compose { right: 30px; bottom: 96px; width: 560px; height: 520px; }
.gm-compose select.cin { flex: 1; border: 0; background: none; font: 600 14px 'Baloo 2'; color: var(--ink); }
.cm-snips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 12px; }
.cm-snips .pill { font-size: 12.5px; padding: 2px 9px; border-width: 2px; }
body.dark .acc-kpis > div, body.dark .acc-table { background: #2d2443; border-color: #4d3f6b; }
body.dark .acc-row.head { background: #3a2f55; } body.dark .acc-row { border-color: #3d3257; } body.dark .acc-row.problem { background: #3a2433; }
body.dark .acc-bulkbar { background: #4a3d24; } body.dark .acc-mini { background: #243552; }
/* phone: accounts become cards */
body.phone .acc-wrap { position: relative; inset: auto; padding: 14px; }
body.phone .acc-kpis { grid-template-columns: repeat(2, 1fr); }
body.phone .acc-tools .field { max-width: none; flex: 1 1 100%; font-size: 16px; }
body.phone .acc-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.phone .acc-filters .pill { flex-shrink: 0; }
body.phone .acc-row.head { display: none; }
body.phone .acc-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "c who acts" "c st st" "c today today" "c warm rates"; row-gap: 4px; padding: 12px 10px; }
body.phone .acc-row > :nth-child(1) { grid-area: c; align-self: start; }
body.phone .acc-row > :nth-child(2) { grid-area: who; }
body.phone .acc-row > :nth-child(3) { grid-area: st; }
body.phone .acc-row > :nth-child(4) { grid-area: today; }
body.phone .acc-row > :nth-child(5) { grid-area: warm; font-size: 13px; }
body.phone .acc-row > :nth-child(6) { grid-area: rates; justify-self: end; font-size: 13px; }
body.phone .acc-row > :nth-child(6)::before { content: 'bounces '; color: var(--choc2); }
body.phone .acc-row > :nth-child(7) { display: none; }
body.phone .acc-row > :nth-child(8) { grid-area: acts; }
body.phone .gm-compose-btn { margin: 0 var(--gut); text-align: center; }
body.phone .gm-compose { width: auto; height: auto; }
body.has-alert:not(.phone) #screens { top: 158px; }
body.has-alert:not(.phone) .alertbar { top: 98px; }
/* parlour on a computer: the alert sits over the decorative wall sign instead of pushing the room down */
body.has-alert.on-parlour:not(.phone) #screens { top: 92px; }
body.has-alert.on-parlour:not(.phone) .alertbar { left: auto; right: 16px; transform: none; width: 420px; top: 112px; }
body.phone .cm-snips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
body.phone .cm-snips .pill { flex-shrink: 0; }
/* More sheet: 8 tiles fit neatly in 4 columns on wider phones, 3 on small ones */
.sheet-grid { grid-template-columns: repeat(4, 1fr); }
.stile { padding: 10px 4px 8px; }
.stile b { font-size: 13.5px; line-height: 1.15; }
.stile small { font-size: 10.5px; line-height: 1.2; }
@media (max-width: 360px) { .sheet-grid { grid-template-columns: repeat(3, 1fr); } }