:root {
  color-scheme: dark;
  --sf-ink: #05070c;
  --sf-panel: rgba(8, 13, 23, .9);
  --sf-line: rgba(255, 255, 255, .13);
  --sf-gold: #ffc94a;
  --sf-orange: #ff7a1a;
  --sf-blue: #4db9ff;
  --sf-red: #ff4e62;
  --sf-text: #f8fbff;
  --sf-muted: #9aa9bc;
  --sf-shadow: 0 24px 80px rgba(0, 0, 0, .62);
}

html, body {
  background: #03050a !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 15%, rgba(42, 132, 255, .16), transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(255, 78, 59, .14), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .022) 25%, transparent 25%) 0 0 / 26px 26px;
}

#wrap {
  isolation: isolate;
  background: #050810 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#wrap::before, #wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

#wrap::before {
  background:
    linear-gradient(90deg, rgba(17, 73, 132, .16), transparent 24%, transparent 76%, rgba(139, 33, 44, .16)),
    radial-gradient(ellipse at center, transparent 46%, rgba(0, 0, 0, .4) 100%);
}

#wrap::after {
  inset: auto 0 0;
  height: 20%;
  background: linear-gradient(transparent, rgba(1, 3, 8, .72));
}

#game {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .78), inset 0 0 70px rgba(0, 0, 0, .24) !important;
  filter: saturate(1.12) contrast(1.06);
}

.sf-grain {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .08) 4px),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.2) 0 .6px, transparent .8px);
  background-size: auto, 5px 5px;
  mix-blend-mode: soft-light;
}

.sf-lowfx .sf-grain, .sf-lowfx .sf-impact-flash { display: none; }
.sf-lowfx #game { filter: none; }
.sf-lowfx .panel, .sf-lowfx #weaponPanel, .sf-lowfx .sf-mission, .sf-lowfx .sf-icon-button { backdrop-filter: none !important; }

.sf-topline {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  z-index: 18;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sf-blue), #fff 48%, var(--sf-gold) 52%, var(--sf-red));
  box-shadow: 0 0 22px rgba(92, 189, 255, .65);
}

#top {
  top: 14px !important;
  width: min(94vw, 1180px) !important;
  justify-content: space-between !important;
  gap: 14px !important;
  z-index: 14 !important;
  text-shadow: none !important;
}

#top .panel {
  position: relative;
  min-width: 250px;
  overflow: hidden;
  padding: 13px 16px 15px !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(20, 29, 45, .94), rgba(7, 11, 19, .94)) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px) saturate(1.2) !important;
  font-size: 11px;
  letter-spacing: .11em;
}

#pHud { margin-left: 0 !important; text-align: left; border-left: 3px solid var(--sf-blue) !important; }
#eHud { text-align: right; border-right: 3px solid var(--sf-red) !important; }
#timer { min-width: 270px !important; text-align: center; color: #dce6f2; border-top-color: rgba(255, 201, 74, .62) !important; }

.sf-healthbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
}

.sf-healthbar > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}

#pHud .sf-healthbar > i { background: linear-gradient(90deg, #2178f5, #63d4ff); box-shadow: 0 0 12px rgba(77, 185, 255, .8); }
#eHud .sf-healthbar > i { transform-origin: right; background: linear-gradient(90deg, #ff8354, #ff3c61); box-shadow: 0 0 12px rgba(255, 78, 98, .75); }

#turnHud {
  top: 76px !important;
  min-width: 240px !important;
  padding: 8px 18px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(4, 8, 15, .86) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  font-size: 10px !important;
  letter-spacing: .16em !important;
  backdrop-filter: blur(12px);
}

#turnHud.playerTurn { color: #d9f4ff; border-bottom: 2px solid var(--sf-blue) !important; }
#turnHud.enemyTurn { color: #ffe1e5; border-bottom: 2px solid var(--sf-red) !important; }

#battleBanner {
  top: 120px !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(255, 201, 74, .65) !important;
  border-radius: 7px !important;
  background: linear-gradient(90deg, transparent, rgba(8, 12, 20, .96) 12% 88%, transparent) !important;
  color: #fff4c8 !important;
  font-size: 12px;
  letter-spacing: .18em;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .42);
}

#weaponPanel {
  left: 14px !important;
  top: 112px !important;
  width: 164px !important;
  max-height: calc(100% - 160px) !important;
  gap: 5px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(10, 16, 28, .96), rgba(5, 8, 15, .88)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .46) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
}

