@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Manrope:wght@500;600;700;800&display=swap";:root{--ink:#07111e;--night:#0b1d31;--panel:#102b43;--cyan:#6ee9ff;--gold:#ffd66e;--muted:#9db6c7;--line:#527a95;--red:#ff6f65;--green:#74ef9a}*{box-sizing:border-box}body{color:#f5fbff;background:#081626;min-height:100vh;margin:0;font-family:Manrope,Segoe UI,sans-serif}button,input{font:inherit}button{touch-action:manipulation}.brand{letter-spacing:.06em;color:#fff;font:900 31px/1 Barlow Condensed,sans-serif}.brand i{color:var(--gold);letter-spacing:.18em;margin-left:3px;font-size:.52em;font-style:normal;display:block}.connecting{background:radial-gradient(circle at 50% 20%,#1d5480,#07111e 65%);place-content:center;justify-items:center;gap:20px;min-height:100vh;display:grid}.connecting p{letter-spacing:.18em;font:800 14px Barlow Condensed}.loader{border:3px solid #fff2;border-top-color:var(--cyan);border-radius:50%;width:42px;height:42px;animation:.7s linear infinite spin}@keyframes spin{to{rotate:1turn}}.select-screen{background:radial-gradient(at 50% 0,#245a75 0,#12324c 31%,#08192a 72%);min-height:100vh;padding:28px clamp(18px,4vw,72px);position:relative;overflow:hidden}.select-screen:before{content:"";pointer-events:none;background-color:#0000;background-image:linear-gradient(90deg,#ffffff08 1px,#0000 1px),linear-gradient(#ffffff08 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:55px 55px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 75%);mask-image:linear-gradient(#000,#0000 75%)}.select-top,.select-layout,.select-screen footer{z-index:1;position:relative}.select-top{border-bottom:1px solid #89c4df55;justify-content:space-between;align-items:start;padding-bottom:18px;display:flex}.select-meta{letter-spacing:.16em;color:#b6deee;text-align:right;font:800 11px Barlow Condensed}.select-meta b{color:var(--gold);margin-left:10px;font-size:16px}.select-layout{background:#0b2137b5;border:1px solid #93c6dd66;grid-template-columns:240px minmax(420px,1fr) 290px;width:min(1400px,100%);min-height:650px;margin:34px auto 12px;display:grid;box-shadow:0 35px 100px #0008}.roster{background:#091b2d99;border-right:1px solid #628ca366;padding:20px 14px}.eyebrow{color:var(--cyan);letter-spacing:.2em;margin:0 0 14px;font:800 11px Barlow Condensed}.roster-item{text-align:left;color:#c6dfed;cursor:pointer;background:0 0;border:0;border-left:3px solid #0000;grid-template-rows:1fr 1fr;grid-template-columns:72px 1fr;column-gap:10px;width:100%;height:107px;padding:8px;transition:all .18s;display:grid}.roster-item span{clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);background:#112d43;grid-row:1/3;place-items:center;display:grid}.roster-item img{object-fit:contain;filter:drop-shadow(0 6px 3px #000);width:70px;height:80px}.roster-item b{letter-spacing:.04em;align-self:end;font:800 19px Barlow Condensed}.roster-item small{color:#83aec4;align-self:start;font-size:9px}.roster-item:hover,.roster-item.active{border-left-color:var(--gold);color:#fff;background:linear-gradient(90deg,#ffffff15,#0000)}.roster-item.active span{background:#315b65;box-shadow:inset 0 0 22px #82eaff44}.showcase{background:radial-gradient(at 50% 60%,#4e8ba733,#0000 55%);align-items:end;min-height:620px;display:grid;position:relative;overflow:hidden}.showcase:before{content:"";transform-origin:bottom;background-color:#0000;background-image:linear-gradient(135deg,#0000 49%,#9eefff0d 50%,#0000 51%),linear-gradient(45deg,#0000 49%,#9eefff0d 50%,#0000 51%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:48px 48px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:15% 0 0;transform:perspective(400px)rotateX(62deg)scale(1.5)}.showcase-backdrop{mix-blend-mode:screen;background:radial-gradient(circle,#76eaff2e,#0000 55%);position:absolute;inset:0}.creature-large{z-index:1;filter:drop-shadow(0 25px 15px #000b);place-items:center;width:90%;height:92%;margin:auto;display:grid;position:relative}.creature-large img{object-fit:contain;width:min(600px,100%);height:100%;animation:3.6s ease-in-out infinite idle}.creature-plaque{z-index:2;text-shadow:0 3px 6px #000;position:absolute;bottom:28px;left:30px}.creature-plaque span{color:var(--cyan);letter-spacing:.19em;font:800 11px Barlow Condensed}.creature-plaque h1{letter-spacing:.01em;margin:2px 0;font:900 clamp(46px,6vw,80px)/.82 Barlow Condensed}.creature-plaque p{color:#d9eefa;margin:10px 0 0;font-size:12px}.loadout{background:linear-gradient(#122d43dd,#0a1c2cbb);border-left:1px solid #628ca366;padding:24px 20px}.loadout h2{color:var(--gold);margin:0 0 12px;font:900 30px/1 Barlow Condensed}.loadout-copy{color:#b1cad8;font-size:12px;line-height:1.7}.stat{border-bottom:1px solid #6792a644;justify-content:space-between;align-items:center;padding:14px 0;display:flex}.stat span{letter-spacing:.14em;color:#95b8c9;font:700 10px Barlow Condensed}.stat b{color:#fff;font:900 26px Barlow Condensed}.loadout-rule{color:#d5edf9;gap:10px;padding:16px 0;font-size:11px;line-height:1.5;display:flex}.loadout-rule i{color:var(--gold);font-size:30px;font-style:normal}.loadout-rule small{color:#89aabd}.loadout input{color:#fff;letter-spacing:.1em;background:#071522;border:1px solid #719db4;width:100%;padding:12px;font:800 12px Barlow Condensed}.enter{background:var(--gold);color:#1c2330;letter-spacing:.07em;cursor:pointer;border:0;width:100%;margin-top:15px;padding:15px;font:900 16px Barlow Condensed;transition:transform .15s;box-shadow:0 5px #a26132}.enter:hover{transform:translateY(-2px)}.enter span{float:right;font-size:22px;line-height:14px}.select-screen footer{color:#97bacc;letter-spacing:.14em;justify-content:center;gap:16px;font:800 10px Barlow Condensed;display:flex}.arena{background:radial-gradient(at 50% 15%,#285e7b,#0d263b 38%,#071422 80%);min-height:100vh;padding:18px clamp(12px,3vw,52px);position:relative;overflow:hidden}.arena:before{content:"";pointer-events:none;background:radial-gradient(circle at 12% 42%,#ff71551f,#0000 18%),radial-gradient(circle at 88% 42%,#60eaff1c,#0000 18%);position:absolute;inset:0}.arena-header{z-index:2;border-bottom:1px solid #85c7de66;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1350px;margin:auto;padding-bottom:13px;display:grid;position:relative}.room-chip{letter-spacing:.17em;background:#0a1a2a;border:1px solid #6396ad;padding:7px 14px;font:800 11px Barlow Condensed}.room-chip b{color:var(--gold);margin-left:7px}.copy{color:#d5f5ff;letter-spacing:.1em;cursor:pointer;background:0 0;border:1px solid #71a5bd;justify-self:end;padding:9px 13px;font:800 11px Barlow Condensed}.battle-stage{grid-template-columns:minmax(215px,1fr) minmax(410px,570px) minmax(215px,1fr);align-items:center;gap:26px;max-width:1350px;min-height:735px;margin:20px auto 0;display:grid;position:relative}.stage-grid{transform-origin:bottom;pointer-events:none;background-color:#0000;background-image:linear-gradient(#7ad6fb15 1px,#0000 1px),linear-gradient(90deg,#7ad6fb15 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:42px 42px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:25% 5% 0;transform:perspective(430px)rotateX(64deg);-webkit-mask-image:linear-gradient(#0000,#000 45%);mask-image:linear-gradient(#0000,#000 45%)}.stage-light{pointer-events:none;background:radial-gradient(#7ce9ff1d,#0000 67%);position:absolute;inset:17% 22% 5%}.fighter,.board-zone{z-index:1;position:relative}.fighter{background:linear-gradient(#102e46aa,#0000 75%);border-top:2px solid #76c6e5;border-bottom:1px solid #5e94aa;flex-direction:column;min-height:580px;padding:15px 14px 18px;display:flex}.fighter.opponent{text-align:right;background:linear-gradient(#422a33aa,#0000 75%);border-top-color:#ffad79}.fighter-label{letter-spacing:.18em;color:#caf3ff;justify-content:space-between;align-items:center;font:800 11px Barlow Condensed;display:flex}.fighter-label i{color:#7aaec4;font-size:10px;font-style:normal}.fighter-art{place-items:center;height:295px;margin-top:5px;display:grid}.fighter-art img{object-fit:contain;filter:drop-shadow(0 20px 7px #000c);width:100%;height:100%;animation:3.8s ease-in-out infinite idle}.fighter.opponent .fighter-art img{animation-delay:-1.5s;transform:scaleX(-1)}.fighter-name h2{letter-spacing:.03em;margin:0;font:900 37px/.9 Barlow Condensed}.fighter-name small{color:#a9c7d5;font-size:11px}.meter-row{color:#cfe8f5;letter-spacing:.16em;justify-content:space-between;align-items:end;margin-top:16px;font:800 11px Barlow Condensed;display:flex}.meter-row b{letter-spacing:0;font-size:18px}.meter-row em{color:#83aabf;font-size:9px;font-style:normal}.meter{clip-path:polygon(0 0,100% 0,97% 100%,0 100%);background:#06111e;border:1px solid #5b8094;height:11px;margin-top:4px;overflow:hidden}.meter i{height:100%;transition:width .35s;display:block}.hp i{background:linear-gradient(90deg,#2fce8e,#d4fc77)}.mana i{background:linear-gradient(90deg,#1f78da,#68ecff)}.shield{color:#8cefff;letter-spacing:.1em;border:1px solid #75eaff;margin-top:11px;padding:6px;font:800 11px Barlow Condensed}.special{text-align:left;border:1px solid var(--gold);color:#32200f;cursor:pointer;background:linear-gradient(135deg,#ffe06d,#e9852c);width:100%;margin-top:14px;padding:9px 10px;box-shadow:0 4px #a75b26}.special:disabled{opacity:.46;filter:grayscale();cursor:not-allowed}.special span{float:left;margin-right:7px;font-size:25px}.special b{letter-spacing:.08em;font:900 14px Barlow Condensed;display:block}.special small{color:#6e4127;margin-top:3px;font:800 8px Manrope;display:block}.waiting{text-align:center;opacity:.75;justify-content:center;align-items:center}.waiting-mark{color:#82dfff;border:1px dashed #74b4ca;place-items:center;width:90px;height:90px;font-size:40px;display:grid}.waiting b{letter-spacing:.1em;margin-top:15px;font:800 17px Barlow Condensed}.waiting small{color:#a4bfcc;margin-top:5px;font-size:10px}.board-zone{min-width:0}.turn-banner{text-align:center;background:#0b1b2c;border:1px solid #5e8ba2;border-bottom:0;flex-direction:column;justify-content:center;min-height:55px;padding:8px 13px;display:flex}.turn-banner span{letter-spacing:.2em;color:#88b4c7;font:800 10px Barlow Condensed}.turn-banner b{letter-spacing:.08em;color:#d6ebf6;font:800 12px Barlow Condensed}.turn-banner.your-turn{background:linear-gradient(90deg,#254d45,#2f5b3d);border-color:#d9ef79}.turn-banner.your-turn span{color:#e7ff82}.board{background:#071524;border:4px solid #8dbbd2;grid-template-columns:repeat(8,1fr);gap:4px;padding:9px;display:grid;box-shadow:0 10px #030a11,0 24px 50px #000b}.gem{aspect-ratio:1;color:#fff;cursor:default;background:linear-gradient(145deg,#315368,#142a3e);border:1px solid #52758b;border-radius:7px;font-size:clamp(20px,3.1vw,35px);transition:transform .12s,filter .12s;box-shadow:inset 2px 2px #ffffff30,inset -4px -5px #03101d}.playable .gem{cursor:pointer}.playable .gem:hover{filter:brightness(1.3);transform:translateY(-2px)}.gem span{filter:drop-shadow(2px 3px #07111d)}.gem.sword{color:#ffe068;background:linear-gradient(145deg,#916a2f,#4c351d)}.gem.heart{color:#ff8195;background:linear-gradient(145deg,#873c54,#431f32)}.gem.mana{color:#6be4ff;background:linear-gradient(145deg,#27739b,#143a58)}.gem.selected{outline-offset:2px;z-index:2;outline:4px solid #fff187;transform:scale(.86)}.legend{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:11px;display:grid}.legend span{text-align:center;letter-spacing:.08em;background:#0c2134;border-top:1px solid #53798f;padding:8px 6px;font:800 12px Barlow Condensed}.legend b{margin-left:4px;display:inline-block}.legend small{color:#9db8c7;margin-top:2px;font:700 8px Manrope;display:block}.legend .sword{color:#ffe068}.legend .heart{color:#ff8195}.legend .mana{color:#6be4ff}.battle-fx,.ultimate-flash{z-index:8;pointer-events:none;position:fixed}.battle-fx{opacity:0;text-shadow:0 0 25px;font:900 70px Barlow Condensed;top:45%;left:38%}.sword-fx{color:#ffe36b;animation:1.2s ease-out swordFly}.heal-fx{color:#7effb6;animation:1.1s rise}.mana-fx{color:#70e9ff;animation:1.1s rise}.ultimate-flash{text-align:center;color:#ffe574;letter-spacing:.12em;text-shadow:0 0 30px #ed7d28;font:900 clamp(38px,7vw,88px) Barlow Condensed;animation:1s ultimate;inset:42% 0 auto}.monster-emberfox .showcase-backdrop{background:radial-gradient(circle,#ff664033,#0000 62%)}.monster-mossling .showcase-backdrop{background:radial-gradient(circle,#70ef8433,#0000 62%)}.monster-tidefin .showcase-backdrop{background:radial-gradient(circle,#59ddff33,#0000 62%)}.monster-voltwing .showcase-backdrop{background:radial-gradient(circle,#ffdb5133,#0000 62%)}.monster-stonehorn .showcase-backdrop{background:radial-gradient(circle,#d4edff2d,#0000 62%)}.monster-miubeo .showcase-backdrop{background:radial-gradient(circle,#dff4ff4d,#0000 58%),radial-gradient(circle at 70% 25%,#88d9ff30,#0000 34%)}.monster-miubeo .creature-large img,.fighter.monster-miubeo .fighter-art img{filter:drop-shadow(0 22px 10px #000c)drop-shadow(0 0 18px #bcecff55)}.monster-miubeo .creature-large img{object-fit:contain;width:54%;height:76%;padding:0}.fighter.monster-miubeo .fighter-art img{object-fit:contain;width:74%;height:78%}.roster-item[data-monster=miubeo] img{object-fit:contain;width:48px;height:62px}.roster-item[data-monster=miubeo] span{background:radial-gradient(circle,#d9efff,#70879b 75%)}@keyframes idle{0%,to{translate:0;rotate:0deg}50%{translate:0 -10px;rotate:.6deg}}@keyframes swordFly{0%{opacity:1;transform:translate(0)rotate(-30deg)}to{opacity:0;transform:translate(420px)rotate(30deg)}}@keyframes rise{0%{opacity:0;transform:translateY(25px)}30%{opacity:1}to{opacity:0;transform:translateY(-80px)}}@keyframes ultimate{0%{opacity:0;scale:.5}35%{opacity:1;scale:1.1}to{opacity:0;scale:1.5}}@media (width<=900px){.select-layout{grid-template-columns:1fr;min-height:0}.roster{border-bottom:1px solid #628ca366;border-right:0;grid-template-columns:repeat(6,1fr);padding:7px;display:grid}.roster .eyebrow{display:none}.roster-item{text-align:center;border-bottom:3px solid #0000;border-left:0;height:91px;padding:3px;display:block}.roster-item span{clip-path:none;height:56px}.roster-item img{height:62px}.roster-item b{font-size:12px}.roster-item small{display:none}.showcase{min-height:370px}.creature-large{height:92%}.loadout{border-top:1px solid #628ca366;border-left:0}.battle-stage{grid-template-columns:1fr 1fr;gap:9px}.board-zone{grid-area:2/1/auto/-1}.fighter{min-height:0;padding:9px}.fighter-art{height:165px}.fighter-name h2{font-size:24px}.meter-row{margin-top:9px}.arena-header{grid-template-columns:1fr auto}.arena-header .room-chip{display:none}.copy{font-size:9px}.select-screen{padding:16px}.monster-select{margin:0}.select-screen footer{gap:7px;font-size:8px}.legend span{font-size:10px}}.result-screen{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#04101caa;place-items:center;display:grid;position:fixed;inset:0}.result-box{text-align:center;background:linear-gradient(160deg,#123854,#091a2c);border:1px solid #9dd8e9;width:min(520px,100% - 30px);padding:42px 30px;box-shadow:0 20px 80px #000b}.result-box p{color:var(--gold);letter-spacing:.3em;margin:0;font:800 13px Barlow Condensed}.result-box h1{letter-spacing:.03em;margin:10px 0;font:900 clamp(34px,6vw,64px)/.9 Barlow Condensed}.result-box span{color:#b7d0dc;font-size:12px}.result-box button{background:var(--gold);color:#1d2630;letter-spacing:.08em;cursor:pointer;border:0;margin:25px auto 0;padding:14px 24px;font:900 15px Barlow Condensed;display:block}.match-ended .battle-stage{filter:grayscale(.3)brightness(.65)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}