:root{
  
  --tx-bubblegum:#F59AC0; --tx-bubblegum-hi:#FFC9DF; --tx-bubblegum-lo:#DC74A3; --tx-bubblegum-lip:#B85584;
  --tx-mint:#7FD9C3; --tx-mint-hi:#BDF2E4; --tx-mint-lo:#52B8A0; --tx-mint-lip:#3A927E;
  --tx-lemon:#FFDD6E; --tx-lemon-hi:#FFF1B0; --tx-lemon-lo:#EDBD3F; --tx-lemon-lip:#C9962A;
  --tx-lilac:#B49BEB; --tx-lilac-hi:#DCD0FB; --tx-lilac-lo:#8F73D3; --tx-lilac-lip:#6E52B0;
  --tx-tangerine:#FFA567; --tx-tangerine-hi:#FFCDA6; --tx-tangerine-lo:#EA8443; --tx-tangerine-lip:#C2652B;
  --tx-strawberry:#FF7B7B; --tx-strawberry-hi:#FFB3B3; --tx-strawberry-lo:#E05656; --tx-strawberry-lip:#B53D3D;
  --tx-blueberry:#8EA6F8; --tx-blueberry-hi:#C3D0FF; --tx-blueberry-lo:#6A84DE; --tx-blueberry-lip:#4F66B8;
  --tx-bone:#F1E4C8; --tx-bone-hi:#FFF8E8; --tx-bone-lo:#D2BC93; --tx-bone-lip:#A88E66;
  --tx-soil:#6B4030; --tx-soil-hi:#8A5A43; --tx-soil-lo:#4E2D20; --tx-soil-lip:#3B2117;
  --tx-sand:#E8C990; --tx-sand-hi:#F7E5BE; --tx-sand-lo:#CDA86A; --tx-sand-lip:#A9844C;
  
  --tx-ink:#3B2218;
  --tx-ink-muted:#7A5646;
  --tx-cream:#FFF6E6;
  --tx-peach:#FCE6CC;
  --tx-cream-line:#EBD3B3;
  --tx-purple:#7650C4;
  --tx-purple-hi:#9473DA;
  --tx-purple-lo:#56369A;
  --tx-purple-ink:#4B2E8A;
  --tx-lilac-light:#E9E1FB;
  --tx-cta:#D12F7A;
  --tx-cta-hi:#EC5C9C;
  --tx-cta-lip:#9E1F5A;
  --tx-pink-ink:#B8236B;
  --tx-success:#23864C;
  --tx-success-light:#DDF6EE;
  --tx-success-ink:#1F6E40;
  --tx-danger-ink:#B3312F;
  --tx-flame:#FF7A2F;
  --tx-flame-core:#FFD15C;
  --tx-lemon-light:#FFF3C4;
  --tx-soil-pit:#4A2A1E;
  --tx-white:#FFFFFF;
  --tx-blush:#FF8FB3;
  --tx-on-dark:#FFF6E6; --tx-on-purple:#FFFFFF;
  
  --tx-bg:var(--tx-peach); --tx-panel:var(--tx-cream); --tx-text:var(--tx-ink); --tx-text-muted:var(--tx-ink-muted);
  --tx-header:var(--tx-purple); --tx-board-frame:var(--tx-soil); --tx-dug:var(--tx-soil-pit); --tx-hit:var(--tx-bone); --tx-miss:var(--tx-sand);
  
  --tx-layer-1:var(--tx-bubblegum); --tx-layer-2:var(--tx-mint); --tx-layer-3:var(--tx-lemon); --tx-layer-4:var(--tx-lilac);
  
  --tx-piece-I:var(--tx-mint); --tx-piece-O:var(--tx-lemon); --tx-piece-T:var(--tx-lilac); --tx-piece-S:var(--tx-tangerine);
  --tx-piece-Z:var(--tx-strawberry); --tx-piece-J:var(--tx-blueberry); --tx-piece-L:var(--tx-bubblegum);
  
  --tx-font-display:"Fredoka", "Baloo 2", ui-rounded, system-ui, sans-serif;
  --tx-font-body:"Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tx-fs-hero:clamp(64px, 18vw, 96px);  
  --tx-fs-display-xl:44px; --tx-fs-display-l:34px; --tx-fs-display-m:26px; --tx-fs-title:20px;
  --tx-fs-body:16px; --tx-fs-small:14px; --tx-fs-micro:12px; --tx-fs-button:20px;
  --tx-lh-tight:1.05; --tx-lh-snug:1.2; --tx-lh-body:1.45;
  
  --tx-r-cell:22%; --tx-r-sm:10px; --tx-r-md:16px; --tx-r-lg:24px; --tx-r-xl:32px; --tx-r-pill:999px;
  
  --tx-s-1:4px; --tx-s-2:8px; --tx-s-3:12px; --tx-s-4:16px; --tx-s-5:20px; --tx-s-6:24px; --tx-s-8:32px; --tx-s-10:40px; --tx-s-12:48px; --tx-s-16:64px;
  
  --tx-clay-face:inset 0 2px 0 rgb(255 255 255 / .55), inset 0 -4px 0 rgb(59 34 24 / .10);
  --tx-clay-drop:0 8px 14px -6px rgb(59 34 24 / .35);
  --tx-shadow-panel:inset 0 2px 0 rgb(255 255 255 / .8), 0 4px 0 var(--tx-cream-line), 0 12px 24px -12px rgb(59 34 24 / .35);
  --tx-shadow-pit:inset 0 5px 0 rgb(0 0 0 / .30), inset 0 -1px 0 rgb(255 255 255 / .08);
  
  --tx-ease-spring:cubic-bezier(.34,1.56,.64,1); --tx-ease-fall:cubic-bezier(.55,0,1,.45);
  --tx-ease-out:cubic-bezier(.22,1,.36,1); --tx-ease-inout:cubic-bezier(.65,0,.35,1);
  --tx-d-instant:60ms; --tx-d-fast:120ms; --tx-d-base:200ms; --tx-d-slow:360ms;
}



