:root{--paper:#faf8f4;--card:#fffdf8;--ink:#1a1a1a;--body:#3a3a3a;--sub:#8a8378;--line:#e3ddd2;--red:#b11226;--sage:#6b806e;--gold:#a8842c;--dark:#201e1b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,Hiragino Sans,sans-serif;line-height:1.85}a{color:inherit;text-decoration:none;transition:color .15s ease,border-color .15s ease,opacity .15s ease}.siteHeader{align-items:baseline;display:flex;gap:16px;justify-content:space-between;margin:0 auto;max-width:1080px;padding:32px 20px 0}.brand{display:inline-flex}.zkBrand{font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.nav{display:flex;gap:18px}.nav a{border-bottom:1px solid var(--line);color:var(--sub);font-size:12px;letter-spacing:.08em;padding-bottom:2px}.nav a:hover{border-color:var(--red);color:var(--red)}.popHero{margin:0 auto;max-width:1080px;padding:64px 20px 8px}.popKicker{color:var(--sub);font-size:12px;font-weight:700;letter-spacing:.24em;margin:0 0 14px}.popKicker:before{background:var(--red);content:"";display:block;height:3px;margin-bottom:18px;width:32px}.popHero h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:.03em;line-height:1.2;margin:0}.popHero h1 em{color:var(--red);font-style:normal}.popLead{color:var(--body);font-size:15px;line-height:1.95;margin:20px 0 0;max-width:720px}.dexLegend{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.dexChip{border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;padding:6px 12px;white-space:nowrap}.dexCatGame{background:rgba(177,18,38,.06);border-color:rgba(177,18,38,.28);color:var(--red)}.dexCatTool{background:rgba(107,128,110,.1);border-color:rgba(107,128,110,.35);color:var(--sage)}.dexCatBoard{background:rgba(168,132,44,.1);border-color:rgba(168,132,44,.35);color:var(--gold)}.dexCatCard{background:rgba(26,26,26,.05);border-color:rgba(26,26,26,.25);color:var(--ink)}.section{margin:0 auto;max-width:1080px;padding:56px 20px 8px}.sectionLabel{color:var(--sub);font-size:13px;font-weight:700;letter-spacing:.22em;margin:0 0 10px}.popPage h2{font-size:24px;letter-spacing:.03em;margin:0}.categoryLead{color:var(--body);font-size:14px;margin:14px 0 0;max-width:680px}.dexGrid{display:grid;grid-gap:14px;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:28px}.dexCard{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:6px;min-height:180px;padding:14px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.dexCard:hover{border-color:var(--red);box-shadow:0 6px 20px rgba(26,26,26,.06);transform:translateY(-2px)}.dexCard.dexFlippable{background:none;border:none;box-shadow:none;cursor:pointer;display:block;padding:0;perspective:900px;text-align:left;transform:none}.dexThumb{aspect-ratio:16/10;background:#efe9de;border:1px solid var(--line);border-radius:8px;display:block;margin-bottom:6px;overflow:hidden;position:relative}.dexThumb img{object-fit:cover}.dexNo{color:var(--red);font-size:11px;font-weight:700;letter-spacing:.18em}.dexName{color:var(--ink);font-size:15px;font-weight:700;line-height:1.5;margin:0}.dexEn{color:var(--sub);font-size:11px;letter-spacing:.05em;margin:0}.dexChipRow{align-items:center;display:flex;flex-wrap:nowrap;gap:6px;margin-top:auto;min-width:0}.dexXChip{border:1px solid var(--line);border-radius:999px;color:var(--sub);flex-shrink:0;font-size:10px;font-weight:700;line-height:1;margin-left:auto;padding:5px 10px;white-space:nowrap}.dexXChip:hover{border-color:var(--red);color:var(--red)}.dexCardInner{display:block;height:100%;position:relative;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.4,.2,.2,1);width:100%}.dexFlipped .dexCardInner{transform:rotateY(180deg)}.dexFace{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:6px;padding:14px;transition:border-color .15s ease,box-shadow .15s ease}.dexFlippable:hover .dexFace{border-color:var(--red);box-shadow:0 6px 20px rgba(26,26,26,.06)}.dexFront{height:100%;min-height:180px;position:relative}.dexBack{background:var(--dark);border-color:var(--dark);inset:0;overflow:auto;position:absolute;transform:rotateY(180deg)}.dexBack .dexNo{color:#c9a24b}.dexBackNote{color:#f6f3ec;font-size:12.5px;line-height:1.8}.dexFlipHint{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--sub);cursor:pointer;display:flex;font-family:inherit;font-size:12px;font-weight:700;height:26px;justify-content:center;padding:0;position:absolute;right:8px;top:8px;transition:border-color .15s ease,color .15s ease;width:26px;z-index:2}.dexFlipHint:hover{border-color:var(--red);color:var(--red)}.dexOutroCards{display:grid;grid-gap:14px;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:24px}.dexOutroCard{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:8px;padding:20px 18px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.dexOutroCard:hover{border-color:var(--red);box-shadow:0 6px 20px rgba(26,26,26,.06);transform:translateY(-2px)}.dexOutroTag{color:var(--sub);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.dexOutroCard h3{font-size:16px;letter-spacing:.02em;line-height:1.5;margin:0}.dexOutroCard p{color:var(--body);font-size:13.5px;line-height:1.8;margin:0}.zkMoreLink{color:var(--red);font-size:13px;font-weight:700;letter-spacing:.04em;margin-top:auto}.dexComingSoon{border-style:dashed}.dexComingSoon:hover{border-color:var(--line);box-shadow:none;transform:none}.dexComingSoon .dexOutroTag,.dexComingSoon h3{color:var(--sub)}.siteFooter{border-top:1px solid var(--line);margin:72px auto 0;max-width:1080px;padding:24px 20px 56px}.footerLinks{display:flex;flex-wrap:wrap;gap:18px}.footerLinks a{border-bottom:1px solid var(--line);color:var(--sub);font-size:12px;letter-spacing:.08em;padding-bottom:2px}.footerLinks a:hover{border-color:var(--red);color:var(--red)}.footerCopy{color:var(--sub);font-size:12px;margin:14px 0 0}@media (max-width:640px){.siteHeader{padding-top:24px}.popHero{padding-top:44px}.popHero h1{font-size:clamp(30px,9vw,40px)}.dexGrid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}}@media (prefers-reduced-motion:reduce){.dexCard,.dexCardInner,.dexOutroCard{transition:none}}