@font-face {
  font-family: "Kernel Mono";
  src: local("Cascadia Mono"), local("Consolas");
}



:root {
  color-scheme: dark;
  --bg: #080a10;
  --panel: #10141e;
  --ink: #f4f1ea;
  --muted: #9b9a9a;
  --cyan: #62d6d0;
  --violet: #8d27ff;
  --amber: #ffb431;
  --line: rgba(98, 214, 208, .34);
  --ui-micro: .6875rem;
  --ui-small: .75rem;
  --ui-body: .8125rem;
  --ui-control: .8125rem;
  --ui-subtitle: .9375rem;
  --ui-title: clamp(2rem, 4vw, 4rem);
  --ui-touch: 44px;
  --desktop-shell-max: 2800px;
  --desktop-content-max: 1580px;
  font-family: "Kernel Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(141, 39, 255, .12), transparent 28rem),
    radial-gradient(circle at 82% 88%, rgba(98, 214, 208, .09), transparent 30rem),
    linear-gradient(135deg, #080a10, #0d111a 55%, #080a10);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

button, a { font: inherit; }
button { color: inherit; }

.game-shell {
  width: min(var(--desktop-shell-max), 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) clamp(10px, 1.35vw, 26px) max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

.game-header, .game-footer {
  width: var(--kr-stage-width, 100%);
  max-width: 100%;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.game-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 800;
}

.game-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--violet);
  box-shadow: 0 0 18px rgba(141, 39, 255, .32);
}

.game-brand b { color: var(--amber); }
.game-brand small { display: block; margin-top: 4px; color: var(--cyan); font-size:var(--ui-micro); letter-spacing: .16em; }

.game-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.game-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 30, .82);
  font-size:var(--ui-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.game-actions button:hover, .game-actions button:focus-visible { border-color: var(--cyan); background: rgba(98, 214, 208, .1); }

.game-frame {
  position: relative;
  width: var(--kr-stage-width, 100%);
  height: var(--kr-stage-height, auto);
  max-width: 100%;
  justify-self: center;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #090c14;
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
}

.game-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.12) 4px);
  mix-blend-mode: multiply;
}

canvas { display: block; width: 100%; height: 100%; aspect-ratio: auto; touch-action: none; }

.game-hud {
  position: absolute;
  z-index: 5;
  inset: 10px 12px auto;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr) minmax(210px, .9fr);
  align-items: stretch;
  gap: 12px;
  pointer-events: none;
  font-size: clamp(var(--ui-small), 1vw, .8rem);
  letter-spacing: .09em;
  text-shadow: 0 2px 8px #000;
}
.game-hud > div { min-width: 0; padding: 8px 10px; border-left: 2px solid var(--cyan); background: rgba(5,8,14,.78); backdrop-filter: blur(6px); }
.game-hud b, .game-hud strong { color: var(--amber); }
.game-hud i, .game-hud em { font-style: normal; }
.hud-character { display: flex; align-items: center; gap: 9px; }
.hud-character img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--violet); }
html[data-operator-skin="neon"] .hud-character img { border-color: var(--cyan); box-shadow: 0 0 14px rgba(98,214,208,.45); }
html[data-operator-skin="root"] .hud-character img { border-color: #ff5f87; box-shadow: 0 0 14px rgba(255,95,135,.45); }
.hud-character span { flex: 1; display: grid; gap: 3px; }
.hud-character small, .hud-mission small { color: var(--cyan); }
.hud-character i { display: block; height: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
.hud-character em { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--violet),var(--cyan)); transition: width .25s ease; }
.hud-mission { display: grid; gap: 4px; text-align: center; }
.hud-mission > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.hud-loadout { display: grid; gap: 4px; text-align: right; }
.hud-loadout span { display: flex; justify-content: space-between; gap: 8px; }
.hud-loadout b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.boss-hud { position: absolute; z-index: 6; top: 86px; left: 50%; width: min(520px, 70%); translate: -50% 0; padding: 8px 12px; background: rgba(7,8,13,.84); border: 1px solid rgba(255,95,135,.5); text-align: center; font-size:var(--ui-micro); letter-spacing: .12em; }
.boss-hud span { color: #ff8bab; }
.boss-hud i { display: block; height: 7px; margin-top: 6px; overflow: hidden; background: rgba(255,255,255,.1); }
.boss-hud b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ff5f87,var(--violet),var(--amber)); transition: width .18s ease; }

.game-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  background: rgba(4, 6, 12, .72);
  backdrop-filter: blur(7px);
  transition: opacity .22s ease, visibility .22s ease;
}
.game-overlay.is-visible { opacity: 1; visibility: visible; }

