/* SwapTrek styles — brand tokens from the SwapTrek Brand Kit */
:root{
  color-scheme: light;
  --orange:#ff7a2f; --orange-deep:#e8601a; --teal:#2bb5a6; --ink:#1e1b33; --ink-2:#4a4560;
  --muted:#7c7690; --paper:#fff6ec; --white:#ffffff; --line:#f0dcc6; --sky:#d6f1ff; --sun:#ffc83d;
  --need:#ff4d6d; --trade:#1fb26b;
  --t1:#f07a3a; --t2:#2bb5a6; --t3:#6e66db; --t4:#a9acd0;
  --emoji:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
  --display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --body:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --radius:18px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body{padding-bottom:0}}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,6vw,46px)} h2{font-size:clamp(22px,4vw,30px)} h3{font-size:20px}
p{margin:0}
.emoji{font-family:var(--emoji);font-style:normal}
.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.stack{display:grid;gap:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,246,236,.92);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-size:24px}
.brand img{width:34px;height:34px}
.brand b{font-weight:400;color:var(--orange)}
.topnav{display:none;gap:6px;align-items:center}
.topnav a{text-decoration:none;font-weight:800;padding:8px 12px;border-radius:12px}
.topnav a[aria-current="page"]{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (min-width:900px){.topnav{display:flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--body);font-weight:900;font-size:14px;border:0;border-radius:14px;padding:10px 14px;cursor:pointer;text-decoration:none;line-height:1.1}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 3px 0 var(--orange-deep)}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.soft{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn:active{transform:translateY(1px)}

/* Bottom tab bar (phones) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;background:var(--white);border-top:1.5px solid var(--line);padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.tabbar a{display:grid;justify-items:center;gap:1px;text-decoration:none;font-size:11px;font-weight:800;color:var(--muted);min-width:64px}
.tabbar a .emoji{font-size:20px}
.tabbar a[aria-current="page"]{color:var(--orange-deep)}
@media (min-width:900px){.tabbar{display:none}}

main{padding-block:18px 40px}
section{display:grid;gap:12px;padding-block:14px}

/* Hero + search */
.hero{display:grid;gap:12px;padding-block:14px 8px}
.searchbox{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:18px;padding:4px 6px 4px 14px;box-shadow:inset 0 0 0 2.5px var(--ink),0 4px 0 var(--ink)}
.searchbox input{flex:1;border:0;outline:0;font:inherit;font-weight:800;font-size:17px;padding:12px 0;background:transparent;color:var(--ink);min-width:0}
.searchbox input::placeholder{color:var(--muted);font-weight:700}
.hint{display:flex;gap:10px;align-items:flex-start;background:var(--white);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line)}
.hint button{margin-left:auto;background:none;border:0;font-size:18px;cursor:pointer;color:var(--muted);line-height:1}

/* Chips & filter bar */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:13px;font-weight:800;padding:6px 12px;border-radius:99px;background:var(--white);border:0;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar select{font:inherit;font-weight:800;font-size:14px;padding:8px 10px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--white);color:var(--ink)}
.count{font-weight:800;color:var(--muted);font-size:14px}

