@font-face{font-family:"re:troglyphics";src:url("fonts/retroglyphics.woff") format("woff");font-display:block}

:root{
  /* Layout: mechsicko-style dark pixel UI. Pocket device card on the left (hard offset shadow in the frog's rarity colour), flat tabbed panel on the right */
  --bg:#111312;
  --surface:#1b1f1d;
  --line:#2c322f;
  --ink:#ecebe6;
  --muted:#8d938f;
  --sage:#639685;
  --sage-dk:#3d5f53;
  --warn:#ff4b00;
  --pixel:"re:troglyphics",ui-monospace,monospace;
  --r-common:#8d938f; --r-uncommon:#a9fc3e; --r-rare:#5fe0f5;
  --scrim:rgba(17,19,18,.82);
  color-scheme:dark;
}
/* light mode, matching the rest of mechsicko.art (same switch, same saved setting) */
:root[data-theme="light"]{
  --bg:#f5f4f0;
  --surface:#ebe9e3;
  --line:#d6d4cc;
  --ink:#161616;
  --muted:#6b6a66;
  --sage-dk:#3d6557;
  --r-common:#6b6a66; --r-uncommon:#4a8a12; --r-rare:#12809a;
  --scrim:rgba(245,244,240,.86);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--pixel);-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit}
/* the pixel font is used in capitals only, everywhere */
body,button,input,select,textarea,summary,option{text-transform:uppercase}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
h1,h2,h3,h4,p{margin:0}
h2,h3{text-wrap:balance;font-weight:400}
.pix{display:block;width:100%;height:auto;image-rendering:crisp-edges;image-rendering:pixelated}
img.pix{display:inline-block;width:auto}

