/* Additions for the standalone version */
html{background:var(--bg)}
body{min-height:100vh}
.wrap{padding-top:calc(20px + env(safe-area-inset-top,0px))}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.iconBtn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.credit{margin-top:-8px}
.credit a,.setBlock a{color:var(--ink)}
.opt{text-transform:none;letter-spacing:0;font-weight:400}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hint.err{color:#c0392b}
.sheet .panel{max-width:560px}

/* search results */
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.results:empty{display:none}
.result{display:flex;gap:10px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 8px;cursor:pointer}
.result:hover,.result:focus-visible{border-color:var(--accent)}
.result img,.result .noimg{flex:0 0 40px;width:40px;height:53px;object-fit:cover;border-radius:4px;background:var(--track)}
.result .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.result strong{font-size:.92rem;line-height:1.2;overflow-wrap:anywhere}
.result span{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.result .hh{font-family:var(--mono);font-weight:700;color:var(--ink)}

/* settings */
.setBlock{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.rowBtns{display:flex;gap:8px;flex-wrap:wrap}
label.btn{display:inline-flex;align-items:center}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.9rem;z-index:30;max-width:calc(100% - 32px);text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
input[type=search],input[type=date],input[type=url]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%;min-height:42px}
input[type=search]:focus-visible,input[type=date]:focus-visible,input[type=url]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* layout: one column on phones, sidebar + grid on tablets and wider */
.side,.main{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (min-width:900px){
  .wrap{max-width:1240px;display:grid;grid-template-columns:minmax(300px,360px) 1fr;grid-template-areas:"top top" "side main";column-gap:28px;row-gap:18px;align-items:start}
  .top{grid-area:top}
  .side{grid-area:side;position:sticky;top:calc(16px + env(safe-area-inset-top,0px));max-height:calc(100vh - 32px);overflow:auto;padding-bottom:8px}
  .main{grid-area:main}
  .list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 18px}
  .controls .row2{flex-wrap:nowrap}
  .fab{right:max(24px,calc((100vw - 1240px)/2 + 24px))}
}
@media (min-width:1300px){.list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media (min-width:700px) and (max-width:899px){
  .wrap{max-width:860px}
  .list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* order number sits under the platform band so it never covers the title */
.list .pos{top:30px;bottom:auto}

/* header buttons */
.topBtns{display:flex;gap:8px;flex:0 0 auto}

/* export as image */
.expPanel{max-width:760px}
.expOpts{display:flex;flex-direction:column;gap:12px}
.expPrev{position:relative;display:grid;place-items:center;min-height:160px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;overflow:hidden}
.expPrev img{display:block;max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:6px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4)}
.expPrev img:not([src]){display:none}
.expPrev .hint{margin:0}
.expPrev img[src] + .hint{display:none}
.expActions{justify-content:flex-end}
.expCount{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.expCount .stepper input{border:1px solid var(--line);border-radius:10px;background:var(--surface)}

/* ---- home + shelves ---- */
.back{display:inline-block;font-size:.88rem;color:var(--muted);text-decoration:none;padding:4px 0;margin-bottom:4px}
.back:hover{color:var(--ink)}
.homeWrap{max-width:1040px}
@media (min-width:900px){.homeWrap{display:flex;flex-direction:column;align-items:stretch}}
.home h1{font-size:1.7rem}
.shelves{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.shelf{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:inherit;text-decoration:none;min-width:0}
@media (prefers-reduced-motion:no-preference){a.shelf{transition:transform .2s ease,box-shadow .2s ease}a.shelf:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(0,0,0,.4)}}
.shelf .stack{display:flex;height:126px;align-items:flex-end;padding-left:4px}
.shelf .stack .case{width:80px;flex:0 0 80px;margin-right:-24px;border-radius:6px}
.shelf .stack .case:nth-child(2){transform:rotate(3deg) translateY(-4px)}
.shelf .stack .case:nth-child(3){transform:rotate(-2deg)}
.shelf .stack .art{padding:6px}.shelf .stack .art b{font-size:.55rem}
.shelf .stack .ph{width:80px;height:120px;flex:0 0 80px;margin-right:-24px;border-radius:6px;border:2px dashed var(--line);background:var(--bg)}
.shelf h2{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.shelf h2 i{font-style:normal;color:var(--k)}
.shelf .meta{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.shelf .meta b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.shelf .cur{font-size:.88rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.shelf .cur b{color:var(--ink);font-weight:700}
.shelf.g{--k:var(--accent)}.shelf.b{--k:var(--accent-b)}
.shelf.soon{background:transparent;border-style:dashed;color:var(--muted);cursor:not-allowed}
.shelf.soon h2{color:var(--muted)}
.soonTag{font:700 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

/* books use the blue accent */
body.kind-books{--accent:var(--accent-b);--accent-ink:var(--accent-b-ink)}
.bauthor{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.pph{flex-basis:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}

/* advanced settings */
details.adv summary{cursor:pointer;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::after{content:" ▸"}
details.adv[open] summary::after{content:" ▾"}
/* a field the search just filled in */
input.filled{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 14%,var(--surface))!important}
@media (prefers-reduced-motion:no-preference){input.filled{transition:background .6s ease}}
/* official name locked after a search pick */
.nameRow{display:flex;gap:8px;align-items:stretch}
.nameRow input{flex:1;min-width:0}
input.locked{background:var(--bg)!important;color:var(--ink);border-style:dashed!important;cursor:default}
.edition{font-size:.8rem;color:var(--accent);font-weight:700;overflow-wrap:anywhere}
/* reading speed rows: label, stepper, unit lined up */
.pph{display:grid;grid-template-columns:minmax(7.5em,auto) auto 1fr;align-items:center;gap:10px}
.pph .stepper input{width:64px}
.pph > span:last-child{white-space:nowrap}
/* phones: label takes what's left, stepper and unit keep their size, nothing spills out of the box */
@media (max-width:699px){
  .pph{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
  .pph .stepper{gap:4px}
  .pph .stepper input{width:58px;padding-left:2px;padding-right:2px}
  .pph .stepper button{width:34px;height:34px}
}

/* tablet and wider: pace is one full-width bar; now playing and play next sit side by side below it */
@media (min-width:700px){
  .side{position:static;max-height:none;overflow:visible;padding-bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
  .side > section{min-width:0}
  .side .pace{grid-column:1 / -1;flex-wrap:wrap;gap:12px 28px}
  .side .pace .q{flex:0 1 auto}
  .side .pace .totals{justify-content:flex-start}
}
/* wide tablets (landscape): everything in the pace bar fits on one line */
@media (min-width:1100px){
  .side .pace .pph{flex:0 0 auto;display:flex;gap:10px;padding-left:24px;border-left:1px dashed var(--line)}
  .side .pace .totals{flex:1 1 auto;flex-basis:auto;justify-content:flex-end;border-top:none;padding-top:0;border-left:1px dashed var(--line);padding-left:20px}
  .side .pace:has(.pph:not([hidden])) .totals{flex-basis:100%;justify-content:flex-start;border-left:none;padding-left:0;border-top:1px dashed var(--line);padding-top:10px}
}
@media (min-width:700px){
  .side .now{display:flex;flex-direction:column;gap:8px}
  .side .nowList{flex:1}
  .side .next{height:100%}
  .side .next[hidden]{display:none}
  .side:has(.next[hidden]) .now{grid-column:1 / -1}
}
@media (min-width:900px){
  .wrap{grid-template-columns:1fr;grid-template-areas:"top" "side" "main"}
  .list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* placeholder covers on empty shelves: a soft tinted case with an icon and two "title" lines */
.shelf .stack .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--k,var(--muted)) 22%,var(--surface)),color-mix(in srgb,var(--k,var(--muted)) 8%,var(--bg)));
  color:color-mix(in srgb,var(--k,var(--muted)) 75%,var(--ink));box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.shelf .stack .ph span{display:block;height:4px;border-radius:2px;background:currentColor;opacity:.28;width:46%}
.shelf .stack .ph span:last-child{width:30%}
.shelf .stack .ph svg{margin-bottom:4px}
.shelf.soon{--k:var(--muted)}
.shelf.soon .stack .ph{opacity:.55;box-shadow:none}
.shelf .stack .phReal{filter:saturate(.85)}

/* wishlist prices */
.list .ptag{position:absolute;right:7px;top:30px;z-index:1;font:700 .72rem var(--mono);padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;white-space:nowrap}
.list .ptag em{font-style:normal;color:#9be3b0;margin-right:2px}
.pBox{display:flex;flex-direction:column;gap:6px}
.pRow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none}
.pRow:hover{border-color:var(--ink)}
.pAmt{font-family:var(--mono);white-space:nowrap}
.pAmt s{color:var(--muted);font-size:.85em}
.pAmt em{font-style:normal;color:var(--good,#2f7d4f);font-weight:700;font-size:.85em}
.pSum{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.pSum:empty{display:none}
.pSum b{color:var(--ink);font-family:var(--mono)}
#priceNote:empty{display:none}

/* choose a book edition */
.edPick{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.edPick > .btn{align-self:flex-start}
#edState:empty,#edLangs:empty,.edGrid:empty{display:none}
.edGrid{list-style:none;margin:0;padding:2px;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:340px;overflow:auto}
.edItem{width:100%;display:flex;flex-direction:column;gap:3px;padding:4px;border:2px solid transparent;border-radius:10px;background:none;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.edItem img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;background:var(--line)}
.edItem span{font-size:.72rem;color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edItem[aria-pressed="true"]{border-color:var(--accent)}
.edItem:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.coverRow .prev{transition:outline-color .6s}
.coverRow .prev.filled{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.coverRow:has(+ .edPick .edGrid:not(:empty)) .prev{flex-basis:120px;width:120px}

/* feedback */
.sheet .fbForm{max-width:560px}
#fbText{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;width:100%;resize:vertical;min-height:120px}
#fbText:focus-visible,#fbContact:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#fbContact{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%;min-height:42px}
#fbState:empty{display:none}

/* ---------- opening screen ---------- */
.splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;cursor:pointer;
  animation:splashOut .35s ease 2.6s forwards} /* safety: hides itself even if the script never runs */
.splash.out{animation:splashOut .35s ease forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splashIn{display:flex;flex-direction:column;align-items:center;gap:18px}
.mark{position:relative;width:min(34vw,148px);aspect-ratio:1;border-radius:22%;overflow:hidden;box-shadow:0 18px 40px -18px rgba(217,134,28,.65)}
.mark .logo{display:block;width:100%;height:100%}
.mark .shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 42%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.18) 58%,transparent 70%);transform:translateX(-110%);pointer-events:none}
.word{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,7vw,2.2rem);letter-spacing:-.01em;color:var(--ink)}
.word span{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .splash .mark{animation:markIn .6s cubic-bezier(.2,.9,.3,1.2) both}
  .splash .logo rect[class]{transform-box:fill-box;transform-origin:left center;animation:barIn .45s cubic-bezier(.3,.8,.3,1) both}
  .splash .logo rect.b1{animation-delay:.25s}.splash .logo rect.b2{animation-delay:.38s}.splash .logo rect.b3{animation-delay:.51s}
  .splash .shine{animation:shine .9s cubic-bezier(.4,0,.2,1) .8s both}
  .splash .word{animation:wordIn .5s ease .55s both}
  .wn .mark .shine{animation:shine 1.1s ease-in-out .3s both}
}
@keyframes markIn{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:none}}
@keyframes shine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes wordIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- what's new ---------- */
.wn{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:auto;display:flex;justify-content:center;
  padding:calc(28px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.wn[hidden]{display:none}
.wnIn{width:100%;max-width:560px;display:flex;flex-direction:column;gap:20px}
.wnHead{display:flex;align-items:center;gap:16px}
.mark.small{width:64px;flex:0 0 64px;box-shadow:0 10px 24px -14px rgba(217,134,28,.7)}
.wn h2{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:2px 0 0}
.wnList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wnList li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.wnList .ic{flex:0 0 auto;font-size:1.35rem;line-height:1.2}
.wnList b{display:block;font-weight:700;margin-bottom:2px}
.wnList p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.4}
.wnGo{align-self:stretch;min-height:48px;font-size:1rem}
@media (min-width:700px){.wnGo{align-self:flex-end;min-width:200px}}
@media (prefers-reduced-motion:no-preference){
  .wn:not([hidden]) .wnList li{animation:wordIn .4s ease both}
  .wnList li:nth-child(2){animation-delay:.06s}.wnList li:nth-child(3){animation-delay:.12s}.wnList li:nth-child(4){animation-delay:.18s}
  .wnList li:nth-child(5){animation-delay:.24s}.wnList li:nth-child(6){animation-delay:.3s}
}

/* ---------- home: one card per shelf — icon and details on the left, covers fanned out on the right ---------- */
.homeSearch{position:relative;margin:4px 0 2px}
.homeSearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.homeSearch input{width:100%;min-height:46px;padding:10px 14px 10px 40px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.homeSearch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.homeResults{list-style:none;margin:0;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:2px;box-shadow:0 16px 36px -20px rgba(0,0,0,.45)}
.homeResults[hidden]{display:none}
.hRes{width:100%;display:flex;align-items:center;gap:12px;padding:8px;border:none;border-radius:10px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.hRes:hover,.hRes:focus-visible{background:var(--bg)}
.hRes .thumb{flex:0 0 36px;width:36px}
.hRes .thumb .art{padding:3px}.hRes .thumb .art b{font-size:.4rem}
.hRes .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hRes .t strong{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hRes .t > span{font-size:.85rem;color:var(--muted)}
.hRes.g .t > span > span:first-child{color:var(--accent);font-weight:700}
.hRes.b .t > span > span:first-child{color:var(--accent-b);font-weight:700}
.homeResults .none,.homeResults .more{padding:10px;color:var(--muted);font-size:.9rem}

.shelves{grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.shelves{grid-template-columns:1fr 1fr}.shelf.soon{grid-column:1 / -1}}
.shelf{flex-direction:row;gap:0;padding:0;overflow:hidden;position:relative;min-height:150px;isolation:isolate}
.shelfTxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px 12px 18px 18px;position:relative;z-index:1}
.shelfIcon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;color:var(--k);
  background:color-mix(in srgb,var(--k) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--k) 22%,transparent)}
.shelfBody{display:flex;flex-direction:column;gap:6px;min-width:0}
.shelf h2{font-size:1.35rem;display:block}
.shelf .meta{gap:2px 12px;font-size:.85rem}
.shelf .cur{font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf .cur:empty{display:none}

/* the covers: three cases fanned to the right, cut off by the card's edge */
.shelf .stack{flex:0 0 38%;max-width:220px;height:auto;align-self:stretch;position:relative;display:block;padding:0}
.shelf .stack{container-type:size}
.shelf .stack > .case,.shelf .stack > .ph{position:absolute;--ch:min(calc(100cqh - 36px),150px);height:var(--ch);width:calc(var(--ch) * 2 / 3);max-width:none;aspect-ratio:auto;margin:0;flex:none;border-radius:8px;
  box-shadow:-10px 0 22px -10px rgba(0,0,0,.55)}
/* each cover a little further right and lower; they run off the bottom and right edges of the card */
.shelf .stack > :nth-child(1){left:0;top:18px;z-index:1}
.shelf .stack > :nth-child(2){left:26%;top:26px;z-index:2}
.shelf .stack > :nth-child(3){left:52%;top:34px;z-index:3}
.shelf .stack .case:nth-child(n),.shelf .stack .ph:nth-child(n){transform:none}
.shelf .stack .art b{font-size:.6rem}
@media (prefers-reduced-motion:no-preference){
  .shelf .stack > *{transition:transform .25s ease}
  a.shelf:hover{transform:none}
  a.shelf:hover .stack > :nth-child(1){transform:translateY(-4px)}
  a.shelf:hover .stack > :nth-child(2){transform:translateY(-7px)}
  a.shelf:hover .stack > :nth-child(3){transform:translateY(-10px)}
}
a.shelf:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.shelf.soon{border-style:dashed;background:transparent}
.shelf.soon .shelfIcon{background:transparent;border-style:dashed;border-color:var(--line)}
.shelf.soon .stack{opacity:.6}
.shelf.soon .cur{margin-top:2px}

/* one + for every shelf: asks game or book */
.homeAdd{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.homeAdd[hidden]{display:none}
@media (min-width:900px){.homeAdd{right:max(24px,calc((100vw - 1040px)/2 + 24px))}}
.fab.round{position:static;width:58px;height:58px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.fab.round svg{transition:transform .2s ease}
.fab.round.open svg{transform:rotate(45deg)}
.addMenu{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.addMenu[hidden]{display:none}
.addMenu button{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:none;border-radius:12px;background:none;color:var(--ink);font:700 1rem var(--body);cursor:pointer;text-align:left}
.addMenu button:hover,.addMenu button:focus-visible{background:var(--bg)}
.addMenu .shelfIcon{width:38px;height:38px;border-radius:11px}
.addMenu [data-add="games"]{--k:var(--accent)}.addMenu [data-add="books"]{--k:var(--accent-b)}
.home .homeWrap{padding-bottom:96px}
@media (max-width:480px){
  .shelfTxt{padding:16px 8px 16px 16px;gap:10px}
  .shelfIcon{width:46px;height:46px;border-radius:13px}
  .shelf h2{font-size:1.2rem}
  .shelf .meta{font-size:.8rem}
  .shelf .cur{font-size:.8rem}
}

/* reordering the shelf cards */
.shelves .shelf.chosen{box-shadow:0 18px 40px -16px rgba(0,0,0,.5);outline:2px solid var(--k,var(--line));outline-offset:2px}
.shelves .shelf.ghost{opacity:.35}
.shelfHint{margin:2px 0 0;text-align:center;font-size:.82rem}
@media (min-width:900px){.shelves .shelf.soon{grid-column:auto}}

/* ---------- home: mix every shelf ---------- */
.mixSwitch{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:.92rem;font-weight:700;cursor:pointer;user-select:none;margin:2px 0}
.mixSwitch input{position:absolute;opacity:0;width:1px;height:1px}
.mixSwitch .track{position:relative;width:44px;height:26px;border-radius:999px;background:var(--track);border:1px solid var(--line);transition:background .2s ease}
.mixSwitch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s ease}
.mixSwitch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.mixSwitch input:checked + .track .knob{transform:translateX(18px)}
.mixSwitch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
.mixView{display:flex;flex-direction:column;gap:18px}
.mixView[hidden],.shelves[hidden],.shelfHint[hidden]{display:none}
.mixStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mStat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mStat b{font:700 1.5rem var(--mono);font-variant-numeric:tabular-nums}
.mStat .l{font-weight:700;font-size:.9rem}
.mStat .s{font-size:.8rem;color:var(--muted)}
@media (max-width:480px){.mixStats{grid-template-columns:1fr 1fr}.mStat:nth-child(3){grid-column:1 / -1;order:-1}}
.mixList .game.mix{cursor:default}
.mixList .kd{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mixList .g .kd{color:var(--accent)}.mixList .b .kd{color:var(--accent-b)}
.mixList .g .case{box-shadow:inset 0 -3px 0 var(--accent),0 8px 18px -8px rgba(0,0,0,.45)}
.mixList .b .case{box-shadow:inset 0 -3px 0 var(--accent-b),0 8px 18px -8px rgba(0,0,0,.45)}

/* ---------- first time: favourite shelves ---------- */
.onb{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:auto;display:flex;justify-content:center;
  padding:calc(36px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.onb[hidden]{display:none}
.onbIn{width:100%;max-width:520px;display:flex;flex-direction:column;gap:14px;margin:auto 0}
.onb h2{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:0;text-wrap:balance}
.onb .hint{margin:0}
.onbList{display:flex;flex-direction:column;gap:10px;margin:6px 0}
.onbOpt{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.onbOpt.g{--k:var(--accent)}.onbOpt.b{--k:var(--accent-b)}.onbOpt.f{--k:var(--muted)}
.onbOpt .ic{display:grid;place-items:center;color:var(--k)}
.onbOpt .t{flex:1;display:flex;flex-direction:column;gap:1px;font-weight:700;font-size:1.1rem}
.onbOpt .t small{font-weight:400;font-size:.8rem;color:var(--muted)}
.onbOpt .n{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 .95rem var(--mono);border:2px solid var(--line);background:var(--bg)}
.onbOpt[aria-pressed="true"]{border-color:var(--k);background:color-mix(in srgb,var(--k) 9%,var(--surface))}
.onbOpt[aria-pressed="true"] .n{background:var(--k);border-color:var(--k);color:var(--surface)}
.onbOpt:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.onbGo{min-height:50px;font-size:1rem}
.onbGo:disabled{opacity:.45;cursor:not-allowed}
.onbSkip{align-self:center;color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.onbOpt[aria-pressed="true"] .n{animation:wordIn .25s ease both}}

/* ---------- "Now playing" and "Play next": a header that folds, and wide banner rows ---------- */
.side .next.blk,.next.blk{background:none;color:inherit;padding:0;border-radius:0;height:auto}
.blk{display:flex;flex-direction:column;gap:10px}
.blkHead{display:flex;align-items:center;gap:12px;width:100%;padding:2px 0;border:none;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.blkIc{display:grid;place-items:center;color:var(--accent)}
body.kind-books .blkIc{color:var(--accent-b)}
.blkT{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.blkTitle{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.2}
.blkSub{font-size:.88rem;color:var(--muted)}
.blkHead .chev{display:grid;place-items:center;color:var(--ink);transition:transform .2s ease}
.blk.folded .chev{transform:rotate(180deg)}
.blk.folded .blkBody{display:none}
.blkHead:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}

.bRow{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:86px;padding:14px 16px;border:none;border-radius:14px;overflow:hidden;isolation:isolate;
  background:#1a2220;color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 24px -16px rgba(0,0,0,.6)}
.bRow .bg{position:absolute;inset:0;z-index:-1}
.bRow .bg img,.bRow .bgArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.bRow .bgArt{background:linear-gradient(120deg,hsl(var(--h) 50% 38%),hsl(calc(var(--h) + 40) 55% 18%))}
.bRow .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,18,.88) 0%,rgba(8,12,18,.62) 50%,rgba(8,12,18,.28) 100%)}
.bRow .ring{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:conic-gradient(#fff calc(var(--p,0) * 1%),rgba(255,255,255,.28) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.bRow .txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.bRow strong{font-weight:700;font-size:1.2rem;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bRow .sub{font-size:.84rem;color:rgba(255,255,255,.82);font-family:var(--mono)}
@media (prefers-reduced-motion:no-preference){.bRow{transition:transform .15s ease}.bRow:hover{transform:translateY(-2px)}}
.bRow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side .blk .nowList{flex:0 0 auto}
.blk[hidden]{display:none}

/* drag handle on the left of each shelf card: only the handle moves the card, so scrolling never grabs it */
.dragH{flex:0 0 auto;align-self:stretch;display:grid;place-items:center;width:30px;margin-right:-8px;color:var(--muted);opacity:.7;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dragH:hover{opacity:1;color:var(--ink)}
.dragH:active{cursor:grabbing}
.shelf .shelfTxt{padding-left:8px}
.sortable-fallback{opacity:.95!important;box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.shelf,.shelf img{-webkit-user-drag:none}

/* "done in" (green) and "over the average" (orange) as small tags */
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font:700 .72rem var(--body);letter-spacing:.01em;white-space:nowrap;line-height:1.5}
.pill.g{background:color-mix(in srgb,var(--play) 16%,var(--surface));color:var(--play);border:1px solid color-mix(in srgb,var(--play) 30%,transparent)}
.pill.o{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.bRow .pill.g{background:rgba(47,125,98,.92);color:#fff;border-color:transparent}
.bRow .pill.o{background:rgba(217,134,28,.95);color:#fff;border-color:transparent}
.bRow .sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.list .info .line .pill{font-size:.68rem;padding:1px 7px}

/* platform / format filter next to the sort menu; blue when a filter is on */
#platSel{max-width:52%;margin-left:auto}
/* the platform menu looks like a coloured tag, tinted by the platform chosen */
#platSel{--t:var(--muted);appearance:none;-webkit-appearance:none;border-radius:999px;font-weight:700;font-size:.9rem;
  padding:8px 34px 8px 14px;min-height:40px;color:color-mix(in srgb,var(--t) 72%,var(--ink));
  background-color:color-mix(in srgb,var(--t) 14%,var(--surface));border:1.5px solid color-mix(in srgb,var(--t) 45%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23889' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
#platSel[data-p="Switch 2"],#platSel[data-p="Switch"]{--t:#e4000f}
#platSel[data-p="PC"]{--t:#5b6b7a}
#platSel[data-p="PlayStation"]{--t:#0070d1}
#platSel[data-p="Xbox"]{--t:#107c10}
#platSel[data-p="Mobile"]{--t:#8a4fd1}
#platSel[data-p="Paperback"],#platSel[data-p="Hardcover"],#platSel[data-p="Ebook"],#platSel[data-p="Audiobook"]{--t:var(--accent-b)}
#platSel[data-p="Manga"],#platSel[data-p="Comic"]{--t:#d4537e}
#platSel option{color:var(--ink);background:var(--surface);font-weight:400}
.controls .row2{gap:8px}
@media (max-width:699px){.controls .row2 .chips{flex:1 1 100%}.controls .row2 select{flex:1 1 0;min-width:0;max-width:none;margin-left:0}}
@media (min-width:700px) and (max-width:1099px){.controls .row2{flex-wrap:wrap}.controls .row2 .chips{flex:1 1 100%}.controls .row2 select{flex:0 1 auto}}

/* ---------- films and series: a violet accent ---------- */
:root{--accent-f:#8a4fd1;--accent-f-ink:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-f:#c2a2f5;--accent-f-ink:#1a1030}}
:root[data-theme="dark"]{--accent-f:#c2a2f5;--accent-f-ink:#1a1030}
body.kind-films{--accent:var(--accent-f);--accent-ink:var(--accent-f-ink)}
body.kind-films .blkIc{color:var(--accent-f)}
.shelf.f{--k:var(--accent-f)}
.onbOpt.f{--k:var(--accent-f)}
.hRes.f .t > span > span:first-child{color:var(--accent-f);font-weight:700}
.addMenu [data-add="films"]{--k:var(--accent-f)}

/* ---------- settings: sections and list rows ---------- */
.setNav{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.setNav button{flex:1;min-height:38px;border:none;border-radius:9px;background:none;color:var(--muted);font:700 .92rem var(--body);cursor:pointer}
.setNav button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.setTab{display:flex;flex-direction:column;gap:12px}
.setTab[hidden]{display:none}
.setTab > .setBlock:first-child{border-top:none;padding-top:0}
.setList{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.setRow{display:block;border:none;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;width:100%}
.setRow:first-child{border-top:none}
.setRow > summary,.setRow .sumLike,.setRow.link{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;cursor:pointer;list-style:none}
.setRow > summary::-webkit-details-marker{display:none}
.setRow .rowT{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.setRow .rowT b{font-weight:700}
.setRow .rowT small{font-size:.8rem;color:var(--muted)}
.setRow .rowChev{color:var(--muted);flex:0 0 auto;transition:transform .2s ease}
.setRow[open] > summary .rowChev{transform:rotate(90deg)}
.setRow .rowBody{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
.setRow.off{opacity:.6}.setRow.off .sumLike{cursor:default}
.setRow.link:hover,.setRow > summary:hover{background:var(--bg)}
.rowIc{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:0 0 36px}
.rowIc.g{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.rowIc.b{color:var(--accent-b);background:color-mix(in srgb,var(--accent-b) 14%,var(--surface))}
.rowIc.f{color:var(--accent-f);background:color-mix(in srgb,var(--accent-f) 14%,var(--surface))}
.setTab .credits{border-top:none;padding-top:4px}
.tmdbAttr{display:flex;align-items:center;gap:14px}
.tmdbLogo{height:34px;width:auto;flex:0 0 auto;display:block}
.tmdbAttr .hint{margin:0}

/* old address → taskpile.org */
.moved{z-index:95}
.moved .mark.small{width:56px;flex:0 0 56px;border-radius:14px}
.movedSteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.movedSteps[hidden],#movedDone[hidden],#movedDl[hidden]{display:none}

/* ---------- music: a teal accent ---------- */
:root{--accent-m:#1d8f7c;--accent-m-ink:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-m:#5fd0bd;--accent-m-ink:#0b2420}}
:root[data-theme="dark"]{--accent-m:#5fd0bd;--accent-m-ink:#0b2420}
body.kind-music{--accent:var(--accent-m);--accent-ink:var(--accent-m-ink)}
body.kind-music .blkIc{color:var(--accent-m)}
.shelf.m,.onbOpt.m{--k:var(--accent-m)}
@media (min-width:900px){.shelves{grid-template-columns:1fr 1fr}}

/* the way back to all shelves: a clear secondary button at the top */
.wrap .back.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;margin:0 0 12px;border-radius:999px;font-size:.92rem;font-weight:700;color:var(--ink);text-decoration:none;min-height:38px}
.wrap .back.btn svg{color:var(--accent)}

/* home: data and legal links sit at the very bottom like a footer */
.home .homeWrap{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding-bottom:16px}
.homeFoot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line)}
.homeFoot .note{margin:4px 0}

/* feedback: icon and words, so it's clear what it does */
.iconBtn.fbBtn{width:auto;padding:0 14px 0 11px;gap:7px;border-radius:999px;font:700 .88rem var(--body);display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:420px){.iconBtn.fbBtn{padding:0 11px;font-size:.82rem}}
.smLbl{display:none}
/* phones: the first thing in the header (title or back button) shares the top row with the buttons; the rest goes underneath */
@media (max-width:560px){
  .lgLbl{display:none}.smLbl{display:inline}
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:center}
  .top > div:first-child{display:contents}
  .top > div:first-child > *{grid-column:1 / -1}
  .top > div:first-child > :first-child{grid-column:1;grid-row:1;justify-self:start}
  .top > .topBtns{grid-column:2;grid-row:1}
  .wrap .back.btn{margin:0}
}

/* "use it like an app" banner on the home page */
.installBar{display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.installBar[hidden]{display:none}
.installBar img{width:44px;height:44px;border-radius:11px;flex:0 0 44px}
.ibTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ibTxt b{font-weight:700}
.ibTxt span{font-size:.86rem;color:var(--muted)}
.ibTxt span[hidden]{display:none}
.ibSteps{margin:4px 0 0;padding-left:20px;font-size:.88rem;display:flex;flex-direction:column;gap:3px}
.ibSteps[hidden]{display:none}
.ibBtns{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ibBtns .btn{min-height:38px;padding:0 14px;white-space:nowrap}
.iconBtn.ibClose{width:34px;height:34px}
#installBlock[hidden]{display:none}
@media (max-width:420px){.installBar{flex-wrap:wrap}.ibBtns{width:100%;justify-content:flex-end}}
#miState:empty{display:none}
#miState{color:var(--ink)!important;font-weight:700}