/* -- JVDS Site Nav -- */

:root{
  --bg:#1a1a2e;--panel:#16213e;--panel2:#0f3460;--panel3:#1a2744;
  --accent:#e94560;--accent2:#f5a623;--accent3:#00d4aa;--accent-dk:#1a1030;
  --text:#f0f0f0;--muted:#8892a4;--border:rgba(255,255,255,.08);
  --grid:32px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);}

/* -- MAIN LAYOUT -- */
#app{display:grid;grid-template-columns:220px 1fr 240px;height:calc(100vh - 68px - 32px);height:calc(100dvh - 68px - 32px);}

/* -- LEFT PANEL -- */
#left-panel{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.panel-section{padding:12px;}
.panel-title{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}

/* TOOLS */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.tool-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,.04);cursor:pointer;transition:all .15s;font-size:.65rem;font-weight:700;color:var(--muted);letter-spacing:.03em;}
.tool-btn:hover{background:rgba(255,255,255,.08);color:var(--text);}
.tool-btn.active{background:rgba(233,69,96,.12);border-color:var(--accent);color:var(--accent);}
.tool-btn .ico{font-size:1.4rem;}

/* COLOURS */
.colour-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px;}
.colour-swatch{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;}
.colour-swatch:hover{transform:scale(1.1);}
.colour-swatch.selected{border-color:white;transform:scale(1.1);}
.custom-colour{display:flex;align-items:center;gap:6px;margin-top:4px;}
.custom-colour input[type=color]{width:36px;height:28px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0;}
.custom-colour span{font-size:.72rem;color:var(--muted);}


/* TEMPLATE GRID */
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:4px;}
.tmpl-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px;border-radius:10px;border:2px solid rgba(0,212,170,.2);background:rgba(0,212,170,.07);cursor:pointer;font-size:1.15rem;transition:all .15s;color:var(--text);width:100%;}
.tmpl-btn span{font-size:.52rem;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;line-height:1.2;}
.tmpl-btn:hover{background:rgba(0,212,170,.18);border-color:var(--accent3);transform:translateY(-1px);}
.tmpl-btn:active{transform:scale(.96);}
/* SHAPES */
.shape-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.shape-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;font-size:.58rem;font-weight:700;color:var(--muted);transition:all .15s;}
.shape-btn:hover{background:rgba(255,255,255,.07);color:var(--text);}
.shape-btn.selected{border-color:var(--accent3);color:var(--accent3);background:rgba(0,212,170,.08);}
.shape-btn .sico{font-size:1.2rem;}

/* DIVIDER */
.divider{height:1px;background:var(--border);margin:4px 12px;}

/* -- VIEWPORT -- */
#viewport{position:relative;overflow:hidden;background:#1a1a2e;}
#viewport canvas{display:block;}
.buildlab-status{position:absolute;top:14px;left:14px;z-index:8;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100% - 28px));padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(12,14,30,.78);box-shadow:0 12px 34px rgba(0,0,0,.32);backdrop-filter:blur(12px);font-size:.76rem;line-height:1.2;color:rgba(255,255,255,.76);pointer-events:none;}
.buildlab-status strong{font-family:'Fredoka',cursive;font-size:.94rem;color:#fff;}
.buildlab-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.engine-error-panel{position:absolute;top:50%;left:50%;z-index:9;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));padding:24px;border:1px solid rgba(233,69,96,.45);border-radius:20px;background:linear-gradient(145deg,rgba(22,33,62,.96),rgba(15,18,38,.96));box-shadow:0 28px 80px rgba(0,0,0,.46);text-align:center;}
.engine-error-panel strong{display:block;margin-bottom:8px;font-family:'Fredoka',cursive;font-size:1.45rem;color:var(--accent2);}
.engine-error-panel span{display:block;margin-bottom:18px;color:rgba(255,255,255,.76);line-height:1.45;}
.engine-error-panel button{border:0;border-radius:999px;background:var(--accent);color:#fff;font-family:'Fredoka',cursive;font-weight:700;padding:10px 18px;cursor:pointer;box-shadow:0 4px 0 #9b1a30;}
.engine-error .crosshair{display:none;}
.vp-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:.68rem;color:rgba(255,255,255,.25);letter-spacing:.05em;pointer-events:none;white-space:normal;max-width:min(90vw, 640px);text-align:center;line-height:1.3;}
.vp-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(15,15,30,.95);border:1px solid var(--accent);border-radius:8px;padding:7px 18px;font-size:.8rem;font-weight:700;color:var(--accent2);pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap;}
.vp-toast.show{opacity:1;}
.crosshair{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);pointer-events:none;opacity:.4;}
.crosshair::before,.crosshair::after{content:'';position:absolute;background:white;}
.crosshair::before{width:1px;height:100%;left:50%;transform:translateX(-50%);}
.crosshair::after{height:1px;width:100%;top:50%;transform:translateY(-50%);}

