/* Label colours (pins, pills, charts) are the --c-* variables in :root below, change them there. */
/* mushrooms.css: styles for mushrooms.html. Load after recipeform.css (uses its colour variables, --serif and --butter). */
/* Mushroom log: builds on recipeform.css (colours, nav, hero, footer, buttons) */
:root{--border:color-mix(in srgb,var(--header-text) 16%,transparent);--c-edible:#2E9E5B;--c-conditional:#F2C230;--c-inedible:#6F7C88;--c-poisonous:#D64545;--c-deadly:#8B1A1A;--ok:var(--c-edible);--bad:#D64545;--hal:#8E5BD9;--c-varies:#4F7CAC;--cond:var(--c-conditional)}
body::before{display:none}
.wrap{width:min(94%,1100px);margin:0 auto}
.narrow{max-width:680px;margin:0 auto}
.bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.25rem 0}
.bar .grow{flex:1}
.tab{padding:.55rem 1.1rem;border:1px solid var(--border);border-radius:999px;background:var(--container-bg);color:var(--header-text);font:inherit;font-weight:600;cursor:pointer}
.tab.on{background:var(--second);border-color:var(--second);color:var(--nav-text)}
.tab:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.btn.main{background:var(--accent);color:#fff}
.btn.danger{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.card{background:var(--container-bg);border:1px solid var(--border);border-radius:14px;padding:1rem}
.view h2{font-family:var(--serif);font-size:1.5rem;color:var(--header-text);margin:.5rem 0 1rem}
.wrap :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select){width:100%;padding:.65rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--container-bg);color:var(--header-text);font:inherit}
.wrap :is(input,textarea,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.wrap label.l,.wrap .l{display:block;margin-bottom:.35rem;font-size:.85rem;font-weight:600;color:var(--header-text)}
.field{margin-bottom:1rem}
.row{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
.row3{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.row3{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0}
.chip span{display:inline-block;padding:.4rem .85rem;border:2px solid var(--c);border-radius:999px;font-weight:600;font-size:.85rem;color:var(--header-text);cursor:pointer;transition:background .15s}
.chip input:checked+span{background:var(--c);color:var(--t,#fff)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sug .chip-s{padding:.4rem .8rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--butter) 45%,var(--container-bg));color:var(--header-text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.sug .chip-s:hover{background:var(--accent);color:#fff}
.msg{font-size:.85rem;color:var(--sub-text);margin-top:.4rem;min-height:1.2em}
.panel{padding:1rem 1rem .25rem;margin-bottom:1rem}
.filters{display:grid;gap:.75rem 1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
#map{height:min(62vh,560px);min-height:360px;border-radius:14px;border:1px solid var(--border);z-index:0}
#map.picking{cursor:crosshair;outline:3px solid var(--third)}
.pickbar{background:var(--third);color:#3a2a10;font-weight:700;padding:.6rem 1rem;border-radius:10px;margin-bottom:.75rem}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.75rem 0;font-size:.85rem;color:var(--sub-text)}
.dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-right:.35rem;vertical-align:-.1em}
.pin{background:none;border:0}
.pin span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45);font-size:12px;line-height:1}
.pin.deadly span{border-color:#4a1010;color:#fff}
.pin i{position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:var(--hal);color:#fff;font:normal 10px/14px system-ui;text-align:center;border:1.5px solid #fff}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.item h3{font-family:var(--serif);font-size:1.15rem;color:var(--header-text);margin-bottom:.15rem}
.item .la{font-style:italic;color:var(--sub-text);font-size:.9rem;margin-bottom:.5rem}
.item p{margin:.4rem 0;font-size:.9rem}
.item .meta{color:var(--sub-text);font-size:.85rem}
.b{display:inline-block;margin:0 .3rem .3rem 0;padding:.15rem .6rem;border-radius:999px;background:var(--c);color:var(--t,#fff);font-size:.78rem;font-weight:700}
.b.h{background:var(--hal)}
.acts{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.thumbs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.thumbs div{position:relative}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;display:block}
.thumbs button{position:absolute;top:-6px;right:-6px;width:1.4rem;height:1.4rem;border-radius:50%;border:0;background:var(--header-text);color:var(--primary);cursor:pointer;line-height:1}
.empty{padding:2rem;text-align:center;color:var(--sub-text)}
.leaflet-popup-content{font:14px Arial,sans-serif;color:#1B4332}
.leaflet-popup-content img{width:100%;border-radius:8px;margin-top:.4rem}
.cb-shapes svg{width:100%;height:100%}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- v3 additions ---- */
.wrap input{min-width:0}
.field.dates{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.chip.sm span{padding:.25rem .65rem;font-size:.78rem;border-width:1.5px}
.tools{margin:.75rem 0}
.chip-s{padding:.4rem .8rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--butter) 45%,var(--container-bg));color:var(--header-text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.chip-s:hover{background:var(--accent);color:#fff}
.z{cursor:zoom-in}
#lb{border:0;background:transparent;max-width:96vw;max-height:92vh;margin:auto;overflow:visible}
#lb::backdrop{background:rgba(0,0,0,.82)}
#lb img{display:block;max-width:94vw;max-height:88vh;border-radius:12px;cursor:zoom-out}

.cond{padding:.9rem;border-radius:12px;background:color-mix(in srgb,var(--cond) 14%,var(--container-bg));border:1px solid color-mix(in srgb,var(--cond) 45%,transparent)}
.cond .chips{margin-bottom:.6rem}
.condnote{padding:.5rem .7rem;border-left:4px solid var(--cond);background:color-mix(in srgb,var(--cond) 12%,transparent);border-radius:6px}
.warn{padding:.5rem .7rem;border-left:4px solid var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border-radius:6px}
.feat{display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;font-size:.88rem;margin:.5rem 0}
.feat dt{font-weight:700;color:var(--header-text)}
.feat dd{margin:0}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px var(--third)}100%{box-shadow:0 0 0 0 transparent}}
/* quiz */
.qtitle{font-family:var(--serif);font-size:1.4rem;color:var(--header-text);margin-bottom:.6rem}
.xp{height:.7rem;border-radius:999px;background:color-mix(in srgb,var(--header-text) 12%,transparent);overflow:hidden;margin-bottom:.5rem}
.xp i{display:block;height:100%;background:var(--third);border-radius:999px}
.qhead{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--sub-text);margin-bottom:.9rem}
.qprompt{font-size:1.1rem;color:var(--header-text);margin-bottom:1rem}
.qimg{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:12px;margin-bottom:1rem}
.qopts{display:grid;gap:.5rem;margin-bottom:1rem}
.qo{justify-content:flex-start;text-align:left;border-radius:12px;padding:.75rem 1rem}
.qo.ok{background:var(--ok);color:#fff}
.qo.no{background:var(--bad);color:#fff}
.qbig{font-family:var(--serif);font-size:2.4rem;color:var(--header-text);margin-bottom:.25rem}
.good{color:var(--ok)}.bad{color:var(--bad)}

/* ---- v4 additions ---- */
.chips.even{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:.45rem}
.chips.even .chip span{display:block;text-align:center;padding:.45rem .4rem}
.chips.mon{grid-template-columns:repeat(6,1fr)}
.chips.mon .chip span{padding:.35rem .2rem;font-size:.8rem}
@media(max-width:520px){.chips.even:not(.mon){grid-template-columns:repeat(2,1fr)}.chips.mon{grid-template-columns:repeat(4,1fr)}}
/* date inputs must never overflow their column (iOS/Safari give them a wide intrinsic size) */
.row>.field,.filters>.field,.field.dates>div{min-width:0}
.wrap input[type=date]{display:block;width:100%;min-width:0;max-width:100%;min-height:2.75rem;-webkit-appearance:none;appearance:none;text-align:left}
.wrap input[type=date]::-webkit-date-and-time-value{text-align:left}
#timeF{margin-top:.25rem}
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);max-width:min(92vw,520px);padding:.75rem 1.1rem;border-radius:12px;background:var(--header-text);color:var(--primary);z-index:2000;font-size:.9rem;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.review{padding:.8rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--third) 25%,var(--container-bg));border:1px solid var(--third);margin-bottom:1rem;font-size:.9rem}
.field.missing>label,.field.missing>.l{color:#B7791F}
.field.missing>label::after,.field.missing>.l::after{content:' (not filled yet)';font-weight:400}
.field.missing :is(input,textarea,select){border-color:var(--third)}
/* quiz hero, character, badges */
.hero{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.avbox{flex:none;display:grid;place-items:center;padding:.5rem;border-radius:18px;background:color-mix(in srgb,var(--mint) 55%,var(--container-bg))}
.herotxt{flex:1;min-width:0}
.cname{font-family:var(--serif);font-size:1.3rem;font-weight:700;border:0!important;background:transparent!important;padding:.1rem 0!important;box-shadow:none!important;border-bottom:1px dashed var(--border)!important;border-radius:0!important}
.swatches{display:flex;gap:.5rem;margin-top:.4rem}
.sw{width:1.6rem;height:1.6rem;border-radius:50%;border:3px solid var(--container-bg);box-shadow:0 0 0 1px var(--border);cursor:pointer}
.sw.on{box-shadow:0 0 0 3px var(--header-text)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;text-align:center;font-size:.8rem;color:var(--sub-text)}
.stats b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--header-text)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:1rem}
.badge{padding:.6rem;border-radius:12px;border:1px dashed var(--border);opacity:.5}
.badge.on{opacity:1;border:1px solid var(--third);background:color-mix(in srgb,var(--third) 18%,transparent)}
.badge b{display:block;font-size:.85rem;color:var(--header-text)}
.badge small{font-size:.72rem;color:var(--sub-text)}
.hud{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.hud .qhead{flex:1;flex-wrap:wrap;margin:0;justify-content:flex-start;gap:.3rem 1rem}
.hearts{color:var(--bad);letter-spacing:.1em}
.timer{height:.4rem;border-radius:999px;background:color-mix(in srgb,var(--header-text) 10%,transparent);overflow:hidden;margin-bottom:1rem}
.timer i{display:block;height:100%;background:var(--third);animation:shrink 8s linear forwards}
@keyframes shrink{from{width:100%}to{width:0}}
.avatar.happy{animation:hop .5s ease-out}
.avatar.sad{animation:shake .4s}
@keyframes hop{40%{transform:translateY(-10px)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.avatar,.timer i{animation:none!important}}

/* ---- v5 additions ---- */
[hidden]{display:none!important}
.seg{padding:.45rem 1rem;border:1px solid var(--border);border-radius:999px;background:var(--container-bg);color:var(--header-text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.seg.on{background:var(--second);border-color:var(--second);color:var(--nav-text)}
.b.mine{background:var(--header-text);color:var(--primary)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}
.tile{text-align:center;padding:.9rem .5rem}
.tile b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1;color:var(--header-text)}
.tile span{font-size:.8rem;color:var(--sub-text)}
.grid2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.ct{font-family:var(--serif);font-size:1.1rem;color:var(--header-text);margin-bottom:.6rem}
.chart{display:block;width:100%;height:auto;color:var(--sub-text)}
.hb{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;gap:.5rem;align-items:center;margin:.35rem 0;font-size:.85rem}
.hb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--header-text)}
.hbar{height:.8rem;border-radius:999px;background:color-mix(in srgb,var(--header-text) 8%,transparent);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:999px}
.hb b{color:var(--header-text)}
.mgrid{display:grid;gap:3px;align-items:center;font-size:.72rem;color:var(--sub-text)}
.mgrid i{display:block;aspect-ratio:1;border-radius:4px}
.mgrid .mh{text-align:center}

.wrap *,.wrap *::before,.wrap *::after{box-sizing:border-box}

/* ---- v6 ---- */
details{border-top:1px solid var(--border);padding-top:.75rem}
details summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-weight:600;color:var(--header-text);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:none;width:.55rem;height:.55rem;border-right:2px solid var(--sub-text);border-bottom:2px solid var(--sub-text);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.panel details{margin-bottom:.75rem}
/* equal-length bar tracks, only the filled part varies */
.hb{grid-template-columns:minmax(0,38%) minmax(0,1fr) 2.6rem}
.hb b{text-align:right}
/* found-by-me marker in the top right corner of a lexicon entry */
.item{position:relative}
.item.mine h3{padding-right:2.4rem}
.found{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--c-edible);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* ---- footer always sits at the bottom of the screen ---- */
body{min-height:calc(100vh - 50px);min-height:calc(100dvh - 50px)} /* the 50px body margin made the page 50px too tall */
.content{display:flex;flex-direction:column}
.content>main.wrap{flex:1 0 auto;width:min(94%,1100px);padding-bottom:5rem}
.content>.footer{margin-top:auto}

/* ---- accounts: view-only mode and sign-in dialog ---- */
body.viewonly .edit-only{display:none!important}
body.viewonly .acts:not(:has(.btn:not(.edit-only))){display:none}
#loginDlg{border:0;border-radius:16px;padding:1.4rem;background:var(--container-bg);color:var(--body-text);width:min(92vw,380px);margin:auto}
#loginDlg::backdrop{background:rgba(0,0,0,.6)}
#loginDlg h2{font-family:var(--serif);font-size:1.5rem;color:var(--header-text);margin-bottom:.4rem}
#loginDlg .hint{margin:0 0 1rem}
#loginErr{min-height:1.2em;margin:0 0 .75rem;color:var(--bad);font-size:.85rem}

/* quiet sign-in / sign-out line in the footer */
.authline{margin-top:8px;opacity:.65}
.authline button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.authline button:hover{opacity:.8}

/* ---- v8: identification marks, unsure photos, look-alike to-do ---- */
.found.unsure{background:#8A8F96;font-weight:700;font-size:1.05rem}
.ph{position:relative;display:block}
.ph.unsure img{filter:grayscale(1);opacity:.55}
.ph.unsure::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:700 1.7rem var(--serif);color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.7);pointer-events:none}
.thumbs button.tq{top:auto;right:auto;bottom:-6px;left:-6px;background:#8A8F96;color:#fff;font-weight:700;font-size:.8rem}
.pin b{position:absolute;bottom:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:#6F7C88;color:#fff;font:700 10px/14px system-ui;text-align:center;border:1.5px solid #fff}
.todo{padding:.5rem .7rem;border-left:4px solid var(--third);background:color-mix(in srgb,var(--third) 14%,transparent);border-radius:6px;font-size:.9rem}
/* ---- quiz: modes, settings, shop, level-up ---- */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.6rem;margin-bottom:1rem}
.btn.mode{flex-direction:column;justify-content:center;gap:.25rem;padding:.8rem .5rem;border-radius:16px;text-align:center;line-height:1.2}
.mode .em{font-size:1.7rem;line-height:1}
.qset{margin-top:.5rem}
.spores{margin:.3rem 0;color:var(--header-text)}
.btn.skip{margin-top:.25rem;background:transparent;color:var(--sub-text);border:1px dashed var(--border)}
.shoptabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.sitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:1rem}
.sitem{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem .4rem;border:1px solid var(--border);border-radius:14px;background:var(--container-bg);color:var(--header-text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;text-align:center}
.sitem small{font-weight:400;color:var(--sub-text)}
.sitem.on{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--container-bg))}
.sitem.locked{opacity:.8}
.sw2{width:1.6rem;height:1.6rem;border-radius:50%;box-shadow:0 0 0 1px var(--border)}
.debug{margin:1rem 0}
#lvlDlg{border:0;border-radius:20px;padding:1.6rem;background:var(--container-bg);color:var(--body-text);width:min(92vw,360px);margin:auto;text-align:center}
#lvlDlg::backdrop{background:rgba(0,0,0,.6)}
#lvlDlg h2{font-family:var(--serif);font-size:1.8rem;color:var(--header-text);margin-top:.4rem}
.lvlpop .avatar{animation:hop .8s ease-out 2}
/* quiz modes: Mixed on its own row, the six games in an even grid */
.modes{grid-template-columns:repeat(2,1fr)}
.modes .mode:first-child{grid-column:1/-1}
@media(min-width:560px){.modes{grid-template-columns:repeat(3,1fr)}}

/* ---- v10: logbook navigation, list view, groups, extras ---- */
.logNav{margin-top:0}
.layoutSw{display:inline-flex;gap:.4rem}
.list{display:grid;gap:.5rem}
details.entry{padding:0;border-top:0;border-radius:14px}
.entry summary{padding:.7rem .9rem;flex-wrap:wrap;justify-content:flex-start;gap:.3rem .75rem}
.entry summary::after{margin-left:auto}
.entry .found{position:static;flex:none;width:1.6rem;height:1.6rem;box-shadow:none}
.entry .en{flex:1 1 11rem;min-width:0;color:var(--header-text)}
.entry .en i{color:var(--sub-text);font-weight:400;font-size:.88rem}
.entry .eb{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .3rem}
.entry .eb .b{margin:0}
.entry .d{font-size:.8rem;font-weight:400;color:var(--sub-text);margin-left:.2rem}
.entry[open] summary{border-bottom:1px solid var(--border)}
.ebody{padding:.2rem .9rem .9rem}
.b.grp{background:var(--header-text);color:var(--primary)}
.found.unknown{background:transparent;border:2px dashed #8A8F96;color:#8A8F96;font-weight:700}
.tiles{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tile small{display:block;margin-top:.15rem;font-size:.72rem;color:var(--sub-text)}
.tile b.txt{font-size:1.15rem;line-height:1.25;word-break:break-word;padding:.2rem 0}
.chart.bars .bar{cursor:pointer;outline:none}
.chart.bars .bar:hover .bb,.chart.bars .bar:focus .bb{fill:var(--accent)}
.chartcap{min-height:1.3em;margin:.4rem 0 0}
.xrow{display:grid;grid-template-columns:1fr 1.4fr auto;gap:.4rem;margin-bottom:.4rem;align-items:center}
.remove-x{width:2rem;height:2rem;border:0;border-radius:50%;background:transparent;color:var(--sub-text);font-size:1.2rem;cursor:pointer}
.remove-x:hover{background:color-mix(in srgb,#d64545 14%,transparent);color:#d64545}
.menuRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-bottom:1rem}
.menuRow .btn{justify-content:center}
.badge{text-align:center;padding:.8rem .5rem}
.badge .bi{display:block;font-size:1.8rem;line-height:1.2;margin-bottom:.2rem}
.badge:not(.on) .bi{filter:grayscale(1)}
#locBtn{white-space:nowrap}
.ebody p{margin:.45rem 0}
.entry summary .b{font-size:.75rem}

/* ---- v11: game ---- */
.avbox{background:transparent;padding:0;overflow:hidden}
.avatar{display:block;border-radius:16px}
.avatar.dead{animation:shake .5s}
.hud .qhead{min-width:0}
.btn.quit{margin-left:auto;padding:.4rem .8rem;background:transparent;color:var(--sub-text);border:1px solid var(--border);font-size:.85rem}
.seg.sm{padding:.3rem .8rem;font-size:.82rem}
.shoptabs.sub{margin-top:-.4rem}
.errs{margin:.4rem 0 .6rem 1.1rem}
.errs li{margin:.25rem 0;font-size:.9rem}
.errs .x{color:var(--bad);font-weight:700}
.mode small{font-weight:400;opacity:.8}
#buyDlg{border:0;border-radius:20px;padding:1.6rem;background:var(--container-bg);color:var(--body-text);width:min(92vw,360px);margin:auto;text-align:center}
#buyDlg::backdrop{background:rgba(0,0,0,.6)}
#buyDlg h2{font-family:var(--serif);font-size:1.5rem;color:var(--header-text);margin:.4rem 0}

/* ---- v12: quiz menu, shop hierarchy, achievements ---- */
#quizBox{scroll-margin-top:4.5rem}
.iconbtn{width:2.3rem;height:2.3rem;border:1px solid var(--border);border-radius:50%;background:var(--container-bg);font-size:1.05rem;cursor:pointer;line-height:1}
.iconbtn:hover{background:color-mix(in srgb,var(--accent) 10%,var(--container-bg))}
#quizIcons{display:inline-flex;gap:.4rem}
.sporeRow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.35rem}
.sporeRow .spores{margin:0}
.btn.shopbtn{padding:.4rem .95rem;font-size:.9rem;background:var(--accent);color:#fff}
.spores.big{font-size:1.25rem}
.subhead{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.subhead .qtitle{margin:0}
.backarrow{width:2.1rem;height:2.1rem;border:0;border-radius:50%;background:transparent;color:var(--sub-text);font-size:1.4rem;line-height:1;cursor:pointer}
.backarrow:hover{background:color-mix(in srgb,var(--header-text) 8%,transparent);color:var(--header-text)}
.linkdanger{border:0;background:none;padding:0;color:var(--sub-text);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.linkdanger:hover{color:var(--bad)}
.resetRow{margin-top:.5rem;text-align:right}
.flag{font-size:1.1em;vertical-align:-.05em}
/* shop: big category tabs > underlined subcategories > item tiles */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;padding:.25rem;border-radius:16px;background:color-mix(in srgb,var(--header-text) 7%,transparent);margin-bottom:.7rem}
.cat{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem .1rem;border:0;border-radius:12px;background:transparent;color:var(--sub-text);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;min-width:0}
.cat .ci{font-size:1.25rem;line-height:1}
.cat.on{background:var(--container-bg);color:var(--header-text);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.subtabs{display:flex;flex-wrap:wrap;gap:0 1.1rem;border-bottom:1px solid var(--border);margin-bottom:.9rem}
.stab{padding:.45rem 0;border:0;border-bottom:3px solid transparent;background:none;color:var(--sub-text);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;margin-bottom:-1px}
.stab.on{color:var(--header-text);border-bottom-color:var(--third)}
.sitem.owned{background:color-mix(in srgb,var(--c-edible) 14%,var(--container-bg));border-color:color-mix(in srgb,var(--c-edible) 55%,transparent)}
.sitem.owned small{color:var(--c-edible);font-weight:700}
.sitem.on{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--container-bg))}
.sitem.on small{color:var(--accent)}
.sitem.locked{background:var(--container-bg);opacity:.85}
/* achievements */
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:.6rem}
.ach{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.7rem .5rem;border:1px solid var(--border);border-radius:14px;text-align:center;background:var(--container-bg)}
.ach .bi{font-size:1.7rem;line-height:1.1}
.ach:not(.t1):not(.t2):not(.t3) .bi{filter:grayscale(1);opacity:.5}
.ach b{font-size:.85rem;color:var(--header-text)}
.ach small{font-size:.72rem;color:var(--sub-text)}
.ach .med{display:flex;gap:.15rem;font-size:.95rem}
.ach .med i{font-style:normal;filter:grayscale(1);opacity:.3}
.ach .med i.on{filter:none;opacity:1}
.ach .xp.mini{width:100%;height:.35rem;margin:.2rem 0 0}
.ach.t1{border-color:#B87333}.ach.t2{border-color:#A8B0B8}.ach.t3{border-color:#E8B923;background:color-mix(in srgb,#E8B923 12%,var(--container-bg))}
details.alts{margin:.25rem 0 1rem}

/* ---- v13: sub-navigation, compact entries, boxes, stats, dialogs ---- */
.logNav{gap:0 1.3rem;margin:.1rem 0 1rem;border-bottom:1px solid var(--border);padding:0}
.logNav .stab{font-size:.95rem;padding:.5rem 0}
.lay{display:grid;place-items:center;width:1.9rem;height:1.9rem;border:0;border-radius:8px;background:transparent;color:var(--sub-text);cursor:pointer}
.lay:hover{color:var(--header-text)}
.lay.on{background:color-mix(in srgb,var(--header-text) 10%,transparent);color:var(--header-text)}
.layoutSw{gap:.1rem}
.btn.sm{padding:.3rem .8rem;font-size:.8rem}
.resetRow2{text-align:right;margin:.25rem 0 .5rem}
.lang{font-style:italic;font-weight:600;font-size:.85em;color:var(--sub-text)}
/* compact list rows: marker | name + latin | edibility dot + date */
details.entry summary{display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;grid-template-areas:"mk en ed" "mk la dt";gap:.05rem .6rem;align-items:center;justify-content:initial;padding:.65rem .9rem}
details.entry summary::after{content:none}
.entry .mk{grid-area:mk;display:flex;justify-content:center}
.entry .en{grid-area:en;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem;min-width:0;flex:initial;font-weight:700;color:var(--header-text)}
.entry .la{grid-area:la;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;font-size:.85rem;color:var(--sub-text);min-height:1.1em}
.entry .ed{grid-area:ed;justify-self:end}
.entry .dt{grid-area:dt;justify-self:end;font-size:.78rem;color:var(--sub-text);white-space:nowrap}
.entry .found{width:1.2rem;height:1.2rem;font-size:.72rem;box-shadow:none}
.entry .found svg{width:.72rem;height:.72rem}
.entry .en .b{margin:0;font-size:.7rem;padding:.05rem .5rem}
.ebody .pills{margin:.1rem 0 .5rem}
.edot{position:relative;display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.22);font-size:.6rem;line-height:1;color:#fff}
.edot.dead{border-color:#4a1010}
.edot.none{background:transparent;border:2px dashed #8A8F96;box-shadow:none}
.edot i{position:absolute;top:-5px;right:-5px;width:.7rem;height:.7rem;border-radius:50%;background:var(--hal);color:#fff;font:normal .5rem/.7rem system-ui;text-align:center;border:1px solid #fff}
/* boxes inside an expanded entry */
.box{margin:.7rem 0;padding:.6rem .8rem;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--header-text) 4%,transparent)}
.box h5{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub-text)}
.box .chips{margin:.2rem 0}.box p{margin:.3rem 0}
.box.grpbox{border-color:color-mix(in srgb,var(--c-varies) 50%,transparent);background:color-mix(in srgb,var(--c-varies) 8%,var(--container-bg))}
.box.grpbox h5{color:var(--c-varies)}
.box.lookbox{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--container-bg))}
.box.lookbox h5{color:var(--bad)}
.box .todo{background:none;border:0;padding:0}
/* stats */
.statsbar{margin-top:0}
select.mini{width:auto!important;padding:.3rem .6rem!important;font-size:.85rem}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.tile.big{padding:1.1rem .5rem}
.tile.big b{font-size:2.6rem}
.glance{margin:.75rem 0;padding:.8rem 1rem}
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.55rem 1rem;margin:0}
.gl dt{font-size:.72rem;color:var(--sub-text)}
.gl dd{margin:0;font-weight:700;font-size:.95rem;color:var(--header-text);word-break:break-word}
#askDlg{border:0;border-radius:20px;padding:1.6rem;background:var(--container-bg);color:var(--body-text);width:min(92vw,360px);margin:auto;text-align:center}
#askDlg::backdrop{background:rgba(0,0,0,.6)}
#askDlg h2{font-family:var(--serif);font-size:1.4rem;color:var(--header-text);margin:.2rem 0 .5rem}

/* no flash of half-loaded content: the views stay hidden until the first render (shown anyway after 4 s as a safety net) */
body.loading .view{visibility:hidden;animation:reveal 0s 4s forwards!important}
@keyframes reveal{to{visibility:visible}}