:root {
  --bg: #061019;
  --panel: rgba(8, 21, 31, .88);
  --panel-2: rgba(17, 38, 48, .92);
  --gold: #d9b96e;
  --gold-bright: #f2d88f;
  --cyan: #55d7ff;
  --blue: #3e9cff;
  --red: #ff5f6d;
  --green: #5ce097;
  --text: #e9f4f8;
  --muted: #8ca7b4;
  --line: rgba(142, 197, 215, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02070c; color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app, #gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#gameCanvas { display: block; background: radial-gradient(circle at 50% 50%, #15372f, #08151b 72%); touch-action: none; }

.screen { position: fixed; inset: 0; z-index: 20; display: none; overflow: auto; }
.screen.active { display: flex; }
.hidden { display: none !important; }

.glass-panel {
  background: linear-gradient(145deg, rgba(16, 37, 49, .92), rgba(5, 14, 23, .9));
  border: 1px solid rgba(166, 221, 236, .2);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .03);
  backdrop-filter: blur(14px);
}

#homeScreen {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 26px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .14) 46%, rgba(0, 0, 0, .58)),
    radial-gradient(circle at 68% 34%, rgba(32, 169, 184, .34), transparent 34%),
    radial-gradient(circle at 68% 65%, rgba(215, 166, 66, .22), transparent 28%),
    linear-gradient(135deg, #06151e 0%, #0b2b2d 48%, #0a1319 100%);
}

.hero-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-backdrop::before,
.hero-backdrop::after {
  content: "";
  position: absolute;
  right: 8vw;
  top: 10vh;
  width: min(52vw, 760px);
  height: min(76vh, 860px);
  transform: rotate(-8deg);
  clip-path: polygon(47% 0, 72% 14%, 88% 44%, 72% 100%, 31% 92%, 5% 54%, 19% 18%);
  background:
    radial-gradient(circle at 58% 28%, #f8e5ba 0 5%, transparent 6%),
    radial-gradient(circle at 45% 25%, #5cd6eb 0 4%, transparent 5%),
    linear-gradient(145deg, rgba(58, 195, 209, .38), rgba(10, 31, 49, .08) 42%),
    linear-gradient(35deg, rgba(218, 164, 62, .27), rgba(11, 27, 39, .08));
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.45));
  opacity: .75;
}
.hero-backdrop::after {
  right: -4vw;
  top: 29vh;
  width: min(34vw, 520px);
  height: min(58vh, 660px);
  transform: rotate(17deg);
  clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%);
  background: linear-gradient(165deg, rgba(221, 181, 83, .4), rgba(17, 72, 86, .14));
  opacity: .55;
}