.tx-clay{
  --c:var(--tx-bone); --c-hi:var(--tx-bone-hi); --c-lo:var(--tx-bone-lo); --c-lip:var(--tx-bone-lip);
  position:relative; border-radius:var(--tx-r-cell);
  background:radial-gradient(120% 95% at 30% 22%, var(--c-hi) 0%, var(--c) 50%, var(--c-lo) 100%);
  box-shadow:var(--tx-clay-face), 0 3px 0 var(--c-lip), 0 5px 6px -2px rgb(59 34 24 / .28);
}
.tx-clay::before{ 
  content:""; position:absolute; left:18%; top:12%; width:32%; height:9%; min-height:3px;
  border-radius:999px; background:rgb(255 255 255 / .6); transform:rotate(-8deg); pointer-events:none;
}
.tx-clay::after{ 
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:url("../texture/noise-128.png") 0 0 / 64px 64px; mix-blend-mode:multiply; opacity:.55;
}
.tx-clay--bubblegum{--c:var(--tx-bubblegum);--c-hi:var(--tx-bubblegum-hi);--c-lo:var(--tx-bubblegum-lo);--c-lip:var(--tx-bubblegum-lip)}
.tx-clay--mint{--c:var(--tx-mint);--c-hi:var(--tx-mint-hi);--c-lo:var(--tx-mint-lo);--c-lip:var(--tx-mint-lip)}
.tx-clay--lemon{--c:var(--tx-lemon);--c-hi:var(--tx-lemon-hi);--c-lo:var(--tx-lemon-lo);--c-lip:var(--tx-lemon-lip)}
.tx-clay--lilac{--c:var(--tx-lilac);--c-hi:var(--tx-lilac-hi);--c-lo:var(--tx-lilac-lo);--c-lip:var(--tx-lilac-lip)}
.tx-clay--tangerine{--c:var(--tx-tangerine);--c-hi:var(--tx-tangerine-hi);--c-lo:var(--tx-tangerine-lo);--c-lip:var(--tx-tangerine-lip)}
.tx-clay--strawberry{--c:var(--tx-strawberry);--c-hi:var(--tx-strawberry-hi);--c-lo:var(--tx-strawberry-lo);--c-lip:var(--tx-strawberry-lip)}
.tx-clay--blueberry{--c:var(--tx-blueberry);--c-hi:var(--tx-blueberry-hi);--c-lo:var(--tx-blueberry-lo);--c-lip:var(--tx-blueberry-lip)}
.tx-clay--soil{--c:var(--tx-soil);--c-hi:var(--tx-soil-hi);--c-lo:var(--tx-soil-lo);--c-lip:var(--tx-soil-lip)}
.tx-clay--sand{--c:var(--tx-sand);--c-hi:var(--tx-sand-hi);--c-lo:var(--tx-sand-lo);--c-lip:var(--tx-sand-lip)}

