:root {
  --ink: #17243a;
  --muted: #61708a;
  --line: rgba(255, 255, 255, 0.18);
  --panel: rgba(255, 255, 255, 0.93);
  --panelDark: rgba(12, 21, 48, 0.82);
  --yellow: #ffd84d;
  --orange: #ff9f1c;
  --blue: #49b8ff;
  --green: #4bd98b;
  --red: #ff6363;
  --surfaceSoft: #f6f9ff;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 216, 77, 0.34), transparent 18%),
    radial-gradient(circle at 86% 18%, rgba(73, 184, 255, 0.28), transparent 20%),
    linear-gradient(180deg, #08122f 0%, #182b5f 46%, #62457f 100%);
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.topBar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 12, 32, 0.82);
  backdrop-filter: blur(10px);
}

.topBar a,
.playerPill,
.topBar button,
.primaryButton,
.rebirthPanel button,
.upgrade button,
.newProfileForm button,
.quietButton {
  min-height: 42px;
  border: 3px solid #17243a;
  border-radius: 8px;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: 0 5px 0 #8f5e00;
  color: #17243a;
  font-weight: 900;
  text-decoration: none;
}

.topBar a,
.topBar button,
.playerPill {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
}

.playerPill {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  color: #17243a;
  font-weight: 900;
}

.topBar button:last-child,
.profileDanger {
  background: linear-gradient(#ffd0d0, #ff7474);
  box-shadow: 0 5px 0 #8e2f2f;
}

button:hover,
a:hover,
button:focus-visible,
a:focus-visible {
  filter: brightness(1.05);
  outline: none;
}

button:active,
a:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #8f5e00;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.58;
  transform: none;
}

.pageShell {
  width: min(100% - 28px, 1220px);
  margin: 0 auto;
  padding: 28px 0 42px;
}

.hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  color: #fff;
}

.hero h1 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(54px, 10vw, 112px);
  line-height: 0.94;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.32);
}

.hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #eaf3ff;
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 900;
}

.primaryButton {
  min-width: 148px;
  padding: 12px 22px;
  font-size: 22px;
}

.gameLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.gameColumn,
.shop,
.howTo,
.rebirthPanel,
.goalsPanel {
  min-width: 0;
}

.canvasFrame {
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  background: #07102c;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

canvas {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  touch-action: none;
  user-select: none;
}

.centerMessage {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 520px);
  padding: 18px 20px;
  border: 3px solid rgba(255, 216, 77, 0.92);
  border-radius: 10px;
  background: rgba(8, 18, 47, 0.86);
  color: #fff8c7;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.centerMessage.hidden {
  display: none;
}

.hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.hud div,
.shop,
.howTo,
.rebirthPanel,
.goalsPanel {
  border: 3px solid rgba(23, 36, 58, 0.72);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.14);
}

.hud div {
  min-height: 76px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
}

.hud span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.hud strong {
  color: #15213a;
  font-size: 20px;
}

.shop,
.howTo,
.goalsPanel {
  padding: 18px;
}

.goalsPanel {
  margin-top: 12px;
}