#weaponPanel .weaponMiniTitle { padding: 6px 5px 8px !important; background: transparent !important; color: var(--sf-gold); font-size: 9px !important; letter-spacing: .2em !important; }

#weaponPanel .card {
  min-height: 50px !important;
  padding: 7px 7px 7px 42px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(30, 41, 58, .96), rgba(13, 19, 30, .96)) !important;
  color: #dce6f2 !important;
  transition: border-color .2s, background .2s, transform .2s !important;
}

#weaponPanel .card:hover { transform: translateX(3px) !important; border-color: rgba(255, 255, 255, .24) !important; }
#weaponPanel .card.active, #weaponPanel .card.selected { outline: none !important; border-color: rgba(255, 201, 74, .8) !important; background: linear-gradient(135deg, rgba(91, 58, 19, .98), rgba(35, 22, 14, .98)) !important; box-shadow: inset 3px 0 0 var(--sf-gold), 0 0 22px rgba(255, 154, 30, .14) !important; }
#weaponPanel .card b { margin-bottom: 3px !important; color: #fff !important; font-size: 10px !important; }
#weaponPanel .card small { color: #8fa0b5; font-size: 8px !important; }
#weaponPanel .miniHeroIcon { left: 7px !important; top: 8px !important; width: 30px !important; height: 32px !important; border-radius: 7px !important; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(0,0,0,.22)) !important; }

#selectedHeroBar {
  left: 190px !important;
  bottom: 15px !important;
  z-index: 14 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-left: 2px solid var(--sf-gold) !important;
  border-radius: 6px !important;
  background: rgba(4, 8, 15, .84) !important;
  color: #e7edf6 !important;
  font-size: 9px !important;
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
}

#help { display: none !important; }

.sf-control-deck { position: absolute; top: 112px; right: 14px; z-index: 17; display: flex; flex-direction: column; gap: 7px; }
.sf-icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(7, 11, 19, .88);
  color: #eaf2fb;
  font: 800 16px/1 system-ui;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  backdrop-filter: blur(10px);
}
.sf-icon-button:hover { transform: translateY(-2px); color: var(--sf-gold); border-color: rgba(255, 201, 74, .6); }

.sf-mission {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 14;
  width: 238px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(8, 13, 23, .92), rgba(4, 7, 13, .86));
  color: var(--sf-text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.sf-mission__top { display: flex; justify-content: space-between; gap: 8px; color: var(--sf-gold); font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.sf-mission strong { display: block; margin-top: 6px; font-size: 12px; }
.sf-mission p { margin: 5px 0 0; color: var(--sf-muted); font-size: 9px; line-height: 1.45; }
.sf-mission__bar { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .09); }
.sf-mission__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sf-orange), var(--sf-gold)); box-shadow: 0 0 12px rgba(255, 183, 40, .5); transition: width .35s ease; }

.sf-combo {
  position: absolute;
  left: 190px;
  top: 116px;
  z-index: 15;
  opacity: 0;
  transform: translateY(-8px) scale(.95);
  padding: 9px 12px;
  border: 1px solid rgba(255, 201, 74, .62);
  border-radius: 7px;
  background: rgba(10, 9, 8, .86);
  color: #fff1b5;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .13em;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.sf-combo.active { opacity: 1; transform: translateY(0) scale(1); }

.sf-floating-damage {
  position: absolute;
  z-index: 19;
  pointer-events: none;
  color: #fff;
  font-size: clamp(20px, 3.2vw, 42px);
  font-weight: 1000;
  text-shadow: 0 4px 0 rgba(0,0,0,.62), 0 0 22px currentColor;
  animation: sf-damage 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
.sf-floating-damage.critical { color: var(--sf-gold); font-size: clamp(28px, 4.3vw, 58px); }
@keyframes sf-damage { 0% { opacity:0; transform:translate(-50%,14px) scale(.65) } 18% { opacity:1; transform:translate(-50%,0) scale(1.12) } 100% { opacity:0; transform:translate(-50%,-70px) scale(.94) } }

.sf-impact-flash { position:absolute; inset:0; z-index:16; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--impact-x,50%) var(--impact-y,50%), rgba(255,247,198,.6), rgba(255,100,36,.1) 16%, transparent 42%); }
.sf-impact-flash.active { animation:sf-flash .38s ease-out; }
@keyframes sf-flash { 0%{opacity:0} 16%{opacity:.85} 100%{opacity:0} }

