@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#101214;--surface:#1b1e21;--line:#303438;--muted:#969da4;--lime:#d4fa72}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f3f4ef;font-family:'Noto Sans KR',sans-serif;font-size:14px}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.lime{color:var(--lime)}header{max-width:1280px;margin:auto;padding:27px 42px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:white;display:flex;gap:12px;font-size:32px;font-weight:900;line-height:1.1}.brand>span{font-size:20px;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:500;margin-top:6px}.wallet{display:flex;gap:15px;align-items:center;background:#22272a;border:1px solid #373e3f;border-radius:40px;padding:12px 20px}.wallet span{color:var(--muted);font-size:12px}.wallet strong{font-size:21px}.wallet b{color:var(--lime);font-size:23px}main{max-width:1280px;margin:auto;padding:0 42px}.intro{min-height:320px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;overflow:hidden}.eyebrow{color:var(--lime);font-size:10px;font-weight:800;letter-spacing:2.5px}h1{font-size:48px;line-height:1.25;letter-spacing:-2px;margin:18px 0}p{color:var(--muted);line-height:1.8}.intro p{font-size:13px}.hero-art{position:relative;height:300px;display:grid;place-items:center}.orbit{position:absolute;width:290px;height:230px;border:1px solid #3f4832;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 100px #b5ea5210}.hero-card{background:linear-gradient(140deg,#b8dca4,#344e48 55%,#17292a);border:5px solid #b0c88a;border-radius:14px;width:156px;height:216px;transform:rotate(14deg);padding:10px;box-shadow:18px 18px 0 #0004,0 0 55px #d4fa721c;color:#d8f2b0}.hero-card>div{font-size:83px;filter:drop-shadow(0 6px 14px #c5f8aa88);line-height:1.5}.hero-card small{font-size:8px;letter-spacing:1px;display:block}.hero-card b{font-size:9px;display:block;margin-top:10px}.spark{position:absolute;color:var(--lime);font-size:30px}.s1{left:18%;top:20%}.s2{right:16%;bottom:22%}.hero-label{position:absolute;bottom:15px;font-size:8px;letter-spacing:3px;color:#77816d}.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#181b1d;border-radius:12px;padding:21px 0}.stats>div{padding:0 27px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats small{color:var(--muted);font-size:11px;display:block;margin-bottom:10px}.stats strong{font-size:25px;letter-spacing:-.8px}.stats em{font-size:11px;color:#7f898f;font-style:normal;font-weight:500;margin-left:5px}nav{display:flex;gap:30px;margin-top:33px;border-bottom:1px solid var(--line)}nav button{background:none;color:var(--muted);border:0;padding:18px 0;font-weight:700;font-size:13px;border-bottom:2px solid transparent}nav button.active{color:var(--lime);border-bottom-color:var(--lime)}nav span{font-size:10px;background:#303535;padding:2px 6px;border-radius:4px;margin-left:4px}.panel{padding-top:30px;min-height:350px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}h2{font-size:21px;letter-spacing:-.7px;margin:0}h3{font-size:18px}.section-head p{font-size:11px;margin:7px 0 0}.badge{font-size:9px;letter-spacing:1.2px;color:#8d959b;border:1px solid var(--line);border-radius:5px;padding:8px 11px}.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pack-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;position:relative;overflow:hidden}.pack-tile:hover{border-color:#727d5e}.pack-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}.pack-top b{color:var(--color);font-size:8px;background:color-mix(in srgb,var(--color) 12%,transparent);padding:4px 7px;border-radius:3px}.pack-art{height:205px;display:grid;place-items:center;background:radial-gradient(ellipse,color-mix(in srgb,var(--color) 9%,transparent),transparent 65%);margin:6px 0 13px}.foil{height:172px;width:117px;position:relative;transform:rotate(-8deg);background:repeating-linear-gradient(100deg,#ffffff00 0px,#ffffff08 5px,#ffffff00 9px),linear-gradient(155deg,color-mix(in srgb,var(--color) 80%,#000),#1b323b 55%,var(--color));border:1px solid var(--color);box-shadow:12px 18px 20px #0005;display:flex;align-items:center;flex-direction:column;justify-content:center;clip-path:polygon(0 0,100% 0,100% 98%,96% 100%,92% 98%,88% 100%,84% 98%,80% 100%,76% 98%,72% 100%,68% 98%,64% 100%,60% 98%,56% 100%,52% 98%,48% 100%,44% 98%,40% 100%,36% 98%,32% 100%,28% 98%,24% 100%,20% 98%,16% 100%,12% 98%,8% 100%,4% 98%,0 100%)}.foil:before,.foil:after{content:'';position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,#fff2 0 1px,#0003 1px 3px)}.foil:before{top:0}.foil:after{bottom:0}.foil small{font-size:7px;letter-spacing:2px;color:#fff9}.foil span{font-size:62px;line-height:1.5;filter:drop-shadow(0 0 10px #fff6)}.foil b{font-size:14px;text-align:center;font-weight:900;letter-spacing:1px}.foil em{font-size:6px;margin-top:8px;color:#fff9;font-style:normal;letter-spacing:2px}.pack-tile h3{margin:0 0 6px}.pack-desc{font-size:11px;color:var(--muted);margin:0}.odds{font-size:9px;color:#8e979d;display:flex;gap:9px;margin:16px 0}.odds span{border-right:1px solid #485055;padding-right:9px}.odds span:last-child{border:0;padding:0}.buy, .tile button, #revealAll,#keep{border:0;background:var(--lime);color:#1e2815;border-radius:6px;width:100%;font-weight:800;padding:13px}.buy{display:flex;justify-content:space-between;background:#2b3131;color:white}.pack-tile:first-child .buy{background:var(--lime);color:#1e2815}.buy:hover{filter:brightness(1.17)}.tip{margin:22px 0 0;padding:16px 20px;border:1px solid #343b2e;background:#1c2119;border-radius:7px;font-size:11px;color:#a8b49c}.tip b{color:var(--lime);margin:0 12px 0 6px}footer{padding:35px 0;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#686f73}footer>span:first-child{font-weight:800;letter-spacing:1px}footer button{color:#828a8d;background:none;border:0;font-size:10px}.subbutton{background:#292e2e;color:#eee;border:1px solid #414949;border-radius:6px;padding:10px;font-size:11px}.filters{display:flex;gap:8px;margin-bottom:20px}select{background:#24292a;border:1px solid #41494b;color:#eee;padding:9px;border-radius:5px;font-size:11px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.monster-card{border:1px solid var(--rarity);border-radius:10px;padding:13px;background:linear-gradient(140deg,color-mix(in srgb,var(--rarity) 18%,#15191c),#1a2024);position:relative}.card-top{display:flex;justify-content:space-between;font-size:9px;color:var(--rarity)}.monster-art{font-size:70px;text-align:center;padding:24px 0;background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 22%,transparent),transparent 65%)}.monster-card h3{margin:3px 0;font-size:17px}.card-sub{font-size:9px;color:#a5afb7}.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px}.sell{border:1px solid #5c6466;background:#ffffff08;color:white;padding:5px 9px;border-radius:4px;font-size:10px}.empty{grid-column:1/-1;text-align:center;padding:65px 10px;color:var(--muted)}.income-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tile{background:var(--surface);border:1px solid var(--line);padding:25px;border-radius:10px}.tile-icon{color:var(--lime);font-size:28px}.tile p{font-size:12px}.tile strong{display:block;color:var(--lime);margin:24px 0 18px;font-size:22px}.mission-title{margin:30px 0 15px}.mission{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid var(--line);gap:12px}.mission small{color:var(--muted);display:block;margin-top:6px}.mission button{min-width:105px}dialog{background:#171d22;color:white;border:1px solid #4c575e;border-radius:18px;padding:30px;width:min(850px,94vw);max-height:95vh;box-shadow:0 0 150px #000}dialog::backdrop{background:#080d14dd;backdrop-filter:blur(10px)}.open-head{display:flex;justify-content:space-between;align-items:center}.open-head h2{margin-top:10px}.open-head>span{color:var(--lime)}dialog>p{font-size:12px}.reveal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.unrevealed{border:1px solid #8eab64;background:repeating-linear-gradient(45deg,#80985610 0 1px,transparent 1px 12px),#202d29;border-radius:10px;min-height:270px;color:var(--lime);font-size:35px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}.unrevealed small{font-size:9px;letter-spacing:2px}.reveal-cards .monster-card{animation:appear .4s ease-out}.new{color:var(--lime);font-size:9px}.open-actions{max-width:280px;margin:auto}.auto-note{text-align:center;font-size:10px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:var(--lime);color:#233017;padding:13px 23px;border-radius:8px;font-weight:700;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}@keyframes appear{from{transform:rotateY(90deg) scale(.9);opacity:0}to{transform:rotateY(0);opacity:1}}[hidden]{display:none!important}@media(min-width:1500px){.intro{min-height:370px}.pack-art{height:235px}}@media(max-width:760px){header{padding:20px}.brand>span{font-size:15px}.wallet{gap:8px;padding:9px 12px}.wallet span{display:none}main{padding:0 20px}h1{font-size:37px}.intro{grid-template-columns:1fr;min-height:auto;padding:35px 0 10px}.hero-art{display:none}.stats{grid-template-columns:repeat(2,1fr);gap:20px;padding:18px 0}.stats>div{padding:0 18px}.stats>div:nth-child(2){border:0}.stats strong{font-size:22px}nav{gap:22px}nav button{font-size:11px}.packs,.income-grid{grid-template-columns:1fr}.pack-tile{display:grid;grid-template-columns:135px 1fr;column-gap:15px;padding:17px}.pack-top{grid-column:1/-1}.pack-art{grid-row:2/6;height:195px;margin:0}.pack-tile h3{align-self:end;margin-bottom:10px}.pack-desc{font-size:10px}.odds{flex-wrap:wrap;gap:5px;font-size:8px}.foil{width:105px;height:155px}.badge{display:none}.cards{grid-template-columns:repeat(2,1fr)}.monster-art{font-size:60px}.section-head{align-items:start}h2{font-size:18px}.tip{line-height:1.8}.tip b{margin-left:3px}.reveal-cards{gap:6px}.reveal-cards .monster-card{padding:7px}.reveal-cards .monster-art{font-size:39px;padding:30px 0}.reveal-cards h3{font-size:12px}.reveal-cards .card-top{font-size:7px}.reveal-cards .card-sub{font-size:7px}.unrevealed{min-height:220px;font-size:24px}dialog{padding:18px}.open-head h2{font-size:18px}footer{flex-wrap:wrap;line-height:1.8}footer>span:nth-child(2){order:3;width:100%}}
.illustration{background-size:600% 400%;background-repeat:no-repeat;aspect-ratio:1;overflow:hidden}.monster-card .monster-art{width:100%;padding:0;margin:12px 0 14px;border-radius:5px;border:1px solid #ffffff20}.foil{isolation:isolate;overflow:hidden}.foil .pack-picture{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background-size:880% 400%;z-index:-2;opacity:.86}.foil:after{z-index:3}.foil small{position:absolute;top:15px;z-index:2;text-shadow:0 1px 5px black}.foil b{position:absolute;bottom:23px;z-index:2;text-shadow:0 2px 5px black;font-size:14px}.foil em{position:absolute;bottom:13px;z-index:2;color:white}.foil .pack-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(#0006,transparent 35%,transparent 55%,#000c)}.hero-card .hero-picture{width:100%;height:auto;aspect-ratio:1;border-radius:4px;margin:7px 0;background-size:600% 400%;filter:none}.reveal-cards .monster-card .monster-art{padding:0}@media(max-width:760px){.reveal-cards .monster-card .monster-art{padding:0;margin:10px 0}.reveal-cards .monster-card{min-height:220px}}
.expansion-art{background-size:1000% 800%}.grading-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grade-lab label{display:block;color:var(--muted);font-size:12px;margin:20px 0 10px}.grade-lab select{width:100%}.grade-preview{display:flex;gap:20px;align-items:center;padding:22px 0}.grade-preview .illustration{width:120px;flex-shrink:0;border-radius:8px}.grade-preview h3{font-size:15px;margin:0}.grade-preview p{font-size:11px}.grade-lab p{font-size:11px}.grade-empty{text-align:center;color:#62716a;font-size:65px;padding:55px 10px}.grade-empty p{font-size:12px}.slab{padding:10px;background:linear-gradient(140deg,#d6e1e444,#5b717633);border:2px solid #93a9af88;border-radius:11px;box-shadow:inset 0 0 0 4px #182329,0 8px 25px #0003}.slab-label{background:#f0f0e7;color:#222b29;border:2px solid #a93433;border-radius:4px;display:flex;justify-content:space-between;gap:7px;padding:10px;margin-bottom:9px;min-height:77px}.slab-label>div{display:flex;flex-direction:column;gap:3px}.slab-label b{font-size:8px;letter-spacing:1px;color:#a93433}.slab-label span{font-size:11px;font-weight:800}.slab-label small{font-size:7px}.slab-label>strong{font-size:31px;line-height:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.slab-label>strong small{font-size:6px;letter-spacing:1px;margin-top:4px}.slab-art{width:100%;border-radius:4px;border:3px solid #bdc9bf66}.slab-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 3px 3px;gap:5px}.slab-footer>span{font-weight:800;font-size:13px;color:var(--lime)}.slab-footer small{font-size:9px;color:var(--muted)}.grade-reveal{max-width:260px;margin:20px auto 0;animation:appear .5s ease-out}.grade-reveal p{font-size:10px;text-align:center}.subgrades{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}.subgrades>div{text-align:center;border:1px solid var(--line);padding:9px 1px;border-radius:5px}.subgrades span{font-size:9px;color:var(--muted);display:block}.subgrades b{font-size:18px;color:var(--lime)}.grade-rules{padding:16px 20px;background:#1b211c;border:1px solid #374536;border-radius:7px;margin-top:20px}.grade-rules summary{cursor:pointer;color:var(--lime);font-size:12px}.grade-rules p{font-size:11px;line-height:2}.grade-lab>button{margin-top:12px}nav{gap:25px}@media(max-width:760px){nav{gap:16px;white-space:nowrap;overflow:auto}nav button{font-size:10px}.grading-layout{grid-template-columns:1fr}.filters{flex-wrap:wrap}.slab-label{padding:7px}.slab-label span{font-size:10px}.grade-preview .illustration{width:100px}.slab-label>strong{font-size:25px}}
.foil .expansion-art{background-size:1467% 800%}.foil b{max-width:105px;font-size:12px;line-height:1.2}.pack-desc{min-height:36px}.pack-top{gap:5px}.pack-top b{white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:14px}.settings-button{display:flex;align-items:center;gap:9px;border:1px solid #3d4845;background:#202825;color:#eff4ea;border-radius:8px;padding:11px 13px;font-size:12px;font-weight:700}.settings-button span{color:var(--lime);background:#d4fa7212;padding:3px 6px;border-radius:4px;font-size:10px}#settingsDialog{width:min(720px,94vw);padding:28px}.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.settings-heading h2{margin-top:9px}.settings-note{font-size:11px;line-height:1.9}.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.difficulty-choice{text-align:left;background:#20272b;border:2px solid #3d484d;border-radius:10px;color:#e9eeeb;padding:17px 14px;display:flex;flex-direction:column;gap:8px}.difficulty-choice b{font-size:18px;margin-bottom:5px}.difficulty-choice span{font-size:11px}.difficulty-choice small{font-size:9px;color:var(--muted);margin-top:7px}.difficulty-choice.selected{border-color:var(--lime);background:#2b3522}.difficulty-choice.selected b{color:var(--lime)}.settings-summary{border-radius:6px;background:#d4fa7210;padding:12px 15px;color:var(--lime);font-size:11px}.restart-section{border-top:1px solid var(--line);margin-top:25px;padding-top:12px}.restart-section p{font-size:11px}.restart-button{border:1px solid #925f5c;background:#482a28;color:#ffc0b7;font-weight:700;padding:12px 17px;border-radius:6px;margin-top:8px}.restart-button:hover{background:#60332e}@media(max-width:760px){header{flex-wrap:wrap;gap:17px}.header-actions{width:100%;justify-content:space-between}.wallet strong{font-size:20px}}@media(max-width:500px){#settingsDialog{padding:20px}.difficulty-options{grid-template-columns:1fr;gap:8px}.difficulty-choice{display:grid;grid-template-columns:75px 1fr;padding:12px;gap:5px}.difficulty-choice b{grid-row:1/4;align-self:center;font-size:16px}.difficulty-choice small{margin-top:2px}.settings-heading{margin-bottom:17px}.settings-heading h2{font-size:20px}}

/* Each image uses a fixed atlas viewport. Layout never changes the crop. */
.illustration{background:none;aspect-ratio:1;position:relative;overflow:hidden}.illustration>svg{display:block;width:100%;height:100%;overflow:hidden}.monster-card .monster-art{aspect-ratio:1;height:auto;background:none}.foil .pack-picture,.foil .expansion-art{top:29px;left:6px;right:6px;bottom:auto;width:calc(100% - 12px);height:auto;aspect-ratio:1;background:none;opacity:1;z-index:-2;border-radius:3px}.foil .pack-picture:after{display:none}.foil{background:linear-gradient(145deg,color-mix(in srgb,var(--color) 65%,#12191c),#172029 65%,var(--color))}.hero-card #heroArtwork{font-size:0;line-height:0}.hero-card .hero-picture{height:auto;aspect-ratio:1;background:none}.slab-art{aspect-ratio:1;background:none}@media(max-width:760px){.foil .pack-picture,.foil .expansion-art{top:26px}}