@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Kalam";src:url(/fonts/kalam-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#f1ead8;--paper2:#e8dec5;--card:#fbf7ec;--ink:#2a1d14;--ink2:#5d4b3c;--moss:#3f5a35;--moss-d:#2e4427;--moss2:#dfe6cd;--rust:#a3442a;--rust2:#f3d9cc;--straw:#e2c063;--straw2:#f6e8bd;--night:#1c2826;--night2:#29393a;
--hogc:#7a5636;--hogs:#2a1d14;--hogf:#ecd7b2;--r:14px;--sans:"Bricolage",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;--hand:"Kalam","Comic Sans MS",cursive;--shadow:0 1px 0 rgba(42,29,20,.08),0 6px 18px -10px rgba(42,29,20,.35)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.62 var(--serif);
background-image:radial-gradient(rgba(90,70,40,.06) 1px,transparent 1.4px),radial-gradient(rgba(90,70,40,.04) 1px,transparent 1.2px);background-size:23px 23px,37px 37px;background-position:0 0,11px 17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--moss-d);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--sans);font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.5rem);margin:.2em 0 .3em}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:1.8em 0 .5em}
h3{font-size:1.2rem;margin:1.2em 0 .4em}
p,li{max-width:70ch}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:780px}
.narrowish{max-width:780px}
.small{font-size:.9rem;color:var(--ink2)}
.kicker{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--rust)}
.lede{font-size:1.28rem;color:var(--ink2);max-width:60ch}
.hand{font-family:var(--hand)}
/* header */
.top{background:var(--moss);color:#f6f0dc;position:sticky;top:0;z-index:20}
.topin{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;color:#f6f0dc;text-decoration:none}
.brand:hover{color:#fff}
.brandhog{width:52px;height:38px;--hogc:#8a6a44;--hogs:#1d140e;--hogf:#f1dfbd;transform:rotate(-4deg)}
.bw{display:flex;flex-direction:column;line-height:1}
.b1{font-family:var(--sans);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.b2{font-family:var(--hand);font-size:.95rem;opacity:.85;margin-top:.1rem}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.15rem;margin:0;padding:0}
.nav a{display:block;color:#f6f0dc;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.4rem .6rem;border-radius:999px}
.nav a:hover,.nav a[aria-current=page]{background:rgba(246,240,220,.16);color:#fff}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--straw)}
.navbtn{display:none;margin-left:auto;background:transparent;color:#f6f0dc;border:2px solid rgba(246,240,220,.6);border-radius:999px;padding:.35rem .9rem;font:600 .95rem var(--sans);cursor:pointer}
.bars{display:inline-block;width:14px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;margin-right:.5rem;vertical-align:middle}
.hedge{display:block;width:100%;height:14px;fill:var(--moss);position:absolute;left:0;bottom:-13px}
@media (max-width:980px){.navbtn{display:inline-block}.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--moss-d);padding:.8rem 1.25rem 1.2rem}.nav.open{display:block}.nav ul{flex-direction:column}.nav a{padding:.6rem .4rem;border-radius:6px}}
main{display:block;padding-bottom:3rem}
/* hero */
.hero{padding:3.2rem 0 1.5rem}
.heroin{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem);margin:.15em 0 .25em}
.hero h1 em{font-family:var(--hand);font-style:normal;font-weight:400;color:var(--rust);font-size:1.05em}
.heroimg .ph{transform:rotate(1.4deg);margin:0}
.heroimg .ph img{border-radius:6px}
@media (max-width:820px){.heroin{grid-template-columns:1fr}.hero{padding-top:2.2rem}}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
.btn{display:inline-block;background:var(--rust);color:#fff;font:700 1rem var(--sans);padding:.7rem 1.15rem;border-radius:999px;text-decoration:none;border:2px solid var(--rust);box-shadow:0 3px 0 #6e2a17}
.btn:hover{background:#8d3820;color:#fff}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6e2a17}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn.ghost:hover{background:var(--card);color:var(--ink)}
/* photos */
.ph{margin:1.6rem 0;background:var(--card);padding:.6rem .6rem .5rem;border-radius:8px;box-shadow:var(--shadow);border:1px solid rgba(42,29,20,.08)}
.ph img{border-radius:4px;width:100%}
.ph figcaption{display:flex;flex-direction:column;gap:.15rem;padding:.45rem .2rem 0}
.capt{font-family:var(--hand);font-size:1.05rem;line-height:1.35;color:var(--ink)}
.cred{font-size:.75rem;color:var(--ink2);font-family:var(--sans);font-weight:600}
.cred a{color:var(--ink2)}
.twophoto{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.twophoto .ph{margin:1rem 0}
@media (max-width:600px){.twophoto{grid-template-columns:1fr}}
/* citations */
.cite{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--moss);background:var(--moss2);padding:.08rem .42rem;border-radius:999px;white-space:nowrap;vertical-align:.12em}
.cite:hover{background:var(--moss);color:#fff}
/* home blocks */
.urgent{background:var(--rust2);border-left:6px solid var(--rust);padding:.85rem 1.1rem;border-radius:0 10px 10px 0;margin:1rem 0 0}
.urgent p{margin:0}
.twocol{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:start}
@media (max-width:820px){.twocol{grid-template-columns:1fr;gap:1rem}}
.facts-strip{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.4rem}
.stat{background:var(--card);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow);border-top:5px solid var(--straw)}
.stat:nth-child(2){border-color:var(--moss)}.stat:nth-child(3){border-color:var(--rust)}.stat:nth-child(4){border-color:var(--ink2)}
.stat .n{display:block;font:800 1.7rem/1.1 var(--sans)}
.stat .l{font-size:.95rem;color:var(--ink2)}
.sec{margin-top:2.2rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:820px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}
.tile:hover{transform:translateY(-3px) rotate(-.4deg);color:var(--ink)}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tt{font:800 1.2rem var(--sans);padding:.8rem 1rem 0}
.td{padding:.2rem 1rem 1rem;color:var(--ink2);font-size:1rem}
.night{background:var(--night);color:#efe8d3;border-radius:22px;margin:2.5rem 0;padding:2rem;position:relative;overflow:hidden;
background-image:radial-gradient(circle at 12% 20%,rgba(255,255,230,.7) 1px,transparent 2px),radial-gradient(circle at 68% 12%,rgba(255,255,230,.6) 1px,transparent 2px),radial-gradient(circle at 85% 55%,rgba(255,255,230,.5) 1px,transparent 2px),radial-gradient(circle at 40% 70%,rgba(255,255,230,.4) 1px,transparent 2px),radial-gradient(circle at 92% 18%,#f3e7b5 0 18px,transparent 19px)}
.night h2{color:#fff;margin-top:.3rem}.night .kicker{color:var(--straw)}
.night a{color:#f6e8bd}
.nightin{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media (max-width:820px){.nightin{grid-template-columns:1fr}.night{padding:1.4rem}}
.games{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.games a{display:block;background:var(--night2);border-radius:12px;padding:.75rem 1rem;text-decoration:none;color:#efe8d3;border:1px solid rgba(255,255,255,.08)}
.games a:hover{background:#344a4a}
.games strong{display:block;font-family:var(--sans);font-size:1.1rem;color:#fff}
.games span{font-size:.95rem;opacity:.85}
.night .useless{background:#f6f0dc;color:var(--ink)}
/* useless */
.useless{display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:center;background:var(--card);border:2px dashed rgba(42,29,20,.25);border-radius:18px;padding:1rem 1.1rem;margin:2.2rem 0}
.useless .who{background:none;border:0;padding:0;cursor:pointer;transition:transform .2s}
.useless .who:hover{transform:rotate(-6deg) scale(1.05)}
.useless .note{font-family:var(--hand);font-size:1.18rem;line-height:1.45;margin:.3rem 0}
.useless .sig{font-family:var(--hand);color:var(--ink2)}
.tap{font-family:var(--sans);font-size:.75rem}
@media (max-width:520px){.useless{grid-template-columns:72px 1fr}}
/* support */
.support{background:var(--straw2);border-radius:22px;padding:1.6rem 1.8rem;margin:2.5rem 0;border:2px solid var(--straw);display:grid;gap:1.5rem;grid-template-columns:1fr}
.support:has(.poster-slot:not([hidden])){grid-template-columns:300px 1fr}
.support h2{margin:.3rem 0 .4rem}
@media (max-width:700px){.support:has(.poster-slot:not([hidden])){grid-template-columns:1fr}}
/* pages */
.phead{padding:2.4rem 0 .4rem}
.phead h1{margin-bottom:.2em}
.crumbs{margin:1.4rem 0 -1.4rem;font-family:var(--sans);font-size:.9rem}
.callout{border-radius:12px;padding:.9rem 1.15rem;margin:1.6rem 0;border:1px solid rgba(42,29,20,.1)}
.callout p{margin:.25rem 0 0}
.callout.tip{background:var(--moss2)}.callout.tip .kicker{color:var(--moss-d)}
.callout.warn{background:var(--rust2)}
.callout.note{background:var(--straw2)}.callout.note .kicker{color:#7a5a12}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.dodont>div{background:var(--card);border-radius:14px;padding:.4rem 1.2rem .8rem;box-shadow:var(--shadow)}
.dodont .do{border-top:6px solid var(--moss)}.dodont .dont{border-top:6px solid var(--rust)}
.dodont h3{margin-top:.8rem}
.dodont li{margin:.5rem 0}
@media (max-width:700px){.dodont{grid-template-columns:1fr}}
.steps{padding-left:0;list-style:none;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding-left:3.2rem;margin:1.4rem 0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--moss);color:#fff;font:800 1.1rem/2.3rem var(--sans);text-align:center}
.steps>li h2{margin:.1rem 0 .4rem;font-size:1.45rem}
.small-steps>li{padding-left:2.6rem;margin:.7rem 0}
.small-steps>li::before{width:1.8rem;height:1.8rem;line-height:1.8rem;font-size:.95rem}
.bigphone{background:var(--ink);color:#f6f0dc;border-radius:18px;padding:1.1rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:1rem 0}
.bigphone a{color:#fff;font:800 clamp(1.7rem,5vw,2.4rem) var(--sans);text-decoration:none}
.bigphone .kicker{color:var(--straw)}.bigphone .small{color:#d6ccb5}
.next{border-top:2px dotted rgba(42,29,20,.3);margin-top:2rem;padding-top:1rem}
.next ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:.4rem 0}
.next a{font-family:var(--sans);font-weight:600}
.tablewrap{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden;font-size:1rem}
caption{text-align:left;font:600 .85rem var(--sans);color:var(--ink2);padding:.4rem 0}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid rgba(42,29,20,.1);vertical-align:top}
th{font-family:var(--sans);background:var(--paper2)}
.myths{display:grid;gap:.9rem}
.myth{background:var(--card);border-radius:14px;padding:.8rem 1.1rem;box-shadow:var(--shadow)}
.myth p{margin:.3rem 0}
.myth .m s{text-decoration-color:var(--rust);text-decoration-thickness:2px;color:var(--ink2)}
.lab{font:800 .72rem var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:.1rem .45rem;border-radius:4px;background:var(--rust);color:#fff;margin-right:.3rem}
.f .lab{background:var(--moss)}
.faq details{background:var(--card);border-radius:12px;margin:.6rem 0;padding:.2rem 1rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font:600 1.08rem var(--sans);padding:.65rem 0}
.faq details[open] summary{color:var(--rust)}
/* species */
.spgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.spcard{background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .15s}
.spcard:hover{transform:translateY(-3px);color:var(--ink)}
.spcard img,.spcard .noimg{aspect-ratio:4/3;object-fit:cover;width:100%}
.spn{font:800 1.05rem var(--sans);padding:.6rem .8rem 0}
.spl{font-style:italic;padding:0 .8rem;color:var(--ink2)}
.spw{font-size:.88rem;padding:.2rem .8rem .8rem;color:var(--ink2)}
.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper2);gap:.3rem;padding:1rem;text-align:center;font:600 .78rem var(--sans);color:var(--ink2);border-radius:8px}
.noimg .hog{width:90px;opacity:.75}
.spfacts{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;background:var(--card);padding:1rem 1.2rem;border-radius:12px}
.spfacts dt{font:800 .8rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--rust);padding-top:.25rem}
.spfacts dd{margin:0}
.inline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
/* facts */
.jump{font-family:var(--sans);font-size:.92rem;line-height:1.9}
.factgroup h2{border-bottom:3px solid var(--straw);padding-bottom:.2rem;display:inline-block}
.facts{list-style:none;padding:0}
.facts li{position:relative;padding:.55rem 0 .55rem 3rem;border-bottom:1px dotted rgba(42,29,20,.22);max-width:none}
.fn{position:absolute;left:0;top:.6rem;font:800 .85rem var(--sans);color:var(--moss);background:var(--moss2);border-radius:6px;padding:.05rem .4rem;min-width:2.2rem;text-align:center}
/* field notes */
.journal{display:grid;grid-template-columns:180px 1fr;gap:1.5rem;align-items:start}
.jimg{position:sticky;top:90px;transform:rotate(-5deg)}
.entries{list-style:none;padding:0;margin:0}
.entry{background:var(--card);margin:0 0 .8rem;padding:.7rem 1rem;border-radius:4px 14px 14px 14px;box-shadow:var(--shadow);background-image:repeating-linear-gradient(transparent 0 30px,rgba(63,90,53,.12) 30px 31px)}
.entry p{font-family:var(--hand);font-size:1.15rem;margin:.1rem 0}
.date{font:800 .75rem var(--sans);color:var(--rust);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:640px){.journal{grid-template-columns:1fr}.jimg{position:static;width:120px}}
/* play */
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:700px){.gcards{grid-template-columns:1fr}}
.gcard{background:var(--night);color:#efe8d3;border-radius:18px;padding:1.3rem 1.4rem;text-decoration:none;display:block}
.gcard h2{color:#fff;margin:.3rem 0}.gcard .kicker{color:var(--straw)}
.gcard:hover{background:var(--night2);color:#fff}
.go{font:700 1rem var(--sans);color:var(--straw)}
.game{background:var(--card);border-radius:18px;padding:1.2rem;box-shadow:var(--shadow);margin:1.2rem 0;min-height:200px}
/* kit */
.kit{list-style:none;padding:0;display:grid;gap:.7rem}
.kit li{background:var(--card);border-radius:12px;padding:.75rem 1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;max-width:none}
.kit strong a{font-family:var(--sans)}
.kit span{color:var(--ink2);font-size:1rem}
.disclose{font-size:.92rem;background:var(--paper2);border-radius:10px;padding:.55rem .85rem;color:var(--ink2)}
.credits{list-style:none;padding:0}
.credits li{display:flex;gap:1rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px dotted rgba(42,29,20,.25);font-size:.98rem;max-width:none}
.credits img{width:120px;flex:none;border-radius:6px}
.srcs li{margin:.3rem 0;word-break:break-word}
.contact{list-style:none;padding:0}.contact li{margin:.5rem 0}
.netlist li{margin:.5rem 0}
.nf{text-align:center;padding-top:3rem}.nf .big{width:200px;margin:0 auto}.nf .btns{justify-content:center}.nf .lede{margin:0 auto}
/* footer */
.foot{background:var(--ink);color:#e3d9c2;margin-top:3rem;padding:2rem 0 2.5rem}
.foot a{color:#f6e8bd}
.foot h2{color:#fff;font-size:1.05rem;margin:.6rem 0 .5rem}
.foot ul{list-style:none;padding:0;margin:0}.foot li{margin:.25rem 0;font-size:.98rem}
.fhog{display:flex;align-items:center;gap:.8rem}.fhog .hog{width:64px;--hogc:#8a6a44;--hogs:#100b07;--hogf:#f1dfbd}.fhog p{margin:0;font-size:1.15rem;color:#f6e8bd}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:1rem}
@media (max-width:820px){.cols{grid-template-columns:1fr 1fr}}
.pill{font:600 .7rem var(--sans);background:rgba(246,232,189,.18);border-radius:999px;padding:.05rem .45rem}
.fine{font-size:.88rem;color:#c9bea6;margin-top:1.6rem;max-width:none}
/* games shared */
.gbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;margin-bottom:.8rem}
.opts{display:grid;gap:.55rem;margin:1rem 0}
.opt{text-align:left;font:600 1.05rem var(--sans);padding:.75rem 1rem;border-radius:12px;border:2px solid rgba(42,29,20,.2);background:#fff;cursor:pointer;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--moss)}
.opt.right{background:var(--moss2);border-color:var(--moss)}
.opt.wrong{background:var(--rust2);border-color:var(--rust)}
.why{background:var(--paper2);border-radius:10px;padding:.7rem 1rem}
.qtext{font:800 1.35rem/1.25 var(--sans);margin:.3rem 0}
.hwgrid{display:grid;gap:0;margin:1rem auto;position:relative;touch-action:manipulation;max-width:560px}
.cell{background:#cfdcb5;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;font:800 .78rem var(--sans);text-align:center;color:var(--ink);border:3px solid #7a5a3a;
background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 6px,transparent 6px 12px)}
.cell.blocked{background:#b9a98e;background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0 5px,transparent 5px 10px)}
.cell.lit{background-color:#e9e6a8}
.cell .ic{font-size:1.5rem;line-height:1;display:block}
.fence{position:absolute;z-index:2;background:transparent;border:0;cursor:pointer;padding:0}
.fence span{position:absolute;background:#7a5a3a;border-radius:2px}
.fence.v span{left:50%;top:15%;bottom:15%;width:8px;transform:translateX(-50%)}
.fence.h span{top:50%;left:15%;right:15%;height:8px;transform:translateY(-50%)}
.fence:hover span{background:var(--rust)}
.fence.open span{background:transparent;border:2px dashed var(--moss)}
.fence.open.v span{width:14px}.fence.open.h span{height:14px}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font:600 .88rem var(--sans);color:var(--ink2)}
canvas#au{width:100%;max-width:640px;display:block;margin:0 auto;border-radius:14px;background:#24332f;touch-action:none}
.ctl{display:flex;justify-content:center;gap:1rem;margin-top:.7rem}
.ctl button{font:800 1.4rem var(--sans);width:4.2rem;height:3.2rem;border-radius:12px;border:2px solid var(--ink);background:#fff;cursor:pointer}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;max-width:640px;margin:0 auto}
@media (max-width:520px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{aspect-ratio:1;border-radius:12px;border:0;cursor:pointer;padding:0;position:relative;background:var(--moss);overflow:hidden;font:700 .85rem/1.2 var(--sans);color:var(--ink)}
.pcard .back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--moss)}
.pcard .back svg{width:60%;--hogc:#8a6a44;--hogf:#f1dfbd}
.pcard .face{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#fff;padding:.4rem;text-align:center}
.pcard .face img{width:100%;height:100%;object-fit:cover}
.pcard.up .face,.pcard.done .face{display:flex}.pcard.up .back,.pcard.done .back{display:none}
.pcard.done{outline:4px solid var(--straw)}
.pcard i{display:block;font-weight:400;font-family:var(--serif)}
.toast{background:var(--ink);color:#fff;border-radius:10px;padding:.6rem .9rem;margin:.6rem 0;font-size:1rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.ctl #ag{width:auto;min-width:7rem;padding:0 1rem;font-size:1rem}