.sf-announcer { position:absolute; left:50%; top:50%; z-index:26; opacity:0; transform:translate(-50%,-50%) scale(.7); color:#fff; text-align:center; text-shadow:0 7px 0 rgba(0,0,0,.55),0 0 40px rgba(255,167,40,.42); pointer-events:none; }
.sf-announcer strong { display:block; font-size:clamp(34px,7vw,84px); font-weight:1000; letter-spacing:-.06em; line-height:.9; }
.sf-announcer span { display:block; margin-top:12px; color:var(--sf-gold); font-size:clamp(9px,1.4vw,15px); font-weight:900; letter-spacing:.34em; }
.sf-announcer.active { animation:sf-announce 1.45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes sf-announce { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(8px)} 20%,65%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)} 100%{opacity:0;transform:translate(-50%,-56%) scale(1.08)} }

.screen { z-index:30 !important; background:linear-gradient(90deg,rgba(5,12,23,.92),rgba(5,8,14,.56) 48%,rgba(17,7,10,.88)),radial-gradient(circle at 50% 22%,rgba(89,145,210,.28),transparent 48%) !important; backdrop-filter:blur(4px); }
.menuBox { position:relative; width:min(94vw,1080px) !important; padding:28px !important; overflow:hidden; border:1px solid rgba(255,255,255,.13) !important; border-radius:20px !important; background:linear-gradient(140deg,rgba(22,32,48,.98),rgba(7,11,18,.98) 62%) !important; box-shadow:var(--sf-shadow) !important; }
.menuBox::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,var(--sf-blue),#fff,var(--sf-gold),transparent); }