/* -- RIGHT PANEL -- */
#right-panel{background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;}

/* BLOCK PROPERTIES */
.prop-row{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.prop-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.prop-input{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--text);font-size:.8rem;font-family:'Inter',sans-serif;width:100%;}
.prop-input:focus{outline:none;border-color:var(--accent3);}
.prop-slider{width:100%;accent-color:var(--accent);}
.prop-val{font-size:.72rem;color:var(--accent2);font-weight:700;text-align:right;}

/* ACTION BUTTONS */
.action-btn{width:100%;padding:9px 12px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.9rem;font-weight:600;letter-spacing:.02em;transition:all .15s;margin-bottom:6px;}
.gizmo-btn.active{background:var(--accent) !important;color:white !important;border-color:var(--accent) !important;}
.gizmo-btn:hover{opacity:0.8;}
.btn-primary{background:var(--accent);color:white;box-shadow:0 3px 0 #9b1a30;}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-secondary{background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:rgba(255,255,255,.12);}
.btn-success{background:var(--accent3);color:#0f3460;box-shadow:0 3px 0 #008866;}
.btn-success:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-warn{background:var(--accent2);color:#1a1a2e;box-shadow:0 3px 0 #c07a00;}
.btn-warn:hover{filter:brightness(1.1);transform:translateY(-1px);}

/* SAVE SLOTS */
.save-slots{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;}
.save-slot{padding:8px 6px;border-radius:8px;border:1px dashed var(--border);background:rgba(255,255,255,.02);cursor:pointer;font-size:.65rem;color:var(--muted);text-align:center;transition:all .15s;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.save-slot:hover{border-color:var(--accent3);color:var(--accent3);}
.save-slot.filled{border-style:solid;border-color:rgba(0,212,170,.3);color:var(--text);background:rgba(0,212,170,.05);}
.save-slot .slot-name{font-weight:700;font-size:.7rem;}
.save-slot .slot-count{font-size:.6rem;color:var(--muted);}

/* STATS */
.stats-row{display:flex;justify-content:space-between;margin-bottom:6px;}
.stat-item{text-align:center;}
.stat-val{font-family:'Fredoka',cursive;font-size:1.3rem;font-weight:700;color:var(--accent2);}
.stat-lab{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

/* COLLAPSIBLE SECTIONS */
.panel-section details{margin-bottom:0;}
.panel-section details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;}
.panel-section details summary::-webkit-details-marker{display:none;}
.panel-section details summary::after{content:'\u25BC';font-size:.5rem;color:var(--muted);transition:transform .2s;}
.panel-section details[open] summary::after{transform:rotate(180deg);}
.panel-section details .detail-body{padding-top:8px;}

/* -- MODAL -- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;min-width:300px;max-width:380px;width:90%;}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1.3rem;color:var(--accent2);margin-bottom:16px;}
.modal-input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:9px;padding:10px 14px;color:var(--text);font-size:.95rem;font-family:'Inter',sans-serif;margin-bottom:12px;}
.modal-input:focus{outline:none;border-color:var(--accent3);}
.modal-btns{display:flex;gap:8px;}
.modal-btns button{flex:1;padding:10px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.95rem;font-weight:600;}
.modal-ok{background:var(--accent);color:white;}
.modal-cancel{background:rgba(255,255,255,.08);color:var(--text);}

/* -- RESPONSIVE -- */
/* Touch laptops with large screens keep panels; only collapse on narrow or true touch+small */
@media(pointer: coarse) and (max-width: 900px){
  .site-footer,.jvds-tools-footer{display:none;}

  /* Full viewport, panels hidden by default */
  html,body{overflow:hidden;}
  #app{
    display:flex;flex-direction:column;
    height:calc(100vh - 68px);
    height:calc(100dvh - 68px);
    position:relative;
  }
  #left-panel,#right-panel{display:none !important;}
  #viewport{flex:1;position:relative;}

  /* -- MOBILE TOOLBAR (tab bar at bottom) -- */
  .mob-toolbar{
    position:fixed;bottom:0;left:0;right:0;
    height:58px;
    background:rgba(15,15,30,.98);
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;
    z-index:400;
    box-shadow:0 -4px 20px rgba(0,0,0,.5);
  }
  .mob-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:2px;
    padding:6px 2px;
    font-size:.5rem;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
    color:rgba(255,255,255,.45);
    cursor:pointer;border:none;background:none;
    transition:color .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-tab .mt-ico{font-size:1.3rem;line-height:1;}
  .mob-tab.active{color:var(--accent2);}
  .mob-tab.active .mt-ico{transform:scale(1.1);}

  /* -- BOTTOM DRAWER PANEL -- */
  .mob-drawer{
    position:fixed;bottom:58px;left:0;right:0;
    background:rgba(22,22,46,.98);
    backdrop-filter:blur(16px);
    border-top:2px solid var(--accent);
    border-radius:16px 16px 0 0;
    z-index:390;
    max-height:72vh;
    min-height:28vh;
    overflow-y:auto;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    padding:16px 16px 20px;
    -webkit-overflow-scrolling:touch;
    resize:vertical;
  }
  .mob-drawer::before{
    content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);
  }
  .mob-drawer.open{transform:translateY(0);}

  .mob-drawer-title{
    font-size:.62rem;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);
    margin-bottom:12px;display:flex;
    align-items:center;justify-content:space-between;
  }
  .mob-drawer-close{
    background:rgba(255,255,255,.08);border:none;
    color:var(--muted);font-size:.9rem;
    padding:3px 9px;border-radius:6px;cursor:pointer;
  }

  /* Tools in drawer: bigger touch targets */
  .mob-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
  .mob-tool-btn{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:14px 8px;border-radius:12px;
    border:2px solid transparent;
    background:rgba(255,255,255,.05);cursor:pointer;
    font-size:.68rem;font-weight:700;color:var(--muted);
    -webkit-tap-highlight-color:transparent;
    transition:all .15s;
  }
  .mob-tool-btn .ico{font-size:1.8rem;}
  .mob-tool-btn.active{background:rgba(233,69,96,.15);border-color:var(--accent);color:var(--accent);}

  /* Colours in drawer */
  .mob-colour-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:10px;}
  .mob-colour-swatch{
    aspect-ratio:1;border-radius:8px;cursor:pointer;
    border:3px solid transparent;
    transition:transform .1s,border-color .1s;
  }
  .mob-colour-swatch.selected{border-color:white;transform:scale(1.1);}
  .mob-custom-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
  .mob-custom-row input[type=color]{width:44px;height:36px;border:none;border-radius:8px;cursor:pointer;background:none;padding:0;}
  .mob-custom-row span{font-size:.78rem;color:var(--muted);}

  /* Shapes in drawer */
  .mob-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .mob-shape-btn{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:12px 6px;border-radius:12px;
    border:2px solid var(--border);
    background:rgba(255,255,255,.04);cursor:pointer;
    font-size:.68rem;font-weight:700;color:var(--muted);
    -webkit-tap-highlight-color:transparent;
    transition:all .15s;
  }
  .mob-shape-btn .sico{font-size:1.6rem;}
  .mob-shape-btn.selected{border-color:var(--accent3);color:var(--accent3);background:rgba(0,212,170,.1);}

  /* Properties in drawer */
  .mob-prop-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
  .mob-prop-label{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
  .mob-prop-slider{width:100%;height:28px;accent-color:var(--accent);cursor:pointer;}
  .mob-prop-val{font-size:.8rem;color:var(--accent2);font-weight:700;text-align:right;}
  .mob-prop-ud{display:flex;gap:8px;align-items:center;margin-top:4px;}
  .mob-prop-ud button{flex:1;padding:12px 8px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.07);color:var(--text);font-size:.9rem;cursor:pointer;}

  /* Actions in drawer */
  .mob-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
  .mob-action-btn{
    padding:14px 10px;border-radius:12px;border:none;
    cursor:pointer;font-family:'Fredoka',cursive;
    font-size:.9rem;font-weight:600;
    -webkit-tap-highlight-color:transparent;
    transition:all .15s;text-align:center;
  }
  .mob-action-btn:active{transform:scale(.97);}
  .mob-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

  /* Touch hint */
  .vp-hint{font-size:.58rem !important;bottom:68px !important;}

  /* Give viewport breathing room above toolbar */
  #viewport{padding-bottom:0;}
}
/* Force mobile layout on narrow screens regardless of pointer */
@media(max-width: 600px){
  .site-header .header-inner{max-width:100%;padding-inline:10px;gap:6px;}
  .site-header .logo-link{gap:6px;font-size:1rem;min-width:0;}
  .site-header .logo-name{display:none;}
  .site-header .theme-toggle,.site-header .nav-toggle{padding-inline:8px;}
  #app{
    display:flex;flex-direction:column;
    height:calc(100vh - 68px);
    height:calc(100dvh - 68px);
    position:relative;
  }
  #left-panel,#right-panel{display:none !important;}
  #viewport{flex:1;position:relative;}
  .mob-toolbar{display:flex !important;}
  .mob-drawer{display:block !important;}
}
@media(pointer: fine){
  .mob-toolbar,.mob-drawer{display:none !important;}
}
/* Touch target safety */
@media(pointer:coarse){
  .tb,.bb-tb,.tool-btn,.shape-btn,.char-btn,.tb-btn,.sw,.bb-sw,.colour-swatch,.seq-cell,.loop-dot,.pad,.kit-btn,button {
    min-height:32px;
  }
  .seq-cell{ height:36px !important; min-height:36px !important; }
  .z-btn,.lb{ min-width:32px; min-height:32px; }
  .buildlab-status{top:10px;left:10px;right:10px;max-width:none;border-radius:16px;font-size:.68rem;}
  .buildlab-status strong{font-size:.84rem;}
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap;}