.brand-block { position: relative; z-index: 1; width: min(1120px, 88vw); text-align: left; }
.brand-kicker { text-transform: uppercase; letter-spacing: .38em; font-size: 12px; color: var(--gold-bright); font-weight: 700; }
.brand-block h1 { margin: 10px 0 0; font-size: clamp(64px, 11vw, 150px); line-height: .88; letter-spacing: .04em; font-family: Georgia, "Songti SC", serif; color: #f3e7c0; text-shadow: 0 0 2px #fff, 0 12px 40px rgba(214, 165, 77, .27); }
.brand-block p { margin: 24px 0 0; color: #c5d5da; font-size: clamp(15px, 2vw, 22px); letter-spacing: .12em; }

.menu-card { position: relative; z-index: 2; width: min(420px, 86vw); padding: 22px; display: grid; gap: 12px; align-self: flex-start; margin-left: max(6vw, calc((100vw - 1120px)/2)); }
.primary-btn, .secondary-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .12em;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.primary-btn { color: #07131a; background: linear-gradient(180deg, #f4d98e, #b98b3a); border-color: #ffe7a4; box-shadow: 0 8px 28px rgba(218, 170, 72, .25); }
.secondary-btn { color: #d7e7eb; background: linear-gradient(180deg, rgba(41, 76, 90, .78), rgba(11, 29, 39, .9)); border-color: rgba(155, 207, 222, .28); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.secondary-btn.danger { color: #ffb7bd; border-color: rgba(255, 95, 109, .35); }
.menu-tip { margin-top: 8px; color: var(--muted); line-height: 1.65; font-size: 12px; }
.copyright-note { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(203, 221, 228, .55); font-size: 11px; white-space: nowrap; z-index: 3; }

#selectScreen { background: radial-gradient(circle at 50% 20%, #153c45 0, #08151f 55%, #03080d 100%); padding: 34px; }
.select-shell { width: min(1280px, 100%); margin: auto; display: flex; flex-direction: column; gap: 24px; }
.select-header { display: flex; align-items: flex-end; justify-content: space-between; }
.select-header h2 { margin: 8px 0 0; font-size: clamp(28px, 4vw, 50px); font-family: Georgia, "Songti SC", serif; }
.countdown-box { padding: 12px 18px; border: 1px solid var(--line); background: rgba(4, 14, 22, .7); color: var(--muted); }
.countdown-box span { color: var(--gold-bright); font-size: 24px; margin-left: 8px; }
.hero-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hero-card { position: relative; min-height: 430px; border: 1px solid rgba(182, 221, 230, .18); overflow: hidden; cursor: pointer; background: #0d202b; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.hero-card:hover { transform: translateY(-4px); border-color: rgba(244, 217, 142, .54); }
.hero-card.selected { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(217, 185, 110, .18), 0 22px 55px rgba(0,0,0,.4); }
.hero-art { position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg); }
.hero-art::before { content: ""; position: absolute; width: 65%; height: 92%; right: 6%; bottom: -2%; clip-path: polygon(45% 0, 78% 15%, 100% 56%, 75% 100%, 18% 92%, 0 44%, 20% 12%); background: var(--hero-shape); filter: drop-shadow(0 26px 22px rgba(0,0,0,.45)); transform: rotate(-4deg); }
.hero-art::after { content: ""; position: absolute; width: 90%; height: 35%; left: 5%; bottom: 12%; border-radius: 50%; background: radial-gradient(ellipse, var(--hero-glow), transparent 68%); filter: blur(18px); }
.hero-card-content { position: absolute; inset: auto 0 0; padding: 110px 22px 22px; background: linear-gradient(transparent, rgba(5, 13, 20, .88) 36%, rgba(5, 13, 20, .98)); }
.hero-role { color: var(--gold-bright); letter-spacing: .24em; font-size: 11px; }
.hero-card h3 { margin: 8px 0 4px; font-size: 28px; }
.hero-subtitle { color: var(--muted); margin-bottom: 14px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-tags span { padding: 5px 9px; border: 1px solid rgba(180, 219, 229, .18); background: rgba(13, 39, 50, .55); font-size: 11px; color: #bdd4db; }
.select-footer { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.selected-hero-info { color: var(--muted); }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 5, 8, .78); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(760px, 94vw); max-height: 90vh; overflow: auto; padding: 28px; border: 1px solid rgba(181, 221, 232, .22); background: linear-gradient(145deg, #102631, #07131c 68%); box-shadow: 0 32px 80px rgba(0,0,0,.6); }
.modal-card h2 { margin-top: 0; font-family: Georgia, "Songti SC", serif; font-size: 34px; color: #f1e1b9; }
.close-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.06); color: #d4e5ea; font-size: 26px; cursor: pointer; }
.modal-card > .close-btn { position: absolute; top: 14px; right: 14px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide-grid article { padding: 16px; border: 1px solid var(--line); background: rgba(5, 17, 24, .45); }
.guide-grid h3 { color: var(--gold-bright); margin: 0 0 8px; }
.guide-grid p { color: #b9ced5; line-height: 1.7; margin: 0; }
.settings-card { width: min(460px, 94vw); display: grid; gap: 18px; }
.settings-card label { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #c8dbe1; }
.settings-card select { min-width: 150px; padding: 9px 12px; color: #e5f1f4; border: 1px solid var(--line); background: #0c202a; }
.switch-row input { width: 42px; height: 22px; accent-color: var(--gold); }

.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud button, .hud canvas, .shop-panel, .modal { pointer-events: auto; }
.topbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); min-width: 330px; height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 5px 12px; border-radius: 4px; }
.team-score { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; }
.team-score strong { font-size: 22px; }
.team-score.blue strong { color: #7bc7ff; }
.team-score.red strong { color: #ff8791; }
.match-clock { min-width: 88px; text-align: center; padding: 0 14px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.match-clock span { display: block; font-weight: 800; }
.match-clock small { color: var(--muted); font-size: 9px; }
.announcement { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); min-width: 280px; padding: 12px 24px; text-align: center; color: #ffe6a1; background: linear-gradient(90deg, transparent, rgba(5,16,23,.9) 18%, rgba(5,16,23,.9) 82%, transparent); text-shadow: 0 2px 12px #000; }
.target-hint { position: absolute; top: 138px; left: 50%; transform: translateX(-50%); color: #fff2b8; background: rgba(0,0,0,.62); border: 1px solid rgba(255,226,137,.34); padding: 8px 14px; font-size: 12px; }
.left-stats { position: absolute; top: 76px; left: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 6px; }
.left-stats div { min-width: 62px; padding: 7px 9px; text-align: center; background: rgba(255,255,255,.025); }
.left-stats span { display: block; color: var(--muted); font-size: 9px; }
.left-stats b { font-size: 15px; }

.minimap-wrap { position: absolute; right: 10px; bottom: 10px; width: min(220px, 22vw); aspect-ratio: 1; padding: 6px; border-radius: 4px; }
#minimapCanvas { width: 100%; height: 100%; display: block; background: #09231f; cursor: crosshair; }

.bottom-hud { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); min-width: min(920px, calc(100vw - 260px)); height: 126px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 6px; }
.portrait-wrap { position: relative; flex: 0 0 auto; }
.hero-portrait { width: 88px; height: 88px; border: 2px solid #c7a85e; background: linear-gradient(135deg, #1c6972, #0e2630); clip-path: polygon(50% 0, 92% 22%, 100% 72%, 68% 100%, 22% 92%, 0 48%, 14% 12%); }
.hero-portrait::before { content: ""; display: block; width: 68%; height: 80%; margin: 12% auto 0; clip-path: polygon(50% 0, 84% 25%, 100% 72%, 55% 100%, 10% 82%, 0 35%); background: var(--portrait-shape, linear-gradient(145deg, #b8f1ff, #235d72)); }
.level-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #dfbd6b; color: #f9e8b7; background: #101b22; font-weight: 800; }
.resource-wrap { flex: 1 1 220px; min-width: 190px; }
.bar { position: relative; height: 18px; margin: 3px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.55); }
.bar i { display: block; width: 100%; height: 100%; transition: width .15s linear; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; text-shadow: 0 1px 2px #000; }
.bar.hp i { background: linear-gradient(90deg, #18763d, #52d97d); }
.bar.mana i { background: linear-gradient(90deg, #225eb8, #58b8ff); }
.bar.xp { height: 7px; }
.bar.xp i { background: linear-gradient(90deg, #6f3eb8, #c07cf0); }
.combat-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; font-size: 9px; color: var(--muted); }
.combat-stats b { color: #dcebee; }
.ability-bar { display: flex; align-items: flex-end; gap: 7px; }
.ability-btn { position: relative; width: 58px; height: 58px; padding: 0; border: 2px solid rgba(224, 192, 107, .6); background: linear-gradient(145deg, #174959, #0b1c25); color: #fff; cursor: pointer; overflow: hidden; }
.ability-btn .ability-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 21px; background: var(--ability-bg, linear-gradient(135deg, rgba(74,218,255,.4), rgba(7,27,39,.6))); }
.ability-btn kbd { position: absolute; top: 2px; left: 3px; z-index: 2; font-size: 9px; color: #f7dfa0; background: rgba(0,0,0,.42); padding: 1px 3px; }
.ability-btn .cooldown { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 18px; font-weight: 800; background: rgba(0,0,0,.7); }
.ability-btn .mana-cost { position: absolute; right: 2px; bottom: 1px; z-index: 2; color: #7fd0ff; font-size: 8px; text-shadow: 0 1px 2px #000; }
.ability-btn.active-target { box-shadow: 0 0 0 3px rgba(255,226,131,.42), 0 0 28px rgba(255,221,111,.42); }
.ability-btn.disabled { filter: grayscale(.85) brightness(.55); }
.ability-btn.summoner { width: 44px; height: 44px; border-color: rgba(116, 210, 255, .55); }
.ability-btn.ultimate { width: 66px; height: 66px; border-color: #e2bd66; }
.utility-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; min-width: 118px; }
.utility-btn { min-height: 38px; border: 1px solid var(--line); color: #d8e7eb; background: #0b202a; cursor: pointer; }
.utility-btn kbd { color: var(--gold-bright); margin-right: 4px; }
.gold-box { grid-column: 1 / -1; text-align: center; color: var(--gold-bright); font-size: 13px; }

.shop-panel { position: fixed; z-index: 45; inset: 6vh 7vw; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid rgba(225, 199, 126, .42); background: linear-gradient(145deg, rgba(12,33,42,.98), rgba(4,13,20,.98)); box-shadow: 0 40px 100px rgba(0,0,0,.72); }
.shop-header { display: flex; align-items: center; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.shop-header small { color: var(--gold); letter-spacing: .2em; }
.shop-header h2 { margin: 2px 0 0; }
.shop-gold { margin-left: auto; color: var(--muted); }
.shop-gold b { color: var(--gold-bright); }
.shop-grid { padding: 20px; overflow: auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-content: start; }
.shop-item { padding: 14px; border: 1px solid rgba(164,205,217,.18); background: linear-gradient(145deg, rgba(26,60,70,.62), rgba(7,20,27,.82)); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.shop-item:hover { transform: translateY(-2px); border-color: rgba(234,207,128,.6); }
.item-icon { width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; border: 2px solid rgba(213,181,98,.55); background: linear-gradient(145deg, #305464, #101f28); }
.shop-item h3 { margin: 10px 0 4px; }
.shop-item p { min-height: 42px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.shop-item .price { color: var(--gold-bright); font-weight: 800; }
.shop-item.unaffordable { opacity: .48; }
.inventory-panel { padding: 12px 20px 18px; border-top: 1px solid var(--line); }
.inventory-panel h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.inventory-slots { display: flex; gap: 8px; }
.inventory-slot { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.035); font-size: 23px; }

.pause-card, .end-card { width: min(500px, 92vw); text-align: center; display: grid; gap: 12px; }
.pause-card p, .end-card p { color: var(--muted); line-height: 1.7; }
.end-badge { font-family: Georgia, serif; font-size: clamp(52px, 12vw, 96px); color: #f0d483; text-shadow: 0 0 28px rgba(220,184,87,.34); }
.end-card.defeat .end-badge { color: #ff8a95; }

.mobile-controls { position: absolute; inset: 0; pointer-events: none; }
.joystick-base { position: absolute; left: 26px; bottom: 28px; width: 128px; height: 128px; border-radius: 50%; border: 2px solid rgba(255,255,255,.17); background: rgba(5,15,21,.48); pointer-events: auto; touch-action: none; }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; border: 2px solid rgba(255,226,148,.52); background: rgba(45,91,103,.8); box-shadow: 0 6px 18px rgba(0,0,0,.36); }
.mobile-attack { position: absolute; right: 26px; bottom: 42px; width: 78px; height: 78px; border-radius: 50%; border: 3px solid rgba(235,201,106,.72); background: rgba(17,54,65,.82); color: #f6e8c3; font-weight: 800; pointer-events: auto; }
.mobile-abilities { position: absolute; right: 18px; bottom: 132px; width: 210px; height: 170px; pointer-events: none; }
.mobile-ability-btn { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,220,128,.62); background: rgba(12,49,61,.9); color: #fff; font-weight: 800; pointer-events: auto; }
.mobile-ability-btn[data-key="Q"] { right: 78px; bottom: 0; }
.mobile-ability-btn[data-key="W"] { right: 0; bottom: 42px; }
.mobile-ability-btn[data-key="E"] { right: 83px; bottom: 76px; }
.mobile-ability-btn[data-key="R"] { right: 15px; bottom: 112px; width: 66px; height: 66px; }
.mobile-ability-btn[data-key="D"] { left: 0; bottom: 2px; width: 48px; height: 48px; }
.mobile-ability-btn[data-key="F"] { left: 20px; bottom: 62px; width: 48px; height: 48px; }
.mobile-ability-btn .mobile-cd { display: block; font-size: 11px; color: #ffe28f; }

@media (max-width: 1050px) {
  .bottom-hud { min-width: 700px; transform: translateX(-50%) scale(.88); transform-origin: bottom center; }
  .minimap-wrap { width: 170px; }
  .shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 760px), (pointer: coarse) {
  .brand-block { text-align: center; }
  .brand-block h1 { font-size: clamp(58px, 19vw, 108px); }
  .menu-card { align-self: center; margin-left: 0; }
  .hero-backdrop::before { right: -22vw; opacity: .42; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 260px; }
  .hero-art::before { width: 48%; }
  .select-footer { flex-direction: column; align-items: stretch; }
  .guide-grid { grid-template-columns: 1fr; }
  .topbar { top: max(6px, env(safe-area-inset-top)); min-width: 280px; height: 46px; }
  .left-stats { top: 60px; transform: scale(.82); transform-origin: top left; }
  .bottom-hud { left: 50%; bottom: max(4px, env(safe-area-inset-bottom)); min-width: 96vw; width: 96vw; height: 84px; padding: 7px 9px; gap: 7px; transform: translateX(-50%); }
  .portrait-wrap { display: none; }
  .resource-wrap { min-width: 120px; flex: 1 1 160px; }
  .combat-stats { display: none; }
  .ability-bar { display: none; }
  .utility-wrap { min-width: 80px; }
  .utility-btn { min-height: 30px; font-size: 10px; }
  .minimap-wrap { width: 112px; right: 8px; top: 60px; bottom: auto; }
  .mobile-controls { display: block !important; }
  .shop-panel { inset: 3vh 3vw; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 12px; }
  .shop-item p { min-height: 0; }
  .copyright-note { white-space: normal; width: 90vw; text-align: center; }
}

@media (max-width: 460px) {
  #selectScreen { padding: 18px 12px; }
  .select-header { align-items: center; }
  .countdown-box { padding: 8px; font-size: 10px; }
  .countdown-box span { font-size: 18px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .shop-item { padding: 10px; }
  .item-icon { width: 44px; height: 44px; }
  .joystick-base { width: 112px; height: 112px; left: 15px; bottom: 100px; }
  .mobile-attack { right: 16px; bottom: 100px; width: 70px; height: 70px; }
  .mobile-abilities { right: 8px; bottom: 182px; transform: scale(.9); transform-origin: bottom right; }
}