.boot-card {
  width: min(720px, 100%);
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,20,30,.96), rgba(20,12,32,.94));
  box-shadow: 12px 12px 0 rgba(141,39,255,.16), -8px -8px 0 rgba(98,214,208,.08);
  scrollbar-color: var(--cyan) rgba(255,255,255,.05);
}
.boot-card[data-active-screen="map"] { width:100%; }
.boot-card[data-active-screen="title"] { width:min(860px,calc(100vw - 48px)); }
.menu-screen[hidden] { display: none; }
.title-lockup { position: relative; padding: 10px 0 18px; text-align:center; }
.title-lockup::after { content: ""; display: block; width: min(620px,88%); height: 3px; margin:18px auto 0; background: linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent); box-shadow: 0 0 18px rgba(98,214,208,.4); }
.title-lockup__signal { display: block; margin-bottom: 10px; color: var(--amber); font-size:var(--ui-micro); font-weight: 900; letter-spacing: .2em; }
.title-logo { display:block; width:min(690px,100%); max-height:280px; margin:0 auto; object-fit:contain; object-position:center; filter:drop-shadow(0 0 24px rgba(141,39,255,.28)); }
.title-lockup p, .screen-copy { max-width: 62ch; color: #bbb8b2; font-size:.72rem; line-height: 1.65; }.title-lockup p { margin-inline:auto; }
.title-profile { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 13px; margin: 4px 0 18px; padding: 12px; border: 1px solid rgba(98,214,208,.24); border-radius: 9px; background: linear-gradient(90deg,rgba(98,214,208,.08),rgba(141,39,255,.08)); }
.title-profile img { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--violet); box-shadow: 0 0 20px rgba(141,39,255,.32); }
.title-profile span { display: grid; gap: 5px; }
.title-profile small { color: var(--cyan); font-size:var(--ui-micro); letter-spacing: .14em; }
.title-profile b { color: var(--ink); font-size:.75rem; }
.title-profile i { width: min(260px,100%); height: 5px; overflow: hidden; background: rgba(255,255,255,.1); }
.title-profile em { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--violet),var(--cyan)); }
.title-profile strong { color: var(--amber); font-size:var(--ui-micro); letter-spacing: .12em; text-align: right; }
.game-menu { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: 9px; }
.game-menu button { min-height: 76px; padding: 13px; border: 1px solid rgba(98,214,208,.25); border-radius: 8px; color: var(--ink); background: rgba(7,11,18,.72); text-align: left; cursor: pointer; transition: translate .16s ease,border-color .16s ease,background .16s ease; }
.game-menu button:hover,.game-menu button:focus-visible { translate: 0 -3px; border-color: var(--cyan); background: rgba(98,214,208,.1); }
.game-menu__primary { border-color: rgba(255,180,49,.58) !important; background: linear-gradient(135deg,rgba(255,180,49,.18),rgba(141,39,255,.12)) !important; }
.game-menu span,.game-menu small { display: block; }
.game-menu span { margin-bottom: 7px; color: var(--cyan); font-size:.72rem; font-weight: 900; letter-spacing: .12em; }
.game-menu__primary span { color: var(--amber); }
.game-menu small { color: var(--muted); font-size:var(--ui-micro); line-height: 1.45; }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(98,214,208,.2); }
.screen-head span { display: grid; gap: 4px; }
.screen-head small { color: var(--cyan); font-size:var(--ui-micro); letter-spacing: .16em; }
.screen-head b { font-family: Impact,Haettenschweiler,sans-serif; font-size: clamp(2rem,5vw,3.8rem); letter-spacing: .03em; text-transform: uppercase; }
.screen-head button { flex:none; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--cyan); background: rgba(8,12,18,.9); cursor: pointer; }
.screen-head--briefing { justify-content: flex-end; padding: 0 0 8px; border: 0; }
.world-map { position:relative; display:grid; gap:14px; margin-top:18px; padding:16px; border:1px solid rgba(98,214,208,.32); border-radius:10px; background-color:#07140f; background-image:radial-gradient(circle,rgba(255,207,105,.32) 0 2px,transparent 3px),linear-gradient(90deg,transparent 48%,rgba(98,214,208,.06) 49% 51%,transparent 52%),linear-gradient(transparent 48%,rgba(98,214,208,.05) 49% 51%,transparent 52%); background-size:46px 46px,24px 24px,24px 24px; box-shadow:inset 0 0 55px rgba(0,0,0,.72),0 0 28px rgba(98,214,208,.08); overflow-x:auto; overflow-y:hidden; scrollbar-color:var(--cyan) rgba(255,255,255,.06); }
.world-map::before,.world-map::after { content:""; position:absolute; pointer-events:none; border:2px solid rgba(255,180,49,.18); border-radius:20px; }
.world-selector { position:relative; z-index:2; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; }
.world-selector button { min-width:0; min-height:48px; padding:7px 4px; border:1px solid rgba(98,214,208,.24); color:var(--muted); background:rgba(5,8,14,.82); cursor:pointer; }
.world-selector button span,.world-selector button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.world-selector button span { color:var(--cyan); font-weight:900; }.world-selector button small { margin-top:3px; font-size:var(--ui-micro); }
.world-selector button.is-active { color:var(--ink); border-color:var(--amber); box-shadow:inset 0 -3px var(--amber); }
.world-map::before { inset:32px 8% 34%; }.world-map::after { inset:38% 4% 28px 14%; border-color:rgba(98,214,208,.16); }
.map-sector { position:relative; z-index:1; display:grid; grid-template-columns:150px 1fr; align-items:center; gap:14px; min-width:1000px; min-height:116px; padding:12px; border:1px solid color-mix(in srgb,var(--sector-color) 32%,#19322a); border-radius:8px; background:linear-gradient(90deg,rgba(2,12,8,.94),rgba(7,25,18,.82)); box-shadow:inset 4px 0 var(--sector-color),0 5px 18px rgba(0,0,0,.28); }
.map-sector:nth-child(even) { grid-template-columns:1fr 150px; }.map-sector:nth-child(even) header { grid-column:2; grid-row:1; text-align:right; }.map-sector:nth-child(even) .map-sector__nodes { grid-column:1; grid-row:1; }
.map-sector header span,.map-sector header strong,.map-sector header small { display:block; }.map-sector header span { color:var(--sector-color); font-size:var(--ui-micro); font-weight:900; letter-spacing:.14em; }.map-sector header strong { margin:7px 0; font-size:.69rem; line-height:1.3; }.map-sector header small { color:var(--muted); font-size:var(--ui-micro); }
.map-sector header small { overflow:hidden; margin-top:3px; text-overflow:ellipsis; white-space:nowrap; }
.map-sector__nodes { position:relative; display:grid; grid-template-columns:repeat(5,minmax(74px,1fr)); align-items:center; gap:18px; padding-bottom:18px; }.map-sector__nodes::before { content:""; position:absolute; z-index:0; left:5%; right:5%; bottom:6px; height:3px; background:linear-gradient(90deg,var(--sector-color),#ffb431,var(--sector-color)); box-shadow:0 0 10px color-mix(in srgb,var(--sector-color) 38%,transparent); }.map-sector__nodes::after { content:""; position:absolute; z-index:0; left:5%; right:5%; bottom:2px; height:11px; background:radial-gradient(circle,var(--sector-color) 0 2px,transparent 3px) left center/25% 11px repeat-x; opacity:.7; }
.map-node { position:relative; z-index:1; align-self:center; min-height:82px; padding:9px 7px; border:1px solid var(--node-color,var(--line)); border-radius:5px; color:var(--ink); background:rgba(6,15,15,.98); text-align:center; cursor:pointer; box-shadow:0 0 0 4px rgba(5,12,10,.96),0 0 18px color-mix(in srgb,var(--node-color,var(--cyan)) 16%,transparent); }
.map-node span,.map-node small,.map-node strong { display: block; }
.map-node span { color: var(--node-color,var(--cyan)); font-size:var(--ui-micro); font-weight: 900; letter-spacing: .1em; }
.map-node strong { margin: 7px 0 5px; font-size:var(--ui-micro); line-height: 1.25; }
.map-node small { color: var(--muted); font-size:var(--ui-micro); }
.map-node.is-boss { min-height:92px; border-width:2px; border-radius:50%; clip-path:none; }
.map-node.is-boss::after { content: "BOSS"; position: absolute; z-index:3; top: 5px; right: 9px; padding: 3px 6px; border-radius:2px; color: #080a10; background: var(--amber); font-size:var(--ui-micro); font-weight: 900; line-height:1; }
.map-node:disabled { filter: grayscale(1); opacity: .32; cursor: not-allowed; box-shadow: none; }
.map-node:not(:disabled):hover,.map-node:not(:disabled):focus-visible { translate:0 -3px; background:color-mix(in srgb,var(--node-color,var(--cyan)) 18%,#0b1110); }
.skin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.skin-card { position: relative; min-height: 220px; padding: 16px 12px; overflow: hidden; border: 1px solid var(--skin-color,var(--line)); border-radius: 10px; color: var(--ink); background: radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--skin-color,var(--cyan)) 25%,transparent),transparent 34%),rgba(7,10,17,.9); text-align: center; cursor: pointer; }
.skin-card__avatar { position: relative; display: grid; width: 92px; height: 92px; margin: 0 auto 14px; place-items: center; border: 2px solid var(--skin-color); border-radius: 50%; box-shadow: 0 0 28px color-mix(in srgb,var(--skin-color) 38%,transparent); }
.skin-card__avatar img { width: 82px; height: 82px; border-radius: 50%; filter: var(--skin-filter,none); }
.skin-card__avatar::before,.skin-card__avatar::after { content:""; position:absolute; pointer-events:none; border:2px solid var(--skin-color); opacity:.78; }
.skin-card[data-skin-choice="void"] .skin-card__avatar::before { inset:-8px; border-radius:42% 58% 48% 52%; rotate:18deg; }
.skin-card[data-skin-choice="neon"] .skin-card__avatar::before { width:34px; height:68px; left:-25px; top:9px; border-width:3px 0 3px 3px; transform:skewY(-24deg); }
.skin-card[data-skin-choice="neon"] .skin-card__avatar::after { width:34px; height:68px; right:-25px; top:9px; border-width:3px 3px 3px 0; transform:skewY(24deg); }
.skin-card[data-skin-choice="root"] .skin-card__avatar::before { width:25px; height:25px; left:5px; top:-14px; border-width:3px 0 0 3px; rotate:35deg; }
.skin-card[data-skin-choice="root"] .skin-card__avatar::after { width:25px; height:25px; right:5px; top:-14px; border-width:3px 3px 0 0; rotate:-35deg; }
.skin-card[data-skin-choice="quantum"] .skin-card__avatar::before { inset:-11px -25px; border-radius:50%; transform:rotateX(66deg) rotateZ(-12deg); box-shadow:0 0 18px var(--skin-color); }
.skin-card[data-skin-choice="chrome"] .skin-card__avatar::before { inset:-7px; clip-path:polygon(50% 0,94% 24%,100% 72%,50% 100%,0 72%,6% 24%); background:linear-gradient(135deg,transparent 35%,color-mix(in srgb,var(--skin-color) 24%,transparent)); }
.skin-card[data-skin-choice="apex"] .skin-card__avatar::before { width:70px; height:24px; left:10px; top:-20px; border:0; background:linear-gradient(135deg,transparent 12%,var(--skin-color) 13% 25%,transparent 26% 38%,var(--skin-color) 39% 61%,transparent 62% 74%,var(--skin-color) 75% 87%,transparent 88%); clip-path:polygon(0 100%,10% 0,35% 58%,50% 0,65% 58%,90% 0,100% 100%); }
.skin-card__special { min-height:2.7em; color:var(--skin-color) !important; }
.skin-card span,.skin-card small,.skin-card strong { display: block; }
.skin-card strong { color: var(--skin-color); font-size:.72rem; letter-spacing: .08em; }
.skin-card small { margin-top: 8px; color: var(--muted); font-size:var(--ui-micro); line-height: 1.45; }
.skin-card span { margin-top: 12px; color: var(--amber); font-size:var(--ui-micro); font-weight: 900; }
.skin-card.is-selected { box-shadow: inset 0 -4px var(--skin-color),0 0 24px color-mix(in srgb,var(--skin-color) 22%,transparent); }
.skin-card:disabled { filter: grayscale(.8); opacity: .42; cursor: not-allowed; }
.skill-panel { margin-top:16px; padding:13px; border:1px solid rgba(98,214,208,.25); border-radius:9px; background:rgba(4,8,14,.64); }
.skill-panel__head { display:flex; justify-content:space-between; gap:12px; color:var(--cyan); font-size:var(--ui-micro); letter-spacing:.12em; }.skill-panel__head strong { color:var(--ink); }.skill-panel__head b { color:var(--amber); }
.skill-panel__head button { margin-left:auto; padding:5px 9px; border:1px solid rgba(255,95,135,.55); border-radius:5px; color:#ff8bab; background:rgba(255,95,135,.08); font:inherit; cursor:pointer; }
.skill-panel__head button:disabled { opacity:.35; cursor:not-allowed; }
.skill-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:11px; }.skill-card { min-height:94px; padding:10px; border:1px solid color-mix(in srgb,var(--skill-color) 55%,transparent); border-radius:7px; color:var(--ink); background:rgba(12,16,25,.88); text-align:left; cursor:pointer; }.skill-card span,.skill-card strong,.skill-card small { display:block; }.skill-card span { color:var(--skill-color); font-size:var(--ui-micro); font-weight:900; }.skill-card strong { margin:6px 0; font-size:.8rem; }.skill-card small { color:var(--muted); font-size:var(--ui-micro); line-height:1.4; }.skill-card:disabled { opacity:.48; cursor:not-allowed; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size:.7rem; letter-spacing: .16em; }
.boot-card h1 { margin: 0; font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .88; letter-spacing: .01em; text-transform: uppercase; }
.boot-card h1 span { color: var(--violet); }
.boot-card > p:not(.eyebrow) { max-width: 50ch; color: #c0bdb6; line-height: 1.65; }
.loadout-panel { margin: 18px 0 12px; padding: 12px; border: 1px solid rgba(98,214,208,.28); border-radius: 8px; background: rgba(4,8,14,.56); }
.loadout-panel[hidden] { display: none; }
.loadout-panel__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--cyan); font-size:var(--ui-micro); font-weight: 900; letter-spacing: .14em; }
.loadout-panel__head b { color: var(--amber); }
.core-help { margin:0 0 10px !important; color:var(--muted) !important; font-size:var(--ui-micro); line-height:1.5 !important; }
.weapon-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.weapon-slot { display:grid; grid-template-rows:1fr auto; gap:6px; min-width:0; }
.weapon-option { min-height: 72px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: var(--ink); background: rgba(18,22,32,.9); text-align: left; cursor: pointer; }
.weapon-option span, .weapon-option small { display: block; }
.weapon-option span { margin-bottom: 5px; font-size:var(--ui-micro); font-weight: 900; letter-spacing: .08em; }
.weapon-option small { color: var(--muted); font-size:var(--ui-micro); line-height: 1.45; }
.weapon-option.is-selected { border-color: var(--weapon-color,var(--cyan)); box-shadow: inset 3px 0 var(--weapon-color,var(--cyan)), 0 0 18px color-mix(in srgb,var(--weapon-color,var(--cyan)) 20%,transparent); }
.weapon-option:disabled { opacity: .35; cursor: not-allowed; }
.weapon-upgrade { min-height:30px; border:1px solid color-mix(in srgb,var(--weapon-color) 55%,transparent); border-radius:6px; color:var(--weapon-color); background:rgba(4,8,14,.8); font:900 var(--ui-micro)/1 monospace; letter-spacing:.08em; cursor:pointer; }
.weapon-upgrade:hover,.weapon-upgrade:focus-visible { color:#071014; background:var(--weapon-color); }
.weapon-upgrade:disabled { opacity:.34; cursor:not-allowed; color:var(--muted); background:rgba(4,8,14,.8); }
.loadout-stats { min-height: 1.2em; margin: 9px 0 0 !important; color: #d4d1ca !important; font-size:var(--ui-micro); line-height: 1.5 !important; }
.controls-copy { display: grid; gap: 8px; margin: 20px 0; color: var(--muted); font-size:.72rem; }
kbd { display: inline-grid; min-width: 26px; min-height: 25px; margin-right: 4px; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #080b11; box-shadow: 0 2px 0 #000; }
.launch-button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 7px; color: #080a10; background: var(--amber); font-weight: 900; letter-spacing: .12em; cursor: pointer; box-shadow: 4px 4px 0 #7c4600; }
.launch-button:hover, .launch-button:focus-visible { translate: 2px 2px; box-shadow: 2px 2px 0 #7c4600; }
.game-pause-button { position:absolute; z-index:7; top:92px; right:18px; min-height:32px; padding:0 11px; border:1px solid rgba(98,214,208,.45); border-radius:6px; color:var(--cyan); background:rgba(5,8,14,.76); font:900 var(--ui-micro)/1 monospace; letter-spacing:.1em; cursor:pointer; backdrop-filter:blur(5px); }
.game-pause-button:hover,.game-pause-button:focus-visible { color:#071014; background:var(--cyan); }
.pause-screen > p:not(.eyebrow) { color:var(--muted); }
.pause-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
.pause-menu button { min-height:76px; padding:13px; border:1px solid rgba(98,214,208,.28); border-radius:8px; color:var(--ink); background:rgba(7,11,18,.82); text-align:left; cursor:pointer; }
.pause-menu button:hover,.pause-menu button:focus-visible { border-color:var(--cyan); background:rgba(98,214,208,.1); }
.pause-menu span,.pause-menu small { display:block; }.pause-menu span { color:var(--cyan); font-weight:900; letter-spacing:.1em; }.pause-menu small { margin-top:7px; color:var(--muted); font-size:var(--ui-micro); }
.pause-menu__primary { border-color:rgba(255,180,49,.58) !important; }.pause-menu__primary span { color:var(--amber); }

.touch-controls { --touch-scale:1; display: none; position: absolute; z-index: 7; inset: auto max(8px,calc(env(safe-area-inset-right) + 4px)) max(4px,calc(env(safe-area-inset-bottom) + 2px)) max(4px,calc(env(safe-area-inset-left) + 2px)); justify-content: space-between; align-items: flex-end; pointer-events: none; }
.touch-controls__move, .touch-controls__action { position:relative; display: flex; align-items: flex-end; gap: 9px; padding: 7px; border: 1px solid rgba(98,214,208,.09); border-radius: 24px; background: rgba(5,8,14,.17); scale:var(--touch-scale); opacity:.7; transition:opacity .14s ease,background .14s ease,border-color .14s ease; }
.touch-controls__move:has(.is-pressed), .touch-controls__action:has(.is-pressed), .touch-controls__move:has(.touch-stick:active) { opacity:.96; background:rgba(5,8,14,.28); border-color:rgba(98,214,208,.18); }
.touch-controls__move { transform:translate(var(--touch-move-x,0px),var(--touch-move-y,0px)); transform-origin:left bottom; }
.touch-controls__action { transform:translate(var(--touch-action-x,0px),var(--touch-action-y,0px)); transform-origin:right bottom; }
.touch-controls[data-layout="left"] { flex-direction:row-reverse; }.touch-controls[data-layout="left"] .touch-controls__move { transform-origin:right bottom; }.touch-controls[data-layout="left"] .touch-controls__action { transform-origin:left bottom; }
.touch-controls[data-layout="compact"] .touch-controls__move,.touch-controls[data-layout="compact"] .touch-controls__action { gap:5px; padding:5px; }
.touch-controls button { width: 72px; height: 68px; border: 1px solid rgba(98,214,208,.5); border-radius: 22px; color: var(--cyan); background: rgba(8,10,16,.38); backdrop-filter: blur(5px); box-shadow: inset 0 0 18px rgba(98,214,208,.08); font-size:1.2rem; font-weight: 900; opacity: .62; pointer-events: auto; touch-action: none; transition:opacity .12s ease,background .12s ease,scale .08s ease; }
.touch-controls__move button { font-size:0; }
.touch-controls__move button::before { content:"→"; display:block; font:900 1.2rem/1 "Kernel Mono",Consolas,monospace; transform-origin:center; }
.touch-controls__move [data-control="left"]::before { transform:rotate(180deg); }
.touch-stick { width:73px; height:73px; display:grid; place-items:center; border:1px solid rgba(98,214,208,.58); border-radius:50%; background:radial-gradient(circle,rgba(98,214,208,.15),rgba(8,10,16,.36) 64%); box-shadow:inset 0 0 18px rgba(98,214,208,.1),0 0 12px rgba(0,0,0,.18); pointer-events:auto; touch-action:none; }
.touch-stick::before,.touch-stick::after { content:""; position:absolute; background:rgba(98,214,208,.22); }.touch-stick::before { width:2px; height:82%; }.touch-stick::after { width:82%; height:2px; }
.touch-stick i { width:32px; height:32px; display:block; border:2px solid rgba(98,214,208,.85); border-radius:50%; background:rgba(12,25,37,.8); box-shadow:0 0 12px rgba(98,214,208,.24); transition:transform .04s linear; pointer-events:none; }
.touch-controls__move [data-control="down"]::before { content:"↓"; transform:none; }
.touch-controls__jump { width: 92px !important; height: 82px !important; border-radius: 50% !important; color: var(--amber) !important; border-color: rgba(255,180,49,.6) !important; }
.touch-controls__fire { width: 78px !important; height: 70px !important; border-radius: 50% !important; color: #ff8bab !important; border-color: rgba(255,95,135,.6) !important; }
.touch-controls__dash,.touch-controls__roll { width:58px !important; height:54px !important; border-radius:50% !important; font-size:var(--ui-micro) !important; }.touch-controls__dash { color:#76e4ff !important; border-color:rgba(118,228,255,.7) !important; }.touch-controls__roll { color:#71f59b !important; border-color:rgba(113,245,155,.7) !important; }
.touch-controls__drag { display:none !important; position:absolute !important; z-index:3; top:-28px; left:50%; width:auto !important; height:24px !important; padding:0 9px; translate:-50% 0; border-radius:8px !important; color:#071014 !important; background:#ffcf69 !important; border-color:#ffcf69 !important; font-size:var(--ui-micro) !important; }
.touch-controls.is-editing { pointer-events:auto; }.touch-controls.is-editing [data-control] { opacity:.28; pointer-events:none; }.touch-controls.is-editing .touch-controls__drag { display:block !important; pointer-events:auto; opacity:1; }
.touch-controls__special { position:relative; width:70px !important; height:64px !important; border-radius:50% !important; color:var(--special-color,#df77ff) !important; border-color:color-mix(in srgb,var(--special-color,#df77ff) 72%,transparent) !important; font-size:var(--ui-micro) !important; transition:opacity .18s ease,box-shadow .18s ease,background .18s ease,scale .18s ease; }.touch-controls__special:disabled { opacity:.28; box-shadow:none; }.touch-controls__special.is-ready { opacity:1; color:#071014 !important; background:var(--special-color,#df77ff); box-shadow:0 0 0 4px color-mix(in srgb,var(--special-color,#df77ff) 22%,transparent),0 0 28px color-mix(in srgb,var(--special-color,#df77ff) 78%,transparent),inset 0 0 14px rgba(255,255,255,.38); animation:special-ready-pulse 1.25s ease-in-out infinite; }
.touch-controls button.is-pressed { background: rgba(141,39,255,.38); opacity:1; scale: .94; }
@keyframes special-ready-pulse { 0%,100% { scale:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--special-color,#df77ff) 18%,transparent),0 0 18px color-mix(in srgb,var(--special-color,#df77ff) 58%,transparent); } 50% { scale:1.06; box-shadow:0 0 0 7px color-mix(in srgb,var(--special-color,#df77ff) 8%,transparent),0 0 34px color-mix(in srgb,var(--special-color,#df77ff) 92%,transparent); } }

.install-dialog { width:min(480px,calc(100% - 24px)); padding:24px; border:1px solid var(--cyan); border-radius:10px; color:var(--ink); background:linear-gradient(145deg,#0b1018,#160d23); box-shadow:0 0 50px rgba(98,214,208,.2); }
.install-dialog::backdrop { background:rgba(3,5,10,.82); backdrop-filter:blur(7px); }
.install-dialog h2 { margin:0 0 16px; font-family:Impact,Haettenschweiler,sans-serif; font-size:2rem; letter-spacing:.04em; text-transform:uppercase; }
.install-dialog p:not(.eyebrow) { color:var(--muted); font-size:.7rem; line-height:1.65; }
.install-dialog p b { color:var(--cyan); }
.install-dialog__close { position:absolute; top:10px; right:10px; width:34px; height:34px; border:0; color:var(--cyan); background:transparent; font-size:1.4rem; cursor:pointer; }
.install-dialog__confirm { min-height:42px; margin-top:10px; padding:0 18px; border:0; border-radius:6px; color:#071014; background:var(--amber); font:900 var(--ui-micro)/1 monospace; letter-spacing:.1em; cursor:pointer; }
.install-dialog__browser { min-height:42px; margin:10px 8px 0 0; padding:0 18px; border:1px solid var(--cyan); border-radius:6px; color:var(--cyan); background:rgba(98,214,208,.08); font:900 var(--ui-micro)/1 monospace; letter-spacing:.08em; cursor:pointer; }

.game-footer { color: var(--muted); font-size:var(--ui-micro); letter-spacing: .12em; text-transform: uppercase; }
.game-footer b { color: var(--cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }



/* Removed legacy responsive block: (max-width: 720px) */



/* Removed legacy responsive block: (max-width: 440px) */



/* Removed legacy responsive block: (orientation: landscape) and (max-height: 600px) and (max-width: 960px) */


/* Removed legacy responsive block: (orientation:landscape) and (max-height:600px) */


/* PK 27.08.2026: Mobile browser bootstrap. Browser security forbids automatic
   fullscreen on page load, so the first mobile screen is a single trusted
   activation surface. The real game UI is only exposed after fullscreen. */
.mobile-immersive-gate { display:none; }
@media (hover:none), (pointer:coarse) {
  .mobile-immersive-gate:not([hidden]) {
    position:fixed; z-index:99999; inset:0; display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto; place-items:center; gap:8px;
    width:100%; height:100dvh;
    padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    overflow:hidden; border:0; color:var(--ink);
    background:radial-gradient(circle at 50% 48%,rgba(141,39,255,.19),transparent 42%),#070a11;
    font-family:"Kernel Mono",Consolas,monospace; text-align:center; touch-action:manipulation; cursor:pointer;
  }
  .mobile-immersive-gate::before {
    content:""; position:absolute; inset:14px; border:1px solid rgba(98,214,208,.42); border-radius:16px;
    box-shadow:18px 18px 0 rgba(80,0,155,.22),inset 0 0 48px rgba(98,214,208,.025); pointer-events:none;
  }
  .mobile-immersive-gate__signal { align-self:start; color:var(--cyan); font-size:clamp(var(--ui-micro),1.8vw,.78rem); font-weight:900; letter-spacing:.2em; }
  .mobile-immersive-gate img { width:min(640px,74vw); max-height:55dvh; object-fit:contain; filter:drop-shadow(0 0 22px rgba(141,39,255,.28)); }
  .mobile-immersive-gate strong { color:var(--amber); font-size:clamp(.72rem,2.5vw,1.05rem); letter-spacing:.16em; }
  .mobile-immersive-gate small { align-self:end; color:var(--muted); font-size:clamp(var(--ui-micro),1.55vw,.75rem); letter-spacing:.1em; }
  .mobile-immersive-gate.is-retry strong { color:#ff8bab; }
}

/* PK 27.08.2026: Mobile immersive layout / scrolling / compact HUD */

/* PK 27.08.2026: Mobile title-screen composition + pre-fullscreen scroll fallback */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* PK 10.09.2026: viewport-safe HUD modes for large displays and cutouts. */
:root { --kr-safe-top: env(safe-area-inset-top, 0px); --kr-safe-right: env(safe-area-inset-right, 0px); --kr-safe-bottom: env(safe-area-inset-bottom, 0px); --kr-safe-left: env(safe-area-inset-left, 0px); }
[hidden] { display:none !important; }
.game-hud { inset: calc(10px + var(--kr-safe-top)) calc(10px + var(--kr-safe-right)) auto calc(10px + var(--kr-safe-left)); transform: scale(var(--hud-scale, 1)); transform-origin: top center; opacity: var(--hud-opacity, 1); }
html[data-hud-mode="COMPACT"] .hud-mission span, html[data-hud-mode="COMPACT"] .hud-character small, html[data-hud-mode="COMPACT"] .hud-loadout span:nth-child(n+3) { display:none; }
html[data-hud-mode="MINIMAL"] .hud-mission, html[data-hud-mode="MINIMAL"] .hud-loadout { display:none; }
html[data-hud-mode="MINIMAL"] .game-hud { grid-template-columns:1fr; width:max-content; }

/* Removed legacy responsive block: (min-width: 1600px) and (min-height: 850px) */


/* Removed legacy responsive block: (orientation:landscape) and (min-width:900px) */


/* Removed legacy responsive block: (orientation:landscape) and (max-height:600px) */


/* Removed legacy responsive block: (orientation:portrait) */


/* PK 27.08.2026: Keep boss badge inside mobile node clipping bounds. */

/* PK 27.08.2026: v30 removes the synthetic 90deg portrait rotation.
   Direct mobile loads are covered by the immersive gate; hosted launches lock
   the real screen orientation before the iframe becomes interactive. Keeping
   the DOM unrotated also restores native touch/scroll axis semantics. */
@media (orientation: portrait) and (hover: none), (orientation: portrait) and (pointer: coarse) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .game-shell {
    position: relative;
    top: auto;
    left: auto;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    transform: none;
    transform-origin: initial;
  }
  .game-header,.game-footer { display:none; }
  .game-frame { width:100%; height:100%; min-height:0; align-self:stretch; border:0; border-radius:0; }
  canvas { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }
  .touch-controls { display:flex; bottom:max(4px,calc(env(safe-area-inset-bottom) + 2px)); }
}


/* PK 27.08.2026: v31 narrows mobile gameplay side gutters and adds extra
   menu safe-space for camera cutouts / punch-hole lenses. */


/* PK 27.08.2026: v32 improves left movement button ergonomics and makes the
   operator skins visually more distinct with stronger palettes and motifs. */

.skin-card {
  isolation: isolate;
  border-width: 1px;
}
.skin-card::before,
.skin-card::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  opacity: .84;
  z-index: 0;
}
.skin-card > * { position: relative; z-index: 1; }
.skin-card__avatar {
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb,var(--skin-color) 28%,rgba(255,255,255,.08)), rgba(5,8,14,.22) 62%, transparent 63%);
}
.skin-card__avatar img {
  box-shadow: 0 0 28px color-mix(in srgb,var(--skin-color) 28%,transparent);
}
.skin-card.is-selected {
  box-shadow: inset 0 -4px var(--skin-color), 0 0 24px color-mix(in srgb,var(--skin-color) 22%,transparent), 0 0 0 1px color-mix(in srgb,var(--skin-color) 55%,transparent);
}
.skin-card[data-skin-choice="void"] {
  background:
    radial-gradient(circle at 48% 24%, rgba(158,74,255,.34), transparent 26%),
    radial-gradient(circle at 28% 72%, rgba(91,255,230,.12), transparent 24%),
    linear-gradient(145deg, rgba(11,8,22,.96), rgba(23,8,36,.94) 52%, rgba(7,10,17,.98));
}
.skin-card[data-skin-choice="void"]::before {
  width: 150px; height: 150px; left: -26px; bottom: -30px;
  border-radius: 48% 52% 43% 57%;
  border: 1px solid rgba(141,39,255,.34);
  box-shadow: 0 0 30px rgba(141,39,255,.18);
}
.skin-card[data-skin-choice="void"]::after {
  width: 120px; height: 120px; right: -20px; top: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(91,255,230,.24);
}
.skin-card[data-skin-choice="void"] .skin-card__avatar img { filter:none; }

.skin-card[data-skin-choice="neon"] {
  background:
    linear-gradient(180deg, rgba(8,26,34,.96), rgba(7,12,18,.96)),
    radial-gradient(circle at 74% 20%, rgba(98,214,208,.26), transparent 22%),
    radial-gradient(circle at 24% 82%, rgba(89,184,255,.14), transparent 28%);
}
.skin-card[data-skin-choice="neon"]::before {
  top: 18px; right: 12px; width: 82px; height: 82px;
  border: 2px solid rgba(98,214,208,.34);
  border-left: 0; border-bottom: 0; transform: skewY(-18deg);
}
.skin-card[data-skin-choice="neon"]::after {
  left: 12px; bottom: 14px; width: 102px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(98,214,208,.9), rgba(118,228,255,.2));
  box-shadow: 0 0 12px rgba(98,214,208,.38);
}
.skin-card[data-skin-choice="neon"] .skin-card__avatar img { filter:none; }

.skin-card[data-skin-choice="root"] {
  background:
    linear-gradient(135deg, rgba(24,8,12,.98), rgba(42,10,18,.95) 55%, rgba(12,8,12,.98)),
    radial-gradient(circle at 82% 22%, rgba(255,95,135,.2), transparent 24%);
}
.skin-card[data-skin-choice="root"]::before {
  left: 16px; bottom: 14px; width: 70px; height: 70px;
  border: 2px solid rgba(255,95,135,.24);
  clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
}
.skin-card[data-skin-choice="root"]::after {
  right: 14px; bottom: 12px; width: 66px; height: 66px;
  border: 2px solid rgba(255,180,49,.22);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.skin-card[data-skin-choice="root"] .skin-card__avatar img { filter:none; }

.skin-card[data-skin-choice="quantum"] {
  background:
    radial-gradient(circle at 50% 16%, rgba(223,119,255,.26), transparent 24%),
    linear-gradient(145deg, rgba(14,8,24,.98), rgba(26,12,40,.95) 50%, rgba(8,12,20,.98));
}
.skin-card[data-skin-choice="quantum"]::before {
  inset: auto 18px 16px auto; width: 112px; height: 112px;
  border: 1px solid rgba(223,119,255,.28);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(223,119,255,.16);
}
.skin-card[data-skin-choice="quantum"]::after {
  inset: auto 28px 26px auto; width: 92px; height: 92px;
  border: 1px solid rgba(98,214,208,.22);
  border-radius: 50%;
}
.skin-card[data-skin-choice="quantum"] .skin-card__avatar img { filter:none; }

.skin-card[data-skin-choice="chrome"] {
  background:
    linear-gradient(135deg, rgba(10,14,22,.98), rgba(17,28,42,.96) 54%, rgba(8,10,16,.98)),
    radial-gradient(circle at 76% 22%, rgba(118,228,255,.22), transparent 18%);
}
.skin-card[data-skin-choice="chrome"]::before {
  top: 12px; left: 14px; width: 82px; height: 82px;
  border: 1px solid rgba(118,228,255,.32);
  clip-path: polygon(50% 0, 94% 24%, 100% 72%, 50% 100%, 0 72%, 6% 24%);
}
.skin-card[data-skin-choice="chrome"]::after {
  right: 14px; bottom: 14px; width: 96px; height: 36px;
  background: linear-gradient(135deg, transparent 0 16%, rgba(118,228,255,.18) 16% 32%, transparent 32% 48%, rgba(118,228,255,.14) 48% 64%, transparent 64% 80%, rgba(118,228,255,.1) 80%);
  clip-path: polygon(0 100%, 22% 0, 100% 0, 78% 100%);
}
.skin-card[data-skin-choice="chrome"] .skin-card__avatar img { filter:none; }

.skin-card[data-skin-choice="apex"] {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,207,105,.24), transparent 24%),
    linear-gradient(145deg, rgba(24,14,6,.98), rgba(42,24,8,.94) 52%, rgba(11,10,14,.98));
}
.skin-card[data-skin-choice="apex"]::before {
  top: 14px; right: 18px; width: 84px; height: 28px;
  background: linear-gradient(135deg, transparent 12%, rgba(255,207,105,.95) 13% 25%, transparent 26% 38%, rgba(255,207,105,.95) 39% 61%, transparent 62% 74%, rgba(255,207,105,.95) 75% 87%, transparent 88%);
  clip-path: polygon(0 100%,10% 0,35% 58%,50% 0,65% 58%,90% 0,100% 100%);
}
.skin-card[data-skin-choice="apex"]::after {
  left: 16px; bottom: 14px; width: 110px; height: 2px;
  background: linear-gradient(90deg, rgba(255,180,49,.08), rgba(255,207,105,.88), rgba(255,180,49,.08));
  box-shadow: 0 0 14px rgba(255,207,105,.38);
}
.skin-card[data-skin-choice="apex"] .skin-card__avatar img { filter:none; }


/* PK 27.08.2026: v34 tunes mobile control spacing and reduces accidental
   special activation while keeping the right-side cluster mostly intact. */

/* PK 27.08.2026: v35 gameplay polish / progression / mobile ergonomics. */
.menu-screen:not([hidden]) { animation: kr-menu-forward .16s cubic-bezier(.2,.75,.25,1) both; }
.boot-card[data-transition="back"] .menu-screen:not([hidden]) { animation-name: kr-menu-back; }
.boot-card[data-active-screen="briefing"] .menu-screen:not([hidden]),
.boot-card[data-active-screen="result"] .menu-screen:not([hidden]) { animation-name: kr-menu-focus; }
.boot-card[data-active-screen="unlock"] .menu-screen:not([hidden]) { animation-name: kr-menu-unlock; }
@keyframes kr-menu-forward { from { opacity:0; transform:translate3d(18px,0,0); } to { opacity:1; transform:none; } }
@keyframes kr-menu-back { from { opacity:0; transform:translate3d(-18px,0,0); } to { opacity:1; transform:none; } }
@keyframes kr-menu-focus { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
@keyframes kr-menu-unlock { from { opacity:0; filter:blur(8px); transform:scale(.94); } to { opacity:1; filter:none; transform:none; } }

.game-feedback {
  position:absolute; z-index:7; top:84px; left:50%; min-width:220px; max-width:min(520px,70%);
  translate:-50% -10px; display:grid; gap:3px; padding:9px 16px;
  border:1px solid color-mix(in srgb,var(--feedback-color,var(--cyan)) 62%,transparent); border-radius:7px;
  color:var(--ink); background:rgba(5,8,14,.88); box-shadow:0 0 24px color-mix(in srgb,var(--feedback-color,var(--cyan)) 18%,transparent);
  text-align:center; pointer-events:none; opacity:0; transition:opacity .16s ease,translate .16s ease;
}
.game-feedback[hidden] { display:none !important; }
.game-feedback.is-visible { opacity:1; translate:-50% 0; }
.game-feedback[data-tone="amber"] { --feedback-color:var(--amber); }
.game-feedback[data-tone="danger"] { --feedback-color:#ff5f87; }
.game-feedback[data-tone="special"] { --feedback-color:#df77ff; }
.game-feedback strong { color:var(--feedback-color,var(--cyan)); font-size:var(--ui-micro); letter-spacing:.13em; }
.game-feedback small { color:var(--muted); font-size:var(--ui-micro); letter-spacing:.1em; }

.game-cinematic {
  position:absolute; z-index:9; inset:0; display:grid; place-content:center; gap:8px; padding:24px;
  color:var(--ink); background:linear-gradient(90deg,transparent,rgba(4,6,12,.9) 22% 78%,transparent);
  text-align:center; pointer-events:none; opacity:0; transform:scale(.98); transition:opacity .2s ease,transform .2s ease;
}
.game-cinematic[hidden] { display:none !important; }
.game-cinematic.is-visible { opacity:1; transform:none; }
.game-cinematic small { color:#ff8bab; font-size:var(--ui-micro); letter-spacing:.24em; }
.game-cinematic strong { color:var(--ink); font-family:Impact,Haettenschweiler,sans-serif; font-size:clamp(2.2rem,7vw,5rem); line-height:.88; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 0 24px rgba(255,95,135,.32); }
.game-cinematic span { color:var(--amber); font-size:var(--ui-micro); font-weight:900; letter-spacing:.18em; }

.operator-settings {
  display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; padding:11px 13px;
  border:1px solid rgba(98,214,208,.22); border-radius:8px; background:rgba(4,8,14,.5);
}
.operator-settings span,.operator-settings b,.operator-settings small { display:block; }
.operator-settings b { color:var(--cyan); font-size:var(--ui-micro); letter-spacing:.12em; }
.operator-settings small { margin-top:4px; color:var(--muted); font-size:var(--ui-micro); line-height:1.4; }
.operator-settings button { flex:none; min-width:62px; min-height:34px; border:1px solid var(--cyan); border-radius:6px; color:#071014; background:var(--cyan); font-weight:900; cursor:pointer; }
.operator-settings button.is-off { color:var(--muted); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); }
.operator-settings--grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 14px; }
.subscreen-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:10px 0; }
.subscreen-tabs button { min-height:38px; padding:7px; border:1px solid rgba(98,214,208,.24); color:var(--muted); background:rgba(5,8,14,.78); font-size:var(--ui-micro); font-weight:900; letter-spacing:.08em; cursor:pointer; }
.subscreen-tabs button.is-active { color:var(--amber); border-color:var(--amber); box-shadow:inset 0 -3px var(--amber); }
.operator-subscreen { min-height:180px; padding:14px; border:1px solid rgba(98,214,208,.24); background:rgba(5,8,14,.62); }
.loadout-summary,.cosmetic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.loadout-summary article,.cosmetic-grid button { min-height:86px; padding:12px; border:1px solid rgba(98,214,208,.24); color:var(--ink); background:rgba(8,15,27,.82); text-align:left; }
.loadout-summary small,.loadout-summary strong,.cosmetic-grid small,.cosmetic-grid strong { display:block; }
.loadout-summary small,.cosmetic-grid small { color:var(--cyan); font-size:var(--ui-micro); }
.loadout-summary strong,.cosmetic-grid strong { margin-top:8px; }
.customize-preview__operator { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:16px; margin-bottom:12px; }
.customize-preview__operator img { width:96px; height:96px; object-fit:cover; border:1px solid var(--violet); }
.customize-preview__operator span { color:var(--amber); font-weight:900; }
.customize-preview { box-shadow:inset 0 0 48px color-mix(in srgb,var(--preview-accent,var(--violet)) 12%,transparent); }
html[data-hud-theme="terminal"] .game-hud > div { border-color:#71f59b; background:rgba(2,18,9,.84); }
html[data-hud-theme="amber"] .game-hud > div { border-color:#ffcf69; background:rgba(24,14,2,.84); }
html[data-hud-theme="minimal"] .game-hud > div { border-radius:0; background:rgba(2,4,8,.64); box-shadow:none; }
html[data-high-contrast="true"] .game-frame { filter:contrast(1.18) saturate(1.08); }
html[data-reduce-flashes="true"] .game-feedback,html[data-reduce-flashes="true"] .touch-controls__special.is-ready { animation:none !important; }
.skin-card__passive { min-height:3.6em; color:#d8d5ce !important; }
.skin-card__passive::first-line { color:var(--skin-color); }

.unlock-screen { text-align:center; }
.unlock-stage { min-height:min(500px,72vh); display:grid; grid-template-rows:auto minmax(170px,1fr) auto auto auto; place-items:center; align-content:center; gap:10px; }
.unlock-stage__signal { color:var(--unlock-color,var(--amber)); font-size:var(--ui-micro); font-weight:900; letter-spacing:.2em; }
.unlock-stage img { width:min(270px,38vw); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 0 30px color-mix(in srgb,var(--unlock-color,var(--violet)) 48%,transparent)); }
.unlock-stage h1 { font-size:clamp(2.4rem,7vw,5.4rem); }
.unlock-stage h1 span { color:var(--unlock-color,var(--amber)); }
.unlock-stage > p { max-width:54ch; margin:0; color:var(--muted); font-size:.7rem; line-height:1.55; }
.unlock-passive,.unlock-special { width:min(720px,100%); display:grid; grid-template-columns:90px 1fr; align-items:center; gap:12px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--unlock-color,var(--cyan)) 36%,transparent); border-radius:7px; background:rgba(5,8,14,.58); text-align:left; }
.unlock-passive small,.unlock-special small { color:var(--unlock-color,var(--cyan)); font-size:var(--ui-micro); letter-spacing:.14em; }
.unlock-passive strong,.unlock-special strong { font-size:var(--ui-micro); line-height:1.4; }
.unlock-continue { margin-top:14px; }

.ending-screen { position:relative; isolation:isolate; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 38%,rgba(255,207,105,.13),transparent 34%),linear-gradient(180deg,rgba(5,7,13,.72),rgba(2,3,8,.96)); }
.ending-screen::before,.ending-screen::after { content:""; position:absolute; z-index:-1; inset:8% 12%; border:1px solid rgba(255,207,105,.18); clip-path:polygon(50% 0,100% 28%,88% 100%,12% 100%,0 28%); animation:ending-orbit 12s linear infinite; }
.ending-screen::after { inset:16% 21%; border-color:rgba(98,214,208,.16); animation-direction:reverse; animation-duration:18s; }
.ending-stars { position:absolute; z-index:-2; inset:0; opacity:.58; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#62d6d0 0 1px,transparent 1.5px); background-position:0 0,31px 19px; background-size:67px 67px,91px 91px; mask-image:linear-gradient(180deg,#000,transparent 88%); }
.ending-stars i { position:absolute; left:50%; top:42%; width:2px; height:42%; transform-origin:50% 0; background:linear-gradient(#ffcf69,transparent); opacity:.3; }
.ending-stars i:nth-child(1){transform:rotate(38deg)}.ending-stars i:nth-child(2){transform:rotate(142deg)}.ending-stars i:nth-child(3){transform:rotate(264deg)}
.ending-sequence { min-height:0; display:grid; place-items:center; align-content:center; gap:9px; padding:4px 0; }
.ending-sequence__signal,.ending-signature { color:var(--amber); font-size:var(--ui-micro); font-weight:900; letter-spacing:.2em; }
.ending-core { position:relative; width:112px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,207,105,.72); transform:rotate(45deg); box-shadow:0 0 54px rgba(255,207,105,.24),inset 0 0 28px rgba(98,214,208,.14); animation:ending-core 3.8s ease-in-out infinite; }
.ending-core::before,.ending-core::after { content:""; position:absolute; inset:12px; border:1px solid rgba(98,214,208,.48); }.ending-core::after{inset:27px;border-color:rgba(255,255,255,.55)}
.ending-core span { transform:rotate(-45deg); color:#fff4cf; font-size:1.5rem; font-weight:950; letter-spacing:.08em; text-shadow:0 0 18px var(--amber); }
.ending-copy { max-width:760px; }.ending-copy small { color:var(--cyan); font-size:var(--ui-micro); letter-spacing:.16em; }.ending-copy h1 { margin:6px 0; font-size:clamp(2.2rem,6vw,5.2rem); }.ending-copy h1 span { color:var(--amber); }.ending-copy p { margin:0 auto; max-width:64ch; color:#d7d5cf; font-size:var(--ui-micro); line-height:1.65; }
.ending-reward { width:min(720px,100%); display:grid; grid-template-columns:72px 1fr; align-items:center; gap:14px; padding:11px 15px; border:1px solid rgba(255,207,105,.52); border-radius:8px; background:linear-gradient(90deg,rgba(255,207,105,.1),rgba(98,214,208,.06)); text-align:left; box-shadow:0 0 30px rgba(255,207,105,.1); }
.ending-reward__seal { width:58px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--amber); border-radius:50%; color:var(--amber); font-size:var(--ui-micro); font-weight:950; letter-spacing:.08em; box-shadow:0 0 20px rgba(255,207,105,.22); }
.ending-reward div { display:grid; gap:3px; }.ending-reward small { color:var(--amber); font-size:var(--ui-micro); letter-spacing:.15em; }.ending-reward strong { font-size:1rem; letter-spacing:.1em; }.ending-reward p { margin:0; color:var(--muted); font-size:var(--ui-micro); }
.ending-continue { margin-top:12px; }.ending-continue span,.ending-continue small { display:block; }.ending-continue small { margin-top:3px; font-size:var(--ui-micro); font-weight:700; opacity:.72; }
@keyframes ending-orbit { to { transform:rotate(360deg); } }
@keyframes ending-core { 0%,100%{transform:rotate(45deg) scale(.94);filter:brightness(.88)}50%{transform:rotate(225deg) scale(1.04);filter:brightness(1.18)} }

html[data-reduce-flashes="true"] .ending-screen::before,html[data-reduce-flashes="true"] .ending-screen::after,html[data-reduce-flashes="true"] .ending-core { animation:none; }

.result-hero { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:20px; margin:14px 0 16px; }
.result-hero > span { display:grid; width:116px; height:116px; place-items:center; border:2px solid var(--amber); border-radius:50%; color:var(--amber); background:rgba(255,180,49,.06); font-family:Impact,Haettenschweiler,sans-serif; font-size:4rem; box-shadow:0 0 28px rgba(255,180,49,.15); }
.result-hero > span[data-rank="S"] { color:#ffcf69; border-color:#ffcf69; box-shadow:0 0 32px rgba(255,207,105,.26); }
.result-hero > span[data-rank="A"] { color:var(--cyan); border-color:var(--cyan); }
.result-hero h1 { margin:2px 0 7px; font-size:clamp(2.5rem,6vw,5rem); }
.result-hero small { color:var(--cyan); letter-spacing:.13em; }
.result-hero p { margin:0; color:var(--muted); font-size:var(--ui-micro); }
.result-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.result-grid article { min-width:0; padding:12px; border:1px solid rgba(98,214,208,.22); border-radius:8px; background:rgba(5,8,14,.58); }
.result-grid small,.result-grid strong,.result-grid span { display:block; }
.result-grid small { color:var(--cyan); font-size:var(--ui-micro); letter-spacing:.13em; }
.result-grid strong { margin:7px 0 5px; color:var(--ink); font-size:1.08rem; }
.result-grid span { overflow:hidden; color:var(--muted); font-size:var(--ui-micro); text-overflow:ellipsis; white-space:nowrap; }
.result-badges { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.result-badges span { padding:6px 9px; border:1px solid rgba(255,180,49,.35); border-radius:999px; color:var(--amber); background:rgba(255,180,49,.06); font-size:var(--ui-micro); font-weight:900; letter-spacing:.08em; }
.result-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.result-actions button { min-height:64px; padding:10px; border:1px solid rgba(98,214,208,.24); border-radius:8px; color:var(--ink); background:rgba(7,11,18,.72); text-align:left; cursor:pointer; }
.result-actions button span,.result-actions button small { display:block; }
.result-actions button span { color:var(--cyan); font-size:var(--ui-micro); font-weight:900; letter-spacing:.1em; }
.result-actions button small { margin-top:5px; color:var(--muted); font-size:var(--ui-micro); }
.result-actions__primary { border-color:rgba(255,180,49,.6) !important; background:rgba(255,180,49,.09) !important; }
.result-actions__primary span { color:var(--amber) !important; }

.map-sector.is-complete { box-shadow:inset 4px 0 var(--sector-color),0 0 24px color-mix(in srgb,var(--sector-color) 14%,transparent); }
.map-node.is-complete { background:linear-gradient(180deg,color-mix(in srgb,var(--node-color) 10%,#06100f),#06100f); }
.map-node.is-complete span { text-shadow:0 0 9px var(--node-color); }
.map-node.is-perfect { box-shadow:0 0 0 4px rgba(5,12,10,.96),0 0 22px color-mix(in srgb,var(--amber) 28%,transparent),inset 0 -2px var(--amber); }
.boss-hud[data-phase="1"] { border-color:rgba(141,39,255,.65); box-shadow:0 0 18px rgba(141,39,255,.14); }
.boss-hud[data-phase="2"] { border-color:rgba(255,95,135,.8); box-shadow:0 0 24px rgba(255,95,135,.2); }

.touch-controls button { position:relative; }
.touch-controls button::after { content:""; position:absolute; inset:-10px; border-radius:inherit; }
.touch-controls__action { gap:10px; }
.touch-controls__special { margin-inline-end:18px !important; }
.touch-controls__special.is-cooldown { scale:.82; opacity:.28; filter:saturate(.55); box-shadow:none !important; }
.touch-controls__special.is-ready { scale:1; opacity:1; }


/* PK 10.09.2026: dense control matrix uses landscape width instead of page length. */

/* Removed legacy responsive block: (orientation:landscape) and (min-width:720px) */


/* Removed legacy responsive block: (orientation:portrait) */


/* PK 11.09.2026: 2.2.3 operator selectors use dedicated high-resolution art assets. */
.skin-card__avatar {
  width:min(230px,92%);
  height:132px;
  margin:0 auto 14px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--skin-color) 62%,transparent);
  border-radius:12px;
  background:#05070c;
  box-shadow:0 0 30px color-mix(in srgb,var(--skin-color) 22%,transparent);
}
.skin-card__avatar img {
  width:100%;
  height:100%;
  border-radius:11px;
  object-fit:cover;
  object-position:center;
}
.skin-card__avatar::before { display:none; }
.skin-card__avatar::after {
  display:block;
  inset:0;
  border:0;
  border-radius:11px;
  background:radial-gradient(circle at 72% 42%,color-mix(in srgb,var(--skin-color) 28%,transparent),transparent 58%);
  box-shadow:inset 0 0 26px color-mix(in srgb,var(--skin-color) 24%,transparent);
  opacity:.9;
}
.skin-card[data-skin-choice="void"] .skin-card__avatar img { filter:none; }
.skin-card[data-skin-choice="neon"] .skin-card__avatar img { filter:none; }
.skin-card[data-skin-choice="root"] .skin-card__avatar img { filter:none; }
.skin-card[data-skin-choice="quantum"] .skin-card__avatar img { filter:none; }
.skin-card[data-skin-choice="chrome"] .skin-card__avatar img { filter:none; }
.skin-card[data-skin-choice="apex"] .skin-card__avatar img { filter:none; }
.skin-card:disabled .skin-card__avatar img { opacity:.62; }


/* PK 11.09.2026: shared high-resolution character identity for HUD/profile surfaces. */
.title-profile img,
.hud-character img {
  object-fit:cover;
  object-position:70% center;
  background:#05070c;
}
.title-profile img { border-color:var(--cyan); }
html[data-operator-skin="void"] .title-profile img,
html[data-operator-skin="void"] .hud-character img { border-color:#8d27ff; box-shadow:0 0 16px rgba(141,39,255,.48); }
html[data-operator-skin="quantum"] .title-profile img,
html[data-operator-skin="quantum"] .hud-character img { border-color:#df77ff; box-shadow:0 0 16px rgba(223,119,255,.48); }
html[data-operator-skin="chrome"] .title-profile img,
html[data-operator-skin="chrome"] .hud-character img { border-color:#76e4ff; box-shadow:0 0 16px rgba(118,228,255,.48); }
html[data-operator-skin="apex"] .title-profile img,
html[data-operator-skin="apex"] .hud-character img { border-color:#ffcf69; box-shadow:0 0 16px rgba(255,207,105,.5); }
.skin-card__role,
.skin-card__power {
  position:absolute;
  z-index:3;
  margin:0 !important;
  border:1px solid color-mix(in srgb,var(--skin-color) 70%,transparent);
  color:var(--ink) !important;
  background:rgba(3,5,10,.82);
  box-shadow:0 0 14px color-mix(in srgb,var(--skin-color) 24%,transparent);
  backdrop-filter:blur(5px);
}
.skin-card__role {
  top:9px;
  left:9px;
  display:flex !important;
  align-items:center;
  gap:6px;
  padding:4px 7px;
  border-radius:999px;
}
.skin-card__role b { color:var(--skin-color); font-size:var(--ui-micro); letter-spacing:.08em; }
.skin-card__role em { color:#e5e2dc; font-size:var(--ui-micro); font-style:normal; letter-spacing:.08em; }
.skin-card__power {
  right:8px;
  bottom:8px;
  padding:4px 7px;
  border-radius:4px;
  color:var(--skin-color) !important;
  font-size:var(--ui-micro) !important;
  font-weight:900;
  letter-spacing:.07em;
}
.skin-card.is-selected .skin-card__avatar { box-shadow:0 0 34px color-mix(in srgb,var(--skin-color) 42%,transparent); }
.game-account-dialog { width:min(430px,calc(100vw - 30px)); border:1px solid #62d6d0; padding:0; color:#f4f7ff; background:#090d18; box-shadow:0 20px 90px rgba(0,0,0,.78),0 0 42px rgba(98,214,208,.18); }
.game-account-dialog::backdrop { background:rgba(2,4,10,.78); backdrop-filter:blur(5px); }
.game-account-dialog__card { position:relative; display:grid; gap:13px; padding:28px; }
.game-account-dialog__card h2 { margin:0; font-size:1.45rem; letter-spacing:.04em; }
.game-account-dialog__card p { margin:0; color:#b9c1d1; line-height:1.5; }
.game-account-dialog__fields { display:grid; gap:13px; }
.game-account-dialog__card label { display:grid; gap:6px; color:#8eece5; font-size:.72rem; font-weight:800; letter-spacing:.1em; }
.game-account-dialog__card input { border:1px solid #35465c; padding:11px; color:#fff; background:#111a28; font:inherit; }
.game-account-dialog__card input:focus { outline:2px solid #62d6d0; outline-offset:1px; }
.game-account-dialog__close { position:absolute; top:9px; right:10px; border:0; color:#dce8f5; background:transparent; font-size:1.5rem; cursor:pointer; }
.game-account-dialog__status { min-height:1.3em; color:#ffcf69 !important; font-size:.75rem; font-weight:800; }
.game-account-dialog__logout { min-height:54px; border:1px solid #ff668f; padding:10px 14px; color:#ff91ae; background:rgba(255,54,105,.08); cursor:pointer; text-align:left; }
.game-account-dialog__logout span,.game-account-dialog__logout small { display:block; }
.game-account-dialog__logout span { font:900 .74rem/1 monospace; letter-spacing:.12em; }
.game-account-dialog__logout small { margin-top:6px; color:#c5a4ae; font:600 var(--ui-micro)/1.25 monospace; }
.operations-screen { overflow:auto; max-height:min(76vh,720px); padding-right:6px; }
.operations-grid,.operations-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.operation-card,.operations-data-grid>article,.modifier-panel { border:1px solid rgba(98,214,208,.25); background:rgba(8,15,27,.82); padding:15px; }
.operation-card { display:grid; gap:9px; }
.operation-card>small,.operations-data-grid article>small { color:#62d6d0; font-weight:900; letter-spacing:.13em; }
.operation-card>strong { color:#fff; font-size:1.05rem; }
.operation-card p { margin:0; min-height:2.8em; color:#aeb9ca; font-size:.75rem; line-height:1.45; }
.operation-card button,.modifier-card { border:1px solid #394b62; color:#eef8ff; background:#111b2a; padding:10px; text-align:left; cursor:pointer; }
.operation-card button span,.operation-card button small { display:block; }
.operation-card button small { margin-top:3px; color:#89a0b7; font-size:var(--ui-micro); }
.modifier-panel { margin:12px 0; }
.modifier-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.modifier-card { display:grid; gap:4px; min-height:82px; }
.modifier-card strong { color:#fff; font-size:.7rem; }
.modifier-card small { color:#9eb0c4; font-size:var(--ui-micro); line-height:1.35; }
.modifier-card.is-active { border-color:#ffcf69; background:rgba(255,180,49,.1); box-shadow:0 0 18px rgba(255,180,49,.1); }
.operation-card--boss-training { grid-column:span 2; }
.boss-training-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.boss-training-grid .modifier-card { min-height:112px; padding:11px; }
.boss-training-grid .modifier-card strong { font-size:.76rem; line-height:1.25; }
.boss-training-grid .modifier-card small { font-size:var(--ui-micro); line-height:1.45; }
.build-slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:10px; }
.build-slot-grid .modifier-card { min-height:104px; padding:11px; }
.build-slot-grid .modifier-card strong { font-size:.76rem; line-height:1.25; }
.build-slot-grid .modifier-card small { font-size:var(--ui-micro); line-height:1.45; overflow-wrap:anywhere; }
.operations-data-grid h2 { margin:5px 0 10px; font-size:.9rem; }
.leaderboard-list { display:grid; gap:5px; margin:0; padding-left:22px; color:#d8e4ee; font-size:.7rem; }
.leaderboard-list li { padding:5px; border-bottom:1px solid rgba(255,255,255,.08); }
.protocol-list { display:grid; gap:6px; max-height:150px; overflow:auto; }
.protocol-list p { margin:0; color:#9dacbd; font-size:var(--ui-micro); line-height:1.4; }
.elite-node { border-color:#ffcf69 !important; box-shadow:inset 0 0 18px rgba(255,207,105,.08); }
.arena-lock { color:#ff5f87; }

/* Removed legacy responsive block: (max-width:760px),(orientation:landscape) and (max-height:600px) */



/* PK 10.09.2026: canonical compact landscape, portrait fallback and coarse-pointer component layer. */

/* Removed legacy responsive block: (orientation:landscape) and (max-height:600px) and (max-width:960px),        (orientation:portrait) and (hover:none),        (orientation:portrait) and (pointer:coarse) */


/* PK 10.09.2026: compact desktop, tablet and foldable landscape hierarchy. */

/* Removed legacy responsive block: (orientation:landscape) and (max-height:800px) */



/* Removed legacy responsive block: (orientation:landscape) and (max-height:600px) and (max-width:960px) */



/* PK 11.09.2026: corrective UX pass 2.2.1; desktop/audio/HiDPI pass 2.2.2; operator artwork pass 2.2.3.
   Readability and information hierarchy take priority over geometric density. */

.screen-copy,
.title-lockup p,
.boot-card > p:not(.eyebrow) {
  font-size: var(--ui-body);
  line-height: 1.55;
}

.screen-head small,
.eyebrow,
.title-lockup__signal {
  font-size: var(--ui-small);
}

.screen-head button,
.subscreen-tabs button,
.detail-tabs button,
.launch-button,
.result-actions button,
.pause-menu button {
  min-height: var(--ui-touch);
}

.screen-head button {
  padding-inline: 15px;
  font-size: var(--ui-control);
}

.boot-card {
  width: min(980px, calc(100vw - 48px));
  max-height: min(86dvh, 820px);
  padding: clamp(18px, 2.4vw, 34px);
  overflow: auto;
}

.boot-card[data-active-screen="title"] { width:min(1520px,calc(100% - 36px)); }
.boot-card[data-active-screen="map"] { width:min(var(--desktop-content-max),calc(100% - 28px)); }
.boot-card[data-active-screen="skins"] { width:min(var(--desktop-content-max),calc(100% - 28px)); }
.boot-card[data-active-screen="operations"] { width:min(var(--desktop-content-max),calc(100% - 28px)); }
.boot-card[data-active-screen="briefing"] { width:min(1480px,calc(100% - 36px)); }
.boot-card[data-active-screen="result"] { width:min(1380px,calc(100% - 36px)); }
.boot-card[data-active-screen="pause"] { width:min(820px,calc(100vw - 48px)); }

.subscreen-tabs,
.detail-tabs {
  display:grid;
  gap:8px;
}

.subscreen-tabs {
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:14px 0;
}

.subscreen-tabs button,
.detail-tabs button {
  padding:8px 10px;
  border:1px solid rgba(98,214,208,.26);
  border-radius:6px;
  color:var(--muted);
  background:rgba(5,8,14,.8);
  font-size:var(--ui-control);
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}

.subscreen-tabs button.is-active,
.detail-tabs button.is-active {
  color:var(--amber);
  border-color:var(--amber);
  box-shadow:inset 0 -3px var(--amber);
  background:rgba(255,180,49,.06);
}

/* Operator: compact selector + one readable active detail. */
.operator-browser {
  display:grid;
  grid-template-columns:minmax(240px, .7fr) minmax(0,1.8fr);
  gap:16px;
  min-height:360px;
}

.operator-selector {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:9px;
  margin:0;
}

.operator-selector .skin-card {
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  min-height:118px;
  padding:8px;
  text-align:left;
}

.operator-selector .skin-card__avatar {
  width:100%;
  height:62px;
  margin:0 0 7px;
  border-radius:7px;
}

.operator-selector .skin-card__avatar img {
  width:100%;
  height:100%;
  border-radius:6px;
  object-fit:cover;
  object-position:65% center;
}

.operator-selector .skin-card__role {
  inset:5px auto auto 5px;
}

.operator-selector .skin-card__role b,
.operator-selector .skin-card__role em {
  font-size:var(--ui-micro);
}

.operator-selector .skin-card > strong {
  color:var(--skin-color);
  font-size:var(--ui-body);
  line-height:1.2;
}

.operator-selector .skin-card > small,
.operator-selector .skin-card > span:last-child {
  margin-top:4px;
  font-size:var(--ui-micro);
  line-height:1.3;
}

.operator-detail {
  --operator-color: var(--violet);
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(0,1.55fr);
  gap:20px;
  min-width:0;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--operator-color) 50%,rgba(98,214,208,.25));
  border-radius:10px;
  background:
    radial-gradient(circle at 18% 40%,color-mix(in srgb,var(--operator-color) 18%,transparent),transparent 38%),
    rgba(5,8,14,.72);
  box-shadow:inset 0 0 42px color-mix(in srgb,var(--operator-color) 8%,transparent);
}

.operator-detail__visual {
  position:relative;
  min-height:300px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--operator-color) 55%,transparent);
  border-radius:10px;
  background:#05070c;
}

.operator-detail__visual img {
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:contain;
  object-position:center;
  padding:10px;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--operator-color) 24%,transparent));
}

.operator-detail__code {
  position:absolute;
  inset:auto 10px 10px;
  padding:7px 9px;
  border:1px solid color-mix(in srgb,var(--operator-color) 55%,transparent);
  border-radius:5px;
  color:var(--operator-color);
  background:rgba(4,7,12,.86);
  font-size:var(--ui-micro);
  font-weight:900;
}

.operator-detail__content {
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
}

.operator-detail__eyebrow {
  color:var(--operator-color);
  font-size:var(--ui-small);
  font-weight:900;
  letter-spacing:.14em;
}

.operator-detail h2 {
  margin:7px 0 10px;
  font-family:Impact,Haettenschweiler,sans-serif;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:.95;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.operator-detail__content > p {
  margin:0 0 14px;
  color:#c4c8ce;
  font-size:var(--ui-body);
  line-height:1.55;
}

.operator-detail__facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.operator-detail__facts article {
  min-width:0;
  padding:11px;
  border:1px solid rgba(98,214,208,.2);
  border-radius:7px;
  background:rgba(9,14,23,.78);
}

.operator-detail__facts small,
.operator-detail__facts strong,
.operator-detail__facts span {
  display:block;
}

.operator-detail__facts small {
  color:var(--cyan);
  font-size:var(--ui-micro);
  letter-spacing:.1em;
}

.operator-detail__facts strong {
  margin:5px 0 4px;
  color:var(--ink);
  font-size:var(--ui-body);
}

.operator-detail__facts span {
  color:var(--muted);
  font-size:var(--ui-micro);
  line-height:1.4;
}

/* Development and loadout. */
.skill-panel {
  margin-top:0;
  padding:15px;
}

.skill-panel__head {
  align-items:center;
  font-size:var(--ui-small);
}

.skill-panel__head button {
  min-height:38px;
  padding-inline:12px;
}

.skill-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.skill-card {
  min-height:128px;
  padding:13px;
}

.skill-card span { font-size:var(--ui-body); }
.skill-card strong { font-size:1.05rem; }
.skill-card small { font-size:var(--ui-small); line-height:1.45; }

.operator-subscreen {
  min-height:0;
  padding:16px;
}

.loadout-summary {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.loadout-summary article {
  min-height:132px;
  padding:15px;
}

.loadout-summary small {
  font-size:var(--ui-small);
}

.loadout-summary strong {
  margin-top:9px;
  font-size:var(--ui-subtitle);
}

.loadout-summary span {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:var(--ui-small);
  line-height:1.45;
}

/* Customization: preview + one category at a time. */
.customize-layout {
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr);
  gap:18px;
  align-items:stretch;
}

.customize-preview__operator {
  display:flex;
  min-width:0;
  margin:0;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
}

.customize-preview__stage {
  position:relative;
  display:grid;
  min-height:285px;
  overflow:hidden;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--preview-accent) 62%,transparent);
  border-radius:10px;
  background:
    radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--preview-accent) 25%,transparent),transparent 40%),
    #05070c;
}

.customize-preview__stage img {
  position:relative;
  z-index:2;
  width:88%;
  height:88%;
  object-fit:contain;
  object-position:center;
  border:0;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--preview-accent) 35%,transparent));
}

.customize-preview__aura {
  position:absolute;
  z-index:1;
  width:64%;
  aspect-ratio:1;
  border:2px solid color-mix(in srgb,var(--preview-accent) 70%,transparent);
  border-radius:50%;
  box-shadow:0 0 28px color-mix(in srgb,var(--preview-accent) 38%,transparent),inset 0 0 28px color-mix(in srgb,var(--preview-accent) 16%,transparent);
  animation:kr-preview-aura 2.4s ease-in-out infinite;
}

.customize-preview__trail {
  position:absolute;
  z-index:0;
  left:7%;
  width:54%;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--preview-accent) 75%,white),transparent);
  box-shadow:0 0 18px var(--preview-accent);
  transform:skewX(-24deg);
  opacity:.7;
}

.customize-preview__projectile {
  position:absolute;
  z-index:3;
  right:11%;
  top:32%;
  width:14px;
  height:6px;
  border-radius:999px;
  background:var(--amber);
  box-shadow:0 0 16px var(--amber);
  animation:kr-preview-projectile 1.6s ease-in-out infinite;
}

.customize-preview__operator > span {
  color:var(--amber);
  font-size:var(--ui-body);
  line-height:1.4;
}

.customize-preview__operator > small {
  color:var(--muted);
  font-size:var(--ui-small);
  line-height:1.4;
}

.customize-tabs,
.controls-tabs,
.records-tabs {
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-bottom:10px;
}

.records-tabs {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.cosmetic-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.cosmetic-grid button {
  display:grid;
  min-height:94px;
  align-content:center;
  padding:12px;
}

.cosmetic-grid small {
  font-size:var(--ui-small);
}

.cosmetic-grid strong {
  margin-top:6px;
  font-size:var(--ui-subtitle);
}

.cosmetic-grid button > span {
  margin-top:8px;
  color:var(--cyan);
  font-size:var(--ui-micro);
  font-weight:900;
}

/* Controls: category-first information architecture. */
.controls-console {
  display:block;
  margin-top:0;
  padding:15px;
}

.controls-category {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.setting-row {
  display:grid;
  grid-template-rows:1fr auto;
  min-height:116px;
  padding:12px;
  border:1px solid rgba(98,214,208,.2);
  border-radius:7px;
  background:rgba(8,15,27,.75);
}

.setting-row span,
.setting-row b,
.setting-row small {
  display:block;
}

.setting-row b {
  color:var(--cyan);
  font-size:var(--ui-body);
  letter-spacing:.07em;
}

.setting-row small {
  margin-top:6px;
  color:var(--muted);
  font-size:var(--ui-small);
  line-height:1.4;
}

.setting-row button {
  width:100%;
  min-height:var(--ui-touch);
  margin-top:10px;
  padding:7px 10px;
  border:1px solid var(--cyan);
  border-radius:6px;
  color:#071014;
  background:var(--cyan);
  font-size:var(--ui-control);
  font-weight:900;
  cursor:pointer;
}

.setting-row button.is-off {
  color:var(--muted);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}

/* World map: readable master/detail, no forced 1000px child width. */
.world-map {
  gap:12px;
  margin-top:14px;
  padding:12px;
}

.world-selector {
  gap:7px;
}

.world-selector button {
  min-height:50px;
  padding:7px 6px;
}

.world-selector button span {
  font-size:var(--ui-body);
}

.world-selector button small {
  margin-top:3px;
  font-size:var(--ui-micro);
}

.map-sector,
.map-sector:nth-child(even) {
  min-width:0;
  grid-template-columns:190px minmax(0,1fr);
  gap:14px;
  padding:13px;
}

.map-sector:nth-child(even) header {
  grid-column:1;
  grid-row:1;
  text-align:left;
}

.map-sector:nth-child(even) .map-sector__nodes {
  grid-column:2;
  grid-row:1;
}

.map-sector header span {
  font-size:var(--ui-small);
}

.map-sector header strong {
  margin:6px 0;
  font-size:var(--ui-subtitle);
}

.map-sector header small {
  font-size:var(--ui-micro);
  line-height:1.35;
  white-space:normal;
}

.map-sector__identity {
  color:#d6dde7 !important;
}

.map-sector__stats {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:8px 0 5px;
}

.map-sector__stats b {
  padding:4px 6px;
  border:1px solid rgba(98,214,208,.16);
  border-radius:4px;
  color:var(--cyan);
  background:rgba(98,214,208,.04);
  font-size:var(--ui-micro);
  font-weight:800;
}

.map-sector__nodes {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  padding-bottom:14px;
}

.map-node {
  min-height:94px;
  padding:9px 6px;
}

.map-node span {
  font-size:var(--ui-small);
}

.map-node strong {
  margin:7px 0 5px;
  font-size:var(--ui-body);
  line-height:1.25;
}

.map-node small {
  font-size:var(--ui-micro);
  line-height:1.25;
}

/* Operations and records. */
.operations-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.operation-card,
.operations-data-grid > article,
.modifier-panel {
  padding:15px;
}

.operation-card > small,
.operations-data-grid article > small,
.operation-card button small,
.modifier-card small,
.protocol-list p,
.leaderboard-list {
  font-size:var(--ui-small);
}

.operation-card > strong {
  font-size:var(--ui-subtitle);
}

.operation-card p {
  min-height:0;
  font-size:var(--ui-body);
  line-height:1.5;
}

.operation-card button,
.modifier-card {
  min-height:var(--ui-touch);
  font-size:var(--ui-control);
}

.modifier-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.modifier-card {
  min-height:88px;
}

.modifier-card strong {
  font-size:var(--ui-small);
  line-height:1.35;
}

.boss-training-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.boss-training-grid .modifier-card {
  min-height:92px;
}

.operations-data-grid.records-console {
  display:block;
}

.records-console > article {
  min-height:250px;
}

.records-console h2 {
  font-size:1.15rem;
}

.protocol-list {
  max-height:210px;
  gap:7px;
}

.build-slot-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.build-slot-grid .modifier-card {
  min-height:96px;
}

/* Briefing and loadout. */
.weapon-option {
  min-height:86px;
  padding:11px;
}

.weapon-option span {
  font-size:var(--ui-body);
}

.weapon-option small {
  font-size:var(--ui-small);
  line-height:1.4;
}

.weapon-upgrade {
  min-height:38px;
  font-size:var(--ui-small);
}

.loadout-panel__head,
.core-help,
.loadout-stats {
  font-size:var(--ui-small) !important;
}

.controls-copy {
  font-size:var(--ui-small);
  line-height:1.4;
}

/* Results: primary values receive visual priority, secondary remains readable. */
.result-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.result-grid article {
  min-height:78px;
  padding:10px;
}

.result-grid .result-metric--primary {
  min-height:92px;
  border-color:rgba(255,180,49,.3);
  background:linear-gradient(135deg,rgba(255,180,49,.07),rgba(5,8,14,.68));
}

.result-grid small {
  font-size:var(--ui-micro);
}

.result-grid strong {
  margin:6px 0 4px;
  font-size:1rem;
}

.result-grid .result-metric--primary strong {
  font-size:1.25rem;
}

.result-grid span {
  font-size:var(--ui-micro);
  white-space:normal;
  line-height:1.3;
}

.result-badges span {
  font-size:var(--ui-micro);
}

.result-actions button span {
  font-size:var(--ui-body);
}

.result-actions button small {
  font-size:var(--ui-small);
}

/* HUD: actual readability floor rather than shrinking the entire interface. */
.game-hud {
  grid-template-columns:minmax(190px,.85fr) minmax(300px,1.4fr) minmax(230px,.95fr);
  gap:9px;
  font-size:var(--ui-small);
  line-height:1.15;
}

.game-hud > div {
  padding:8px 10px;
}
.game-hud small,
.game-hud span,
.game-hud b,
.game-hud strong { font-size:inherit; }

.game-pause-button {
  min-width:58px;
  min-height:38px;
  font-size:var(--ui-small);
}

.game-feedback strong,
.game-feedback small,
.game-cinematic small,
.game-cinematic span {
  font-size:var(--ui-small);
}

@keyframes kr-preview-aura {
  0%,100% { transform:scale(.94); opacity:.5; }
  50% { transform:scale(1.04); opacity:.9; }
}
@keyframes kr-preview-projectile {
  0%,100% { transform:translateX(-24px); opacity:.25; }
  50% { transform:translateX(20px); opacity:1; }
}


/* Loadout browser: selector + detail instead of three passive summary cards. */
.loadout-summary { display:block; }
.loadout-console {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  grid-template-areas:"operator weapon" "operator equipment";
  gap:12px;
}
.loadout-console__operator {
  grid-area:operator;
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:center;
  padding:16px;
  border:1px solid rgba(141,39,255,.38);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(141,39,255,.12),rgba(5,8,14,.78));
}
.loadout-console__operator small,
.loadout-console__operator strong,
.loadout-console__operator span { display:block; }
.loadout-console__operator small { color:var(--cyan); font-size:var(--ui-small); }
.loadout-console__operator strong { margin:8px 0; font-size:1.1rem; }
.loadout-console__operator span { color:var(--muted); font-size:var(--ui-small); line-height:1.45; }
.loadout-console__section {
  min-width:0;
  padding:11px;
  border:1px solid rgba(98,214,208,.22);
  border-radius:8px;
  background:rgba(6,11,18,.7);
}
.loadout-console__section:first-of-type { grid-area:weapon; }
.loadout-console__section:last-of-type { grid-area:equipment; }
.loadout-console__head {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:var(--ui-small);
}
.loadout-console__head span { color:var(--cyan); font-weight:900; letter-spacing:.1em; }
.loadout-console__head strong { color:var(--ink); }
.loadout-choice-grid { display:grid; gap:6px; }
.loadout-choice-grid--weapons { grid-template-columns:repeat(3,minmax(0,1fr)); }
.loadout-choice-grid--equipment { grid-template-columns:repeat(3,minmax(0,1fr)); }
.loadout-choice {
  min-height:62px;
  padding:7px;
  border:1px solid rgba(98,214,208,.18);
  border-radius:6px;
  color:var(--ink);
  background:rgba(8,15,27,.76);
  text-align:left;
  cursor:pointer;
}
.loadout-choice small,.loadout-choice strong,.loadout-choice span { display:block; }
.loadout-choice small { color:var(--cyan); font-size:var(--ui-micro); }
.loadout-choice strong { margin:4px 0; font-size:var(--ui-small); line-height:1.2; }
.loadout-choice span { color:var(--muted); font-size:var(--ui-micro); }
.loadout-choice.is-active { border-color:var(--amber); box-shadow:inset 0 -3px var(--amber); background:rgba(255,180,49,.07); }
.loadout-choice:disabled { opacity:.36; cursor:not-allowed; }
.loadout-console__detail { margin:7px 0 0; color:var(--muted); font-size:var(--ui-small); line-height:1.35; }

/* Cosmetic preview semantics: existing choices visibly affect the stage. */
.customize-preview__stage[data-variant="signal"] img { filter:hue-rotate(48deg) saturate(1.45) brightness(1.08) drop-shadow(0 0 20px var(--preview-accent)); }
.customize-preview__stage[data-variant="root"] img { filter:hue-rotate(292deg) saturate(1.5) contrast(1.08) drop-shadow(0 0 20px var(--preview-accent)); }
.customize-preview__stage[data-variant="apex"] img { filter:sepia(.38) hue-rotate(345deg) saturate(1.55) brightness(1.08) drop-shadow(0 0 20px var(--preview-accent)); }
.customize-preview__stage[data-outline="thin"] img { outline:1px solid var(--preview-accent); outline-offset:-4px; }
.customize-preview__stage[data-outline="pulse"] img { outline:2px solid var(--preview-accent); outline-offset:-6px; animation:kr-preview-outline 1.6s ease-in-out infinite; }
.customize-preview__stage[data-outline="hard"] img { outline:3px solid var(--amber); outline-offset:-7px; }
.customize-preview__stage[data-trail="prism"] .customize-preview__trail { height:12px; background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),var(--amber),transparent); }
.customize-preview__stage[data-trail="kernel"] .customize-preview__trail { height:4px; box-shadow:0 -9px 0 color-mix(in srgb,var(--preview-accent) 55%,transparent),0 9px 0 color-mix(in srgb,var(--preview-accent) 35%,transparent),0 0 18px var(--preview-accent); }
.customize-preview__stage[data-projectile="hollow"] .customize-preview__projectile { background:transparent; border:2px solid var(--amber); }
.customize-preview__stage[data-projectile="segmented"] .customize-preview__projectile { width:22px; background:repeating-linear-gradient(90deg,var(--amber) 0 4px,transparent 4px 7px); }
.customize-preview__stage[data-projectile="heavy"] .customize-preview__projectile { width:18px; height:10px; border-radius:3px; }
.customize-preview__stage[data-portal="spiral"]::after,
.customize-preview__stage[data-portal="event"]::after,
.customize-preview__stage[data-portal="grid"]::after {
  content:"";
  position:absolute;
  z-index:0;
  right:5%;
  bottom:7%;
  width:62px;
  aspect-ratio:1;
  border:2px solid color-mix(in srgb,var(--preview-accent) 72%,transparent);
  border-radius:50%;
  box-shadow:0 0 18px color-mix(in srgb,var(--preview-accent) 45%,transparent);
}
.customize-preview__stage[data-portal="spiral"]::after { border-style:dashed; animation:kr-preview-spin 3.4s linear infinite; }
.customize-preview__stage[data-portal="grid"]::after { border-radius:5px; background:linear-gradient(rgba(98,214,208,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(98,214,208,.18) 1px,transparent 1px); background-size:10px 10px; }
.customize-preview__stage[data-portal="event"]::after { transform:scaleX(.45); border-color:var(--amber); }
.customize-preview__stage[data-hit="glyph"]::before,
.customize-preview__stage[data-hit="fracture"]::before,
.customize-preview__stage[data-critical="ring"]::before {
  content:"";
  position:absolute;
  z-index:4;
  right:17%;
  top:47%;
  width:34px;
  height:34px;
  border:2px solid var(--amber);
  transform:rotate(45deg);
  opacity:.75;
}
.customize-preview__stage[data-critical="ring"]::before { border-radius:50%; transform:none; animation:kr-preview-impact 1.5s ease-out infinite; }
.customize-preview__stage[data-hit="fracture"]::before { clip-path:polygon(50% 0,60% 36%,100% 24%,70% 54%,92% 100%,54% 70%,20% 98%,38% 58%,0 42%,42% 40%); background:color-mix(in srgb,var(--amber) 32%,transparent); border:0; }

@keyframes kr-preview-outline { 0%,100%{opacity:.6}50%{opacity:1} }
@keyframes kr-preview-spin { to{rotate:360deg} }
@keyframes kr-preview-impact { 0%{scale:.6;opacity:0}35%{opacity:1}100%{scale:1.35;opacity:0} }

/* Compact desktop and tablets: preserve readable text, allow local scroll. */
@media (max-width: 1099px) {
  .game-shell { padding-inline:12px; }
  .boot-card {
    width:calc(100vw - 32px);
    max-width:none;
    max-height:calc(100dvh - 92px);
    padding:16px;
  }
  .boot-card[data-active-screen] { width:calc(100vw - 32px); }
  .operator-browser { grid-template-columns:220px minmax(0,1fr); }
  .operator-selector { grid-template-columns:1fr; max-height:440px; overflow:auto; }
  .operator-selector .skin-card { min-height:92px; }
  .operator-detail { grid-template-columns:minmax(180px,.7fr) minmax(0,1.4fr); }
  .operator-detail__visual,
  .operator-detail__visual img { min-height:260px; }
  .controls-category { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customize-layout { grid-template-columns:250px minmax(0,1fr); }
  .map-sector,
  .map-sector:nth-child(even) { grid-template-columns:165px minmax(0,1fr); }
  .map-sector__nodes { gap:6px; }
  .map-node { min-height:84px; }
}

/* Short desktop windows: size the game frame by available height instead of forcing page scroll. */
@media (min-width: 1101px) and (max-height: 800px) {
  .game-shell {
    height:100svh;
    min-height:0;
    padding-block:8px;
    gap:8px;
  }
  .game-footer { display:none; }
  .game-brand img { width:34px; height:34px; }
  .game-actions button { min-height:34px; }
  .game-frame {
    width:var(--kr-stage-width,100%);
    height:var(--kr-stage-height,calc(100svh - 66px));
    max-width:100%;
    aspect-ratio:auto;
  }
  .game-frame > canvas { width:100%; height:100%; aspect-ratio:auto; }
}

@media (min-width: 1101px) and (max-height: 980px) {
  .game-footer { display:none; }
}

/* Large desktop: artwork and information breathe while retaining one shared visual axis. */
@media (min-width: 1400px) and (min-height: 760px) {
  .game-header,.game-footer { padding-inline:4px; }
  .game-overlay { padding:14px; }
  .boot-card { max-height:min(90dvh,900px); }
  .title-logo { width:min(820px,72%); max-height:330px; }
  .title-lockup { padding-top:4px; }
  .title-lockup p { max-width:72ch; }
  .title-profile { grid-template-columns:72px minmax(0,1fr) auto; padding:14px 16px; }
  .title-profile img { width:72px; height:72px; }
  .game-menu { gap:12px; }
  .game-menu button { min-height:88px; padding:15px 16px; }

  .operator-browser { grid-template-columns:minmax(300px,.72fr) minmax(0,2fr); gap:18px; }
  .operator-detail { grid-template-columns:minmax(360px,1fr) minmax(0,1.35fr); gap:24px; padding:20px; }
  .operator-detail__visual,
  .operator-detail__visual img { min-height:420px; }
  .operator-detail__visual img { object-position:center; }
  .operator-detail__facts { gap:11px; }
  .operator-detail__facts article { padding:13px; }

  .customize-layout { grid-template-columns:minmax(350px,.9fr) minmax(0,1.65fr); }
  .customize-preview__stage { min-height:390px; }
  .controls-category { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Mobile / foldable landscape: reflow, never miniaturize. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  html, body { width:100%; height:100%; overflow:hidden; }
  .game-shell { width:100%; height:100dvh; min-height:0; padding:0; gap:0; }
  .game-header,.game-footer { display:none; }
  .game-frame { width:var(--kr-game-fit-width,100%); height:var(--kr-game-fit-height,100%); max-width:100%; max-height:100%; min-height:0; align-self:center; justify-self:center; border:0; border-radius:0; }
  canvas { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }

  .game-overlay {
    padding-block:6px;
    padding-inline-start:max(10px,calc(env(safe-area-inset-left) + 6px));
    padding-inline-end:max(10px,calc(env(safe-area-inset-right) + 6px));
  }

  .boot-card,
  .boot-card[data-active-screen] {
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    padding:8px 12px;
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:8px;
    overscroll-behavior:contain;
  }

  .screen-head {
    min-height:38px;
    padding-bottom:5px;
  }

  .screen-head b {
    font-size:clamp(1.45rem,6.4vh,2rem);
  }

  .screen-head small {
    font-size:var(--ui-micro);
  }

  .screen-copy {
    margin:5px 0 7px;
    font-size:var(--ui-small);
    line-height:1.35;
  }

  .subscreen-tabs,
  .detail-tabs {
    gap:5px;
    margin:5px 0 8px;
  }

  .subscreen-tabs button,
  .detail-tabs button {
    min-height:42px;
    padding:5px 6px;
    font-size:var(--ui-small);
  }

  .menu-screen[data-screen="skins"] > .screen-copy,
  .operations-screen > .screen-copy {
    display:none;
  }

  /* Operator */
  .operator-browser {
    grid-template-columns:220px minmax(0,1fr);
    gap:9px;
    min-height:0;
  }

  .operator-selector {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none;
    gap:5px;
    overflow:visible;
  }

  .operator-selector .skin-card {
    min-height:76px;
    padding:5px;
  }

  .operator-selector .skin-card__avatar {
    height:38px;
    margin-bottom:3px;
  }

  .operator-selector .skin-card__role {
    display:none;
  }

  .operator-selector .skin-card > strong {
    font-size:var(--ui-small);
  }

  .operator-selector .skin-card > small,
  .operator-selector .skin-card > span:last-child {
    margin-top:2px;
    font-size:var(--ui-micro);
    line-height:1.15;
  }

  .operator-detail {
    grid-template-columns:150px minmax(0,1fr);
    gap:10px;
    padding:9px;
  }

  .operator-detail__visual,
  .operator-detail__visual img {
    min-height:215px;
    height:100%;
  }

  .operator-detail h2 {
    margin:3px 0 5px;
    font-size:clamp(1.55rem,7.5vh,2.2rem);
  }

  .operator-detail__content > p {
    margin-bottom:7px;
    font-size:var(--ui-small);
    line-height:1.3;
  }

  .operator-detail__facts {
    gap:5px;
  }

  .operator-detail__facts article {
    padding:6px;
  }

  .operator-detail__facts strong,
  .operator-detail__facts span,
  .operator-detail__facts small {
    font-size:var(--ui-micro);
    line-height:1.2;
  }

  /* Development */
  .skill-panel { padding:8px; }
  .skill-panel__head { min-height:36px; }
  .skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px; }
  .skill-card { min-height:92px; padding:8px; }
  .skill-card span { font-size:var(--ui-small); }
  .skill-card strong { margin:4px 0; font-size:.875rem; }
  .skill-card small { font-size:var(--ui-micro); line-height:1.25; }

  /* Loadout */
  .operator-subscreen { padding:8px; }
  .loadout-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .loadout-summary article { min-height:108px; padding:9px; }
  .loadout-summary small,
  .loadout-summary span { font-size:var(--ui-micro); }
  .loadout-summary strong { font-size:var(--ui-body); }

  /* Loadout */
  .loadout-console { grid-template-columns:170px minmax(0,1fr); gap:6px; }
  .loadout-console__operator { padding:8px; }
  .loadout-console__operator small,.loadout-console__operator span { font-size:var(--ui-micro); }
  .loadout-console__operator strong { margin:5px 0; font-size:var(--ui-body); }
  .loadout-console__section { padding:6px; }
  .loadout-console__head { margin-bottom:4px; font-size:var(--ui-micro); }
  .loadout-choice-grid { gap:4px; }
  .loadout-choice { min-height:52px; padding:5px; }
  .loadout-choice strong { margin:2px 0; font-size:var(--ui-micro); }
  .loadout-choice small,.loadout-choice span { font-size:var(--ui-micro); }
  .loadout-console__detail { margin-top:4px; font-size:var(--ui-micro); line-height:1.2; }

  /* Customize */
  .customize-layout {
    grid-template-columns:230px minmax(0,1fr);
    gap:9px;
  }
  .customize-preview__stage { min-height:225px; }
  .customize-preview__operator > span { font-size:var(--ui-small); }
  .customize-preview__operator > small { font-size:var(--ui-micro); }
  .customize-tabs { margin-top:0; }
  .cosmetic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .cosmetic-grid button { min-height:77px; padding:7px; }
  .cosmetic-grid small { font-size:var(--ui-micro); }
  .cosmetic-grid strong { font-size:var(--ui-body); }
  .cosmetic-grid button > span { margin-top:4px; font-size:var(--ui-micro); }

  /* Controls */
  .controls-console { padding:8px; }
  .controls-tabs { margin-top:0; }
  .controls-category { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .setting-row { min-height:82px; padding:7px; }
  .setting-row b { font-size:var(--ui-small); }
  .setting-row small {
    margin-top:3px;
    font-size:var(--ui-micro);
    line-height:1.2;
  }
  .setting-row button {
    min-height:42px;
    margin-top:5px;
    padding:5px;
    font-size:var(--ui-small);
  }

  /* Map */
  .world-map { margin-top:5px; padding:7px; }
  .world-selector { grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
  .world-selector button { min-height:40px; padding:4px; }
  .world-selector button small { display:none; }
  .map-sector,
  .map-sector:nth-child(even) {
    grid-template-columns:155px minmax(0,1fr);
    min-height:0;
    gap:7px;
    padding:7px;
  }
  .map-sector header strong { font-size:var(--ui-body); }
  .map-sector header small { font-size:var(--ui-micro); }
  .map-sector__stats { gap:3px; margin:5px 0 3px; }
  .map-sector__stats b { padding:2px 4px; font-size:var(--ui-micro); }
  .map-sector__nodes { grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; padding-bottom:10px; }
  .map-node { min-height:78px; padding:6px 4px; }
  .map-node span,.map-node small { font-size:var(--ui-micro); }
  .map-node strong { margin:4px 0; font-size:var(--ui-small); }

  /* Operations */
  .operations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .operation-card,.modifier-panel,.operations-data-grid > article { padding:9px; }
  .operation-card p { font-size:var(--ui-small); line-height:1.3; }
  .modifier-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .modifier-card { min-height:70px; padding:6px; }
  .modifier-card strong,.modifier-card small { font-size:var(--ui-micro); }
  .boss-training-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  .boss-training-grid .modifier-card { min-height:72px; padding:6px; }
  .records-console > article { min-height:190px; padding:9px; }
  .protocol-list { max-height:150px; }
  .build-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .build-slot-grid .modifier-card { min-height:78px; }

  /* Briefing */
  .boot-card[data-active-screen="briefing"] .menu-screen[data-screen="briefing"]:not([hidden]) {
    display:grid;
    grid-template-columns:minmax(250px,.78fr) minmax(0,1.45fr);
    grid-template-areas:
      "head head"
      "eyebrow loadout"
      "title loadout"
      "copy loadout"
      "launch launch";
    gap:5px 10px;
    align-content:start;
  }
  .boot-card[data-active-screen="briefing"] .screen-head { grid-area:head; }
  .boot-card[data-active-screen="briefing"] .eyebrow { grid-area:eyebrow; margin:0; }
  .boot-card[data-active-screen="briefing"] h1 {
    grid-area:title;
    margin:0;
    font-size:clamp(2rem,10vh,3rem);
  }
  .boot-card[data-active-screen="briefing"] [data-overlay-copy] {
    grid-area:copy;
    margin:0;
    max-height:8.2em;
    overflow:auto;
    font-size:var(--ui-small);
    line-height:1.35;
  }
  .boot-card[data-active-screen="briefing"] .loadout-panel {
    grid-area:loadout;
    height:auto;
    max-height:274px;
    margin:0;
    padding:7px;
    overflow:auto;
  }
  .boot-card[data-active-screen="briefing"] .controls-copy { display:none; }
  .boot-card[data-active-screen="briefing"] .launch-button {
    grid-area:launch;
    min-height:44px;
  }
  .weapon-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .weapon-option { min-height:58px; padding:6px; }
  .weapon-option span { font-size:var(--ui-small); }
  .weapon-option small { display:none; }
  .weapon-upgrade { min-height:32px; font-size:var(--ui-micro); }
  .core-help { display:none; }
  .loadout-stats { font-size:var(--ui-micro) !important; }

  /* Result */
  .result-hero { grid-template-columns:70px 1fr; gap:8px; margin:2px 0 6px; }
  .result-hero > span { width:64px; height:64px; font-size:2.3rem; }
  .result-hero h1 { margin:0; font-size:clamp(1.6rem,8vh,2.3rem); }
  .result-hero p { margin:3px 0 0; font-size:var(--ui-micro); }
  .result-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .result-grid article,
  .result-grid .result-metric--primary { min-height:58px; padding:5px; }
  .result-grid small,.result-grid span { font-size:var(--ui-micro); }
  .result-grid strong,
  .result-grid .result-metric--primary strong { margin:2px 0; font-size:.875rem; }
  .result-badges { margin:5px 0; gap:4px; }
  .result-badges span { padding:3px 5px; }
  .result-actions { margin-top:5px; gap:5px; }
  .result-actions button { min-height:42px; padding:5px 7px; }
  .result-actions button span { font-size:var(--ui-small); }
  .result-actions button small { margin-top:2px; font-size:var(--ui-micro); }

  /* Gameplay HUD */
  .game-hud {
    inset:6px 62px auto 6px;
    grid-template-columns:minmax(150px,.82fr) minmax(240px,1.35fr) minmax(180px,.95fr);
    gap:5px;
    font-size:var(--ui-small);
    line-height:1.1;
    letter-spacing:.045em;
  }
  .game-hud > div { min-height:42px; padding:5px 7px; }
  .hud-character { gap:6px; }
  .hud-character img { width:32px; height:32px; }
  .hud-character span { gap:2px; }
  .hud-mission { gap:2px; }
  .hud-loadout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 6px; text-align:left; }
  .hud-loadout span { display:grid; gap:1px; }
  .hud-loadout b { text-align:left; }
  .game-pause-button { top:6px; right:6px; min-width:52px; min-height:40px; font-size:var(--ui-micro); }
  .boss-hud { top:54px; }
  .touch-controls {
    inset-inline-start:max(4px,calc(env(safe-area-inset-left) + 2px));
    inset-inline-end:max(6px,calc(env(safe-area-inset-right) + 4px));
    inset-block-end:max(4px,calc(env(safe-area-inset-bottom) + 2px));
  }
  .touch-controls button { min-width:56px; min-height:52px; }
}

/* Portrait fallback remains usable; scrolling is preferred over unreadable compression. */
@media (orientation: portrait) {
  body { overflow:auto; }
  .game-shell { width:100%; padding-inline:0; }
  .game-frame { border-inline:0; border-radius:0; }
  .game-overlay { padding:8px; }
  .boot-card,
  .boot-card[data-active-screen] {
    width:100%;
    max-width:none;
    max-height:88dvh;
    padding:14px;
    overflow:auto;
  }
  .subscreen-tabs,
  .detail-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operator-browser,
  .operator-detail,
  .customize-layout { grid-template-columns:1fr; }
  .loadout-console { grid-template-columns:1fr; grid-template-areas:"operator" "weapon" "equipment"; }
  .loadout-choice-grid--weapons,.loadout-choice-grid--equipment { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operator-selector { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }
  .operator-detail__visual,
  .operator-detail__visual img { min-height:260px; }
  .skill-grid,
  .controls-category,
  .loadout-summary,
  .cosmetic-grid,
  .result-grid,
  .operations-grid { grid-template-columns:1fr; }
  .world-selector { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .map-sector,
  .map-sector:nth-child(even) { grid-template-columns:1fr; }
  .map-sector:nth-child(even) header,
  .map-sector:nth-child(even) .map-sector__nodes { grid-column:1; grid-row:auto; text-align:left; }
  .map-sector__nodes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .boss-training-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-menu { grid-template-columns:1fr; }
}

/* Touch targets remain physically usable regardless of menu density. */
@media (hover:none), (pointer:coarse) {
  .touch-controls { display:flex; }
  .controls-copy { display:none; }
  .screen-head button,
  .subscreen-tabs button,
  .detail-tabs button,
  .setting-row button,
  .launch-button,
  .result-actions button,
  .pause-menu button {
    min-height:44px;
  }
  .world-selector button,
  .skill-panel__head button,
  .skill-card,
  .map-node,
  .result-actions button {
    min-height:46px;
  }
}

/* PK 11.09.2026: disabled means unavailable, not unreadable. Preserve information contrast. */
.skill-card:disabled { opacity:.76; }
.skin-card:disabled { opacity:.62; }
.weapon-option:disabled,
.loadout-choice:disabled { opacity:.56; }
.map-node:disabled { opacity:.52; }
.skill-panel__head button:disabled,
.weapon-upgrade:disabled { opacity:.58; }