#titleScreen .menuBox { width:min(92vw,840px) !important; padding:clamp(32px,6vw,70px) clamp(24px,6vw,68px) !important; text-align:left !important; }
#titleScreen .menuBox::after { content:"01"; position:absolute; right:34px; bottom:12px; color:rgba(255,255,255,.035); font-size:210px; font-weight:1000; line-height:1; pointer-events:none; }
#titleScreen h1 { max-width:660px; margin:0 !important; background:linear-gradient(180deg,#fff,#dce9f6 58%,#9bacbf) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; filter:drop-shadow(0 8px 0 rgba(0,0,0,.33)) !important; font-size:clamp(48px,8vw,92px) !important; font-weight:1000; letter-spacing:-.075em !important; line-height:.85; }
#titleScreen h2 { margin:15px 0 19px !important; color:var(--sf-gold) !important; font-size:clamp(13px,2vw,20px) !important; letter-spacing:.28em !important; }
#titleScreen p { position:relative; z-index:1; max-width:620px; margin:0 0 24px; color:#aebdce; font-size:14px; line-height:1.65; }
.sf-title-kicker { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; color:#8bd2ff; font-size:10px; font-weight:900; letter-spacing:.24em; }
.sf-title-kicker::before { content:""; width:24px; height:1px; background:currentColor; box-shadow:0 0 9px currentColor; }
.sf-title-stats { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 27px; }
.sf-title-stats span { padding:7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:6px; background:rgba(255,255,255,.035); color:#c5d1de; font-size:9px; font-weight:800; letter-spacing:.08em; }

.bigBtn, #heroUpgradeBtn, .fortressUpgradeCard button { border:1px solid rgba(255,239,171,.78) !important; background:linear-gradient(180deg,#ffd65d,#f08a1f) !important; color:#211307 !important; box-shadow:0 5px 0 #8f4514,0 12px 30px rgba(0,0,0,.32) !important; letter-spacing:.06em; transition:transform .18s,filter .18s,box-shadow .18s; }
.bigBtn:hover, #heroUpgradeBtn:hover:not(:disabled), .fortressUpgradeCard button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 7px 0 #8f4514,0 16px 36px rgba(0,0,0,.38) !important; }
#startGameBtn { position:relative; z-index:1; min-width:min(100%,310px); margin:0 !important; }

#upgradeScreen .menuBox { max-height:min(94vh,760px) !important; }
.upgradeHeader { padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.upgradeHeader h2 { color:#f2f6fb; font-size:clamp(20px,3vw,30px) !important; letter-spacing:-.03em; }
#coins { border:1px solid rgba(255,238,163,.55); background:linear-gradient(180deg,#ffd862,#e99125) !important; box-shadow:0 4px 0 #87491a,0 10px 22px rgba(0,0,0,.28) !important; }
.upgradeTab { border-radius:8px !important; letter-spacing:.08em; }
.fortressUpgradeCard, .heroUpgradeCard, #heroDetail { border-color:rgba(255,255,255,.1) !important; background:linear-gradient(145deg,rgba(30,43,62,.98),rgba(10,16,26,.98)) !important; }
.heroUpgradeCard.selected { border-color:rgba(255,201,74,.8) !important; box-shadow:inset 3px 0 0 var(--sf-gold),0 0 24px rgba(255,171,31,.12) !important; }

#pauseBtn { top:112px !important; right:65px !important; z-index:17 !important; min-width:42px; height:42px; padding:0 12px !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:10px !important; background:rgba(7,11,19,.9) !important; box-shadow:0 8px 24px rgba(0,0,0,.35) !important; font-size:10px !important; }
#pauseOverlay { z-index:28 !important; background:rgba(2,5,10,.66) !important; backdrop-filter:blur(8px); }
#pauseOverlay .pauseBox { border:1px solid rgba(255,255,255,.16) !important; border-top:2px solid var(--sf-gold) !important; border-radius:14px !important; background:rgba(7,11,19,.95) !important; box-shadow:var(--sf-shadow) !important; }

#tutorialOverlay { z-index:32 !important; }
#tutorialBox { bottom:24px !important; border:1px solid rgba(255,201,74,.52) !important; border-radius:11px !important; background:rgba(5,9,16,.96) !important; box-shadow:0 20px 50px rgba(0,0,0,.55) !important; }
#tutorialTitle { color:var(--sf-gold); letter-spacing:.12em; }

#message { z-index:35 !important; width:min(86%,720px); padding:34px 30px; border:1px solid rgba(255,255,255,.14); border-top:2px solid var(--sf-gold); border-radius:18px; background:linear-gradient(155deg,rgba(22,32,48,.98),rgba(6,10,17,.98)); box-shadow:var(--sf-shadow); font-size:clamp(28px,5vw,54px) !important; }
#message small { display:block; margin-top:14px; color:var(--sf-muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-shadow:none; }
#restart { z-index:36 !important; top:calc(50% + 98px) !important; min-width:220px; border:1px solid rgba(255,239,171,.78) !important; border-radius:10px !important; background:linear-gradient(180deg,#ffd65d,#f08a1f) !important; box-shadow:0 5px 0 #8f4514 !important; }

.sf-boot { position:absolute; inset:0; z-index:80; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,rgba(38,105,174,.24),transparent 40%),#03050a; transition:opacity .55s ease,visibility .55s ease; }
.sf-boot.hidden { opacity:0; visibility:hidden; }
.sf-boot__inner { width:min(78vw,460px); text-align:center; }
.sf-boot__mark { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 20px; border:1px solid rgba(255,201,74,.62); border-radius:18px; background:linear-gradient(145deg,rgba(255,201,74,.14),rgba(255,111,27,.04)); color:var(--sf-gold); font-size:34px; box-shadow:0 0 34px rgba(255,151,30,.15); }
.sf-boot strong { display:block; color:#f4f8fc; font-size:20px; letter-spacing:.16em; }
.sf-boot span { display:block; margin-top:9px; color:#7f91a6; font-size:9px; font-weight:800; letter-spacing:.2em; }
.sf-boot__bar { height:3px; margin-top:26px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.sf-boot__bar i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sf-blue),#fff,var(--sf-gold)); box-shadow:0 0 15px rgba(255,201,74,.55); animation:sf-load 1.15s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes sf-load { to { width:100% } }

html[dir="rtl"] #titleScreen .menuBox, html[dir="rtl"] .heroUpgradeCard, html[dir="rtl"] .fortressUpgradeCard { text-align:right !important; }
html[dir="rtl"] #weaponPanel { left:auto !important; right:14px !important; }
html[dir="rtl"] .sf-control-deck { right:auto; left:14px; }
html[dir="rtl"] .sf-mission { right:auto; left:14px; text-align:right; }
html[dir="rtl"] #selectedHeroBar, html[dir="rtl"] .sf-combo { left:auto !important; right:190px !important; }

@media (max-width:900px), (pointer:coarse) {
  #game { border-radius:0; border:0; }
  #top { top:6px !important; width:calc(100% - 100px) !important; gap:4px !important; }
  #top .panel { min-width:0 !important; padding:7px 8px 10px !important; border-radius:7px !important; font-size:7px !important; letter-spacing:.04em !important; }
  #timer { min-width:128px !important; max-width:35vw !important; }
  .sf-healthbar { left:7px; right:7px; bottom:4px; }
  #turnHud { top:44px !important; min-width:176px !important; padding:5px 9px !important; font-size:7px !important; }
  #weaponPanel { left:5px !important; top:76px !important; width:106px !important; max-height:calc(100% - 160px) !important; padding:4px !important; gap:3px !important; border-radius:8px !important; }
  #weaponPanel .weaponMiniTitle { padding:3px 2px !important; font-size:7px !important; }
  #weaponPanel .card { min-height:38px !important; padding:5px 3px 5px 31px !important; border-radius:6px !important; }
  #weaponPanel .card b { font-size:8px !important; }
  #weaponPanel .card small { font-size:6px !important; }
  #weaponPanel .miniHeroIcon { left:4px !important; top:6px !important; width:24px !important; height:26px !important; font-size:12px !important; }
  #selectedHeroBar { left:112px !important; bottom:83px !important; max-width:calc(100% - 225px); overflow:hidden; padding:5px 7px !important; font-size:6px !important; white-space:nowrap; text-overflow:ellipsis; }
  .sf-control-deck { top:76px; right:5px; gap:4px; }
  .sf-icon-button { width:34px; height:34px; border-radius:7px; font-size:13px; }
  #pauseBtn { top:76px !important; right:43px !important; width:34px; min-width:34px; height:34px; overflow:hidden; padding:0 !important; font-size:0 !important; }
  #pauseBtn::before { content:"Ⅱ"; font-size:12px; }
  .sf-mission { right:5px; bottom:84px; width:154px; padding:7px 8px; border-radius:7px; }
  .sf-mission__top, .sf-mission p { display:none; }
  .sf-mission strong { margin:0; font-size:8px; }
  .sf-mission__bar { height:3px; margin-top:5px; }
  .sf-combo { left:112px; top:78px; padding:5px 7px; font-size:7px; }
  #mobileMovePad { left:max(8px,env(safe-area-inset-left)) !important; bottom:max(8px,env(safe-area-inset-bottom)) !important; gap:7px !important; }
  .mobileGameBtn { width:54px !important; height:54px !important; border:1px solid rgba(255,255,255,.42) !important; border-radius:16px !important; background:linear-gradient(180deg,rgba(31,43,62,.92),rgba(8,13,22,.92)) !important; box-shadow:0 8px 24px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08) !important; }
  #mobileFire { width:72px !important; height:72px !important; border:2px solid rgba(255,215,117,.72) !important; background:radial-gradient(circle at 34% 28%,#ffb142,#e64226 72%) !important; box-shadow:0 8px 0 #7e251d,0 16px 30px rgba(0,0,0,.48) !important; color:#fff6de !important; }
  #mobileFire:active, #mobileFire.pressed { transform:translateY(5px) scale(.97) !important; box-shadow:0 3px 0 #7e251d !important; }
  #mobileAimHint { bottom:9px !important; font-size:7px !important; }
  #titleScreen .menuBox { width:min(94vw,740px) !important; max-height:93vh; overflow:auto; padding:26px 28px !important; }
  #titleScreen h1 { font-size:clamp(38px,10vw,66px) !important; }
  #titleScreen h2 { margin:9px 0 11px !important; }
  #titleScreen p { margin-bottom:13px; font-size:10px; line-height:1.45; }
  .sf-title-kicker { margin-bottom:10px; font-size:7px; }
  .sf-title-stats { margin:12px 0 16px; }
  .sf-title-stats span { padding:5px 7px; font-size:7px; }
  #startGameBtn { min-height:44px; padding:10px 16px !important; font-size:13px !important; }
  #upgradeScreen .menuBox { padding:12px !important; }
  .sf-floating-damage { font-size:24px; }
  html[dir="rtl"] #weaponPanel { left:auto !important; right:5px !important; }
  html[dir="rtl"] .sf-control-deck { right:auto; left:5px; }
  html[dir="rtl"] .sf-mission { right:auto; left:5px; }
  html[dir="rtl"] #selectedHeroBar, html[dir="rtl"] .sf-combo { left:auto !important; right:112px !important; }
}

@media (max-height:540px) and (pointer:coarse) {
  #weaponPanel { max-height:calc(100% - 128px) !important; }
  #weaponPanel .card { min-height:34px !important; }
  #selectedHeroBar, .sf-mission { bottom:70px !important; }
  #mobileFire { width:64px !important; height:64px !important; }
  .mobileGameBtn { width:48px !important; height:48px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}