/* Chapter list */
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.chap{display:grid;gap:4px;background:var(--white);border-radius:16px;padding:12px 14px;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line)}
.chap b{font-family:var(--display);font-weight:400;font-size:20px}
.chap small{font-weight:800;color:var(--muted)}
.vtag{display:inline-block;width:max-content;font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px;background:var(--sun);color:#5a3b00}
.vtag.vintage{background:#f3d27a}

/* Card grid + tiles */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (min-width:640px){.grid.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.tilewrap{display:grid;gap:6px}
.card{position:relative;display:block;border-radius:14px;padding:4px;aspect-ratio:3/4.1;max-width:100%;text-decoration:none;color:var(--ink)}
.card.t1{background:var(--t1)} .card.t2{background:var(--t2)} .card.t3{background:var(--t3)}
.card.t4{background:linear-gradient(135deg,#c9cbe3,#f7f7fd,#ffd9ec,#d6f5ff,#e9e2ff,#c9cbe3);background-size:300% 300%;animation:holo 6s ease infinite}
@keyframes holo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.card.t4{animation:none}}
.card .in{height:100%;border-radius:10px;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.card .art{flex:1;display:grid;place-items:center;position:relative;background:linear-gradient(180deg,#c8ecff,#eef9ff)}
.card.t4 .art{background:radial-gradient(circle,rgba(150,130,255,.28) 1.2px,transparent 1.5px) 0 0/8px 8px,linear-gradient(135deg,#fdf1f8,#eef6ff,#f4efff)}
.card .art .emoji{font-size:clamp(30px,9vw,54px);filter:drop-shadow(0 3px 0 rgba(0,0,0,.1))}
.card .st{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:10px;padding:0 8px 2px;border-radius:0 0 8px 8px;color:#fff;white-space:nowrap}
.card.t1 .st{background:var(--t1)} .card.t2 .st{background:var(--t2)} .card.t3 .st{background:var(--t3)} .card.t4 .st{background:var(--t4)}
.card .n{position:absolute;top:2px;right:7px;font-family:var(--display);font-size:18px;color:var(--ink-2)}
.card .vi{position:absolute;bottom:4px;left:6px;font-size:13px}
.card .nm{font-size:12px;font-weight:900;text-align:center;padding:5px 4px 1px;line-height:1.15;min-height:2.5em;display:grid;place-items:center}
.card.t1 .nm{color:var(--t1)} .card.t2 .nm{color:var(--t2)} .card.t3 .nm{color:var(--t3)} .card.t4 .nm{color:#7d80b3}
.card .ch{font-size:9px;font-weight:900;color:#fff;text-align:center;padding:2px 2px;margin-top:3px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.t1 .ch{background:var(--t1)} .card.t2 .ch{background:var(--t2)} .card.t3 .ch{background:var(--t3)} .card.t4 .ch{background:var(--t4)}
.card .flag{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);z-index:2;font-size:11px;font-weight:900;color:#fff;padding:2px 9px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card .flag.need{background:var(--need)} .card .flag.trade{background:var(--trade)}
.card.big{border-radius:22px;padding:6px;max-width:260px}
.card.big .in{border-radius:16px}
.card.big .art .emoji{font-size:96px}
.card.big .nm{font-size:17px} .card.big .ch{font-size:12px;padding:4px} .card.big .n{font-size:28px;right:12px}
.card.big .st{font-size:15px;padding:1px 14px 3px}

/* Need / Trade toggles */
.nt{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}
.nt button{font:inherit;font-size:12px;font-weight:900;border:0;border-radius:10px;padding:6px 4px;cursor:pointer;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2)}
.nt button[aria-pressed="true"].need{background:var(--need);color:#fff;box-shadow:none}
.nt button[aria-pressed="true"].trade{background:var(--trade);color:#fff;box-shadow:none}
.tilewrap .qty{margin-top:10px}
.qty{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:13px}
.qty button{width:26px;height:26px;border-radius:8px;border:0;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:900;cursor:pointer}

/* Card page */
.cardpage{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:24px;align-items:start}
@media (max-width:640px){.cardpage{grid-template-columns:1fr;justify-items:center;text-align:center}.cardpage .meta{justify-items:center}}
.meta{display:grid;gap:10px}
.facts{display:flex;gap:6px;flex-wrap:wrap}
.fact{background:var(--white);border-radius:10px;padding:4px 10px;font-weight:800;font-size:13px;box-shadow:inset 0 0 0 1.5px var(--line)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .btn[aria-pressed="true"].need{background:var(--need);color:#fff;box-shadow:none}
.actions .btn[aria-pressed="true"].trade{background:var(--trade);color:#fff;box-shadow:none}
.panel{background:var(--white);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;gap:10px}
.crumbs{font-size:13px;font-weight:800;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--orange-deep)}
.soon{display:flex;gap:12px;align-items:center}
.soon img{width:52px;height:52px;flex:none}

/* My lists */
.lists{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.lists{grid-template-columns:1fr}}
.listcol h2{display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.empty{padding:18px;border-radius:16px;border:2px dashed var(--line);color:var(--muted);font-weight:700;text-align:center}
.prose{max-width:68ch;display:grid;gap:12px}
.prose h2{margin-top:10px}

footer{border-top:2px dashed var(--line);padding-block:20px 30px;color:var(--muted);font-size:13px}
footer .wrap{display:grid;gap:6px}
footer nav{display:flex;gap:14px;flex-wrap:wrap;font-weight:800}
footer nav a{text-decoration:none;color:var(--ink-2)}

/* v0.2: welcome, how it works, mode switch */
.welcome{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding-block:10px 4px}
.welcome-mark{width:170px;height:auto}
@media (max-width:640px){.welcome{grid-template-columns:1fr}.welcome-mark{display:none}}
.lead{font-size:18px;font-weight:700;color:var(--ink-2)}
.filters summary{cursor:pointer;font-weight:900;font-size:14px;width:max-content;padding:6px 12px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);list-style:none}
.filters summary::-webkit-details-marker{display:none}
.filters summary::before{content:"⚙️ ";font-family:var(--emoji)}
.how{background:var(--white);border-radius:22px;padding:18px;box-shadow:inset 0 0 0 1.5px var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border-radius:16px;padding:12px}
.steps .num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-family:var(--display);font-size:20px}
.steps li:nth-child(2) .num{background:var(--teal)} .steps li:nth-child(3) .num{background:var(--t3)}
.steps b{display:block;font-size:16px}
.steps p{font-size:14px;color:var(--ink-2)}
.tagsoon{display:inline-block;font-size:11px;font-weight:900;background:var(--sun);color:#5a3b00;padding:1px 8px;border-radius:99px}
.modebar{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:10;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--paper);padding-block:8px;font-weight:900}
.mode{font:inherit;font-weight:900;font-size:15px;border:0;border-radius:14px;padding:10px 14px;cursor:pointer;background:var(--white);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink-2)}
.mode.need[aria-pressed="true"]{background:var(--need);color:#fff;box-shadow:0 3px 0 #c81e4a}
.mode.spare[aria-pressed="true"]{background:var(--trade);color:#fff;box-shadow:0 3px 0 #13824c}
.small{font-size:13px}
.details{display:block;text-align:center;font-size:12px;font-weight:800;color:var(--muted);text-decoration:none;margin-top:12px}
.details:hover{color:var(--orange-deep)}

/* ================= v0.3 polish: bouncy sticker cards ================= */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.card{border-radius:16px;padding:5px;box-shadow:0 4px 0 rgba(30,27,51,.18),0 10px 18px rgba(30,27,51,.10);transition:transform .35s var(--spring),box-shadow .25s ease;will-change:transform}
.card:hover{transform:translateY(-6px) rotate(-1.5deg)}
.tilewrap:nth-child(even) .card:hover{transform:translateY(-6px) rotate(1.5deg)}
.card:active{transform:scale(.95)}
.card .in{border-radius:12px;position:relative}
/* art scenes by category */
.card .art{overflow:hidden}
.card .art::before{content:"";position:absolute;inset:auto -20% -38% -20%;height:62%;border-radius:50% 50% 0 0;background:var(--hill,#bfe8a8)}
.card .art::after{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.75);top:18%;left:19%}
.card .art .emoji{position:relative;z-index:1;transition:transform .45s var(--spring)}
.card:hover .art .emoji{transform:scale(1.12) translateY(-3px) rotate(-4deg)}
.card.cat-places .art{background:linear-gradient(180deg,#9fdcff,#dff4ff);--hill:#bde9a4}
.card.cat-nature .art{background:linear-gradient(180deg,#b9f1d3,#ecfff4);--hill:#8fd98a}
.card.cat-food .art{background:radial-gradient(circle,rgba(255,255,255,.55) 1.5px,transparent 2px) 0 0/12px 12px,linear-gradient(180deg,#ffd9b3,#fff1e2);--hill:#ffc48c}
.card.cat-objects .art{background:linear-gradient(180deg,#dcd6ff,#f4f1ff);--hill:#c3b8ff}
.card.cat-activities .art{background:repeating-conic-gradient(from 0deg at 50% 110%,rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg),linear-gradient(180deg,#ffe98f,#fff8d6);--hill:#ffd35c}
/* legendary #9: pearl frame + shine sweep */
.card.t4 .art{background:radial-gradient(circle,rgba(150,130,255,.3) 1.2px,transparent 1.6px) 0 0/8px 8px,linear-gradient(135deg,#fdeaf6,#e6f3ff,#efe8ff);--hill:#e3d9ff}
.card.t4 .in::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite;pointer-events:none;z-index:3}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* star tab + number badge */
.card .st{z-index:2;color:#ffe066;text-shadow:0 1px 0 rgba(0,0,0,.25);font-size:11px;letter-spacing:1px;padding:1px 9px 3px}
.card .n{z-index:2;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.card .vi{z-index:2}
.card .nm{font-size:12.5px}
/* marked states */
.card.is-need{box-shadow:0 0 0 3px var(--need),0 4px 0 rgba(30,27,51,.18),0 10px 20px rgba(255,77,109,.35)}
.card.is-trade{box-shadow:0 0 0 3px var(--trade),0 4px 0 rgba(30,27,51,.18),0 10px 20px rgba(31,178,107,.35)}
.card .flag{bottom:-11px;font-size:11.5px;padding:3px 10px;border:2px solid #fff}
.card.pop{animation:pop .5s var(--spring)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.12) rotate(-3deg)}70%{transform:scale(.97)}100%{transform:scale(1)}}
.spark{position:fixed;z-index:100;pointer-events:none;font-family:var(--emoji);font-size:16px;transform:translate(-50%,-50%);animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.card,.card .art .emoji{transition:none}.card.pop{animation:none}.card.t4 .in::after{animation:none;display:none}}
/* big card on card page */
.card.big{max-width:250px;padding:7px;border-radius:24px}
.card.big .in{border-radius:18px}
.card.big .art .emoji{font-size:104px}
.card.big .n{width:38px;height:38px;font-size:24px;top:8px;right:8px}
.card.big .st{font-size:16px}
.card.big .nm{font-size:18px;min-height:0;padding:8px 6px 4px}
.stagecard{position:relative;display:grid;justify-items:center;padding:26px 16px 30px;border-radius:26px;background:radial-gradient(circle at 50% 40%,#fff 0 30%,transparent 31%),repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.35) 0 8deg,transparent 8deg 16deg),var(--stage,#d6f1ff);border:3px solid var(--ink);overflow:hidden}
.stage-t1{--stage:#ffd6bf}.stage-t2{--stage:#c6f0ea}.stage-t3{--stage:#d9d5ff}.stage-t4{--stage:#f1e6ff}
.float{animation:float 4s ease-in-out infinite;width:100%;display:grid;justify-items:center}
.float .tilewrap{width:min(250px,70vw)}
.stagecard .shadow{width:46%;height:14px;border-radius:50%;background:rgba(30,27,51,.18);margin-top:14px;animation:shadow 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.8);opacity:.7}}
@media (prefers-reduced-motion:reduce){.float,.stagecard .shadow{animation:none}}
.cardpage{grid-template-columns:minmax(0,340px) 1fr;align-items:center}
@media (max-width:700px){.cardpage{grid-template-columns:1fr;text-align:left;justify-items:stretch}.cardpage .meta{justify-items:stretch}}
.fact.rarity{color:#fff;box-shadow:none}
.fact.rarity.t1{background:var(--t1)}.fact.rarity.t2{background:var(--t2)}.fact.rarity.t3{background:var(--t3)}.fact.rarity.t4{background:linear-gradient(90deg,#9b9fd0,#c99be0);}
.bigactions{display:grid;gap:10px}
.bigbtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;border:0;border-radius:18px;padding:14px 16px;cursor:pointer;background:var(--white);box-shadow:inset 0 0 0 2.5px var(--line),0 4px 0 var(--line);transition:transform .3s var(--spring)}
.bigbtn:hover{transform:translateY(-2px)}
.bigbtn:active{transform:translateY(2px)}
.bigbtn .emoji{font-size:28px}
.bigbtn b{display:block;font-size:17px}
.bigbtn small{display:block;font-size:13px;color:var(--muted);font-weight:700}
.bigbtn .check{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;background:var(--paper);color:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.bigbtn.need[aria-pressed="true"]{background:#ffe3ea;box-shadow:inset 0 0 0 2.5px var(--need),0 4px 0 #f6a3b4}
.bigbtn.trade[aria-pressed="true"]{background:#dcf7e8;box-shadow:inset 0 0 0 2.5px var(--trade),0 4px 0 #92dcb4}
.bigbtn[aria-pressed="true"] .check{color:#fff;box-shadow:none}
.bigbtn.need[aria-pressed="true"] .check{background:var(--need)}
.bigbtn.trade[aria-pressed="true"] .check{background:var(--trade)}
.qty.big{justify-content:flex-start;font-size:15px;background:var(--white);border-radius:14px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px var(--line)}
.qty.big button{width:36px;height:36px;font-size:18px}
.qty.big output{font-family:var(--display);font-size:22px;min-width:24px;text-align:center}
/* chapter mode switch */
.modebar{display:grid;gap:8px;padding-block:10px}
.modelabel{font-size:13px;font-weight:800;color:var(--muted)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:16px;transition:transform .3s var(--spring)}
.mode .emoji{font-size:22px}
.mode b{display:block;font-size:15px;line-height:1.15}
.mode small{display:block;font-size:11.5px;font-weight:700;opacity:.8}
.mode:active{transform:scale(.97)}
body[data-mode="spare"] .grid .card:not(.is-trade):hover{box-shadow:0 0 0 3px rgba(31,178,107,.5),0 10px 18px rgba(30,27,51,.12)}
body:not([data-mode="spare"]) .grid .card:not(.is-need):hover{box-shadow:0 0 0 3px rgba(255,77,109,.45),0 10px 18px rgba(30,27,51,.12)}
.tilewrap{padding-bottom:4px}

/* v0.4: choices under each card; sensible card size on big screens */
.card{container-type:inline-size}
.card .art .emoji{font-size:40cqi}
.card.big .art .emoji{font-size:44cqi}
.card .nm{font-size:clamp(11px,7cqi,15px)}
.chapgrid{max-width:720px;gap:18px 14px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(140px,180px))}
.nt{grid-template-columns:1fr;gap:6px;margin-top:14px}
@media (min-width:420px){.nt{grid-template-columns:1fr 1fr}}
.nt button{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;padding:8px 4px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--line),0 2px 0 var(--line);background:var(--white);transition:transform .25s var(--spring)}
.nt button .emoji{font-size:14px}
.nt button:active{transform:scale(.95)}
.nt button.need:hover{box-shadow:inset 0 0 0 2px var(--need),0 2px 0 #f6a3b4}
.nt button.trade:hover{box-shadow:inset 0 0 0 2px var(--trade),0 2px 0 #92dcb4}
.nt button[aria-pressed="true"].need{background:var(--need);color:#fff;box-shadow:0 2px 0 #c81e4a}
.nt button[aria-pressed="true"].trade{background:var(--trade);color:#fff;box-shadow:0 2px 0 #13824c}
.tilewrap .qty{margin-top:6px;background:#dcf7e8;border-radius:10px;padding:4px;font-size:12px;color:#13663f}
.tilewrap .qty output{font-weight:900}
@media (max-width:560px){.chapgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.nt{grid-template-columns:1fr}.nt button{white-space:nowrap}}
.tilewrap .qty{gap:4px}
.tilewrap .qty button{width:24px;height:24px}

/* ================= v0.5 homepage redesign ================= */
.hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-block:36px 28px}
@media (max-width:860px){.hero2{grid-template-columns:1fr;padding-block:16px 8px;gap:8px}}
.hero-copy{display:grid;gap:18px}
.pillbar{display:flex;gap:6px;flex-wrap:wrap}
.pillbar span{font-size:13px;font-weight:800;padding:5px 12px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.mega{font-size:clamp(38px,6.4vw,70px);line-height:.98;letter-spacing:.005em}
.mega em{font-style:normal;color:var(--orange)}
.hero-copy .lead{max-width:46ch;font-size:clamp(16px,1.8vw,19px)}
.searchbox.big input{font-size:18px;padding:15px 0}
.or{font-weight:800;color:var(--muted)}
.or a{color:var(--orange-deep);text-decoration:none}
.hero-art{position:relative;height:420px;display:grid;place-items:center}
@media (max-width:860px){.hero-art{height:250px}.hero-art .fan{width:110px}.hero-art .fan-1{width:125px}.pax-peek{width:70px;height:70px}}
.burst{position:absolute;inset:6% 4%;border-radius:40px;background:radial-gradient(circle at 50% 50%,#fff 0 22%,transparent 23%),repeating-conic-gradient(from 0deg,rgba(255,255,255,.45) 0 9deg,transparent 9deg 18deg),linear-gradient(160deg,#ffd9bf,#d6f1ff);border:3px solid var(--ink)}
.fan{position:absolute;width:clamp(120px,15vw,170px);transition:transform .5s var(--spring)}
.fan .tilewrap{pointer-events:auto}
.fan-0{transform:translate(-62%,6%) rotate(-14deg)}
.fan-1{transform:translate(0,-6%) rotate(2deg);z-index:2;width:clamp(135px,17vw,190px)}
.fan-2{transform:translate(62%,8%) rotate(13deg)}
.hero-art:hover .fan-0{transform:translate(-72%,4%) rotate(-18deg)}
.hero-art:hover .fan-2{transform:translate(72%,6%) rotate(17deg)}
.fan-1 .card{animation:float 4.5s ease-in-out infinite}
.pax-peek{position:absolute;width:96px;height:96px;bottom:2%;right:8%;z-index:3;filter:drop-shadow(0 4px 0 rgba(30,27,51,.2));transform:rotate(8deg)}
@media (prefers-reduced-motion:reduce){.fan-1 .card{animation:none}}
.center{text-align:center}
.how2{padding-block:28px}
.steps2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.steps2{grid-template-columns:1fr}}
.steps2 li{background:var(--white);border-radius:24px;padding:18px;display:grid;gap:8px;box-shadow:inset 0 0 0 1.5px var(--line),0 6px 0 var(--line)}
.steps2 b{font-size:18px;font-family:var(--display);font-weight:400}
.steps2 p{font-size:15px;color:var(--ink-2)}
.illo{height:130px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.illo.i1{background:#ffe3ea}.illo.i2{background:#dcf7e8}.illo.i3{background:#ece9ff}
.minicard{width:70px;aspect-ratio:3/4.1;border-radius:10px;padding:3px;display:grid;box-shadow:0 4px 0 rgba(30,27,51,.15)}
.minicard .emoji{background:linear-gradient(180deg,#c8ecff,#fff);border-radius:7px;display:grid;place-items:center;font-size:32px}
.minicard.t1{background:var(--t1)}.minicard.t4{background:linear-gradient(135deg,#c9cbe3,#f7f7fd,#ffd9ec,#d6f5ff)}
.illo .tag{position:absolute;bottom:14px;font-size:12px;font-weight:900;color:#fff;padding:3px 10px;border-radius:99px;border:2px solid #fff}
.illo .tag.need{background:var(--need)}.illo .tag.trade{background:var(--trade)}
.illo .swap{font-family:var(--display);font-size:34px;color:var(--t3)}
.illo.i1 .minicard{transform:rotate(-6deg)}.illo.i2 .minicard{transform:rotate(5deg)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.more{font-weight:900;color:var(--orange-deep);text-decoration:none}
.chapters{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.chap{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 var(--line);transition:transform .3s var(--spring)}
.chap:hover{transform:translateY(-3px)}
.chap-t{display:grid;gap:2px;flex:1}
.chap .go{font-family:var(--display);font-size:26px;color:var(--orange)}
.minis{display:flex;flex:none}
.mini{width:34px;aspect-ratio:3/4.1;border-radius:7px;padding:2px;display:grid;box-shadow:0 2px 0 rgba(30,27,51,.15);margin-left:-10px}
.mini:first-child{margin-left:0;transform:rotate(-8deg)}.mini:nth-child(3){transform:rotate(8deg)}
.mini .emoji{background:#fff;border-radius:5px;display:grid;place-items:center;font-size:16px}
.mini.t1{background:var(--t1)}.mini.t2{background:var(--t2)}.mini.t3{background:var(--t3)}.mini.t4{background:linear-gradient(135deg,#c9cbe3,#f7f7fd,#ffd9ec,#d6f5ff)}
.realname{font-weight:800;color:var(--ink-2);font-size:18px;margin-top:-4px}

/* v0.7 My lists: separate stacked panels */
.listpanel{border-radius:26px;padding:20px 18px 26px;margin-block:10px;gap:18px}
.needpanel{background:#ffeef2;box-shadow:inset 0 0 0 2px #ffc9d5}
.tradepanel{background:#e6f8ee;box-shadow:inset 0 0 0 2px #b5e8cc;margin-top:28px}
.listhead{display:flex;gap:14px;align-items:center}
.listhead p{color:var(--ink-2);font-size:14px;font-weight:700}
.bigicon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:#fff;flex:none;box-shadow:0 3px 0 rgba(30,27,51,.08)}
.countpill{display:inline-grid;place-items:center;min-width:32px;height:28px;padding:0 9px;border-radius:99px;font-family:var(--body);font-weight:900;font-size:15px;color:#fff;vertical-align:middle}
.needpanel .countpill{background:var(--need)} .tradepanel .countpill{background:var(--trade)}
.listpanel .grid.wide{grid-template-columns:repeat(auto-fill,minmax(140px,170px));gap:26px 20px}
@media (max-width:560px){.listpanel .grid.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}
.listpanel .empty{background:rgba(255,255,255,.6)}
.listpanel .tilewrap .qty{margin-top:16px;background:#fff}

/* v0.8 themed fan-made scenes (sky, sun/moon, ground) */
.th-city{--sky1:#9fd4ff;--sky2:#e3f3ff;--hill:#b9c4e6;--sun:#fff3b0}
.th-sunny{--sky1:#ffd27a;--sky2:#fff3d6;--hill:#f7b96b;--sun:#fff8d8}
.th-tropic{--sky1:#7fe0d8;--sky2:#e3fff7;--hill:#6fd08a;--sun:#fff3a6}
.th-snow{--sky1:#bfe3ff;--sky2:#f4fbff;--hill:#ffffff;--sun:#eaf6ff}
.th-desert{--sky1:#ffc796;--sky2:#fff0dc;--hill:#f2b46a;--sun:#fff0b8}
.th-meadow{--sky1:#a8e6ff;--sky2:#ecfbff;--hill:#8fd98a;--sun:#fff6b8}
.th-ocean{--sky1:#8fd0ff;--sky2:#e6f6ff;--hill:#4fb4e8;--sun:#fff5c2}
.th-night{--sky1:#3b3170;--sky2:#6c5aa8;--hill:#2a2250;--sun:#ffe9a8}
.th-festive{--sky1:#ffb3c7;--sky2:#fff0f5;--hill:#ff8fab;--sun:#fff6d6}
.card[class*="th-"] .art{background:radial-gradient(circle at 78% 18%,var(--sun) 0 9%,transparent 9.5%),linear-gradient(180deg,var(--sky1),var(--sky2))}
.card.th-snow .art::before{box-shadow:inset 0 3px 0 #d6ecff}
.card.th-ocean .art::before{border-radius:40% 60% 0 0/30% 30% 0 0}
.card.t4[class*="th-"] .art{background:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px) 0 0/8px 8px,radial-gradient(circle at 78% 18%,var(--sun) 0 9%,transparent 9.5%),linear-gradient(180deg,var(--sky1),var(--sky2))}
.card .accent{position:absolute;left:8%;bottom:10%;z-index:1;font-family:var(--emoji);font-size:20cqi;opacity:.9;transform:rotate(-10deg);filter:drop-shadow(0 2px 0 rgba(0,0,0,.08))}
.card.th-night .in{background:#fff}
/* chapter banner */
.banner{position:relative;display:grid;grid-template-columns:1fr;border-radius:26px;overflow:hidden;min-height:190px;border:3px solid var(--ink);background:radial-gradient(circle at 85% 22%,var(--sun) 0 7%,transparent 7.5%),linear-gradient(180deg,var(--sky1),var(--sky2));margin-top:8px}
.banner::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-55%;height:95%;border-radius:50% 50% 0 0;background:var(--hill);z-index:0}
.banner .scene{position:absolute;inset:0;z-index:1}
.banner .s{position:absolute;font-family:var(--emoji);filter:drop-shadow(0 4px 0 rgba(0,0,0,.12));animation:bob 5s ease-in-out infinite}
.banner .s0{font-size:clamp(64px,11vw,110px);right:6%;bottom:14%}
.banner .s1{font-size:clamp(34px,5vw,54px);right:28%;bottom:22%;animation-delay:-1s}
.banner .s2{font-size:clamp(30px,4.5vw,48px);right:44%;bottom:10%;animation-delay:-2s}
.banner .s3{font-size:clamp(28px,4vw,44px);right:18%;top:12%;animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.banner .s{animation:none}}
.bannertext{position:relative;z-index:2;padding:22px;display:grid;gap:6px;align-content:start;max-width:60%}
.bannertext h1{font-size:clamp(34px,6vw,58px);color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
.th-night .bannertext h1{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.bsub{font-weight:800;font-size:13px;background:rgba(255,255,255,.85);padding:3px 10px;border-radius:14px;justify-self:start;max-width:100%}
@media (max-width:560px){.bannertext{max-width:100%}.banner{min-height:200px}.banner .s0{bottom:8%}.banner .s2{right:50%}}
.artnote{font-size:13.5px;font-weight:700;color:var(--ink-2);background:var(--white);border-radius:14px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px var(--line);max-width:70ch}
.stagecard[class*="th-"]{background:radial-gradient(circle at 50% 40%,#fff 0 30%,transparent 31%),repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.35) 0 8deg,transparent 8deg 16deg),linear-gradient(180deg,var(--sky1),var(--sky2))}

.card.th-night .art::after{background:rgba(255,255,255,.28)}

/* v0.9 bigger stars + names, no accent */
.card .accent:empty{display:none}
.card .st{font-size:clamp(11px,8cqi,16px);padding:2px 10px 4px;letter-spacing:1.5px;border-radius:0 0 10px 10px}
.card .nm{font-size:clamp(12.5px,8.5cqi,17px);padding:7px 4px 3px;min-height:0}
.card .ch{font-size:clamp(9px,5.2cqi,11px);padding:3px 2px}
.card .n{width:clamp(22px,15cqi,30px);height:clamp(22px,15cqi,30px);font-size:clamp(13px,9cqi,18px)}
.card .art .emoji{font-size:44cqi}
.card.big .st{font-size:18px}
.chapters.latest{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* v1.0 how it works: 4 steps */
.steps2{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.steps2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps2{grid-template-columns:1fr}}
.illo.i3{background:#fff4d6}.illo.i4{background:#ece9ff}
.illo .acct{display:grid;justify-items:center;gap:2px;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 4px 0 rgba(30,27,51,.1)}
.illo .acct img{width:40px;height:40px}
.illo .acct b{font-family:var(--display);font-weight:400;font-size:15px}
.illo .acct small{font-size:11px;font-weight:800;color:var(--ink-2)}
.how2 .artnote{margin-top:6px}
.steps2 li{align-content:start}.how2 .artnote{max-width:none;background:#fff8e6;box-shadow:inset 0 0 0 2px #ffe0a3}

/* ================= v1.1 homepage excitement ================= */
.hero2{padding-block:44px 30px}
.mega{font-size:clamp(40px,6.6vw,76px)}
/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--ink);color:#fff;border-radius:26px;padding:20px 10px;margin-block:8px 20px;box-shadow:0 8px 0 #0f0d1f}
.stats div{display:grid;justify-items:center;gap:2px;border-left:1.5px solid rgba(255,255,255,.14)}
.stats div:first-child{border-left:0}
.stats b{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,48px);line-height:1;color:var(--sun)}
.stats div:nth-child(2) b{color:#7de3d6}.stats div:nth-child(3) b{color:#ffb088}.stats div:nth-child(4) b{color:#c9c2ff}
.stats span{font-size:13px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr);row-gap:16px}.stats div:nth-child(3){border-left:0}}
/* new chapters postcards */
.newsec h2{font-size:clamp(28px,4vw,40px)}
.postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.postcards{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.postcard{scroll-snap-align:start}}
.postcard{position:relative;display:block;min-height:200px;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--ink);border:3px solid var(--ink);background:radial-gradient(circle at 84% 20%,var(--sun) 0 9%,transparent 9.5%),linear-gradient(180deg,var(--sky1),var(--sky2));box-shadow:0 6px 0 var(--ink);transition:transform .35s var(--spring),box-shadow .2s}
.postcard:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 12px 0 var(--ink)}
.postcard::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-50%;height:90%;border-radius:50% 50% 0 0;background:var(--hill)}
.postcard .scene{position:absolute;inset:0;z-index:1}
.postcard .s{position:absolute;font-family:var(--emoji);filter:drop-shadow(0 4px 0 rgba(0,0,0,.12));animation:bob 5s ease-in-out infinite}
.postcard .s0{font-size:74px;right:8%;bottom:26%}
.postcard .s1{font-size:40px;right:40%;bottom:30%;animation-delay:-1.2s}
.postcard .s2{font-size:34px;right:62%;bottom:44%;animation-delay:-2.4s}
.postcard .s3{font-size:30px;right:30%;top:8%;animation-delay:-3.6s}
.postcard:hover .s0{transform:scale(1.1) rotate(-6deg)}
.pc-text{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:2px;padding:12px 16px;background:rgba(255,255,255,.92);border-top:3px solid var(--ink)}
.pc-text b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.pc-text small{font-weight:800;color:var(--ink-2);font-size:13px}
.newtag{position:absolute;top:-16px;left:14px;background:var(--need);color:#fff;font-weight:900;font-size:12px;letter-spacing:.08em;padding:3px 10px;border-radius:99px;border:2.5px solid var(--ink);transform:rotate(-4deg)}
/* card river */
.riversec{padding-block:30px 10px;overflow:hidden}
.riversec h2{font-size:clamp(28px,4vw,40px)}
.river{display:grid;gap:18px;margin-inline:-16px;padding-block:10px 18px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:river 70s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:80s}
.river:hover .track{animation-play-state:paused}
.rv{width:118px;flex:none}
.rv .card{transform:rotate(-2deg)}.rv:nth-child(even) .card{transform:rotate(2deg)}
@keyframes river{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}.postcard .s{animation:none}}
/* CTA band */
.ctaband{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-block:30px 20px;padding:26px 28px;border-radius:30px;color:#fff;background:radial-gradient(circle at 12% 50%,rgba(255,255,255,.18) 0 18%,transparent 19%),linear-gradient(120deg,var(--orange),#ff9a4d);border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink)}
.ctaband img{width:110px;height:auto;filter:drop-shadow(0 4px 0 rgba(30,27,51,.25))}
.ctaband h2{font-size:clamp(26px,3.6vw,38px);color:#fff;text-shadow:0 3px 0 rgba(30,27,51,.2)}
.ctaband p{font-weight:700;opacity:.95}
.btn.big{font-size:18px;padding:16px 22px;border-radius:18px}
.ctaband .btn.primary{background:#fff;color:var(--orange-deep);box-shadow:0 5px 0 var(--ink)}
@media (max-width:760px){.ctaband{grid-template-columns:1fr;justify-items:center;text-align:center}.ctaband img{width:90px}}
/* how it works: a bit lighter rhythm */
.how2 h2{font-size:clamp(28px,4vw,40px)}
.riversec{grid-template-columns:minmax(0,1fr)}
.river{min-width:0;overflow:hidden}
/* My lists: remove buttons */
.rmbtn{display:block;width:100%;margin-top:14px;font:inherit;font-size:13px;font-weight:900;border:0;border-radius:12px;padding:8px 6px;cursor:pointer;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line),0 2px 0 var(--line);transition:transform .2s var(--spring)}
.rmbtn:hover{color:#c81e4a;box-shadow:inset 0 0 0 2px var(--need),0 2px 0 #f6a3b4}
.rmbtn.got:hover{color:#13824c;box-shadow:inset 0 0 0 2px var(--trade),0 2px 0 #92dcb4}
.rmbtn:active{transform:scale(.96)}
.listpanel .tilewrap .qty + .rmbtn{margin-top:8px}

/* ================= v1.2 hook: announce bar, bigger badges, try-it grid ================= */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border-radius:18px;text-decoration:none;color:#fff;font-weight:800;font-size:16px;text-align:center;background:linear-gradient(90deg,#6e66db,#ff4d6d,#ff7a2f,#6e66db);background-size:300% 100%;animation:shimmer 8s linear infinite;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.announce b{font-family:var(--display);font-weight:400;font-size:20px}
.announce:hover{filter:brightness(1.05)}
@keyframes shimmer{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.announce{animation:none}}
.newtag.static{position:static;transform:rotate(-4deg);display:inline-block;background:var(--sun);color:var(--ink)}
.pillbar{gap:8px}
.pillbar span{font-size:16px;font-weight:900;padding:9px 16px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line)}
.pillbar span.free{background:var(--trade);color:#fff;box-shadow:0 3px 0 #13824c;font-size:17px;letter-spacing:.03em}
@media (max-width:560px){.pillbar span{font-size:14px;padding:7px 12px}.pillbar span.free{font-size:15px}}
.tryit{background:var(--white);border:3px solid var(--ink);border-radius:28px;padding:16px;display:grid;gap:10px;box-shadow:0 8px 0 var(--ink)}
.tryhead{display:flex;align-items:center;gap:10px}
.tryhead b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1}
.tryhint{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.k{display:inline-block;color:#fff;font-weight:900;font-size:12px;padding:1px 8px;border-radius:99px}.k.need{background:var(--need)}.k.trade{background:var(--trade)}
.trygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding-bottom:6px}
.trygrid .card .nm{font-size:clamp(10px,7cqi,13px)}
.trygrid .card .ch{display:none}
.trygrid .card .flag{font-size:10.5px;padding:2px 8px;bottom:-9px}
.trysum{font-size:14px;font-weight:800;text-align:center;background:var(--paper);border-radius:12px;padding:8px}
.trysum a{color:var(--orange-deep)}
@media (max-width:860px){.tryit{margin-top:6px}}
.newsec{padding-top:18px}
/* trader preview */
.traders .sechead{align-items:center}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tlist li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:var(--paper);border-radius:14px;padding:10px}
.tlist .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:18px}
.tlist b{display:block;font-size:15px}
.tlist small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:700}
.tlist .mut{display:inline-block;background:#ffe3ea;color:#c81e4a;font-size:11px;font-weight:900;padding:1px 7px;border-radius:99px;margin-left:4px}
.tlist.example{opacity:.85;position:relative}
.btn.sm{font-size:12.5px;padding:7px 11px;border-radius:11px;pointer-events:none}
.trygrid .card{aspect-ratio:3/3.6}
.trygrid .card .nm{font-size:14px;padding:4px}
.mega{font-size:clamp(38px,5.6vw,68px)}
.trygrid{row-gap:22px}.trygrid .card .nm{padding-bottom:10px}
.banner .vtag{font-size:14px;padding:4px 12px;border:2px solid var(--ink);justify-self:start}
.card .vi{bottom:6px;left:6px;width:clamp(20px,14cqi,28px);height:clamp(20px,14cqi,28px);display:grid;place-items:center;border-radius:50%;background:#fff;font-size:clamp(12px,9cqi,17px);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ===== v1.4: legendary #9 gets a bold gold frame ===== */
.card.t4{padding:6px;background:linear-gradient(135deg,#fff3a8 0%,#ffc83d 18%,#ff9f1c 34%,#fff1a0 50%,#ffb627 66%,#ff8fd0 82%,#ffe36e 100%);background-size:260% 260%;animation:holo 5s ease infinite;
  box-shadow:0 0 0 2.5px var(--ink),0 0 0 5px #ffe27a,0 5px 0 5px rgba(30,27,51,.22),0 0 22px 6px rgba(255,190,40,.55)}
.card.t4 .in{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.card.t4 .st{background:linear-gradient(90deg,#ff9f1c,#ffc83d);color:#fff;text-shadow:0 1px 0 rgba(120,60,0,.5);border:2px solid var(--ink);border-top:0}
.card.t4 .nm{color:#b86b00}
.card.t4 .ch{background:linear-gradient(90deg,#ff9f1c,#ffc83d,#ff9f1c);color:#fff;text-shadow:0 1px 0 rgba(120,60,0,.45)}
.card.t4 .n{background:linear-gradient(135deg,#fff6c9,#ffd35c);box-shadow:0 0 0 2px var(--ink)}
.card.t4::before{content:"✦";position:absolute;top:-9px;left:-7px;z-index:4;font-size:18px;color:#ffd84a;text-shadow:0 0 0 var(--ink),0 0 6px rgba(255,200,40,.9);animation:twinkle 2.4s ease-in-out infinite}
.card.t4::after{content:"✦";position:absolute;bottom:14px;right:-8px;z-index:4;font-size:13px;color:#fff3a8;text-shadow:0 0 6px rgba(255,200,40,.9);animation:twinkle 2.4s ease-in-out -1.2s infinite}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.card.t4.is-need{box-shadow:0 0 0 3px var(--need),0 0 0 6px #ffe27a,0 10px 20px rgba(255,77,109,.35),0 0 22px 6px rgba(255,190,40,.5)}
.card.t4.is-trade{box-shadow:0 0 0 3px var(--trade),0 0 0 6px #ffe27a,0 10px 20px rgba(31,178,107,.35),0 0 22px 6px rgba(255,190,40,.5)}
.card.t4.big{padding:9px}
.fact.rarity.t4{background:linear-gradient(90deg,#ff9f1c,#ffc83d);color:#fff;box-shadow:0 0 0 2px var(--ink)}
.mini.t4,.minicard.t4{background:linear-gradient(135deg,#ffe36e,#ff9f1c,#fff1a0)}
@media (prefers-reduced-motion:reduce){.card.t4::before,.card.t4::after{animation:none}}

/* ===== v1.4: chapters page ===== */
.chaphero{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;margin-top:10px;padding:26px 28px;border-radius:32px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);
  background:radial-gradient(circle at 88% 18%,var(--sun) 0 7%,transparent 7.5%),radial-gradient(ellipse at 20% 120%,#bfe8a8 0 30%,transparent 31%),radial-gradient(ellipse at 80% 125%,#a6dc8f 0 32%,transparent 33%),linear-gradient(180deg,#8fd6ff,#dff4ff);overflow:hidden}
.chaphero .mega{margin:0 0 8px}
.chaphero .lead{margin:0 0 14px;max-width:44ch}
.statpills{display:flex;flex-wrap:wrap;gap:8px}
.statpills span{background:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:6px 14px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
.statpills b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--orange-deep)}
.myprog{margin:14px 0 0;background:rgba(255,255,255,.92);border-radius:14px;padding:8px 12px;font-weight:800;display:inline-block}
.myprog a{color:var(--orange-deep)}
.ch-art{position:relative;height:210px}
.ch-art span{position:absolute;font-family:var(--emoji);filter:drop-shadow(0 5px 0 rgba(0,0,0,.12));animation:bob 5s ease-in-out infinite}
.ch-art span:nth-child(1){font-size:110px;left:18%;top:18%}
.ch-art span:nth-child(2){font-size:64px;right:6%;top:2%;animation-delay:-1.5s}
.ch-art span:nth-child(3){font-size:54px;left:2%;bottom:0;animation-delay:-3s}
.ch-art span:nth-child(4){font-size:46px;right:14%;bottom:6%;animation-delay:-2.2s}
@media (max-width:760px){.chaphero{grid-template-columns:1fr;padding:20px 18px}.ch-art{display:none}}
.postcards.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1060px){.postcards.five{grid-auto-flow:column;grid-auto-columns:minmax(230px,42%);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 12px}}
@media (max-width:560px){.postcards.five{grid-auto-columns:76%}}
.allsec h2{margin-bottom:0}
.filterbar{display:grid;gap:10px}
.chips .chip[data-chapkind="mine"]{background:#fff6d6}
.chapters.chapgrid2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
/* the postcard-style chapter tile */
.chap.chapcard{position:relative;display:block;padding:0;min-height:168px;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--ink);border:3px solid var(--ink);
  background:radial-gradient(circle at 84% 18%,var(--sun) 0 8%,transparent 8.5%),linear-gradient(180deg,var(--sky1),var(--sky2));box-shadow:0 5px 0 var(--ink);transition:transform .35s var(--spring),box-shadow .2s}
.chap.chapcard:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 10px 0 var(--ink)}
.chap.chapcard:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
.chapcard::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-52%;height:92%;border-radius:50% 50% 0 0;background:var(--hill)}
.chapcard .scene{position:absolute;inset:0;z-index:1}
.chapcard .s{position:absolute;font-family:var(--emoji);filter:drop-shadow(0 3px 0 rgba(0,0,0,.12));animation:bob 5s ease-in-out infinite;transition:transform .4s var(--spring)}
.chapcard .s0{font-size:58px;right:7%;bottom:34%}
.chapcard .s1{font-size:32px;right:44%;bottom:40%;animation-delay:-1.2s}
.chapcard .s2{font-size:26px;left:7%;bottom:52%;animation-delay:-2.4s}
.chapcard .s3{font-size:24px;right:34%;top:8%;animation-delay:-3.6s}
.chapcard:hover .s0{transform:scale(1.15) rotate(-8deg)}
.chapcard:hover .s1{transform:scale(1.12) rotate(6deg)}
.chapcard .ctags{position:absolute;top:8px;left:8px;z-index:3;display:flex;flex-wrap:wrap;gap:4px;max-width:70%}
.ctag{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:99px;border:2px solid var(--ink);background:#fff;white-space:nowrap}
.ctag.new{background:var(--need);color:#fff;transform:rotate(-4deg)}
.ctag.vint{background:#f3d27a}
.ctag.eph{background:#e5dcff}
.cc-text{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:1px;padding:8px 12px 9px;background:rgba(255,255,255,.93);border-top:3px solid var(--ink)}
.cc-text b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-text small{font-weight:800;color:var(--ink-2);font-size:12px}
.mine{display:flex;flex-wrap:wrap;gap:4px}
.mk{color:#fff;border-radius:99px;padding:0 7px;font-size:11.5px}
.mk.need{background:var(--need)}.mk.trade{background:var(--trade)}
.chapcard.has-mine{box-shadow:0 5px 0 var(--ink),0 0 0 4px #ffe27a}
.chap.chapcard.bigcard{min-height:210px}
.bigcard .s0{font-size:76px}.bigcard .s1{font-size:40px}.bigcard .s2{font-size:32px}.bigcard .s3{font-size:28px}
.bigcard .cc-text b{font-size:21px;white-space:normal}
.bigcard .s1{right:48%;bottom:36%}.bigcard .s2{left:6%;bottom:50%}
.bigcard .ctags{top:10px;left:10px}
@media (prefers-reduced-motion:reduce){.chapcard .s,.ch-art span{animation:none}}

/* ===== v1.4: try-it live list + toast + nav badge ===== */
.trylist{border:2.5px solid var(--ink);border-radius:18px;background:var(--paper);padding:10px 12px;display:grid;gap:8px}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.tl-head b{font-family:var(--display);font-weight:400;font-size:18px}
.tl-sub{font-size:12px;font-weight:800;color:var(--trade)}
.tl-head a{margin-left:auto;font-weight:900;font-size:13px;color:var(--orange-deep)}
.saved-dot{width:10px;height:10px;border-radius:50%;background:var(--trade);box-shadow:0 0 0 3px rgba(31,178,107,.25);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(31,178,107,0)}}
.tl-rows{display:grid;gap:6px}
.tl-row{display:flex;align-items:flex-start;gap:8px}
.tl-row .k{flex:none;padding:3px 10px;font-size:12.5px}
.tl-items{display:flex;flex-wrap:wrap;gap:4px;font-size:12.5px;font-weight:800;color:var(--muted);min-height:24px;align-items:center}
.tl-items i{font-style:normal;font-weight:700}
.tl-chip{background:#fff;border-radius:99px;padding:2px 9px;animation:chipin .35s var(--spring)}
.tl-chip.need{box-shadow:inset 0 0 0 2px var(--need);color:#c9224a}
.tl-chip.trade{box-shadow:inset 0 0 0 2px var(--trade);color:#12804a}
.tl-more{font-size:12px}
@keyframes chipin{from{transform:scale(.4);opacity:0}}
.tl-acct{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 10px;box-shadow:inset 0 0 0 2px var(--line)}
.tl-acct span{display:grid;line-height:1.2;flex:1}
.tl-acct b{font-size:13.5px}.tl-acct small{font-size:12px;color:var(--muted);font-weight:700}
.tl-acct .tagsoon{flex:none}
.navcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:99px;background:var(--need);color:#fff;font-size:11.5px;font-weight:900;line-height:1;vertical-align:1px}
.tabbar .navcount{position:absolute;top:2px;margin-left:22px}
.tabbar a{position:relative}
.navcount.bump{animation:pop .5s var(--spring)}
.toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:24px;z-index:200;transform:translateY(30px);opacity:0;max-width:520px;text-align:center;background:var(--ink);color:#fff;font-weight:800;font-size:14px;padding:11px 16px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .35s var(--spring),opacity .25s}
.toast.show{transform:translateY(0);opacity:1}
.toast.need{box-shadow:0 0 0 3px var(--need),0 8px 24px rgba(0,0,0,.25)}
.toast.trade{box-shadow:0 0 0 3px var(--trade),0 8px 24px rgba(0,0,0,.25)}
.toast a{color:var(--sun);margin-left:6px;white-space:nowrap}
@media (max-width:760px){.toast{bottom:84px}}
@media (max-width:760px){.chaphero{background:radial-gradient(circle at 94% 6%,var(--sun) 0 34px,transparent 35px),radial-gradient(ellipse at 20% 120%,#bfe8a8 0 30%,transparent 31%),radial-gradient(ellipse at 80% 125%,#a6dc8f 0 32%,transparent 33%),linear-gradient(180deg,#8fd6ff,#dff4ff)}
  .statpills span{padding:4px 11px;font-size:14px}.statpills b{font-size:17px}}
.card.t4 .st{padding:0 7px 2px;border-width:1.5px}

.chapcount{font-weight:900;font-size:14px;background:var(--ink);color:#fff;border-radius:99px;padding:6px 14px;white-space:nowrap}
.chapcount.bump{animation:pop .45s var(--spring)}

/* ===== contact + donate ===== */
.contacthero{display:flex;align-items:center;gap:22px;margin-top:10px;padding:24px 28px;border-radius:32px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:radial-gradient(circle at 92% 20%,var(--sun) 0 8%,transparent 8.5%),radial-gradient(ellipse at 70% 130%,#bfe8a8 0 34%,transparent 35%),linear-gradient(180deg,#8fd6ff,#dff4ff)}
.contacthero .mega{margin:0 0 6px}.contacthero .lead{margin:0;max-width:52ch}
.contacthero img{flex:none;animation:bob 5s ease-in-out infinite}
.contactgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ccard{display:grid;align-content:start;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:18px;box-shadow:0 5px 0 var(--ink);transition:transform .35s var(--spring)}
.ccard:hover{transform:translateY(-4px) rotate(-.6deg)}
.ccard .cic{font-family:var(--emoji);font-size:42px;line-height:1}
.ccard h2{margin:0;font-size:24px}.ccard p{margin:0 0 6px;color:var(--ink-2);font-weight:700;font-size:14.5px}
.ccard .btn{justify-self:start}
.ccard:nth-child(1){background:linear-gradient(180deg,#fff,#fff3ea)}.ccard:nth-child(2){background:linear-gradient(180deg,#fff,#eafaf6)}
.ccard:nth-child(3){background:linear-gradient(180deg,#fff,#fffbe6)}.ccard:nth-child(4){background:linear-gradient(180deg,#fff,#f1efff)}
.contactfoot{display:grid;gap:6px}.contactfoot p{margin:0}
.mailline{font-weight:800;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.btn.small{padding:4px 12px;font-size:13px}
.btn.disabled{opacity:.6;cursor:default}
.donatehero{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center;margin-top:10px;padding:28px;border-radius:32px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:radial-gradient(circle at 12% 110%,#ffd6e3 0 26%,transparent 27%),linear-gradient(180deg,#fff4d6,#ffe9f0)}
.donatehero .mega{margin:10px 0 8px}.donatehero .lead{margin:0 0 16px;max-width:48ch}
.donaterow{margin-bottom:12px}
.tips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tipbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:900;background:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:7px 14px;box-shadow:0 3px 0 var(--ink);transition:transform .3s var(--spring)}
.tipbtn:hover{transform:translateY(-3px)}
.small{font-size:13px}
.dh-art{position:relative;display:grid;place-items:center;min-height:220px}
.dh-art img{animation:bob 5s ease-in-out infinite}
.dh-art span{position:absolute;font-family:var(--emoji);font-size:40px;animation:bob 4s ease-in-out infinite}
.dh-art span:nth-of-type(1){top:6%;right:14%}.dh-art span:nth-of-type(2){bottom:12%;left:10%;animation-delay:-1.5s}.dh-art span:nth-of-type(3){top:16%;left:6%;animation-delay:-2.5s}
.wig{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.wig div{background:#fff;border-radius:20px;padding:16px;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line);display:grid;gap:4px}
.wig .emoji{font-size:34px}.wig p{margin:0;color:var(--ink-2);font-weight:700;font-size:14px}
@media (max-width:760px){.contacthero{flex-direction:column;align-items:flex-start;padding:20px}.contacthero img{width:80px;height:auto}.donatehero{grid-template-columns:1fr;padding:20px}.dh-art{display:none}}
@media (prefers-reduced-motion:reduce){.contacthero img,.dh-art img,.dh-art span{animation:none}}
.wig{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:860px){.wig{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* about */
.aboutgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.aboutgrid{grid-template-columns:1fr}}
.meet{border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:26px;padding:22px}
.meet p{font-size:16.5px;font-weight:600;line-height:1.6;margin:0 0 12px}
.meethead{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.meethead img{background:#fff3e8;border-radius:50%;padding:6px;box-shadow:0 0 0 3px var(--ink)}
.meethead h2{margin:0;font-size:30px}
.kicker{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}
.sig{margin-top:6px!important}.sig b{font-family:var(--display);font-weight:400;font-size:26px;color:var(--orange)}
.promises h2{margin:4px 0 10px}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plist li{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line)}
.plist .emoji{font-size:28px;line-height:1}.plist p{margin:2px 0 0;color:var(--ink-2);font-weight:700;font-size:14px}
.ctabtns{display:flex;flex-wrap:wrap;gap:10px}
.pillbar a{font-size:16px;font-weight:900;padding:9px 16px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line);text-decoration:none;color:var(--ink)}
@media (max-width:560px){.pillbar a{font-size:14px;padding:7px 12px}}
/* ===== trading guide ===== */
.guidehero{margin-top:10px;padding:28px;border-radius:32px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:radial-gradient(circle at 92% 16%,var(--sun) 0 7%,transparent 7.5%),radial-gradient(ellipse at 85% 130%,#bfe8a8 0 30%,transparent 31%),linear-gradient(180deg,#ffe3cc,#fff6ec)}
.guidehero .mega{margin:6px 0 8px}.guidehero .lead{margin:0 0 14px;max-width:60ch}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.toc a{background:#fff;border:2px solid var(--ink);border-radius:99px;padding:4px 12px;font-weight:900;font-size:13.5px;text-decoration:none;color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.toc a:hover{background:var(--sun)}
.gsec{background:#fff;border-radius:26px;padding:22px 24px;box-shadow:inset 0 0 0 2px var(--line),0 5px 0 var(--line);scroll-margin-top:80px}
.gsec h2{margin:0 0 12px}.gsec p{font-weight:600;line-height:1.6}
.factgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
@media (max-width:760px){.factgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gfact{display:grid;justify-items:center;text-align:center;gap:2px;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:14px 8px}
.gfact b{font-family:var(--display);font-weight:400;font-size:36px;line-height:1;color:var(--orange)}
.gfact span{font-weight:900}.gfact small{color:var(--muted);font-weight:700;font-size:12px}
.gsteps{margin:0 0 12px;padding-left:22px;display:grid;gap:6px;font-weight:600}
.tip{background:#fff8dc;border-radius:14px;padding:10px 14px;margin:10px 0 0}
.tablewrap{overflow-x:auto}
.gtable{width:100%;border-collapse:separate;border-spacing:0;font-weight:800;text-align:center;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden}
.gtable th{background:var(--ink);color:#fff;padding:10px 6px;font-size:14px}.gtable th small{opacity:.75;font-weight:700}
.gtable td{padding:9px 6px;border-top:1.5px solid var(--line)}.gtable tr:nth-child(even) td{background:var(--paper)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:0}
.dot.t1{background:var(--t1)}.dot.t2{background:var(--t2)}.dot.t3{background:var(--t3)}.dot.t4{background:linear-gradient(135deg,#ffe36e,#ff9f1c)}
.oddsbars{display:grid;gap:8px;margin:10px 0}
.oddsbars div{display:grid;grid-template-columns:130px 1fr 60px;align-items:center;gap:10px;font-weight:800;font-size:14px}
.oddsbars i{height:16px;border-radius:99px;width:var(--w);min-width:12px}
.oddsbars i.t1{background:var(--t1)}.oddsbars i.t2{background:var(--t2)}.oddsbars i.t3{background:var(--t3)}.oddsbars i.t4{background:linear-gradient(90deg,#ff9f1c,#ffc83d)}
.pointcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 12px}
.pointcards .pc{display:grid;justify-items:center;border-radius:18px;padding:12px 6px;color:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.pointcards .pc b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1}
.pointcards .pc span{font-weight:900}.pointcards .pc small{opacity:.85;font-weight:800}
.pc.t1{background:var(--t1)}.pc.t2{background:var(--t2)}.pc.t3{background:var(--t3)}.pc.t4{background:linear-gradient(135deg,#ffb627,#ff9f1c);box-shadow:0 4px 0 var(--ink),0 0 16px rgba(255,190,40,.6)}
.modgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}
@media (max-width:760px){.modgrid{grid-template-columns:1fr}.pointcards{grid-template-columns:repeat(2,minmax(0,1fr))}.oddsbars div{grid-template-columns:100px 1fr 50px}}
.mod{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border-radius:18px;padding:12px 14px}
.mod .emoji{font-size:30px;line-height:1}.mod p{margin:3px 0 0;font-size:14px;color:var(--ink-2)}
.mythbox{margin-top:14px;border:2.5px dashed var(--orange);border-radius:18px;padding:14px 18px;background:#fff8f1}
.mythbox h3{margin:0 0 6px}.mythbox ul{margin:0;padding-left:18px;display:grid;gap:6px;font-weight:600}
.calc{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
@media (max-width:760px){.calc{grid-template-columns:1fr}.cmid{justify-self:center;transform:rotate(90deg)}}
.cside{border:3px solid var(--ink);border-radius:22px;padding:14px;box-shadow:0 5px 0 var(--ink);display:grid;gap:8px}
.cside.give{background:#fff0f3}.cside.get{background:#eafaf2}
.cside h3{margin:0;font-size:22px}
.crow{display:grid;grid-template-columns:1fr 34px 36px 34px;align-items:center;gap:6px;font-weight:800}
.crow button{font:inherit;font-size:18px;font-weight:900;height:34px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 2px 0 var(--line);cursor:pointer}
.crow output{text-align:center;font-family:var(--display);font-size:22px}
.csel{display:grid;gap:3px;font-weight:800;font-size:13px}.csel select{font:inherit;font-weight:800;padding:6px 8px;border-radius:10px;border:2px solid var(--line);background:#fff}
.ctotal{margin:0;font-weight:900}.ctotal b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--orange-deep)}
.cmid{font-family:var(--display);font-size:40px;color:var(--orange)}
.verdict{margin:14px 0 0;text-align:center;font-weight:900;font-size:17px;padding:12px;border-radius:16px;background:var(--paper)}
.verdict.fair{background:#dff7e9;color:#12804a}.verdict.over{background:#ffe3e8;color:#c9224a}.verdict.under{background:#fff4cc;color:#8a5a00}
.safelist{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-weight:600}
.faq{border-bottom:1.5px solid var(--line);padding:10px 0}.faq summary{font-weight:900;cursor:pointer}.faq p{margin:6px 0 0}
main>.gsec{margin-top:18px}
.artpill{margin:0;font-size:13px;font-weight:800;color:var(--ink-2);background:#fff8e6;border-radius:99px;padding:6px 14px;box-shadow:inset 0 0 0 2px #ffe0a3;display:inline-block;max-width:100%}
.artpill.artmini{font-size:12px;padding:4px 12px;text-align:center;justify-self:center}
@media (max-width:560px){.artpill{border-radius:14px}}
.tryit .artpill.artmini{display:block;justify-self:stretch;border-radius:12px}
/* ===== sharing ===== */
.sharesite{display:grid;justify-items:center;gap:10px;text-align:center;background:#fff;border-radius:22px;padding:16px;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line)}
.sharebtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sbtn{font:inherit;font-size:14px;font-weight:900;border:2.5px solid var(--ink);border-radius:99px;padding:7px 14px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .25s var(--spring)}
.sbtn:hover{transform:translateY(-2px)}
.sbtn.primary{background:var(--orange);color:#fff}
.sbtn.fb{background:#1877f2;color:#fff}.sbtn.rd{background:#ff4500;color:#fff}.sbtn.wa{background:#25d366;color:#fff}.sbtn.x{background:#111;color:#fff}
.sharelist{border:3px solid var(--ink);border-radius:26px;padding:18px;box-shadow:0 6px 0 var(--ink);background:linear-gradient(180deg,#fff,#fff4e6);display:grid;gap:12px}
.sl-head{display:flex;gap:12px;align-items:flex-start}.sl-head h2{margin:0}.sl-head p{margin:2px 0 0;font-weight:700;color:var(--ink-2)}
.sharelist .sharebtns{justify-content:flex-start}
.sl-name{display:grid;gap:4px;font-weight:800;font-size:14px;max-width:340px}
.sl-name input{font:inherit;font-weight:700;padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:#fff}
.sl-preview{margin:0;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13.5px;font-weight:700;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 2px var(--line);max-height:260px;overflow:auto;color:var(--ink-2)}
.tl-share{margin-left:8px;font-weight:900;font-size:13px;color:var(--need)!important}
.sharehero{margin-top:10px;padding:26px;border-radius:32px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);background:radial-gradient(circle at 92% 18%,var(--sun) 0 7%,transparent 7.5%),linear-gradient(180deg,#d6f1ff,#fff6ec)}
.sharehero .mega{margin:6px 0}.sharehero .lead{margin:0}
.sv-match{margin-top:14px;display:inline-block;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:10px 14px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
.mcheck{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:5;background:var(--trade);color:#fff;font-size:11px;font-weight:900;padding:2px 9px;border-radius:99px;border:2px solid #fff;white-space:nowrap}
/* beta */
.betatag{display:inline-block;margin-left:-2px;margin-right:auto;font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:.1em;color:#fff;background:var(--teal);border:2px solid var(--ink);border-radius:99px;padding:1px 8px;text-decoration:none;transform:rotate(-4deg);box-shadow:0 2px 0 var(--ink);align-self:center}
.betatag:hover{background:var(--orange)}
.betatag.static{margin:0;transform:none}
.betanote{display:block;margin-bottom:6px;font-weight:800;color:var(--ink-2)}
.coming .plist{margin:8px 0}
#coming{scroll-margin-top:80px}