/* The menu stays on the left of the artwork in every interface language. */
#app .topbar,#app .menu,#app .menu-content{direction:ltr}
#app.wide .menu-content{margin-left:0;margin-right:auto;min-width:0}
#app.wide:not(.playing) .topbar{top:clamp(16px,2.5cqh,27px);left:5.5cqw;right:auto;width:46.28%;max-width:700px;padding:0;justify-content:flex-start;gap:clamp(12px,1.5cqw,24px)}
/* Menu content scrolls below the header; facts follow the controls in flow. */
#app.wide:not(.playing) .menu{top:clamp(90px,12cqh,116px);bottom:0;padding:0 5.5cqw max(20px,2.5cqh);display:flex;flex-direction:column;align-items:stretch;gap:24px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable}
#app.wide:not(.playing) .menu-content{position:relative;inset:auto;min-height:0;flex:none;justify-content:flex-start;padding:0}
#app.wide:not(.playing) .menu-bottom{position:static;inset:auto;display:flex;flex:0 0 auto;min-height:50px;margin-top:auto;padding-top:16px;gap:24px;flex-wrap:wrap}
#app.wide:not(.playing) .mission-facts{flex-wrap:wrap;column-gap:clamp(18px,2.5cqw,36px);row-gap:14px}
#app.wide:not(.playing) .mission-facts b{font-variant-numeric:tabular-nums}
#app.wide:not(.playing) .topbar .brand{flex-shrink:0;white-space:nowrap}
#app.wide:not(.playing) .top-actions{margin-left:auto;flex-shrink:0}
#app:not(.wide):not(.playing) .topbar{top:max(14px,env(safe-area-inset-top));left:7cqw;right:auto;width:max(174px,43cqw);max-width:86cqw;padding:0;flex-direction:column;align-items:flex-start;gap:10px}
#app:not(.wide):not(.playing) .top-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:5px;margin:0}
#app:not(.wide):not(.playing) .top-actions .account-button{grid-column:span 3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app:not(.wide):not(.playing) .top-actions .icon-button{grid-column:span 2;width:100%;min-width:0;padding:0;gap:2px}
#app:not(.playing) #langBtn{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:66px;padding:0 7px;direction:ltr;white-space:nowrap;line-height:1;flex-shrink:0}
#app:not(.wide):not(.playing) #langBtn{grid-column:span 3;min-width:0;width:100%;padding:0 3px;gap:4px}
#app #langBtn .language-code{position:static;display:block;flex:none;color:var(--paper);font:700 clamp(14px,calc(2.6 * var(--u)),16px)/1 var(--magic-text);direction:ltr;letter-spacing:.02em}
#app #langBtn .language-globe{display:block;width:16px;height:16px;flex:none}
#app:not(.wide):not(.playing) .menu-content{top:max(152px,52cqw);padding-top:0}
#app .menu-briefing{flex-shrink:0;text-align:left;min-width:0}
#app:not(.wide) .menu-briefing{width:56%;align-self:flex-start}
#app:not(.wide) .menu-briefing h1{font-size:calc(8.7 * var(--u));line-height:.94;letter-spacing:-.055em;white-space:normal}
#app:not(.wide) .menu-briefing h1>span{font-size:1.16em}
#app:not(.wide) .menu-briefing .eyebrow{line-height:1.5;letter-spacing:.06em;margin-bottom:calc(3 * var(--u))}
#app:not(.wide) .menu-briefing .title-sub{line-height:1.6;letter-spacing:.08em}
#app:not(.wide) .menu-briefing .intro{max-width:100%;margin-top:calc(3 * var(--u));line-height:1.6}
#app:not(.wide) .menu-briefing .operator-tag{line-height:1.5;letter-spacing:0;align-items:flex-start}
#app .israel-flag{flex-shrink:0}
html[dir=rtl] #app :is(.menu-briefing,.launch-panel){direction:rtl;text-align:right}
html[dir=rtl] #app .menu-briefing h1{direction:ltr;text-align:left}

