@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#e9eadc;background:#111e20}*{box-sizing:border-box}body{margin:0;overflow:hidden}header{height:86px;background:#152527;border-bottom:1px solid #b9a26b40;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:20px}.brand{display:flex;gap:14px;align-items:center}.crest{font-size:40px;color:#d3b879}.brand small,.eyebrow,.map-title small{letter-spacing:2px;font-size:10px;color:#c9b77c}h1{font-family:Cinzel,serif;font-size:23px;margin:5px 0}h1 em{font-style:normal;font-size:15px;font-weight:500;margin-left:8px;color:#bfc8b7}button{font:inherit;border:1px solid #79897955;border-radius:7px;background:#243638;color:#e7e6d7;padding:9px 12px;cursor:pointer}button:hover{background:#354b48;border-color:#cfb777}button:focus-visible{outline:2px solid #eed080}.actions{display:flex;gap:7px}#score{font-size:13px;text-align:center;color:#c8d2c2}#score b{font-size:22px;color:#ecead9;margin:0 12px}main{display:flex;height:calc(100vh - 86px)}aside{width:252px;flex-shrink:0;background:#172729;padding:24px 18px;border-right:1px solid #a6b48322;overflow:auto}h2{font-family:Cinzel,serif;font-size:18px;margin:10px 0}aside p{font-size:12px;line-height:1.8;color:#a5b7ac;margin:5px 0 19px}.pick{width:100%;display:flex;gap:12px;align-items:center;text-align:left;margin:8px 0;padding:10px}.pick.active{border-color:#d5be7b;background:#3c4435}.portrait{font-size:30px;width:38px;text-align:center}.pick strong{display:block;font-size:13px}.pick small{display:block;color:#a5b7ac;font-size:10px;margin-top:4px}.wide{width:100%;margin:10px 0;font-size:12px}.guide{border-top:1px solid #ffffff15;margin-top:16px;padding-top:9px}.guide h3{font-size:12px;color:#d4be88}#feed{font-size:11px;color:#afc3b7;line-height:1.6}.arena{position:relative;flex:1;min-width:0;overflow:hidden;background:#36544c}#game{width:100%;height:100%;display:block}.map-title{position:absolute;top:20px;left:24px;pointer-events:none;text-shadow:0 2px 5px #000}.map-title span{display:block;font-family:Cinzel,serif;font-size:13px;margin-top:6px;color:#e3e2ce}#status{position:absolute;top:22px;right:22px;background:#162d29c9;border:1px solid #a5be7b55;border-radius:8px;padding:10px 14px;font-size:12px;max-width:290px}.bottom{position:absolute;bottom:16px;left:20px;right:20px;display:flex;align-items:end;justify-content:center;gap:12px;pointer-events:none}#champion,#abilities{background:#152a2ce8;border:1px solid #bba77177;border-radius:10px;padding:12px;pointer-events:auto}#champion{width:190px;font-size:12px}#champion strong{font-family:Cinzel,serif;font-size:17px;display:block;margin-bottom:7px}.health{height:7px;border-radius:4px;background:#522e2d;margin:9px 0}.health i{display:block;background:#80cfa1;height:100%;border-radius:4px}#abilities{display:flex;gap:8px}.ability{width:71px;height:75px;position:relative;padding:7px;font-size:10px;text-align:center;background:#30443e}.ability b{display:block;color:#e3c887;font-size:19px;margin-bottom:5px}.ability .cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#102325df;font-size:24px;border-radius:7px}#minimap{border:2px solid #baa86e;border-radius:8px;background:#294a3e;pointer-events:auto;cursor:pointer}@media(max-width:1000px){aside{width:205px;padding:18px 12px}h1 em{display:none}#champion{width:150px}.ability{width:55px}#minimap{width:135px;height:105px}}@media(max-width:700px){aside{width:150px}.guide{display:none}header{padding:0 10px}.brand small{display:none}h1{font-size:18px}.actions button{padding:7px;font-size:10px}#champion{display:none}#minimap{display:none}.bottom{left:5px;right:5px}.pick{padding:6px;gap:4px}.portrait{font-size:22px}#status{max-width:180px;font-size:10px}.map-title{display:none}}
/* Gameplay first: the battlefield occupies the full window. */
header{height:58px;background:#101c22f5;padding:0 20px;position:relative;z-index:5}.crest{font-size:28px}h1{font-size:18px;margin:2px 0}h1 em{font-size:12px}.brand small{font-size:8px}main{height:calc(100vh - 58px)}aside{display:none;position:absolute;left:12px;top:70px;bottom:140px;width:250px;z-index:8;border:1px solid #bda06d80;border-radius:10px;box-shadow:0 10px 40px #0009;background:#102226f5}body.roster-open aside{display:block}.arena{width:100%}.map-title{top:18px;left:20px}.map-title span{font-size:12px}#status{top:16px;right:20px;font-size:11px;background:#102228cc}.bottom{bottom:8px;left:12px;right:12px;gap:8px;align-items:end}#champion{width:240px;border-radius:4px;background:#0c1b25f2}#abilities{border-radius:4px;background:#0c1b25f2;padding:8px}.ability{width:78px;height:76px;border-radius:3px;background:linear-gradient(145deg,#465858,#1e3038);border:1px solid #a48d61}.ability b{font-size:15px}.ability small{display:block;color:#8fc8e6;font-size:9px;margin-top:5px}#minimap{position:absolute;right:0;bottom:0;width:188px;height:188px;border-radius:3px;background:#173e30}#hint{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:#12262ad9;border:1px solid #b9aa6c60;color:#e5d6b4;padding:9px 20px;border-radius:4px;font-size:12px;pointer-events:none;white-space:nowrap}#target{position:absolute;left:20px;top:78px;padding:10px 14px;min-width:170px;background:#12242de8;border:1px solid #b8a07655;border-radius:4px;font-size:12px;pointer-events:none}#target:empty{display:none}#shop{position:absolute;bottom:8px;left:12px;font-size:11px;z-index:3;background:#152c32}.mana{height:5px;background:#172d41;margin:5px 0}.mana i{display:block;height:100%;background:#62b4df}.xp{height:3px;background:#594664;margin-top:7px}.xp i{display:block;background:#bc93e7;height:100%}#score{font-size:10px}#score b{font-size:18px}#game{cursor:crosshair}.shop-panel{position:absolute;left:20px;bottom:145px;width:290px;z-index:10;background:#0d2229f5;border:1px solid #baa371;padding:20px;box-shadow:0 12px 50px #0009;border-radius:8px}.shop-panel button{display:block;width:100%;margin-top:12px;text-align:left}.shop-panel p{font-size:12px;color:#b0c9bb}.shop-panel h3{font-family:Cinzel;margin:0;color:#e7ca88}@media(max-width:900px){#champion{width:180px}.ability{width:60px}#minimap{width:135px;height:135px}.bottom{justify-content:flex-start;padding-left:75px}#hint{font-size:10px;max-width:90%;white-space:normal}.brand small{display:none}#score{display:none}}
/* Fit the existing controls on narrow screens without changing their behavior. */
@media(max-width:360px){header{padding:0 8px;gap:8px}.brand{gap:6px}.crest{font-size:22px}.actions{gap:4px}.actions button{padding:6px 5px;font-size:9px}}
@media(max-width:700px){.bottom{justify-content:center;padding-left:0}.ability{min-width:0;width:clamp(48px,15vw,60px)}#abilities{gap:6px;padding:6px}#shop{bottom:100px}}
@media(max-height:600px){.shop-panel{top:8px;bottom:auto;max-height:calc(100% - 54px);overflow:auto}}
@media(max-height:600px) and (max-width:700px){.shop-panel{max-height:calc(100% - 146px)}}

/* Minion 3D projection layer; existing controls remain above it. */
.minion-layer{position:absolute;inset:0;pointer-events:none;z-index:1}.arena>.map-title,.arena>#status,.arena>#hint,.arena>#target,.arena>.bottom{z-index:2}.minion-link{color:#e5cc91;font-size:12px;align-self:center;text-decoration:none;padding:8px;border:1px solid #79897955;border-radius:6px}@media(max-width:600px){.minion-link{font-size:10px;padding:5px}}

#duel-rival{position:absolute;z-index:2;top:110px;right:20px;background:#102228df;border:1px solid #c58c7355;border-radius:5px;padding:10px 14px;font-size:12px;color:#f0b39b}#duel-result{position:absolute;z-index:9;left:50%;top:35%;transform:translateX(-50%);width:min(440px,90%);padding:28px;text-align:center;background:#102323f5;border:1px solid #d0b478;border-radius:10px;box-shadow:0 10px 60px #0009}#duel-result[hidden]{display:none}#duel-result small{color:#d7bc79;letter-spacing:2px;font-size:10px}#duel-result h2{font-size:28px}#duel-result p{font-size:13px;color:#bacebd;line-height:1.6}#duel-result button{margin:8px 4px}@media(max-width:600px){#duel-rival{top:115px;right:8px;font-size:10px;padding:6px}}

.conqueror-demo aside .minion-link{display:block;margin:8px 0}

@media(max-width:600px){.conqueror-demo #status{top:8px;right:8px;font-size:10px;padding:6px}.conqueror-demo #hint{top:44px;font-size:10px}.conqueror-demo #duel-rival{top:91px}.conqueror-demo #target{display:none}}