:root{--gold: #f2c14e;--gold-deep: #b8862b;--ink: #1a1210;--parch: #efe2c0;--danger: #d94f4f;--hp: #57c257;--panel: rgba(24, 16, 12, .82);color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%}body{font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;background:#0b0808;color:var(--parch);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}.app{position:relative;height:100dvh;width:100vw;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 30%,#241a14,#0b0808 70%)}.btn{position:relative;border:none;background:transparent;color:#3a2410;font-weight:800;font-size:clamp(14px,2.4vw,20px);letter-spacing:.5px;text-transform:uppercase;cursor:pointer;padding:18px 34px;min-width:200px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;background-size:100% 100%;background-repeat:no-repeat;text-shadow:0 1px 0 rgba(255,240,200,.5);transition:transform .12s ease,filter .12s ease}.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08)}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{filter:grayscale(.6) brightness(.7);cursor:default}.title{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;background:radial-gradient(circle at 50% 35%,rgba(242,193,78,.14),transparent 60%)}.title-banner{width:min(92vw,620px);max-height:34vh;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}.title h1{margin:0;font-size:clamp(26px,6vw,52px);color:var(--gold);text-shadow:0 2px 0 #5a3a10,0 0 22px rgba(242,193,78,.5);letter-spacing:1px;text-align:center}.title .sub{margin:-12px 0 6px;font-size:clamp(12px,2.6vw,17px);color:#d8c69a;opacity:.85;text-align:center;max-width:520px}.hero-select{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:16px 12px 20px;gap:12px;overflow-y:auto}.hero-select h2{color:var(--gold);margin:6px 0 2px;font-size:clamp(18px,4vw,30px);text-shadow:0 2px 0 #4a2e0c}.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:min(96vw,900px)}.hero-card{position:relative;border-radius:14px;padding:10px 8px 12px;background:linear-gradient(180deg,#3c2a1ae6,#1a120cf2);border:2px solid var(--gold-deep);cursor:pointer;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s;display:flex;flex-direction:column;align-items:center}.hero-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:.28;z-index:0}.hero-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px #00000080;border-color:var(--gold)}.hero-card>*{position:relative;z-index:1}.hero-card img.portrait{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}.hero-card .hname{font-weight:800;color:var(--gold);font-size:16px}.hero-card .htitle{font-size:11px;opacity:.8;text-align:center}.hero-card .htags{font-size:10px;margin-top:4px;color:#cdb78e;letter-spacing:.4px}.stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;min-height:0}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;gap:10px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);font-size:13px;z-index:5}.topbar .round-pill{background:var(--panel);border:1px solid var(--gold-deep);border-radius:999px;padding:4px 14px;color:var(--gold);font-weight:800;letter-spacing:1px}.topbar .phase-hint{opacity:.85;font-style:italic}.board{position:relative;flex:1;width:min(100vw,560px);min-height:0;background-size:cover;background-position:center;overflow:hidden}.board:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 74%,rgba(0,0,0,.42));pointer-events:none}.workshop-deco{position:absolute;width:30%;max-width:130px;opacity:.55;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));z-index:1;pointer-events:none}.workshop-deco.opp{top:1%;right:1%;transform:scaleX(-1)}.workshop-deco.player{bottom:.5%;left:1%}.lane{position:absolute;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:0 4%;z-index:2}.lane.opp{top:3%;align-items:flex-start}.lane.player{bottom:2%}.cwrap{position:relative;width:62%;max-width:250px;display:flex;justify-content:center}.combatant{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}.combatant .hero-slot{position:relative;width:100%;aspect-ratio:1}.hero-sprite{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55));transition:transform .28s cubic-bezier(.34,1.56,.64,1),filter .2s}.combatant.opp .hero-sprite{transform:scaleX(-1)}.hero-sprite.lunge-down{transform:translateY(10%) scale(1.06)}.hero-sprite.opp.lunge-up{transform:scaleX(-1) translateY(-10%) scale(1.06)}.hero-sprite.shake{animation:shake .35s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.combatant.opp .hero-sprite.shake{animation:shake-opp .35s}@keyframes shake-opp{0%,to{transform:scaleX(-1) translate(0)}25%{transform:scaleX(-1) translate(-6px)}75%{transform:scaleX(-1) translate(6px)}}.artifact{position:relative;width:70%;max-width:160px;aspect-ratio:1;margin-top:-18%;z-index:3;pointer-events:none}.artifact .layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}.artifact .shield-layer{transform:scale(.72) translate(-16%,12%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.artifact .weapon-layer{filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}.artifact .pop{animation:forge-pop .6s cubic-bezier(.34,1.8,.5,1)}@keyframes forge-pop{0%{transform:scale(.2) rotate(-12deg);opacity:0}60%{transform:scale(1.18) rotate(4deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.hpbar{position:relative;width:90%;max-width:190px;height:16px;background:#0009;border:2px solid var(--ink);border-radius:9px;overflow:hidden;margin-bottom:4px;box-shadow:0 2px 6px #00000080}.hpbar .fill{height:100%;background:linear-gradient(180deg,#7be27b,var(--hp));transition:width .5s cubic-bezier(.4,0,.2,1)}.hpbar.low .fill{background:linear-gradient(180deg,#ff8a5c,var(--danger))}.hpbar .label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.5px}.nameplate{font-size:12px;font-weight:800;color:var(--gold);text-shadow:0 1px 2px #000;margin-bottom:2px}.dmg-float{position:absolute;left:50%;top:20%;transform:translate(-50%);font-size:clamp(22px,6vw,40px);font-weight:900;color:#ffd94a;text-shadow:0 2px 0 #7a2a00,0 0 14px rgba(255,120,40,.8);pointer-events:none;z-index:8;animation:dmg-rise .9s ease-out forwards}@keyframes dmg-rise{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}to{opacity:0;transform:translate(-50%,-46px) scale(1)}}.vfx{position:absolute;width:46%;max-width:200px;aspect-ratio:1;left:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;z-index:7;animation:vfx-flash .6s ease-out forwards}@keyframes vfx-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}.center-banner{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none}.center-banner .big{font-size:clamp(30px,10vw,70px);font-weight:900;color:var(--gold);text-shadow:0 3px 0 #4a2400,0 0 26px rgba(242,193,78,.7);animation:pop-in .5s cubic-bezier(.3,1.6,.5,1)}@keyframes pop-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.footer{width:100%;min-height:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);padding:8px 6px 10px;z-index:5}.hand{display:flex;justify-content:center;gap:8px;padding:4px 6px}.card{position:relative;width:clamp(78px,24vw,118px);aspect-ratio:1024 / 1408;cursor:pointer;transition:transform .16s ease,filter .16s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}.card:hover{transform:translateY(-8px) scale(1.05)}.card.disabled{filter:grayscale(.7) brightness(.6);cursor:default;transform:none}.card .frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;z-index:2}.card .art{position:absolute;top:16%;left:16%;right:16%;height:44%;object-fit:contain;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.card .cname{position:absolute;bottom:9%;left:10%;right:10%;text-align:center;font-size:clamp(8px,1.9vw,11px);font-weight:800;color:#f6e6c0;text-shadow:0 1px 2px #000,0 0 4px #000;z-index:3;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card .cpow{position:absolute;top:5%;right:9%;font-size:clamp(11px,2.8vw,15px);font-weight:900;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;z-index:3}.card .ckind{position:absolute;top:5%;left:9%;font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:#0000008c;padding:1px 5px;border-radius:6px;z-index:3}.forge{width:min(94vw,480px);margin:6px auto 2px;text-align:center}.forge .track{position:relative;height:26px;border-radius:13px;background:#1a120b;border:2px solid var(--gold-deep);overflow:hidden;cursor:pointer}.forge .zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#ffdc78e6,#f2c14eb3)}.forge .zone.perfect{background:linear-gradient(180deg,#fff2c0,#ffd24a)}.forge .marker{position:absolute;top:-3px;bottom:-3px;width:5px;background:#fff;box-shadow:0 0 10px #fff,0 0 4px var(--gold);border-radius:3px}.forge .hint{font-size:12px;margin-top:6px;color:var(--gold);font-weight:700;letter-spacing:.5px}.mini-tag{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.5px}.result{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#060403b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px}.result .verdict{font-size:clamp(34px,11vw,74px);font-weight:900;text-shadow:0 3px 0 #000,0 0 28px currentColor}.result .verdict.win{color:#ffd94a}.result .verdict.lose{color:#d94f4f}.score-card{width:min(92vw,400px);background:var(--panel);border:2px solid var(--gold-deep);border-radius:14px;padding:14px 18px}.score-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;border-bottom:1px dashed rgba(242,193,78,.25)}.score-row.total{border-bottom:none;font-size:20px;font-weight:900;color:var(--gold);padding-top:10px}.score-row .v{font-weight:800}.helper-text{font-size:12px;opacity:.75;text-align:center;max-width:460px;margin:0 12px}@media (max-width: 380px){.btn{min-width:160px;padding:14px 20px}.hero-grid{grid-template-columns:repeat(2,1fr)}}