/* Static reflections and luminous edges: no animated blur over the game. */
#app{
  --glass-fill:linear-gradient(135deg,#f2fff51f 0%,#b3cbbb0b 44%,#06140e38 100%),#0b1c14a6;
  --glass-edge:#dae9db52;
  --glass-shadow:inset 0 1px 1px #f5fff459,inset 0 -1px 1px #bedcc51a,0 12px 30px #0004;
}
#app :is(.setup-grid button,.primary-button,.continue-button,.secondary-button,.option-card,.level-grid button,.icon-button,.account-button,.help-button,.cinematic-skip,.store-link){
  background:var(--glass-fill);
  border:1px solid var(--glass-edge);
  border-radius:14px;
  box-shadow:var(--glass-shadow),0 0 14px #dcbd6810;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  transition:box-shadow .2s,border-color .2s,background-color .2s,transform .15s;
}
#app .setup-grid button{border-radius:16px}
#app .setup-grid small{color:#bfcebd}
#app .setup-grid b{color:#f6f6e8;overflow-wrap:anywhere}
#app :is(.primary-button,.touch-fire){
  color:#fff8e3;
  border-color:#ffd588a1;
  background:linear-gradient(130deg,#fff0cc59,#edb04a42 43%,#a36c1c38),#604619a3;
  box-shadow:inset 0 1px 1px #fff4d5a3,inset 0 -1px 2px #e6aa3c40,0 0 22px #f2ad3838,0 8px 28px #0004;
  text-shadow:0 1px 3px #32230b;
}
#app .play-triangle{border-left-color:currentColor}
#app .button-arrow{color:#ffe0a3}
#app :is(.option-card.active,.level-grid button.active,.difficulty-option.active){border-color:#ffd588b8;background:linear-gradient(135deg,#ffe5a42b,#b5914824),#16241ac7;box-shadow:var(--glass-shadow),0 0 18px #eab45025}
#app .menu-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#app .menu-links .help-button{min-width:0;min-height:42px;padding:8px 5px;justify-content:center;gap:5px;line-height:1.4;flex-wrap:wrap}
#app .store-link{padding:11px 14px;line-height:1.5;color:#e9dab7;text-decoration:none}
#app .top-actions{padding:5px;background:#14241b55;border:1px solid #d6e5d52b;border-radius:18px;box-shadow:inset 0 1px #ffffff1a}
#app .top-actions :is(.icon-button,.account-button){min-height:36px;border-radius:12px}
#app .top-actions .icon-button{min-width:36px}
#app .account-button{font-size:max(11px,calc(2.4 * var(--u)))}
#app .modal{background:#020a0878;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#app .modal-card{background:linear-gradient(135deg,#b2cdb52e,#132c21cc 40%,#08170fe6);border:1px solid #e2eed062;border-radius:24px;box-shadow:inset 0 1px 1px #f4ffe766,0 24px 80px #0009,0 0 35px #b6cd8c13;-webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%)}
#app :is(.account-input,.display-select,.episode-select){background:#091b139e;border-color:#c4d7be4f;border-radius:12px;box-shadow:inset 0 1px 8px #0003}
#app :is(.hud-bottom,.mission-chip,.boss-hud,.toast,.voice-caption){background:var(--glass-fill);border:1px solid #d7e7cf4d;border-radius:16px;box-shadow:var(--glass-shadow)}
#app .touch-controls button,#app .move-pad{background:linear-gradient(135deg,#f0ffe526,#b8d4b50d 50%,#06120b63),#1022198c;border-color:#e5edcb7d;box-shadow:inset 0 1px 2px #f9ffdf70,0 5px 18px #0005,0 0 12px #cde3a917}
#app .touch-controls .touch-fire{background:linear-gradient(135deg,#ffe3aa57,#b87f2d33),#443919a8!important;border-color:#ffd08ca6!important;box-shadow:inset 0 1px 2px #fff0c6b0,0 0 20px #efb95238,0 8px 20px #0005}
#app .touch-controls button:active,#app .touch-sprint[aria-pressed=true]{border-color:#ffe5a6;box-shadow:inset 0 1px 3px #fff3c6,0 0 25px #f2bd6170}
#app :is(button,a):focus-visible{outline:2px solid #ffe3a5;outline-offset:3px;box-shadow:var(--glass-shadow),0 0 22px #f0bc5759}
#app button:disabled{cursor:not-allowed;opacity:.5;filter:none;transform:none;box-shadow:inset 0 1px #ffffff15}
#app .level-grid button.locked{color:#aab5a5;background:#122018a8;border-color:#c3d0bc26}
#app .level-grid button small{font-size:max(10px,calc(1.6 * var(--u)));line-height:1.3}
#app .level-grid button{height:auto;min-height:62px;padding:10px 3px}
#app .level-grid.training-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#app .lives-meter{display:flex;align-items:center;gap:7px;margin-top:5px;line-height:1;white-space:nowrap;direction:ltr;color:#f1cc85}
#app #livesIcons{display:flex;gap:3px;font:13px var(--magic-text);letter-spacing:0}
#app #livesIcons .spent{color:#8c9c8d;opacity:.45}
#app #livesValue{font:10px var(--magic-text);color:#e8ead6}
#app .lives-meter.last-life{color:#ffb38f}
#app:not(.wide) .hud-bottom{height:max(84px,calc(21 * var(--u)))}
#app:not(.wide) .combat-status{bottom:max(112px,calc(28 * var(--u)))}
#app.wide .hud-bottom{height:112px}
#app.wide .voice-caption{bottom:164px}
#app.playing :is(.icon-button,.hud-bottom,.touch-controls button,.move-pad,.mission-chip,.boss-hud){-webkit-backdrop-filter:none;backdrop-filter:none}
@media(hover:hover){
  #app :is(.setup-grid button,.primary-button,.continue-button,.secondary-button,.option-card,.level-grid button,.icon-button,.account-button,.help-button,.store-link):not(:disabled):hover{filter:none;border-color:#ffe2aabd;box-shadow:inset 0 1px 2px #fff7df94,0 0 22px #eeb65340,0 10px 28px #0005;transform:translateY(-1px)}
}
@media(prefers-reduced-motion:reduce){#app :is(button,a){transition:none}#app button:hover{transform:none}}
@media(prefers-reduced-transparency:reduce){#app :is(button,.store-link,.modal-card,.hud-bottom){-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#14251c}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#app :is(button,.store-link,.modal-card){background-color:#14251ce6}}

/* A visible device switch in both layouts, including phones and narrow panels. */
#app .format-button{display:flex;justify-content:center;align-items:center;gap:0;width:56px;min-width:56px;min-height:42px;padding:4px!important;line-height:1;direction:ltr}
#app .format-button .device-icon{width:36px;height:21px;flex:none;stroke-width:1.6;overflow:hidden}
#app .device-desktop,#app .device-mobile{opacity:.45}
#app [data-device=desktop] .device-desktop,#app [data-device=mobile] .device-mobile{opacity:1;stroke:#ffe1a5}
#app.playing .topbar{gap:8px}
#app.playing .top-actions{gap:5px;flex-shrink:0}
#app.playing .top-actions .icon-button{width:42px;min-width:38px;height:42px}
#app.playing .top-actions .format-button{width:56px;min-width:56px}
#app.playing .brand{min-width:0;flex-shrink:1}

/* Status portrait replaces the old lives text in the lower left corner. */
#app{--hud-height:max(100px,25cqw);--hud-bottom:5cqw}
#app .operator-status{position:absolute;left:4cqw;bottom:var(--hud-bottom);margin-bottom:env(safe-area-inset-bottom);width:20cqw;max-width:112px;padding:5px;display:flex;flex-direction:column;align-items:stretch;border:1px solid #d7e7cf70;border-radius:12px;background:var(--glass-fill);box-shadow:var(--glass-shadow);direction:ltr}
#app .operator-face{width:100%;aspect-ratio:1;background:#101c15 url('assets/magic/characters.webp') 0 0/200% 200% no-repeat;border-radius:8px;border:1px solid #e6e8c83d;transition:filter .15s,box-shadow .15s}
#app .operator-face[data-frame="1"]{background-position:100% 0}
#app .operator-face[data-frame="2"]{background-position:0 100%}
#app .operator-face[data-frame="3"]{background-position:100% 100%}
#app .operator-face.is-hit{box-shadow:inset 0 0 16px #ed423eaa;filter:brightness(1.12) saturate(1.15)}
#app .operator-face[data-state=down]{filter:grayscale(.8) brightness(.65)}
#app .operator-status .lives-meter{justify-content:center;flex-wrap:wrap;gap:3px 5px;margin:5px 0 1px;line-height:1.1}
#app .operator-status #livesIcons{font-size:11px;gap:2px}
#app .operator-status #livesValue{font-size:12px;font-weight:700}
#app:not(.wide) .hud-bottom{left:auto;right:4cqw;transform:none;width:70cqw;height:var(--hud-height);bottom:var(--hud-bottom);padding:10px 8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr);gap:7px}
#app:not(.wide) .hud-bottom :is(.hud-health,.hud-slot,.hud-ammo){min-width:0;width:auto;margin:0;padding-left:7px;gap:0}
#app:not(.wide) .hud-health{padding-left:0!important}
#app:not(.wide) .health-icon{display:none}
#app:not(.wide) .hud-bottom b{font-size:clamp(18px,5.6cqw,31px);white-space:nowrap;letter-spacing:-1px}
#app:not(.wide) .hud-bottom em{font-size:clamp(10px,2.5cqw,14px)}
#app:not(.wide) .hud-bottom small{font-size:clamp(8px,2.2cqw,12px);line-height:1.25;letter-spacing:0;overflow-wrap:anywhere}
#app:not(.wide) .hud-slot #keyText{font-size:clamp(8px,2cqw,11px);line-height:1.2}
#app:not(.wide) .kills-slot{display:none}
#app:not(.wide) .combat-status{left:26cqw;bottom:calc(var(--hud-bottom) + var(--hud-height) + 7px);font:clamp(9px,2.3cqw,12px)/1.2 var(--magic-text);letter-spacing:0}
#app:not(.wide) .voice-caption{bottom:calc(var(--hud-bottom) + var(--hud-height) + 30px)}
#app.wide{--hud-height:112px;--hud-bottom:34px}
#app.wide .operator-status{left:28px;width:102px;padding:6px}
#app.wide .operator-status #livesIcons{font-size:13px}
#app.wide .operator-status #livesValue{font-size:13px}
#app.wide .hud-bottom{height:var(--hud-height);bottom:var(--hud-bottom)}
#app.wide .combat-status{left:50%;transform:translateX(-50%);bottom:calc(var(--hud-bottom) + var(--hud-height) + 8px)}

/* SVGs stay inside the circular hit areas in every language. */
#app .touch-controls button{box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 2px;aspect-ratio:1;min-width:52px;min-height:52px;line-height:1;container-type:inline-size}
#app .touch-controls .control-icon{display:block;position:static;width:44%;height:44%;max-width:36px;max-height:36px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:hidden}
#app .touch-controls .touch-fire .control-icon{width:52%;height:52%;max-width:46px;max-height:46px}
#app .touch-controls button>small{display:block;position:static;max-width:82%;margin:0;font:700 clamp(7px,13cqw,11px)/1.1 var(--magic-text);letter-spacing:0;text-align:center;white-space:nowrap;flex:none}
#app:not(.wide){--control-floor:calc(var(--hud-bottom) + var(--hud-height) + 22px);--small-control:max(52px,13cqw)}
#app:not(.wide) .move-pad{bottom:var(--control-floor)}
#app:not(.wide) .touch-fire{bottom:calc(var(--control-floor) + 8px)}
#app:not(.wide) .touch-use{right:25cqw;bottom:var(--control-floor);width:var(--small-control);height:var(--small-control)}
#app:not(.wide) .touch-weapon{right:25cqw;bottom:calc(var(--control-floor) + var(--small-control) + 12px);width:var(--small-control);height:var(--small-control)}
#app:not(.wide) .touch-reload{bottom:calc(var(--control-floor) + max(52px,17cqw) + 20px);width:var(--small-control);height:var(--small-control)}
#app:not(.wide) .touch-sprint{bottom:calc(var(--control-floor) + 22cqw + 16px);width:var(--small-control);height:var(--small-control)}
#app:not(.wide) .touch-map{bottom:calc(var(--control-floor) + 11cqw);width:var(--small-control);height:var(--small-control)}
#app.wide .touch-controls :is(.touch-use,.touch-weapon,.touch-reload,.touch-sprint,.touch-map){width:64px;height:64px}

/* Blood feedback is rendered behind all HUD/readable controls. */
#app #damageFlash{z-index:4;pointer-events:none;box-shadow:inset 0 0 14vmin 5vmin #8f070ae0;background:radial-gradient(ellipse at 0% 16%,#87090ce0 0 3%,transparent 14%),radial-gradient(ellipse at 100% 32%,#9b0e12d9 0 4%,transparent 17%),radial-gradient(ellipse at 7% 100%,#710408e6 0 7%,transparent 23%),radial-gradient(ellipse at 93% 96%,#a61114d9 0 6%,transparent 22%),radial-gradient(ellipse at 36% 0%,#7e060bbd 0 2%,transparent 11%),radial-gradient(circle at 12% 28%,#a70e13b8 0 .7%,transparent 1.7%),radial-gradient(circle at 86% 19%,#a70e13b8 0 .9%,transparent 1.8%),radial-gradient(circle at 81% 77%,#a70e1380 0 1.1%,transparent 2%),linear-gradient(#a90b1526,#930b1021);transition:opacity .08s linear}
#app:not(.playing) #damageFlash{opacity:0!important}
@media(prefers-reduced-motion:reduce){#app .operator-face,#app #damageFlash{transition:none}}
@container(max-width:850px){
 #app.wide .operator-status{left:14px;width:74px;padding:4px}
 #app.wide .hud-bottom{width:76%;left:auto;right:14px;transform:none;gap:12px;padding:10px 12px}
 #app.wide .hud-health{min-width:100px}
 #app.wide .hud-slot{min-width:65px;padding-left:12px}
 #app.wide .hud-ammo{padding-left:12px}
 #app.wide .hud-bottom small{font-size:9px}
 #app.wide .hud-bottom b{font-size:25px}
}
/* Explicit wide mode can be selected before a phone is rotated. Keep the
   switch accessible and make its letterboxed HUD fit that temporary viewport. */
@container(max-width:600px){
 #app.wide .topbar{padding:6px 10px}
 #app.wide:not(.playing) .topbar{top:8px;left:10px;right:10px;width:auto;max-width:none;gap:8px}
 #app.wide .brand{font-size:12px}
 #app.wide .brand-mark{display:none}
 #app.wide .top-actions{gap:3px;padding:3px}
 #app.wide .top-actions .icon-button{height:38px;min-height:38px;width:36px;min-width:32px}
 #app.wide .top-actions .format-button{width:54px;min-width:54px}
 #app.wide .top-actions .account-button{font-size:10px;min-width:40px}
 #app.wide .mission-chip{top:60px;left:10px;padding:6px;max-width:65%}
 #app.wide .mission-chip b{font-size:8px;letter-spacing:0}
 #app.wide .mission-chip small{font-size:8px;margin-top:3px}
 #app.wide .hud #minimap{right:10px;top:60px;width:62px;height:62px}
 #app.wide .operator-status{left:10px;bottom:8px;width:60px;padding:3px}
 #app.wide .operator-status .lives-meter{gap:2px;margin-top:2px}
 #app.wide .operator-status #livesIcons{font-size:9px}
 #app.wide .operator-status #livesValue{font-size:10px}
 #app.wide .hud-bottom{right:10px;bottom:8px;width:calc(100% - 88px);height:72px;gap:6px;padding:6px;display:grid;grid-template-columns:1fr .65fr 1fr}
 #app.wide .hud-bottom :is(.hud-health,.hud-slot,.hud-ammo){min-width:0;margin:0;padding-left:5px;gap:0}
 #app.wide .hud-bottom :is(.kills-slot,.health-icon){display:none}
 #app.wide .hud-bottom b{font-size:20px;white-space:nowrap}
 #app.wide .hud-bottom em{font-size:10px}
 #app.wide .hud-bottom small,#app.wide .hud-slot #keyText{font-size:8px;letter-spacing:0}
 #app.wide .combat-status{bottom:84px;font-size:9px;white-space:nowrap}
 #app.wide .hud-keyguide{display:none}
 #app.wide .voice-caption{left:10%;right:10%;bottom:98px;font-size:11px}
 #app.wide .touch-controls button{width:52px;height:52px}
 #app.wide .move-pad{left:10px;bottom:94px;width:62px;height:62px}
 #app.wide .move-pad span{left:19px;top:19px;width:24px;height:24px}
 #app.wide .touch-fire{right:10px;bottom:94px}
 #app.wide .touch-use{right:68px;bottom:94px}
 #app.wide .touch-weapon{right:68px;bottom:152px}
 #app.wide .touch-reload{right:10px;bottom:152px}
 #app.wide .touch-map{left:78px;bottom:94px}
 #app.wide .touch-sprint{left:78px;bottom:152px}
}

.about-link{display:block;text-align:center;font-size:12px;line-height:1.5;color:var(--muted);text-underline-offset:3px;padding:6px 0}.about-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}