.tx-pit{border-radius:var(--tx-r-cell); background:var(--tx-soil-pit); box-shadow:var(--tx-shadow-pit);}

.tx-panel{background:var(--tx-cream); border-radius:var(--tx-r-lg); box-shadow:var(--tx-shadow-panel);}

.tx-btn-cta{font:600 var(--tx-fs-button)/1 var(--tx-font-display); color:#fff; min-height:56px; padding:0 28px; border:0;
  border-radius:var(--tx-r-pill); background:linear-gradient(180deg, var(--tx-cta-hi) 0%, var(--tx-cta) 45%);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), 0 5px 0 var(--tx-cta-lip), 0 10px 16px -8px rgb(158 31 90 / .6);
  transition:transform var(--tx-d-instant) ease-out, box-shadow var(--tx-d-instant) ease-out;}
.tx-btn-cta:active{transform:translateY(4px); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), 0 1px 0 var(--tx-cta-lip);}
.tx-btn-cta:disabled{filter:saturate(.2) brightness(1.1); color:rgb(255 255 255 / .85);}
:focus-visible{outline:3px solid var(--tx-purple-ink); outline-offset:3px;}


@keyframes tx-block-fall{from{transform:translateY(var(--fall-from,-140%)) rotate(var(--fall-rot,0deg))}to{transform:translateY(0) rotate(0)}}
@keyframes tx-block-land{0%{transform:scale(1.12,.82)}100%{transform:scale(1,1)}}
@keyframes tx-dino-wake{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes tx-dino-stomp{0%{transform:translateY(0) rotate(0) scale(1,1)}38%{transform:translateY(-14px) rotate(-4deg) scale(.98,1.03)}62%{transform:translateY(0) rotate(0) scale(1,1)}76%{transform:translateY(0) scale(1.06,.9)}100%{transform:translateY(0) scale(1,1)}}
@keyframes tx-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,1px)}}
@keyframes tx-dust{from{transform:translate(0,0) scale(.3);opacity:.9}to{transform:translate(var(--dx,0),-18px) scale(1.4);opacity:0}}
@keyframes tx-loop-collapse{to{transform:translateY(40px) scale(.9);opacity:0}}
@keyframes tx-dino-pop{0%{transform:translateY(30%) scale(.4);opacity:0}60%{transform:translateY(-40px) scale(1.15);opacity:1}100%{transform:translateY(-28px) scale(1)}}
@keyframes tx-dino-wiggle{0%,100%{transform:translateY(-28px) rotate(0)}25%{transform:translateY(-28px) rotate(-6deg)}75%{transform:translateY(-28px) rotate(6deg)}}
@keyframes tx-label-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes tx-cell-crumble{0%{transform:scale(1);opacity:1}30%{transform:scale(1.04) rotate(-2deg)}100%{transform:translateY(10px) scale(.6,.3);opacity:0}}
@keyframes tx-sand-puff{from{transform:scale(.3);opacity:.9}to{transform:scale(1.4);opacity:0}}
@keyframes tx-pfft{0%{transform:translateY(0) scale(.8);opacity:0}15%{transform:translateY(-8px) scale(1);opacity:1}80%{transform:translateY(-20px);opacity:1}100%{transform:translateY(-24px);opacity:0}}
@keyframes tx-bone-reveal{from{clip-path:inset(0 100% 0 0);filter:brightness(1.4)}to{clip-path:inset(0 0 0 0);filter:brightness(1)}}
@keyframes tx-piece-lift{to{transform:translateY(-6px) scale(1.08)}}
@keyframes tx-nope{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes tx-count-out{to{transform:translateY(-100%);opacity:0}}
@keyframes tx-count-in{from{transform:translateY(100%);opacity:0}70%{transform:translateY(-8%)}to{transform:translateY(0);opacity:1}}
@keyframes tx-flame-flicker{0%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(1.08) skewX(-3deg)}100%{transform:scaleY(.96) skewX(2deg)}}
@keyframes tx-flame-burst{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes tx-chip-fill{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}



@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('/fonts/Fredoka-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('/fonts/Fredoka-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 400 500; font-display: swap; src: url('/fonts/Rubik-Medium.woff2') format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--tx-peach); color: var(--tx-ink); font: 400 16px/1.45 var(--tx-font-body); }
a { color: var(--tx-purple-ink); }
img { max-width: 100%; }
.w-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 12px; background: linear-gradient(180deg, var(--tx-purple-hi), var(--tx-purple));
  border-radius: 0 0 22px 22px; box-shadow: 0 4px 0 var(--tx-purple-lo); }
