/* ============================================================
     SEAL TEAM FISH — styles
     ============================================================ */
  /* Fredoka — bundled rounded display font (OFL) for the title/CTA; offline-safe for the iOS build */
  @font-face { font-family:'Fredoka'; font-style:normal; font-weight:600; font-display:swap;
    src:url('../assets/fonts/fredoka-600.woff2') format('woff2'); }
  * { margin:0; padding:0; box-sizing:border-box; }
  /* Reduced motion: flatten looping/decorative CSS animations (deployPulse, chipBob, napBob, sealBounce,
     tapPulse, capPop, starPop, …). Toggled by the Settings switch via body.reduced-motion (js/data.js),
     which already defaults to the OS prefers-reduced-motion setting and stays user-overridable. */
  body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
  }
  html, body { width:100%; height:100%; overflow:hidden; background:#9fd8ef;
    font-family:"Trebuchet MS","Comic Sans MS",system-ui,sans-serif;
    -webkit-user-select:none; user-select:none; touch-action:none;
    overscroll-behavior:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
  #game { position:fixed; inset:0; width:100%; height:100%; touch-action:none; }

  /* rotate-to-landscape prompt (touch devices held in portrait) */
  #rotateOverlay { display:none; }
  @media (orientation:portrait) and (pointer:coarse) {
    #rotateOverlay { display:flex; position:fixed; inset:0; z-index:9999;
      align-items:center; justify-content:center; text-align:center;
      background:#0c2c40; color:#eaf5ff; font-size:24px; line-height:1.7; padding:6vw; }
    #rotateOverlay span { font-size:15px; opacity:.7; }
  }

  /* ---- HUD overlay ----  tune offsets/look via the vars below; shared panel = .hudpanel rule */
  :root { --hudOff-t:max(10px,env(safe-area-inset-top)); --hudOff-l:max(10px,env(safe-area-inset-left));
          --hudOff-r:max(10px,env(safe-area-inset-right)); --hudOff-b:max(14px,env(safe-area-inset-bottom));
          --hudInk:#194a6b; --hudLine:#5b97c4; --hudLine2:#8fc0e0;
          --hudOrange:#ff9325; --hudOrangeHi:#ffc169; --hudOrangeEdge:#d9701a;
          --hudFill:linear-gradient(165deg,#fffdf6,#f3ead7);          /* warm off-white card */
          --hudRadius:18px;
          --hudInset:inset 0 0 0 2px rgba(255,255,255,.9), inset 0 4px 3px rgba(255,255,255,.55), inset 0 -5px 5px rgba(120,150,180,.10);
          --hudDrop:0 5px 0 rgba(63,122,166,.18), 0 11px 16px rgba(40,90,130,.16); }
  #hud { position:fixed; inset:0; pointer-events:none; font-weight:bold; color:var(--hudInk); }
  #hud canvas { display:block; }
  /* shared cartoon "sticker card": warm fill, double outline, inner highlight, chunky float shadow */
  .hudpanel, #opCard, #opsPanel, #objCard, #resPill, #objHint {
    background:var(--hudFill); border:3px solid var(--hudLine); border-radius:var(--hudRadius);
    box-shadow:var(--hudInset), var(--hudDrop); }
  #hudLeft  { position:absolute; top:var(--hudOff-t); left:var(--hudOff-l); display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-width:46vw; }
  #objCard  { position:absolute; top:var(--hudOff-t); left:50%; transform:translateX(-50%); display:flex; align-items:stretch; padding:7px; }
  #hudRight { position:absolute; top:var(--hudOff-t); right:var(--hudOff-r); display:flex; align-items:flex-start; gap:9px; }

  /* operation card — compact mission tag with the badge tucked inside the cream + a faint stamp behind the right */
  #opCard, #opsPanel { pointer-events:auto; }   /* capture taps so they don't fall through to the launcher */
  #opCard { position:relative; display:block; padding:6px 16px; text-align:center;
    background:linear-gradient(165deg,#fff8e9,#f3e1bd); border-radius:16px 18px 16px 16px; }
  #opCard::after { content:''; position:absolute; right:-7px; top:50%; transform:translateY(-50%); z-index:-1;  /* subtle pale stamp peeking behind the right */
    width:32px; height:32px; border-radius:50%; background:rgba(214,191,150,.16);
    border:2px solid rgba(150,115,60,.22); }
  #opTitle { font-size:17px; font-weight:800; line-height:1.05; letter-spacing:.3px; text-shadow:0 1px 0 rgba(255,255,255,.65); white-space:nowrap; }
  #opSub   { font-size:10px; opacity:.6; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
  #opSub::before, #opSub::after { content:'\2744'; margin:0 4px; opacity:.7; font-size:8px; }

  /* operatives panel — compact (keeps the play area clear for upward shots) */
  #opsPanel { padding:0 0 6px; overflow:hidden; }
  /* a centred ribbon label (not an edge-to-edge title bar) so the panel reads as a sticker, not a window */
  #opsTitle { display:block; width:fit-content; margin:6px auto 2px; border-radius:10px;
    background:linear-gradient(#62b4ea,#4890ce); color:#fff; text-align:center;
    font-size:10px; letter-spacing:1.2px; padding:3px 14px; text-shadow:0 1px 1px rgba(20,70,110,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,70,110,.25); }
  #opsTitle::before, #opsTitle::after { content:'\2605'; margin:0 6px; color:#ffe79a; font-size:9px; }
  #opsList { display:flex; align-items:center; gap:6px; padding:2px 9px 0; min-height:36px; flex-wrap:wrap; }
  #opsList .chip { position:relative; width:32px; height:32px; border-radius:50%;
    background:radial-gradient(circle at 38% 32%,#fbfdff,#dcebf6);
    border:2px solid #9cc4dd; display:grid; place-items:center; flex:none;
    box-shadow:inset 0 -3px 4px rgba(120,150,180,.18), 0 1px 0 rgba(255,255,255,.6); }
  #opsList .chip canvas { width:28px; height:28px; }
  #opsList .chip.cur { border:3px solid #ffbf2e; background:radial-gradient(circle at 38% 32%,#fffaf0,#ffe9b8);
    box-shadow:0 0 0 2px rgba(255,194,46,.28), inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 6px rgba(255,150,20,.4);
    animation:chipBob 1.5s ease-in-out infinite; }
  #opsList .chip.cur::after { content:'\2605'; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
    font-size:12px; color:#ffce3d; text-shadow:0 1px 0 #c9962a, 0 0 4px rgba(255,206,61,.6); }
  #opsList .chip.empty { border:2px dashed #aac6da; background:rgba(255,255,255,.22); box-shadow:none; }
  @keyframes chipBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
  /* special seals — secondary frosted subsection */
  #specialsRow { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:3px 7px 0; padding:4px 7px 5px;
    background:rgba(91,151,196,.09); border:1px solid rgba(91,151,196,.18); border-radius:11px; }
  #specialsLabel { font-size:8px; letter-spacing:.6px; opacity:.6; width:100%; text-transform:uppercase; }
  #specialsLabel::before { content:'\2605'; margin-right:4px; color:#e0a92b; opacity:.9; }
  #specialsList { display:flex; gap:5px; }
  #specialsList .schip { position:relative; width:27px; height:27px; border-radius:50%; border:2px solid #d3ab44;
    background:radial-gradient(circle at 38% 32%,#fff8e2,#ffeab8); cursor:pointer; pointer-events:auto; display:grid; place-items:center;
    box-shadow:inset 0 -2px 3px rgba(180,140,40,.2); }
  #specialsList .schip.active { border-color:#ffbf2e; box-shadow:0 0 0 2px rgba(255,194,46,.5), inset 0 0 0 2px rgba(255,255,255,.6); }
  #specialsList .schip.empty { border:2px dashed #b9c9d6; background:rgba(255,255,255,.2); color:#9bb3c4; cursor:default; font-size:14px; box-shadow:none; }
  #specialsList .schip canvas { width:23px; height:23px; }
  #specialsList .schip.more { width:auto; min-width:27px; padding:0 5px; border:2px solid #8fb9d6;
    background:rgba(255,255,255,.5); color:#2a6f9c; font-size:11px; font-weight:800; border-radius:13px; }
  #specialsList .schip .cnt { position:absolute; bottom:-4px; right:-4px; background:#c9772a; color:#fff;
    font-size:8px; line-height:1.5; border-radius:7px; padding:0 3px; box-shadow:0 1px 0 rgba(0,0,0,.15); }
  /* shop/specials access — a small round "+" that lives at the end of the operatives line */
  #specialsBtn { pointer-events:auto; flex:none; width:30px; height:30px; padding:0; border-radius:50%;
    display:grid; place-items:center; font-size:19px; line-height:1; font-weight:800; letter-spacing:0;
    color:#2a6f9c; background:linear-gradient(#ffffff,#eaf2f8); border:2px dashed #8fb9d6;
    box-shadow:0 2px 0 #b6d2e6, inset 0 1px 0 #fff; }
  #specialsBtn:active { transform:translateY(2px); box-shadow:0 1px 0 #b6d2e6; }

  /* objective card — stitched frosted tracker (position:absolute comes from the layout rule above) */
  #objCard::before { content:''; position:absolute; inset:5px; border:2px dashed rgba(91,151,196,.4); border-radius:12px; pointer-events:none; }
  .objCol { display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 18px; min-width:60px; }
  .objCol .objIcon { width:34px; height:34px; display:grid; place-items:center; }
  .objCol .objNum { font-size:21px; font-weight:800; line-height:1; }
  .objCol .objLbl { font-size:9px; letter-spacing:.7px; opacity:.55; text-transform:uppercase; }
  .objSep { width:2px; background:rgba(91,151,196,.3); border-radius:2px; margin:8px 0; }

  /* resource pill */
  #resPill { display:flex; align-items:center; gap:10px; padding:7px 15px; border-radius:24px; }
  #resPill .resItem { display:flex; align-items:center; gap:6px; font-size:17px; font-weight:800; }
  #resPill .resIcon { width:22px; height:22px; display:grid; place-items:center; }
  #resPill .scoreItem { color:#f0a500; font-size:19px; }
  #resPill .hiScoreItem { color:#d99a00; }
  #resPill .hiScoreItem .resIcon { font-size:16px; }
  #resPill .resSep { width:2px; height:20px; background:rgba(91,151,196,.35); border-radius:2px; }

  /* pause button (id is settingsBtn for legacy wiring; reads as Pause) */
  #settingsBtn { pointer-events:auto; width:46px; height:46px; padding:0; border-radius:14px; display:grid; place-items:center;
    background:linear-gradient(var(--hudOrangeHi),var(--hudOrange)); border:3px solid var(--hudOrangeEdge);
    box-shadow:inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 5px rgba(170,80,15,.3), 0 3px 0 var(--hudOrangeEdge), 0 5px 9px rgba(160,80,15,.22); }
  #settingsBtn:active { transform:translateY(2px); box-shadow:inset 0 3px 0 rgba(255,255,255,.4), 0 1px 0 var(--hudOrangeEdge); }
  #settingsBtn .pauseGlyph { width:16px; height:17px; position:relative; z-index:3; }
  #settingsBtn .pauseGlyph::before, #settingsBtn .pauseGlyph::after { content:''; position:absolute; top:0; width:5px; height:17px; background:#fff; border-radius:2.5px; box-shadow:0 1px 2px rgba(120,50,0,.25); }
  #settingsBtn .pauseGlyph::before { left:2px; } #settingsBtn .pauseGlyph::after { right:2px; }
  #editorExitBtn { pointer-events:auto; }

  /* bottom-centre action / objective hint — cream pill with the orange badge protruding from the left */
  #objHint { position:absolute; left:50%; bottom:var(--hudOff-b); transform:translateX(-50%);
    padding:8px 24px; border-radius:34px; opacity:0; transition:opacity .35s; }   /* hidden until shown */
  #objHint.show { opacity:1; }
  #objHintTitle { font-size:17px; font-weight:800; letter-spacing:.6px; white-space:nowrap; }
  #objHintSub { font-size:12px; color:#5a93b5; margin-top:1px; white-space:nowrap; }
  /* candy buttons: a soft top gloss + the 3D bottom edge; :active presses the button INTO the edge */
  button { pointer-events:auto; font-family:inherit; font-weight:bold; cursor:pointer;
    background:linear-gradient(180deg,#ffb765 0%,#ff9d3c 48%,#f68e22 100%); color:#5b2d00;
    border:3px solid #c96a12; border-radius:16px;
    padding:12px 22px; font-size:18px;
    box-shadow:0 4px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.35); }
  button:active { transform:translateY(3px); box-shadow:0 1px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.2); }
  button.small { padding:8px 14px; font-size:14px; }
  button.blue { background:linear-gradient(180deg,#8cdcf7 0%,#5fc7ee 48%,#45b5e2 100%);
    border-color:#2a86b3; color:#0c3c55; box-shadow:0 4px 0 #2a86b3, inset 0 2px 0 rgba(255,255,255,.4); }
  button.blue:active { box-shadow:0 1px 0 #2a86b3, inset 0 2px 0 rgba(255,255,255,.25); }
  button.danger { background:linear-gradient(180deg,#ef7361 0%,#e4533f 48%,#d4402c 100%);
    border-color:#a8311f; color:#fff; box-shadow:0 4px 0 #a8311f, inset 0 2px 0 rgba(255,255,255,.25); }
  button.danger:active { box-shadow:0 1px 0 #a8311f, inset 0 2px 0 rgba(255,255,255,.15); }
  /* in-game modal (confirm/prompt) sits above every other screen + the editor panels */
  #modalScreen { z-index:200; }
  #modalInput { width:100%; box-sizing:border-box; padding:10px 12px; font-size:16px; font-family:inherit;
    color:#1d4d6e; background:#fff; border:2px solid #8fc6d6; border-radius:10px; margin:4px 0 6px; }
  #modalInput:focus { outline:none; border-color:#2a86b3; }

  #msgBanner { position:fixed; left:50%; bottom:78px; transform:translateX(-50%);
    background:rgba(20,60,90,.85); color:#fff; font-weight:bold; font-size:16px;
    padding:8px 18px; border-radius:20px; max-width:90vw; text-align:center;
    transition:opacity .4s; opacity:0; pointer-events:none; }
  #hintBanner { position:fixed; left:50%; top:128px; transform:translateX(-50%);
    background:#ffe28a; color:#7a4d00; border:3px solid #d9a521; font-weight:bold;
    font-size:16px; padding:8px 18px; border-radius:20px; opacity:0; transition:opacity .3s;
    pointer-events:none; }

  /* ---- intro cutscene overlay (transparent: the canvas shows the scene through it) ---- */
  #introScreen { position:fixed; inset:0; z-index:60; pointer-events:none; }
  #introSkip { position:absolute; pointer-events:auto;
    top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right));
    background:rgba(18,46,70,.72); color:#fff; border:2px solid rgba(255,255,255,.55);
    border-radius:22px; padding:9px 18px; font-size:15px; box-shadow:none; }
  #introSkip:active { transform:translateY(1px); }
  #introCaption { position:absolute; left:50%; top:11%; transform:translateX(-50%); pointer-events:none;
    max-width:90vw; text-align:center; color:#fff; font-weight:bold; line-height:1.3;
    font-size:clamp(18px,4.6vw,30px); text-shadow:0 2px 6px rgba(0,0,0,.45);
    background:rgba(14,34,54,.74); padding:12px 24px; border-radius:18px;
    border:2px solid rgba(255,255,255,.16); box-shadow:0 6px 18px rgba(0,0,0,.3); }
  #introCaption.pop { animation:capPop .42s cubic-bezier(.34,1.56,.64,1); }
  @keyframes capPop { 0% { transform:translateX(-50%) translateY(-10px) scale(.88); opacity:0; }
    100% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; } }
  /* welcome controls on the held title card: Deploy centered, Story in the bottom-left corner */
  #introDeploy { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); pointer-events:auto;
    font-family:'Fredoka','Trebuchet MS',system-ui,sans-serif; font-size:clamp(27px,5.6vw,41px); font-weight:600;
    letter-spacing:1.4px; padding:7px 58px; border-radius:13px; color:#fff;
    background:linear-gradient(180deg,#ffc24a 0%,#ff9d22 52%,#ff8410 100%); border:3px solid #a85200;
    text-shadow:0 2px 0 rgba(130,55,0,.55);
    box-shadow:0 7px 0 #a85200, 0 15px 24px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.55);
    animation:deployPulse 1.9s ease-in-out infinite; }
  #introDeploy:active { animation:none; transform:translate(-50%,-50%) translateY(4px);
    box-shadow:0 3px 0 #a85200, 0 6px 14px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); }
  @keyframes deployPulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.05); } }
  #introStory { position:absolute; pointer-events:auto;
    left:max(14px,env(safe-area-inset-left)); bottom:max(14px,env(safe-area-inset-bottom)); }

  /* ---- full screen overlays (start / win / fail) ---- */
  .screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:14px; background:rgba(15,55,90,.55); backdrop-filter:blur(3px);
    pointer-events:auto; text-align:center; padding:20px; }
  .card { background:#f4fbff; border:4px solid #4a7fa5; border-radius:24px; padding:26px 30px;
    color:#1d4d6e; box-shadow:0 8px 0 rgba(0,0,0,.18); max-width:480px; width:92%; }
  .card h1 { font-size:34px; margin-bottom:6px; }
  .card h2 { font-size:26px; margin-bottom:8px; }
  .card p  { font-size:16px; margin-bottom:10px; }
  .stars { font-size:46px; letter-spacing:8px; margin:6px 0 10px; line-height:1; }
  .stars .star { display:inline-block; color:#c7d8e3; text-shadow:0 2px 0 rgba(0,0,0,.08); transition:color .15s ease; }
  .stars .star.filled { color:#ffce3d; text-shadow:0 0 10px rgba(255,200,60,.7), 0 2px 0 #d99a00; }
  .stars .star.pop { animation:starPop .5s cubic-bezier(.2,1.5,.5,1); }
  @keyframes starPop {                                   /* STAMP in: big + tilted -> slam down -> settle, with a gold glow flash */
    0%   { transform:scale(1.9) rotate(-14deg); filter:drop-shadow(0 0 14px rgba(255,206,61,.95)); }
    55%  { transform:scale(.86) rotate(4deg); }
    78%  { transform:scale(1.12) rotate(0deg); }
    100% { transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 0 rgba(255,206,61,0)); } }
  /* --- results panel --- */
  .resultCard { background:linear-gradient(180deg,#ffffff 0%,#e9f5ff 100%);
    border-radius:26px; box-shadow:0 9px 0 rgba(31,77,110,.16), 0 16px 30px rgba(15,55,90,.28); }
  .resultCard:not(.failed) { animation:cardPop .45s cubic-bezier(.2,1.45,.45,1); }
  @keyframes cardPop { 0% { transform:scale(.82); opacity:0; } 60% { transform:scale(1.03); opacity:1; } 100% { transform:scale(1); } }
  #endTitle { color:#16466a; letter-spacing:.4px; text-shadow:0 2px 0 rgba(255,255,255,.65); margin-bottom:6px; }
  /* cheer squad: the mission's seals hopping above the title — the win card's sign of life */
  #endCheer { display:flex; justify-content:center; align-items:flex-end; gap:2px; margin:-6px 0 -12px; }
  #endCheer:empty { display:none; }
  #endCheer .cheerSeal { display:inline-block; animation:cheerHop 1.15s ease-in-out infinite; transform-origin:50% 88%; }
  #endCheer .cheerSeal canvas { display:block; filter:drop-shadow(0 3px 3px rgba(31,77,110,.22)); }
  #endCheer.gold .cheerSeal canvas { filter:drop-shadow(0 3px 3px rgba(31,77,110,.22)) drop-shadow(0 0 7px rgba(255,206,61,.5)); }
  @keyframes cheerHop {
    0%, 100% { transform:translateY(0) scale(1,1); }
    12%      { transform:translateY(1px) scale(1.03,.94); }   /* crouch */
    38%      { transform:translateY(-9px) scale(.98,1.05); }  /* hop! */
    62%      { transform:translateY(0) scale(1.02,.97); }
  }
  /* result-card button hierarchy: NEXT is the one big green "go" button; Retry/Campaigns recede
     into quiet ice-white secondaries so the card reads "press the green one" at a glance */
  .resultCard .btnrow { align-items:center; }
  .resultCard #nextBtn { background:linear-gradient(180deg,#ffb765 0%,#ff9d3c 48%,#f68e22 100%);
    border-color:#c96a12; color:#5b2d00;
    font-size:20px; padding:14px 30px; border-radius:20px;
    box-shadow:0 5px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.35); }
  .resultCard #nextBtn:active { transform:translateY(4px); box-shadow:0 1px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.2); }
  .resultCard #endRetryBtn, .resultCard #endMapBtn {
    background:linear-gradient(180deg,#ffffff 0%,#eaf5fc 60%,#dceef9 100%);
    border-color:#9cc6dd; color:#1d4d6e; font-size:15px; padding:10px 16px;
    box-shadow:0 4px 0 #9cc6dd, inset 0 2px 0 rgba(255,255,255,.8); }
  .resultCard #endRetryBtn:active, .resultCard #endMapBtn:active { box-shadow:0 1px 0 #9cc6dd, inset 0 2px 0 rgba(255,255,255,.6); }
  /* on a fail, Next is hidden — Retry steps up as the hero */
  .resultCard.failed #endRetryBtn { background:linear-gradient(180deg,#ffb765 0%,#ff9d3c 48%,#f68e22 100%);
    border-color:#c96a12; color:#5b2d00; font-size:16px; padding:10px 20px;
    box-shadow:0 4px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.35); }
  .resultCard.failed #endRetryBtn:active { box-shadow:0 1px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.2); }
  /* 3★ gold dressing: the card itself celebrates a perfect run */
  .resultCard.gold3 { background:linear-gradient(180deg,#fffdf4 0%,#ffe9b8 100%); box-shadow:0 9px 0 rgba(179,124,10,.22), 0 16px 34px rgba(216,154,0,.30); }
  .resultCard.gold3 #endTitle { color:#b86b00; text-shadow:0 1px 0 #fff6d8, 0 0 18px rgba(255,206,61,.5); }
  .resultCard.gold3 #endHero { background:linear-gradient(180deg,#fff9e6,#ffedc2); border-color:#f3c969; }
  /* Mission Failed variant — cooler muted palette + a gentle drop-in */
  .resultCard.failed { background:linear-gradient(180deg,#eef2f6 0%,#d7e0e8 100%);
    box-shadow:0 9px 0 rgba(70,92,112,.16), 0 16px 30px rgba(40,62,88,.30);
    animation:failDrop .5s cubic-bezier(.34,1.3,.64,1) both; }
  .resultCard.failed #endTitle { color:#5a6f80; }
  @keyframes failDrop { 0%{transform:translateY(-14px) scale(.95) rotate(-1.5deg); opacity:0;}
    55%{transform:translateY(0) scale(1.015) rotate(.6deg);} 100%{transform:none; opacity:1;} }
  #endFail { display:flex; flex-direction:column; align-items:center; gap:2px; margin:2px 0 10px; }
  #endFail canvas { display:block; filter:drop-shadow(0 4px 5px rgba(40,62,88,.28)); animation:napBob 2.6s ease-in-out infinite; }
  @keyframes napBob { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-3px) rotate(1deg);} }
  .failSub { font-size:14px; font-weight:800; color:#6a7e8e; letter-spacing:.3px; }
  /* hero zone groups the score + stars in a soft icy panel */
  #endHero { background:linear-gradient(180deg,#f4faff,#dceffb); border:2px solid #cbe4f4;
    border-radius:18px; padding:8px 16px 10px; margin:0 0 10px;
    box-shadow:inset 0 2px 7px rgba(120,170,205,.22), 0 2px 0 rgba(255,255,255,.6); }
  #endScoreBlock { margin:0; cursor:pointer; user-select:none; }
  #endScoreBlock .endLabel { font-size:12px; font-weight:800; letter-spacing:3px; color:#5b97c4; }
  #endScore { font-size:48px; font-weight:900; line-height:1.02; color:#f6a800;
    text-shadow:0 2px 0 #d07f00, 0 0 18px rgba(246,168,0,.35); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
  .stars { margin:4px 0 0; }
  .stars .star { filter:drop-shadow(0 2px 1px rgba(31,77,110,.18)); }
  /* star-goal strip: the 2★/3★ score thresholds (lit when reached) + distance to the next star */
  #endStarGoals { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:5px 0 2px; }
  #endStarGoals:empty { display:none; }
  .starGoal { font-size:12px; font-weight:800; color:#7f9db2; background:#eef7fd; border:1.5px solid #d4e8f5;
    border-radius:10px; padding:2px 9px; letter-spacing:.4px; font-variant-numeric:tabular-nums; }
  .starGoal.lit { color:#b86b00; background:linear-gradient(180deg,#fff7e0,#ffedc2); border-color:#f3c969; }
  .starGoalNext { font-size:12px; font-weight:800; color:#5b97c4; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
  /* one quiet stats line: "Best 66,900 · +50 🐟 banked" — result card only (all IDs; nothing shared) */
  #endStatsRow { display:flex; justify-content:center; align-items:baseline; gap:9px; margin:0 0 10px;
    font-size:14px; font-weight:800; color:#5187b4; font-variant-numeric:tabular-nums; }
  #endHigh b { color:#356897; }
  #endHigh.newHigh { color:#b86b00; } #endHigh.newHigh b { color:#b86b00; }
  #endHigh .prevBest { font-size:12px; font-weight:700; opacity:.7; }
  /* fish banked this win (improvement or replay trickle) — the dot only shows when this half does */
  #endFishGain { color:#3e90db; }
  #endFishGain::before { content:'·'; color:#b9d3e8; margin-right:9px; font-weight:900; }
  #endFishGain.hidden { display:none; }
  #endObjectives { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
  .objRow { display:flex; align-items:center; gap:10px; background:#eef7fd; border:2px solid #d4e8f5;
    border-radius:16px; padding:5px 12px 5px 6px; box-shadow:0 2px 0 rgba(74,127,165,.16); }
  .objRow.done { background:linear-gradient(180deg,#e4f2ff,#d4ebfb); border-color:#a9d8f0; }
  .objRow .objRowIcon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto;
    background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(31,77,110,.18), inset 0 0 0 1px rgba(31,77,110,.05); }
  .objRow .objRowIcon canvas { display:block; }
  .objRow .objRowLabel { flex:1 1 auto; text-align:left; font-size:15px; font-weight:700; color:#1d4d6e; }
  .objRow .objRowVal { font-size:15px; font-weight:900; color:#1d4d6e; font-variant-numeric:tabular-nums;
    background:rgba(255,255,255,.7); border-radius:9px; padding:1px 8px; }
  .objRow .objCheck { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; margin-left:2px;
    font-size:13px; font-weight:900; color:#fff; background:#54a0d8; border-radius:50%; box-shadow:0 1px 2px rgba(31,77,110,.25); }
  .btnrow { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
  .settingsList { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; min-width:320px; }
  /* menu buttons: icon + label rows in the candy ice style (the old flat white was a workaround for
     emoji clashing with coloured buttons — the inline-SVG icons inherit currentColor, so gloss is back) */
  .settingsList button { display:flex; align-items:center; justify-content:center; gap:9px; }
  .settingsList .mIcon { display:inline-flex; flex:0 0 auto; }
  .settingsList .mIcon svg { width:20px; height:20px; display:block; }
  .settingsList .mLabel { white-space:nowrap; }
  /* Retry is the pause menu's most-used action — full-width orange hero at the top */
  #setRetry { grid-column:1 / -1; height:60px; font-size:18px;
    background:linear-gradient(180deg,#ffb765 0%,#ff9d3c 48%,#f68e22 100%);
    border-color:#c96a12; color:#5b2d00; box-shadow:0 4px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.35); }
  #setRetry:active { box-shadow:0 1px 0 #c96a12, inset 0 2px 0 rgba(255,255,255,.2); }
  #setRetry .mIcon svg { width:23px; height:23px; }
  /* Fish Shop gets the other full row — a quiet gold wash (it's where the fish get spent), well below Retry */
  #setShop { grid-column:1 / -1;
    background:linear-gradient(180deg,#fffdf4 0%,#fdf3d2 60%,#f9e9b6 100%);
    border-color:#dfc06a; color:#7a5200; box-shadow:0 4px 0 #dfc06a, inset 0 2px 0 rgba(255,255,255,.8); }
  #setShop:active { box-shadow:0 1px 0 #dfc06a, inset 0 2px 0 rgba(255,255,255,.6); }
  /* fixed height + single-line labels → every menu button is the same size, no wrap-driven variance */
  .settingsList button { width:100%; height:56px; padding:8px 10px; font-size:15px; white-space:nowrap; }
  /* white menu buttons so the emoji icons pop instead of blending into the light-blue fill */
  .settingsList button.blue { background:linear-gradient(180deg,#ffffff 0%,#eaf5fc 60%,#dceef9 100%);
    border-color:#9cc6dd; color:#1d4d6e; box-shadow:0 4px 0 #9cc6dd, inset 0 2px 0 rgba(255,255,255,.8); }
  .settingsList button.blue:active { box-shadow:0 1px 0 #9cc6dd, inset 0 2px 0 rgba(255,255,255,.6); }
  @media (max-width:420px) { .settingsList { grid-template-columns:1fr; min-width:0; } }
  /* About & Legal leaf pages — readable left-aligned text that scrolls if it overflows a short screen */
  .legalBody { text-align:left; max-height:52vh; overflow-y:auto; margin:10px 0; padding-right:4px;
    font-size:15px; line-height:1.5; }
  .legalBody p { margin:0 0 8px; }
  .legalBody ul { margin:0 0 8px; padding-left:20px; }
  .legalBody li { margin:2px 0; }
  .legalBody .muted { opacity:.6; font-size:13px; }
  .hidden { display:none !important; }
  #rotateTip { font-size:13px; opacity:.7; }
  @media (orientation: landscape) { #rotateTip { display:none; } }

  button.icon { padding:8px 10px; font-size:16px; background:#fff; color:#1d4d6e;
    border-color:#4a7fa5; box-shadow:0 4px 0 #4a7fa5; }
  button.icon:active { box-shadow:0 1px 0 #4a7fa5; }
  #mapNav button { background:#fff; color:#1d4d6e; border-color:#4a7fa5; box-shadow:0 4px 0 #4a7fa5; }
  #mapNav button:active { box-shadow:0 1px 0 #4a7fa5; }

  /* ---- Campaigns / Operations select ---- */
  .mapCard { max-width:620px; width:94%; display:flex; flex-direction:column; max-height:92vh; }
  .cardList { display:flex; flex-direction:column; gap:10px; margin:10px 0; overflow-y:auto;
    -webkit-overflow-scrolling:touch; padding:2px; }
  .opGrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
  /* game-style card (matches the Mission Complete look) */
  .gcard { display:flex; flex-direction:column; gap:6px; text-align:left; align-items:stretch;
    background:linear-gradient(180deg,#ffffff,#e9f5ff); border:2px solid #cbe4f4; border-radius:16px;
    padding:10px 14px; box-shadow:0 3px 0 rgba(74,127,165,.18); color:#1d4d6e; }
  button.gcard { cursor:pointer; font-family:inherit; }
  button.gcard:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(74,127,165,.18); }
  .gcard.opCard { min-height:88px; justify-content:flex-start; }   /* uniform op tiles regardless of chip rows */
  .gcard.opCard.done { background:linear-gradient(180deg,#fff7e0,#ffedc2); border-color:#f3c969; }
  .gcard.locked { background:#eef2f5; border-color:#d2dbe2; color:#8a98a4; box-shadow:0 3px 0 rgba(120,140,160,.15);
    cursor:default; opacity:.85; }
  /* campaign card: the world scene fills the card; a left scrim keeps the text readable */
  .campCard { position:relative; overflow:hidden; padding:0; min-height:98px; }
  .campCard .campBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .campCard .campScrim { position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(247,251,255,.95) 0%, rgba(247,251,255,.74) 46%, rgba(247,251,255,.12) 100%); }
  .campCard.locked .campBg { filter:grayscale(.55) brightness(.92); }
  .campCard.locked .campScrim { background:linear-gradient(90deg, rgba(231,236,240,.94), rgba(231,236,240,.55) 70%, rgba(231,236,240,.2)); }
  .campCard .campBody { position:relative; z-index:2; padding:10px 14px; display:flex; flex-direction:column;
    gap:8px; justify-content:center; min-height:98px; }
  .gcHead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .gcName { font-size:18px; font-weight:900; }
  .gcSub { font-size:12px; font-weight:700; color:#5b97c4; }
  .gcard.locked .gcSub { color:#9aa7b2; }
  .statRow { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
  .statChip { display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:800;
    background:rgba(255,255,255,.7); border:1px solid #d4e8f5; border-radius:10px; padding:2px 8px; }
  .statChip canvas { display:block; }
  .statChip.scoreChip { color:#d99a00; background:linear-gradient(180deg,#fff7e0,#ffedc2); border-color:#f3c969; }
  .lockRow { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#7d8a96; }
  .lockRow .lockIco { font-size:18px; }
  .lockRow .lockHint { font-size:12px; font-weight:600; opacity:.8; }
  .campAgg { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:2px 0 6px; }
  /* node-path operation map: the world's backdrop is the scene, a dotted trail winds through
     ten nodes (Mario/Candy-Crush read). Nodes carry number + star pips; the next op pulses. */
  .opMap { position:relative; height:min(52vh, 400px); border-radius:14px; overflow:hidden;
    margin:10px 0; border:2px solid var(--hudLine2); flex:0 0 auto; }
  .opMap .campBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .opMapScrim { position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(18,38,58,.20)); }
  .opPath { position:absolute; inset:0; width:100%; height:100%; }
  .opPath path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .opPath .opPathUnder { stroke:rgba(20,42,62,.42); stroke-width:5px; stroke-dasharray:1 9; }
  .opPath .opPathOver { stroke:rgba(255,255,255,.9); stroke-width:2.2px; stroke-dasharray:1 9; }
  .opNode { position:absolute; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0;
    background:radial-gradient(circle at 35% 30%, #ffffff, #dceefb); border:2.5px solid var(--hudLine);
    color:var(--hudInk); font-weight:900; font-family:inherit; box-shadow:0 3px 0 rgba(40,80,110,.28); }
  button.opNode { cursor:pointer; }
  button.opNode:active { transform:translate(-50%,-46%); }
  .opNode .opNodeNum { font-size:16px; line-height:1.1; }
  .opNode .opNodeStars { font-size:9px; line-height:1; color:#f0a800; letter-spacing:1px;
    text-shadow:0 1px 0 rgba(255,255,255,.6); }
  .opNode.locked { background:#e3e9ee; border-color:#c6d1da; color:#93a2ae; box-shadow:none; opacity:.92; }
  .opNode.locked .opNodeNum { font-size:13px; }
  .opNode.locked .opNodeStars { visibility:hidden; }
  .opNode.done { background:radial-gradient(circle at 35% 30%, #fff8dd, #ffe3a4); border-color:#f3c969; }
  .opNode.finale { width:60px; height:60px; border-width:3px; }
  .opNode.finale .opNodeNum { font-size:20px; }
  .opNode.current { border-color:var(--hudOrange); animation:nodePulse 1.6s ease-in-out infinite; }
  @keyframes nodePulse {
    0%, 100% { box-shadow:0 3px 0 rgba(40,80,110,.28), 0 0 0 0 rgba(255,147,37,.55); }
    50%      { box-shadow:0 3px 0 rgba(40,80,110,.28), 0 0 0 11px rgba(255,147,37,0); }
  }
  @media (max-height:480px) {
    .mapCard { max-height:96vh; padding:10px 16px; }
    .mapCard h2 { font-size:20px; margin-bottom:2px; }
    .cardList { gap:7px; margin:6px 0; }
    .opGrid { grid-template-columns:repeat(3, 1fr); }
    .gcard { padding:7px 11px; gap:4px; }
    .gcName { font-size:15px; }
    .statChip { font-size:12px; padding:1px 6px; }
  }

  /* ---- new operative intro card ---- */
  .introTag { display:inline-block; background:#ffe28a; color:#7a4d00; border:2px solid #d9a521;
    border-radius:12px; padding:3px 14px; font-weight:bold; font-size:13px; letter-spacing:1px;
    margin-bottom:6px; }
  #introCanvas { display:block; margin:0 auto; animation:sealBounce 1.3s ease-in-out infinite; }
  @keyframes sealBounce {
    0%, 100% { transform:translateY(0) rotate(-3deg); }
    50%      { transform:translateY(-12px) rotate(3deg); }
  }
  /* ---- fish shop ---- */
  /* vertical cards: portrait + name header, full-width text, wide Buy button pinned to the bottom.
     Wide text wraps to a couple of lines (instead of a tall narrow column) so every item fits without scrolling. */
  /* card is a flex column capped to the viewport; the items list is the one part that scrolls,
     so the title/note/Back stay pinned and never run off-screen — and more seals just scroll. */
  #shopScreen .card { max-width:660px; max-height:90vh; display:flex; flex-direction:column; }
  #shopItems { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0;
    flex:1 1 auto; min-height:120px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:2px 10px 18px 2px;
    /* fade the bottom edge so it's visually obvious the list keeps going */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent); }
  /* chunky always-visible scrollbar (desktop) reinforcing that this area scrolls */
  #shopItems::-webkit-scrollbar { width:12px; }
  #shopItems::-webkit-scrollbar-track { background:rgba(40,90,130,.08); border-radius:8px; }
  #shopItems::-webkit-scrollbar-thumb { background:#e0a92b; border-radius:8px; border:3px solid #f4fbff; }
  #shopItems::-webkit-scrollbar-thumb:hover { background:#c9912086; }
  @media (max-width:560px) { #shopItems { grid-template-columns:1fr; } }
  .shopItem { display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; background:#fff;
    border:3px solid #d9a521; border-radius:14px; padding:10px 12px; text-align:center; }
  .shopItem .hd { display:flex; align-items:center; gap:8px; }
  .shopItem canvas { flex:none; width:50px; height:50px; animation:sealBounce 1.6s ease-in-out infinite; }
  .shopItem .info { width:100%; }
  .shopItem h3 { font-size:17px; color:#1d4d6e; margin:0; }
  .shopItem p { font-size:12.5px; margin:2px 0; line-height:1.3; }
  .shopItem .howto { font-size:12px; color:#2a6f9c; opacity:.9; margin:3px 0; }
  .shopItem .own { font-size:11px; color:#b8860b; font-weight:bold; }
  .shopItem button { width:100%; margin-top:auto; white-space:nowrap; padding:9px 12px; font-size:15px; }
  .shopItem button:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
  .shopNote { font-size:12px; opacity:.7; }
  #shopWallet { font-size:15px; }
  /* Short landscape (phones — the game is landscape-only): the tall vertical cards don't fit, so
     switch to compact single-column horizontal rows (portrait+name | text | Buy) with trimmed chrome.
     A full card incl. its Buy button stays visible, and the list scrolls obviously for more seals. */
  @media (max-height:480px) {
    #shopScreen .card { max-height:94vh; padding:12px 18px; }
    #shopScreen .card h2 { font-size:20px; margin-bottom:2px; }
    #shopWallet { font-size:13px; }
    #shopItems { grid-template-columns:1fr; gap:8px; margin:6px 0; padding-bottom:16px; min-height:90px; }
    .shopItem { flex-direction:row; align-items:center; gap:10px; text-align:left; padding:7px 10px; }
    .shopItem .hd { flex-direction:column; gap:2px; flex:none; width:64px; }
    .shopItem canvas { width:40px; height:40px; }
    .shopItem h3 { font-size:13px; line-height:1.1; }
    .shopItem .info { flex:1; }
    .shopItem p { font-size:12px; margin:1px 0; }
    .shopItem .howto { margin:2px 0; }
    .shopItem button { width:auto; margin:0; flex:none; padding:8px 14px; font-size:14px; }
    .shopNote { font-size:11px; margin:2px 0; }
    #shopScreen .btnrow { margin-top:6px; }
    #shopScreen .btnrow button { padding:8px 16px; font-size:15px; }
    /* results panel on a short landscape phone (incl. iPhone SE ~375px) — keep it inside the viewport */
    #endScreen.screen { padding:8px; gap:6px; }
    #endScreen .card { max-height:97vh; overflow-y:auto; padding:8px 16px; }
    #endScreen .card h2 { font-size:18px; margin-bottom:0; }
    #endScreen .card p { font-size:12px; margin-bottom:3px; }
    #endHero { padding:5px 14px 6px; margin:0 0 6px; }
    #endScoreBlock { margin:0; }
    #endScoreBlock .endLabel { font-size:11px; }
    #endScore { font-size:27px; }
    .stars { font-size:28px; letter-spacing:6px; margin:2px 0 0; }
    #endStatsRow { font-size:12.5px; margin:0 0 6px; }
    #endObjectives { gap:4px; margin:0 0 6px; }
    .objRow { padding:3px 9px 3px 4px; gap:8px; }
    .objRow .objRowIcon { width:26px; height:26px; }
    .objRow .objRowIcon canvas { width:20px; height:20px; }
    .objRow .objRowLabel { font-size:12px; }
    .objRow .objRowVal { font-size:13px; }
    .objRow .objCheck { width:18px; height:18px; font-size:12px; }
    #endScreen .btnrow { margin-top:2px; gap:8px; }
    #endScreen .btnrow button { padding:7px 14px; font-size:14px; }
  }

  .tap { display:inline-block; animation:tapPulse 1s ease-in-out infinite; }
  @keyframes tapPulse {
    0%, 100% { transform:scale(1) translateY(0); }
    50%      { transform:scale(1.4) translateY(-4px); }
  }
  .bigseal { font-size:64px; line-height:1; }

  /* ---- level editor ---- */
  /* all editor controls stack at the TOP, leaving the play area (and ground) clear */
  #editorPanels { position:fixed; top:0; left:0; right:0; z-index:30;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  #editorBar { position:relative; display:flex; flex-wrap:wrap;
    align-items:center; gap:5px 10px; padding:5px 10px; background:rgba(244,251,255,.95);
    border-bottom:3px solid #4a7fa5; }
  /* ⋯ More popover, drops just below the bar, right-aligned */
  #edMoreMenu { position:absolute; right:6px; top:calc(100% + 4px); z-index:40;
    display:flex; flex-direction:column; gap:6px; padding:8px; background:rgba(244,251,255,.98);
    border:3px solid #4a7fa5; border-radius:14px; box-shadow:0 8px 0 rgba(0,0,0,.18); }
  #edMoreMenu button { font-size:14px; }
  #editorBar.hidden, #editorToolbox.hidden, #editorSelPanel.hidden { display:none; }
  .ebGroup { display:flex; align-items:center; gap:6px; }
  .ebActions { margin-left:auto; }
  .ebLabel { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#4a7fa5; font-weight:bold; }
  #editorBar button { padding:6px 9px; font-size:13px; box-shadow:0 3px 0 rgba(0,0,0,.18); }
  #edWorldName { font-weight:bold; color:#1d4d6e; min-width:96px; text-align:center; font-size:13px; }
  #edRoster, #edSealAdd { display:flex; gap:4px; align-items:center; }
  #edRoster canvas, #edSealAdd canvas { cursor:pointer; border-radius:50%; }
  #edSealAdd canvas { border:2px dashed #b8860b; }
  #edRoster:empty::after { content:'(none)'; color:#9aa; font-size:12px; }

  /* toolbox = a category tab strip + a single horizontal-scroll palette row (mobile-friendly) */
  #editorToolbox { display:flex; flex-direction:column; gap:4px; padding:5px 6px;
    background:rgba(234,245,252,.95); border-bottom:3px solid #4a7fa5; }
  .edCatTabs { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:1px; }
  .edCatTab { flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:5px 11px;
    border:2px solid #4a7fa5; border-radius:999px; background:#fff; color:#1d4d6e;
    font-size:12px; font-weight:bold; white-space:nowrap; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.14); }
  .edCatTab .edCatIco { font-size:14px; }
  .edCatTab.sel { border-color:#ff9d3c; background:#fff3cf; color:#5b2d00; }
  .edPaletteRow { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:2px 0 4px; min-height:54px; align-items:center; }
  .edSealAddSep { flex:0 0 auto; align-self:stretch; width:2px; background:#bcd6e6; margin:4px 4px; }
  .toolBtn { flex:0 0 auto; width:48px; height:48px; border:2px solid #4a7fa5; border-radius:12px; background:#fff;
    cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; font-size:9px; font-weight:bold; color:#1d4d6e; padding:0; }
  .toolBtn.add { border-style:dashed; border-color:#b8860b; }
  .toolBtn canvas { pointer-events:none; }
  .toolBtn.sel { border-color:#ff9d3c; background:#fff3cf; box-shadow:0 0 8px rgba(255,157,60,.7); }

  #editorSelPanel { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
    margin:6px auto; width:fit-content; max-width:94vw; color:#eaf5ff;   /* light default so bare labels/hints read on the dark panel */
    background:rgba(20,60,90,.92); padding:8px 12px; border-radius:16px; }
  #editorSelPanel button { padding:6px 10px; font-size:13px; }
  #editorSelPanel .matchip { width:26px; height:26px; border-radius:6px; border:2px solid #fff; cursor:pointer; }
  #editorSelPanel .matchip.on { outline:3px solid #ffc928; }
  #editorSelPanel .selinfo { color:#cfe6f5; font-size:12px; font-family:monospace; }
  #editorSelPanel .numfld { display:inline-flex; align-items:center; gap:3px; color:#cfe6f5; font-size:12px; }
  #editorSelPanel .numfld input { width:52px; padding:4px 6px; font-size:12px; border-radius:6px;
    border:1px solid #4a86ad; background:#0d2c40; color:#eaf5ff; }

  #exportText, #importText { width:100%; height:140px; font-family:monospace; font-size:12px;
    border:2px solid #4a7fa5; border-radius:10px; padding:8px; resize:vertical; box-sizing:border-box; }
  #loadCustomList, #loadBuiltinList { display:flex; flex-wrap:wrap; gap:6px; max-height:24vh; overflow-y:auto; }
  #loadBuiltinList button, #loadCustomList button { padding:6px 10px; font-size:13px; }
  #loadCustomList:empty::after { content:'(no saved levels yet)'; color:#9aa; font-size:12px; }
  /* Export/Load dialogs must sit ABOVE the editor panels (z-index 30); scroll inside if too tall */
  #exportDialog, #loadDialog { z-index:100; }
  #exportDialog .card, #loadDialog .card { max-height:92vh; overflow-y:auto; }
  button.icon#editorExitBtn { background:#ff9d3c; color:#5b2d00; border-color:#c96a12; box-shadow:0 4px 0 #c96a12; }
  /* tighter editor chrome on phones so the canvas keeps most of the screen */
  @media (max-width:560px), (max-height:480px) {
    #editorBar { gap:4px 8px; padding:4px 8px; }
    #editorBar button { padding:5px 7px; font-size:12px; }
    #edPlay { padding:6px 10px; }
    #edWorldName { min-width:64px; font-size:12px; }
    .edCatTab { padding:4px 8px; font-size:11px; }
    .edCatTab .edCatIco { font-size:13px; }
    .toolBtn { width:42px; height:42px; }
    .edPaletteRow { min-height:48px; }
    /* Export/Load dialogs: compact so the whole card fits a short landscape phone */
    #exportDialog .card, #loadDialog .card { padding:14px 16px; width:96%; }
    #exportText, #importText { height:84px; }
    #loadCustomList, #loadBuiltinList { max-height:30vh; }
  }