/* ===== KID MODE ===== */
.kid-mode-toggle{font-size:.6rem;padding:3px 8px;border-radius:20px;border:1px solid rgba(0,212,170,.3);
  background:rgba(0,212,170,.1);color:var(--accent3);cursor:pointer;font-family:'Fredoka',sans-serif;
  font-weight:700;white-space:nowrap;transition:all .2s;}
.kid-mode-toggle:hover{background:rgba(0,212,170,.25);border-color:var(--accent3);}

/* Hide advanced sections in kid mode */
body.kid-mode #propPanel .prop-row:has(#propMetallic),
body.kid-mode #propPanel .prop-row:has(#propRoughness),
body.kid-mode #propPanel .prop-row:has(#propOpacity){display:none!important;}
body.kid-mode .panel-section:has(details summary:contains("Asset Library")),
body.kid-mode .panel-section:has(details summary:contains("Groups")),
body.kid-mode .panel-section:has(details summary:contains("Mirror")),
body.kid-mode .panel-section:has(details summary:contains("Lighting")){opacity:.4;pointer-events:none;}
/* Simpler: tag with data attrs */
body.kid-mode [data-pro-only]{display:none!important;}

/* ===== CHALLENGE BUTTON ===== */
.challenge-btn{font-size:.6rem;padding:4px 10px;border-radius:20px;border:1px solid rgba(245,166,35,.35);
  background:rgba(245,166,35,.12);color:var(--accent2);cursor:pointer;font-family:'Fredoka',sans-serif;
  font-weight:700;white-space:nowrap;transition:all .2s;}
