@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#0a1016;color:#eee8da;font-family:Inter,Arial,sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100vh}header{position:absolute;top:0;left:0;right:0;padding:26px 34px;display:flex;justify-content:space-between;pointer-events:none;background:linear-gradient(#0a1016eb,transparent)}small{font-size:10px;letter-spacing:2px;color:#9da7a5;display:block;font-weight:700}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;line-height:1;margin:8px 0;letter-spacing:1px}h1 span{color:#b8ed78}.stats{display:flex;gap:36px;padding-top:12px}.stats div{color:#b8ed78;font-size:22px}.stats b{color:#eee8da}.stats small{margin-top:6px}aside{position:absolute;left:28px;top:145px;width:230px;padding:22px;background:#101a22ed;border:1px solid #ffffff12;border-radius:12px;box-shadow:0 16px 50px #0004}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;margin:10px 0}p{font-size:12px;color:#9da7a5;line-height:1.7}button{font:inherit;cursor:pointer;border:0;border-radius:7px;color:inherit}.tool{display:flex;width:100%;text-align:left;align-items:center;gap:12px;padding:11px;margin:7px 0;background:#1b2831;border:1px solid transparent}.tool.selected{border-color:#b8ed78;background:#26392c}.icon{font-size:23px;width:27px}.tool strong{display:block;font-size:12px}.tool small{font-size:9px;letter-spacing:.5px;margin-top:4px}.hint{font-size:10px;line-height:1.9;color:#7f939a;margin-top:20px}.quiet{font-size:11px;background:transparent;color:#a3afb4;padding:13px 0 0}footer{position:absolute;bottom:24px;left:290px;right:28px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff18;background:#101a22f0;padding:19px 22px;border-radius:12px}footer div{flex:1}footer strong{display:block;font-size:13px;margin-top:7px}#start,#again{background:#b8ed78;color:#172215;font-weight:700;padding:15px 23px}#start:disabled{opacity:.5;cursor:default}#speed{padding:13px;background:#25333e}#message{position:absolute;bottom:120px;left:290px;right:28px;text-align:center;font-size:12px;color:#d6dfd1;text-shadow:0 2px 5px #000}#end{position:absolute;inset:0;background:#071017bc;backdrop-filter:blur(9px);place-items:center;text-align:center}#end:not([hidden]){display:grid}#end h2{font-size:64px}#end p{font-size:15px}#end small{color:#b8ed78}@media(max-width:700px){header{padding:16px}h1{font-size:25px}.stats{gap:14px}.stats div{font-size:17px}aside{left:10px;top:110px;width:170px;padding:12px}aside h2{font-size:23px}aside p,.hint{display:none}.tool{padding:8px;gap:5px}.tool strong{font-size:11px}footer{left:10px;right:10px;bottom:10px;padding:12px}#message{left:185px;right:12px;bottom:105px}#start{padding:13px;font-size:11px}}

[hidden]{display:none!important}#close-build{position:absolute;right:8px;top:7px;background:transparent;font-size:25px;line-height:1;color:#b8ed78;padding:5px}#open-build{position:absolute;top:135px;left:28px;padding:13px 18px;background:#b8ed78;color:#172215;font-weight:700}.panel-closed footer,.panel-closed #message{left:28px}@media(max-width:700px){#open-build{left:10px;top:110px}.panel-closed footer,.panel-closed #message{left:10px}}
body{background:#090a12}aside{background:#14121eed}h1 span{color:#d8b0ff}#army-dock{position:absolute;right:24px;top:140px;width:224px;padding:12px;background:#14121eef;border:1px solid #b78ae733;border-radius:12px}#summon-open{width:100%;padding:14px;background:linear-gradient(135deg,#6b3b9c,#423062);font-size:12px;letter-spacing:1px;font-weight:700}#summon-open b{display:block;color:#e7c991;font-size:11px;margin-top:6px;letter-spacing:0}#army{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.unit-card{padding:10px 4px;background:#24202f;border:1px solid #ffffff16;text-align:center}.unit-card>span{font-size:26px;display:block;margin-bottom:6px}.unit-card strong{display:block;font-size:10px}.unit-card small{font-size:8px;letter-spacing:0;margin-top:6px;line-height:1.5}.unit-card.chosen{border-color:#e0c391;background:#3b3043}.unit-card:disabled{opacity:.4;cursor:default}#army-tip{font-size:9px;letter-spacing:0;line-height:1.6}.common{color:#c1c7bc}.rare{color:#86c4ff}.epic{color:#d6a0ff}.legendary{color:#ffc56b}dialog{background:#15121e;color:#eee8da;border:1px solid #84639b;border-radius:18px;padding:30px;width:min(640px,94vw);max-height:90vh;box-shadow:0 30px 100px #000b;text-align:center}dialog::backdrop{background:#07050dde;backdrop-filter:blur(8px)}dialog h2{font-size:42px}dialog button{padding:13px;margin:4px;background:#694993;font-weight:700}dialog button:disabled{opacity:.4;cursor:default}.modal-close{position:absolute;right:10px;top:8px;font-size:23px;background:transparent!important}.portal-orb{font-size:64px;margin:16px auto;color:#e1adff;text-shadow:0 0 30px #b953ff,0 0 70px #8744f0;border:1px solid #b07fe944;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;background:radial-gradient(#5b2e7b,#171020)}#pull-result{min-height:60px;font-size:13px;margin:10px 0;display:flex;justify-content:center;align-items:center;gap:12px}.reveal{animation:reveal .5s ease both;display:block;font-weight:700}.reveal small{font-size:9px;letter-spacing:1px;margin:6px}.odds{font-size:10px}.collection-row{text-align:left;border-top:1px solid #ffffff10;padding:11px 0;font-size:12px}.collection-row span{float:right;font-size:10px}.collection-row small{clear:both;font-size:9px;letter-spacing:0;margin-top:6px}@keyframes reveal{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}#build-panel{max-height:calc(100vh - 250px);overflow-y:auto}@media(max-width:900px){#army-dock{top:auto;bottom:100px;right:10px;width:180px}#army{grid-template-columns:repeat(3,1fr)}.unit-card{padding:7px 2px}.unit-card>span{font-size:18px}.unit-card strong{font-size:8px}.unit-card small{font-size:7px}#army-tip{display:none}#message{bottom:350px;left:185px}#build-panel{max-height:calc(100vh - 210px)}.collection-row span{float:none;display:block;margin-top:4px}}@media(prefers-reduced-motion:reduce){.reveal{animation:none}}
@media(max-width:700px){#army-dock{left:10px;right:10px;width:auto;bottom:99px;padding:7px;display:flex;gap:8px;align-items:stretch}#summon-open{width:85px;flex-shrink:0;padding:10px 4px;font-size:10px;letter-spacing:0}#army{display:flex;overflow-x:auto;margin:0;gap:5px;flex:1}.unit-card{min-width:75px;padding:7px 4px}.unit-card>span{margin:0}.unit-card small{margin-top:3px}#message{bottom:202px;left:12px;right:12px}#build-panel{max-height:calc(100vh - 330px)}}