@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&display=swap');
:root{--ink:#0e1022;--bg:#0e1022;--panel:#161b33;--line:#2b3157;--fg:#f7f4ed;--mut:#a9aed0;--pink:#ff3d81;--yellow:#ffdc4d;--lime:#8df16d;--blue:#65d9ff;--paper:#f7f4ed}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Mono',ui-monospace,monospace}

/* ---- the card (generator look). The outer .card is sized by its context; everything inside scales with it (cqw). ---- */
.card{width:240px;container-type:inline-size;position:relative;--tilt-x:0deg;--tilt-y:0deg}
.card .ic{position:relative;color:var(--ink);background:linear-gradient(145deg,#ffe995,#fff9df 42%,#f7b944);border:2.7cqw solid #e6b526;outline:.8cqw solid #684a0d;
  padding:3.5cqw;border-radius:3.8cqw;box-shadow:2.7cqw 2.7cqw 0 #0b1836;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .18s ease-out;text-align:left;overflow:hidden}
.card .cardhead{display:flex;align-items:center;justify-content:space-between;gap:2cqw;border-bottom:.8cqw solid #684a0d;padding:0 .8cqw 2.7cqw;font-size:3.1cqw;font-weight:bold}
.card .stamp{color:#fff;background:#8e2b4c;border:.55cqw solid #fff6c7;border-radius:99px;padding:1.1cqw 2.2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .av{width:100%;aspect-ratio:1/.92;border:1.35cqw solid #684a0d;outline:.55cqw solid #fdf4c8;margin:3.5cqw 0 2.7cqw;background:var(--yellow);overflow:hidden;display:grid;place-items:center;font-size:30cqw}
.card .av img{width:100%;height:100%;object-fit:cover;display:block}
.card .nm{font:8.6cqw/1 'Archivo Black',sans-serif;letter-spacing:-.06em;overflow-wrap:anywhere;text-shadow:1px 1px #fff3b5}
.card .fl{color:#684a0d;font-weight:bold;font-size:3.3cqw;margin:3.2cqw 0 0}
.card .fl:before{content:'✦';margin-right:1.6cqw}
.card .facts{font-size:2.9cqw;display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw;margin-top:4.3cqw;border:.55cqw solid #684a0d;background:#fff9df;padding:2.7cqw}
.card .facts b{display:block;font-size:2.5cqw;color:#8e2b4c;letter-spacing:.09em}
.card .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;margin-top:2.2cqw}
.card .stats div{background:#8e2b4c;color:#fff7d8;border:.55cqw solid #684a0d;text-align:center;padding:1.6cqw .8cqw}
.card .stats b{display:block;font-size:2.3cqw;letter-spacing:.08em}
.card .stats span{font:5cqw 'Archivo Black',sans-serif}
.card .move{margin:2.2cqw 0 0;padding:1.9cqw 2.4cqw;background:#fff9df;border:.55cqw solid #684a0d;font-size:2.85cqw}
.card .move b{color:#8e2b4c;margin-right:1.4cqw;font-size:2.3cqw;letter-spacing:.08em}
.card .foil-layer{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 18%,rgba(101,217,255,.52) 32%,rgba(255,61,129,.56) 46%,rgba(141,241,109,.48) 60%,rgba(255,220,77,.65) 74%,transparent 88%);background-size:240% 100%}
.card.foil .foil-layer{opacity:.62;animation:foilShift 2.6s linear infinite}
.card.foil .ic{box-shadow:0 0 0 3px #fff6bc,2.7cqw 2.7cqw 0 #0b1836}
.card.animated .av{outline-color:#65d9ff;box-shadow:0 0 11px 3px rgba(101,217,255,.9)}
.card.animated .stamp{background:#176a9a}
.card.tier-rare .ic{box-shadow:0 0 0 3px #b9efff,0 0 18px 5px rgba(53,183,255,.95),0 0 44px 15px rgba(53,183,255,.65),2.7cqw 2.7cqw 0 #0b1836}
.card.tier-ultra .ic{box-shadow:0 0 0 3px #ecd1ff,0 0 20px 7px rgba(185,86,255,1),0 0 52px 19px rgba(185,86,255,.75),2.7cqw 2.7cqw 0 #0b1836}
.card.tier-mythic .ic{box-shadow:0 0 0 3px #fff0bb,0 0 22px 8px rgba(255,139,35,1),0 0 56px 21px rgba(255,139,35,.8),2.7cqw 2.7cqw 0 #0b1836}
.card.tier-god .ic{box-shadow:0 0 0 3px #fff6bc,0 0 24px 9px rgba(255,220,77,1),0 0 62px 24px rgba(255,61,129,.9),2.7cqw 2.7cqw 0 #0b1836}
.card.tier-rare .stamp,.card.tier-rare .stats div{background:#167fc4}
.card.tier-ultra .stamp,.card.tier-ultra .stats div{background:#8139bd}
.card.tier-mythic .stamp,.card.tier-mythic .stats div{background:#d66a13}
.card.tier-god .stamp,.card.tier-god .stats div{background:#b85d13}
.card.tier-rare .facts b,.card.tier-rare .move b{color:#167fc4}
.card.tier-ultra .facts b,.card.tier-ultra .move b{color:#8139bd}
.card.tier-mythic .facts b,.card.tier-mythic .move b{color:#d66a13}
.card.tier-god .facts b,.card.tier-god .move b{color:#b85d13}
.card.premium .ic{animation:premiumGlow 1.7s ease-in-out infinite alternate}
@keyframes foilShift{from{background-position:0 0}to{background-position:200% 0}}
@keyframes premiumGlow{from{filter:saturate(1.08) brightness(1)}to{filter:saturate(1.35) brightness(1.13)}}
/* compact grid version: art, name, rarity */
.card.sm .fl,.card.sm .facts,.card.sm .stats,.card.sm .move,.card.sm .cardhead>span:first-child{display:none}
.card.sm .cardhead{justify-content:center;font-size:6cqw;padding-bottom:3cqw}
.card.sm .nm{font-size:11cqw;margin-top:1cqw}
.card.sm .av{margin:4cqw 0 3cqw}
/* glows are sized for full cards; tone them down in grids */
.card.sm .ic{box-shadow:2.7cqw 2.7cqw 0 #0b1836}
.card.sm.tier-rare .ic{box-shadow:0 0 0 2px #b9efff,0 0 10px 2px rgba(53,183,255,.9)}
.card.sm.tier-ultra .ic{box-shadow:0 0 0 2px #ecd1ff,0 0 12px 3px rgba(185,86,255,1)}
.card.sm.tier-mythic .ic{box-shadow:0 0 0 2px #fff0bb,0 0 12px 4px rgba(255,139,35,1)}
.card.sm.tier-god .ic{box-shadow:0 0 0 2px #fff6bc,0 0 14px 4px rgba(255,220,77,1)}
@media(prefers-reduced-motion:reduce){.card .foil-layer,.card.premium .ic{animation:none!important}}

.cardid{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--mut);font-size:.7rem;letter-spacing:.08em}
.cardid span{color:#ff5b95;font-weight:bold}
.cardid code{padding:5px 7px;border:1px solid #454b67;background:#0b1020;color:var(--fg);font:inherit;font-weight:bold;letter-spacing:.05em}

/* ---- shared controls (generator style: chunky borders + offset shadows) ---- */
.btn{font:500 16px 'DM Mono',monospace;font-weight:bold;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--pink);
  border-radius:0;padding:14px 18px;cursor:pointer;width:100%;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pink)}
.btn:disabled{opacity:.5}
.btn.alt{background:var(--panel);color:var(--fg);border-color:var(--line);box-shadow:4px 4px 0 #000}
input,select{width:100%;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:0;padding:14px;font:500 17px 'DM Mono',monospace}
.wrap{max-width:420px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:12px;align-items:center}
.err{color:#ff7a8a}.ok{color:var(--lime)}.mut{color:var(--mut);font-size:14px}