.challenge-btn:hover{background:rgba(245,166,35,.25);border-color:var(--accent2);}

/* ===== CONFETTI ANIMATION ===== */
@keyframes confettiFall{
  0%{opacity:1;transform:translateY(0) rotate(0deg);}
  100%{opacity:0;transform:translateY(300px) rotate(720deg);}
}

/* ===== COLOUR SWATCH TOOLTIP ===== */
.colour-swatch{position:relative;}

/* ===== VIEWPORT CORNER BUTTONS ===== */
.vp-corner-btns{position:absolute;bottom:14px;right:14px;z-index:8;display:flex;gap:6px;}
.vp-icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(12,14,30,.72);color:rgba(255,255,255,.85);cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);
  transition:all .15s;}
.vp-icon-btn:hover{background:rgba(0,212,170,.25);border-color:var(--accent3);transform:scale(1.1);}
.vp-icon-btn:active{transform:scale(.95);}

/* ===== SURPRISE ME BUTTON ===== */
.surprise-btn{width:100%;margin-top:6px;padding:5px 10px;border-radius:8px;
  border:1px solid rgba(155,89,182,.3);background:rgba(155,89,182,.1);
  color:#c39bd3;cursor:pointer;font-size:.72rem;font-family:'Fredoka',sans-serif;
  font-weight:700;transition:all .15s;letter-spacing:.02em;}
