:root{
    --bg:#16110d;
    --bg2:#1f1813;
    --ink:#ece1cf;
    --ink-dim:#a99c87;
    --ink-faint:#8a7d6e;
    --amber:#e0a94b;
    --rose:#db9d9a;
    --sage:#9bbf9a;
    --line:rgba(236,225,207,0.11);
    --card:rgba(35,27,21,0.9);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  #sky{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;}
  #stageTitle{position:fixed;top:42%;left:0;right:0;z-index:5;text-align:center;pointer-events:none;
    font-family:'Fraunces',serif;font-weight:400;font-size:13px;letter-spacing:8px;text-transform:uppercase;
    color:var(--amber);opacity:0;transition:opacity 1.4s ease;text-shadow:0 0 24px rgba(224,169,75,0.6);}
  #stageTitle.show{opacity:0.92;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Newsreader',serif;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing:antialiased;
  }
  .grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.045;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .glow{position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(120% 90% at 50% 8%, rgba(224,169,75,0.10), transparent 55%),
               radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.55), transparent 60%);}
  #app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;}
  header{display:flex;justify-content:space-between;align-items:baseline;padding:18px 22px 10px;}
  .who{display:flex;flex-direction:column;gap:2px;}
  .who .name{font-family:'Fraunces',serif;font-weight:500;font-size:21px;letter-spacing:0.2px;}
  .who .meta{font-size:12px;color:var(--ink-dim);letter-spacing:0.4px;}
  .gen{font-size:10.5px;color:var(--ink-dim);letter-spacing:2px;text-transform:uppercase;text-align:right;line-height:1.7;}
  .gen .chron{cursor:pointer;color:var(--amber);opacity:0.9;}
  .gen .chron:hover{opacity:1;}
  .gen .chron2{cursor:pointer;color:var(--ink-dim);opacity:0.92;font-size:11px;}
  .gen .chron2:hover{opacity:1;color:var(--ink-dim);}
  .being{padding:2px 22px 0;color:var(--ink-dim);font-size:13.5px;font-style:italic;min-height:20px;
    opacity:0.9;transition:opacity .6s;}
  .stage{flex:1;display:flex;flex-direction:column;justify-content:safe center;padding:8px 22px;min-height:0;position:relative;overflow-y:auto;}
  /* the age sits as a centered overlay, NOT in the flow — so it never steals height from a tall
     (3- or 4-choice) card and never gets cropped itself. 'safe center' keeps the card centred when it
     fits but top-aligns it (fully scrollable) when it's taller than the stage. */
  .passing{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;opacity:0;transition:opacity 1s;padding:0 22px;pointer-events:none;}
  /* a card holds no height while the years pass, so the age overlay is alone and centred */
  .card:not(.show){max-height:0;overflow:hidden;}
  /* a "more below" cue when a tall card overflows the stage (toggled in presentCard) */
  .stage.scrollable::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;pointer-events:none;
    background:linear-gradient(to top, var(--bg) 12%, transparent);opacity:1;transition:opacity .3s;}
  .stage.scrollable.at-bottom::after{opacity:0;}
  .passing.show{opacity:1;}
  .passing .yr{font-family:'Fraunces',serif;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--ink-faint);}
  .passing .age{font-family:'Fraunces',serif;font-weight:400;font-size:54px;line-height:1.05;margin:14px 0 6px;
    color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,0.85), 0 2px 16px rgba(0,0,0,0.7), 0 0 34px rgba(0,0,0,0.5);}
  .passing .age small{font-size:15px;color:var(--ink-dim);letter-spacing:1px;display:block;margin-top:4px;font-family:'Newsreader';}
  .breath{display:none;}
  .card{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);}
  .card.show{opacity:1;transform:none;}
  .card .scene{font-family:'Fraunces',serif;font-weight:400;font-size:23px;line-height:1.42;letter-spacing:0.1px;}
  .card .scene em{font-style:italic;color:var(--amber);}
  .choices{margin-top:26px;display:flex;flex-direction:column;gap:11px;}
  .choice{
    text-align:left;background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:14px 17px;color:var(--ink);font-family:'Newsreader',serif;font-size:16px;line-height:1.4;
    cursor:pointer;transition:border-color .2s,background .2s,transform .08s;position:relative;
  }
  .choice:hover{border-color:rgba(224,169,75,0.5);background:rgba(46,35,27,0.95);}
  .choice:active{transform:scale(0.985);}
  .choice.chosen{border-color:var(--amber);background:rgba(224,169,75,0.18);animation:chosenPulse .5s ease;}
  @keyframes chosenPulse{0%{box-shadow:0 0 0 0 rgba(224,169,75,0.5);}100%{box-shadow:0 0 0 14px rgba(224,169,75,0);}}
  .choice .h{display:block;font-style:italic;color:var(--ink-faint);font-size:13px;margin-top:5px;opacity:0;
    max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s,margin .3s;}
  .choice:hover .h{opacity:0.9;max-height:40px;margin-top:6px;}
  .log{height:92px;overflow:hidden;padding:0 22px 8px;display:flex;flex-direction:column;justify-content:flex-end;}
  .log::-webkit-scrollbar{width:0;}
  .entry{font-size:14.5px;line-height:1.5;margin-bottom:9px;color:var(--ink);opacity:0;animation:rise .6s forwards;
    text-shadow:0 1px 4px rgba(8,6,4,.92), 0 0 3px rgba(8,6,4,.7);}
  .entry .a{color:var(--ink-faint);font-size:11px;letter-spacing:1px;margin-right:8px;}
  .entry.obs{font-style:italic;color:var(--ink);}
  .entry.joy{color:var(--sage);}
  .entry.loss{color:var(--rose);}
  .entry.echo{color:var(--ink);font-style:italic;padding-left:13px;border-left:2px solid rgba(224,169,75,0.45);}
  @keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  footer{display:flex;align-items:center;gap:14px;padding:10px 22px calc(16px + env(safe-area-inset-bottom));}
  .flow{display:flex;align-items:center;gap:9px;flex:1;color:var(--ink-faint);font-size:12px;letter-spacing:0.5px;}
  .pp{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(236,225,207,0.04);
    color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .1s;flex:0 0 38px;}
  .pp:hover{background:rgba(236,225,207,0.1);}
  .pp:active{transform:scale(0.93);}
  .pp svg{width:14px;height:14px;}
  .veil{position:fixed;inset:0;z-index:10;background:rgba(12,9,7,0.86);backdrop-filter:blur(7px);
    display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .6s;}
  .veil.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s;}
  .sheet{max-width:430px;width:100%;text-align:center;max-height:88vh;overflow-y:auto;}
  .sheet::-webkit-scrollbar{width:0;}
  .sheet h1{font-family:'Fraunces',serif;font-weight:500;font-size:40px;letter-spacing:0.5px;margin-bottom:6px;}
  .sheet h1.small{font-size:27px;}
  .sheet .tag{color:var(--ink-dim);font-style:italic;font-size:15px;margin-bottom:26px;line-height:1.5;}
  .sheet p{font-size:16px;line-height:1.62;color:var(--ink);margin-bottom:14px;}
  .sheet p.dim{color:var(--ink-dim);font-size:14.5px;}
  .sheet .rule{width:46px;height:1px;background:var(--amber);opacity:0.5;margin:22px auto;}
  .btn{display:inline-block;margin-top:18px;background:transparent;border:1px solid var(--amber);color:var(--amber);
    font-family:'Fraunces',serif;font-size:15px;letter-spacing:1px;padding:12px 28px;border-radius:30px;cursor:pointer;
    transition:background .25s,color .25s;}
  .btn:hover{background:var(--amber);color:var(--bg);}
  .btn{margin-top:0;}
  /* breathing room above the dismiss buttons at the foot of scrollable panels */
  #chronClose,#loadBack{margin-top:22px;}
  .btn.ghost{border-color:var(--line);color:var(--ink-dim);}
  .btn.ghost:hover{background:rgba(236,225,207,0.08);color:var(--ink);}
  .slot{display:flex;align-items:center;gap:12px;background:rgba(236,225,207,0.04);border:1px solid var(--line);
    border-radius:14px;padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s;}
  .slot:hover{border-color:rgba(224,169,75,0.45);background:rgba(46,35,27,0.6);}
  .slot .body{flex:1;min-width:0;}
  .slot .nm{font-family:'Fraunces';font-size:16px;color:var(--ink);}
  .slot .sub{font-size:11.5px;color:var(--ink-dim);margin-top:3px;letter-spacing:.3px;}
  .slot .sub .dead{color:var(--rose);}
  .slot .del{flex:0 0 auto;color:var(--ink-faint);font-size:13px;padding:6px 8px;border-radius:8px;cursor:pointer;}
  .slot .del:hover{color:var(--rose);background:rgba(208,138,134,0.12);}
  .slot.empty{justify-content:center;color:var(--ink-faint);font-style:italic;cursor:default;}
  .slot.empty:hover{border-color:var(--line);background:rgba(236,225,207,0.04);}
  .backup{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(236,225,207,0.03);text-align:center;}
  .backupTitle{font-family:'Fraunces',serif;font-size:13px;color:var(--amber);letter-spacing:.5px;margin-bottom:10px;opacity:.9;}
  #codeBox{width:100%;height:64px;resize:none;background:rgba(12,9,7,0.5);border:1px solid var(--line);border-radius:10px;
    color:var(--ink-dim);font-family:'DM Mono',monospace;font-size:13px;padding:9px 11px;line-height:1.45;outline:none;word-break:break-all;
    user-select:all;-webkit-user-select:all;}  /* readable on a phone, and one tap selects the whole code */
  #codeBox:focus{border-color:var(--amber);outline:2px solid var(--amber);outline-offset:1px;}
  .backupRow{margin:10px auto 0;max-width:240px;}
  .backupRow .btn{display:block;width:100%;margin:9px auto 0;font-size:12px;padding:9px 16px;}
  .backupMsg{font-size:11.5px;color:var(--sage);margin-top:9px;min-height:15px;font-style:italic;}
  .backupMsg.warn{color:var(--rose);}
  .eul-line{font-family:'Newsreader';font-style:italic;font-size:16px;color:var(--ink);line-height:1.6;}
  .survivors{font-size:13.5px;color:var(--ink-dim);margin-top:8px;line-height:1.7;}
  .tree{text-align:left;}
  .tree h1{text-align:center;}
  .marks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 8px;}
  .mark{background:rgba(236,225,207,0.05);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;min-width:84px;}
  .mark .v{font-family:'Fraunces';font-size:18px;color:var(--amber);}
  .mark .l{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
  .lineage{margin-top:18px;}
  .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;}
  .tab{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-family:'Fraunces',serif;
    font-size:13px;letter-spacing:.5px;padding:7px 16px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all .2s;}
  .tab.on{border-color:var(--amber);color:var(--amber);background:rgba(224,169,75,0.1);}
  .lifeHead{text-align:center;margin-bottom:14px;}
  .lifeHead .nm{font-family:'Fraunces';font-size:19px;color:var(--ink);}
  .lifeHead .sub{font-size:12px;color:var(--ink-dim);font-style:italic;margin-top:4px;line-height:1.5;}
  .memoir{text-align:left;max-height:46vh;overflow-y:auto;padding-right:4px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
    mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);}
  .memoir::-webkit-scrollbar{width:0;}
  .mline{display:flex;gap:11px;padding:7px 0;border-bottom:1px solid rgba(236,225,207,0.05);font-size:14px;line-height:1.5;}
  .mline .ma{font-family:'Fraunces';font-size:11px;color:var(--ink-faint);flex:0 0 26px;text-align:right;padding-top:2px;}
  .mline .mt{flex:1;color:var(--ink-dim);}
  .mline.obs .mt{font-style:italic;color:var(--ink);}
  .mline.joy .mt{color:var(--sage);}
  .mline.loss .mt{color:var(--rose);}
  .mline.echo .mt{font-style:italic;color:var(--ink);padding-left:11px;border-left:2px solid rgba(224,169,75,0.4);}
  .mline .stage-sep{font-family:'Fraunces';font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);opacity:.6;}
  .starWrap{position:relative;width:100%;height:54vh;border-radius:16px;overflow:hidden;
    background:radial-gradient(130% 100% at 50% 0%, #1a1830, #0c0a14 70%);border:1px solid var(--line);}
  #starCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
  #starCanvas:active{cursor:grabbing;}
  .starTip{position:absolute;pointer-events:none;background:rgba(12,9,7,0.9);border:1px solid rgba(224,169,75,0.4);
    border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.4;max-width:200px;color:var(--ink);
    opacity:0;transition:opacity .15s;transform:translate(-50%,-115%);z-index:2;}
  .starTip .age{color:var(--amber);font-family:'Fraunces';font-size:11px;letter-spacing:1px;}
  .starTip .alt{color:var(--ink-faint);font-style:italic;font-size:11px;margin-top:3px;}
  .starLegend{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
    margin-top:11px;font-size:11px;color:var(--ink-dim);}
  .starLegend i.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
  .starLegend i.dot.chose{background:var(--amber);box-shadow:0 0 6px var(--amber);}
  .starLegend i.dot.alt{background:rgba(160,170,210,0.5);}
  .starLegend .starHint{opacity:.5;font-style:italic;letter-spacing:.3px;}
  .anc{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline;}
  .anc .o{font-family:'Fraunces';font-size:11px;color:var(--ink-faint);width:30px;flex:0 0 30px;}
  .anc .nm{font-family:'Fraunces';font-size:16px;}
  .anc .sp{font-size:12px;color:var(--ink-faint);margin-left:auto;white-space:nowrap;}
  .anc .ep{font-size:13px;color:var(--ink-dim);font-style:italic;display:block;margin-top:2px;}
  .anc.alive .nm{color:var(--amber);}
  .house{margin:14px 0 4px;padding:14px 16px;background:rgba(224,169,75,0.06);border:1px solid rgba(224,169,75,0.22);border-radius:14px;text-align:left;}
  .house .seat{font-family:'Fraunces';font-size:17px;color:var(--ink);}
  .house .seat b{color:var(--amber);font-weight:600;}
  .house .rep{font-size:12.5px;color:var(--ink-dim);font-style:italic;margin-top:5px;}
  .house .motto{font-family:'Fraunces';font-style:italic;font-size:14px;color:var(--amber);margin-top:9px;text-align:center;opacity:0.9;}
  .house .item{font-size:12.5px;color:var(--ink-dim);margin-top:7px;padding-left:13px;border-left:2px solid rgba(224,169,75,0.4);line-height:1.45;}
  .house .item.secret{border-color:var(--rose);color:var(--rose);}
  /* cloud-sync status — a brief, subtle toast near the top; fades on its own */
  .cloudStatus{position:fixed;top:10px;left:0;right:0;z-index:6;text-align:center;pointer-events:none;
    font-family:'Fraunces',serif;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--ink-faint);opacity:0;transition:opacity .6s ease;}
  .cloudStatus.show{opacity:0.85;}
  .cloudStatus.ok{color:var(--sage);}
  .cloudStatus.dim{color:var(--ink-dim);}
  /* desktop: let the Chronicle (and especially the constellation) use the wider screen;
     the rest of the game keeps its narrow reading column */
  @media (min-width:760px){
    #vChron .sheet{max-width:700px;}
  }
  /* atmospheric image backdrops behind the text at key beats (title/eulogy/heir) */
  .veil-art{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none;}
  .veil-art::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(12,9,7,.76) 0%, rgba(12,9,7,.72) 42%, rgba(12,9,7,.86) 100%);}
  .veil .sheet{position:relative;z-index:1;}
  /* a dim image wash that rides the stage-title transitions */
  #stageArt{position:fixed;inset:0;z-index:4;background-size:cover;background-position:center;
    opacity:0;transition:opacity 1.6s ease;pointer-events:none;}
  #stageArt.show{opacity:0.42;}

  /* ============================================================
     Accessibility, touch & polish pass (review-driven)
     ============================================================ */
  /* keyboard focus — a clear amber ring on every interactive control */
  .choice:focus-visible, .btn:focus-visible, .tab:focus-visible, .pp:focus-visible,
  .gen .chron:focus-visible, .gen .chron2:focus-visible, #dBackup:focus-visible, #dChron:focus-visible,
  .slot .del:focus-visible, .slot .body:focus-visible{
    outline:2px solid var(--amber); outline-offset:2px; border-radius:8px;
  }
  /* reveal each choice's hint for keyboard users and on touch devices (which have no hover) */
  .choice:focus-visible .h{opacity:0.9;max-height:40px;margin-top:6px;}
  @media (hover:none){ .choice .h{opacity:0.82;max-height:44px;margin-top:6px;} }
  /* the narrative prose sits directly over the open sky — give it its own soft dark
     backing so it stays legible even on the pale youth/midday skies */
  .card .scene{text-shadow:0 1px 10px rgba(8,6,4,0.72), 0 0 34px rgba(8,6,4,0.55);}
  .being{text-shadow:0 1px 14px rgba(8,6,4,0.9), 0 0 28px rgba(8,6,4,0.6);}
  /* ghost buttons sit over painterly veil backdrops — keep their outline readable */
  .veil .btn.ghost{border-color:rgba(236,225,207,0.38);color:var(--ink);}
  /* delete control: a comfortable 44px touch target */
  .slot .del{min-width:44px;min-height:44px;}
  /* the time control reads as primary and distinct from the menu (amber = actionable) */
  #pp{border-color:rgba(224,169,75,0.42);background:rgba(224,169,75,0.07);}
  #pp:hover{background:rgba(224,169,75,0.16);}
  /* comfortable footer tap targets (>=44px) */
  .pp{width:44px;height:44px;flex:0 0 44px;}
  .pp svg{width:15px;height:15px;}
  /* the slot delete control is a <button> now — strip default chrome */
  .slot .del{background:transparent;border:0;font-family:inherit;line-height:1;display:grid;place-items:center;min-width:44px;min-height:44px;}
  /* the Chronicle / constellation entry points were too small to discover/tap */
  .gen{line-height:2.0;font-size:11px;}
  .gen .chron, .gen .chron2{display:inline-block;padding:11px 3px;min-height:44px;box-sizing:border-box;}
  .gen .chron{font-size:13.5px;letter-spacing:1px;border-bottom:1px solid rgba(224,169,75,0.45);}
  .gen .chron2{font-size:12px;color:var(--ink-dim);opacity:1;border-bottom:1px solid rgba(169,156,135,0.5);}
  .gen .chron2:hover{color:var(--ink);}
  /* inactive Chronicle tabs get a faint surface so selection reads by more than hue */
  .tab{background:rgba(236,225,207,0.035);}
  .tab.on{background:rgba(224,169,75,0.12);}
  /* a more legible stage-transition title (was 13px / 8px tracking) */
  #stageTitle{font-size:15px;letter-spacing:5px;}
  /* respect prefers-reduced-motion — kill transitions/animations/smooth-scroll;
     the canvases freeze their own clocks in JS (scene.js / constellation.js) */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important; animation-iteration-count:1 !important;
      transition-duration:0.001ms !important; scroll-behavior:auto !important;
    }
    .card{transform:none;}
  }

  /* ---- review pass 3: card edges, AA contrast, keyboard rows ---- */
  .choice{border-color:rgba(236,225,207,0.18);}        /* keep a defined edge over any sky */
  .choice .h{color:var(--ink-dim);}                    /* hint text clears AA (was ink-faint) */
  .mark .l{color:var(--ink-dim);}                      /* 9.5px stat labels clear AA */
  .starLegend .starHint{opacity:0.85;}                 /* constellation hint clears AA */
  .tab{background:rgba(236,225,207,0.07);}             /* inactive tabs read as pressable */
  .stage{overflow-y:auto;}                             /* tall (3-choice) cards stay reachable on short screens */
  #dChron, #dBackup{display:inline-block;padding:12px 6px;min-height:44px;box-sizing:border-box;}  /* comfortable eulogy tap targets */
  .tab{min-height:44px;}                               /* chronicle tabs meet the touch-target minimum */
  /* the load-slot row and ancestor rows are keyboard controls now — same amber ring */
  .slot .body{border-radius:9px;}
  .slot .body:focus-visible, .anc:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:8px;}
  /* a quiet running-state cue: the age numeral breathes while time flows, holds still when paused */
  body:not(.paused) .passing .age{animation:ageBreath 4.5s ease-in-out infinite;}
  @keyframes ageBreath{0%,100%{opacity:1;}50%{opacity:0.8;}}
  /* a one-time beckon so a new player finds the chronicle control */
  .gen .chron.beckon{animation:beckon 1.4s ease-in-out 3;}
  @keyframes beckon{0%,100%{text-shadow:none;}50%{text-shadow:0 0 11px var(--amber);}}

  /* ---- review pass 4 (round 9): AA on temporal labels, sr-only, inline delete ---- */
  /* ages / dates / ordinals in the chronicle carry meaning — lift them off ink-faint (~3.8:1) to ink-dim (~5.6:1) for AA */
  .entry .a, .mline .ma, .anc .o, .anc .sp{color:var(--ink-dim);}
  /* visually-hidden live region used for constellation keyboard announcements */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  /* inline two-step delete confirm — replaces the native confirm() dialog */
  .slot .delConfirm{display:flex;gap:6px;align-items:center;flex:0 0 auto;}
  .slot .delYes, .slot .delNo{font-family:'Newsreader',serif;font-size:12.5px;padding:8px 12px;min-height:44px;box-sizing:border-box;border-radius:8px;cursor:pointer;border:1px solid;background:transparent;}
  .slot .delYes{color:var(--rose);border-color:rgba(219,157,154,0.5);}
  .slot .delYes:hover{background:rgba(208,138,134,0.14);}
  .slot .delNo{color:var(--ink-dim);border-color:var(--line);}
  .slot .delNo:hover{background:rgba(236,225,207,0.06);}

  /* ---- review pass 5 (round 10): reachable dismiss on short screens + last AA touch-ups ---- */
  /* the sheet scrolls with a hidden scrollbar; pin the dismiss button to the foot and
     fade content into the dark behind it, so 'Back'/'Return' is always visible/reachable
     on a short phone with several saved slots (no off-screen, no missing scroll cue) */
  #loadBack, #chronClose{position:sticky; bottom:0; z-index:2;}
  #loadBack::before, #chronClose::before{content:''; position:absolute; left:50%; transform:translateX(-50%);
    bottom:-1px; width:100vw; height:calc(100% + 30px); z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--bg) 62%);}
  /* the running-state readouts carry meaning — lift them off ink-faint (~3.8:1) to ink-dim for AA */
  .passing .yr, .flow{color:var(--ink-dim);}

  /* ---- review pass 6 (round 11): hide the storage tool; last AA labels ---- */
  /* remaining meaning-carrying ink-faint controls/text → ink-dim for AA */
  .slot .del, .starTip .alt, .slot.empty{color:var(--ink-dim);}
  /* the storage-recovery diagnostic lives behind a quiet disclosure so ordinary players never meet it */
  .troubleshoot{margin:6px 0 2px;text-align:center;}
  .troubleshoot summary{list-style:none;cursor:pointer;font-size:11.5px;color:var(--ink-dim);font-style:italic;letter-spacing:.3px;padding:11px 12px;border-radius:8px;}
  .troubleshoot summary::-webkit-details-marker{display:none;}
  .troubleshoot summary:hover{color:var(--ink);}
  .troubleshoot summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
  .troubleshoot[open] summary{color:var(--ink);margin-bottom:4px;}

  /* ---- review pass 7: optional, opt-in music ---- */
  #musicBtn{position:relative;color:var(--ink-dim);}                               /* off: a quiet, dim note */
  #musicBtn.on{border-color:rgba(224,169,75,0.42);background:rgba(224,169,75,0.07);color:var(--amber);}  /* on: amber, like the pause control */
  #musicBtn.on:hover{background:rgba(224,169,75,0.16);}
  /* a diagonal slash reads as "muted" while music is off */
  #musicBtn:not(.on)::after{content:'';position:absolute;left:10px;right:10px;top:50%;height:1.6px;
    background:currentColor;border-radius:2px;transform:rotate(-45deg);opacity:.85;pointer-events:none;}
  /* with three footer controls now, the flow text stays on one line (clips rather than wraps on tiny screens) */
  .flow{white-space:nowrap;overflow:hidden;}

  /* ---- review pass 8 (ten-juror gameplay round): readable state, pace control, last a11y ---- */
  /* skip link — invisible until focused, then drops into view */
  .skip{position:absolute;left:8px;top:-48px;z-index:60;background:var(--amber);color:#16110d;
    padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:top .15s ease;}
  .skip:focus{top:8px;outline:2px solid #fff;outline-offset:1px;}

  /* "how things stand" — a quiet, discoverable reflect button under the being line */
  .reflect{display:block;margin:2px auto 0;background:none;border:1px solid rgba(236,225,207,0.45);cursor:pointer;
    font-family:'Fraunces',serif;font-size:13.5px;letter-spacing:.8px;
    color:var(--ink-dim);opacity:1;padding:5px 13px;border-radius:11px;transition:color .2s,border-color .2s;}
  .reflect::before{content:'⊙ ';opacity:.85;}
  .reflect:hover{color:var(--amber);border-color:rgba(224,169,75,0.55);}

  /* the dynasty hook on the title — brighter than the mechanics line, so a newcomer reads it */
  .lead{color:var(--ink);font-size:14px;line-height:1.55;margin:8px auto 2px;max-width:32ch;opacity:.96;}

  /* the houses-you've-raised collection (meta-progression) on the title screen */
  .housesRaised{margin-top:20px;font-size:12px;line-height:1.5;}
  .housesRaised:empty{display:none;}
  .hr-title{font-family:'Fraunces',serif;letter-spacing:.5px;color:var(--ink-dim);opacity:.9;}
  .hr-mottos{margin-top:6px;font-style:italic;color:var(--ink-faint);opacity:.85;line-height:1.7;}
  .hr-seen{margin-top:8px;font-size:12.5px;letter-spacing:.3px;color:var(--ink-faint);opacity:.7;}
  .reflect:focus-visible{outline:2px solid var(--amber);outline-offset:2px;color:var(--amber);}

  /* the flow text is now a control: tap it to change the pace of the years */
  .flow{cursor:pointer;border-radius:8px;transition:color .2s;}
  .flow:hover{color:var(--ink-dim);}
  .flow:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
  body.hurry .flow{color:var(--amber);opacity:.95;}
  #log{cursor:pointer;}
  #log:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:8px;}

  /* the readout panel — prose tiers, no numbers */
  .stock{text-align:left;margin:2px 0 4px;}
  .srow{padding:7px 2px;border-bottom:1px solid rgba(236,225,207,0.08);font-size:15px;line-height:1.5;}
  .srow:last-child{border-bottom:none;}
  .stock .sk{font-family:'Fraunces',serif;color:var(--amber);opacity:.92;}
  .stock .sv{color:var(--ink);}
  .snote{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
    font-size:13.5px;color:var(--ink-dim);font-style:italic;line-height:1.6;}
  .snote b{color:var(--ink);font-style:normal;}
  .snote .shint{display:block;margin-top:8px;opacity:.75;}

  /* ambient whisper (ephemeral weather line) vs. onboarding hint (lingers, brighter) */
  .entry.whisper{color:var(--ink-faint);font-style:italic;opacity:.72;}
  .entry.hint{color:var(--ink);}

  /* the pace text doubles as a liveness light: a slow breathing dot means the years are moving */
  .flow{position:relative;padding-left:15px;}
  .flow::before{content:'';position:absolute;left:1px;top:50%;width:6px;height:6px;border-radius:50%;
    background:currentColor;transform:translateY(-50%);opacity:.5;animation:flowpulse 2.6s ease-in-out infinite;}
  @keyframes flowpulse{0%,100%{opacity:.22;}50%{opacity:.85;}}
  body.paused .flow::before{animation:none;opacity:.2;}
  body.hurry .flow::before{animation-duration:1s;background:var(--amber);}

  /* ---- review pass 9: card fit on short phones ---- */
  /* On a short screen a 2-choice card should fit without scrolling, and 3-/4-choice cards
     should scroll the shortest possible distance. Tighten the scene, the choices, and the log. */
  @media (max-height:740px){
    .card .scene{font-size:20px;line-height:1.36;}
    .choices{margin-top:16px;gap:9px;}
    .choice{padding:11px 15px;font-size:15px;}
    .choice .h{font-size:12.5px;}
    .log{height:64px;}
    .being{font-size:12.5px;}
    .passing .age{font-size:46px;margin:8px 0 4px;}
  }
  @media (max-height:600px){
    .card .scene{font-size:18px;line-height:1.32;}
    .choices{margin-top:12px;}
    .log{height:48px;}
    .passing .age{font-size:40px;}
  }