:root{
    /* unified editorial tokens: dark is the default, light is opt-in via the toggle */
    --bg:#1C211D; --surface:#242A25; --text:#ECE8DF; --text-soft:#C9C6BC; --label:#B9C2A4; --muted:#8D9384; --about-ink:#C9C6BC;
    --line-art:#B9C2A4; --rule:#4A5246; --sun:#D9B967;
    --botanical:#A9BC8A; --mountain:#C9A08A; --underwater:#8FB0C0; --cosmic:#AEB3CF;   /* world colors: small world icons only */
    --show-sun:block; --show-moon:none;
    /* aliases so pages not yet restyled keep working */
    --cream:var(--bg); --ink:var(--text); --card:var(--surface); --edge:var(--rule); --puzzle-bg:var(--surface); --art:var(--line-art);
    --sage:var(--label); --sage-d:var(--text);
    --textcard:#DCE8D5; --textcard-fg:#33422C; --sage-match:#4C6B45; --select:#F0B429;
    box-sizing:border-box;
  }
  :root[data-theme="light"]{
    --bg:#E9ECE2; --surface:#F4F5EE; --text:#2B332B; --text-soft:#4E584A; --label:#5E6858; --muted:#636C5D; --about-ink:#3A4337;
    --line-art:#6F7F62; --rule:#A9B39E; --sun:#D2A64E;
    --botanical:#6B8A4E; --mountain:#A0705A; --underwater:#4F7C90; --cosmic:#626A92;
    --show-sun:none; --show-moon:block;
  }
  *{box-sizing:border-box;}
  [hidden]{ display:none !important; }
  html{scroll-padding-top: env(safe-area-inset-top, 0px);}
  body{
    margin:0; min-height:100vh; background:var(--cream); color:var(--ink);
    font-family:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    display:flex; flex-direction:column; align-items:center;
    padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px));
    letter-spacing:.2px;
  }
  .app{ width:100%; max-width:480px; flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
  body{ min-height:100vh; min-height:100dvh; }

  /* ---------- brand (splash + home share this exact style) ---------- */
  .brand{
    margin:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-style:normal;
    font-size:44px; line-height:1.1; letter-spacing:.02em; text-transform:none; color:var(--text);
  }
  .divider{ width:28px; height:1px; background:var(--rule); margin:10px auto 0; }
  #splash{
    position:fixed; inset:0; z-index:999; background:var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:opacity .6s ease; opacity:1;
  }
  #splash.fade-out{ opacity:0; pointer-events:none; }
  #splash .brand{ margin:0; }
  .splash-leaf{ display:block; width:30px; height:30px; margin:22px auto 0; fill:none; stroke:var(--sun); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .splash-leaf *{ vector-effect:non-scaling-stroke; }
  :root[data-theme="light"] .splash-leaf{ stroke:#B8862E; }

  /* ---------- header icon buttons ---------- */
  .theme-btn, .menu-btn{
    position:fixed; top:calc(env(safe-area-inset-top,0px) + 6px); z-index:50; width:44px; height:44px;
    border:0; border-radius:0; background:none; color:var(--text); cursor:pointer; padding:0; place-items:center;
  }
  .theme-btn{ right:8px; display:grid; }
  .menu-btn{ left:8px; display:none; }
  body[data-view="home"] .menu-btn{ display:grid; }
  .theme-btn svg, .menu-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
  .theme-btn .i-sun{ display:var(--show-sun); }
  .theme-btn .i-moon{ display:var(--show-moon); }

  /* ---------- full-screen menu ---------- */
  .menu{position:fixed;inset:0;z-index:1000;background:var(--bg);color:var(--text);display:flex;flex-direction:column;padding:20px 24px 40px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(40px,env(safe-area-inset-bottom));overflow-y:auto;opacity:0;transition:opacity 200ms ease;}
  .menu[hidden]{display:none;}
  .menu a, .menu button{-webkit-tap-highlight-color:transparent;}
  .menu:focus, .menu a:focus:not(:focus-visible), .menu button:focus:not(:focus-visible), .menu-btn:focus:not(:focus-visible){outline:none;}
  .menu.is-open{opacity:1;}
  .menu__header{display:flex;justify-content:space-between;align-items:center;height:44px;}
  .menu__close{width:44px;height:44px;border:0;background:none;color:inherit;padding:0;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;}
  .menu__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
  .menu .theme-btn{position:static;}
  .menu__links{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--rule);}
  .menu__links a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule);font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:26px;line-height:1.1;color:var(--text);text-decoration:none;}
  .menu__footer{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .menu__footer svg{width:26px;height:26px;color:var(--sun);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  .menu__footer span{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;color:var(--text-soft);}
  body.menu-open{overflow:hidden;}
  @media (prefers-reduced-motion:reduce){.menu{transition:none;}}
  #viewAbout{ display:flex; flex-direction:column; flex:1; }
  #viewAbout[hidden]{ display:none !important; }
  .about-text{ margin:auto 0; padding:0 6px 56px; text-align:center; }
  .about-text p{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:22px; line-height:1.6; color:var(--about-ink); max-width:32ch; margin:0 auto 22px; }
  #viewAbout .back{ color:var(--text); }
  .about-text .divider{ margin:0 auto 28px; }
  .about-text p:last-of-type{ margin-bottom:0; }
  .about-mark{ display:block; width:58px; height:58px; margin:34px auto 0; fill:none; stroke:var(--sun); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; opacity:1; }
  .about-mark *{ vector-effect:non-scaling-stroke; }

  /* ---------- home ---------- */
  #viewHome{ text-align:center; padding:30px 0 28px; display:flex; flex-direction:column; justify-content:flex-end; flex:1; padding-right:4px; }
  #viewHome .tilewrap{ margin:43px 0 0; width:100%; }
  .pick{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; line-height:1.3; letter-spacing:0;
    color:var(--text-soft); margin:10px 0 0; text-transform:none; opacity:1;
  }
  .hd{ display:flex; justify-content:center; margin:14px 0 0; text-align:center;
    font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
  .hd button{ appearance:none; background:none; border:0; border-radius:0; padding:0 8px; min-height:44px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--label); cursor:pointer; }
  .hd button:active{ opacity:.7; }
  .gworld{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .tiles{ display:flex; flex-direction:column; gap:14px; text-align:left; }
  .tile{
    display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:152px; padding:24px;
    background:var(--surface); border:0; border-radius:0; text-decoration:none; color:var(--text); transition:opacity .15s;
  }
  .tile:active{ opacity:.8; }
  .tile .txt{ flex:1; min-width:0; padding:0; }
  .name{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:28px; line-height:1.1; letter-spacing:0; color:var(--text); }
  .count, .tag{
    display:inline-block; margin-top:10px; padding:0; border:0; opacity:1;
    font-family:'Jost',sans-serif; font-weight:400; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--label);
  }
  .tag{ color:var(--muted); }
  .blurb{ display:block; margin-top:8px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; line-height:1.3; color:var(--text-soft); text-wrap:balance; }
  .art{ display:block; flex:none; width:112px; height:auto; aspect-ratio:180/160; }
  .art .ln, .art .occ{ fill:none; stroke:var(--line-art); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .art .tint{ display:none; }
  .art .sun{ fill:var(--sun); stroke:none; }
  .art .lny{ fill:none; stroke:var(--sun); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .art .pl{ fill:var(--surface); }
  .soon-art .art .pl{ fill:var(--bg); }
  .art .dome, .art .ridge{ fill:none; }
  @media(max-width:360px){ .name{ font-size:24px; } .art{ width:92px; } }


  /* ---------- daily tangle ---------- */
  .dt-home{ margin:0 0 14px; text-align:left; }
  .tile.daily{ border:1px solid var(--sun); }
  .tile.daily .name{ font-size:30px; }
  .dt-cluster{ position:relative; width:104px; height:92px; flex:none; }
  .dt-cluster span{ position:absolute; width:28px; height:32px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--edge);
    font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; line-height:1; color:var(--text); }
  #viewDaily{ flex:1; display:flex; flex-direction:column; padding:0 8px 20px; }
  #viewDaily.kb{ padding-bottom:45vh; }
  .dt-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:32px; line-height:1.1; color:var(--text); margin:4px 0 0; }
  .dt-prog{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; color:var(--text-soft); margin-top:6px; min-height:20px; line-height:20px; font-variant-numeric:tabular-nums; }
  .dt-clue{ background:var(--surface); text-align:center; padding:18px 20px; margin-top:18px; scroll-margin-top:8px; }
  .dt-cl{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .dt-ct{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:26px; line-height:1.2; color:var(--text); margin:8px 0 6px; }
  .dt-len{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--text-soft); }
  .dt-slotswrap{ position:relative; margin-top:auto; text-align:center; cursor:text; }
  .dt-input{ position:absolute; left:50%; top:0; width:1px; height:1px; opacity:0; border:0; padding:0; margin:0; font-size:16px; background:transparent; color:transparent; caret-color:transparent; pointer-events:none; }
  .dt-rows{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .dt-row{ display:flex; gap:4px; justify-content:center; }
  .dt-slot{ height:42px; box-sizing:border-box; display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px; border-bottom:1px solid var(--rule);
    font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1.2; color:var(--text); }
  .dt-slot.on{ border-bottom:1.5px solid var(--text); }
  .dt-slot.next{ border-bottom:2px solid var(--sun); }
  .dt-slot.lock{ color:var(--sun); }
  .dt-rows.shake{ animation:dtShake .45s ease; }
  @keyframes dtShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
  @media (prefers-reduced-motion: reduce){ .dt-rows.shake{ animation:none; } }
  .dt-hint{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; line-height:20px; color:var(--muted); margin-top:14px; min-height:20px; }
  .dt-tiles{ margin-top:auto; padding-top:24px; display:grid; grid-template-columns:repeat(7,44px); gap:8px 5px; justify-content:center; }
  .dt-tile{ width:44px; height:50px; box-sizing:border-box; display:grid; place-items:center; padding:0; background:var(--surface); border:1px solid var(--edge); border-radius:0; cursor:pointer;
    font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1; color:var(--text); }
  .dt-tile:active{ opacity:.8; }
  .dt-tile.gone{ background:transparent; border:1px dashed var(--rule); cursor:default; }
  .dt-ctl{ display:flex; gap:8px; margin-top:20px; }
  .dt-ctl button.btn{ margin:0; width:auto; flex:1 1 0; min-width:0; padding:0 6px; background:transparent; color:var(--text); }
  .dt-ctl button.btn.wide{ flex:1.35 1 0; }
  .dt-ctl button.btn:disabled{ opacity:.4; }
  .dt-ctl .lc{ text-transform:none; letter-spacing:0; }
  .cm-result:empty{ display:none; }
  .cm-big{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:44px; line-height:1.05; color:var(--text); font-variant-numeric:tabular-nums; margin:4px 0 8px; }
  .cm-break{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.4; color:var(--text-soft); }
  .cm-fact{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.5; color:var(--text); margin:14px 0 0; }
  .cm-foot{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--muted); margin-top:16px; font-variant-numeric:tabular-nums; }
  .cm-big[hidden], .cm-break[hidden], .cm-fact[hidden], .cm-foot[hidden]{ display:none; }
  .cm-panel{ max-height:92vh; overflow-y:auto; }

  /* ---------- sub-page chrome ---------- */
  .back{ display:inline-flex; align-items:center; min-height:44px; padding:0; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; letter-spacing:0; color:var(--text); text-decoration:none; }
  .wtitle{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:34px; line-height:1.1; color:var(--text); margin:10px 0 6px; }
  .wsub{ margin:0 0 22px; }
  .gcard{
    display:flex; align-items:center; gap:20px; padding:24px; margin-bottom:14px; border:0; background:var(--surface);
    text-decoration:none; color:var(--text); transition:opacity .15s;
  }
  .gcard:active{ opacity:.8; }
  .gthumb{ width:76px; height:76px; flex:none; display:block; }
  .gthumb .ln{ fill:none; stroke:var(--line-art); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .gthumb .sun{ fill:var(--sun); stroke:none; }
  .gthumb .dash{ stroke-dasharray:3 3; opacity:.7; }
  .gname{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1.1; color:var(--text); }
  .gdesc{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); opacity:1; margin-top:6px; }
  .gnew{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--sun); margin-top:10px; }
  .gnew + .gbest{ margin-top:4px; }
  .gbest{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--label); margin-top:10px; }
  .chev{ display:none; }
  #viewSoon{ text-align:center; }
  .soon-art{ width:min(200px,56%); margin:26px auto 0; }
  .soon-art .art{ width:100%; }
  .soon-text{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-top:20px; }

  /* ---------- game header ---------- */
  #viewGame{ text-align:center; display:flex; flex-direction:column; flex:1; }
  #viewGame .back{ display:block; text-align:left; }
  .level-block{ margin-top:4px; }
  .level-num{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .level-title{ font-family:'Cormorant Garamond',serif; font-style:normal; font-weight:500; font-size:22px; line-height:1.2; color:var(--text); margin-top:4px; }
  #viewGame.is-puzzle .progress{ font-family:'Jost',sans-serif; font-size:14px; font-weight:300; color:var(--text-soft); margin:10px 0 16px; opacity:1; min-height:20px; }

  #viewWorld .back{ color:var(--text); }
  #viewWorld .wtitle{ color:var(--text); }
  #viewGame.is-puzzle .puzzle{ margin-top:0; }
  .progress{ font-size:13px; font-weight:300; margin:10px 0 16px; opacity:.75; min-height:18px; }

  /* ---------- matching games ---------- */
  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:480px; margin:0 auto; }
  .card{
    background:var(--surface); border-radius:0; overflow:hidden; cursor:pointer; text-align:center;
    box-shadow:none; border:0;
    transition:transform .12s, opacity .25s, box-shadow .15s;
    display:flex; flex-direction:column; min-height:88px; position:relative;
  }
  .card:active{ transform:scale(.96); }
  .card.photo img{ width:100%; height:100%; object-fit:cover; display:block; flex:1; }
  .photo-name{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:6px; background:rgba(0,0,0,0.25);
    color:#fff; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:15px;
    line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,0.6);
  }
  .card.text{ align-items:center; justify-content:center; padding:7px 6px; text-align:center; background:var(--textcard); }
  .card.text .label{ font-family:'Cormorant Garamond',serif; font-size:13.5px; font-weight:500; line-height:1.25; color:var(--textcard-fg); }
  /* selected: an overlay sits above the photo (an inset shadow would be hidden under it) */
  .card.selected::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border:3px solid #ECE8DF; background:rgba(20,24,21,.38); }
  .card.text.selected::after{ border-color:#33422C; background:rgba(51,66,44,.16); }
  .card.correct{ border-color:transparent; opacity:.4; cursor:default; }
  .card.photo.correct img{ opacity:1; }
  .card.correct .label{ color:var(--textcard-fg); font-weight:500; }
  .card.wrong{ animation:wriggle .5s ease-in-out; }
  /* ---------- memory cards (Match the Catch) ---------- */
  .mem-grid .card.mem{
    display:block; padding:0; margin:0; font:inherit; color:inherit; -webkit-appearance:none; appearance:none;
    background:transparent; aspect-ratio:1 / 1; min-height:0; overflow:visible; perspective:700px;
    -webkit-tap-highlight-color:transparent;
  }
  .mem-grid .card.mem.matched{ cursor:default; }
  .mem-grid .card.mem.matched:active{ transform:none; }
  .mem-in{ position:absolute; inset:0; display:block; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.1,.2,1); }
  .card.mem.flipped .mem-in{ transform:rotateY(180deg); }
  .mem-face{ position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  .mem-back{ background:var(--textcard); }
  .mem-back svg{ width:58px; height:auto; display:block; }
  .mem-back svg.full{ position:absolute; inset:0; width:100%; height:100%; }
  .mem-back .dot{ fill:var(--textcard-fg); opacity:.8; }
  .mem-back .ln{ fill:none; stroke:var(--textcard-fg); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.8; }
  .mem-front{ transform:rotateY(180deg); }
  .mem-front img{ display:block; width:100%; height:100%; object-fit:cover; }
  .mem-front .photo-name{ font-size:16px; opacity:0; transition:opacity .4s ease .2s; }
  .card.mem.matched .photo-name{ opacity:1; }
  .card.mem:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ .mem-in, .mem-front .photo-name{ transition:none; } }
  .mem-fact{ width:100%; box-sizing:border-box; max-width:330px; margin:10px auto 0; background:var(--surface); padding:10px 16px; min-height:92px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
  .mem-fact-l{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:22px; line-height:1.2; color:var(--text); margin-bottom:4px; }
  .mem-fact p{ font-family:'Jost',sans-serif; font-weight:300; font-size:14.5px; line-height:1.4; color:var(--text-soft); margin:0; }
  .mem-fact p.mem-fact-e{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--text-soft); }
  .mem-fact.in{ animation:memFactIn .45s ease both; }
  @keyframes memFactIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .mem-fact.in{ animation:none; } }
  .mem-credits{ margin:24px auto 0; max-width:480px; text-align:center; }
  .mem-credits summary{ display:inline-block; list-style:none; cursor:pointer; font-family:'Jost',sans-serif; font-weight:300; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; padding:10px 8px; }
  .mem-credits summary::-webkit-details-marker{ display:none; }
  .mem-credits summary:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
  #memCredits:not([open]) #memCreditList{ display:none; }
  #memCreditList p{ font-family:'Jost',sans-serif; font-weight:300; font-size:11px; line-height:1.6; color:var(--muted); margin:0; }
  #memCreditList a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
  @keyframes wriggle{
    0%,100%{ transform:translateX(0) rotate(0); } 15%{ transform:translateX(-7px) rotate(-2.5deg); }
    35%{ transform:translateX(7px) rotate(2.5deg); } 55%{ transform:translateX(-5px) rotate(-1.5deg); }
    75%{ transform:translateX(4px) rotate(1deg); }
  }
  @keyframes shake{
    0%,100%{transform:translateX(0);} 20%{transform:translateX(-9px);}
    40%{transform:translateX(8px);} 60%{transform:translateX(-6px);}
    80%{transform:translateX(5px);}
  }

  /* ---------- sliding puzzle ---------- */
  .puzzle{
    position:relative; width:100%; max-width:300px; margin:auto auto 0; aspect-ratio:375/597; flex:none;
    background:var(--surface); box-shadow:none; touch-action:none;
    user-select:none; -webkit-user-select:none;
  }
  .tile-p{
    position:absolute; width:33.3333%; height:33.3333%; cursor:grab;
    background-image:var(--pimg); background-repeat:no-repeat; background-size:300% 300%;
    box-shadow:inset 0 0 0 2px var(--cream);
    transition:left .16s ease, top .16s ease, transform .16s ease, opacity .6s ease, box-shadow .6s ease;
  }
  .tile-p.dragging{ transition:none; cursor:grabbing; z-index:2; }
  .puzzle.scrambling .tile-p{ transition:left .7s ease, top .7s ease, opacity .6s ease, box-shadow .6s ease; }
  .tile-p.blank{ opacity:0; pointer-events:none; }
  .puzzle.solved .tile-p{ cursor:default; box-shadow:none; }
  .puzzle.solved .tile-p.blank{ opacity:1; }
  .puzzle-caption{
    margin:12px 0 auto; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px;
    color:var(--text-soft); opacity:0; transition:opacity .6s ease; min-height:24px;
  }
  .puzzle-caption.show{ opacity:1; }

  /* ---------- win screen ---------- */
  /* ---------- this or that (Know Your Plants) ---------- */
  #tot{ text-align:center; }
  .tot-lab{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:4px 0 8px; }
  .tot-fact{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:23px; line-height:1.22; color:var(--text); margin:0 auto 16px; max-width:30ch; outline:none; }
  .tot-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tot-opt{ display:flex; flex-direction:column; padding:0; margin:0; background:transparent; border:1px solid var(--text); border-radius:0; color:var(--text); cursor:pointer; font:inherit; transition:opacity .35s ease, border-color .35s ease, box-shadow .35s ease; -webkit-tap-highlight-color:transparent; }
  .tot-opt:active:not(:disabled){ transform:scale(.99); }
  .tot-opt:disabled{ cursor:default; }
  /* the photo frame eases from tall (asking) to square (answer); the image keeps one focal point so it doesn't jump */
  .tot-ph{ display:block; width:100%; overflow:hidden; background:var(--surface); height:min(140px, calc((100vw - 42px) / 2)); transition:height .5s cubic-bezier(.4,0,.2,1); }
  #tot.asking .tot-ph{ height:clamp(190px, calc(100svh - 370px), 440px); }
  .tot-ph img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--sq, 50% 45%); }
  .tot-nm{ display:flex; align-items:center; justify-content:center; min-height:46px; padding:6px 8px; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:19px; line-height:1.1; transition:color .35s ease; }
  .tot-opt.is-right{ border-color:var(--sun); box-shadow:inset 0 0 0 1px var(--sun); }
  .tot-opt.is-right .tot-nm{ color:var(--sun); }
  .tot-opt.is-wrong{ opacity:.38; }
  .tot-opt.is-wrong .tot-nm{ text-decoration:line-through; }
  .tot-opt.is-other{ opacity:.55; }
  .tot-card{ margin-top:10px; padding:18px 20px; animation:totIn .45s cubic-bezier(.4,0,.2,1) .15s both; }
  @keyframes totIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  .tot-also{ color:var(--text); }
  @media (prefers-reduced-motion: reduce){ .tot-ph, .tot-opt, .tot-nm{ transition:none; } .tot-card{ animation:none; } }

  /* ---------- peak peek ---------- */
  #peak{ text-align:center; }
  .pk-frame{ position:relative; width:100%; height:clamp(240px,calc(100svh - 480px),520px); overflow:hidden; background:var(--puzzle-bg); }
  .pk-bg{ display:none; }
  #pkImg{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
  .pk-q{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; color:var(--text-soft); margin:16px 0 12px; }
  .pk-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .pk-opt{
    font-family:'Jost',sans-serif; font-size:13px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; height:auto; min-height:52px; padding:8px 8px;
    background:transparent; color:var(--text); border:1px solid var(--text); border-radius:0; cursor:pointer; transition:background .15s, opacity .2s;
  }
  .pk-opt:active:not(:disabled){ transform:scale(.99); }
  .pk-opt.wrong{ opacity:.38; text-decoration:line-through; animation:shake .4s; cursor:default; }
  .pk-opt.correct{ background:var(--text); border-color:var(--text); color:var(--bg); cursor:default; }
  .pk-opt:disabled:not(.wrong):not(.correct){ opacity:.55; cursor:default; }
  .pk-bar{ margin-top:2px; display:flex; justify-content:center; }
  .pk-hintbtn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; padding:0; background:none; border:0; border-radius:0; cursor:pointer; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); }
  .pk-hintbtn u{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
  .pk-hintbtn span{ font-weight:300; color:var(--muted); }
  .pk-hintbtn:disabled{ opacity:.45; cursor:default; }
  .pk-hints{ margin-top:6px; text-align:left; }
  .pk-hint{ margin-top:12px; padding:2px 0 2px 14px; border-left:1px solid var(--line-art); font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); }
  .pk-hint b{ display:block; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-bottom:4px; }
  .pk-reveal{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--text); margin-top:16px; }
  .pk-next{ margin:14px auto 0; max-width:260px; }
  .pk-card{ margin-top:10px; }
  .pk-credit{ margin-top:4px; }
  button.btn{
    display:flex; align-items:center; justify-content:center; width:100%; background:var(--text); color:var(--bg); border:1px solid var(--text); height:48px; min-height:48px; padding:0 20px; line-height:1.3;
    border-radius:0; font-family:'Jost',sans-serif; font-size:13px; font-weight:400; text-transform:uppercase; cursor:pointer; margin-bottom:12px; letter-spacing:.16em;
  }
  button.btn.ghost{ background:transparent; color:var(--text); border-color:var(--text); }
  button.btn:active{ transform:scale(.98); }
  /* ---------- switchback ---------- */
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  #viewSwitch{ text-align:center; display:flex; flex-direction:column; flex:1; }
  #viewSwitch[hidden]{ display:none !important; }
  #viewSwitch .back{ display:block; text-align:left; }
  #swIntro, #swPlay{ flex:1; display:flex; flex-direction:column; }
  #swIntro[hidden], #swPlay[hidden]{ display:none !important; }
  #swIntro{ justify-content:center; padding-bottom:48px; }
  .sw-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:34px; line-height:1.1; color:var(--text); margin:10px 0 6px; }
  .sw-rules{ margin:28px auto 32px; max-width:30ch; }
  .sw-rules p{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:0 0 12px; }
  .sw-begin{ max-width:260px; margin:0 auto; }
  #swPlay{ touch-action:none; -webkit-user-select:none; user-select:none; padding-bottom:20px; }
  .sw-stagename{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; line-height:1.3; color:var(--text-soft); margin-top:2px; }
  .sw-frame{ position:relative; margin:0 8px; }
  .sw-view{ position:relative; width:100%; height:360px; overflow:hidden; touch-action:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%); }
  .sw-svg{ position:absolute; left:0; top:0; width:100%; display:block; overflow:visible; transform-origin:0 0; transition:transform .25s ease-out; will-change:transform; }
  .sw-svg.zooming{ transition-duration:.4s; }
  .sw-reduce .sw-svg, .sw-reduce .sw-climber{ transition:none !important; }
  .sw-walls{ fill:none; stroke:var(--line-art); stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; opacity:1; vector-effect:non-scaling-stroke; }
  .sw-flag{ fill:none; stroke:var(--line-art); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .sw-trail{ fill:none; stroke:var(--sun); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:0.5 7; vector-effect:non-scaling-stroke; }
  .sw-climber{ transition:transform 60ms linear; }
  .sw-climber circle{ fill:var(--sun); }
  .sw-alt{ position:absolute; right:0; top:0; bottom:0; width:1px; background:var(--rule); pointer-events:none; }
  .sw-alt i{ position:absolute; left:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--sun); top:0; }
  .sw-stages{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:16px; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .sw-stages .cur{ color:var(--text); }
  .sw-stages .sep{ display:block; width:20px; height:1px; background:var(--rule); }
  .sw-look{ max-width:260px; margin:22px auto 0 !important; }
  button.btn:disabled{ opacity:.4; cursor:default; }
  .sw-cap{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--muted); margin-top:4px; }
  .cairn{ display:block; fill:none; stroke-width:1.25; stroke-linejoin:round; }
  .cairn.on{ fill:var(--sun); stroke:var(--sun); }
  .cairn.off{ fill:none; stroke:var(--rule); }


  /* ---------- tall tales ---------- */
  #viewTall{ text-align:center; display:flex; flex-direction:column; flex:1; padding-bottom:calc(28px + max(env(safe-area-inset-bottom, 0px), 72px)); }   /* room to scroll the buttons clear of the browser's bottom bar */
  #viewTall[hidden]{ display:none !important; }
  .tt-head{ display:flex; align-items:center; }
  .dr-credit a, .ts-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .new-lab{ margin-left:10px; font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sun); }
  .tt-prog{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; color:var(--text-soft); margin-top:6px; min-height:20px; line-height:20px; }
  .tt-photo{ position:relative; width:100%; height:340px; margin:12px 0 16px; overflow:hidden; border-radius:0; }
  .tt-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 49%; display:block; }
  .tt-trail{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  /* trail colors are fixed: the photo does not change with the theme */
  .tt-u{ fill:none; stroke:rgba(20,24,21,.55); stroke-linecap:round; stroke-linejoin:round; }
  .tt-seg{ fill:none; stroke:rgba(236,232,223,.8); stroke-width:1.25; stroke-dasharray:4 4; transition:opacity .3s; }
  .tt-seg.off{ opacity:0; }
  .tt-segd{ fill:none; stroke:#D9B967; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:.5 6; opacity:0; transition:opacity .3s; }
  .tt-segd.on{ opacity:1; }
  .tt-dot{ fill:rgba(20,24,21,.65); stroke:rgba(236,232,223,.85); stroke-width:1.25; transition:fill .3s, stroke .3s; }
  .tt-dot.done, .tt-dot.cur{ fill:#D9B967; stroke:#141814; stroke-width:1.5; }
  .tt-ring{ transition:transform .3s ease; }
  .tt-ring circle{ fill:none; stroke:#D9B967; stroke-width:1.25; }
  .tt-ring .tt-u{ stroke-width:3.75; }
  .tt-flag{ fill:none; stroke:#ECE8DF; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .tt-flag-u{ fill:none; stroke:rgba(20,24,21,.55); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
  .tt-card{ background:var(--surface); padding:28px 24px; min-height:188px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .tt-label{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:0 0 14px; }
  .tt-statement{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:27px; line-height:1.2; color:var(--text); margin:0; }
  .tt-rhead{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:25px; line-height:1.15; color:var(--text); margin:0 0 10px; outline:none; }
  .tt-exp{ font-family:'Jost',sans-serif; font-weight:300; font-size:16px; line-height:1.5; color:var(--text-soft); margin:0 0 6px; }
  .tt-more{ background:none; border:0; border-radius:0; padding:0 6px; min-height:44px; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; }
  .tt-card .tt-next{ margin:6px 0 0; }
  .tt-answers{ margin-top:12px; display:grid; gap:12px; }
  .tt-answers:empty{ display:none; }
  .tt-answers.two{ grid-template-columns:1fr 1fr; }
  .tt-btn{ height:48px; min-height:48px; padding:0 12px; font-family:'Jost',sans-serif; font-weight:400; font-size:13px; letter-spacing:.16em; text-transform:uppercase; background:transparent; color:var(--text); border:1px solid var(--text); border-radius:0; cursor:pointer; transition:background .15s, opacity .2s; }
  .tt-btn:active:not(:disabled){ transform:scale(.99); }
  .tt-btn.opt{ text-transform:none; letter-spacing:.02em; font-size:15px; line-height:1.3; padding:0 16px; }
  .tt-btn.correct{ background:var(--text); color:var(--bg); cursor:default; }
  .tt-btn.dim{ opacity:.4; cursor:default; }
  .tt-answers .tt-next{ margin:0; }
  @media (prefers-reduced-motion: reduce){
    .tt-ring, .tt-dot, .tt-seg, .tt-segd{ transition:none; }
    .ts.show .ts-panel{ animation-name:cmFadeOnly; }
  }
  /* bottom sheet */
  .ts{ position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; z-index:110; }
  .ts.show{ display:flex; }
  .ts-backdrop{ position:absolute; inset:0; background:var(--bg); opacity:.85; }
  .ts.show .ts-backdrop{ animation:cmBackdrop .25s ease-out both; }
  .ts-panel{ position:relative; width:100%; max-width:430px; max-height:86vh; overflow-y:auto; background:var(--surface); padding:12px 24px calc(24px + env(safe-area-inset-bottom, 0px)); text-align:left; box-shadow:0 -8px 32px rgba(0,0,0,.12); }
  .ts.show .ts-panel{ animation:tsRise .28s ease-out both; }
  @keyframes tsRise{ from{ transform:translateY(100%); } to{ transform:none; } }
  .ts-grab{ width:36px; height:3px; background:var(--rule); margin:0 auto 20px; }
  .ts-title{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:28px; line-height:1.15; color:var(--text); margin:0 0 12px; outline:none; }
  .ts-text{ font-family:'Jost',sans-serif; font-weight:300; font-size:16px; line-height:1.55; color:var(--text-soft); margin:0 0 24px; }
  .ts-close{ margin:0 !important; }

  /* ---------- drift ---------- */
  body[data-view="drift"]{ transition:background-color .6s ease; }
  body[data-hab="reef"]{ --bg:#1B2321; --cream:#1B2321; }
  body[data-hab="lagoon"]{ --bg:#1C2420; --cream:#1C2420; }
  body[data-hab="blue"]{ --bg:#1A2027; --cream:#1A2027; }
  body[data-hab="cold"]{ --bg:#1E2225; --cream:#1E2225; }
  :root[data-theme="light"] body[data-hab="reef"]{ --bg:#E6ECE6; --cream:#E6ECE6; }
  :root[data-theme="light"] body[data-hab="lagoon"]{ --bg:#E7ECE2; --cream:#E7ECE2; }
  :root[data-theme="light"] body[data-hab="blue"]{ --bg:#E4E9EC; --cream:#E4E9EC; }
  :root[data-theme="light"] body[data-hab="cold"]{ --bg:#E8EAEC; --cream:#E8EAEC; }
  #viewDrift{ text-align:center; display:flex; flex-direction:column; flex:1; padding-bottom:28px; }
  #viewDrift[hidden]{ display:none !important; }
  #viewDrift .back{ align-self:flex-start; }
  .dr-prog{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; color:var(--text-soft); margin-top:6px; min-height:20px; line-height:20px; }
  .dr-route{ display:block; width:100%; height:44px; margin:14px 0 0; overflow:visible; }
  .dr-seg{ fill:none; stroke:var(--rule); stroke-width:1.25; stroke-dasharray:4 4; transition:opacity .3s; }
  .dr-seg.off{ opacity:0; }
  .dr-segd{ fill:none; stroke:var(--sun); stroke-width:2; stroke-linecap:round; stroke-dasharray:.5 6; opacity:0; transition:opacity .3s; }
  .dr-segd.on{ opacity:1; }
  .dr-dot{ fill:var(--bg); stroke:var(--rule); stroke-width:1.25; transition:fill .3s, stroke .3s; }
  .dr-dot.done, .dr-dot.cur{ fill:var(--sun); stroke:var(--sun); }
  .dr-ring{ transition:transform .4s ease; }
  .dr-ring circle{ fill:none; stroke:var(--sun); stroke-width:1.25; }
  .dr-stop{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.12em; fill:var(--muted); text-anchor:middle; transition:fill .3s; }
  .dr-stop.done{ fill:var(--muted); }
  .dr-stop.cur{ fill:var(--text); }
  .dr-air{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .dr-airlab{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .dr-track{ flex:1; height:4px; background:var(--rule); position:relative; overflow:hidden; }
  .dr-track i{ position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--sun); transition:width .3s ease; }
  .dr-pct{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--text-soft); min-width:36px; text-align:right; }
  .dr-photo{ width:100%; height:228px; margin-top:14px; background:var(--surface); overflow:hidden; border-radius:0; }
  .dr-photo img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }
  .dr-credit{ text-align:right; font-family:'Jost',sans-serif; font-weight:300; font-size:11px; color:var(--muted); margin-top:6px; }
  .dr-q{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:24px; line-height:1.2; color:var(--text); margin:16px 0 0; outline:none; }
  .dr-lab{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-top:20px; }
  .dr-lab + .dr-q{ margin-top:8px; }
  .dr-clue{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:8px auto 0; max-width:34ch; outline:none; }
  .dr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .dr-opt{ display:flex; align-items:center; justify-content:center; min-height:48px; padding:4px 8px; background:transparent; color:var(--text); border:1px solid var(--text); border-radius:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:19px; line-height:1.1; text-align:center; cursor:pointer; }
  .dr-opt:active{ transform:scale(.99); }
  .dr-clueb{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin-top:6px; padding:0; background:none; border:0; border-radius:0; cursor:pointer; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); }
  .dr-clueb u{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
  .dr-clueb span{ font-weight:300; color:var(--muted); }
  .dr-card{ background:var(--surface); padding:22px; margin-top:12px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .dr-label{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:0 0 12px; }
  .dr-rhead{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:26px; line-height:1.15; color:var(--text); margin:0 0 10px; outline:none; }
  .dr-exp{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--text-soft); margin:0 0 14px; }
  .dr-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
  .dr-row.solo{ justify-content:center; }
  .dr-more{ background:none; border:0; border-radius:0; padding:0 4px 0 0; min-height:44px; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; text-align:left; }
  .dr-row button.btn.dr-swim{ width:auto; min-width:140px; margin:0; padding:0 22px; flex:none; }
  .pearl{ display:block; fill:none; stroke-width:1.25; }
  .pearl.on{ fill:var(--sun); stroke:var(--sun); }
  .pearl.off{ stroke:var(--rule); }
  #ds .ts-photo{ display:block; width:100%; aspect-ratio:16/10; margin:0 0 6px; background:var(--bg); overflow:hidden; }
  #ds .ts-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
  .ts-credit{ text-align:right; font-family:'Jost',sans-serif; font-weight:300; font-size:11px; color:var(--muted); margin:0 0 14px; }
  @media (prefers-reduced-motion: reduce){
    body[data-view="drift"]{ transition:none; }
    .dr-ring, .dr-dot, .dr-seg, .dr-segd, .dr-stop, .dr-track i{ transition:none; }
    #ds.show .ts-panel{ animation-name:cmFadeOnly; }
  }

  /* ---------- piece by peak ---------- */
  #viewPbp{ text-align:center; display:flex; flex-direction:column; flex:1; padding-bottom:calc(28px + max(env(safe-area-inset-bottom, 0px), 72px)); }   /* room to scroll the buttons clear of the browser's bottom bar */
  #viewPbp[hidden]{ display:none !important; }
  #viewPbp .back{ align-self:flex-start; }
  #pbIntro, #pbPlay, #pbFin{ display:flex; flex-direction:column; }
  .pb-tag{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; line-height:1.3; color:var(--text-soft); margin:2px 0 0; }
  .pb-photo{ display:block; width:100%; height:auto; border-radius:0; margin:20px auto 0; }
  .pb-body{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:20px auto 24px; max-width:30ch; }
  #pbIntro .btn{ max-width:260px; margin:0 auto; }
  .pb-prog{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; color:var(--text-soft); margin-top:6px; min-height:20px; line-height:20px; }
  .pb-stage{ position:relative; width:100%; margin:18px auto 0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }   /* the page scrolls from the board and tray; only the pieces capture touch */
  .pb-board{ position:relative; width:100%; background:var(--surface); border-radius:0; }
  .pb-trayhead{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:16px; min-height:44px; transition:opacity .4s; }
  .pb-more{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .pb-arrow{ background:none; border:0; border-radius:0; width:44px; height:44px; padding:0; font-family:'Jost',sans-serif; font-weight:300; font-size:26px; line-height:1; color:var(--text); cursor:pointer; }
  .pb-arrow:disabled{ opacity:.3; cursor:default; }
  .pb-more{ min-width:120px; text-align:center; }
  .pb-link{ background:none; border:0; border-radius:0; padding:0; min-height:44px; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); cursor:pointer; }
  .pb-tray{ position:relative; width:100%; margin-top:8px; transition:opacity .4s; }
  .pb-layer{ position:absolute; inset:0; pointer-events:none; }
  .pb-btns{ display:flex; flex-direction:column; align-items:center; width:100%; margin-top:20px; transition:opacity .4s; }
  .pb-btns > .tt-btn{ width:min(220px, 62%); }
  #pbPeekBtn{ display:none !important; }
  .pb-help{ background:none; border:0; border-radius:0; min-height:44px; padding:0 12px; margin-top:6px; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; }
  .pb-offer{ width:100%; margin-top:14px; }
  .pb-offer p{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:0 auto 16px; max-width:32ch; outline:none; }
  .pb-offer-btns{ display:flex; gap:12px; }
  .pb-offer-btns .tt-btn, .pb-offer-btns .btn{ flex:1 1 0; width:auto; margin:0; }
  .tt-btn:disabled.zero{ opacity:.4; cursor:default; }
  .pb-stage.done .pb-trayhead, .pb-stage.done .pb-tray, .pb-btns.done{ opacity:0; pointer-events:none; }
  .pbp{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; transform-origin:50% 50%; outline:none; touch-action:none; }
  .pbp.settle{ transition:transform .12s ease-out; }
  .pbp .sh{ display:none; fill:rgba(0,0,0,.18); }
  .pbp.tray .sh{ display:block; transform:translate(1.5px,2.5px); }
  .pbp.held .sh, .pbp.lift .sh{ display:block; fill:rgba(0,0,0,.3); transform:translate(3px,6px); }
  .pbp .ol{ fill:transparent; pointer-events:all; cursor:grab; stroke:rgba(0,0,0,.35); stroke-width:.75; stroke-linejoin:round; }
  .pbp.tray .ol{ stroke:rgba(236,232,223,.55); }
  .pbp.held .ol{ cursor:grabbing; }
  .pbp.locked .ol{ pointer-events:none; }
  .pbp.sel .ol, .pbp:focus-visible .ol{ stroke:var(--sun); stroke-width:1.5; }
  .pb-stage.done .pbp .ol{ opacity:0; transition:opacity .6s; }
  .pb-cursor{ position:absolute; z-index:140; pointer-events:none; outline:1.5px solid var(--sun); outline-offset:-1.5px; }
  .pb-peek{ position:absolute; z-index:150; opacity:0; pointer-events:none; transition:opacity .2s; overflow:hidden; background:var(--surface); }
  .pb-peek.on{ opacity:1; pointer-events:auto; cursor:pointer; }
  .pb-peek img{ display:block; width:100%; height:100%; }
  .pb-credit{ text-align:right; font-family:'Jost',sans-serif; font-weight:300; font-size:11px; color:var(--muted); margin-top:6px; }
  .pb-fact{ background:var(--surface); padding:22px; margin-top:14px; text-align:left; display:flex; flex-direction:column; gap:12px; }
  .pb-fact .pb-factlab{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .pb-fact h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:28px; line-height:1.15; color:var(--text); margin:0; }
  .pb-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .pb-facts li{ display:flex; gap:12px; align-items:flex-start; }
  .pb-facts i{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--sun); margin-top:.65em; }
  .pb-facts span{ font-family:'Jost',sans-serif; font-weight:300; font-size:16px; line-height:1.5; color:var(--text-soft); }
  .pb-ded{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; line-height:1.3; color:var(--text-soft); margin:22px auto 0; max-width:26ch; text-align:center; }
  .pb-ded[hidden]{ display:none; }
  #pbDone{ max-width:260px; margin:24px auto 0; }
  @media (prefers-reduced-motion: reduce){ .pb-peek, .pb-trayhead, .pb-tray, .pb-btns, .pbp .ol{ transition:none !important; } }

  /* ---------- shared complete pop-up ---------- */
  .cm{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:24px; z-index:100; }
  .cm.show{ display:flex; }
  .cm-backdrop{ position:absolute; inset:0; background:var(--bg); opacity:.85; }
  .cm-panel{ position:relative; width:100%; max-width:360px; padding:32px 28px 28px; text-align:center; background:var(--surface); border:0; border-radius:0; box-shadow:0 8px 32px rgba(0,0,0,.12); }
  .cm.show .cm-backdrop{ animation:cmBackdrop .25s ease-out both; }
  .cm.show .cm-panel{ animation:cmRise .3s ease-out both; }
  @keyframes cmBackdrop{ from{ opacity:0; } to{ opacity:.85; } }
  @keyframes cmRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  @keyframes cmFadeOnly{ from{ opacity:0; } to{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .cm.show .cm-panel{ animation-name:cmFadeOnly; } }
  .cm-label{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:0 0 12px; }
  .cm-title{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:30px; line-height:1.1; color:var(--text); margin:0 0 10px; outline:none; }
  .cm-result{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:0; }
  .cm-rating{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .cm-rating[hidden], .cm-best[hidden]{ display:none; }
  .cm-best{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-top:14px; }
  .cm-rule{ width:28px; height:1px; background:var(--rule); margin:24px auto; }
  .cm-btns{ display:flex; gap:12px; }
  .cm-btn{ flex:1 1 0; min-width:0; height:48px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--text); border-radius:0; cursor:pointer;
    font-family:'Jost',sans-serif; font-weight:400; font-size:13px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; }
  .cm-btn:active{ opacity:.8; }
  .cm-secondary{ background:transparent; color:var(--text); }
  .cm-primary{ background:var(--text); color:var(--bg); }
  .cm-btn svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
  .cm-toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:130; padding:12px 20px; background:var(--surface); color:var(--text);
    border-radius:0; box-shadow:0 8px 32px rgba(0,0,0,.12); font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.3; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .cm-toast.show{ opacity:1; }
  /* ---------- seo text: real paragraphs under each game ---------- */
  h1.level-title{ margin:4px 0 0; }
  h1.wtitle{ margin:10px 0 6px; }
  /* ---------- footer links + privacy page ---------- */
  .site-foot{ display:none; justify-content:center; align-items:center; gap:0; padding:4px 0 max(20px,env(safe-area-inset-bottom)); }
  body[data-view="home"] .site-foot{ display:flex; }
  .site-foot a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; font-family:'Jost',sans-serif; font-weight:300; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; opacity:.8; }
  .site-foot a:active{ opacity:.5; }
  #viewPrivacy{ display:flex; flex-direction:column; flex:1; padding:0 8px; }
  #viewPrivacy[hidden]{ display:none !important; }
  #viewPrivacy .back{ margin-left:-8px; align-self:flex-start; }
  .pv-text{ margin-top:20px; padding-bottom:40px; }
  .pv-text p{ margin:0 0 16px; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--text-soft); }
  .pv-text h2{ margin:28px 0 8px; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .pv-text a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule); }
  .pv-text .pv-date{ margin:0 0 20px; font-size:13px; color:var(--muted); }
  .pv-list{ list-style:none; margin:0 0 16px; padding:0; }
  .pv-list li{ position:relative; margin:0 0 12px; padding-left:18px; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--text-soft); }
  .pv-list li::before{ content:'\2022'; position:absolute; left:2px; top:0; color:var(--muted); }
  .pv-list b{ font-weight:400; color:var(--text); }
  /* ---------- contact page ---------- */
  #viewContact{ display:flex; flex-direction:column; flex:1; padding:0 8px; }
  #viewContact[hidden]{ display:none !important; }
  #viewContact .back{ margin-left:-8px; align-self:flex-start; }
  #viewContact .wsub{ margin-bottom:0; }
  #contactBody{ margin-top:36px; }
  .cf-field{ margin:0 0 26px; }
  .cf-field label{ display:block; margin:0 0 4px; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .cf-field label .cf-hint{ font-weight:300; font-size:13px; letter-spacing:0; text-transform:none; color:var(--muted); }
  .cf-field input, .cf-field textarea{ display:block; width:100%; margin:0; background:transparent; color:var(--text); font-family:'Jost',sans-serif; font-weight:300; font-size:16px; line-height:1.5; border-radius:0; -webkit-appearance:none; appearance:none; outline:none; }
  .cf-field input{ height:44px; padding:0; border:0; border-bottom:1px solid var(--rule); }
  .cf-field textarea{ padding:12px; border:1px solid var(--rule); resize:vertical; margin-top:8px; }
  .cf-field input:focus, .cf-field textarea:focus{ border-color:var(--text); }
  .cf-field input:-webkit-autofill{ -webkit-text-fill-color:var(--text); transition:background-color 9999s ease-out; }
  #contactForm button.btn{ margin-bottom:0; }
  .cf-err{ margin:16px 0 0; font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.5; color:var(--text-soft); }
  #viewContact.is-sent .wtitle, #viewContact.is-sent .wsub, #viewContact.is-sent .cf-foot{ display:none; }
  #viewContact.is-sent #contactBody{ margin:0; flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:12vh; }
  .cf-thanks{ text-align:center; }
  .cf-thanks h2{ margin:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:30px; line-height:1.2; color:var(--text); outline:none; }
  .cf-thanks p{ margin:10px 0 0; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--text-soft); }
  .cf-foot{ margin:auto 0 0; padding-top:48px; text-align:center; font-family:'Jost',sans-serif; font-weight:300; font-size:13px; line-height:1.5; color:var(--muted); }

  /* ---------- games index page ---------- */
  #viewGames{ padding:0 8px; }
  #viewGames .back{ margin-left:-8px; }
  .gx-sec{ margin:0; }
  .gx-h{ display:flex; align-items:center; gap:12px; margin:30px 0 22px; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .gx-ico{ flex:none; display:block; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
  .gx-ico-botanical{ color:var(--botanical); } .gx-ico-mountain{ color:var(--mountain); } .gx-ico-underwater{ color:var(--underwater); }
  .gx-div{ width:28px; height:1px; background:var(--rule); margin:8px 0 0; }
  .gx-game{ margin:0 0 32px; scroll-margin-top:24px; }
  .gx-name{ margin:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1.1; color:var(--text); }
  .gx-text{ margin:8px 0 0; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--text-soft); }
  .gx-play{ display:inline-flex; align-items:center; min-height:44px; margin-top:2px; padding-right:16px; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; line-height:1.2; color:var(--text); text-decoration:none; }
  .gx-play:active{ opacity:.6; }

  /* ---------- star hop ---------- */
  #viewStar{ display:flex; flex-direction:column; flex:1; }
  #viewStar[hidden], #shStart[hidden], #shPlay[hidden]{ display:none; }
  #shStart{ display:flex; flex-direction:column; flex:1; }
  .sh-top{ display:flex; align-items:center; }
  .sh-title{ margin-top:6px; }
  .sh-h1{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:32px; line-height:1.1; color:var(--text); margin:6px 0 4px; }
  .sh-sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--text-soft); margin:0; }
  .sh-lab{ font-family:'Jost',sans-serif; font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-bottom:10px; }
  .sh-rows{ display:flex; flex-direction:column; gap:8px; }
  .sh-row{ display:flex; align-items:center; gap:14px; width:100%; height:64px; padding:0 14px 0 12px; background:var(--surface); border:1px solid transparent; border-radius:0; color:var(--text); text-align:left; cursor:pointer; font-family:'Jost',sans-serif; }
  .sh-row.on{ border-color:var(--sun); }
  .sh-row svg{ flex:none; display:block; }
  .sh-sn{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .sh-sn b{ font-weight:400; font-size:15px; }
  .sh-sn i{ font-style:normal; font-weight:300; font-size:12.5px; color:var(--muted); line-height:1.3; }
  .sh-best{ flex:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); font-variant-numeric:tabular-nums; }
  .sh-seasons{ display:flex; border-bottom:1px solid var(--rule); }
  .sh-season{ flex:1; background:none; border:0; border-radius:0; padding:10px 0 11px; margin-bottom:-1px; color:var(--text); font-family:'Jost',sans-serif; font-size:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; min-height:48px; }
  .sh-season.on{ border-bottom:2px solid var(--sun); }
  .sh-season:disabled{ color:var(--muted); cursor:default; }
  .sh-season em{ font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-top:3px; min-height:11px; }
  .sh-season .now{ color:var(--sun); } .sh-season .soon{ color:var(--muted); }
  .sh-route5{ list-style:none; display:flex; justify-content:space-between; position:relative; margin:26px 0 22px; padding:0; }
  .sh-route5:before{ content:""; position:absolute; left:10%; right:10%; top:5px; border-top:1.25px dashed var(--rule); }
  .sh-route5 li{ position:relative; width:20%; text-align:center; font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:0; line-height:1.25; color:var(--text-soft); }
  .sh-route5 i{ display:block; width:10px; height:10px; border-radius:50%; background:var(--sun); margin:0 auto 8px; }
  .sh-note{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--muted); margin:0; line-height:1.45; }
  .sh-bottom{ margin-top:auto; padding-top:28px; }
  .sh-over{ display:block; margin:2px auto 14px; min-height:44px; background:none; border:0; color:var(--text-soft); font-family:'Jost',sans-serif; font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .sh-about{ text-align:center; font-family:'Jost',sans-serif; font-weight:300; font-size:12.5px; color:var(--muted); }
  /* play */
  #shPlay{ flex:1; flex-direction:column; display:flex; }
  .sh-route{ display:block; width:342px; max-width:100%; height:44px; margin:2px auto 8px; overflow:visible; }
  .sh-skywrap{ margin:0 -16px; height:clamp(300px, calc(100dvh - 299px), 700px); background:#161B18; position:relative; touch-action:manipulation; }
  #shSky{ display:block; width:100%; height:100%; -webkit-tap-highlight-color:transparent; }
  .sh-hit{ cursor:pointer; outline:none; }
  .sh-hit:focus{ stroke:#D9B967; stroke-width:1.6; }
  .sh-hit:focus:not(:focus-visible){ stroke:none; }
  .sh-ring.shake{ animation:shShake .32s linear; }
  @keyframes shShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
  .sh-pulse{ animation:shPulse .6s ease-out; transform-box:fill-box; transform-origin:center; }
  @keyframes shPulse{ 0%{ transform:scale(.8); opacity:1; } 100%{ transform:scale(5); opacity:0; } }
  .sh-wrong{ animation:shFade .7s ease-out forwards; }
  @keyframes shFade{ from{ opacity:1; } to{ opacity:0; } }
  .sh-txt{ display:flex; align-items:center; justify-content:center; min-height:71px; padding:2px 28px 10px; text-align:center; text-wrap:balance; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:23px; line-height:1.28; color:var(--text); }
  .sh-compass{ position:absolute; right:12px; bottom:10px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.08em; color:#8D9384; pointer-events:none; opacity:0; transition:opacity .4s; }
  .sh-compass.on{ opacity:1; }
  .sh-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:84px; box-sizing:border-box; margin:0; padding:0 4px; }
  .sh-dots{ display:flex; gap:6px; align-items:center; justify-content:flex-end; flex:1; padding-right:4px; }
  .sh-dots i{ width:7px; height:7px; border-radius:50%; border:1.25px solid var(--rule); box-sizing:border-box; }
  .sh-dots i.on{ background:var(--sun); border-color:var(--sun); }
  .sh-show{ display:block; margin:0; min-height:44px; background:none; border:0; color:var(--muted); font-family:'Jost',sans-serif; font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .sh-show:disabled{ opacity:.45; cursor:default; }
  .shstar{ display:block; fill:none; stroke-width:1.25; stroke-linejoin:round; }
  .shstar.on{ fill:var(--sun); stroke:var(--sun); }
  .shstar.off{ fill:none; stroke:var(--rule); }
  .gx-ico-cosmic{ color:var(--text); }
  @media (prefers-reduced-motion:reduce){ .sh-ring.shake,.sh-pulse,.sh-wrong{ animation:none; } .sh-ov,.sh-compass{ transition:none; } }
  .sh-seasoncard{ position:relative; padding:0; }
  .sh-seasoncard h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; line-height:1.1; margin:0; color:var(--text); }
  .sh-seasoncard p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; line-height:1.35; color:var(--text-soft); margin:6px 0 0; }
  .sh-now{ position:absolute; top:6px; right:0; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sun); }
  .sh-soonnote{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; color:var(--muted); margin:10px 0 14px; }
  .sh-seasons2{ margin-top:2px; }
  .sh-s{ padding:14px 0; border-top:1px solid var(--rule); }
  .sh-s:first-child{ border-top:0; padding-top:4px; }
  .sh-sh{ display:flex; align-items:baseline; justify-content:space-between; }
  .sh-s h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; line-height:1.1; margin:0; color:var(--text); }
  .sh-s p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; line-height:1.35; color:var(--text-soft); margin:5px 0 0; }
  .sh-s em{ font-style:normal; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
  .sh-s em.now{ color:var(--sun); } .sh-s em.soon{ color:var(--muted); }
  .sh-s.soon h2, .sh-s.soon p{ color:var(--muted); }
  .sh-bestline{ text-align:center; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:-2px 0 12px; }
  .sh-beat{ animation:shBeat 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes shBeat{ 0%,100%{ transform:scale(.85); opacity:.5; } 50%{ transform:scale(1.35); opacity:1; } }
  @media (prefers-reduced-motion:reduce){ .sh-beat{ animation:none; } }
  .sh-srow{ cursor:default; height:auto; min-height:64px; padding-top:8px; padding-bottom:8px; }
  .sh-srow.soon svg{ filter:brightness(.6); }
  .sh-srow.soon .sh-sn b, .sh-srow.soon .sh-sn i{ color:var(--muted); }
  .sh-tagr{ flex:none; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
  .sh-tagr.now{ color:var(--sun); } .sh-tagr.soon{ color:var(--muted); }
  .sh-srow.soon .sh-sn i{ opacity:.85; }
  .sh-tl{ position:relative; margin-top:8px; padding-left:34px; }
  .sh-tl:before{ content:""; position:absolute; left:9px; top:12px; bottom:26px; border-left:1.25px dashed var(--rule); }
  .sh-it{ position:relative; padding:0 0 26px; }
  .sh-it i{ position:absolute; left:-30px; top:8px; width:10px; height:10px; border-radius:50%; border:1.25px solid var(--rule); background:var(--bg); }
  .sh-it.on i{ background:var(--sun); border-color:var(--sun); box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--sun); }
  .sh-nm{ display:flex; justify-content:space-between; align-items:baseline; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; line-height:1.1; color:var(--text); }
  .sh-nm em{ font-style:normal; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
  .sh-nm em.now{ color:var(--sun); } .sh-nm em.soon{ color:var(--muted); }
  .sh-it p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; line-height:1.35; color:var(--text-soft); margin:4px 0 0; }
  .sh-it.off .sh-nm, .sh-it.off p{ color:var(--muted); }

  /* quieter button for Star Hop: outlined in the sage line colour instead of solid cream */
  button.btn.quiet{ background:transparent; color:var(--text); border:1.25px solid var(--line-art); }
  button.btn.quiet:active{ background:rgba(185,194,164,.12); }
  :root[data-theme="light"] button.btn.quiet:active{ background:rgba(111,127,98,.12); }
  .sh-go{ width:100%; max-width:260px; margin:0 auto !important; }
  .sh-bar[data-mode="intro"] #shShow, .sh-bar[data-mode="intro"] #shDots{ display:none; }
  .sh-bar:not([data-mode="intro"]) .sh-go{ display:none; }
  .sh-bar[data-mode="glide"] > *, .sh-bar:not([data-mode="wait"]) > .sh-tap{ display:none; }
  .sh-bar[data-mode="wait"] > *:not(.sh-tap){ display:none; }
  .sh-tap{ margin:0 auto; font:500 11px Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line, currentColor); padding-bottom:3px; animation:shTapIn .9s ease both; }
  @keyframes shTapIn{ from{ opacity:0 } to{ opacity:1 } }
  @media (prefers-reduced-motion:reduce){ .sh-tap{ animation:none; } }
  .cm[data-game="starhop"] .cm-primary{ background:transparent; color:var(--text); border-color:var(--line-art); }
  .cm[data-game="starhop"] .cm-secondary{ border-color:var(--rule); color:var(--text-soft); }
  @media (max-width:375px){ .sh-txt{ font-size:20.5px; padding:2px 16px 10px; } }

  /* season list: outlined cards, no timeline */
  .sh-tl{ padding-left:0; margin-top:14px; } .sh-tl:before{ display:none; }
  .sh-it{ padding:0 16px 24px; }
  .sh-it.on{ position:relative; border:1.25px solid var(--sun); padding:16px; margin:0 0 24px; }
  .sh-r{ display:flex; align-items:baseline; gap:10px; }
  .sh-it .sh-chev{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1; color:var(--sun); position:relative; top:2px; }
  .sh-cover{ position:absolute; inset:0; width:100%; height:100%; background:none; border:0; padding:0; cursor:pointer; }
  .sh-cover:focus-visible{ outline:2px solid var(--sun); outline-offset:3px; }
  .sh-prog{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; min-height:24px; }
  .sh-prog .d{ display:flex; gap:7px; } .sh-prog .d b{ width:8px; height:8px; border-radius:50%; border:1.25px solid var(--muted); box-sizing:border-box; } .sh-prog .d b.f{ background:var(--sun); border-color:var(--sun); }
  .sh-prog .st{ font-size:15px; letter-spacing:3px; color:var(--sun); } .sh-prog .st u{ text-decoration:none; color:var(--rule); }
  .sh-it.on .sh-over{ position:relative; z-index:1; margin:0; padding:6px 0 6px 14px; min-height:36px; font-size:12.5px; }


  .grid.mem-grid{ max-width:330px; }

  /* ---------- field journal ---------- */
  #viewJournal{ padding-bottom:28px; }
  .fj-head{ text-align:center; margin-top:18px; }
  .fj-lab, .fj-cl, .fj-wc{ font-family:'Jost',sans-serif; font-weight:400; text-transform:uppercase; color:var(--label); }
  .fj-lab{ font-size:12px; letter-spacing:.16em; }
  .fj-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:40px; line-height:1.1; color:var(--text); margin:4px 0 4px; }
  .fj-sub{ text-wrap:balance; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:20px; line-height:1.25; color:var(--text-soft); }
  .fj-count{ display:flex; background:var(--surface); margin-top:26px; }
  .fj-count[hidden], #fjSecs[hidden], .fj-foot[hidden], #fjEmpty[hidden]{ display:none; }
  .fj-count > div{ flex:1; text-align:center; padding:18px 8px; position:relative; }
  .fj-count > div + div::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:var(--rule); }
  #viewJournal, .menu__sub{ font-variant-numeric:lining-nums tabular-nums; }
  .fj-num{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:34px; line-height:1.1; color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
  .fj-num.fj-sun{ color:var(--sun); }
  .fj-cl{ font-size:11px; letter-spacing:.16em; margin-top:4px; }
  .fj-ico{ width:22px; height:22px; }
  .fj-ico-cosmic{ color:var(--cosmic); stroke-width:1.3; }
  /* empty journal */
  #fjEmpty{ text-align:center; }
  .fj-book{ display:block; width:76px; height:56px; margin:48px auto 0; fill:none; stroke:var(--label); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
  .fj-book .fj-spark{ fill:var(--sun); stroke:none; }
  .fj-e-t{ max-width:300px; margin:22px auto 0; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--text-soft); }
  .fj-e-lab{ text-align:left; margin-top:40px; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); }
  .fj-e-list{ margin-top:14px; border-top:1px solid var(--rule); text-align:left; }
  .fj-e-row .fj-ico{ width:20px; height:20px; }
  .fj-e-row{ display:flex; align-items:center; gap:14px; min-height:56px; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--text); }
  .fj-e-row:active{ opacity:.8; }
  .fj-e-g{ flex:1; min-width:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:22px; line-height:1.15; }
  .fj-e-w{ font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  /* sections */
  .fj-sec{ margin-top:34px; }
  .fj-sh{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--rule); padding-bottom:12px; }
  .fj-wn{ flex:1; min-width:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1; color:var(--text); margin:0; }
  .fj-wc{ font-size:11px; letter-spacing:.14em; white-space:nowrap; color:var(--muted); }
  .fj-entry{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; padding:6px 0; border-bottom:1px solid var(--rule); }
  .fj-et{ min-width:0; }
  .fj-en{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px; line-height:1.15; color:var(--text); }
  .fj-es{ font-family:'Jost',sans-serif; font-weight:300; font-size:12px; color:var(--muted); margin-top:2px; }
  .fj-tg{ flex:none; min-height:44px; display:inline-flex; align-items:center; padding:0; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .fj-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--rule); color:var(--text-soft); font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.06em; white-space:nowrap; transition:border-color .2s, color .2s; }
  .fj-chip svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .fj-tg.on .fj-chip{ border-color:var(--sun); color:var(--sun); }
  .fj-tg:active .fj-chip{ opacity:.8; }
  .fj-left, .fj-all, .fj-todo{ font-family:'Jost',sans-serif; font-weight:300; font-size:13px; line-height:1.45; color:var(--muted); }
  .fj-left{ margin:12px 0 0; }
  .fj-left a, .fj-todo a{ color:var(--text-soft); text-decoration:none; }
  .fj-all{ display:block; min-height:44px; padding:0; background:none; border:0; color:var(--text-soft); cursor:pointer; }
  .fj-todo{ margin:34px 0 0; }
  /* footer */
  .fj-foot{ margin-top:40px; padding-top:16px; border-top:1px solid var(--rule); text-align:center; }
  .fj-keep{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0; background:none; border:0; color:var(--text-soft); font-family:'Jost',sans-serif; font-weight:400; font-size:13px; cursor:pointer; }
  .fj-dl{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .fj-restore{ min-height:44px; padding:0; background:none; border:0; font-family:'Jost',sans-serif; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; }
  .fj-row{ display:flex; align-items:center; gap:12px; margin-top:20px; padding:12px 14px; border:1px solid var(--rule); text-align:left; text-decoration:none; color:var(--text); }
  .fj-row[hidden]{ display:none; }
  .fj-nb{ flex:none; width:22px; height:22px; fill:none; stroke:var(--sun); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
  .fj-row-1{ display:block; font-family:'Jost',sans-serif; font-weight:400; font-size:14px; line-height:1.35; color:var(--text); }
  .fj-row-2{ display:block; font-family:'Jost',sans-serif; font-weight:300; font-size:12px; line-height:1.4; color:var(--muted); margin-top:2px; }
  .menu__sub[hidden]{ display:none; }
  html.fj-lock, html.fj-lock body{ overflow:hidden; overscroll-behavior:none; }
  #fjSheet .ts-panel{ overscroll-behavior:contain; }
  #fjSheet .ts-backdrop{ touch-action:none; }
  .fj-x{ position:absolute; top:6px; right:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--muted); cursor:pointer; }
  .fj-x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
  #fjSheet .ts-title{ padding-right:36px; }
  .fj-back{ display:none; background:none; border:0; cursor:pointer; margin:0 0 18px; }
  #fjSheet.fj-full{ align-items:stretch; }
  #fjSheet.fj-full .ts-backdrop{ opacity:1; }
  #fjSheet.fj-full .ts-panel{ max-width:none; height:100%; max-height:none; background:var(--bg); box-shadow:none; padding:calc(14px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - 430px) / 2 + 16px)) calc(32px + env(safe-area-inset-bottom, 0px)); animation:cmFadeOnly .2s ease-out both; }
  #fjSheet.fj-full .ts-grab, #fjSheet.fj-full .fj-x{ display:none; }
  #fjSheet.fj-full .fj-back{ display:inline-flex; }
  #fjSheet.fj-full .ts-title{ padding-right:0; font-size:32px; }
  .menu__sub{ display:block; font-family:'Jost',sans-serif; font-weight:300; font-size:12px; line-height:1.3; color:var(--muted); margin-top:4px; }
  .fj-sheet-t{ margin-bottom:16px; }
  .fj-qr{ width:220px; max-width:100%; margin:0 auto 20px; padding:10px; background:#FFFFFF; }
  .fj-qr:empty{ height:220px; }
  .fj-qr svg{ display:block; width:100%; height:auto; }
  .fj-qr-note{ font-family:'Jost',sans-serif; font-weight:300; font-size:14px; color:var(--muted); margin:0 0 20px; }
  .fj-sheet-btns{ display:flex; gap:12px; }
  .fj-sheet-btns .btn{ flex:1 1 0; width:auto; margin:0; }
  .fj-row-1, .fj-row-2{ text-wrap:balance; }
  .fj-k-t{ margin-bottom:8px; }
  .fj-k{ border-top:1px solid var(--rule); padding:16px 0 18px; }
  .fj-k-h{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-bottom:6px; }
  .fj-k-p{ font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; color:var(--text-soft); margin:0 0 14px; }
  .fj-k .fj-sheet-btns{ margin-top:2px; }
  .fj-k-close{ width:100%; margin:4px 0 0 !important; }
  /* Daily Tangle: once solved, the fact card takes the place of the tiles and buttons */
  .dt-fact{ margin-top:auto; }
  .dt-fact[hidden]{ display:none; }
  #viewDaily.dt-done .dt-tiles, #viewDaily.dt-done .dt-ctl, #viewDaily.dt-done .dt-hint{ display:none; }
  .fj-date-l{ display:block; font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin-bottom:8px; }
  .fj-date{ display:block; width:100%; height:48px; min-height:48px; line-height:46px; text-align:center; box-sizing:border-box; padding:0 14px; margin:0 0 20px; background:var(--bg); color:var(--text); border:1px solid var(--edge); border-radius:0; font-family:'Jost',sans-serif; font-size:16px; color-scheme:dark; -webkit-appearance:none; appearance:none; }
  :root[data-theme="light"] .fj-date{ color-scheme:light; }
  /* iPhone Safari draws the date at the top of the box unless the inner value gets its own height */
  .fj-date::-webkit-date-and-time-value{ display:block; margin:0; min-height:46px; line-height:46px; text-align:center; }
  .fj-date::-webkit-datetime-edit{ padding:0; line-height:46px; }
  .fj-row:active{ opacity:.8; }