/* shroomIQ: Night Forest (dark) with a Daylight Forest (light) counterpart. Theme set via ; the color scheme via (no attribute = Night Forest). */ :root,[data-theme=dark]{--iq:#e09654;--bg:#0f1a14;--panel:#17251d;--panel2:#1d3126;--line:#2a3f33;--ink:#e9f1e4;--mute:#93a79a;--go:#b6f36b;--on-go:#0f1a14;--no:#ff8f5a;--tab:#0b130e;--glow:#b6f36b55;--shadow:#000a;--scrim:#0d1610;--tag-go:#b6f36b;--tag-no:#ff8f5a;--mix:#e9c46a} [data-theme=light]{--iq:#a85c34;--bg:#f2f6ee;--panel:#ffffff;--panel2:#e4ecdb;--line:#cbd9c1;--ink:#14231a;--mute:#53675a;--go:#2d7a31;--on-go:#ffffff;--no:#bf4519;--tab:#ffffff;--glow:#2d7a3140;--shadow:#1d2f2338;--scrim:#0d1610;--tag-go:#b6f36b;--tag-no:#ff8f5a;--mix:#8a6100} /* v1.80.0: Chanterelle, Foxfire and Amethyst color schemes, each with a dark and a light version. --scrim tints the fade over photos; --tag-go/--tag-no color the swipe tags, which always sit on a dark scrim. */ [data-scheme=chanterelle][data-theme=dark]{--iq:#e09654;--bg:#1b130c;--panel:#261b12;--panel2:#312318;--line:#47341f;--ink:#f6ebdc;--mute:#b59f87;--go:#f4ae3d;--on-go:#1b130c;--no:#c4a0ff;--tab:#140e08;--glow:#f4ae3d55;--shadow:#000a;--scrim:#1a0f07;--tag-go:#f4ae3d;--tag-no:#c4a0ff;--mix:#ecd77a} [data-scheme=chanterelle][data-theme=light]{--iq:#a85c34;--bg:#faf3e8;--panel:#ffffff;--panel2:#f2e5d1;--line:#e2cfb3;--ink:#2b1c0f;--mute:#73604b;--go:#a5560a;--on-go:#ffffff;--no:#7546c0;--tab:#ffffff;--glow:#a5560a38;--shadow:#3a240f30;--scrim:#1a0f07;--tag-go:#f4ae3d;--tag-no:#c4a0ff;--mix:#7f6400} [data-scheme=foxfire][data-theme=dark]{--iq:#e09654;--bg:#0b1120;--panel:#121b2e;--panel2:#18243b;--line:#26344f;--ink:#e5edfb;--mute:#8f9db9;--go:#5cf0d4;--on-go:#05211c;--no:#ff8fb3;--tab:#080c18;--glow:#5cf0d466;--shadow:#000c;--scrim:#070c18;--tag-go:#5cf0d4;--tag-no:#ff8fb3;--mix:#f3cf6e} [data-scheme=foxfire][data-theme=light]{--iq:#a85c34;--bg:#edf2f8;--panel:#ffffff;--panel2:#dde7f1;--line:#c3d1e0;--ink:#0e1a2c;--mute:#4c5d75;--go:#0a7a70;--on-go:#ffffff;--no:#c0336b;--tab:#ffffff;--glow:#0a7a7038;--shadow:#0e1a2c30;--scrim:#070c18;--tag-go:#5cf0d4;--tag-no:#ff8fb3;--mix:#866100} [data-scheme=amethyst][data-theme=dark]{--iq:#e09654;--bg:#1e1733;--panel:#282042;--panel2:#33295a;--line:#4a3d73;--ink:#f2ecfb;--mute:#ab9fc8;--go:#b36cee;--on-go:#1e1733;--no:#ff9a1e;--tab:#18122a;--glow:#9a1bb866;--shadow:#000c;--scrim:#1a1230;--tag-go:#b36cee;--tag-no:#ff9a1e;--mix:#f1d670} [data-scheme=amethyst][data-theme=light]{--iq:#a85c34;--bg:#f2eefa;--panel:#ffffff;--panel2:#ebe1f3;--line:#d6c6e8;--ink:#2a1c3f;--mute:#5f5278;--go:#8a17a8;--on-go:#ffffff;--no:#b84d00;--tab:#ffffff;--glow:#8a17a840;--shadow:#2a1c3f30;--scrim:#1a1230;--tag-go:#b36cee;--tag-no:#ff9a1e;--mix:#7d6000} :root{--gutter:clamp(16px,5vw,32px);--serif:Fraunces,Georgia,serif;--sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif} *{box-sizing:border-box}button,a,input,select,summary,label,[role=button],[role=menuitem],[role=menuitemcheckbox]{touch-action:manipulation}[hidden]{display:none!important} html{-webkit-text-size-adjust:100%}img,svg,video,canvas{max-width:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px max(var(--gutter),env(safe-area-inset-right)) 96px max(var(--gutter),env(safe-area-inset-left));overflow-wrap:break-word} header,#status,#stage,footer{width:100%;max-width:440px}body>*{min-width:0}footer>*{max-width:100%} h1{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 0;font:600 1.75rem/1.1 var(--serif);letter-spacing:-.01em} h2{font:600 1.25rem var(--serif);margin:0 0 10px}h3{margin:18px 0 8px;font-size:.9rem;color:var(--mute);font-weight:500} button,input,select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer} input{cursor:text}button:disabled{opacity:.5;cursor:default} button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--go);outline-offset:2px} .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ic.on{fill:currentColor} #ku,.seg{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px} #ku{margin-bottom:14px}#deckName{margin:0;font:600 1.1rem var(--serif);overflow-wrap:anywhere} #ku button,.seg button{flex:1;min-width:0;min-height:40px;border:0;background:none;border-radius:999px;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ku button[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--go);color:var(--on-go)} #status{color:var(--mute);font-size:.9rem;min-height:1.4em;margin:12px 0} #stage{position:relative} #peek{position:absolute;inset:0;transform:translateY(14px) scale(.94);border-radius:28px;background:var(--panel2);opacity:.7} #card{position:relative;z-index:1;border-radius:28px;overflow:hidden;background:var(--panel);touch-action:none;user-select:none;cursor:grab;box-shadow:0 0 0 1px var(--line),0 24px 48px -16px var(--shadow),0 0 60px -24px var(--glow)} #card.locked{cursor:default} @media(prefers-reduced-motion:no-preference){#card{transition:transform .3s cubic-bezier(.2,1.2,.3,1),opacity .25s}} #photo{display:block;width:100%;height:var(--cardH);object-fit:cover;pointer-events:none} #shade{position:absolute;left:0;right:0;bottom:0;padding:64px 20px 16px;text-align:center;color:#e9f1e4;background:linear-gradient(transparent,color-mix(in srgb,var(--scrim) 94%,transparent));pointer-events:none} #dots{letter-spacing:.3em} .addbtn{display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--scrim) 70%,transparent);color:#fff}.addbtn.in{color:var(--go)} #addBtn{position:absolute;top:10px;right:10px;width:44px;height:44px} .pnav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:48px;padding:0;border:0;font-size:1.6rem;line-height:1;background:color-mix(in srgb,var(--scrim) 65%,transparent);color:#fff} #prevP{left:0;border-radius:0 12px 12px 0}#nextP{right:0;border-radius:12px 0 0 12px} #tagL,#tagR{position:absolute;z-index:2;left:50%;top:50%;padding:6px 16px;border:3px solid;border-radius:10px;opacity:0;font-size:1.3rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:color-mix(in srgb,var(--scrim) 80%,transparent);pointer-events:none} /* centred over the photo's starting place; JS fades them with the drag */ #tagL{color:var(--tag-no);transform:translate(-50%,-50%) rotate(-10deg)}#tagR{color:var(--tag-go);transform:translate(-50%,-50%) rotate(10deg)} #quiz,#settings,#grid,#decks,#practice,#article,#compare,#stats,#help{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px} #quiz{margin-top:14px}#quiz h2{font-size:1.15rem} #opts button,#coachOpts button{display:block;width:100%;min-height:48px;text-align:left;margin-bottom:8px}#opts em,#coachOpts em{color:var(--mute);font-family:var(--serif)} #nameCard{display:none} #card.rev #photo,#card.rev #shade,#card.rev .pnav,#card.rev #addBtn{display:none} #card.rev #nameCard{display:grid;place-items:center;min-height:min(30vh,200px);padding:28px 20px;text-align:center;font-size:1.5rem;line-height:1.25} #nameCard em{display:block;margin-top:6px;font-family:var(--serif);font-size:1.1rem;color:var(--mute)} #opts.photos{display:grid;grid-template-columns:1fr 1fr;gap:8px} #opts.photos button{padding:0;min-height:0;margin:0;overflow:hidden;aspect-ratio:1} #opts.photos img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} #opts button:disabled,#coachOpts button:disabled{opacity:1}#opts .ok,#coachOpts .ok{border-color:var(--go);background:var(--panel2)}#opts .bad,#coachOpts .bad{border-color:var(--no)} #settings label,#explore label{display:block;margin:14px 0 6px}#settings output,#explore output{color:var(--go);font-weight:700} input[type=range]{width:100%;padding:0;accent-color:var(--go)}.note,#setmsg,#decksMsg,#practiceMsg,#gridNote{color:var(--mute);font-size:.9rem;min-height:1.4em} #place,#xPlace,#renameRow,#genusRow{display:flex;gap:8px;margin:10px 0}#place input,#xPlace input,#renameRow input,#genusSel{flex:1;min-width:0} #find{width:100%}#resetDeckBtn,#resetDeckGo,#eraseBtn,#mixResetBtn,#eraseGo,#delGo,#resetGo,#removeGo,#deckList .warn{border-color:var(--no)} .sw{display:flex;align-items:center;justify-content:space-between;width:100%} .knob{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:var(--line)} .knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .2s} .sw[aria-checked=true] .knob{background:var(--go)}.sw[aria-checked=true] .knob::after{transform:translateX(20px);background:var(--on-go)} #gridItems{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} #gridItems figure{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--panel2)} #gridItems img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} #gridItems figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 8px 8px;font:.75rem/1.25 var(--serif);color:#e9f1e4;background:linear-gradient(transparent,color-mix(in srgb,var(--scrim) 93%,transparent))} #gridItems em{color:#b4c4b9} #gridItems .addbtn{position:absolute;top:6px;right:6px;width:26px;height:26px;opacity:.85}#gridItems .addbtn .ic{width:14px;height:14px} .thumb{display:block;width:100%;padding:0;border:0;border-radius:0;background:none}.thumb:hover,.thumb:focus-visible{outline:2px solid var(--go)} .again{position:absolute;top:8px;left:8px;padding:3px 8px;border:0;border-radius:999px;font-size:.7rem;background:color-mix(in srgb,var(--scrim) 70%,transparent);color:#fff} #practiceHead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}#practiceHead h2{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}#practiceHead button{flex:none} #practicePlay{background:var(--go);color:var(--on-go);border-color:var(--go);font-weight:700;padding:10px 18px}#practicePlay:disabled{opacity:.45} ul{list-style:none;padding:0;margin:0} #deckList li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)} .dname{flex:1;min-width:0;overflow-wrap:anywhere}#deckList button,#members button.small{padding:4px 10px;font-size:.8rem}#deckList button{flex:none;width:5em;padding-inline:0;text-align:center} #results li,#members li{display:flex;align-items:center;gap:10px;padding:6px 0} #results img,#members img{width:48px;height:48px;object-fit:cover;border-radius:10px} .rname{flex:1;line-height:1.25;font-family:var(--serif)}#results em,#members em{color:var(--mute)}.empty{color:var(--mute)} #results .addbtn{width:36px;height:36px;flex:none;background:var(--panel2)}#results .tap{cursor:pointer}#results .rname.tap:hover{text-decoration:underline;text-decoration-color:var(--mute)}#results .rname.tap:focus-visible{outline:2px solid var(--go);outline-offset:2px;border-radius:6px} select{border-radius:12px} dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:20px;max-width:360px;padding:20px} dialog::backdrop{background:#000a}dialog p{margin:0 0 10px}dialog .mute{color:var(--mute)}dialog form{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} #actions{display:flex;align-items:center;gap:34px;margin:26px 0 8px} #no,#yes{display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%} #infoBtn{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--mute);font:italic 600 1.35rem/1 Georgia,'Times New Roman',serif} #infoBtn:hover,#infoBtn:focus-visible{color:var(--ink);border-color:var(--mute)} #no{border:1.5px solid var(--no);color:var(--no)}#yes{border:1.5px solid var(--go);background:color-mix(in srgb,var(--go) 14%,transparent);color:var(--go);box-shadow:0 0 28px -4px var(--glow)} /* lighter selected style, as the segmented tabs */ footer{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mute);font-size:.8rem;text-align:center} #tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--tab);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0)} #tabsIn{display:flex;max-width:480px;margin:0 auto;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))} .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:4px;border:0;border-radius:12px;background:none;color:var(--mute);font-size:.75rem} .tab[aria-current=page]{color:var(--go)} #quiz{position:relative;z-index:2} #landing{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:0;overflow:hidden} #landing h2{font-size:clamp(1.45rem,7vw,1.8rem);margin-bottom:6px}#landing h2 span{white-space:nowrap}.lead{color:var(--mute);margin:0} /* v2.1.0: the Mosaic Welcome page: photo banner, photo tiles that show real species */ .lbanner{height:210px;position:relative;background:var(--panel2)}.lbanner img{display:block;width:100%;height:210px;object-fit:cover;object-position:50% 45%} .lbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a120d77 0,#0a120d00 30%,var(--panel) 100%)} .lbody{position:relative;z-index:1;margin-top:-52px;padding:0 20px 20px} #landing h3{margin:16px 0 10px} /* v2.2.0: the Welcome prompt stands out: heavier, larger and in the main text colour */ #landing h3.lpick{margin:18px 0 10px;font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:.01em} #lChoice{display:grid;grid-template-columns:1fr 1fr;gap:10px} #lChoice #lCustom{grid-column:1/-1} #lChoice button{position:relative;overflow:hidden;display:block;min-height:96px;padding:0;text-align:left;border:2px solid #ffffff22;background:var(--panel2);color:#fff} #lChoice #lCustom{display:flex;align-items:center;gap:8px;min-height:68px;padding:10px 12px;background:var(--panel2);border-color:var(--line)} /* v2.3.0: the Welcome photos are fixed: the bundled images show from the first paint (no fade, no live pick) */ .lt-img,.lt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #lChoice button:not(#lCustom)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 20%,#06100aeb)} .lt-t{position:absolute;left:12px;right:12px;bottom:9px;z-index:2;display:flex;flex-direction:column;gap:1px;text-align:left;text-shadow:0 1px 3px #000a} #lChoice strong{font-size:.95rem}#lChoice small{color:#e3ece5;font-size:.76rem;line-height:1.25} #lChoice #lCustom .lt-t{position:static;flex:1;min-width:0;text-shadow:none}#lChoice #lCustom strong{color:var(--ink)}#lChoice #lCustom small{color:var(--mute)} .lt-circ{flex:none;display:flex;margin-right:30px}.lt-circ span{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--panel2);margin-left:-14px;position:relative;background:var(--panel)} .lt-circ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #lChoice button[aria-pressed=true]{border-color:var(--go);box-shadow:0 0 0 1px var(--go)} #lChoice button[aria-pressed=true]::after{content:"✓";position:absolute;right:8px;top:8px;z-index:3;width:22px;height:22px;border-radius:50%;background:var(--go);color:var(--on-go);font:700 13px/22px var(--sans);text-align:center} #lChoice #lCustom[aria-pressed=true]::after{top:50%;margin-top:-11px;right:10px} #landing label{display:block;margin:14px 0 6px}#landing output{color:var(--go);font-weight:700} #lPlace{display:flex;gap:8px;margin:10px 0}#lQ{flex:1;min-width:0}#lDeck{width:100%} #lMsg{color:var(--mute);font-size:.9rem;min-height:1.4em} #lStart{width:100%;margin-top:12px;min-height:52px;border:0;background:var(--go);color:var(--on-go);font-weight:700} #lResume{display:block;margin:10px auto 0;border:0;background:none;color:var(--mute);text-decoration:underline} #status.cheer{text-align:center;color:var(--ink);font:600 1.4rem var(--serif);margin:16px 0 12px} .chk{display:flex;align-items:center;gap:8px;margin:6px 0 10px;color:var(--mute);font-size:.9rem}.chk input{padding:0;width:18px;height:18px;accent-color:var(--go)} #genusFind{width:100%}#genusResults,#genusPreview{list-style:none;padding:0;margin:6px 0} .gpick{display:block;width:100%;text-align:left;margin-bottom:6px} #genusPick label{display:block;margin:12px 0 6px}#genusPick output{color:var(--go);font-weight:700}#genusInfo{color:var(--mute);font-size:.9rem;margin:8px 0 0} #genusPreview li{display:flex;align-items:center;gap:10px;padding:6px 0}#genusPreview img{width:48px;height:48px;object-fit:cover;border-radius:10px}#genusPreview em{color:var(--mute)} #genusGo{width:100%;margin-top:10px;border-color:var(--go)} #genusResults{padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);max-height:280px;overflow:auto} .gnote{padding:6px 8px;color:var(--mute);font-size:.85rem}.gnote em{font-family:var(--serif)} #genusResults .gpick{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:8px;border:0;border-radius:8px;background:none} #genusResults .gpick:hover,#genusResults .gpick:focus-visible{background:var(--panel)}.gpick small{color:var(--mute);white-space:nowrap} /* v1.2.1: study article, compare, mix-ups */ .sw+.note{margin-top:8px}.sw{margin-top:4px} .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .aname{margin:0 0 2px;font:600 1.6rem/1.15 var(--serif)}.aname em{display:block;font-size:1.05rem;font-weight:400;color:var(--mute)} .banner{margin:12px 0;padding:10px 12px;border:1px solid var(--no);border-radius:12px;font-size:.85rem;color:var(--ink);background:var(--panel2)} .strip{display:flex;gap:8px;overflow-x:auto;margin:12px -4px 0;padding:0 4px 4px;scroll-snap-type:x mandatory} .strip figure{flex:0 0 78%;margin:0;scroll-snap-align:start}.strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--panel2)} .fine{font-size:.72rem;color:var(--mute);line-height:1.35;margin-top:3px;overflow-wrap:anywhere} .lineage{display:flex;flex-wrap:wrap;gap:4px 6px;margin:12px 0 0;font-size:.78rem;color:var(--mute)}.lineage li::after{content:"›";margin-left:6px;opacity:.6}.lineage li:last-child::after{content:""}.lineage b{color:var(--ink);font-weight:500} .toc{display:flex;gap:6px;overflow-x:auto;margin:14px -4px 6px;padding:0 4px 6px}.toc button{flex:none;padding:6px 12px;border-radius:999px;font-size:.8rem} details.asec{border-top:1px solid var(--line);padding:10px 0}details.asec summary{cursor:pointer;font:600 1.05rem var(--serif);list-style:none;display:flex;justify-content:space-between;align-items:center} details.asec summary::-webkit-details-marker{display:none}details.asec summary::after{content:"+";color:var(--go);font:700 1.2rem var(--sans)}details.asec[open] summary::after{content:"−"} details.asec p{margin:8px 0;line-height:1.55;font-size:.95rem}details.asec h4{margin:14px 0 2px;font-size:.85rem;color:var(--go);font-weight:700} .chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chips button{padding:6px 10px;border-radius:999px;font-size:.82rem}.chips em{color:var(--mute)} .abox{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.abox h3{margin:0 0 6px} .cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cols>div{min-width:0;display:flex;flex-direction:column}.cols img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px} .cols h3{margin:8px 0 2px;color:var(--ink);font:600 .95rem/1.2 var(--serif)}.cols h3 em{display:block;font-weight:400;color:var(--mute);font-size:.82rem}.cols p{font-size:.82rem;line-height:1.45;margin:6px 0}.cols button{width:100%;margin-top:auto;padding:8px;font-size:.8rem} #mixItems li{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)} #mixItems .pair{display:flex;gap:4px}#mixItems img{width:44px;height:44px;object-fit:cover;border-radius:10px} #mixItems .rname{font-size:.85rem}#mixItems .rname small{display:block;color:var(--mute);font-family:var(--sans)}#mixItems button{padding:5px 9px;font-size:.75rem} #mixItems .acts{display:flex;flex-direction:column;gap:4px} /* Mix-ups grid: one tile per pair, both photos side by side */ #gridItems.pairs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}#gridItems .pairtile{flex:0 0 min(100%,232px);display:flex;gap:2px}#gridItems .pairtile>*{flex:1;min-width:0}#gridItems .pairtile img.done{opacity:.45} .textbtn{display:block;margin:16px auto 0;padding:6px 12px;font-size:.8rem;color:var(--mute)} /* v1.2.2: deck thumbnails */ .dthumb{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--panel2)}.dthumb.empty{display:grid;place-items:center;font-size:1.25rem;opacity:.6} /* v1.2.3: Play-tab progress bar */ #progress{display:flex;align-items:center;gap:10px;width:100%;max-width:440px;margin-bottom:8px;color:var(--ink);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums} #pTrack{position:relative;flex:1;height:22px;border-radius:999px;overflow:hidden;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)} #pFill{width:0;height:100%;border-radius:999px;background:var(--go);box-shadow:0 0 12px -2px var(--glow)} @media(prefers-reduced-motion:no-preference){#pFill{transition:width .4s cubic-bezier(.2,.8,.3,1)}} /* v1.2.4: % complete inside the bar, just right of the fill edge (tucked inside the fill once it nears the end) */ #pPct{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:8px;font-size:.72rem;line-height:1;color:var(--ink);white-space:nowrap;pointer-events:none} #pTrack.late #pPct{transform:translateX(-100%);padding:0 8px 0 0;color:var(--on-go)} /* 82%+: label sits inside the fill's right end, dark on the bright fill */ @media(prefers-reduced-motion:no-preference){#pPct{transition:left .4s cubic-bezier(.2,.8,.3,1)}} /* v1.2.5: deck switcher removed from the top of Play; info line above the progress bar (tap opens Collection since v1.2.6) */ header{margin-bottom:10px}#logo{display:block;width:auto;height:44px}.iq{color:var(--iq)}#status:empty{display:none} #info{display:block;max-width:100%;margin:0 0 8px;padding:4px 12px;border:0;border-radius:999px;background:none;color:var(--ink);font:600 1.3rem/1.25 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #info::after{content:" ›";color:var(--go);font-weight:700}#info:hover{color:var(--go)} /* v1.3.0: Decks > Create New, "Explore by location", Create Deck! */ #createBtn{display:block;width:100%;min-height:48px;border:0;background:var(--go);color:var(--on-go);font-weight:700} #resetDeckBtn,#eraseBtn,#mixResetBtn{display:block;width:100%;min-height:48px;margin-top:16px}#createBtn{margin-top:16px;min-height:52px} #explore{margin-bottom:0}#practice details.asec:last-of-type{border-bottom:1px solid var(--line)}#practice details.asec>input[type=search]{margin-top:10px}#xLoc{margin:4px 0 10px}#xMsg{color:var(--mute);font-size:.9rem;min-height:1.4em;margin:8px 0 0} #xGo{width:100%;margin-top:12px;border-color:var(--go)}#xMsg.good{color:var(--go);font-size:.8rem}#explore{overflow-wrap:anywhere} /* v1.4.0: Mix-ups deck row */ .dthumb.open,.dname.open{cursor:pointer}.dname.open:focus-visible{outline:2px solid var(--go);outline-offset:2px;border-radius:6px} .dname .sub{display:block;margin-top:2px;font-size:.75rem;color:var(--mute)} /* v1.4.5: the app title is a button that opens the welcome page */ #home{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto;padding:0;border:0;border-radius:12px;background:none;text-align:center}#home:hover{opacity:.85} /* v1.4.6: Start new game is centered on the Settings page */ /* v1.4.7: Mix-ups page "Clear list" button and its confirmation */ #clearMix{display:block;margin:16px auto 0;border-color:var(--no)}#clearGo{border-color:var(--no)} /* v1.4.8: the left value is the completed count; right-aligned so it sits against the bar like the total on the other side */ #pMin{text-align:right} /* v1.5.0: photo quality control in Settings (a .seg is the same pill switch as the Collection tabs) */ .seg{margin:6px 0 0}.seg+.note{margin-top:8px} /* v1.5.1: after an answer: feedback line, Study | Compare row, add-to-deck, and one primary Next card */ #after{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)} #result{display:flex;gap:8px;align-items:baseline;margin:0 0 12px;line-height:1.4}#result::before{flex:none;font-weight:700} #result.ok::before,#result.ok b{color:var(--go)}#result.bad::before,#result.bad b{color:var(--no)} #result.ok::before{content:"✓"}#result.bad::before{content:"✗"}#result b{font-weight:700}.sp{font-family:var(--serif)} #qActs{display:grid;grid-template-columns:1fr 1fr;gap:8px}#qActs.one{grid-template-columns:1fr} #qActs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:48px;padding:8px 10px;font-size:.9rem;text-align:center} #qActs small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);font-size:.72rem} #lookalike{margin:10px auto 0;text-align:center}#lookalike button{max-width:100%;padding:6px 12px;font-size:.8rem;color:var(--mute)}#lookalike .addmenu{left:50%;transform:translateX(-50%)} /* "Add to Deck ›": a button that opens a menu of your decks; a small "✓ Added to !" note appears below it, and the button stays */ .addwrap{position:relative;display:inline-block;max-width:100%} .addnote{margin-top:4px;font-size:.75rem;color:var(--mute)}.addnote p{margin:2px 0}.addnote p::before{content:"✓ ";color:var(--go);font-weight:700} .addmenu{position:absolute;z-index:10;top:calc(100% + 4px);right:0;min-width:160px;max-width:min(260px,80vw);max-height:40vh;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--panel2);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px -8px var(--shadow);text-align:left} .addmenu li.new{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}.addmenu[hidden]{display:none}.addmenu button{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:10px;font-size:.85rem;color:var(--ink);overflow-wrap:anywhere}.addmenu button:hover,.addmenu button:focus-visible{background:var(--panel)} #mixItems .addwrap{display:block}#mixItems .addwrap>button{width:100%}#mixItems .addnote{max-width:150px} #next{display:block;width:100%;min-height:52px;margin:12px 0;border:0;background:var(--go);color:var(--on-go);font-weight:700} /* Deck menu for the "+" buttons */ #deckMenu{position:fixed;z-index:30;min-width:190px;max-width:min(300px,90vw);max-height:50vh;overflow:auto;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px -8px var(--shadow)} #deckMenu ul{margin:0;padding:0;list-style:none}#deckMenu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:.9rem;text-align:left;overflow-wrap:anywhere} #deckMenu button:hover,#deckMenu button:focus-visible{background:var(--panel)}#deckMenu .tick{flex:none;width:1.1em;color:var(--go);font-weight:700} #deckMenu li.new{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}#deckMenu p{margin:4px 10px 6px;min-height:1.1em;font-size:.75rem;color:var(--go)} #practiceMsg.good{color:var(--go);font-size:.8rem} /* v1.23.9: the version label sits the same 52px below "Start new game" as that button sits below the Appearance switch */ #ver{margin:40px 0 0} /* v1.24.0: mix-up coach (bottom of the Compare page since v1.24.2) */.coachhost{margin-top:4px} #coachProg{display:flex;justify-content:space-between;gap:8px;margin:10px 0;font-size:.85rem;color:var(--mute)}#coachProg b{color:var(--ink);font-weight:600} .coachimg{display:block;width:100%;height:min(46vh,380px);object-fit:cover;border-radius:16px;margin:8px 0 12px} #coachOpts{margin-top:4px}#coachOpts button{text-align:left;margin-bottom:8px;width:100%} #coachDone{display:flex;flex-direction:column;gap:8px;margin-top:8px}#coachDone button{min-height:48px} #gridHead h2{margin:0} #compare .phead h2{margin:0} /* v1.25.0: seasonality ("When it fruits") and the Fruiting this month deck row */ .season{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:120px;margin:12px 0 6px} .season .mo{display:flex;flex-direction:column;align-items:center;height:100%;font-size:.7rem;color:var(--mute)} .season .col{flex:1;display:flex;align-items:flex-end;width:100%} .season .bar{width:100%;border-radius:6px 6px 2px 2px;background:var(--go);opacity:.5} .season .peak .bar{opacity:1}.season .now{color:var(--ink);font-weight:700}.season .now .bar{outline:2px solid var(--ink);outline-offset:1px} #article .seg{margin:6px 0 4px}#article .asec .fine{margin-top:2px} .btnpad{flex:none;width:5em} /* v1.26.0: "Where and when" (observation map, loaded on tap) */ .mapbox{margin:6px 0 10px} #wwmap{height:min(52vh,320px);border-radius:14px;overflow:hidden;isolation:isolate;border:1px solid var(--line)} #wwmap .leaflet-container{font:inherit} #articleName .aname{margin:0} #article .phead{align-items:flex-start;gap:12px} /* v1.27.1: active-deck badge on each deck's thumbnail */ .thwrap{position:relative;flex:none;width:44px;height:44px} #deckList button.actbadge{position:absolute;top:-7px;left:-7px;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--mute);background:var(--panel);color:var(--on-go);font-size:.7rem;font-weight:700;line-height:1;display:grid;place-items:center} #deckList button.actbadge::after{content:'';position:absolute;inset:-10px} /* 42px tap area */ #deckList button.actbadge[aria-checked=true]{background:var(--go);border-color:var(--go)} #deckList button.actbadge[aria-disabled=true]{opacity:.35} /* Decks page: compact header row, Now playing strip, grouped rows, ⋯ menu */ #decks .phead{margin-bottom:8px}#decks .phead h2{margin:0} #createNew{flex:none;min-height:36px;padding:6px 14px;border:0;background:var(--go);color:var(--on-go);font-size:.85rem;font-weight:700} #nowPlaying{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:10px;border:1px solid var(--go);border-radius:16px;background:color-mix(in srgb,var(--go) 10%,var(--panel))} #nowPlaying .dthumb{width:52px;height:52px}#nowPlaying .dname{font-weight:600}#nowPlaying .dname .sub{font-weight:400} .kicker{display:block;margin-bottom:2px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--go)} #deckList li.grp{display:block;padding:12px 6px 4px;border-bottom:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} #deckList li:not(.grp){padding-inline:6px} #deckList li.on{border-radius:12px;background:color-mix(in srgb,var(--go) 10%,transparent);box-shadow:inset 3px 0 0 var(--go)} .dname .sub{color:color-mix(in srgb,var(--ink) 68%,var(--panel))} #nowPlaying button.go{flex:none;width:4.6em;min-height:40px;border:0;background:var(--go);color:var(--on-go);font-weight:700}#nowPlaying button.go:disabled{opacity:.4} #deckList button.more{width:2.4em;font-size:1.1rem;line-height:1;letter-spacing:.05em} #rowMenu{position:fixed;z-index:30;min-width:150px;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px -8px var(--shadow)} #rowMenu ul{margin:0;padding:0;list-style:none}#rowMenu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:.9rem;text-align:left} #rowMenu button:hover,#rowMenu button:focus-visible{background:var(--panel)}#rowMenu button.warn{color:var(--no)}#rowMenu button:disabled{opacity:.4} /* Collection tab */ #cHead{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)} #cHead.done{border-color:var(--go)} #cRing{--p:0;flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--go) calc(var(--p) * 1%),var(--line) 0)} #cRing span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--panel2);font:700 .78rem var(--sans)} .cmain{min-width:0;flex:1}#cStats{display:flex;flex-wrap:wrap;gap:2px 10px;margin:4px 0 0;font-size:.78rem;color:var(--mute)} #cMile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:-4px 0 12px;font-size:.8rem;color:var(--mute)}#cMile b{color:var(--go)}#cMile button{padding:6px 14px;margin-left:auto} #cTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px} #cToggle{min-height:36px;padding:4px 14px;font-size:.85rem}#cView{padding:2px}#cView button{min-height:32px;padding:0 14px;font-size:.8rem} #cPanel{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}#cPanel[hidden]{display:none} #cPanel label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--mute)}#cPanel select{min-height:34px;padding:2px 8px;font-size:.85rem}#cPanel .chk{color:var(--ink)} #cNext{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)} #cNext img{flex:none;width:48px;height:48px;border-radius:10px;object-fit:cover}#cNext .dname{font-size:.9rem}#cNext button{flex:none;padding:6px 16px} #cNext[hidden],#cMile[hidden],#cHead[hidden],#cTools[hidden]{display:none} #decks button.go,#cMile button.go,#cNext button.go,#tdActs button.go,.cempty button.go{border:0;background:var(--go);color:var(--on-go);font-weight:700} .dots{display:block;margin-top:2px;font-size:.62rem;letter-spacing:.12em;color:var(--go)} #gridItems .ghead{grid-column:1/-1;margin:10px 0 0;font:600 .95rem var(--serif);color:var(--ink)}#gridItems .ghead:first-child{margin-top:0} #gridItems figcaption.anon{display:none} #gridItems.list{display:flex;flex-direction:column;gap:8px} #gridItems.list figure{display:flex;align-items:center;gap:12px;padding:6px;border-radius:14px;padding-right:44px;min-height:68px} #gridItems.list .thumb{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden}#gridItems.list img{width:64px;height:64px;aspect-ratio:1} #gridItems.list figcaption{position:static;flex:1;min-width:0;padding:0;background:none;font-size:.85rem}#gridItems.list figcaption.anon{display:block;color:var(--mute);font-family:var(--sans)} #gridItems.list .addbtn{top:50%;right:8px;transform:translateY(-50%)} .cempty{grid-column:1/-1;text-align:center;padding:28px 12px}.cempty .big{display:block;font-size:2.4rem;opacity:.7}.cempty p{margin:6px 0}.cempty .mute{color:var(--mute);font-size:.9rem}.cempty button{margin-top:10px;padding:8px 20px} #tileDlg{width:min(92vw,360px)}#tdImg{display:block;width:100%;max-height:50vh;object-fit:cover;border-radius:14px;margin-bottom:10px;background:var(--panel2)}#tdName{margin:0 0 12px;text-align:center} #tdActs{display:flex;flex-direction:column;gap:8px}#tdActs button{min-height:44px} #cView{flex:none}#cView button{flex:none;overflow:visible} #credit{margin-top:2px;font-size:.72rem;opacity:.8} /* Help page */ #help .h-step{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;padding:24px 0 8px;border-top:1px solid var(--line);margin-top:20px} #help .h-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} #help .h-step h2{font-size:1.4rem;margin:2px 0 6px} #help .h-what{margin:0 0 14px;color:var(--mute)} #help ol.h-keys{margin:0;padding:0;list-style:none;display:grid;gap:10px} #help ol.h-keys li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start} #help .h-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pin);color:var(--on-pin);font-size:.72rem;font-weight:800;margin-top:1px} #help ol.h-keys b{font-weight:800} #help .h-tip{margin:14px 0 0;font-size:.86rem;color:var(--mute)} #help .h-phone{width:268px;max-width:100%;border:7px solid var(--ink);border-radius:30px;background:var(--s-bg);overflow:hidden;position:relative;aspect-ratio:9/17} #help .h-scr{position:absolute;inset:0;padding:12px 10px 0;color:var(--s-ink);font:600 9.5px/1.3 var(--sans);display:flex;flex-direction:column;gap:7px} #help .h-brand{text-align:center;font:600 15px var(--serif);padding-top:2px} #help .h-panel{background:var(--s-panel);border:1px solid var(--s-line);border-radius:12px;padding:8px} #help .h-tabs{margin-top:auto;display:flex;border-top:1px solid var(--s-line);background:#0b130e;margin-inline:-10px;padding:5px 6px 7px;font-size:8px;color:var(--s-mute);text-align:center} #help .h-tabs span{flex:1}.h-tabs .h-on{color:var(--s-go);font-weight:800} #help .h-btn{display:block;text-align:center;padding:6px;border:1px solid var(--s-line);border-radius:999px;background:var(--s-panel2)} #help .h-go{background:var(--s-go);color:var(--s-on-go);border-color:var(--s-go);font-weight:800} #help .h-mute{color:var(--s-mute);font-weight:400} #help .h-ph{border-radius:9px;background:radial-gradient(circle at 50% 38%,#d9b97a 0 20%,transparent 21%),linear-gradient(160deg,#5a7a3c,#2b4a2a 55%,#1b2e20)} #help .h-ph.h-b{background:radial-gradient(circle at 45% 40%,#c86a4a 0 22%,transparent 23%),linear-gradient(160deg,#4f6b3a,#233d27)} #help .h-ph.h-c{background:radial-gradient(circle at 55% 42%,#cfcfc4 0 20%,transparent 21%),linear-gradient(160deg,#3d5a3b,#1c3022)} #help .h-pin{position:absolute;z-index:3;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--pin);color:var(--on-pin);font:800 10px var(--sans);box-shadow:0 0 0 2px var(--s-bg)} #help .h-row{display:flex;align-items:center;gap:6px} #help .h-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--s-line);border-radius:999px;background:var(--s-panel)} #help .h-seg span{flex:1;text-align:center;padding:4px 2px;border-radius:999px;font-size:8.5px}.h-seg .h-on{background:var(--s-go);color:var(--s-on-go);font-weight:800} #help .h-circ{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--s-line);font-size:13px} #help .h-circ.h-y{background:var(--s-go);color:var(--s-on-go)}.h-circ.h-x{border-color:var(--s-no);color:var(--s-no)} #help .h-opt{padding:7px 8px;border:1px solid var(--s-line);border-radius:9px;background:var(--s-panel2)} #help .h-opt.h-ok{border-color:var(--s-go);background:#223d27}.h-opt.h-bad{border-color:var(--s-no);background:#3b2a22} #help .h-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--s-mute);flex:none}.h-dot.h-on{background:var(--s-go);border-color:var(--s-go)} #help .h-th{width:26px;height:26px;border-radius:7px;flex:none} #help .h-pill{padding:3px 8px;border-radius:999px;border:1px solid var(--s-line);font-size:8.5px} #help .h-menu{position:absolute;right:12px;width:104px;padding:3px;border:1px solid var(--s-line);border-radius:9px;background:var(--s-panel2);box-shadow:0 8px 18px #0008;z-index:2;font-size:8.5px} #help .h-menu span{display:block;padding:4px 6px} #help .h-ring{width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--s-go) 50%,var(--s-line) 0);display:grid;place-items:center;flex:none} #help .h-ring i{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--s-panel2);font:800 8px var(--sans);font-style:normal} #help .h-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.h-grid3 .h-ph{aspect-ratio:4/5} #help .h-bars{display:flex;align-items:flex-end;gap:2px;height:32px}.h-bars i{flex:1;background:var(--s-go);border-radius:2px 2px 0 0;opacity:.85} #help .h-map{height:78px;border-radius:9px;background:linear-gradient(#1d3126,#17251d);position:relative;border:1px solid var(--s-line)} #help .h-map i{position:absolute;width:6px;height:6px;border-radius:50%;background:#9aa7a0;border:1px solid #fff} #help .h-map u{position:absolute;inset:14px 22px;border:1.5px dashed #6fa8ff;border-radius:50%} #help .h-tog{width:30px;height:16px;border-radius:999px;background:var(--s-go);position:relative}.h-tog:after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--s-on-go)} #help .h-foot{margin-top:6px;text-align:center;font-size:7.5px;color:var(--s-mute);font-weight:400;padding-bottom:2px} #help .h-summary{margin-top:36px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)} #help .h-summary h2{font-size:1.15rem}.h-summary ul{margin:10px 0 0;padding-left:18px;color:var(--mute)}.h-summary li{margin:4px 0} #help{--pin:var(--no);--on-pin:var(--on-go)} #help .h-phone{--s-bg:#0f1a14;--s-panel:#17251d;--s-panel2:#1d3126;--s-line:#2a3f33;--s-ink:#e9f1e4;--s-mute:#93a79a;--s-go:#b6f36b;--s-on-go:#0f1a14;--s-no:#ff8f5a;margin-inline:auto} #help .h-lead{margin:0 0 12px;color:var(--mute)} #help .h-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none} #help .h-toc button{padding:5px 12px;font-size:.8rem;border-radius:999px} #help .h-step h2{font-family:var(--serif)} #help .h-what{margin-top:0} #setHead{margin-bottom:10px}#setHead h2{margin:0}#helpBtn{flex:none} #helpBack{flex:none} /* Stats tab */ #stats h2{margin-bottom:10px}#stScope{display:flex;flex-direction:column;gap:8px;margin:0 0 12px} #stats .seg button{min-height:36px;font-size:.82rem} .stcard{margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)} .stcard h3{margin:0 0 8px;font:600 1rem var(--serif);color:var(--ink)}.stcard h4{margin:12px 0 4px;font-size:.8rem;font-weight:700;color:var(--mute)} .stats4{display:grid;grid-template-columns:1fr 1fr;gap:10px} .stat{display:flex;flex-direction:column;gap:1px;min-width:0}.stat b{font:600 1.7rem/1.1 var(--serif);font-variant-numeric:tabular-nums}.stat span{font-size:.8rem;font-weight:700}.stat small{font-size:.72rem;color:var(--mute)} .streakline{margin:0 0 8px;font-size:.88rem;color:var(--mute)}.streakline b{color:var(--go);font:600 1.2rem var(--serif)} .cal{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.calcol{display:grid;gap:3px} #stats .calcell{width:100%;aspect-ratio:1;min-height:0;padding:0;border:0;border-radius:4px;background:var(--line)} #stats .calcell.l1{background:color-mix(in srgb,var(--go) 28%,var(--line))}#stats .calcell.l2{background:color-mix(in srgb,var(--go) 52%,var(--line))} #stats .calcell.l3{background:color-mix(in srgb,var(--go) 76%,var(--line))}#stats .calcell.l4{background:var(--go)}#stats .calcell.lf{visibility:hidden} .trend{display:block;width:100%;height:auto}.tline{fill:none;stroke:var(--go);stroke-width:2;stroke-linejoin:round}.tdot{fill:var(--go)}.tgrid{stroke:var(--line);stroke-width:1}.tavg{stroke:var(--mute);stroke-width:1;stroke-dasharray:4 3}.tlbl{fill:var(--mute);font-size:8px} .stbl summary{cursor:pointer;color:var(--mute);font-size:.82rem}.tblwrap{max-height:220px;overflow:auto;margin-top:6px}.stbl table{width:100%;border-collapse:collapse;font-size:.82rem}.stbl th,.stbl td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left} .stcard .bar{display:grid;grid-template-columns:5.4em minmax(0,1fr) auto;gap:8px;align-items:center;margin:7px 0;font-size:.85rem}.stcard .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stcard .bl.it{font-style:italic} .stcard .bt{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}.stcard .bt i{display:block;height:100%;border-radius:999px;background:var(--go)}.stcard .bv{color:var(--mute);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap} .stseg{margin:0 0 6px} .strow{display:flex;align-items:center;gap:8px;margin:6px 0}.stth{flex:none;width:36px;height:36px;border-radius:9px;object-fit:cover;background:var(--panel)}.strow .dname{font-size:.85rem}.strow button{flex:none;padding:4px 12px;font-size:.8rem} .tip2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;font-size:.88rem}.tip2 button{flex:none;padding:6px 14px;border:0;background:var(--go);color:var(--on-go);font-weight:700} #stats button.go{border:0;background:var(--go);color:var(--on-go);font-weight:700;padding:6px 16px} .dprow{display:grid;grid-template-columns:minmax(0,1fr) 72px auto;gap:10px;align-items:center;margin:8px 0}.dprow button{padding:4px 12px;font-size:.8rem} #stClear{display:block;margin:16px auto 0;border-color:var(--no)} .tab{min-width:0}.tab span{white-space:nowrap} #updBar{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:60;max-width:520px;margin:0 auto;padding:10px 12px;border:1px solid var(--line,#2c3d33);border-radius:12px;background:var(--panel2);color:var(--ink);font-size:.88rem;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 6px 20px #0006} #updBar button{padding:6px 14px;border-radius:999px;border:0;background:var(--accent,#c9694a);color:#fff;font:inherit;font-weight:600;cursor:pointer} #fmtSeg button,#dStyleSeg button{padding-inline:4px;font-size:.85rem} /* four styles on one row: "Classic" no longer shortens to "Clas…" */ /* Segmented tabs (Quiz Style, Photo quality, Known/Unknown, Grid/List): the active tab is outlined in green with only a light tint */ #fmtSeg button,#dStyleSeg button,#imgSeg button,#cView button,#ku button,#dvSeg button,#afmtSeg button,#fsSeg button{border:1px solid transparent} /* v2.3.3: the Anatomy Quiz Style and Forage map style tabs use the lighter selected style too */ #fmtSeg button[aria-pressed=true],#dStyleSeg button[aria-pressed=true],#imgSeg button[aria-pressed=true],#cView button[aria-pressed=true],#ku button[aria-pressed=true],#dvSeg button[aria-pressed=true],#afmtSeg button[aria-pressed=true],#fsSeg button[aria-pressed=true]{background:color-mix(in srgb,var(--go) 14%,transparent);border-color:var(--go);color:var(--ink)} #help .h-seg.q span{border:1px solid transparent}#help .h-seg.q .h-on{background:color-mix(in srgb,var(--s-go) 14%,transparent);border-color:var(--s-go);color:var(--s-ink);font-weight:700} #members li img.open,#members li .rname.open{cursor:pointer}#members li .rname.open:hover{text-decoration:underline;text-decoration-color:var(--mute)}#members li .rname.open:focus-visible{outline:2px solid var(--go);outline-offset:2px;border-radius:6px} #gridItems figcaption.open{cursor:pointer}#gridItems figcaption.open:hover{text-decoration:underline;text-decoration-color:var(--mute)}#gridItems figcaption.open:focus-visible{outline:2px solid var(--go);outline-offset:2px;border-radius:6px} /* v1.47.0: the deck line under the card is a button to the Collection, so it looks like one */ #info{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;margin:0 0 8px;padding:8px 14px 8px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--ink);font:600 1rem/1.25 var(--serif);cursor:pointer;overflow:hidden;white-space:nowrap} #info::after{content:none} #info .ilab{min-width:0;overflow:hidden;text-overflow:ellipsis} #info .ichev{flex:none;color:var(--go);font:700 1.3rem/1 var(--sans)} #info:hover,#info:focus-visible{color:var(--ink);border-color:var(--go)} #info:active{background:color-mix(in srgb,var(--go) 14%,transparent);border-color:var(--go)} #info:focus-visible{outline:2px solid var(--go);outline-offset:2px} /* v1.51.0: Welcome page buttons: all text centred */ #landing button{text-align:center;justify-content:center} #setHead .hbtns{display:flex;align-items:center;gap:8px;flex:none}#homeBtn{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0}#homeBtn svg{display:block} /* v1.54.0: + Create New uses the same style as the selected Quiz Style / Photo quality tabs: green outline, light green tint */ #createNew{border:1.5px solid var(--go);background:color-mix(in srgb,var(--go) 14%,transparent);color:var(--ink)}#createNew:hover{background:color-mix(in srgb,var(--go) 22%,transparent)}#createNew:active{background:color-mix(in srgb,var(--go) 30%,transparent)} #xSame{display:flex;align-items:center;justify-content:center;gap:8px}#xSame[hidden]{display:none}#xSame svg{flex:none} /* v1.57.0: Fungi Forecast (was the Mushroom clock) */ #clockBox{display:flex;flex-direction:column;gap:10px} .cl-wheel{width:100%;max-width:300px;margin:4px auto 0} .cwheel{display:block;width:100%;height:auto;overflow:visible} .cw-hub{fill:color-mix(in srgb,var(--go) 7%,var(--panel));stroke:var(--line);stroke-width:1} .cw-seg{fill:var(--go);opacity:var(--o,.3)} .cw-seg.now{opacity:1;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--go) 80%,transparent))} .cw-lab{fill:var(--mute);font:600 11px var(--sans)}.cw-lab.now{fill:var(--ink);font-size:13px;font-weight:800} .cw-hand{stroke:var(--ink);stroke-width:2;stroke-linecap:round} .cw-dot{fill:var(--ink);stroke:var(--go);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:cwPulse 2.4s ease-in-out infinite} .cw-n{fill:var(--go);font:700 34px var(--serif)}.cw-s{fill:var(--mute);font:600 10px var(--sans);letter-spacing:.04em;text-transform:uppercase} @keyframes cwPulse{50%{transform:scale(1.45)}} @media (prefers-reduced-motion:reduce){.cw-dot{animation:none}} .cl-sum{margin:0;text-align:center;font:600 1.05rem/1.3 var(--serif)} .cl-h{margin:6px 0 0;font:600 .95rem var(--serif);color:var(--mute)} .cl-cards{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .cl-card{flex:none;width:132px;display:flex;flex-direction:column;gap:6px;padding:8px;text-align:left;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--ink);cursor:pointer} .cl-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--panel)} .cl-tag{align-self:flex-start;padding:2px 8px;border-radius:999px;border:1px solid var(--go);background:color-mix(in srgb,var(--go) 14%,transparent);font:700 .68rem var(--sans);letter-spacing:.03em;text-transform:uppercase} .cl-name{font:600 .85rem/1.2 var(--serif);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.cl-name em{display:block;color:var(--mute);font-size:.75rem;font-weight:400} .cl-bars{display:flex;align-items:flex-end;gap:2px;height:26px}.cl-bars i{flex:1;background:var(--line);border-radius:2px 2px 0 0}.cl-bars i.now{background:var(--go)} .cl-card:focus-visible{outline:2px solid var(--go);outline-offset:2px} /* v1.60.0: every Fungi Forecast card is as tall as the tallest, and its bar chart sits on the bottom edge, so the baselines line up whatever the name length */ .cl-cards{align-items:stretch}.cl-card .cl-bars{margin-top:auto;flex:none}.cl-card .cl-name{flex:none} /* v1.61.0: Fungi Forecast month scrubber and flush outlook */ .cl-wheel{touch-action:none;cursor:grab;border-radius:50%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .cl-wheel:active{cursor:grabbing}.cl-wheel:focus-visible{outline:2px solid var(--go);outline-offset:4px} .cw-lab.today{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .cwheel.away .cw-hand,.cwheel.away .cw-dot{opacity:.45}.cwheel.away .cw-dot{animation:none} .cw-back{fill:var(--mute);font:600 8.5px var(--sans);letter-spacing:.03em} .cw-seg{transition:opacity .2s} .cl-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-4px} .cl-step{width:44px;min-height:40px;padding:0;font-size:1.4rem;line-height:1} .cl-month{min-width:7.5em;text-align:center;font:600 1.05rem var(--serif)} .fx{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)} .fx-sum{margin:0;font:600 1rem/1.3 var(--serif);color:var(--go)} .fx-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .fx-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center} .fx-day b{font:700 .7rem var(--sans);color:var(--mute);white-space:nowrap}.fx-day:first-child b{color:var(--ink)} .fx-day small{font-size:.62rem;color:var(--mute);white-space:nowrap} .fx-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--go);background:var(--go)} .lv-poor .fx-dot{background:transparent;opacity:.5}.lv-fair .fx-dot{opacity:.45}.lv-good .fx-dot{opacity:.75}.lv-excellent .fx-dot{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--go) 80%,transparent)} .fx-rain{display:flex;align-items:flex-end;width:10px;height:28px;border-radius:3px;background:var(--line);overflow:hidden}.fx-rain i{display:block;width:100%;background:#5aa9e6} .fx .fine a{color:var(--go)} /* v1.62.0 */ #lGps,#useGps,#xGps{display:inline-flex;align-items:center;justify-content:center;gap:8px}.locico{flex:none} /* v1.63.3: Fungi Forecast is a shaded card like the numbers and the Practice calendar */ #stBody>#secClock{margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)} #stBody>#secClock summary{font:600 1rem var(--serif);color:var(--ink)} #stBody>#secClock[open] summary{margin-bottom:6px} #secClock .fx,#secClock .cl-card{background:var(--panel)} /* v1.65.0: Practice calendar views (Day / Week / Month / Year) */ #calSeg{margin:0 0 10px} #calSeg button{border:1px solid transparent}#calSeg button[aria-pressed=true]{background:color-mix(in srgb,var(--go) 14%,transparent);border-color:var(--go);color:var(--ink)} .calsum{margin:0 0 8px;font:600 .95rem/1.3 var(--serif)} .cal.cal-day{grid-template-columns:repeat(12,1fr);gap:4px} .cal.cal-week{grid-template-columns:repeat(7,1fr);gap:6px} .wkcol{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.wkcol small{font-size:.7rem;color:var(--mute);line-height:1}.wkcol .wkn{font-variant-numeric:tabular-nums;min-height:.7rem} .cal.cal-month{grid-template-columns:repeat(7,1fr);gap:4px}.dowh{text-align:center;font-size:.7rem;color:var(--mute)}.calpad{display:block} #stats .cal-month .calcell{position:relative;display:grid;place-items:center;border-radius:6px} #stats .cal-month .calcell i{font:700 .72rem var(--sans);font-style:normal;color:var(--ink);opacity:.85} .cal.cal-year{grid-template-columns:repeat(4,1fr);gap:10px 12px} .ymonth small{display:block;font-size:.7rem;color:var(--mute);margin-bottom:3px}.ygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} #stats .ygrid .calcell{border-radius:2px} #stats .calcell.lf2{background:transparent;border:1px dashed var(--line);opacity:.55} #stats .calcell:focus-visible{outline:2px solid var(--go);outline-offset:1px} #calSeg button{padding-inline:4px;font-size:.85rem} #stats .cal-month .calcell.l3 i,#stats .cal-month .calcell.l4 i{color:var(--on-go);opacity:1} #xSame{justify-content:flex-start;text-align:left} .cl-step,.cl-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .totop{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px auto 0;padding:8px 16px;font-size:.85rem;touch-action:manipulation} #leaveDlg form{flex-wrap:wrap} .clr{position:relative;display:block;flex:1;min-width:0}.clr input{width:100%;padding-right:40px} #practice details.asec>.clr{margin-top:10px} .clr-x{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;background:none;display:grid;place-items:center;border-radius:999px;color:var(--mute);-webkit-tap-highlight-color:transparent} .clr-x[hidden]{display:none} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none} .deck-warn{margin:8px 0 10px;padding:2px 0 2px 10px;border:0;border-left:3px solid var(--no);border-radius:0;background:none;color:var(--mute);font-size:.8rem;line-height:1.4} /* v1.74.0 beta: Find Fungus */ #finder{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px} #finder .phead h2{margin:0} .beta,.findbtn small{font:700 .62rem/1 var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:999px;border:1px solid var(--go);color:var(--go);vertical-align:middle;margin-right:4px} .findbtn{margin:0} /* v1.75.1: Settings bottom is grouped (Explore, Game) with full-width rows and a compact footer */ .rowbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;text-align:left}.rowbtn .rt{flex:1;min-width:0;display:block}.rowbtn .rt b{display:block;font-weight:600}.rowbtn .rt em{display:block;margin-top:2px;font-style:normal;font-size:.75rem;color:var(--mute)}.rowbtn .chev{flex:none;font-size:1.4rem;line-height:1;color:var(--mute)} .setfoot{margin-top:28px;text-align:center}.setfoot .totop{margin:0 auto} .f-sp{position:relative;display:block;margin:8px 0 10px;padding:8px;border:1.5px solid color-mix(in srgb,var(--go) 55%,var(--line));border-radius:16px;background:none} /* v3.1.16: the 8% green tint around the dropdown is removed; the thin green outline stays */ .f-sp select{display:block;width:100%;min-width:0;min-height:52px;padding:8px 34px 8px 12px;font-size:.9rem;font-weight:700;color:var(--go);text-overflow:ellipsis;border:1px solid var(--line);border-radius:10px;background:var(--panel);-webkit-appearance:none;appearance:none}.f-sp select option{color:var(--ink);font-weight:400} /* v3.1.13: fill, border, radius, size and weight match the Change button (.lc-chg) above */ .f-sp::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--go);border-bottom:2.5px solid var(--go);transform:translateY(-70%) rotate(45deg);pointer-events:none} /* v3.1.12: the arrow is drawn here, in the accent colour, because the native one is small and low contrast */ #fWhere{margin:8px 0}#fLoc{margin:4px 0 8px;font-weight:600} .f-row{display:flex;gap:8px;flex-wrap:wrap}.f-row button{flex:1 1 auto} #fGo{background:var(--go);color:var(--on-go);border-color:var(--go);font-weight:700} #fPlace{display:flex;gap:8px;margin:8px 0}#fPlace .clr{flex:1} #fMapBox{position:relative;margin:10px 0 6px;border-radius:16px;overflow:hidden;border:1px solid var(--line)} #fMap{height:min(62vh,420px);background:var(--panel2)} #fMapBox.busy::after{content:'Loading…';position:absolute;inset:auto 0 0 0;padding:6px;text-align:center;font-size:.8rem;background:color-mix(in srgb,var(--panel) 85%,transparent);z-index:500} #fHere{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:600;background:var(--panel);font-weight:700;box-shadow:0 4px 14px var(--shadow)} .f-star{color:#f7c948;font-size:20px;line-height:20px;text-align:center;text-shadow:0 0 3px #000} #fLegend{display:flex;flex-direction:column;gap:2px;margin:6px 0} .lg-ramp{height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,224,138,.6),rgba(255,179,71,.75),rgba(255,122,61,.85),rgba(215,38,61,.9),rgba(142,11,82,.95))} .lg-lab{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute)}.lg-lab i{font-style:normal} #fLayers{display:flex;flex-wrap:wrap;gap:2px 14px}#fLayers .chk{margin:2px 0} .lg-hatch{display:inline-block;width:14px;height:10px;background:repeating-linear-gradient(-45deg,#777 0 1.5px,transparent 1.5px 4px)} .lg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c58a4a;border:1.5px solid #4a2c14} .lg-star{color:#f7c948}.lg-burn{display:inline-block;width:14px;height:0;border-top:2px dashed #e8590c;vertical-align:middle} #fDay{margin:8px 0}#fDay label{font-size:.9rem}#fDayR{width:100%} /* v1.79.0: beta: Find Fungus playback (Play / speed row, the canvas layer over the map, the Spores key) */ .f-dayrow{display:flex;align-items:center;gap:8px;margin-top:4px}.f-dayrow #fDayR{flex:1;min-width:0;width:auto} #fPlay{flex:none;min-width:6.4em;padding-inline:10px;font-weight:700;background:var(--go);color:var(--on-go);border-color:var(--go)}#fPlay[aria-pressed=true]{background:var(--panel);color:var(--ink);border-color:var(--line)} #fSpeed{flex:none;min-width:3em;padding-inline:8px;font-variant-numeric:tabular-nums} #finder canvas.f-play{position:absolute;left:0;top:0;max-width:none;pointer-events:none} .lg-spore{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fffaeb;border:1px solid rgba(70,45,20,.7);box-shadow:-5px 0 0 -2px rgba(70,45,20,.35)} #fStatus{color:var(--mute);font-size:.88rem;min-height:1.3em;margin:4px 0} #finder details.asec{margin-top:6px} .f-whyhead{margin:4px 0 8px} .f-tier{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.78rem;color:#fff;background:#888} .t-prime{background:#8e0b52}.t-high{background:#d7263d}.t-good{background:#e8622c}.t-fair{background:#c99a2e}.t-low{background:#6b7a70} .f-why{margin:0;display:grid;gap:6px}.f-why>div{display:grid;grid-template-columns:7.5em 1fr auto;gap:8px;align-items:baseline;font-size:.86rem} .f-why dt{color:var(--mute)}.f-why dd{margin:0}.f-eff{font-size:.75rem;color:var(--mute)}.f-eff.up{color:var(--go)}.f-eff.down{color:var(--no)} #fBets{padding-left:0;list-style:none;margin:4px 0;display:grid;gap:6px} .f-bet{width:100%;text-align:left;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.86rem;padding:8px 10px} #fFinds,#fSources{list-style:none;padding:0;margin:4px 0;display:grid;gap:6px;font-size:.86rem} #fFinds li{display:flex;justify-content:space-between;align-items:center;gap:8px} #fSources li.off b{color:var(--mute)} #fSize{width:100%;margin:2px 0 10px}#fWhere label[for=fSize]{font-size:.9rem} .f-caution{border-left:3px solid var(--no);padding-left:8px;margin-top:-4px} /* v1.76.0: share and import a deck */ /* v2.1.9: Inline Import card in Settings */ .impcard{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0} .improw{display:flex;align-items:center;gap:10px}.impico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--go) 18%,transparent);flex:none}.impico svg,.impl,.impchip svg{fill:none;stroke:var(--go);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.impico svg{width:20px;height:20px} .impttl{font:600 1.05rem var(--serif)}.impsub{font-size:12.5px;color:var(--mute)} .impin{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);padding:0 6px 0 12px;min-height:48px;margin-top:10px}.impin:focus-within{border-color:var(--go);box-shadow:0 0 0 3px color-mix(in srgb,var(--go) 22%,transparent)} .impl{width:18px;height:18px;flex:none}.impin input{flex:1;min-width:0;border:0;background:none;outline:none;padding:10px 0;border-radius:0;cursor:text}.impin input::placeholder{color:var(--mute)}.impin input:focus-visible{outline:none} .impx{border:0;background:none;color:var(--mute);width:36px;height:36px;padding:0;display:grid;place-items:center;flex:none;border-radius:999px}.impx[hidden]{display:none} .impchip{border:0;border-radius:999px;background:color-mix(in srgb,var(--go) 20%,transparent);color:var(--go);font-weight:800;font-size:13px;padding:0 14px;min-height:36px;flex:none}.impchip svg{width:15px;height:15px;stroke-width:2.2;vertical-align:-2px;margin-right:5px} .impmsg{font-size:13px;font-weight:700;min-height:20px;margin-top:8px;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;color:var(--mute)}.impmsg.good{color:var(--go)}.impmsg.bad{color:var(--no)}.impmsg.mute{font-weight:500} .implink{border:0;background:none;padding:0 2px;min-height:32px;color:var(--go);font-weight:800;font-size:13px;text-decoration:underline} .impprim{width:100%;min-height:48px;border:0;border-radius:14px;background:var(--go);color:var(--on-go);font-weight:800;margin-top:10px}.impprim:disabled{background:var(--panel);color:var(--mute);border:1px solid var(--line);opacity:1} #expCard .impprim{margin-top:12px;background:color-mix(in srgb,var(--go) 14%,transparent);border:1px solid var(--go);color:var(--ink)}#expCard .impprim:focus-visible{outline:2px solid var(--go);outline-offset:2px} /* v3.1.4: the light highlight of the selected Quiz style / Photo quality buttons */.expcode{width:100%;box-sizing:border-box;margin-top:8px;font:12px/1.35 ui-monospace,monospace;word-break:break-all;resize:none} /* v3.0.0: Export Progress; the code box shows only when the clipboard is blocked */ @media(max-width:339px){.impchip svg{display:none}.impchip{padding:0 11px}} #shareLink{width:100%;box-sizing:border-box;margin:6px 0;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;font-size:.8rem;word-break:break-all;resize:none} .shareacts{flex-wrap:wrap} /* v1.76.2: the Appearance, Explore and Game headings are hidden on screen (kept for screen readers); the rows keep an even gap */ .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #setmsg{min-height:0;margin:8px 0 0}#themeSw{margin-top:12px} /* v1.76.3: Share Deck dialog */ #shareSys{display:inline-flex;align-items:center;gap:6px} /* v1.77.0: Anatomy Deck. Drawings always sit on a white plate (they are black line art), in light and dark mode. */ #anatFront{display:none} #card.anat #photo,#card.anat #shade,#card.anat .pnav,#card.anat #addBtn{display:none} #card.anat #anatFront{display:flex;justify-content:center;height:var(--cardH);background:#fff} #card.anat.rev #anatFront{display:none} #card.anat #nameCard em{font-family:var(--sans);font-size:.95rem} .aplate{position:relative;max-width:100%;background:#fff;color:#14231a;flex:none} #anatFront .aplate{height:100%} .aplate svg{display:block;width:100%;height:100%} .aask,.alabel,.abadge{position:absolute;transform:translateY(-50%);white-space:nowrap} .aplate .ac{transform:translate(-50%,-50%)} .aask{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#14231a;color:#fff;font:700 1rem var(--sans);border:2px solid #fff;box-shadow:0 1px 5px #0005} .alabel{padding:4px 10px;border-radius:999px;background:#fff;border:1.5px solid #14231a;font:700 .85rem/1.2 var(--sans);box-shadow:0 1px 5px #0003} .alabel.ok{border-color:#2d7a31;background:#e3f4dc;color:#1d5a21} .abadge{display:flex;align-items:center;gap:4px;min-width:32px;min-height:32px;padding:0 3px;border-radius:999px;background:#14231a;color:#fff;border:2px solid #fff;box-shadow:0 1px 6px #0006;font:700 .85rem var(--sans);pointer-events:none;touch-action:none} .abadge b{display:grid;place-items:center;width:22px;font-weight:800} .abadge .aterm:empty{display:none} .abadge.full{background:#fff;color:#14231a;border-color:#14231a;padding-right:10px} .abadge::before{content:"";position:absolute;inset:-8px} /* a bigger target for fingers */ .aplate.live .abadge{pointer-events:auto;cursor:pointer} .abadge.hover,.abadge:focus-visible{outline:3px solid var(--go);outline-offset:1px} .abadge.ok{border-color:#2d7a31;background:#e3f4dc;color:#1d5a21}.abadge.bad{border-color:#bf4519;background:#fde7dd;color:#8a2f0c} .abadge:disabled{opacity:1} #aTray{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px} .achip{display:flex;align-items:baseline;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;font-weight:700;cursor:grab;user-select:none;-webkit-user-select:none} .achip[aria-pressed=true]{background:var(--go);color:var(--on-go);border-color:var(--go)} .achip.used{opacity:.55}.achip small{font-weight:500;font-size:.75rem;color:var(--mute)}.achip[aria-pressed=true] small{color:var(--on-go)} .achip:disabled{opacity:.55;cursor:default} .aghost{position:fixed;z-index:60;transform:translate(-50%,-130%);padding:8px 14px;border-radius:999px;background:var(--go);color:var(--on-go);font-weight:700;pointer-events:none;box-shadow:0 8px 20px #0007;white-space:nowrap} #aCheck{display:block;width:100%;min-height:52px;margin:0 0 12px;border:0;background:var(--go);color:var(--on-go);font-weight:700}#aCheck:disabled{opacity:.45} #opts.photos .apic{position:relative;display:grid;place-items:center;background:#fff;border-width:2px} #opts.photos .apic.ok{border-color:var(--go);box-shadow:0 0 0 2px var(--go)}#opts.photos .apic.bad{border-color:var(--no);box-shadow:0 0 0 2px var(--no)} .acap{position:absolute;left:4px;right:4px;bottom:4px;padding:3px 6px;border-radius:8px;background:#14231ae0;color:#fff;font:700 .75rem/1.2 var(--sans);text-align:center;white-space:normal} .afit{display:grid;place-items:center;overflow:hidden;background:#fff} #gridItems .atile .afit{width:100%;aspect-ratio:4/5} #cNext .anext{flex:none;width:56px;height:56px;border-radius:10px} .strow .afit.stth{width:44px;height:44px;border-radius:8px} .dthumb.athumb{object-fit:cover;object-position:50% 18%;background:#fff} .astudy{width:min(100%,360px);margin:4px auto 12px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)} #anatGroups .agrp{align-items:flex-start;color:var(--ink)}#anatGroups .agrp input{margin-top:2px;flex:none} #anatGroups .agrp b{display:block;font-size:.9rem}#anatGroups .agrp small{display:block;color:var(--mute);font-size:.8rem;line-height:1.35} .abadge.full{max-width:23%;white-space:normal;font-size:.72rem;line-height:1.15;padding:3px 8px 3px 2px;text-align:left} .abadge.full b{flex:none;width:18px} .abadge.ok b::after{content:"✓"}.abadge.bad b::after{content:"✗"}.abadge.ok b,.abadge.bad b{font-size:0}.abadge.ok b::after,.abadge.bad b::after{font-size:.8rem} #afmtSeg button,#aStyleSeg button{padding:0 2px;font-size:.84rem;letter-spacing:-.01em}#afmtSeg,#aStyleSeg{gap:2px} /* v1.80.1: picture fit. A thumbnail box is a size container; the drawing takes the largest width that fits both ways (--ar = its width / height), so a tall crop shrinks to the box's height instead of overflowing it and losing its bottom. A named Find it picture leaves room at the bottom for its caption. */ .afit,#opts.photos .apic{container-type:size} .afit .aplate{width:min(100cqw,100cqh * var(--ar,1));height:auto} #opts.photos .apic{padding:4px}#opts.photos .apic.named{padding-bottom:30px} #opts.photos .apic .aplate{width:min(100cqw,100cqh * var(--ar,1));height:auto} /* v1.78.0: Collection network card on the Stats page */ .netsum{margin:0 0 8px;font-size:.88rem;color:var(--ink)} .netcv{display:block;width:100%;height:320px;border-radius:12px;background:var(--panel);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} @media (min-width:600px){.netcv{height:360px}} .netbox+.note{margin:8px 0 0;font-size:.82rem} /* v1.80.3: network zoom buttons, top-right corner */ .netbox{position:relative} .netzoom{position:absolute;top:8px;right:8px;display:flex;gap:4px} .netzoom button{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:600 1.05rem/1 var(--sans);opacity:.9} .netzoom button:disabled{opacity:.35;cursor:default} .netzoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #help .h-net{display:block;width:100%;height:30px;fill:var(--s-go);stroke:var(--s-mute);stroke-width:1;fill-opacity:1}#help .h-net path{fill:none;opacity:.7}#help .h-net path.m{stroke:var(--s-no);stroke-dasharray:2 2}#help .h-net .g{fill-opacity:.2;stroke:var(--s-go)}#help .h-net .s{fill:var(--s-mute);stroke:none;opacity:.6}#help .h-net circle:not(.g):not(.s){stroke:none} /* v1.80.0: Color scheme picker in Settings, above the Dark mode switch. Each swatch shows the scheme's background, accent and wrong-answer colors for the current mode. */ #schemeLbl{margin:18px 0 6px;color:var(--ink);font-weight:500;font-size:1rem} #schemePick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #schemePick button{display:flex;flex-direction:column;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:14px;text-align:center;font:600 .85rem var(--serif)} #schemePick button[aria-checked=true]{border-color:var(--go);box-shadow:0 0 16px -6px var(--glow)} #schemePick button{position:relative;display:block;padding-top:42px} #schemePick .chips3{position:absolute;top:8px;left:8px;right:8px;height:28px;display:flex;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)} #schemePick .chips3 i{display:block;flex:1 1 0;min-width:0;background:var(--d)}#schemePick .chips3 i:first-child{flex-grow:2}[data-theme=light] #schemePick .chips3 i{background:var(--l)} /* v1.83.2: on iPhone (WebKit) the swatch strip inside each