@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Luckiest+Guy&display=swap');
:root{--lime:#7ED33F;--lime2:#A8E063;--tan:#EBCB98;--tan2:#F6E3C1;--ink:#1b1b1b;--red:#D7322E;--paper:#FFFBEF}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Patrick Hand','Comic Sans MS','Chalkboard SE',cursive;font-size:18px;color:var(--ink);background:var(--lime);background-image:radial-gradient(#ffffff22 2px,transparent 2px);background-size:22px 22px}
h1,h2,h3,.disp{font-family:'Luckiest Guy','Patrick Hand',cursive;letter-spacing:1px;font-weight:400;margin:.2em 0}a{color:var(--ink)}
.btn{font-family:inherit;font-size:18px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:14px 10px 16px 9px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .08s;text-decoration:none;display:inline-block}
.btn:hover:not(:disabled){transform:translate(-1px,-2px) rotate(-1deg)}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.alt{background:#3a8f1c}.btn.gold{background:var(--tan);color:var(--ink)}.btn.ghost{background:var(--paper);color:var(--ink);padding:6px 10px;font-size:16px}
nav{display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20;flex-wrap:wrap}
nav .brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:'Luckiest Guy',cursive;font-size:24px}nav img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink)}
nav .links{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;align-items:center}nav .links a{text-decoration:none}nav .links a:hover{text-decoration:underline wavy}
.wrap{max-width:1150px;margin:auto;padding:16px}
.panel{background:var(--paper);border:3px solid var(--ink);border-radius:22px 16px 24px 14px;box-shadow:5px 5px 0 var(--ink);padding:18px 22px;margin:22px 0}
/* hero */
.hero{position:relative;border-bottom:3px solid var(--ink);background:#7ED33F url(/assets/header.jpg) right center/cover no-repeat;min-height:380px;display:flex;align-items:center}
.hero .in{max-width:1150px;margin:auto;width:100%;padding:30px 18px}.hero h1{font-size:clamp(44px,8vw,88px);line-height:.95;color:#fff;-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.hero p{font-size:24px;max-width:520px;background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:8px 14px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
.tag{display:inline-block;background:var(--tan);border:2px solid var(--ink);border-radius:10px;padding:2px 10px;transform:rotate(-2deg)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.grid3 .panel{margin:0}.grid3 .panel:nth-child(2n){transform:rotate(.6deg)}.grid3 .panel:nth-child(2n+1){transform:rotate(-.5deg)}
.big-emoji{font-size:40px}.tbd{color:var(--red);font-weight:700;border:2px dashed var(--red);padding:2px 8px;border-radius:8px;background:#fff}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.road div{background:var(--tan2);border:3px solid var(--ink);border-radius:16px;padding:10px}.road .now{background:var(--lime2)}
details{border-bottom:2px dashed #0004;padding:8px 0}summary{cursor:pointer;font-size:20px}
footer{text-align:center;padding:24px;font-size:15px}.socials a{margin:0 8px}
/* ===== game ===== */
#game{position:relative}.g-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.g-stats{flex:1;min-width:180px}
select{font-family:inherit;font-size:16px;border:2px solid var(--ink);border-radius:8px;background:#fff;padding:3px}
.g-side h3{font-size:20px}.g-side small{font-family:'Patrick Hand',cursive;font-size:16px;color:#3a6b1a}
.hand{display:flex;gap:8px;flex-wrap:wrap;min-height:60px}.hand.opp{min-height:0}.back{width:46px;height:64px;border:3px solid var(--ink);border-radius:8px;background:var(--tan) url(/assets/logo.png) center/80% no-repeat;box-shadow:2px 2px 0 var(--ink)}
.arena{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:center;margin:10px 0;background:#ffffff55;border:3px dashed var(--ink);border-radius:20px;padding:12px}
.slot{min-height:300px;display:flex;justify-content:center;align-items:center;position:relative}.empty{font-size:22px;text-align:center;opacity:.65}
.mid{display:flex;flex-direction:column;gap:8px}.banner{font-family:'Luckiest Guy',cursive;font-size:22px;text-align:center;padding:6px;border:3px solid var(--ink);border-radius:12px;background:var(--paper)}.banner.you{background:var(--lime2)}.banner.opp{background:var(--tan);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}.log{background:var(--paper);border:3px solid var(--ink);border-radius:12px;height:230px;overflow:auto;padding:8px;font-size:16px;line-height:1.25}.log p{margin:3px 0}.log p:first-child{font-weight:700}
.card{width:150px;background:var(--tan2);border:3px solid var(--ink);border-radius:14px 11px 15px 10px;padding:6px;box-shadow:3px 3px 0 var(--ink);font-size:13px;position:relative;transition:transform .15s}
.card .nm{display:flex;justify-content:space-between;align-items:baseline;gap:4px;border-bottom:2px solid var(--c);}.nm b{font-size:16px}.nm small{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .art{height:78px;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle,var(--c) 0%,transparent 70%);margin:4px 0;position:relative;font-size:44px}.card .art img{width:68px;height:68px;border-radius:50%;border:3px solid var(--ink);background:#fff;object-fit:cover}
.shield{position:absolute;right:4px;top:0;font-style:normal;font-size:24px}
.hpbar{height:9px;border:2px solid var(--ink);border-radius:6px;background:#fff;overflow:hidden}.hpbar i{display:block;height:100%;transition:width .4s}
.st{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin:2px 0}.sp{color:#1f6b0b;font-weight:700;line-height:1.1}.sp.used{text-decoration:line-through;opacity:.5}
.fl{font-style:italic;opacity:.75;line-height:1.1;margin-top:3px}.ts{font-size:10px;opacity:.6;border-top:1px dashed #0005;margin-top:3px;padding-top:2px;line-height:1.15}
.card.big{width:200px;font-size:14px;transform:rotate(-1deg)}#aiActive .card.big{transform:rotate(1deg)}.card.big .art{height:110px}.card.big .art img{width:96px;height:96px}
.hand .card .fl,.hand .card .ts{display:none}.hand .card.play{cursor:pointer;animation:wig 2.5s infinite}.hand .card.play:hover{transform:translateY(-8px) rotate(-2deg)}.hand .card.dim{opacity:.75}
@keyframes wig{0%,90%,100%{transform:none}95%{transform:rotate(-2deg)}}
.hit{animation:hit .45s}@keyframes hit{25%{transform:translateX(-8px) rotate(-4deg)}50%{transform:translateX(8px) rotate(3deg);filter:brightness(1.4) saturate(2)}}
.float{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-family:'Luckiest Guy',cursive;font-size:34px;-webkit-text-stroke:2px var(--ink);pointer-events:none;animation:up 1.1s forwards;z-index:5;white-space:nowrap}
.float.dmg{color:var(--red)}.float.heal{color:#7CFC00}.float.rug{color:#ffb300}.float.block{color:#4fc3ff}@keyframes up{to{top:0;opacity:0}}
.controls{display:flex;gap:8px;margin:6px 0;flex-wrap:wrap}.board{font-size:15px;margin-top:8px}.board ol{margin:4px 0;padding-left:22px}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;padding:14px}.modal[hidden]{display:none}
.mbox{background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink);padding:20px 24px;max-width:520px}.mbox.center{text-align:center}.mlogo{width:110px}
@media(max-width:760px){body{font-size:16px}.arena{grid-template-columns:1fr 1fr;padding:8px;gap:8px}.mid{grid-column:1/3;grid-row:2}.log{height:130px}.slot{min-height:240px}
.card.big{width:100%;max-width:165px;font-size:12px}.card.big .art{height:80px}.card.big .art img{width:70px;height:70px}.card{width:31%;min-width:98px;font-size:11px}.card .art{height:60px}.card .art img{width:52px;height:52px}
.hand .card .sp{font-size:10px}.hero{min-height:300px;background-position:75% center}.hero p{font-size:19px}nav .links{gap:10px;font-size:15px}.btn{font-size:16px;padding:7px 12px}}
@media(max-width:760px){nav .links a:not(.btn){display:none}nav{padding:8px 12px}nav .brand{font-size:20px}.hero{background-size:auto 100%;background-position:70% center}.hero .in{padding-top:150px}.hero h1{font-size:52px}}
@media(max-width:760px){.hand .card{width:calc(33.3% - 6px);min-width:0;padding:4px}.hand .card .st{font-size:11px;flex-wrap:nowrap;letter-spacing:-.3px}.hand .card .nm small{display:none}.hand .card .nm b{font-size:13px}.hand .card .sp{font-size:10px}.card.big .st{font-size:12px}.card.big .nm small{display:none}}
.tok{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0}.tok div{background:var(--tan2);border:3px solid var(--ink);border-radius:16px 12px 18px 10px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}.tok b{display:block;font-family:'Luckiest Guy',cursive;font-size:24px;font-weight:400;color:#2f7a12}.tok span{font-size:16px}
@media(max-width:760px){.hero{display:block;min-height:0;background-image:none;padding:0}.hero::before{content:"";display:block;height:44vw;background:url(/assets/header.jpg) right center/auto 100% no-repeat;border-bottom:3px solid var(--ink)}.hero .in{padding:16px 16px 22px}.hero h1{font-size:54px}}
/* v2: energy, bench, profile */
.g-prof{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:var(--tan2);border:3px solid var(--ink);border-radius:14px;padding:6px 12px;margin-bottom:8px;font-size:16px}
.lv{font-family:'Luckiest Guy',cursive;background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 8px}.xpbar{width:110px;height:12px;border:2px solid var(--ink);border-radius:8px;background:#fff;overflow:hidden}.xpbar i{display:block;height:100%;background:var(--lime)}
.side-row h3{font-size:20px;margin:4px 0}.col{display:flex;flex-direction:column;gap:8px;align-items:center}
.bench{display:flex;gap:6px;justify-content:center;min-height:70px}.bslot{width:78px;height:96px;border:2px dashed #0006;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:.6}
.card.mini{width:78px;padding:3px;font-size:10px}.card.mini .art{height:44px}.card.mini .art img{width:38px;height:38px;border-width:2px}.card.mini .sp,.card.mini .fl,.card.mini .ts,.card.mini .nm small{display:none}.card.mini .st{font-size:10px}.card.mini .nm b{font-size:12px}
.card.mini.play{cursor:pointer;outline:3px dashed var(--red);outline-offset:2px}.card.mini.play:hover{transform:translateY(-4px)}
.st-ic{position:absolute;font-style:normal;font-size:20px;top:0}.st-ic.s1{right:2px}.st-ic.s2{left:2px;font-size:15px;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 3px}
.energy{display:flex;align-items:center;gap:4px;font-size:17px}.energy i{width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:#fff}.energy i.on{background:#ffd60a;box-shadow:0 0 6px #ffd60a}
.btn i{font-style:normal;font-size:13px;background:#0003;border-radius:6px;padding:0 4px}.hint{min-height:22px;font-size:16px;color:#2f5f12}
.holo{background:linear-gradient(120deg,#f6e3c1,#d7f7ff,#ffd6f5,#e6ffd0,#f6e3c1);background-size:300% 300%;animation:holo 4s linear infinite}@keyframes holo{to{background-position:300% 0}}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:8px 16px;z-index:60;transition:transform .3s;max-width:90vw}.toast.on{transform:translate(-50%,0)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;max-height:50vh;overflow:auto;padding:4px}.dcard{border:3px solid var(--ink);border-radius:12px;padding:5px;text-align:center;cursor:pointer;background:#fff;opacity:.6;font-size:13px;display:flex;flex-direction:column;align-items:center}
.dcard.on{opacity:1;background:var(--lime2);box-shadow:3px 3px 0 var(--ink)}.dcard input{display:none}.dcard img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink)}.mbox{max-height:90vh;overflow:auto;max-width:640px}
.qlist{list-style:none;padding:0}.qlist li{position:relative;border:2px solid var(--ink);border-radius:10px;padding:6px 10px;margin:6px 0;background:#fff;overflow:hidden}.qlist li span{float:right}.qlist li i{position:absolute;left:0;bottom:0;height:4px;background:var(--lime)}.qlist li.done{background:var(--lime2)}
@media(max-width:760px){.bslot,.card.mini{width:30%;max-width:78px}.bench{width:100%}.g-prof{font-size:14px}.xpbar{width:70px}.col .slot{min-height:220px}}
@media(max-width:760px){.arena{grid-template-columns:minmax(0,1fr)}.arena>*{min-width:0}.mid{grid-column:auto;grid-row:auto}.col{flex-direction:row;align-items:center;justify-content:center;width:100%}.col .bench{flex-direction:column;width:auto;min-height:0}.col .bench .card.mini,.col .bench .bslot{width:72px;height:auto;min-height:60px}.col .slot{min-height:0;flex:1}.card.big{max-width:190px}.bench .bslot{height:60px}}
/* v3: wallet + leaderboard */
.wbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 16px;margin:14px 0}.wtag{background:var(--lime2);border:2px solid var(--ink);border-radius:10px;padding:2px 10px;font-weight:700}.wtag.ranked{background:var(--red);color:#fff}.wnote{font-size:15px;opacity:.8}
.lb{width:100%;border-collapse:collapse;font-size:17px}.lb th,.lb td{border-bottom:2px dashed #0003;padding:5px 8px;text-align:left}.lb tr.me{background:var(--lime2)}.lb th{font-family:'Luckiest Guy',cursive;font-weight:400}
/* v4: profiles */
.av{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);vertical-align:middle;background:#fff;object-fit:cover}.av0{display:inline-block;text-align:center;line-height:22px;font-size:14px}.mbox .center .av{width:80px;height:80px}
.wprof{cursor:pointer;font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:6px}.uerr{color:var(--red);min-height:22px}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}.avbtn{border:3px solid transparent;border-radius:50%;padding:2px;background:none;cursor:pointer}.avbtn img{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);display:block}.avbtn.on{border-color:var(--red);background:var(--lime2)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.pstats div{background:var(--tan2);border:3px solid var(--ink);border-radius:12px;padding:6px;text-align:center}.pstats b{display:block;font-family:'Luckiest Guy',cursive;font-weight:400;font-size:22px}.pstats span{font-size:13px}
.lbwrap{display:grid;grid-template-columns:2fr 1fr;gap:16px}.lastweek{background:var(--tan2);border:3px solid var(--ink);border-radius:14px;padding:8px 12px}.lastweek ol{padding-left:20px;margin:4px 0}.yourrank{font-size:19px;background:var(--lime2);border:3px solid var(--ink);border-radius:12px;padding:4px 12px;display:inline-block}
@media(max-width:760px){.lbwrap{grid-template-columns:1fr}.pstats{grid-template-columns:repeat(2,1fr)}}
.wtag.unr{background:#fff;font-weight:400}

/* v5 */.road .done{background:#d9f5c4}.road .done b{color:#2d7a12}.road .now{outline:3px dashed var(--ink)}footer .socials.foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}footer .socials.foot:empty{display:none}footer img{display:block;margin:0 auto;border-radius:50%}.wtag.err{background:#ffe1dc}
/* wallet picker + leaderboard nav */
#leaderboard{scroll-margin-top:90px}
@media(max-width:760px){nav .links a.navlb{display:inline}}
.wlist{display:grid;gap:8px;margin:8px 0}
.wopt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);font:inherit;font-size:18px;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left}
.wopt:hover{background:var(--lime2,#e9ffb0);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.wopt img{width:32px;height:32px;border-radius:8px}
.wopt span{flex:1;font-weight:700}
.wopt small{font-size:12px;opacity:.7}
.wopt.wmiss{background:#f6f6f6;box-shadow:2px 2px 0 var(--ink)}
.wemo{font-size:26px;width:32px;text-align:center}
/* polish */
.card .art img{aspect-ratio:1;display:block}
.card .art .ph,.dcard .ph{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;border:3px solid var(--ink);background:var(--c,#ddd);color:#fff;font-weight:800;font-size:22px;-webkit-text-stroke:1px var(--ink)}
.card.mini .art .ph{width:38px;height:38px;font-size:13px}
img[data-tk]{background:#fff radial-gradient(circle,#eee 0,#ccc 100%)}
img[alt="FARTCOIN"],img[alt="GOAT"]{background:#222;border-color:#fff!important;box-shadow:0 0 0 2px var(--ink)}
.ts{font-size:12px;opacity:.75}.fl{font-size:13px}
@media(max-width:760px){.ts{font-size:11px}.fl{font-size:12px}.card.big .sp{font-size:12px}}
.dmsg{font-weight:700;align-self:center;margin-left:6px}.dmsg.err{color:var(--red)}
.warn{color:var(--red)}
.slot{min-height:240px}.hand{min-height:150px}
.float,.st-ic{pointer-events:none}
.lb-skel{display:grid;gap:8px;margin-top:8px}.lb-skel i{display:block;height:22px;border-radius:8px;background:linear-gradient(90deg,#0001 25%,#0002 50%,#0001 75%);background-size:200% 100%;animation:skel 1.2s infinite}
@keyframes skel{to{background-position:-200% 0}}
/* daily, share card, feedback, about */
.dailybar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--tan);border:3px solid var(--ink);border-radius:14px;padding:6px 12px;margin:6px 0}
.dailybar[hidden]{display:none}
#gDaily.on{background:var(--tan);color:var(--ink)}
.sq{font-size:22px;letter-spacing:1px;line-height:1.4;word-break:break-word}
.dtitle{font-size:22px}
.sharecard{width:100%;height:auto;border:3px solid var(--ink);border-radius:12px;display:block;background:#fff}
.lb-tabs{display:none;gap:8px;margin:8px 0}
.lb-panes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:16px;align-items:start}
.lb-pane{min-width:0}
.lb-pane h3{margin-top:0}
.finput,textarea.finput{font:inherit;font-size:18px;padding:8px 10px;border:3px solid var(--ink);border-radius:10px;width:100%;background:#fff}
.fcount{font-size:14px;opacity:.7}
.fbtype{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.fbtype label{border:3px solid var(--ink);border-radius:10px;padding:4px 10px;background:#fff;cursor:pointer}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
footer a.aboutlink{display:inline-block;margin:8px 0;font-size:18px}
.about p{font-size:20px;line-height:1.35}
@media(max-width:760px){
  nav .links a.navabout{display:inline}
  .lb-tabs{display:flex;flex-wrap:wrap}
  .lb-panes{display:block}
  .lb-panes .lb-pane{display:none}
  .lb-panes .lb-pane.on{display:block}
  .sharecard{max-width:100%}
}