/* Painted Asa-inspired skin. Live values and hit targets remain HTML elements. */
.hud{--hud-gold:#c4b17b}
.scoreboard,.top-player-panel,.objective,.minimap-wrap,.match-chat.chat-box{
  background:none;
  border-image:url('./assets/ui/asa/panel.png') 80 fill / 10px / 0 stretch;
  filter:drop-shadow(0 3px 5px #0009);
}
.scoreboard{transform:translateX(-50%) scale(.84);transform-origin:center top}
.top-player-panel{transform:scale(.82);transform-origin:left top}
.objective{top:105px;transform:scale(.85);transform-origin:left top}
.match-actions{transform:scale(.85);transform-origin:right top}
.match-stats{top:55px;background:#252719cf;font-size:10px}
.team-roster{top:169px;transform:scale(.86);transform-origin:left top}
.team-slot{background:linear-gradient(90deg,#292b20e6,#292b2070 75%,transparent)}
.bottom-hud{
  isolation:isolate;background:none;
  transform:translateX(-50%) scale(.8);transform-origin:center bottom;
  filter:drop-shadow(0 4px 6px #0009);
  height:164px;grid-template-columns:116px minmax(0,1fr) 148px;
  gap:14px;padding:14px 18px 11px 8px;
}
.bottom-hud::before{
  content:'';position:absolute;z-index:-1;inset:-15px 0 -4px;
  background:url('./assets/ui/asa/console.png') center/100% 100% no-repeat;
  clip-path:inset(0 0 0 12%);pointer-events:none;
}
.bottom-hud .champion-status{height:132px;gap:6px}
.bottom-hud .hud-portrait{width:112px;height:112px}
.bottom-hud .hud-portrait canvas{width:88px;height:88px}
.bottom-hud .status-name>#attack-stat{display:none}
.bottom-hud .combat-controls{grid-template-rows:68px 34px 10px;gap:5px}
.bottom-hud .combat-spells{gap:18px;align-items:flex-start}
.bottom-hud .ability-group{gap:8px}
.bottom-hud .ability-slot .ability{width:58px;height:58px}
.bottom-hud .summoner-group{padding-left:10px;gap:7px;align-self:flex-start;margin-top:6px}
.bottom-hud .ability.summoner{width:44px;height:46px}
.bottom-hud .rank-pips{bottom:-8px}
.bottom-hud .status-details{gap:3px}
.bottom-hud .status-details .health{height:17px}
.bottom-hud .status-details .mana{height:14px}
.bottom-hud .global-xp{height:10px;gap:8px;overflow:visible}
.bottom-hud .global-xp>span{font-size:9px;letter-spacing:.3px}
.bottom-hud .global-xp>small{font-size:10px;color:#e4dabb;font-variant-numeric:tabular-nums}
.bottom-hud .global-xp-track{height:5px;background:#17190e;border-bottom:1px solid #a79a6540}
.bottom-hud .inventory-section{align-self:center;padding-left:11px}
.bottom-hud .inventory-heading{font-size:8px;margin-bottom:5px}
.bottom-hud .inventory{gap:4px;margin-bottom:5px}
.bottom-hud .inventory>span{height:34px}
.bottom-hud .gold-button{height:27px;font-size:18px}
.bottom-hud .gold-button>span{font-size:9px;letter-spacing:.5px}
.hud-portrait,.brief-portrait,.team-slot-avatar{
  background:url('./assets/ui/asa/portrait.png') center/100% 100% no-repeat;
}
.hud-portrait canvas{width:96px;height:96px}
.hud-portrait>span,.brief-portrait>span,.team-slot-avatar>span{
  background:radial-gradient(circle at 35% 20%,#59523a,#211f14 80%);
  border-color:#c9bb89;color:#fff2ca;
}
.status-name strong,.brief-resources>strong{color:#f1e7c3}
.hud-stats small{color:#bdaf7e}.hud-stats b{color:#f1eacf}
.ability-slot .ability,.ability-slot .ability.ultimate,.ability.summoner,.ability.summoner.heal-spell,.match-actions .icon-button{
  background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;
  border:0;border-radius:3px;
}
.ability-slot .ability{padding:6px}
.ability-slot .ability img{clip-path:inset(0 round 2px)}
.ability kbd{background:#29291c;border-color:#aea06f;color:#fff0b5}
.ability-slot .rank-pips{bottom:-7px}
.ability-slot .level-up{background:linear-gradient(#ece0b7,#8a7646);color:#312b1d;border-color:#d6c68e;box-shadow:0 0 6px #e1bf6470}
.health i{background:linear-gradient(#ee7c6d,#bc3b31 45%,#91251f);box-shadow:inset 0 1px #fdb0a5aa}
.mana i{background:linear-gradient(#5dbbe9,#2673b6 52%,#204d85);box-shadow:inset 0 1px #aad8f7aa}
.status-details .resource-bar{border-color:#b5ac818c;border-radius:3px}
.status-details .resource-bar span{font-size:14px}
.global-xp>small{color:#d6cdb0}.global-xp>span{color:#d0c28e}
.global-xp-track{background:#1b1721}.global-xp-track i{background:linear-gradient(90deg,#8d62c6,#cf9aee);box-shadow:0 0 5px #bd8ae760}
.inventory-section{border-color:#c1ad6970}.inventory-heading{color:#cfc4a0}
.inventory>span{
  background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat,#252619;
  border:0;border-radius:3px;padding:4px;box-shadow:inset 0 1px 4px #0009;
}
.inventory>span::after{color:#ebddb8}
.gold-button{border:1px solid #af9f6c;border-radius:3px;color:#f7db88;background:linear-gradient(#555037,#302f20)}
.gold-button>span{color:#d4c8a5}
.minimap-wrap{top:94px;transform:scale(.84);transform-origin:right top}
.minimap-title{color:#f0e5bd}.minimap-title span:last-child{color:#bdb18d}
#minimap{border-color:#a69a6d;border-radius:4px}
#recall-button{background:linear-gradient(#514e37,#303021);color:#ece2c2;border:1px solid #92855e;border-radius:3px}
.match-chat{transform:scale(.85);transform-origin:left bottom;opacity:.95}
.match-chat .match-chat-tabs{border-color:#a89b6b}
.match-chat-tabs button{color:#c5b994;border-color:#81785170}
.match-chat-tabs button[aria-pressed='true']{background:linear-gradient(#686143,#42432e);color:#fff2ce;box-shadow:inset 0 -2px #d7c58f}
.match-chat .chat-box-log{color:#eee7d0}.match-chat .chat-box-log b{color:#d7c77e}
.match-chat .chat-box-form{border-color:#a0966a;border-radius:3px;background:#232418}
.match-chat .chat-box input{color:#f1e9cf}.match-chat .chat-box input::placeholder{color:#b0aa8d}
.match-chat .chat-box-form>button{background:#514d33;color:#f0deb0}
.objective>svg{color:#e5d19b}.objective span{color:#f1df9c}.objective small{color:#e1d9bd}
.toast{color:#eee0b4;background:linear-gradient(90deg,transparent,#2b2c1eeb 15%,#2b2c1eeb 85%,transparent)}

@media(max-width:1600px){.match-chat{bottom:177px}}
@media(max-width:900px){
  .objective{top:91px}.team-roster{top:150px}.minimap-wrap{top:80px}
  .bottom-hud{transform:translateX(-50%) scale(.86);height:150px;grid-template-columns:100px minmax(0,1fr) 122px;gap:10px;padding:12px 15px 10px 9px}
  .bottom-hud .champion-status{height:120px}
  .bottom-hud .hud-portrait{width:96px;height:96px}
  .bottom-hud .hud-portrait canvas{width:76px;height:76px}
  .bottom-hud .combat-controls{grid-template-rows:62px 32px 10px;gap:4px}
  .bottom-hud .combat-spells{gap:12px}
  .bottom-hud .ability-group{gap:6px}
  .bottom-hud .ability-slot .ability{width:52px;height:52px}
  .bottom-hud .summoner-group{padding-left:8px;gap:5px;margin-top:5px}
  .bottom-hud .ability.summoner{width:40px;height:43px}
  .bottom-hud .status-details .health{height:16px}
  .bottom-hud .status-details .mana{height:13px}
  .bottom-hud .inventory-section{padding-left:8px}
  .bottom-hud .inventory>span{height:29px}
  .bottom-hud .inventory-heading{font-size:7px;letter-spacing:0}
  .bottom-hud .gold-button{height:25px;font-size:16px}
  .match-chat{bottom:175px}
  .hud-portrait canvas{width:82px;height:82px}
}
@media(max-width:820px){.scoreboard{transform:scale(.84);transform-origin:left top}}
@media(max-width:680px){
  .bottom-hud{transform:translateX(-50%);height:142px;grid-template-columns:80px minmax(0,1fr) 94px;gap:8px;padding:10px 13px 9px 8px}
  .bottom-hud .champion-status{height:110px}
  .bottom-hud .hud-portrait{width:78px;height:78px}
  .bottom-hud .hud-portrait canvas{width:62px;height:62px}
  .bottom-hud .combat-controls{grid-template-rows:55px 31px 10px;gap:4px}
  .bottom-hud .combat-spells{gap:8px}
  .bottom-hud .ability-group{gap:5px}
  .bottom-hud .ability-slot .ability{width:46px;height:46px}
  .bottom-hud .summoner-group{padding-left:6px;gap:4px;margin-top:4px}
  .bottom-hud .ability.summoner{width:33px;height:37px}
  .bottom-hud .inventory>span{height:26px}
  .bottom-hud .inventory-heading{font-size:6px}
  .bottom-hud .gold-button{height:24px;font-size:14px}
  .bottom-hud .gold-button>span{display:none}
  .bottom-hud .global-xp>small{font-size:8px}
  .scoreboard{transform:scale(.9)}.team-roster{top:79px}.minimap-wrap{top:77px}
  .match-chat{bottom:175px;transform:scale(.9)}
  .hud-portrait canvas{width:64px;height:64px}
  .status-details .resource-bar span{font-size:11px}
}
@media(max-width:480px){
  .bottom-hud{transform:translateX(-50%);height:177px;max-width:calc(100vw - 16px);bottom:7px;grid-template-columns:66px minmax(0,1fr) 76px;gap:6px;padding:12px 10px 11px 7px}
  .bottom-hud .champion-status{height:auto}
  .bottom-hud .hud-portrait{width:66px;height:66px}
  .bottom-hud .hud-portrait canvas{width:52px;height:52px}
  .bottom-hud .combat-controls{grid-template-rows:auto auto 10px;gap:6px}
  .bottom-hud .combat-spells{gap:8px}
  .bottom-hud .ability-group{gap:4px}
  .bottom-hud .ability-slot .ability{width:43px;height:43px}
  .bottom-hud .summoner-group{border:0;margin:0;padding:0;gap:9px;justify-self:end}
  .bottom-hud .ability.summoner{width:30px;height:32px}
  .bottom-hud .status-details .health{height:17px}
  .bottom-hud .status-details .mana{height:15px}
  .bottom-hud .inventory-section{padding-left:5px}
  .bottom-hud .inventory-heading{font-size:0}
  .bottom-hud .inventory>span{height:27px}
  .bottom-hud .gold-button{height:24px;font-size:12px}
  .bottom-hud .global-xp>small{font-size:7px}
  .bottom-hud::before{clip-path:none;background:none;border-image:url('./assets/ui/asa/panel.png') 80 fill / 9px / 0 stretch}
  .hud-portrait canvas{width:52px;height:52px}
  .team-roster{top:78px}.minimap-wrap{top:74px}.match-chat{bottom:216px}
  .combat-controls{gap:6px}.combat-spells{gap:8px}
  .global-xp>small{font-size:7px}
}
@media(max-width:360px){
  .bottom-hud{grid-template-columns:54px minmax(0,1fr) 64px}
  .bottom-hud .hud-portrait{width:54px;height:54px}
  .bottom-hud .hud-portrait canvas{width:42px;height:42px}
  .bottom-hud .ability-slot .ability{width:32px;height:32px}
}

/* Painted action buttons and purchase feedback. */
.bottom-hud .gold-button,#recall-button,.shop-buy,.shop-back{
  position:relative;isolation:isolate;border:0;
  background:url('./assets/ui/asa/action-button.png') center/100% 100% no-repeat;
  color:#f4e3b6;text-shadow:0 1px 2px #000;
  transition:filter .18s,box-shadow .18s;
}
.bottom-hud .gold-button{padding:3px 11px}
.bottom-hud .gold-button:hover,#recall-button:hover,.shop-buy:hover:not(:disabled),.shop-back:hover{filter:brightness(1.18)}
#recall-button{height:30px}
#shop-button.shop-ready{animation:shop-ready-glow 2.4s ease-in-out infinite}
#shop-button.shop-ready::before{content:'';position:absolute;inset:-3px;z-index:-1;border:1px solid #f5d88e;border-radius:5px;animation:shop-ready-ring 2.4s ease-out infinite;pointer-events:none}
#shop-button.shop-ready::after{content:'✦';position:absolute;right:-5px;top:-9px;font-size:15px;color:#fff0ad;text-shadow:0 0 8px #ffcf6c;animation:shop-ready-star 2.4s ease-in-out infinite;pointer-events:none}
#shop-button[data-availability='return']{box-shadow:0 0 0 1px #c8ad6c66}
@keyframes shop-ready-glow{0%,100%{box-shadow:0 0 4px #e9b84930;filter:brightness(1)}50%{box-shadow:0 0 14px #e9b84988;filter:brightness(1.2)}}
@keyframes shop-ready-ring{0%{opacity:.7;transform:scale(.99)}75%,100%{opacity:0;transform:scale(1.12,1.26)}}
@keyframes shop-ready-star{0%,100%{opacity:.6;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(25deg)}}

/* Announcement plaque. The title, portraits and event colors are live content. */
.announcer{
  --kill-glow:#eecb78;isolation:isolate;
  width:610px;max-width:calc(100vw - 32px);min-height:105px;
  padding:17px 46px 20px;gap:17px;
  background:url('./assets/ui/asa/kill-banner.png') center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 9px #000b);
}
.announcer[data-side='ally']{--kill-glow:#7bd8e8}
.announcer[data-side='enemy']{--kill-glow:#e98787}
.announcer[data-type='triple-kill'],.announcer[data-type='quadra-kill']{--kill-glow:#b997eb}
.announcer[data-type='legendary']{--kill-glow:#fce1a0}
.announcer::before{inset:10px 29px;height:auto;background:linear-gradient(110deg,transparent 25%,#fff4c430 48%,transparent 65%);clip-path:inset(0 round 16px);opacity:0;pointer-events:none}
.announcer.visible::before{animation:kill-plaque-sheen .85s ease-out both}
.announcer::after{inset:9px 23px;height:auto;z-index:-1;background:none;border-radius:25px;box-shadow:0 0 27px color-mix(in srgb,var(--kill-glow) 45%,transparent);opacity:0;pointer-events:none}
.announcer.visible::after{animation:kill-plaque-aura 1.2s ease-out both}
.announce-text{position:relative;z-index:2;min-width:0}
.announcer strong{font-size:25px;letter-spacing:2.5px;line-height:1.2;padding:0 0 3px}
.announcer small{color:#e7ddc3;font-size:11px;letter-spacing:.35px;line-height:1.4;margin-top:4px;max-width:360px}
.announcer.visible strong{animation:kill-title-reveal .45s cubic-bezier(.2,1.2,.4,1) both}
.announcer .announce-face{position:relative;width:61px;height:61px;padding:7px;border:0;overflow:visible;background:url('./assets/ui/asa/portrait.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 0 5px var(--ring))}
.announcer .announce-face canvas{border-radius:50%;width:100%;height:100%;object-fit:cover}
.announcer .announce-face[data-face='victim']::after{inset:8px}
.announcer .announce-face.structure svg{width:23px;height:23px}
.announce-fx{position:absolute;inset:10px 24px;overflow:visible;pointer-events:none;z-index:1}
.announce-fx i{position:absolute;left:calc(9% + var(--i)*11%);top:70%;width:3px;height:3px;background:var(--kill-glow);border-radius:1px;box-shadow:0 0 7px var(--kill-glow);opacity:0}
.announcer.visible .announce-fx i{animation:kill-ember 1.6s calc(var(--i)*60ms) ease-out both}
@keyframes kill-plaque-sheen{0%{opacity:0;transform:translateX(-30%)}30%{opacity:.9}100%{opacity:0;transform:translateX(30%)}}
@keyframes kill-plaque-aura{0%{opacity:0;transform:scale(.95)}25%{opacity:.8}100%{opacity:.16;transform:scale(1.02)}}
@keyframes kill-title-reveal{from{opacity:0;transform:translateY(5px) scale(1.06);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes kill-ember{0%{opacity:0;transform:translateY(8px) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translateY(-42px) scale(0)}}

/* In-match equipment shop, with the same painted material as the HUD. */
#shop-dialog{
  width:min(900px,calc(100vw - 30px));max-width:900px;max-height:calc(100dvh - 40px);
  padding:38px 33px 25px;border:0;background:#242519;
  border-image:url('./assets/ui/asa/shop-window.png') 90 fill / 24px / 0 stretch;
  color:#eee6ca;box-shadow:0 22px 80px #000b;
  scrollbar-width:thin;scrollbar-color:#9a8859 #28291c;
}
#shop-dialog::backdrop{background:#040a10b8;backdrop-filter:blur(5px)}
#shop-dialog>.close-dialog.icon-button{top:19px;right:20px;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;color:#e6d6a5;border:0}
#shop-dialog .shop-heading{align-items:center;gap:18px;padding:4px 14px 15px 5px;border-bottom:1px solid #b9a16c55}
#shop-dialog .eyebrow{color:#b9aa7a;font-size:8px;letter-spacing:1.8px}
#shop-dialog h2{font-size:31px;color:#f0dba4;margin:8px 0 0}
.shop-wallet{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-right:25px;border:1px solid #b49a5955;border-radius:5px;background:#1e21157d}
.shop-wallet>span{display:grid;gap:3px}.shop-wallet small{font-size:8px;letter-spacing:1.3px;color:#b6ad88}.shop-wallet b{font-size:22px;color:#f0d37b;font-variant-numeric:tabular-nums}
#shop-dialog #shop-location{margin:14px 0 0;padding:9px 12px;border-left:2px solid #aa945e;background:#171c1270;color:#c9c7aa;font-size:12px}
#shop-dialog .shop-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:17px}
#shop-dialog .shop-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;padding:15px;border:1px solid #a48f586b;border-radius:5px;background:linear-gradient(135deg,#363826,#24271b);text-align:left;box-shadow:inset 0 1px #e6d2a014;transition:border-color .16s,background .16s}
#shop-dialog .shop-item:hover{border-color:#d7bc7d;background:linear-gradient(135deg,#41422c,#2c3020)}
#shop-dialog .shop-item>img{width:52px;height:52px;grid-row:auto;border:0;padding:5px;background:url('./assets/ui/asa/slot.png') center/100% 100% no-repeat;object-fit:cover}
#shop-dialog .shop-item-copy{min-width:0}
#shop-dialog .shop-item strong{font-size:14px;font-weight:600;color:#f0e2bb;line-height:1.3}
#shop-dialog .shop-item small{font-size:11px;color:#bfc3a7;line-height:1.5;margin-top:6px}
.shop-item-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #b39d5b30}
#shop-dialog .shop-price{grid-column:auto;display:flex;align-items:center;gap:7px;margin:0;color:#ebcf83;font-size:14px}
#shop-dialog .shop-price svg{width:17px;height:17px}.shop-price b{font-weight:600}
.shop-buy{min-width:109px;height:33px;padding:5px 18px;font:600 10px var(--sans);letter-spacing:1px}
.shop-buy:disabled{opacity:.45;filter:saturate(.3);cursor:not-allowed}
#shop-dialog .shop-item.unavailable>img{filter:saturate(.65)}
#shop-dialog .shop-feedback{min-height:20px;margin-top:12px;color:#ead89d;font-size:12px}
.shop-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #b39d5b40;padding-top:13px}
#shop-dialog .shop-tip{margin:0;max-width:420px;color:#aab093!important;font-size:10px!important;line-height:1.6}
#shop-dialog .shop-back.close-dialog{position:static;min-width:195px;height:38px;padding:6px 17px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:9px;letter-spacing:.7px}
.shop-back kbd{font:8px var(--sans);color:#c7bd95;border:1px solid #9b89545e;padding:2px 3px}
@media(max-width:680px){
  .announcer{width:540px;min-height:94px;padding:16px 30px 20px;gap:12px}
  .announcer strong{font-size:21px;letter-spacing:1.6px}.announcer small{font-size:10px}
  .announcer .announce-face{width:52px;height:52px;padding:6px}
  #shop-dialog{padding:30px 22px 20px;border-image-width:18px}
  #shop-dialog .shop-heading{padding:4px 0 13px;gap:9px}
  #shop-dialog .shop-items{gap:9px}
  #shop-dialog .shop-item{padding:11px;grid-template-columns:42px 1fr;gap:8px}
  #shop-dialog .shop-item>img{width:42px;height:42px}
  #shop-dialog .shop-item strong{font-size:12px}.shop-buy{min-width:95px;padding:4px 12px}
  .shop-wallet{padding:8px 10px;margin-right:20px}.shop-wallet b{font-size:19px}
}
@media(max-width:480px){
  .announcer{max-width:calc(100vw - 12px);padding:15px 19px 19px;gap:8px;min-height:91px}
  .announcer strong{font-size:16px;letter-spacing:.7px;white-space:normal;line-height:1.15}
  .announcer small{font-size:9px;letter-spacing:0;margin-top:4px;line-height:1.3}
  .announcer .announce-face{width:43px;height:43px;padding:5px}
  #shop-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:32px 19px 20px}
  #shop-dialog>.close-dialog.icon-button{top:15px;right:14px;width:28px;height:28px}
  #shop-dialog .shop-heading{flex-wrap:wrap;align-items:center;padding-right:0}
  #shop-dialog h2{font-size:26px;margin-top:5px}#shop-dialog .eyebrow{font-size:7px;letter-spacing:1px}
  .shop-wallet{margin-right:29px;padding:6px 10px;gap:6px}.shop-wallet b{font-size:18px}.shop-wallet small{font-size:7px}
  #shop-dialog .shop-items{grid-template-columns:1fr;gap:10px}
  #shop-dialog .shop-item{grid-template-columns:45px 1fr;padding:12px}#shop-dialog .shop-item>img{width:45px;height:45px}
  #shop-dialog .shop-item strong{font-size:13px}
  #shop-dialog #shop-location{font-size:11px}
  .shop-footer{flex-direction:column;align-items:stretch;gap:10px}
  #shop-dialog .shop-back.close-dialog{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #shop-button.shop-ready,.announcer.visible::before,.announcer.visible::after,.announcer.visible strong,.announcer.visible .announce-fx i{animation:none}
  #shop-button.shop-ready{box-shadow:0 0 0 2px #e8cc79}
  #shop-button.shop-ready::before,#shop-button.shop-ready::after{animation:none}
  #shop-button.shop-ready::before{opacity:0}
  .announcer{transition:none}.announcer.visible{transition:none}
}