.surprise-btn:hover{background:rgba(155,89,182,.25);border-color:#9b59b6;transform:translateY(-1px);}
.surprise-btn:active{transform:scale(.97);}

/* ===== MILESTONE PROGRESS BAR ===== */
.milestone-bar-wrap{margin-top:8px;}
.milestone-bar-track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:4px;}
.milestone-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent3),#00ff99);
  transition:width .4s cubic-bezier(.34,1.56,.64,1);}
.milestone-bar-label{font-size:.58rem;color:var(--muted);text-align:right;letter-spacing:.02em;}

/* ===== MOBILE CHROME FIXES ===== */
/* The global helper widgets (keepsake strip z8999, feedback z9000/9001, share
   z9000/9002) sit above the mobile drawer (390) and modals (500), so they cover
   the real controls on a phone. Hide them while the drawer or a modal is open. */
body.bl-drawer-open #jvds-keepsake-strip,
body.bl-drawer-open #jvfb-btn,body.bl-drawer-open #jvfb-panel,
body.bl-drawer-open #jvds-share-btn,body.bl-drawer-open .jvds-share-toast,
body.bl-drawer-open .mascot-companion,body.bl-drawer-open .mascot-companion-bubble,
body.bl-modal-open #jvds-keepsake-strip,
body.bl-modal-open #jvfb-btn,body.bl-modal-open #jvfb-panel,
body.bl-modal-open #jvds-share-btn,body.bl-modal-open .jvds-share-toast,
body.bl-modal-open .mascot-companion,body.bl-modal-open .mascot-companion-bubble{display:none !important;}

/* The Ember companion bubble is fixed at bottom:14px, which lands on the mobile
   toolbar (58px tall). Lift it clear of the toolbar wherever the toolbar shows. */
@media (max-width:900px) and (pointer:coarse), (max-width:600px){
  body:has(#mobToolbar) .mascot-companion{bottom:70px !important;}
  body:has(#mobToolbar) .mascot-companion-bubble{bottom:78px !important;}
}

/* Bigger tap target for the drawer Done button (was 32px tall). */
.mob-drawer-close{min-height:40px;padding:8px 14px;}

@media(max-width:700px){
  /* Keep the global cookie banner compact on phones and stop it burying the
     fixed mobile toolbar (banner z9999 vs toolbar z400). */
  #cookie-banner{padding:9px 14px !important;}
  #cookie-banner p{font-size:.78rem !important;}
  #cookie-banner button{padding:7px 14px !important;font-size:.8rem !important;}
  body:has(#cookie-banner) .mob-toolbar,
  body:has(#cookie-banner) .mob-drawer{display:none !important;}
}