@import "https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Inter:wght@400;600;800&display=swap";:root{--bg:#c4161c;--bg-2:#6e0a0e;--panel:#0000002e;--border:#ffffff2e;--text:#fff5f2;--muted:#f6c3bd;--accent:#fff1e6;--accent-ink:#8f0f14;--legendary:#f5c542;--rare:#8fb8ff;--common:#b9bdd3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 80% -10%, #ff786459, transparent 60%), radial-gradient(900px 500px at 0% 20%, #ffffff14, transparent 60%), linear-gradient(var(--bg), var(--bg-2));background-attachment:fixed;min-height:100vh;margin:0}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:1200px;margin:0 auto;padding:0 20px 48px}.hero{text-align:center;padding:64px 0 32px;position:relative}.hero-kanji{color:#000;opacity:.14;pointer-events:none;-webkit-user-select:none;user-select:none;place-items:center;font-size:220px;font-weight:800;display:grid;position:absolute;inset:0}.hero h1{letter-spacing:1px;text-shadow:0 4px 24px #00000059;margin:0;font-family:Kalam,cursive;font-size:clamp(56px,10vw,96px);line-height:1;position:relative}.hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex;position:relative}.rules-button{letter-spacing:.02em;color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;padding:10px 24px;font-weight:800;transition:transform .15s,box-shadow .15s;position:relative;box-shadow:0 6px 20px #00000040}.rules-button.secondary{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent), 0 6px 20px #00000040;background:#00000040}.rules-button:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0000004d}.rules-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.tagline{max-width:560px;color:var(--text);margin:20px auto 0;font-size:17px;line-height:1.55;position:relative}.set-line{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 0;font-size:13px;font-weight:600;position:relative}.rarity-badge{--c:var(--common);text-transform:uppercase;letter-spacing:.08em;color:var(--c);border:1px solid color-mix(in srgb, var(--c) 50%, transparent);background:color-mix(in srgb, var(--c) 12%, transparent);border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;font-weight:800;display:inline-flex}.rarity-badge.rarity-rare{--c:var(--rare)}.rarity-badge.rarity-legendary{--c:var(--legendary);box-shadow:0 0 14px color-mix(in srgb, var(--legendary) 40%, transparent)}.stars{letter-spacing:1px}.stars .dim{opacity:.25}.filters{flex-wrap:wrap;gap:8px;margin-bottom:28px;display:flex}.filters button{border:1px solid var(--border);background:var(--panel);border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.filters button:hover{border-color:#ffffff4d}.filters button.active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.filters .count{background:#00000040;border-radius:999px;padding:1px 7px;font-size:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:32px 24px;display:grid}.tile{flex-direction:column;gap:12px;display:flex}.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--glow:transparent;aspect-ratio:17/22;width:100%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 12px 30px #00000073, 0 0 0 2px var(--glow);background:#000;border:0;border-radius:14px;padding:0;transition:transform .2s ease-out,box-shadow .2s;display:block;position:relative;overflow:hidden}.card:hover{box-shadow:0 20px 40px #0000008c, 0 0 0 2px var(--glow), 0 0 28px var(--glow)}.card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.card img{object-fit:cover;width:100%;height:100%;display:block}.foil{pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx) var(--my), #ffffff59, transparent 45%);mix-blend-mode:soft-light;transition:opacity .2s;position:absolute;inset:0}.card:hover .foil{opacity:1}.card.rarity-rare{--glow:color-mix(in srgb, var(--rare) 70%, transparent)}.card.rarity-rare .foil{background:radial-gradient(circle at var(--mx) var(--my), #ffffff73, transparent 40%), linear-gradient(115deg, transparent 30%, #c8dcff59 50%, transparent 70%);background-size:100% 100%,250% 250%;background-position:center, var(--mx) var(--my)}.card.rarity-legendary{--glow:color-mix(in srgb, var(--legendary) 80%, transparent);background:conic-gradient(from var(--angle,0deg), #f5c542, #ff6b9a, #8f7bff, #4fd8ff, #7bffb0, #f5c542);padding:4px;animation:4s linear infinite spin}.card.rarity-legendary img{border-radius:11px}.card.rarity-legendary .foil{opacity:.55;mix-blend-mode:color-dodge;background:radial-gradient(circle at var(--mx) var(--my), #ffffff80, transparent 40%), linear-gradient(125deg, #ff00802e, #ffc8002e, #00ffb42e, #0096ff2e, #c800ff2e);background-size:100% 100%,300% 300%;background-position:center, var(--mx) var(--my);border-radius:11px;inset:4px}.card.rarity-legendary:hover .foil{opacity:.9}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin{to{--angle:360deg}}.tile-info{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.tile-info h2{word-break:break-word;margin:0;font-size:18px}.hp{color:var(--text);margin:0;font-size:13px;font-weight:600}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#050714cc;padding:20px;animation:.2s ease-out fade;display:grid;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px;width:min(820px,100%);margin:auto;padding:32px;animation:.25s ease-out pop;display:grid;position:relative;box-shadow:0 30px 80px #0009}.modal.rarity-legendary{border-color:color-mix(in srgb, var(--legendary) 50%, transparent);box-shadow:0 30px 80px #0009, 0 0 60px color-mix(in srgb, var(--legendary) 25%, transparent)}.close{z-index:2;width:36px;height:36px;color:var(--muted);background:0 0;border:0;border-radius:50%;font-size:28px;line-height:1;position:absolute;top:10px;right:14px}.close:hover{background:var(--panel);color:var(--text)}.flip{perspective:1200px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;padding:0}.flip.dragging{cursor:grabbing}.flip:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:14px}.flip-inner{aspect-ratio:17/22;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.4,.5,1);display:block;position:relative}.flip.dragging .flip-inner{transition:none}.face{object-fit:cover;backface-visibility:hidden;border-radius:14px;width:100%;height:100%;position:absolute;inset:0;box-shadow:0 16px 40px #00000080}.face.back{transform:rotateY(180deg)}.details{flex-direction:column;align-items:flex-start;gap:12px;min-width:0;display:flex}.details h2{word-break:break-word;margin:0;font-family:Kalam,cursive;font-size:40px;line-height:1.1}.hp-big{color:var(--accent);margin:-6px 0 0;font-weight:800}.attacks{width:100%;margin:0;padding:0;list-style:none}.attacks li{border-bottom:1px solid var(--border);justify-content:space-between;gap:12px;padding:10px 0;display:flex}.attacks strong{font-variant-numeric:tabular-nums}.effect{border-left:3px solid var(--accent);color:var(--muted);margin:0;padding-left:12px;font-style:italic}.hint{color:var(--muted);opacity:.7;margin:auto 0 0;font-size:12px}.footer{text-align:center;color:var(--muted);margin-top:64px;font-size:13px}.nav-arrow{z-index:11;border:2px solid var(--accent);width:52px;height:52px;color:var(--accent);background:#00000059;border-radius:50%;place-items:center;padding:0 0 4px;font-size:40px;line-height:1;transition:background .15s,color .15s;display:grid;position:fixed;top:50%;transform:translateY(-50%)}.nav-arrow:hover{color:var(--accent-ink);background:var(--accent)}.nav-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.nav-arrow.prev{left:max(16px,50% - 486px)}.nav-arrow.next{right:max(16px,50% - 486px)}.modal.rules{max-width:640px;display:block}.rules h2{margin:0;font-family:Kalam,cursive;font-size:40px}.rules-intro{color:var(--muted);margin:4px 0 20px}.steps{gap:14px;margin:0;padding:0;list-style:none;display:grid}.steps li{align-items:flex-start;gap:14px;display:flex}.step-num{width:32px;height:32px;color:var(--accent-ink);background:var(--accent);border-radius:50%;flex:none;place-items:center;font-weight:800;display:grid}.steps h3{margin:4px 0 2px;font-size:16px}.steps p{color:var(--muted);margin:0;line-height:1.5}.rules-subhead{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:28px 0 12px;font-size:13px}.example{gap:12px;display:grid}.turn{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px}.turn p{margin:0 0 10px}.hp-row{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px;display:grid}.hp-name{color:var(--muted)}.hp-bar{background:#00000059;border-radius:999px;min-width:60px;height:10px;position:relative;overflow:hidden}.hp-lost,.hp-left{border-radius:999px;position:absolute;inset:0 auto 0 0}.hp-lost{background:#ffffff40}.hp-left{background:#7bffb0}.hp-math{font-variant-numeric:tabular-nums;white-space:nowrap}.ko{color:var(--accent-ink);background:var(--legendary);border-radius:6px;margin-left:8px;padding:1px 6px;font-size:11px;font-weight:800}.specials{gap:8px;margin:0;padding:0;list-style:none;display:grid}.specials li{border-left:3px solid var(--legendary);color:var(--muted);padding-left:12px;line-height:1.5}.specials strong{color:var(--text)}@media (width<=480px){.hp-row{grid-template-columns:1fr auto}.hp-bar{grid-area:2/1/auto/-1}}.modal.next-set{width:min(1200px,100%);padding-inline:20px;display:block}.next-set h2{margin:0;font-family:Kalam,cursive;font-size:40px}.next-set .set-line{margin:0}.next-set .rules-intro{margin-bottom:28px}.card.mystery{cursor:default}.card.mystery img{filter:brightness(.45)saturate(.8)blur(1px)}.mystery-mark{color:#fff;text-shadow:0 4px 24px #0009;pointer-events:none;place-items:center;font-family:Kalam,cursive;font-size:clamp(90px,12vw,140px);font-weight:700;line-height:1;display:grid;position:absolute;inset:0}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(12px)scale(.97)}}@media (width<=980px){.nav-arrow{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}}@media (width<=680px){.modal{grid-template-columns:1fr;gap:20px;padding:24px 20px}.flip{justify-self:center;width:min(300px,100%)}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 16px}.hero-kanji{font-size:150px}}@media (prefers-reduced-motion:reduce){.card.rarity-legendary{animation:none}.card,.flip-inner{transition:none}}