/* In-game view: fixed camera, full arena, TFT-style HUD. */
.tft-slot,.inventory-item{touch-action:none;user-select:none;-webkit-user-drag:none}.dragging-piece,.dragging-piece *{cursor:grabbing!important}.drag-source>.model-hud,.drag-source>.unit-token,.drag-source>.unit-hover-name{visibility:hidden}.inventory-item.drag-source{opacity:.3}.tft-slot.drop-target{background:transparent}.tft-slot[data-area="bench"].drop-target{box-shadow:inset 0 -3px #92f5ee}.sell-zone.drop-target{background:#443919!important;border-color:#ffe493!important;box-shadow:inset 0 0 30px #e3b54e44}.drag-item-preview{position:fixed;width:40px;height:40px;transform:translate(-50%,-50%);pointer-events:none;z-index:1000;border:2px solid #f1d778;box-shadow:0 5px 15px #0009}.unit-inspector{position:absolute;z-index:55;right:16%;bottom:calc(clamp(118px,17vh,162px) + 45px);width:260px;max-width:80vw;padding:16px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#102b34f5;border:1px solid #a98b4d;box-shadow:0 8px 30px #0007;pointer-events:auto}.unit-inspector>button{position:absolute;right:4px;top:4px;padding:3px}.unit-inspector>.portrait{width:48px;height:48px}.unit-inspector>div{flex:1;min-width:0}.unit-inspector strong{display:block;color:#f0dca5;font-size:15px}.unit-inspector span{font-size:11px;color:#c6d2cc;line-height:1.6}.unit-inspector .inspect-items{flex-basis:100%;display:flex;gap:5px}.unit-inspector .inspect-items:empty{display:none}.unit-inspector small{color:#ddc386;font-size:11px}.unit-inspector kbd{margin-left:8px}.shop-card:active:not(:disabled),.refresh-btn:active:not(:disabled){filter:brightness(1.35)}
body.in-match{overflow:hidden;background:#122b35;min-width:320px;color:#f0e7cf;font-family:"Segoe UI",Pretendard,"Noto Sans KR",sans-serif}.match-screen{position:relative;width:100vw;height:100dvh;max-width:none;padding:0;margin:0;overflow:hidden;background:#486e79}.match-screen *{box-sizing:border-box}#scene-host{position:absolute;inset:0}#scene-host canvas{display:block;width:100%;height:100%}.scene-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 150px #06121d66;background:linear-gradient(0deg,#071b2a66,transparent 28%,transparent 82%,#06172455)}.match-ui,#game,.board-hitbox{position:absolute;inset:0;pointer-events:none}.match-ui button,.match-ui a{pointer-events:auto}.match-top{position:absolute;top:0;left:0;right:0;height:57px;display:flex;justify-content:space-between;padding:0 18px;align-items:flex-start;z-index:40}.match-brand{padding-top:14px;display:flex;gap:8px;align-items:center;color:#e2cf9e;letter-spacing:1.3px;text-shadow:0 1px 5px #000}.match-brand>span:last-child{font-size:11px;font-weight:600}.match-brand small{display:block;font-size:8px;font-weight:400;letter-spacing:.5px;color:#e0e3d0aa;margin-top:3px}.mini-brand{display:grid;place-items:center;border:1px solid #9d8554;border-radius:2px;background:#152c35bb;width:25px;height:25px;font-size:17px;font-weight:800;font-style:italic}.round-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:395px;height:48px;display:flex;align-items:center;gap:25px;background:linear-gradient(#183943,#0e252d);border:2px solid #a08249;border-top:0;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);padding:0 28px 4px;box-shadow:inset 0 -4px 0 #253d43,0 5px 5px #0005;color:#dccca3}.round-bar>strong{font-size:20px;letter-spacing:1px;font-weight:600}.round-events{letter-spacing:8px;color:#58716c;font-size:17px;white-space:nowrap}.round-events i{color:#e6ba52;font-style:normal}.round-timer{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}.round-timer .icon{width:15px;color:#aeb9a1}.round-timer b{font-weight:600}.round-timer.urgent{color:#f39777}.round-progress{position:absolute;bottom:2px;left:7%;right:7%;height:3px;background:#091d25}.round-progress i{display:block;background:#8cdeec;height:100%;box-shadow:0 0 7px #36d9ef70}.phase-label{position:absolute;left:50%;top:61px;transform:translateX(-50%);font-size:13px;letter-spacing:1.5px;color:#e4dfc2;text-shadow:0 2px 3px #0a2419,0 0 12px #0009;font-weight:600;z-index:10}.match-menu{margin-left:auto;display:flex;gap:4px;align-items:center;background:#0c232bcc;border:1px solid #9b854955;border-top:0;padding:7px 8px;border-radius:0 0 3px 3px}.match-menu>button{padding:5px;color:#cdbd8f;display:flex;gap:6px;align-items:center;font-size:10px}.match-menu>button:hover{color:#ffecae;background:#45677755}.match-menu .icon{width:15px;height:15px}.match-menu .lang-switch{padding:0;background:#10252c;border-color:#516056;margin-left:5px;border-radius:2px}.match-menu .lang-switch button{font-size:8px;padding:5px 6px;border-radius:0;color:#a6b3ab}.match-menu .lang-switch button.active{background:#344d4d;color:#f1d59b}.field-capacity{position:absolute;transform:translate(-50%,-50%);color:#26492c77;display:flex;align-items:center;gap:17px;text-shadow:0 2px 1px #b9ca7344;z-index:1}.field-capacity .icon{width:56px;height:56px;stroke-width:3}.field-capacity strong{font-size:70px;font-weight:750;letter-spacing:5px;font-style:italic}.traits-rail{position:absolute;top:24%;left:0;width:185px;display:flex;flex-direction:column;gap:5px;z-index:30;pointer-events:none}.trait-row{min-height:37px;display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,#091c27e0,#102832bd);border-radius:0 3px 3px 0;width:max-content;min-width:129px;max-width:185px;padding:5px 13px 5px 4px;color:#a9b6b6;border-left:2px solid #4b5b5b;box-shadow:0 2px 3px #0002}.trait-row.active{color:#f0e0b6;border-left-color:#c8ae68;background:linear-gradient(90deg,#14282eea,#15323bd6)}.trait-emblem{width:30px;height:31px;background:#3e4d50;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#192b30}.active .trait-emblem{background:linear-gradient(140deg,#efe0a2,#97743e);color:#41341c}.trait-emblem .icon{width:21px;height:21px;stroke-width:2.5}.trait-count{font-weight:700;font-size:16px}.trait-row strong{font-size:11px;font-weight:500;display:block;white-space:nowrap}.trait-row small{display:block;margin-top:3px;font-size:9px;color:#6b8185}.trait-row small b{font-weight:450}.trait-row small b.reached{color:#e9d3a2}.trait-row small span{font-size:7px;padding:0 2px;color:#678082}.tft-slot{position:absolute;display:block;padding:0;border:0;background:transparent;color:#eef3d9;cursor:default;border-radius:40%;pointer-events:auto;outline-offset:0!important}.tft-slot.occupied{cursor:grab}.tft-slot.occupied:active{cursor:grabbing}.tft-slot:hover{background:radial-gradient(ellipse at 50% 75%,#53e6ea15,transparent 60%)}.tft-slot.selected{background:radial-gradient(ellipse at 50% 75%,#e8f49318,transparent 60%)}.tft-slot .model-hud{position:absolute;left:50%;top:0;transform:translateX(-50%);width:48px;display:flex;align-items:center;flex-direction:column;pointer-events:none;filter:drop-shadow(0 1px 1px #0009)}.model-stars{height:9px;color:#e4d7a7;font-size:8px;letter-spacing:1px;text-shadow:0 1px 1px #161e20;margin-bottom:1px}.health-bar{width:45px;height:5px;background:#141d1c;border:1px solid #0b1619;position:relative;box-shadow:0 0 0 1px #7d9c6540}.health-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#82ba46 0,#82ba46 8px,#335d2d 8px,#335d2d 9px)}.mana-bar{width:43px;height:2px;background:#09232c;margin-top:1px}.mana-bar i{display:block;width:20%;height:100%;background:#63b1d4}.model-items{display:flex;gap:1px;margin-top:2px}.model-items .item-img{width:13px;height:13px;border-radius:1px;border-color:#716847}.tft-slot[data-area="bench"] .model-hud{transform:translateX(-50%) scale(.86)}.unit-hover-name{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:10px;white-space:nowrap;padding:3px 7px;background:#0b202aed;border:1px solid #97845f;opacity:0;pointer-events:none;z-index:70}.tft-slot:hover .unit-hover-name{opacity:1}.tft-slot .slot-number{bottom:0;color:#a6ffff;font-size:8px;text-shadow:0 1px 2px #000}.target-ghost{opacity:.18;filter:grayscale(1);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.target-ghost .portrait{width:29px;height:29px;border-radius:50%;border:0}.ground-items{position:absolute;left:3.6%;bottom:20%;z-index:30;width:118px;padding:6px;pointer-events:none}.ground-items>span{font-size:8px;letter-spacing:1px;color:#e5dfb4bb;text-shadow:0 1px 2px #000;display:block;margin-bottom:6px}.ground-items .inventory-items{display:grid;grid-template-columns:repeat(3,31px);gap:4px}.ground-items .item-img{width:30px;height:30px;border:1px solid #9e8c53;border-radius:0;box-shadow:0 2px 4px #0007}.ground-items .inventory-item{pointer-events:auto}.ground-items .inventory-item.selected{outline-color:#f7d578;border-radius:0}.empty-item-slot{width:30px;height:30px;border:1px solid #b3a47c50;display:grid;place-items:center;color:#ddc78660;font-size:15px;background:#1e373044}.match-status{position:absolute;bottom:calc(clamp(118px,17vh,162px) + 20px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:#d7d8bc;font-size:9px;text-shadow:0 1px 3px #000;background:#142d2980;padding:5px 10px;white-space:nowrap;z-index:20}.match-status>span{opacity:.7}.match-status>button{display:flex;align-items:center;gap:5px;color:#c2cdb7;font-size:9px;padding:0}.match-status>button .icon{width:11px;height:11px}.tft-shop{position:absolute;bottom:5px;left:max(13.2%, calc(50% - 590px));right:max(13.2%, calc(50% - 590px));height:clamp(118px,17vh,162px);background:#0e222c;border:2px solid #9b8956;box-shadow:0 0 0 2px #142731,0 3px 13px #0009,inset 0 0 0 2px #365157;border-radius:0;z-index:50;pointer-events:auto;padding:3px}.shop-topline{height:29px;position:relative;display:flex;align-items:center;border-bottom:1px solid #536764;margin:0 2px 4px;gap:12px;padding:0 4px;background:#10272e}.xp-indicator{height:100%;min-width:136px;display:flex;align-items:center;gap:12px;position:relative}.xp-indicator strong{font-size:13px;color:#eadfb6;font-weight:650}.xp-indicator>span{font-size:8px;color:#9cb7b5}.xp-indicator>i{position:absolute;bottom:0;left:0;height:2px;width:10%;background:#83e4ec;box-shadow:0 0 5px #82e4ec}.drill-indicator{font-size:8px;color:#9eaea6;letter-spacing:.7px}.drill-indicator b{margin-left:6px;color:#d4d2ae;font-size:9px;font-weight:400}.gold-counter{position:absolute;left:50%;transform:translateX(-50%);bottom:0;min-width:96px;height:35px;display:flex;align-items:center;justify-content:center;gap:8px;color:#f0dda2;background:linear-gradient(#233b40,#122a33);border:2px solid #917b43;border-bottom:0;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);padding-top:5px}.gold-counter .icon{width:15px;height:15px}.gold-counter strong{font-size:17px;font-weight:600}.shop-lock{margin-left:auto;width:28px;height:25px;color:#c2ba8a;border:1px solid #60716a;background:#0b1d26;line-height:1;font-size:21px}.shop-lock.locked{color:#f7cd6c;border-color:#c6a464}.shop-bottom{display:flex;gap:5px;height:calc(100% - 34px)}.shop-buttons{width:16.2%;display:flex;flex-direction:column;gap:5px;flex-shrink:0}.shop-buttons>button{height:50%;border:1px solid #7b8069;border-radius:0;display:flex;justify-content:space-between;align-items:center;padding:5px 9px;background:linear-gradient(100deg,#133141,#1d3945);text-align:left;color:#e9e1bd;box-shadow:inset 0 0 0 2px #12202b}.shop-buttons .xp-btn{background:linear-gradient(115deg,#173949,#123d52)}.xp-btn>span{font-size:13px;font-weight:600}.xp-btn small{display:block;font-size:8px;font-weight:400;margin-top:3px;color:#95b9c7}.xp-btn>b{font-size:36px;line-height:.4;transform:translateY(6px);font-weight:900;color:#3599c5;text-shadow:0 3px #163f51}.shop-buttons .refresh-btn{background:linear-gradient(115deg,#253b39,#3c3b23);font-size:12px;font-weight:600;gap:4px}.shop-buttons .refresh-btn>span{color:inherit;font-size:12px;margin:0}.refresh-btn small{display:block;font-size:10px;color:#e1d79f;margin-top:3px}.shop-buttons .refresh-btn>.icon{width:27px;height:27px;stroke-width:3;color:#b29b4c}.shop-buttons kbd{background:none;border:0;font-size:8px;color:#c8c3a2;padding:0 0 0 2px}.shop-buttons>button:disabled{opacity:.7}.tft-shop .shop-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:5px;min-width:0}.tft-shop .shop-card{height:100%;min-height:0;border:1px solid var(--cost,#4c6465);border-radius:0;padding:0;background:#0b1d29;isolation:isolate}.tft-shop .shop-card:disabled{opacity:1}.tft-shop .shop-card:hover:not(:disabled){transform:none;box-shadow:inset 0 0 0 1px #fcdf8b;border-color:#ffe699}.tft-shop .shop-art{object-fit:cover;object-position:50% 50%;height:100%;z-index:-2}.tft-shop .shop-shade{background:linear-gradient(0deg,#08242ee6,transparent 80%)}.shop-traits{position:absolute;left:5px;right:3px;bottom:26px;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 3px #000,0 0 2px #000}.shop-traits>span{display:flex;align-items:center;gap:4px;font-size:9px;color:#f0e9d6;line-height:1.3}.shop-traits .icon{width:11px;height:11px;stroke-width:2.5}.champion-bottom{position:absolute;bottom:0;left:0;right:0;height:23px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:var(--cost,#395c64);background:color-mix(in srgb,var(--cost) 55%,#061c29);border-top:1px solid #cde5e444}.champion-bottom strong{font-size:12px;font-weight:550;white-space:nowrap;text-shadow:0 1px 2px #0008;color:#f8f1d4}.champion-bottom b{font-size:11px;white-space:nowrap;font-weight:600;color:#e6d9a6}.tft-shop .bought{background:#0a202b;border:1px solid #294754}.tft-shop .sell-zone{position:absolute;top:31px;left:0;right:0;width:100%;bottom:0;display:none;z-index:60;border:1px solid #d0b569;border-radius:0;background:#122934f2;align-items:center;justify-content:center;gap:12px;color:#eed8a1;font-size:20px;letter-spacing:1px}.tft-shop .sell-zone.visible{display:flex}.sell-zone.visible:not(:hover){opacity:.95}.tft-shop .sell-zone kbd{display:block}.target-rail{position:absolute;top:16%;right:9px;width:181px;z-index:30;color:#e9dfbc;pointer-events:none}.target-rail .target-heading{text-align:right;margin-bottom:12px;padding-right:6px}.target-rail .target-heading .eyebrow{justify-content:flex-end;font-size:8px;letter-spacing:.6px;color:#e9dbaa}.target-rail .target-heading h2{font-size:12px;margin:5px 0;font-weight:600;text-shadow:0 1px 3px #000}.target-rail .target-heading a{justify-content:flex-end;font-size:8px;color:#cad3bd}.target-rail .target-minimap,.target-rail .layout-note{display:none}.target-rail .target-list{gap:8px}.target-rail .target-unit{min-height:43px;padding:3px 5px 3px 9px;border:0;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#0e2838bb,#102b37dd);gap:6px;box-shadow:0 1px 3px #0003;position:relative}.target-rail .target-unit>.portrait{order:4;width:39px;height:39px;border-radius:50%;border:2px solid #9a874d;box-shadow:0 0 0 2px #182f3a,0 0 0 3px #685c37}.target-rail .target-unit-name{order:1;text-align:right}.target-rail .target-unit-name strong{justify-content:flex-end;gap:4px;font-size:10px;font-weight:500;color:#e3e0c5}.target-rail .target-unit-name small{font-size:8px;color:#95a9a6}.target-rail .target-unit-name strong>span{font-size:7px;color:#d9c48f}.target-rail .target-items{position:absolute;right:51px;bottom:3px;max-width:none}.target-rail .target-unit:has(.target-items img) .target-unit-name small{visibility:hidden}.target-rail .target-items img{width:12px;height:12px;border-radius:0}.target-rail .target-check{order:3;width:9px;font-size:12px;color:#85a99f}.target-rail .done>.portrait{border-color:#8eccc1;box-shadow:0 0 0 2px #183536,0 0 0 3px #6ca396}.target-rail .target-unit.done .target-check{color:#9ed8c3}.target-rail .progress-box{margin:14px 0 0 auto;padding:9px 10px;width:172px;border-radius:0;border:1px solid #8d81564d;background:#102c34d9}.target-rail .progress-box>div:first-child strong{font-size:9px;color:#d5d5bc}.target-rail .progress-box>div:first-child b{font-size:17px;color:#ddc783}.target-rail .progress-track{margin:8px 0;background:#365450;height:3px}.target-rail .progress-track i{background:#bda45a}.target-rail .progress-grid{gap:5px 10px}.target-rail .progress-grid span,.target-rail .progress-grid b{font-size:8px;color:#b3c4b6}.target-rail .progress-box>small{font-size:7px}.target-rail .rules-link{justify-content:flex-end;font-size:8px;color:#cbcfb8;padding:9px 5px}.target-rail .rules-link .icon:last-child{margin-left:0}.match-ready{position:absolute;left:50%;top:25%;transform:translateX(-50%);width:310px;padding:14px 20px 15px;border:1px solid #b99f59;background:linear-gradient(#14313adf,#0c222ade);box-shadow:0 5px 25px #08231755,inset 0 0 0 3px #2e4848;z-index:35;text-align:center;pointer-events:auto}.ready-comp{font-size:14px;color:#efdeb0;text-shadow:0 1px 2px #000}.ready-modes{display:flex;justify-content:center;gap:15px;margin:12px 0 0}.ready-modes>button{font-size:10px;color:#9eafaa;padding:3px 0;border-bottom:1px solid transparent}.ready-modes>button.active{color:#efd596;border-bottom-color:#c6a964}.match-ready .start-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(#2c6370,#1b454f);color:#e8dfba;border:1px solid #b4984c;box-shadow:inset 0 0 0 2px #11333c;margin:12px auto 9px;padding:11px 15px;border-radius:0;min-width:230px;font-size:13px;font-weight:600;letter-spacing:.5px}.match-ready .start-btn:hover{background:linear-gradient(#428593,#245a66);color:#ffecb4}.match-ready .start-btn kbd{font-size:7px;color:#bdc6ab;border-color:#647f7866;background:#172e32;margin-left:3px}.match-ready>small{font-size:8px;line-height:1.5;color:#a9b7aa;display:block}.help-corner{position:absolute;bottom:10px;left:12px;font-size:9px;color:#cfcdadaa;z-index:45;text-shadow:0 1px 2px #000;padding:5px}.help-corner .icon{width:11px;height:11px}.render-error{position:absolute;top:40%;left:20%;right:20%;text-align:center;line-height:1.8;background:#112c37ed;padding:20px;color:#efdab0}.in-match .modal-backdrop{background:#071925b8}.in-match .modal{background:#102933;border-color:#9b8653;border-radius:2px;color:#e7ddb9}.in-match .modal .primary{background:#326875;color:#efdfa6;border:1px solid #ba9e54;border-radius:1px}.in-match .modal .secondary{border-color:#8b7d51;border-radius:1px}.comp-modal{width:940px}.comp-modal .library{padding:0;border:0;background:none}.comp-modal .library>.panel-title,.comp-modal .library-source{display:none}.comp-modal #comp-list{height:55vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-content:start;padding:2px 8px 5px 0;overflow-y:auto;overflow-x:hidden}.comp-modal .comp-card{width:100%;border:1px solid #35515a;background:#142e35;padding:13px;min-width:0}.comp-modal .comp-card.selected{border-color:#b5a061;background:#274542}.comp-modal .comp-card-title strong{font-size:12px}.comp-modal .comp-portraits .portrait{width:25px;height:27px}.comp-modal .search-box{margin-left:0;margin-right:0;border-color:#45616a;background:#10212a}.comp-modal .library-filter{padding-left:0;padding-right:0}.in-match #toast{border-color:#ad965f;background:#14313d;color:#eadfbd;border-radius:2px}.in-match #modal-root .eyebrow{color:#c6ad70}.in-match .modal p{color:#b7c8c9}.in-match .guide-keys{background:#0c202b}.in-match .modal h3{color:#dec68c}.in-match .result-score strong{color:#ead092}
@media(min-width:1700px){.target-rail{right:14px;width:205px}.target-rail .target-unit{min-height:51px}.target-rail .target-unit>.portrait{width:45px;height:45px}.target-rail .target-unit-name strong{font-size:12px}.target-rail .target-items{right:59px}.target-rail .target-unit-name small{font-size:9px}.target-rail .target-items img{width:15px;height:15px}.traits-rail{width:205px}.trait-row{max-width:205px;min-height:43px}.trait-row strong{font-size:13px}.trait-row small{font-size:10px}.trait-emblem{width:35px;height:37px}.trait-count{font-size:18px}.target-rail .progress-box{width:196px}.target-rail .target-heading h2{font-size:14px}}
@media(max-width:1100px){.match-brand{display:none}.round-bar{width:305px;gap:16px;height:41px;padding:0 23px 4px}.round-bar>strong{font-size:16px}.round-events{font-size:13px;letter-spacing:5px}.round-timer{font-size:12px;gap:5px}.match-menu>button>span{display:none}.match-menu>button{padding:4px}.match-menu .icon{width:12px;height:12px}.phase-label{top:51px;font-size:11px}.target-rail{right:5px;width:139px}.target-rail .target-unit{min-height:35px;padding:2px 4px;gap:4px}.target-rail .target-unit>.portrait{width:30px;height:30px}.target-rail .target-unit-name strong{font-size:9px}.target-rail .target-list{gap:7px}.target-rail .target-unit-name small{font-size:7px}.target-rail .target-check{width:8px}.target-rail .target-items{right:42px}.target-rail .target-items img{width:10px;height:10px}.target-rail .target-heading h2{font-size:10px}.target-rail .progress-box{width:135px;padding:7px}.target-rail .progress-grid{gap:4px 7px}.target-rail .progress-grid span,.target-rail .progress-grid b{font-size:7px}.target-rail .progress-box>div:first-child strong{font-size:8px}.traits-rail{width:145px}.trait-row{min-height:31px;min-width:112px;max-width:145px;gap:6px;padding:3px 8px 3px 2px}.trait-emblem{width:24px;height:27px}.trait-emblem .icon{width:16px;height:16px}.trait-row strong{font-size:9px}.trait-row small{font-size:7px;margin-top:2px}.trait-count{font-size:13px}.tft-shop{left:11%;right:11%;height:125px}.shop-topline{height:23px;margin-bottom:3px}.shop-bottom{height:calc(100% - 26px)}.shop-buttons{width:16%}.shop-buttons>button{padding:4px 7px}.xp-btn>span{font-size:11px}.shop-buttons .refresh-btn>span{font-size:10px}.shop-buttons .refresh-btn>.icon{width:22px;height:22px}.champion-bottom{height:20px;padding:0 4px}.champion-bottom strong{font-size:10px}.champion-bottom b{font-size:9px}.shop-traits{bottom:23px;left:4px}.shop-traits>span{font-size:8px;gap:3px}.shop-traits .icon{width:9px;height:9px}.xp-indicator{min-width:111px;gap:9px}.xp-indicator strong{font-size:11px}.xp-indicator>span{font-size:7px}.drill-indicator{font-size:7px}.gold-counter{height:30px;min-width:81px}.gold-counter strong{font-size:14px}.shop-lock{height:20px;width:23px;font-size:18px}.match-status{bottom:145px;font-size:8px;gap:9px}.ground-items{left:2%;width:93px}.ground-items .inventory-items{grid-template-columns:repeat(3,25px);gap:3px}.ground-items .item-img{width:25px;height:25px}.ground-items>span{font-size:7px}.field-capacity strong{font-size:57px}.field-capacity .icon{width:42px;height:42px}.match-ready{top:23%;width:277px;padding:11px 13px}.ready-comp{font-size:12px}.match-ready .start-btn{font-size:12px;padding:9px 12px;margin-top:10px;min-width:210px}.match-ready>small{font-size:7px}.ready-modes{margin-top:8px}.ready-modes>button{font-size:9px}.model-hud{scale:.85}}
@media(max-height:650px) and (min-width:651px){.traits-rail{top:22%;gap:3px}.trait-row{min-height:26px;padding-top:2px;padding-bottom:2px}.trait-emblem{height:23px;width:23px}.trait-row strong{font-size:9px}.trait-row small{font-size:6px}.target-rail{top:14%}.target-rail .target-heading{margin-bottom:7px}.target-rail .target-list{gap:4px}.target-rail .target-unit{min-height:28px}.target-rail .target-unit>.portrait{width:26px;height:26px}.target-rail .target-unit-name strong{font-size:8px}.target-rail .target-unit-name small{font-size:6px}.target-rail .progress-box{margin-top:8px}.target-rail .progress-grid,.target-rail .progress-box>small{display:none}.target-rail .progress-track{margin:5px 0 0}.target-rail .rules-link{font-size:7px;padding-top:5px}.tft-shop{height:104px;left:max(15%, calc(50% - 590px));right:max(15%, calc(50% - 590px))}.shop-traits>span{font-size:7px}.shop-traits .icon{width:8px;height:8px}.shop-traits{gap:1px;bottom:20px}.champion-bottom{height:18px}.champion-bottom strong{font-size:9px}.xp-btn>span{font-size:9px}.xp-btn small{font-size:6px}.xp-btn>b{font-size:25px}.shop-buttons .refresh-btn>span{font-size:9px}.shop-buttons .refresh-btn>.icon{width:18px;height:18px}.refresh-btn small{font-size:8px;margin-top:1px}.match-status{bottom:119px}.round-bar{height:35px}.phase-label{top:43px;font-size:9px}.match-ready{top:18%;padding:9px 12px}.match-ready .start-btn{padding:8px 12px;margin-top:8px;margin-bottom:5px}.ready-modes{margin-top:5px}.match-ready>small{font-size:7px}}
@media(max-width:650px){.match-screen{min-height:0}.match-top{height:65px;padding:0 5px}.round-bar{top:0;left:5px;transform:none;width:210px;height:34px;padding:0 15px 4px;gap:12px}.round-events{font-size:10px;letter-spacing:3px}.round-bar>strong{font-size:14px}.round-timer{font-size:10px;gap:3px}.round-timer .icon{width:11px}.match-menu{padding:4px 3px;gap:1px}.match-menu>button{padding:3px}.match-menu>button[data-action="fullscreen"]{display:none}.match-menu>button .icon{width:12px;height:12px}.match-menu .lang-switch{margin-left:2px}.match-menu .lang-switch button{font-size:7px;padding:4px}.phase-label{top:45px;font-size:10px}.traits-rail{top:20%;width:87px;gap:4px}.trait-row{width:87px;max-width:87px;min-width:0;padding:3px 4px 3px 1px;gap:3px;min-height:27px}.trait-emblem{width:19px;height:22px;flex-shrink:0}.trait-emblem .icon{width:13px;height:13px}.trait-row strong{font-size:7px;max-width:45px;white-space:normal;line-height:1.2}.trait-count{font-size:10px}.trait-row small{font-size:6px}.trait-row small span{padding:0 1px}.target-rail{top:18%;right:3px;width:83px}.target-rail .target-heading .eyebrow{font-size:6px}.target-rail .target-heading{padding-right:2px;margin-bottom:8px}.target-rail .target-heading h2{font-size:8px;line-height:1.4}.target-rail .target-heading a{font-size:6px}.target-rail .target-heading a .icon{width:7px;height:7px}.target-rail .target-list{gap:6px}.target-rail .target-unit{min-height:26px;padding:2px 3px;gap:3px}.target-rail .target-unit>.portrait{width:23px;height:23px;border-width:1px}.target-rail .target-unit-name strong{font-size:7px;gap:1px;line-height:1.3}.target-rail .target-unit-name strong>span{font-size:5px;letter-spacing:0}.target-rail .target-unit-name small{font-size:5px}.target-rail .target-check{display:none}.target-rail .target-items{right:29px;bottom:1px;gap:0}.target-rail .target-items img{width:7px;height:7px}.target-rail .progress-box{width:83px;padding:6px 5px;margin-top:10px}.target-rail .progress-box>div:first-child{gap:2px}.target-rail .progress-box>div:first-child strong{font-size:6px;line-height:1.3}.target-rail .progress-box>div:first-child b{font-size:12px}.target-rail .progress-box b small{font-size:6px}.target-rail .progress-track{margin:5px 0 0}.target-rail .progress-grid,.target-rail .progress-box>small,.target-rail .rules-link{display:none}.field-capacity strong{font-size:29px;letter-spacing:2px}.field-capacity .icon{width:25px;height:25px}.field-capacity{gap:6px}.tft-shop{left:3px;right:3px;bottom:4px;height:116px;border-width:1px;padding:2px}.shop-topline{height:25px}.shop-bottom{height:calc(100% - 29px);gap:3px}.shop-buttons{width:64px;gap:3px}.shop-buttons>button{padding:4px;box-shadow:none}.xp-btn>span{font-size:9px}.xp-btn>b{font-size:23px}.xp-btn small{font-size:6px}.shop-buttons .refresh-btn>span{font-size:8px}.shop-buttons .refresh-btn>.icon{width:17px;height:17px}.shop-buttons kbd{font-size:6px}.refresh-btn small{font-size:8px;margin-top:2px}.tft-shop .shop-cards{gap:3px}.shop-traits{bottom:20px;left:3px;right:1px;gap:1px}.shop-traits>span{font-size:6px;gap:2px;line-height:1.35}.shop-traits .icon{width:7px;height:7px}.champion-bottom{height:18px;padding:0 2px;gap:1px}.champion-bottom strong{font-size:7px;letter-spacing:-.3px}.champion-bottom b{font-size:7px}.xp-indicator{min-width:62px;gap:4px}.xp-indicator strong{font-size:10px}.xp-indicator>span{display:none}.drill-indicator{font-size:6px;letter-spacing:0}.drill-indicator b{font-size:7px;margin-left:3px}.gold-counter{left:56%;height:29px;min-width:72px;gap:5px}.gold-counter strong{font-size:14px}.gold-counter .icon{width:12px}.shop-lock{height:20px}.match-status{bottom:132px;gap:8px;padding:5px 8px;font-size:7px;max-width:100%}.match-status>span{display:none}.match-status>button{font-size:8px}.ground-items{left:6px;bottom:155px;width:105px}.ground-items .inventory-items{grid-template-columns:repeat(3,25px)}.ground-items>span{font-size:7px}.ground-items .item-img{width:25px;height:25px}.match-ready{top:13%;width:210px;padding:10px 12px}.ready-comp{font-size:11px}.ready-modes{gap:12px;margin-top:7px}.ready-modes>button{font-size:8px}.match-ready .start-btn{min-width:180px;padding:9px 11px;font-size:11px;margin:9px auto 7px;gap:5px}.match-ready .start-btn kbd{font-size:6px}.match-ready>small{font-size:7px;line-height:1.6}.help-corner{left:auto;right:8px;bottom:128px;font-size:7px;padding:3px}.help-corner .icon{width:9px;height:9px}.tft-slot .model-hud{width:31px;scale:1}.health-bar{width:28px;height:4px}.mana-bar{width:26px;height:1px}.model-stars{font-size:6px;height:7px}.model-items .item-img{width:8px;height:8px}.unit-hover-name{font-size:8px;padding:2px 4px;bottom:-10px}.target-ghost .portrait{width:18px;height:18px}.tft-slot .slot-number{font-size:6px}.comp-modal #comp-list{display:grid;grid-template-columns:1fr;gap:8px;max-height:55vh;overflow-y:auto;overflow-x:hidden}.comp-modal .comp-card{width:100%;padding:12px}.comp-modal .comp-portraits .portrait{width:25px;height:27px}.comp-modal .comp-card-title strong{font-size:12px}.comp-modal .library{overflow:visible}.comp-modal .search-box{margin:12px 0}}

/* Square-only units keep their full portrait instead of filling a wide card. */
.tft-shop .shop-art-portrait{object-fit:contain;height:calc(100% - 23px)}

.shop-odds{display:inline-flex;gap:7px}.shop-odds>span{color:var(--cost);font-size:10px;font-weight:600}.drill-indicator{display:flex;align-items:center}.xp-indicator{min-width:136px}.xp-indicator>span{font-variant-numeric:tabular-nums}
@media(max-width:1100px){.shop-odds{gap:4px}.shop-odds>span{font-size:8px}.xp-indicator{min-width:105px}}
@media(max-width:650px){.shop-odds{gap:3px}.shop-odds>span{font-size:7px}.xp-indicator{min-width:52px}.shop-topline{gap:5px}.gold-counter{left:75%}.xp-btn>span{font-size:8px}.xp-indicator>span{display:none}}

/* Planner emblem and silver upgrade stars, matching the in-game shop. */
.shop-target-badge{position:absolute;top:0;left:7px;width:25px;height:28px;padding:3px;background:linear-gradient(#487c66,#244b3f);border:1px solid #8baa80;border-top:0;border-radius:0 0 4px 4px;color:#e1efd0;box-shadow:0 1px 3px #0009;pointer-events:none}
.shop-target-badge svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1;stroke-linejoin:round}
.shop-upgrade-badge{position:absolute;top:0;left:6px;display:flex;color:#e6f8ff;filter:drop-shadow(0 0 3px #c4e8ff);pointer-events:none;line-height:1}
.shop-target-badge+.shop-upgrade-badge{left:38px}
.shop-upgrade-badge b{font-size:21px;letter-spacing:0}
.tft-shop .shop-card.shop-can-upgrade{border-color:#d9f1ff;box-shadow:inset 0 0 0 1px #d6eeff,inset 0 0 15px #b3ddff65,0 0 5px #c4e8ff80}
.unit-upgrade-flash{position:absolute;inset:-8px -6px -3px;pointer-events:none;border:2px solid currentColor;border-radius:14px;color:#d4f4ff;box-shadow:0 0 16px currentColor,inset 0 0 14px #d4f4ff60;animation:unit-upgrade 1600ms ease-out both;z-index:4}
.unit-upgrade-flash.star-3{color:#ffe399}
.unit-upgrade-flash b{position:absolute;top:-25px;left:50%;transform:translateX(-50%);font-size:23px;letter-spacing:2px;text-shadow:0 0 9px currentColor;white-space:nowrap}
@keyframes unit-upgrade{0%{opacity:0;transform:scale(.85)}12%{opacity:1;transform:scale(1.05)}30%{opacity:1;transform:scale(1)}65%{opacity:.85}100%{opacity:0;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.unit-upgrade-flash{animation-name:unit-upgrade-fade}@keyframes unit-upgrade-fade{0%,65%{opacity:1}100%{opacity:0}}}
@media(max-width:1100px){.shop-target-badge{left:4px;width:21px;height:24px}.shop-upgrade-badge{left:4px}.shop-upgrade-badge b{font-size:18px}.shop-target-badge+.shop-upgrade-badge{left:29px}}
@media(max-width:650px){.shop-target-badge{left:2px;width:15px;height:19px;padding:2px}.shop-upgrade-badge{left:2px;top:1px}.shop-upgrade-badge b{font-size:11px}.shop-target-badge+.shop-upgrade-badge{left:19px}.unit-upgrade-flash{inset:-5px -2px -2px;border-radius:8px}.unit-upgrade-flash b{font-size:15px;top:-18px}}

.asset-status{display:flex;flex-direction:column;gap:5px;margin-top:10px;text-align:center;color:#d6e8e8;font-size:11px}.asset-status progress{width:100%;height:5px;accent-color:#83daca}.asset-status small{font-size:9px;line-height:1.4;color:#c3cecb}.asset-status button{padding:5px;border:1px solid #b69d60;color:#f0dfb2;background:#17323c}.match-ready .start-btn:disabled{opacity:.45;cursor:wait;filter:saturate(.3)}
@media(max-width:650px){.asset-status{font-size:9px;gap:4px;margin-top:7px}.asset-status small{font-size:7px}}