/* The fixed interface (UI overhaul, v0.14, src/strategy/shell.js and cards/drawer.js): one slate skin for every age,
   the age shown only in the trim — bone lashings in the corners (Stone Age), a bronze edge (Bronze and Copper Ages),
   rivets (Iron Age). Loaded after the old styles; scoped to body.shell so the title screen keeps its own look. */
body.shell{--sl:#24272b;--sl2:#1b1d20;--sl3:#2c3035;--ink:#e9ecef;--dim:#aab1b8;--faint:#727a82;--fr:#0b0c0e;--ed:#4a5058;--hi:#6c747d;--acc:#d88a3c;--acc2:#8fb8a0;--bad:#d0583c;--lnk:#f2c56a;--gold2:#f2c56a;--trim:#c9b38a}
body.shell.age-bronze{--ed:#8a6232;--hi:#c8924a;--acc:#d8a050;--acc2:#5fae9c;--lnk:#ffd27a}
body.shell.age-iron{--acc:#c46a3a;--acc2:#8fb0c8;--lnk:#ffc27a}
/* the shared frame */
body.shell .sk{background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 6px),var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px var(--ed),inset 0 2px 0 2px var(--hi),0 3px 0 rgba(0,0,0,.45);border-radius:2px;color:var(--ink);position:fixed;box-sizing:border-box}
body.shell .sk::after{content:'';position:absolute;inset:5px;border:1px solid #3c4248;pointer-events:none;opacity:.5}
body.shell.age-stone .sk::before{content:'';position:absolute;inset:3px;pointer-events:none;background:
  linear-gradient(var(--trim),var(--trim)) 0 0/8px 2px no-repeat,linear-gradient(var(--trim),var(--trim)) 0 0/2px 8px no-repeat,linear-gradient(var(--trim),var(--trim)) 100% 0/8px 2px no-repeat,linear-gradient(var(--trim),var(--trim)) 100% 0/2px 8px no-repeat,
  linear-gradient(var(--trim),var(--trim)) 0 100%/8px 2px no-repeat,linear-gradient(var(--trim),var(--trim)) 0 100%/2px 8px no-repeat,linear-gradient(var(--trim),var(--trim)) 100% 100%/8px 2px no-repeat,linear-gradient(var(--trim),var(--trim)) 100% 100%/2px 8px no-repeat}
body.shell.age-iron .sk::before{content:'';position:absolute;inset:4px;pointer-events:none;background:radial-gradient(circle at 3px 3px,#8a929b 1.5px,transparent 2px),radial-gradient(circle at calc(100% - 3px) 3px,#8a929b 1.5px,transparent 2px),radial-gradient(circle at 3px calc(100% - 3px),#8a929b 1.5px,transparent 2px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#8a929b 1.5px,transparent 2px)}
/* buttons inside the new chrome */
body.shell .sh-b,body.shell #time button,body.shell .sh-tr button,body.shell .dr-b,body.shell .dr button,body.shell .sh-dock button,body.shell .sh-pop button,body.shell .tipbox button,body.shell .sh-banner button,body.shell .sh-al{border-image:none;background:var(--sl2);border:2px solid var(--fr);box-shadow:inset 0 0 0 1px var(--ed);border-radius:2px;min-height:28px;padding:2px 9px;font:400 13px var(--px);color:var(--ink);line-height:1;margin:0}
body.shell .sh-b:hover,body.shell #time button:hover,body.shell .sh-tr button:hover,body.shell .dr button:hover,body.shell .sh-dock button:hover,body.shell .sh-al:hover{box-shadow:inset 0 0 0 1px var(--hi);color:#fff;border-image:none}
body.shell .sh-b.on,body.shell #time button.on,body.shell .dr button.on:not(.dr-tab),body.shell .gpow.on{background:var(--acc);color:#16120c;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
body.shell button:active{padding-top:2px}
body.shell button:disabled{opacity:.4}
body.shell .sh-lab{font:8px var(--lab);letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
/* old panels: gone, or moved into the new chrome */
body.shell #hud,body.shell #history,body.shell #godbar,body.shell .ann-stack{display:none!important}
body.shell #keys{position:fixed;right:64px;top:58px;left:auto;bottom:auto;max-width:360px;border-image:none;background:var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px var(--ed);padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink);z-index:12;zoom:1}
/* top left: the date and the speeds */
body.shell #time{left:12px;top:12px;transform:none;border-image:none;background:var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px var(--ed),inset 0 2px 0 2px var(--hi),0 3px 0 rgba(0,0,0,.45);padding:7px 10px;gap:12px;filter:none;zoom:1}
body.shell #time .when{min-width:150px} body.shell #t-date{font-size:16px;color:var(--ink)} body.shell #t-era{color:var(--dim)}
body.shell #time .ctl{gap:3px} body.shell #pause{min-width:62px} body.shell #speeds{gap:3px} body.shell #speeds button{min-width:34px;padding:2px 6px}
body.shell #time #fs,body.shell #time #menu-btn{display:none}
/* top right: options, help, full screen, menu; the alerts under them */
.sh-tr{position:fixed;right:12px;top:12px;display:flex;gap:6px;z-index:8}
body.shell .sh-tr .icon-btn{position:relative;width:38px;min-width:38px;height:36px;padding:0}
body.shell #help-btn{position:relative;right:auto;bottom:auto;zoom:1}
.sh-gear::after{content:'\2699'!important;position:absolute;inset:0!important;margin:0!important;display:flex;align-items:center;justify-content:center;font:19px/1 'Segoe UI Symbol','DejaVu Sans',sans-serif;color:var(--ink);background:none!important;width:auto!important;height:auto!important}
body.shell .sh-pop{right:12px;top:58px;width:330px;padding:12px 14px;z-index:12;font-size:13px;color:var(--ink)}
body.shell .sh-pop .row{display:flex;gap:8px;align-items:center;margin:4px 0;flex-wrap:wrap} body.shell .sh-pop input[type=range]{accent-color:var(--acc)}
.sh-where{color:var(--faint);font-size:12px;margin-top:8px;border-top:1px solid #3c4248;padding-top:6px}
body.shell #sim-status{position:fixed;left:12px;top:70px;color:var(--dim);font-size:13px;text-shadow:1px 1px 0 #000}
body.shell #sim-status:empty{display:none}
.sh-alerts{position:fixed;right:12px;top:58px;display:flex;flex-direction:column;gap:6px;z-index:7}
body.shell .sh-al{position:relative!important;width:40px;height:40px;padding:0!important;display:flex;align-items:center;justify-content:center;background:var(--sl)!important;border:3px solid var(--fr)!important;box-shadow:inset 0 0 0 2px var(--ed)!important}
.sh-al .sh-n{position:absolute;right:-6px;bottom:-6px;font:600 11px var(--px);font-style:normal;background:var(--acc);color:#16120c;border:2px solid var(--fr);padding:0 3px;line-height:13px;min-width:10px;text-align:center}
.sh-al.hot .sh-n{background:var(--bad);color:#fff}
.sh-tipl{margin:3px 0;font-size:13px}
/* the dock */
body.shell .sh-dock{left:0;right:0;bottom:0;height:50px;display:flex;align-items:center;gap:12px;padding:0 226px 0 12px;z-index:9;border-left:0;border-right:0;border-bottom:0;border-radius:0}
.sh-ticker{flex:1;min-width:0;display:flex!important;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;background:none!important;border:0!important;box-shadow:none!important;text-align:left;padding:4px 0!important}
.sh-tk{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden} .sh-tk .ico{flex:none;zoom:.8} .sh-y{color:var(--faint);font-size:12px;flex:none} .sh-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-ticker:hover .sh-tt{color:#fff}
.sh-sep{width:2px;align-self:stretch;margin:10px 0;background:var(--ed);opacity:.6;flex:none}
.sh-grp{display:flex;gap:3px;align-items:center;flex:none} .sh-modes .sh-lab{margin-right:4px}
body.shell #g-powers{display:flex;gap:3px;flex-wrap:nowrap}
body.shell .gpow{font-size:0!important;width:36px;min-width:36px;height:34px;padding:0!important;position:relative;justify-content:center;outline:none!important;filter:none!important}
body.shell .gpow .ico{zoom:.9} body.shell .gpow .cost{position:absolute;right:2px;bottom:1px;font-size:9px;color:var(--dim)}
.sh-fav{width:116px;margin-left:8px;cursor:help} .sh-bar{height:8px;background:var(--fr);border:1px solid var(--ed);margin-top:4px} .sh-bar b{display:block;height:100%;background:var(--acc2)}
body.shell .sh-gtip{left:50%;bottom:58px;transform:translateX(-50%);position:fixed;max-width:560px;padding:8px 12px;font-size:13px;z-index:9;min-height:0}
/* the minimap */
body.shell .sh-mini{right:0;bottom:0;width:220px;height:146px;padding:8px 9px 9px;z-index:10;border-radius:2px 0 0 0;border-right:0;border-bottom:0}
.sh-mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} body.shell .sh-mz{min-height:20px!important;padding:0 6px!important;font-size:11px!important}
.sh-mini canvas{display:block;width:198px;height:99px;image-rendering:pixelated;border:2px solid var(--fr);cursor:crosshair;box-sizing:content-box}
/* the drawer */
body.shell .dr{left:12px;right:232px;bottom:56px;height:clamp(220px,34vh,300px);z-index:8;display:flex;flex-direction:column;padding:6px 8px 8px;transform:translateY(24px);opacity:0;transition:transform .18s ease-out,opacity .18s}
body.shell .dr.up{transform:none;opacity:1} body.shell .dr.tall{height:min(66vh,620px)}
.dr-bar{display:flex;align-items:center;gap:8px;padding:4px 4px 6px;flex:none}
.dr-title{min-width:0} .dr-t1{font-weight:600;font-size:18px;line-height:1.1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dr-t2{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-trail{margin-left:auto;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
body.shell .dr-b{min-height:26px!important;padding:0 8px!important}
.dr-in{flex:1;min-height:0;display:flex;gap:12px;border-top:2px solid var(--fr);padding-top:6px}
.dr-hero{flex:0 0 300px;overflow:auto;scrollbar-width:thin;padding-right:4px} .dr.nohero .dr-hero{display:none}
.dr-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-tabs{display:flex;gap:2px;border-bottom:2px solid var(--fr);flex:none} .dr-tabs:empty{display:none}
body.shell .dr-tab{background:transparent!important;border:2px solid transparent!important;border-bottom:0!important;box-shadow:none!important;padding:4px 10px 3px!important;font-size:13px!important;color:var(--dim)!important;min-height:0!important;border-radius:2px 2px 0 0}
body.shell .dr-tab.on{background:var(--sl2)!important;border-color:var(--fr)!important;color:var(--ink)!important;box-shadow:inset 0 2px 0 var(--acc)!important}
.dr-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:6px 6px 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 18px;align-content:start;align-items:start}
.dr-body>.k-para,.dr-body>.k-trouble,.dr-body>.sh-chron,.dr-body>.k-list{grid-column:1/-1}
.dr-foot{display:flex;gap:6px;padding-top:4px;flex:none} .dr-foot:empty{display:none}
/* the card kit inside the drawer, in slate */
body.shell .dr .k-hero{border-bottom:0;box-shadow:none;padding:2px 0 6px} body.shell .dr .k-name{font-size:18px;color:var(--ink);text-shadow:none}
body.shell .dr .k-badge,body.shell .dr .k-fig,body.shell .dr .k-bld,body.shell .dr .k-chip,body.shell .dr .k-trait{background:var(--sl2);box-shadow:inset 0 0 0 1px var(--ed)}
body.shell .dr .k-block{margin:8px 0 4px} body.shell .dr .k-block-t{color:var(--dim)} body.shell .dr .k-block-t::after{background:#3c4248}
body.shell .dr .k-hero-art{border-image:none;border:2px solid var(--fr);box-shadow:inset 0 0 0 1px var(--ed)}
body.shell .dr .k-fig-n,body.shell .dr .k-trait-n{color:var(--ink)}
body.shell .dr .k-meter-bar i{background:var(--acc)}
body.shell .dr .k-fact{grid-template-columns:110px 1fr;min-height:22px}
body.shell .dr .k-tie{border-bottom-color:#33383e} body.shell .dr .k-site{border-bottom-color:#33383e}
/* the chronicle in the drawer */
.sh-chron #h-stats{color:var(--dim);font-size:13px;margin-bottom:4px} .sh-chron .row{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:4px}
body.shell .sh-chron select{border-image:none;background:var(--sl2);border:2px solid var(--fr);color:var(--ink);padding:2px 6px;font:13px var(--px)}
.sh-chron #events{max-height:none;border-top:1px solid #3c4248;box-shadow:none} .sh-chron .ev{color:var(--ink)}
.sh-alrow{display:grid;grid-template-columns:28px 40px 1fr auto;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid #33383e;font-size:13px}
body.shell .sh-go{min-height:24px!important;padding:0 8px!important;font-size:12px!important}
/* tooltips, nested */
body.shell .tipbox{background:var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px var(--ed),0 4px 0 rgba(0,0,0,.45);color:var(--ink);padding:8px 11px 9px;max-width:320px;font-size:13px}
.tipbox{position:fixed;z-index:90;max-width:320px;padding:8px 10px;background:#141a16f4;border:2px solid #6a5a3a;font-size:13px;line-height:1.4}
.tip-lock{height:3px;margin:-5px -8px 6px;background:rgba(0,0,0,.4)} .tip-lock b{display:block;height:100%;width:0;background:var(--acc,#e3b453);transition:width .6s linear} .tipbox.locked .tip-lock b{width:100%}
body.shell .tipbox .tip-t,body.shell .hc-n{color:var(--ink)} body.shell .hc-l{color:var(--dim)}
body.shell .lk{color:var(--lnk);border-bottom-color:rgba(242,197,106,.45)} body.shell .lk-polity{color:#f0b8a0} body.shell .lk-culture{color:#b8dc98} body.shell .lk-faith{color:#d0bcf4} body.shell .lk-person{color:var(--lnk)} body.shell .lk-settlement{color:#f4ecd8}
/* a landmark: a banner across the top */
body.shell .sh-banner{left:50%;top:70px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:10px 16px;max-width:620px;z-index:11;animation:shIn .3s ease-out}
.sh-banner.out{opacity:0;transition:opacity .4s} .sh-bt{font-weight:600;font-size:18px;margin:2px 0} .sh-bx{font-size:13px;color:var(--dim)}
@keyframes shIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
body.shell #landtip{background:var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px var(--ed);color:var(--ink)} body.shell #landtip .lt-t{color:var(--ink)} body.shell #landtip .lt-s{color:var(--dim)}
body.shell #toast{position:fixed;left:50%;bottom:62px;transform:translateX(-50%);background:var(--sl);border:3px solid var(--fr);padding:6px 12px;color:var(--ink);z-index:12}
/* U: just the world */
body.shell.bare .sk,body.shell.bare .sh-tr,body.shell.bare .sh-alerts,body.shell.bare #time{display:none!important}
/* smaller screens: the chrome shrinks before the world does */
@media (max-width:1280px){body.shell .sh-modes .sh-lab{display:none} body.shell .sh-dock{gap:8px} body.shell .sh-b{padding:2px 6px} .sh-fav{width:84px}}
@media (max-width:1100px){body.shell .sh-dock,body.shell .sh-mini,body.shell .dr,body.shell #time,.sh-tr,.sh-alerts{zoom:.85} .dr-hero{flex-basis:240px}}
.tipbox.hchip{pointer-events:auto}
/* the game menu (Esc), in slate */
body.shell .menu-box{border-image:none;border:3px solid var(--fr);background:var(--sl);box-shadow:inset 0 0 0 2px var(--ed),inset 0 2px 0 2px var(--hi);filter:none;padding:14px 18px}
body.shell .menu-box button{border-image:none;background:var(--sl2);border:2px solid var(--fr);box-shadow:inset 0 0 0 1px var(--ed);color:var(--ink);min-height:32px;padding:2px 10px}
body.shell .menu-box .menu-go{background:var(--acc);color:#16120c}
body.shell .menu-box input{border-image:none;background:var(--sl2);border:2px solid var(--fr);color:var(--ink);padding:4px 6px}
body.shell .menu-box .save-row,body.shell .menu-box .menu-continue{border-image:none;border:1px solid var(--ed);background:var(--sl2)}
body.shell .menu-kicker{color:var(--dim)} body.shell .menu-kicker .rule{background:#3c4248;height:2px}
body.shell .save-info b{color:var(--ink)}
/* ── compact: phones and small windows (shell.js sets body.compact under 820 px wide or 520 px tall) ── */
#map{touch-action:none}
.sh-mapbtn{display:none!important} .sh-mapbtn::after{content:'\25A6'!important;position:absolute;inset:0!important;margin:0!important;display:flex;align-items:center;justify-content:center;font:20px/1 'DejaVu Sans',sans-serif;color:var(--ink);background:none!important;width:auto!important;height:auto!important}
body.shell.compact .sh-mapbtn{display:block!important}
body.shell.compact #time{left:6px;top:6px;right:58px;padding:5px 7px;flex-wrap:wrap;gap:4px 8px}
body.shell.compact #time .when{min-width:0} body.shell.compact #t-date{font-size:14px} body.shell.compact #t-era,body.shell.compact #t-rate{display:none}
body.shell.compact #time .ctl{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none} body.shell.compact #pause{min-width:0}
body.shell.compact #time button,body.shell.compact #speeds button{min-height:30px;min-width:30px;padding:2px 5px}
body.shell.compact .sh-tr{right:6px;top:6px;flex-direction:column;gap:4px}
body.shell.compact .sh-tr .icon-btn{width:42px;min-width:42px;height:40px}
body.shell.compact .sh-alerts{right:6px;top:236px;gap:4px} body.shell.compact .sh-al{width:42px;height:42px}
body.shell.compact .sh-pop{right:56px;top:6px;width:min(330px,calc(100vw - 70px))}
body.shell.compact #keys{right:56px;top:6px;left:6px;max-width:none;font-size:14px}
body.shell.compact .sh-dock{height:auto;min-height:52px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:6px;flex-wrap:wrap}
body.shell.compact .sh-ticker{flex:1 1 100%;order:-1;min-height:28px;padding:0!important} body.shell.compact .sh-ticker .sh-lab{display:none}
body.shell.compact .sh-modes{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} body.shell.compact .sh-modes .sh-lab{display:none}
body.shell.compact .sh-modes .sh-b{min-height:40px;padding:2px 8px}
body.shell.compact .sh-sep{display:none} body.shell.compact .gpow{width:40px;min-width:40px;height:40px}
body.shell.compact .sh-fav{display:none}
body.shell.compact .sh-mini{display:none} body.shell.compact.mini-on .sh-mini{display:block;right:6px;bottom:auto;top:6px;z-index:13;border:3px solid var(--fr)}
body.shell.compact .dr,body.shell.compact .dr.tall{z-index:15;left:0;right:0;bottom:var(--dockH,96px);height:min(62vh,560px);padding:4px 6px 6px}
@media (max-width:640px){body.shell.compact .dr-in{flex-direction:column;gap:6px;overflow:auto} body.shell.compact .dr-hero{flex:none;max-height:none;overflow:visible} body.shell.compact .dr-main{flex:none} body.shell.compact .dr-body{grid-template-columns:1fr;overflow:visible}}
body.shell.compact .dr-hero{flex-basis:220px}
body.shell.compact .dr-tabs{overflow-x:auto;scrollbar-width:none} body.shell.compact .dr-tab{min-height:36px!important;padding:6px 10px 5px!important}
body.shell.compact .dr-trail,body.shell.compact .dr-tall{display:none!important} body.shell.compact .dr-b{min-height:36px!important;min-width:36px}
body.shell.compact .dr .k-hero-art .k-pic{max-width:100%;max-height:130px;width:auto!important;height:auto!important;object-fit:contain}
body.shell.compact .tipbox{max-width:calc(100vw - 16px)}
body.shell.compact .sh-banner{top:auto;bottom:calc(var(--dockH,96px) + 8px);left:6px;right:56px;transform:none;max-width:none;animation:none;padding:6px 10px;gap:8px;z-index:7} body.shell.compact .sh-banner .ico3{transform:none;margin:0} body.shell.compact .sh-bx{display:none} body.shell.compact .sh-bt{font-size:15px}
body.shell.compact #sim-status{top:auto;bottom:110px}
body.shell.compact .sh-gtip{bottom:calc(var(--dockH,96px) + 6px);left:8px;right:8px;transform:none;max-width:none}
body.shell.compact #landtip{max-width:calc(100vw - 24px)}
@media (max-width:820px),(max-height:520px){.panel,#help-btn,.ann-stack{zoom:1}}
body.shell.compact .sh-dock,body.shell.compact .sh-mini,body.shell.compact .dr,body.shell.compact #time,body.shell.compact .sh-tr,body.shell.compact .sh-alerts{zoom:1}
@media (max-height:520px){body.shell.compact .sh-tr{flex-direction:row} body.shell.compact .sh-alerts{top:54px;flex-direction:row-reverse} body.shell.compact #time{right:240px;flex-wrap:nowrap} body.shell.compact .sh-pop,body.shell.compact #keys{top:54px;right:6px;left:auto;max-width:min(420px,calc(100vw - 12px))} body.shell.compact .dr,body.shell.compact .dr.tall{height:calc(100vh - var(--dockH,96px) - 60px)} body.shell.compact .sh-banner{right:6px}}
/* your people (shell.js) */
.sh-plist{display:flex;flex-direction:column;gap:3px}
.sh-phead,.sh-prow{display:grid;grid-template-columns:14px 1fr 150px 30px;gap:8px;align-items:center}
.sh-phead{width:100%;box-sizing:border-box;font-size:11px;margin:0 0 3px;padding:0 6px} .sh-pcols{display:flex;gap:8px} .sh-pcols span{flex:1}
.sh-prow{padding:4px 6px;background:#141b19;box-shadow:inset 0 0 0 1px #24302c} .sh-prow.chosen{box-shadow:inset 0 0 0 1px #8a7444} .sh-prow.gone{opacity:.55}
.sh-pwho{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
body.shell .dr button.sh-pname{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0;font:600 14px var(--px);color:var(--gold2);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.sh-pbars{display:flex;gap:8px} .sh-pbar{flex:1;height:7px;background:#0b0f0e;box-shadow:inset 0 0 0 1px #2a3632} .sh-pbar b{display:block;height:100%}
.sh-pbar.aw b{background:#b8b096} .sh-pbar.love b{background:#e3b453} .sh-pbar.mix b{background:#d08a48} .sh-pbar.fear b{background:#c0503a}
.sh-pmark{display:block;width:10px;height:10px;transform:rotate(45deg);background:#a8a498;box-shadow:0 0 0 2px #1a140e;margin-left:2px}
.sh-pmark.r1,.sh-pmark.r2{background:#e8e2c8} .sh-pmark.r3,.sh-pmark.r4,.sh-pmark.r5{background:#f2cc5a} .sh-pmark.fear{background:#d06048}
body.shell .dr button.sh-find{position:relative;width:28px;height:26px;min-height:0;padding:0!important}
.sh-find::before{content:'';position:absolute;left:6px;top:4px;width:9px;height:9px;border:2px solid currentColor;border-radius:50%}
.sh-find::after{content:'';position:absolute;left:17px;top:15px;width:3px;height:7px;background:currentColor;transform:rotate(-45deg);transform-origin:top}
.sh-pgone{margin-top:12px}
/* storylines (cards/story.js, shell.js) */
.st-pop{position:fixed;left:50%;top:84px;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 220px);overflow:auto;z-index:9;padding:12px 14px;background:var(--sl);border:3px solid var(--fr);box-shadow:inset 0 0 0 2px #e3b453,0 8px 30px rgba(0,0,0,.55);color:var(--ink)}
.st-block{position:relative} .st-pop .st-block{margin:0;box-shadow:none;background:none;padding:0}
.st-head{display:flex;gap:10px;align-items:center;margin-bottom:8px} .st-head .ico{width:26px;height:26px}
.st-title{font:600 18px var(--px);color:var(--gold2);line-height:1.1} .st-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.st-faces{display:flex;gap:10px;align-items:flex-end;margin:4px 0 8px} .st-face{display:flex;flex-direction:column;align-items:center;gap:2px} .st-fn{font-size:12px}
.st-face canvas{box-shadow:0 0 0 2px #1a140e,0 0 0 3px #8a7444}
.st-text{font-size:15px;line-height:1.4;color:#ece3c4;margin:2px 0 10px}
.st-acts{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.st-choice .k-act-c{font-size:11px} .st-odds{font-weight:600} .st-good{color:#9ad07a} .st-mid{color:#e3b453} .st-bad{color:#ec7a5a}
.st-dark{box-shadow:inset 0 0 0 1px #8a3a2a!important} .st-dark .k-act-n{color:#e8a090} .st-dark-t{color:#ec7a5a}
.st-left{margin-top:6px;font-size:12px} .st-end{margin-top:6px;font:600 15px var(--px);color:var(--gold2)}
.st-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.st-past{margin-top:8px;font-size:12px;color:var(--dim)} .st-wait .st-title{font-size:15px}
.sh-stories{margin-bottom:12px} .sh-strow{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:4px 6px;background:#141b19;box-shadow:inset 0 0 0 1px #24302c;margin-top:3px;font-size:13px}
.sh-strow.open{box-shadow:inset 0 0 0 1px #e3b453} .sh-strow .ico{width:18px;height:18px}
body.compact .st-pop{top:64px;max-height:calc(100vh - 170px)}
.st-adv{font-size:13px;margin:-4px 0 10px;color:#cfc6aa;font-style:italic} .sh-known{margin:0 0 10px;font-size:14px}
/* more powers than fit a phone's width: the row scrolls sideways */
body.shell.compact #g-powers{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;max-width:100%;flex:1 1 auto;min-width:0} body.shell.compact #g-powers::-webkit-scrollbar{display:none}
body.shell.compact .sh-pow{min-width:0;max-width:100%}
.sh-empty{font-size:14px;line-height:1.45;padding:6px 2px} .sh-empty b{color:var(--gold2)}
.sh-legends{margin-top:12px} .sh-leg{font-size:13px;padding:2px 0}
.sh-gods{margin-bottom:12px} .sh-god{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:center;padding:4px 6px;font-size:13px} .sh-pmark.rd{background:#8a2a4a} .sh-pmark.rg{background:#9ad0f0}
/* sound and weather settings (v0.28) */
.sh-snd::after{content:'\266A'!important;position:absolute;inset:0!important;margin:0!important;display:flex;align-items:center;justify-content:center;font:19px/1 'Segoe UI Symbol','DejaVu Sans',sans-serif;color:var(--ink);background:none!important;width:auto!important;height:auto!important}
.sh-snd.off::after{opacity:.4;text-decoration:line-through}
body.shell .sh-sndpop{width:300px}
.sh-sndpop .sh-grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.sh-sndpop .sh-b.on{background:var(--acc);color:var(--sl0,#1a1410)}
.sh-srow{display:grid;grid-template-columns:118px 1fr 30px;gap:8px;align-items:center;margin:5px 0}
.sh-srow input{width:100%;accent-color:var(--acc)} .sh-sv{text-align:right;opacity:.7;font-size:12px}
.sh-wx{margin-top:10px!important} .sh-snote{margin-top:8px;font-size:12px}
.sh-wx .sh-lab{flex-basis:100%;margin-bottom:2px}