.w-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.w-brand img { height: 34px; width: auto; display: block; }
.w-wiki-tag { font: 700 13px/1 var(--tx-font-display); color: var(--tx-purple-ink); background: var(--tx-lemon); border-radius: 999px; padding: 5px 9px; box-shadow: 0 2px 0 var(--tx-lemon-lip); }
.w-play { font: 600 14px/1 var(--tx-font-display); color: #fff; background: var(--tx-cta); border-radius: 999px; padding: 10px 14px; text-decoration: none; box-shadow: 0 3px 0 var(--tx-cta-lip); white-space: nowrap; }
.w-main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.w-hero h1, .w-item h1 { font: 700 30px/1.1 var(--tx-font-display); margin: 8px 0; color: var(--tx-purple-ink); }
.w-hero p { margin: 0 0 12px; color: var(--tx-ink-muted); }
.w-filters { background: var(--tx-cream); border-radius: 18px; padding: 12px; box-shadow: var(--tx-shadow-panel); display: grid; gap: 10px; margin-bottom: 8px; }
.w-filters input[type=search] { width: 100%; font: 500 16px/1.2 var(--tx-font-body); padding: 11px 14px; border-radius: 12px; border: 2px solid var(--tx-cream-line); background: #fff; color: var(--tx-ink); }
.w-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.w-chip { font: 600 14px/1 var(--tx-font-display); border: 2px solid var(--tx-lilac); background: #fff; color: var(--tx-purple-ink); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.w-chip.on { background: var(--tx-purple); border-color: var(--tx-purple); color: #fff; }
.w-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.w-selects label { font: 600 13px/1 var(--tx-font-display); color: var(--tx-ink-muted); display: flex; align-items: center; gap: 6px; }
.w-selects select { font: 500 15px/1.2 var(--tx-font-body); padding: 7px 8px; border-radius: 10px; border: 2px solid var(--tx-cream-line); background: #fff; color: var(--tx-ink); max-width: 48vw; }
.w-count { margin: 0; font-size: 13px; color: var(--tx-ink-muted); }
.w-sec { font: 700 22px/1.1 var(--tx-font-display); color: var(--tx-purple-ink); margin: 20px 0 10px; scroll-margin-top: 80px; }
.w-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .w-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .w-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 18px; background: var(--tx-cream); box-shadow: var(--tx-shadow-panel); text-decoration: none; color: var(--tx-ink); }
.w-card[hidden], [hidden] { display: none !important; }
.w-card-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.8; border-radius: 14px; padding: 8px; }
.w-card-art img { max-height: 100%; width: auto; max-width: 100%; }
.w-card-name { font: 700 17px/1.1 var(--tx-font-display); color: var(--tx-purple-ink); }
.w-card-sub { font-size: 13px; color: var(--tx-ink-muted); }
.w-card-meta { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-top: 2px; }
.w-rar { font: 700 10px/1 var(--tx-font-display); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; display: inline-block; }
.w-rar.r-common { background: #E5DCCB; color: #6b5a48; }
.w-rar.r-rare { background: #C3D0FF; color: #3a4f9c; }
.w-rar.r-epic { background: var(--tx-lilac-hi); color: var(--tx-purple-ink); }
.w-rar.r-legendary { background: linear-gradient(90deg, #FFDD6E, #FFA567); color: #7a3d00; }
.r-common .w-card-art, .w-stage.r-common { background: radial-gradient(circle at 50% 35%, #fffaf0, #efe3cc); }
.r-rare .w-card-art, .w-stage.r-rare { background: radial-gradient(circle at 50% 35%, #f3f6ff, #c9d5ff); }
.r-epic .w-card-art, .w-stage.r-epic { background: radial-gradient(circle at 50% 35%, #f7f2ff, #d9cbfb); }
.r-legendary .w-card-art, .w-stage.r-legendary { background: radial-gradient(circle at 50% 35%, #fff7d6, #ffc98c); }
.w-gold { font: 700 14px/1 var(--tx-font-display); color: #8a5a00; }
.w-gold::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; background: radial-gradient(circle at 35% 30%, #FFF4BD, #FFCB3D 55%, #F0A21E); box-shadow: 0 1px 0 #B5760D; }
.w-empty { text-align: center; color: var(--tx-ink-muted); padding: 24px; }
.w-back { display: inline-block; margin: 4px 0 12px; font: 600 15px/1 var(--tx-font-display); text-decoration: none; }
.w-item { display: grid; gap: 16px; }
@media (min-width: 820px) { .w-item { grid-template-columns: 380px 1fr; align-items: start; } .w-stage { position: sticky; top: 90px; } }
.w-stage { border-radius: 24px; padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 240px; box-shadow: var(--tx-shadow-panel); }
.w-stage img { width: 100%; max-width: 320px; max-height: 300px; height: auto; }
.w-kicker { margin: 0; font: 600 13px/1 var(--tx-font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--tx-ink-muted); }
.w-item-body { background: var(--tx-cream); border-radius: 24px; padding: 16px; box-shadow: var(--tx-shadow-panel); }
.w-item h2 { font: 700 18px/1.2 var(--tx-font-display); color: var(--tx-purple-ink); margin: 18px 0 8px; }
.w-stats { margin: 8px 0 0; display: grid; }
.w-stats div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--tx-cream-line); }
.w-stats dt { font: 600 14px/1.3 var(--tx-font-display); color: var(--tx-ink-muted); }
.w-stats dd { margin: 0; font-size: 15px; }
.w-stats small { color: var(--tx-ink-muted); }
.w-stats code { font-size: 13px; background: #fff; padding: 1px 5px; border-radius: 6px; border: 1px solid var(--tx-cream-line); }
.w-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid; vertical-align: -2px; margin-right: 6px; }
.w-shape { display: inline-grid; grid-template-columns: repeat(var(--cols), 26px); gap: 4px; padding: 10px; background: var(--tx-soil); border-radius: 14px; }
.w-shape i { width: 26px; height: 26px; border-radius: 7px; background: var(--tx-soil-pit); }
.w-shape i.on { background: var(--c); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), 0 3px 0 var(--c-lip); }
.w-minis { display: flex; gap: 10px; flex-wrap: wrap; }
.w-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; padding: 8px; border-radius: 14px; background: #fff; text-decoration: none; color: var(--tx-ink); font: 600 14px/1.1 var(--tx-font-display); }
.w-mini img { height: 60px; width: auto; }
.w-worn { background: radial-gradient(circle at 50% 35%, #fffaf0, #efe3cc); border-radius: 18px; padding: 16px; display: flex; justify-content: center; }
.w-worn img { max-height: 220px; width: auto; }
.w-pn { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0 8px; }
.w-btn { font: 600 15px/1.1 var(--tx-font-display); background: #fff; border: 2px solid var(--tx-lilac); color: var(--tx-purple-ink); border-radius: 999px; padding: 11px 14px; text-decoration: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-foot { text-align: center; color: var(--tx-ink-muted); font-size: 14px; padding: 24px 16px calc(env(safe-area-inset-bottom) + 32px); }
.w-foot p { margin: 4px 0; }
.w-404 { text-align: center; padding: 40px 16px; }