.shopHeader {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.shopTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.closeShopButton {
  display: none;
  min-height: 42px;
  border: 3px solid #17243a;
  border-radius: 8px;
  padding: 7px 13px;
  background: linear-gradient(#eef4ff, #d7e3f8);
  box-shadow: 0 4px 0 #7b879c;
  color: #17243a;
  font-weight: 900;
}

.shop h2,
.howTo h2,
.rebirthPanel h2,
.goalsPanel h2 {
  margin: 0;
  color: #17243a;
  font-size: 24px;
}

.shopHeader p {
  min-height: 0;
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #10234f;
  color: #fff8c7;
  font-weight: 900;
  line-height: 1.35;
}

.starProgress {
  background: #eef5ff;
  color: #203551;
}

.starTierPanel {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7d4;
  color: #203551;
  font-weight: 900;
  line-height: 1.35;
}

.starTierPanel strong {
  color: #6b4a00;
  font-size: 14px;
}

.starTierPanel span {
  font-size: 15px;
}

.starMiniList {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.starMiniList div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #203551;
  font-size: 12px;
  font-weight: 900;
}

.shopTabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.shopTabs button {
  min-height: 38px;
  border: 2px solid rgba(23, 36, 58, 0.24);
  border-radius: 8px;
  background: #eef4ff;
  color: #253754;
  font-size: 14px;
  font-weight: 900;
}

.shopTabs button.active {
  border-color: #17243a;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: inset 0 -3px 0 rgba(143, 94, 0, 0.28);
}

.upgradeList {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-left: 4px;
}

.upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  border: 2px solid rgba(23, 36, 58, 0.16);
  border-radius: 8px;
  background: rgba(246, 250, 255, 0.94);
}

.upgradeHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.upgrade h3 {
  margin: 0;
  color: #17243a;
  font-size: 17px;
}

.levelBadge {
  min-width: 56px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #17243a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.upgrade p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.upgradeFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cost {
  color: #6b4a00;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.num-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.scaleLabel {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.abilityStrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 2px solid rgba(23, 36, 58, 0.14);
  border-radius: 8px;
  background: #fff7d4;
}

.abilityStrip button {
  min-height: 38px;
  border: 3px solid #17243a;
  border-radius: 8px;
  background: linear-gradient(#9effe1, #43d98d);
  box-shadow: 0 4px 0 #1e8050;
  color: #17243a;
  font-weight: 900;
}

.abilityStrip span,
.offlineNotice {
  color: #203551;
  font-size: 13px;
  font-weight: 900;
}

.offlineNotice {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #eef5ff;
}

.offlineNotice.hidden {
  display: none;
}

.albumGrid,
.missionList {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.albumRow,
.missionRow {
  display: grid;
  gap: 5px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: #203551;
  font-weight: 900;
}

.albumRow.locked {
  opacity: 0.62;
}

.albumRow strong,
.missionRow strong {
  color: #17243a;
}

.albumRow span,
.missionRow span {
  color: var(--muted);
  font-size: 12px;
}

.upgrade button,
.rebirthPanel button {
  min-height: 44px;
  padding: 7px 12px;
}

.rebirthPanel {
  display: none;
  margin-top: 0;
  padding: 12px;
}

.rebirthPanel.active {
  display: block;
}

.rebirthPanel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.rebirthPanel dl div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(23, 36, 58, 0.12);
  border-radius: 8px;
  background: var(--surfaceSoft);
}

.rebirthPanel dt,
.rebirthPanel dd {
  margin: 0;
  font-weight: 900;
}

.rebirthPanel dt {
  color: var(--muted);
  font-size: 12px;
}

.rebirthNote {
  margin: 0 0 14px;
  color: #465873;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.sectionTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sectionTitleRow span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

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

.goalCard {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 2px solid rgba(23, 36, 58, 0.14);
  border-radius: 8px;
  background: var(--surfaceSoft);
}

.goalCard strong {
  font-size: 15px;
}

.goalCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.goalTrack {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 36, 58, 0.12);
}

.goalTrack i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #43d98d, #ffd84d);
}

.rebirthPanel button {
  width: 100%;
  background: linear-gradient(#9effe1, #43d98d);
  box-shadow: 0 5px 0 #1e8050;
}

.howTo {
  margin-top: 16px;
  color: #17243a;
}

.howTo ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0 20px 0 0;
  font-weight: 900;
  line-height: 1.5;
}

.touchControls,
.mobileQuickBar,
.mobilePlayHint {
  display: none;
}

.touchControls {
  touch-action: none;
  user-select: none;
}

.touchCluster {
  display: flex;
  gap: 10px;
}

.touchButton,
.mobileQuickBar button {
  min-height: 52px;
  border: 3px solid #17243a;
  border-radius: 8px;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: 0 5px 0 #8f5e00;
  color: #17243a;
  font-weight: 900;
}

.touchButton {
  min-width: 58px;
  padding: 8px 12px;
  font-size: 22px;
  touch-action: none;
}

.touchButton span {
  display: block;
  font-size: 12px;
  line-height: 1.1;
}

.shootButton {
  min-width: 78px;
}

.stormButton {
  background: linear-gradient(#9effe1, #43d98d);
  box-shadow: 0 5px 0 #1e8050;
}

.autoFireButton {
  min-width: 126px;
  padding-inline: 10px;
  background: linear-gradient(#eef4ff, #d7e3f8);
  box-shadow: 0 5px 0 #7b879c;
  font-size: 14px;
}

.autoFireButton.active {
  background: linear-gradient(#9effe1, #43d98d);
  box-shadow: 0 5px 0 #1e8050;
}

.mobileQuickBar {
  gap: 10px;
  margin-top: 12px;
}

.mobileQuickBar button {
  flex: 1;
  padding: 8px 12px;
}

.mobilePlayHint {
  margin-top: 10px;
  padding: 9px 11px;
  border: 2px solid rgba(255, 216, 77, 0.55);
  border-radius: 8px;
  background: rgba(8, 18, 47, 0.72);
  color: #fff8c7;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 10, 28, 0.72);
}

.modal.hidden {
  display: none;
}

.profileModal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 216, 77, 0.3), transparent 24%),
    rgba(5, 10, 28, 0.82);
}

.profileModal.hidden {
  display: none;
}

.profilePanel {
  width: min(100%, 620px);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 24px;
  border: 4px solid rgba(255, 216, 77, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.profilePanel h2 {
  margin: 0 0 14px;
  color: #17243a;
  font-size: 34px;
}

.profileList {
  display: grid;
  gap: 10px;
}

.profileCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
  border: 2px solid rgba(23, 36, 58, 0.16);
  border-radius: 8px;
  background: var(--surfaceSoft);
}

.profileCard.active {
  border-color: #17243a;
  background: #fff7d4;
}

.profileMeta {
  display: grid;
  gap: 4px;
}

.profileMeta strong {
  font-size: 20px;
}

.profileMeta span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.profileActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.profileActions button,
.newProfileForm button,
.quietButton {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 14px;
}

.newProfileForm {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-weight: 900;
}

.newProfileForm div {
  display: flex;
  gap: 8px;
}

.newProfileForm input {
  min-width: 0;
  flex: 1;
  min-height: 42px;
  border: 3px solid rgba(23, 36, 58, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  color: #17243a;
  font: inherit;
  font-weight: 900;
  touch-action: auto;
  user-select: text;
}

.quietButton {
  width: 100%;
  margin-top: 14px;
  background: linear-gradient(#eef4ff, #d7e3f8);
  box-shadow: 0 5px 0 #7b879c;
}

.modalPanel {
  width: min(100%, 460px);
  padding: 24px;
  border: 4px solid rgba(255, 216, 77, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.modalPanel h2 {
  margin: 0;
  color: #17243a;
  font-size: 30px;
}

.modalPanel p {
  margin: 12px 0 18px;
  color: #32435f;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
}

.modalActions {
  display: flex;
  gap: 10px;
}

.modalActions button {
  flex: 1;
  min-height: 44px;
  border: 3px solid #17243a;
  border-radius: 8px;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: 0 5px 0 #8f5e00;
  color: #17243a;
  font-weight: 900;
}

.modalActions button:last-child {
  background: linear-gradient(#eef4ff, #d7e3f8);
  box-shadow: 0 5px 0 #7b879c;
}

.adminConsole {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 60;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.adminConsole.hidden {
  display: none;
}

.adminConsolePanel {
  width: min(100%, 760px);
  max-height: min(72vh, 620px);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 3px solid rgba(255, 216, 77, 0.88);
  border-radius: 8px;
  background: rgba(7, 14, 35, 0.94);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.4);
  color: #fff8c7;
  pointer-events: auto;
}

.adminConsoleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adminConsoleTools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminConsoleHeader strong {
  color: var(--yellow);
  font-size: 18px;
}

.adminConsoleTools button {
  min-height: 34px;
  border: 2px solid #17243a;
  border-radius: 8px;
  padding: 5px 10px;
  background: linear-gradient(#9effe1, #43d98d);
  box-shadow: 0 3px 0 #1e8050;
  color: #17243a;
  font-size: 13px;
  font-weight: 900;
}

.adminConsoleHeader span,
.adminConsoleResult {
  color: #dbe8ff;
  font-size: 13px;
  font-weight: 900;
}

.adminConsoleResult {
  min-height: 24px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  line-height: 1.45;
  white-space: pre-wrap;
}

.adminConsoleHelp {
  max-height: 240px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #edf4ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.adminConsoleHelp.hidden {
  display: none;
}

.adminConsoleHelp code {
  direction: rtl;
  unicode-bidi: isolate;
  color: #fff071;
  font-family: inherit;
}

.adminConsoleForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.adminConsoleForm input {
  min-width: 0;
  min-height: 44px;
  border: 3px solid rgba(255, 216, 77, 0.72);
  border-radius: 8px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.96);
  color: #17243a;
  font: inherit;
  font-weight: 900;
  touch-action: auto;
  user-select: text;
}

.adminConsoleForm button {
  min-height: 44px;
  border: 3px solid #17243a;
  border-radius: 8px;
  padding: 8px 14px;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: 0 4px 0 #8f5e00;
  color: #17243a;
  font-weight: 900;
}

.adminMenu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 8, 24, 0.78);
}

.adminMenu.hidden {
  display: none;
}

.adminMenuPanel {
  width: min(100%, 1060px);
  max-height: min(92vh, 820px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding: 16px;
  border: 3px solid rgba(255, 216, 77, 0.92);
  border-radius: 8px;
  background: rgba(7, 14, 35, 0.98);
  color: #edf4ff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.adminMenuHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.adminMenuHeader h2 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(26px, 4vw, 38px);
}

.adminMenuHeader p {
  margin: 5px 0 0;
  color: #dbe8ff;
  font-weight: 900;
}

.adminMenuClose {
  width: 42px;
  height: 42px;
  border: 3px solid #17243a;
  border-radius: 8px;
  background: linear-gradient(#ffd0d0, #ff7474);
  box-shadow: 0 4px 0 #8e2f2f;
  color: #17243a;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.adminMenuTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.adminMenuTabs button {
  min-height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #edf4ff;
  font-weight: 900;
}

.adminMenuTabs button.active {
  border-color: #17243a;
  background: linear-gradient(#fff071, #ffbc28);
  color: #17243a;
  box-shadow: inset 0 -3px 0 rgba(143, 94, 0, 0.28);
}

.adminMenuStatus {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff8c7;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

.adminMenuStatus.error {
  background: rgba(255, 99, 99, 0.18);
  color: #ffd0d0;
}

.adminMenuBody {
  min-height: 0;
  overflow: auto;
  padding-left: 4px;
}

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

.adminBox,
.adminWideBox {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.adminWideBox {
  grid-column: 1 / -1;
}

.adminBox h3,
.adminWideBox h3 {
  margin: 0;
  color: #fff8c7;
  font-size: 18px;
}

.adminRow {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.adminRow label,
.adminCurrent,
.adminNote {
  color: #dbe8ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.adminCurrent strong {
  color: #fff071;
}

.adminCurrent {
  grid-column: 1 / -1;
}

.adminNote {
  color: #9effe1;
}

.adminRow input,
.adminRow select,
.adminCommandInput,
.adminProfileNameInput {
  min-width: 0;
  min-height: 38px;
  border: 2px solid rgba(255, 216, 77, 0.6);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.96);
  color: #17243a;
  font: inherit;
  font-weight: 900;
  touch-action: auto;
  user-select: text;
}

.adminRow button,
.adminQuickButtons button,
.adminProfileActions button,
.adminCommandButtons button {
  min-height: 38px;
  border: 2px solid #17243a;
  border-radius: 8px;
  padding: 7px 10px;
  background: linear-gradient(#fff071, #ffbc28);
  box-shadow: 0 3px 0 #8f5e00;
  color: #17243a;
  font-weight: 900;
}

.adminRow button.danger,
.adminProfileActions button.danger {
  background: linear-gradient(#ffd0d0, #ff7474);
  box-shadow: 0 3px 0 #8e2f2f;
}

.adminQuickButtons,
.adminProfileActions,
.adminCommandButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.adminUpgradeList,
.adminProfileList,
.adminCommandList {
  display: grid;
  gap: 8px;
}

.adminUpgradeItem,
.adminProfileItem,
.adminCommandList div {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.adminUpgradeTitle,
.adminProfileItem {
  color: #edf4ff;
  font-weight: 900;
}

.adminUpgradeControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 7px;
}

.adminCommandList code {
  direction: rtl;
  unicode-bidi: isolate;
  color: #fff071;
  font-family: inherit;
  font-weight: 900;
}

@media (max-width: 1040px) {
  .pageShell {
    width: min(100% - 20px, 920px);
    padding: 18px 0 32px;
  }

  .gameLayout {
    grid-template-columns: 1fr;
  }

  .hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goalsList {
    grid-template-columns: 1fr;
  }

  .shopTabs button {
    min-height: 44px;
  }
}

@media (max-width: 680px) {
  body.mobile-shop-open {
    overflow: hidden;
  }

  .topBar,
  .hero {
    align-items: stretch;
    flex-direction: column;
  }

  .topBar {
    position: static;
    gap: 8px;
    padding: 10px;
  }

  .topBar a,
  .topBar button,
  .primaryButton,
  .playerPill {
    width: 100%;
    justify-content: center;
  }

  .hud,
  .howTo ul,
  .rebirthPanel dl {
    grid-template-columns: 1fr;
  }

  .hero {
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(44px, 18vw, 68px);
  }

  .hero p {
    font-size: 17px;
  }

  .primaryButton {
    min-height: 48px;
    font-size: 20px;
  }

  .canvasFrame {
    border-width: 3px;
    border-radius: 8px;
  }

  .hud {
    gap: 8px;
  }

  .hud div {
    min-height: 62px;
    padding: 8px 10px;
  }

  .hud strong {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .shop,
  .howTo,
  .goalsPanel {
    padding: 14px;
  }

  .shop {
    position: fixed;
    inset: auto 0 0;
    z-index: 55;
    display: none;
    max-height: min(78vh, 680px);
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    border-inline: 0;
    border-bottom: 0;
    padding: 14px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.34);
  }

  .shop.open {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .closeShopButton {
    display: inline-flex;
    align-items: center;
  }

  .shopTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upgradeList {
    max-height: none;
    min-height: 0;
    overscroll-behavior: contain;
  }

  .upgrade {
    grid-template-columns: 1fr;
  }

  .upgradeFooter {
    justify-content: space-between;
  }

  .touchControls,
  .mobileQuickBar {
    display: flex;
  }

  .touchControls {
    position: sticky;
    bottom: 0;
    z-index: 30;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin: 10px -4px 0;
    padding: 8px 4px max(8px, env(safe-area-inset-bottom));
    pointer-events: none;
  }

  .touchCluster {
    pointer-events: auto;
  }

  .actionCluster {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .mobileQuickBar {
    display: flex;
  }

  .profileCard,
  .newProfileForm div {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .profileActions {
    justify-content: stretch;
  }

  .profileActions button {
    flex: 1;
  }

  .adminConsole {
    inset: auto 8px max(8px, env(safe-area-inset-bottom));
  }

  .adminConsoleForm {
    grid-template-columns: 1fr;
  }

  .adminMenu {
    padding: 8px;
  }

  .adminGrid,
  .adminRow,
  .adminUpgradeControls {
    grid-template-columns: 1fr;
  }

  .adminMenuHeader,
  .adminConsoleTools {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .mobilePlayHint {
    display: block;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.mobile-shop-open {
    overflow: hidden;
  }

  .topBar {
    position: static;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .topBar a,
  .topBar button,
  .playerPill {
    min-height: 38px;
    padding: 6px 10px;
  }

  .hero,
  .howTo {
    display: none;
  }

  .pageShell {
    width: min(100% - 12px, 1100px);
    padding: 8px 0 12px;
  }

  .gameLayout {
    grid-template-columns: 1fr;
  }

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

  .hud div {
    min-height: 58px;
    padding: 7px 9px;
  }

  .hud strong {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .goalsPanel {
    margin-top: 8px;
    padding: 12px;
  }

  .touchControls,
  .mobileQuickBar {
    display: flex;
  }

  .touchControls {
    position: fixed;
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    z-index: 30;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
  }

  .touchCluster {
    pointer-events: auto;
  }

  .actionCluster {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .shop {
    position: fixed;
    inset: auto 0 0;
    z-index: 55;
    display: none;
    max-height: 84vh;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    border-inline: 0;
    border-bottom: 0;
    padding: 14px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.34);
  }

  .shop.open {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .closeShopButton {
    display: inline-flex;
    align-items: center;
  }

  .upgradeList {
    max-height: none;
    min-height: 0;
    overscroll-behavior: contain;
  }
}