/* header */
.top{border-bottom:1px solid var(--line)}
.top-in{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:40px}
.logo{font:400 32px/1.25 var(--pixel);letter-spacing:.02em}
.tagline{font-size:12px;color:var(--muted);text-transform:uppercase}
.top-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wallet{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--line)}
.wallet img{width:24px}
.wallet b{font:400 24px/1.25 var(--pixel);font-variant-numeric:tabular-nums}
.wallet small{font-size:12px;color:var(--muted)}
.sync{font-size:12px;color:var(--muted);text-transform:uppercase}
.sync::before{content:"";display:inline-block;width:8px;height:8px;background:var(--muted);margin-right:8px}
.sync[data-s="cloud"]::before{background:var(--sage)}
.sync[data-s="local"]::before{background:#ffd23f}

/* layout */
.app{max-width:1100px;margin:0 auto;padding:28px 20px 56px;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:820px){.app{grid-template-columns:1fr}}

/* device */
.device-wrap{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
@media (max-width:820px){.device-wrap{position:static}}
.device{--shell:var(--sage);background:var(--surface);border:1px solid var(--line);box-shadow:8px 8px 0 var(--shell);padding:14px;display:flex;flex-direction:column;gap:14px;margin-right:8px}
.plate{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;text-transform:uppercase}
.plate b{font-weight:400;font-size:16px;color:var(--ink)}
.screen{position:relative;width:100%;aspect-ratio:36/30;overflow:hidden;background:var(--sage);border:1px solid #000}
.screen canvas.bg{position:absolute;inset:0;width:100%;height:100%}
.gridlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:calc(100%/36) calc(100%/30)}
.scene{position:absolute;inset:0}
.frog{position:absolute;left:19.444%;top:13.333%;width:66.667%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.egg{position:absolute;left:30.556%;top:30%;width:38.889%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.frog canvas{animation:bob 1.6s steps(1,end) infinite}
.frog.hop canvas{animation:hop .5s steps(1,end)}
.frog.sleeping canvas{animation:none}
.frog.sad canvas{filter:saturate(.45)}
.egg canvas{animation:idleshake 3s steps(1,end) infinite}
.egg.wobble canvas{animation:shake .4s steps(1,end)}
@keyframes bob{0%{transform:none}50%{transform:translateY(-4.1667%)}100%{transform:none}}
@keyframes hop{0%{transform:none}20%{transform:translateY(-12.5%)}40%{transform:translateY(-16.667%)}60%{transform:translateY(-8.333%)}80%,100%{transform:none}}
@keyframes shake{0%{transform:none}25%{transform:translateX(-7.143%)}50%{transform:translateX(7.143%)}75%{transform:translateX(-7.143%)}100%{transform:none}}
@keyframes idleshake{0%{transform:none}86%{transform:translateX(-7.143%)}90%{transform:translateX(7.143%)}94%,100%{transform:none}}
.spark{position:absolute;width:13.889%;pointer-events:none;animation:blink 1s steps(1,end) infinite}
.spark:nth-child(2n){animation-delay:.5s}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.flash{position:absolute;inset:0;background:#fff;pointer-events:none;animation:flash .6s steps(4,end) forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}
.bubble{position:absolute;top:8px;left:8px;max-width:64%;font-size:12px;line-height:1.35;background:var(--ink);color:var(--bg);border:2px solid #000;padding:4px 8px;z-index:3;text-transform:uppercase}
.bubble::after{content:"";position:absolute;left:12px;bottom:-8px;width:6px;height:6px;background:var(--ink);box-shadow:0 0 0 2px #000}
.bubble:empty{display:none}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.pop{position:absolute;font-size:12px;color:#111312;background:#ffd23f;border:2px solid #000;padding:2px 6px;animation:popup 1.2s steps(6,end) forwards;white-space:nowrap;translate:-50% 0;text-transform:uppercase}
@keyframes popup{0%{transform:translateY(8px);opacity:1}80%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
.btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pbtn{border:0;background:var(--sage);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;font-size:12px;text-transform:uppercase;box-shadow:3px 3px 0 var(--sage-dk)}
.pbtn img{width:36px}
.pbtn:hover{background:#6fa593}
.pbtn:active{transform:translate(3px,3px);box-shadow:none}
.pbtn:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed}
.pbtn:disabled img{opacity:.35}
.species-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);text-transform:uppercase}

/* panel */
.panel{min-width:0;display:flex;flex-direction:column;gap:22px}
.tabs{display:flex;gap:4px 20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab{border:0;background:none;padding:10px 0;font-size:12px;color:var(--muted);text-transform:uppercase;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--sage)}
.tab:disabled{opacity:.35;cursor:not-allowed}
.pane{display:flex;flex-direction:column;gap:20px}
.pane[hidden]{display:none}
.h2{font:400 32px/1.25 var(--pixel);text-transform:uppercase}
.kicker{margin-bottom:6px;font-size:12px;text-transform:uppercase;color:var(--sage);letter-spacing:.02em}
.lede{color:var(--muted);max-width:62ch;font-size:12px;line-height:1.75}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.head{display:flex;flex-direction:column;gap:6px}

/* stats */
.stats{display:grid;gap:12px}
.stat{display:grid;grid-template-columns:80px 1fr 36px;align-items:center;gap:12px;font-size:12px;text-transform:uppercase}
.stat .v{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:20px;border:1px solid var(--line);padding:3px;background:var(--bg)}
.bar i{display:block;height:100%;width:var(--v);background:repeating-linear-gradient(90deg,var(--c) 0 7px,transparent 7px 9px)}
.stat.low .bar i{background:repeating-linear-gradient(90deg,var(--warn) 0 7px,transparent 7px 9px);animation:blink 1s steps(1,end) infinite}
.stat.low .v{color:var(--warn)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fact{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fact b{font:400 32px/1.25 var(--pixel);color:var(--sage);font-variant-numeric:tabular-nums}
.fact span{font-size:12px;color:var(--muted);text-transform:uppercase}
@media (max-width:560px){.facts{grid-template-columns:1fr 1fr}}

/* buttons */
.btn{border:0;cursor:pointer;padding:10px 16px;font-size:12px;text-transform:uppercase;color:#fff;background:var(--sage);white-space:nowrap}
.btn:hover{background:#6fa593}
.btn:active{transform:translate(2px,2px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--line);color:var(--muted);border-color:var(--line);cursor:not-allowed;transform:none}
.linkbtn{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:12px;padding:4px 0;align-self:flex-start;text-transform:uppercase}
.linkbtn:hover{color:var(--ink)}

/* rarity */
.rar{display:inline-block;font-size:12px;line-height:1;padding:4px 6px 3px;border:1px solid var(--rc);color:var(--rc);text-transform:uppercase;white-space:nowrap}
.pips{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.pips i{display:block;width:7px;height:7px;border:1px solid var(--rc);opacity:.5}
.pips i.on{background:var(--rc);opacity:1}
.chip{display:inline-block;font-size:12px;line-height:1;padding:4px 6px 3px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase}
details.odds{border:1px solid var(--line);padding:12px 14px}
details.odds summary{cursor:pointer;font-size:12px;text-transform:uppercase;color:var(--ink);list-style:none}
details.odds summary::before{content:"> ";color:var(--sage)}
details.odds[open] summary::before{content:"v ";}
details.odds summary::-webkit-details-marker{display:none}
.oddstable{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}
.oddstable th{font-size:12px;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px;font-weight:400}
.oddstable td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle}
.oddstable td.n,.oddstable th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scrollbox{max-height:340px;overflow:auto;margin-top:10px}
.oddsgrid{display:grid;gap:16px}
.oddsgrid h4{margin:12px 0 0;font-size:12px;font-weight:400;text-transform:uppercase;color:var(--sage)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.card{--rc:var(--muted);position:relative;background:var(--surface);border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:10px;transition:transform .08s steps(1),box-shadow .08s steps(1)}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--rc)}
.pv{display:block;aspect-ratio:1;background-color:var(--sage);position:relative;overflow:hidden}
.pv::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:calc(100%/24) calc(100%/24)}
.card h3{font-size:16px;line-height:1.2;text-transform:uppercase}
.card .meta{display:flex;flex-direction:column;gap:10px;flex:1;padding:0 4px 4px}
.card .meta .btn{margin-top:auto;align-self:stretch;text-align:center}
.card.featured{grid-column:1/-1;flex-direction:row;gap:16px;box-shadow:8px 8px 0 var(--rc);margin-right:8px}
.card.featured:hover{transform:none}
.card.featured .pv{width:min(46%,220px);flex:none}
.card.featured h3{font-size:24px}
.card.equipped{border-color:var(--sage);box-shadow:4px 4px 0 var(--sage)}
.stamp{position:absolute;top:22%;left:50%;translate:-50% 0;font-size:24px;line-height:1;color:var(--warn);border:2px solid var(--warn);padding:6px 10px 4px;background:var(--bg);pointer-events:none}
.card.featured .stamp{left:calc(8px + min(23%,110px))}
.card.sold .pv canvas{filter:grayscale(1) brightness(.6)}
.restock{display:inline-flex;align-items:center;gap:8px;font-size:12px;border:1px solid var(--sage);color:var(--sage);padding:7px 10px 6px;font-variant-numeric:tabular-nums;text-transform:uppercase}
.restock b{font-weight:400;color:var(--ink)}
.outfit{display:flex;gap:8px;flex-wrap:wrap}
.outfit .chip b{color:var(--ink);font-weight:400}
.empty{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;color:var(--muted)}

/* game */
.gamebox{position:relative;width:100%;max-width:400px;border:1px solid #000;box-shadow:8px 8px 0 var(--sage);touch-action:none}
.gamebox canvas{display:block;width:100%;height:auto;aspect-ratio:360/438;cursor:crosshair}
.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none}
.hud span{font-size:12px;background:var(--bg);color:var(--ink);padding:5px 8px 4px;border:1px solid #000;font-variant-numeric:tabular-nums;text-transform:uppercase}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:var(--scrim)}
.overlay[hidden]{display:none}
.overlay .big{font:400 48px/1.25 var(--pixel);text-transform:uppercase}
.overlay p{font-size:12px;text-transform:uppercase}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);text-transform:uppercase}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend img{height:24px}

/* hatch */
.namefield{display:flex;flex-direction:column;gap:8px}
.namefield label{font-size:12px;text-transform:uppercase;color:var(--sage)}
.namefield input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:0;flex:1;border-radius:0}
.reveal-parts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.part{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.part b{font-size:24px;font-weight:400;text-transform:uppercase}
.combo b{color:var(--sage);font-weight:400}
@media (max-width:440px){.reveal-parts{grid-template-columns:1fr}}

/* toast + modal */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;opacity:0;background:var(--sage);color:#fff;padding:12px 16px 10px;font-size:12px;transition:opacity .2s steps(2),translate .2s steps(2);z-index:20;max-width:calc(100% - 32px);text-align:center;pointer-events:none;box-shadow:4px 4px 0 #000;text-transform:uppercase}
.toast.show{opacity:1;translate:-50% 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px;z-index:30}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);border:1px solid var(--line);box-shadow:8px 8px 0 var(--sage);padding:22px;max-width:400px;display:flex;flex-direction:column;gap:16px}
.modal-card p{color:var(--muted);font-size:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

#hcv{aspect-ratio:352/416;cursor:pointer;outline:none}
.hud .lives{display:flex;gap:4px;align-items:center;background:var(--bg);padding:4px 6px;border:1px solid #000}
.hud .lives img{width:21px}
.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,48px);gap:6px;justify-content:center;max-width:400px;touch-action:none;user-select:none;-webkit-user-select:none}
.dpad .pbtn{padding:0;justify-content:center}
.dpad .pbtn img{width:28px}
.dpad [data-hop="0,-1"]{grid-column:2;grid-row:1}
.dpad [data-hop="-1,0"]{grid-column:1;grid-row:2}
.dpad [data-hop="0,1"]{grid-column:2;grid-row:2}
.dpad [data-hop="1,0"]{grid-column:3;grid-row:2}
.dpad [data-hop="-1,0"] img{rotate:-90deg}
.dpad [data-hop="0,1"] img{rotate:180deg}
.dpad [data-hop="1,0"] img{rotate:90deg}

.hud.bar{position:static;justify-content:space-between;align-items:center;padding:8px;background:var(--surface);border-bottom:1px solid #000}

.h3{font:400 24px/1.25 var(--pixel);text-transform:uppercase}
.game{display:flex;flex-direction:column;gap:20px}
.game[hidden]{display:none}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px}
.pick{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.pick img{width:28px;flex:none}
.pick span{display:flex;flex-direction:column;gap:2px}
.pick b{font-weight:400;font-size:16px;text-transform:uppercase}
.pick small{font-size:12px;color:var(--muted);text-transform:uppercase}
.pick:hover{border-color:var(--muted)}
.pick[aria-pressed="true"]{border-color:var(--sage);box-shadow:4px 4px 0 var(--sage)}
.pick[aria-pressed="true"] small{color:var(--sage)}

/* site version: sign-in, social */
body.busy{cursor:progress}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acct{display:flex;align-items:center;gap:12px}
.signin{display:flex;flex-direction:column;gap:12px;max-width:460px}
.signin form{flex-wrap:nowrap}
input[type="email"]{font:inherit;font-size:12px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:0;flex:1;border-radius:0}
.goal{border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.goal .kicker{margin:0}
.goalnum{font-size:16px}
.goalnum b{font-size:24px;color:var(--sage);font-weight:400}
.picker.four{grid-template-columns:repeat(4,1fr);max-width:none}
@media (max-width:640px){.picker.four{grid-template-columns:1fr 1fr}}
.pondbox{border:1px solid #000;box-shadow:8px 8px 0 var(--sage);max-width:600px;margin-right:8px}
#pcv{display:block;width:100%;height:auto;aspect-ratio:2/1;cursor:pointer;touch-action:manipulation}
.ranks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rank{display:grid;grid-template-columns:32px 48px 1fr auto;align-items:center;gap:12px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12px}
#visitList .rank{grid-template-columns:48px 1fr auto}
.rank .pos{color:var(--sage);font-size:16px}
.rank .val{font-variant-numeric:tabular-nums;white-space:nowrap}
.rank.mine{background:rgba(99,150,133,.14)}
.mini{display:block;width:48px;background:var(--sage)}
.frogcard{display:flex;gap:16px;border:1px solid var(--line);padding:10px;align-items:flex-start;background:var(--surface)}
.frogcard .mini{width:96px;flex:none}
.frogcard .meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.frogcard h3{font-size:16px}
.bpick[aria-pressed="true"]{border-color:var(--sage);color:var(--sage)}
.preview{border:1px dashed var(--sage);color:var(--sage);padding:10px 12px;font-size:12px}
.preview[hidden]{display:none}
#visitNotes{gap:8px}
#visitNotes .btn{padding:8px 10px}
.card .lede{font-size:12px}
.picker.four .pick{padding:10px 12px}
.picker.four b{font-size:12px}
.foot{max-width:1100px;margin:0 auto;padding:18px 20px 40px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted);text-transform:uppercase}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}
.policy{max-width:760px;margin:0 auto;padding:32px 20px 56px;display:flex;flex-direction:column;gap:18px}
.policy h1{font:400 32px/1.25 var(--pixel)}
.policy h2{font:400 16px/1.25 var(--pixel);color:var(--sage);margin-top:10px}
.policy p,.policy li{font-size:12px;line-height:1.9;color:var(--ink);max-width:68ch}
.policy ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.policy a{color:var(--sage)}
.policy .lede{color:var(--muted)}

/* back link to mechsicko.art, matching the site's other games and tools */
.back{font-size:12px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;padding:4px 0;white-space:nowrap}
.back:hover{color:var(--ink);border-color:var(--sage)}
.theme{background:none;border:1px solid var(--line);color:var(--ink);width:40px;height:40px;padding:0;display:grid;place-items:center;cursor:pointer;flex:none}
.theme:hover{border-color:var(--sage)}
.theme svg{width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}
:root[data-theme="dark"] .theme svg{transform:scaleX(-1)}