:root{
  --bg:#060b16;
  --panel:#0f1728;
  --line:#3f5d85;
  --text:#dbe9ff;
  --accent:#7cc7ff;
  --accent2:#9dffcf;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at top,#10203e 0%,#050913 55%,#02040a 100%);color:var(--text);font-family:Segoe UI,Arial,sans-serif;height:100%}
body{overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.app{display:grid;grid-template-columns:220px 1fr;height:100vh}
.sidebar{padding:14px;background:linear-gradient(180deg,#0d1628 0%,#09101d 100%);border-right:1px solid #355176;display:flex;flex-direction:column;gap:12px;box-shadow:inset -10px 0 25px rgba(255,255,255,.03)}
.brand{padding:14px;border:1px solid #45658f;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));text-align:center}
.title{font-weight:900;letter-spacing:.14em;font-size:24px}
.signature{opacity:.8;font-size:13px;margin-top:4px}
.panel{border:1px solid #436186;border-radius:14px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 18px rgba(124,199,255,.05)}
.panel-title{font-size:12px;letter-spacing:.18em;color:#8bcfff;margin-bottom:10px}
.pilot-portrait{font-size:58px;text-align:center}
.pilot-name{text-align:center;font-weight:700;margin-top:8px}
.info-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.info-row:last-child{border-bottom:none}
.controls-text{font-size:13px;line-height:1.5;color:#c8dcff}
.copyright{text-align:center;margin-top:auto;opacity:.72;font-size:12px}
.game-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:18px;touch-action:none}
#game{width:min(100%,calc(100vh - 40px)*1.777);max-width:100%;aspect-ratio:16/9;border:1px solid #4f7198;border-radius:20px;background:#02050b;box-shadow:0 0 30px rgba(0,0,0,.4),0 0 45px rgba(124,199,255,.08),inset 0 0 25px rgba(255,255,255,.03)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,5,10,.25);pointer-events:none}
.overlay.visible{pointer-events:auto}
.hidden{display:none}
.overlay-card{min-width:420px;max-width:720px;padding:28px 32px;border:1px solid #6087b6;border-radius:22px;background:linear-gradient(180deg,rgba(7,14,26,.92),rgba(5,9,16,.95));text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 0 30px rgba(124,199,255,.05)}
.overlay-card h1,.overlay-card h2{margin:0 0 12px 0;letter-spacing:.16em}
.small-sign{opacity:.85;font-size:15px;margin-bottom:18px}
.muted{opacity:.8}
.smaller{font-size:13px}
.pilot-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.pilot-item{padding:14px;border:1px solid #54759d;border-radius:16px;background:rgba(255,255,255,.04);cursor:pointer;transition:.15s transform,.15s background}
.pilot-item:hover{transform:translateY(-2px);background:rgba(124,199,255,.09)}
.pilot-item .emoji{font-size:36px;margin-bottom:8px}
.main-btn{appearance:none;border:none;border-radius:14px;padding:12px 18px;font-weight:800;letter-spacing:.08em;background:linear-gradient(180deg,#8cd0ff,#59a8e6);color:#07111d;cursor:pointer}
.upgrade-slots{display:flex;gap:12px;justify-content:center;margin:16px 0}
.slot{min-width:120px;padding:16px 10px;border:1px solid #5b81af;border-radius:14px;background:rgba(255,255,255,.04);font-weight:800}
.slot.active{background:rgba(124,199,255,.25);box-shadow:0 0 20px rgba(124,199,255,.3)}
.upgrade-result{min-height:32px;font-size:18px;font-weight:800;color:var(--accent2);margin-top:10px}
.initials-value{
  font-size:60px;
  letter-spacing:.22em;
  font-weight:900;
  margin:18px 0 22px;
  padding:18px 22px 18px 30px;
  border-radius:22px;
  border:1px solid rgba(145,193,255,.22);
  background:radial-gradient(circle at 50% 35%,rgba(42,68,112,.34),rgba(11,18,31,.95) 62%,rgba(5,9,16,.98) 100%);
  box-shadow:inset 0 0 30px rgba(173,221,255,.07),0 16px 36px rgba(0,0,0,.34);
  color:#eef7ff;
  text-shadow:0 0 12px rgba(124,199,255,.18),0 2px 0 rgba(0,0,0,.45);
  font-family:Georgia, 'Times New Roman', serif;
}

.initials-card{max-width:560px}
.initials-picker{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:8px 0 18px}
.initials-slot{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;color:#cfe4ff}
.initials-slot span{font-size:12px;letter-spacing:.18em;opacity:.82;color:#9ec6ef}
.initials-slot select{
  appearance:none;
  -webkit-appearance:none;
  min-width:92px;
  padding:12px 40px 12px 14px;
  border-radius:16px;
  border:1px solid rgba(123,154,194,.72);
  background-color:#132032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b8d7f5' d='M4.2 6.2L8 10l3.8-3.8 1.2 1.2L8 12.4 3 7.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
  color:#eef7ff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 22px rgba(0,0,0,.24);
  font-size:29px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  text-align-last:center;
  font-family:Georgia, 'Times New Roman', serif;
}
.initials-slot select option{color:#eef7ff;background:#132032}
.initials-slot select:focus{outline:2px solid rgba(120,182,235,.9);outline-offset:2px;border-color:#8cc7ff;box-shadow:0 0 0 4px rgba(124,199,255,.12),0 12px 22px rgba(0,0,0,.28)}
.initials-slot select:hover{border-color:#9bbce0;background-color:#17263c}
.initials-slot select::-ms-expand{display:none}
.initials-accept-btn{margin-top:4px}
.initials-help{margin-top:12px}
@media (hover: none), (pointer: coarse) {
  .initials-slot select{
    -webkit-appearance:menulist-button;
    appearance:menulist;
    min-width:96px;
    padding:12px 12px;
    background-image:none;
  }
}
#game{touch-action:none;-webkit-user-select:none;user-select:none}

#initialsScreen .overlay-card{
  width:min(94vw,560px);
}
#initialsScreen .main-btn{
  min-height:48px;
}

canvas#radar{width:100%;height:auto;border-radius:50%;background:radial-gradient(circle,#071421 0%,#030914 75%,#02050a 100%);border:1px solid #3f638d}
.roulette-wheel{
  position:relative;
  width:240px;
  height:240px;
  margin:18px auto;
  border-radius:50%;
  border:4px solid #6da2d8;
  box-shadow:0 0 30px rgba(124,199,255,.18), inset 0 0 25px rgba(255,255,255,.05);
  overflow:hidden;
  background:radial-gradient(circle,#10233f 0%,#081220 70%,#040912 100%);
}

.roulette-track{
  position:absolute;
  inset:0;
  border-radius:50%;
}

.roulette-segment{
  position:absolute;
  width:50%;
  height:50%;
  left:50%;
  top:50%;
  transform-origin:0% 0%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
  color:#07111d;
  padding-left:38px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.roulette-segment.armamento{
  background:#7cc7ff;
  transform:rotate(0deg) skewY(-30deg);
}
.roulette-segment.vida{
  background:#8cff8c;
  transform:rotate(120deg) skewY(-30deg);
}
.roulette-segment.escudo{
  background:#ffd37c;
  transform:rotate(240deg) skewY(-30deg);
}

.roulette-pointer{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:24px solid #ff7c7c;
  z-index:5;
}
.pilot-item{
  padding:16px;
  border:1px solid #6b8fb8;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(8,16,28,.88),rgba(10,18,32,.96));
  cursor:pointer;
  transition:.15s transform,.15s background,.15s box-shadow;
  color:#eef6ff;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 0 18px rgba(255,255,255,.04);
}

.pilot-item:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(20,40,68,.95),rgba(10,18,32,.98));
  box-shadow:0 14px 28px rgba(0,0,0,.35), 0 0 18px rgba(124,199,255,.14);
}

.pilot-item .emoji{
  font-size:52px;
  margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.pilot-item strong{
  display:block;
  font-size:18px;
  color:#ffffff;
  margin-bottom:4px;
}

.pilot-item .muted{
  color:#cfe4ff;
  opacity:1;
}
.upgrade-lights{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:20px auto;
  max-width:520px;
}

.upgrade-light{
  min-height:140px;
  border:2px solid #54759d;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,18,32,.92),rgba(6,10,18,.98));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 18px rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.upgrade-light .upgrade-icon{
  font-size:38px;
  margin-bottom:10px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
}

.upgrade-light .upgrade-name{
  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
  color:#eef6ff;
}

.upgrade-light.armamento{ border-color:#6fbfff; }
.upgrade-light.vida{ border-color:#7dff9a; }
.upgrade-light.escudo{ border-color:#ffd27c; }

.upgrade-light.active{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 24px rgba(255,255,255,.18), 0 0 34px rgba(124,199,255,.18);
}

.upgrade-light.armamento.active{
  background:linear-gradient(180deg,rgba(70,160,255,.35),rgba(8,16,28,.98));
}

.upgrade-light.vida.active{
  background:linear-gradient(180deg,rgba(90,220,120,.32),rgba(8,16,28,.98));
}

.upgrade-light.escudo.active{
  background:linear-gradient(180deg,rgba(255,200,100,.32),rgba(8,16,28,.98));
}

.upgrade-light.winner{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 0 30px rgba(255,255,255,.22), 0 0 48px rgba(255,255,255,.14);
}

.upgrade-light.armamento.winner{
  background:linear-gradient(180deg,rgba(80,180,255,.48),rgba(10,18,32,.98));
}

.upgrade-light.vida.winner{
  background:linear-gradient(180deg,rgba(100,255,140,.42),rgba(10,18,32,.98));
}

.upgrade-light.escudo.winner{
  background:linear-gradient(180deg,rgba(255,215,120,.42),rgba(10,18,32,.98));
}
.pilot-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin:18px 0;
}

.pilot-item{
  padding:18px 14px;
  border:1px solid #6b8fb8;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(8,16,28,.92),rgba(10,18,32,.98));
  cursor:pointer;
  transition:.15s transform,.15s background,.15s box-shadow;
  color:#eef6ff;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 0 18px rgba(255,255,255,.04);
}

.pilot-item:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(20,40,68,.95),rgba(10,18,32,.98));
  box-shadow:0 14px 28px rgba(0,0,0,.35), 0 0 18px rgba(124,199,255,.14);
}

.pilot-head{
  font-size:54px;
  margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.pilot-title{
  font-size:18px;
  font-weight:900;
  color:#ffffff;
  margin-bottom:6px;
  letter-spacing:.04em;
}

.pilot-role{
  font-size:13px;
  color:#ffd98f;
  margin-bottom:6px;
  font-weight:700;
}

.pilot-suit{
  font-size:12px;
  color:#cfe4ff;
  margin-bottom:8px;
}

.pilot-ship{
  font-size:12px;
  color:#9de6ff;
  font-weight:700;
}
.intro-card{
  max-width:760px;
  text-align:center;
}

.intro-lead{
  color:#ffe6a8;
  font-weight:800;
  font-size:18px;
  line-height:1.5;
}

.credits-card{
  overflow:hidden;
}

.credits-stage{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border-radius:18px;
  background:radial-gradient(circle at 50% 20%, rgba(80,140,255,.22), rgba(6,12,22,.96) 60%);
  border:1px solid rgba(157,230,255,.18);
  margin-bottom:18px;
}

.credits-stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.75) 0 1px, transparent 2px);
  opacity:.9;
}

.credits-crawl{
  position:relative;
  padding:300px 28px 30px;
  text-align:center;
  animation:creditsScroll 56s linear forwards;
}

.credits-crawl h2{
  color:#ffe8aa;
}


.credits-card.gameover-mode .credits-crawl{animation:none;padding:56px 28px 42px;transform:none}
.credits-card.gameover-mode #creditsTitle{font-size:clamp(56px,10vw,108px);line-height:.92;letter-spacing:.16em;color:#ffd46b;text-shadow:0 0 12px rgba(255,212,107,.35),0 0 26px rgba(255,170,60,.3),0 6px 0 rgba(84,42,0,.55);font-weight:1000;}
.credits-card.gameover-mode #creditsSubtitle{display:block;font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:#ffefc2;margin-top:18px;}
.credits-card.gameover-mode #creditsSmall1,.credits-card.gameover-mode #creditsSmall2{display:block;color:#e7d7ab;font-size:14px;letter-spacing:.08em;}
.credits-card.gameover-mode .credits-stage{min-height:0;display:flex;align-items:center;justify-content:center}
.credits-card.gameover-mode #endingCreditsBlock{display:none}

.credits-card.gameover-mode .muted:empty{display:none}


@keyframes creditsScroll{
  0%{transform:translateY(42%)}
  100%{transform:translateY(-74%)}
}

.credits-thanks{margin-top:22px;font-size:22px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ffe8aa;text-shadow:0 0 18px rgba(255,232,170,.28),0 0 32px rgba(124,199,255,.16);}

#uiPhaseName{max-width:120px;text-align:right;font-size:12px;line-height:1.2;color:#ffd98f;}
.game-wrap:fullscreen{padding:0;background:#000;}
.game-wrap:fullscreen #game{width:100vw;height:100vh;max-width:none;border-radius:0;border:none;}


.hero-btn{margin:10px 0 6px 0;min-width:220px}
.pilot-card{max-width:980px}
.pilot-portrait{height:170px;border-radius:20px;background-size:cover;background-position:center;border:1px solid rgba(143,199,255,.35);box-shadow:inset 0 0 20px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pilot-placeholder{font-size:56px;opacity:.8}
.pilot-list{grid-template-columns:repeat(2,minmax(220px,1fr));gap:16px}
.pilot-item{position:relative;overflow:hidden}
.pilot-photo{height:210px;border-radius:18px;background-size:cover;background-position:center;margin-bottom:14px;border:1px solid rgba(143,199,255,.28);box-shadow:inset 0 0 20px rgba(255,255,255,.03)}
.overlay{cursor:default}
#titleScreen.visible,#introScreen.visible,#bonusResultScreen.visible{pointer-events:auto}
#titleScreen.visible .overlay-card,#introScreen.visible .overlay-card,#bonusResultScreen.visible .overlay-card{pointer-events:auto}


.mission-row{align-items:flex-start}
.mission-row strong{display:block;max-width:145px;text-align:right;font-size:12px;line-height:1.28;color:#ffd98f;}
#uiPhaseName{max-width:145px;text-align:right;font-size:12px;line-height:1.28;color:#ffd98f;}
.pilot-photo{height:228px;border-radius:18px;background-size:cover;background-position:center;margin-bottom:14px;border:1px solid rgba(143,199,255,.28);box-shadow:inset 0 0 20px rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.28)}
.pilot-portrait{height:190px;border-radius:20px;background-size:cover;background-position:center;border:1px solid rgba(143,199,255,.35);box-shadow:inset 0 0 20px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.25)}

.pilot-portrait{position:relative}
.pilot-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,14,.1),rgba(3,7,14,.58));pointer-events:none}
.pilot-portrait-status{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 16px;text-align:center;background:radial-gradient(circle at center, rgba(6,12,22,.52), rgba(4,8,16,.82));border-radius:18px;border:1px solid rgba(255,183,120,.2);backdrop-filter:blur(2px);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 12px 28px rgba(0,0,0,.25)}
.pilot-portrait-alert{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(180deg,#5d261d,#24110e);color:#ffcf9e;font-weight:900;font-size:22px;box-shadow:0 0 16px rgba(255,127,80,.22)}
.pilot-portrait-label{font-size:15px;line-height:1.15;font-weight:900;letter-spacing:.12em;color:#ffe2b7;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.pilot-portrait-sub{font-size:12px;line-height:1.3;color:#9fb6d4;max-width:160px}
.pilot-item.is-selected{transform:translateY(-2px) scale(1.01);background:linear-gradient(180deg,rgba(28,46,70,.95),rgba(12,20,33,.96));border-color:rgba(255,214,141,.75);box-shadow:0 0 0 1px rgba(255,214,141,.2),0 14px 34px rgba(0,0,0,.34),inset 0 0 22px rgba(255,214,141,.08)}
.pilot-item.is-selected .pilot-title{color:#ffe6ae}
.pilot-item.is-selected .pilot-role,.pilot-item.is-selected .pilot-suit,.pilot-item.is-selected .pilot-ship{color:#f2f6ff}


.mission-stack{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px;}
.mission-stack strong{font-size:1rem;color:#eaf6ff;line-height:1.2;}
.mission-stack span{font-size:.92rem;color:#8ec5ff;line-height:1.2;}


.hud-buttons{position:absolute;top:20px;right:20px;display:flex;gap:10px;z-index:5}
.hud-btn{width:42px;height:42px;border-radius:12px;border:1px solid #4e6787;background:rgba(8,15,24,.8);color:#eaf4ff;font-size:20px;cursor:pointer;backdrop-filter: blur(4px)}
.hud-btn:hover{background:rgba(28,46,70,.92)}
.app:fullscreen .game-wrap{padding:14px}
.app:fullscreen #game{width:min(calc(100vw - 250px), calc((100vh - 28px)*1.777));height:auto;max-width:none}

.credits-leaderboard{margin:0 0 18px 0;padding:14px 16px;border:1px solid rgba(157,230,255,.18);border-radius:18px;background:linear-gradient(180deg,rgba(7,14,26,.82),rgba(5,9,16,.92));text-align:left}
.credits-leaderboard.visible{display:block}
.credits-leaderboard.hidden{display:none}
.credits-leaderboard h3{margin:0 0 10px 0;font-size:15px;letter-spacing:.12em;color:#ffe8aa;text-align:center}
.credits-leaderboard table{width:100%;border-collapse:collapse;font-size:13px}
.credits-leaderboard th,.credits-leaderboard td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.credits-leaderboard th{color:#9de6ff;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.credits-leaderboard tr.current-score{background:rgba(124,199,255,.12)}
.credits-leaderboard td.score{text-align:right;color:#ffd98f;font-weight:800}
.credits-leaderboard td.phase{text-align:right;color:#cfe4ff}


.title-card--with-podium{max-width:940px}
.title-leaderboard,.credits-leaderboard{margin:18px 0 0 0;padding:14px 16px;border:1px solid rgba(157,230,255,.18);border-radius:18px;background:linear-gradient(180deg,rgba(7,14,26,.82),rgba(5,9,16,.92));text-align:left}
.title-leaderboard.visible,.credits-leaderboard.visible{display:block}
.title-leaderboard.hidden,.credits-leaderboard.hidden{display:none}
.title-leaderboard h3,.credits-leaderboard h3{margin:0 0 10px 0;font-size:15px;letter-spacing:.12em;color:#ffe8aa;text-align:center}
.leaderboard-subtitle{margin:-2px 0 12px 0;text-align:center;font-size:12px;color:#9de6ff}
.title-leaderboard table,.credits-leaderboard table{width:100%;border-collapse:collapse;font-size:13px}
.title-leaderboard th,.title-leaderboard td,.credits-leaderboard th,.credits-leaderboard td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.title-leaderboard th,.credits-leaderboard th{color:#9de6ff;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.title-leaderboard tr.current-score,.credits-leaderboard tr.current-score{background:rgba(124,199,255,.12)}
.title-leaderboard td.score,.credits-leaderboard td.score{text-align:right;color:#ffd98f;font-weight:800}
.title-leaderboard td.phase,.credits-leaderboard td.phase{text-align:right;color:#cfe4ff}

.title-card.podium-mode{max-width:980px}
.title-card.podium-mode .title-intro{display:none}
.title-card.podium-mode #titleLeaderboard{margin-top:0}


/* Mobile portrait pilot selection fix */
@media (max-width: 900px), (max-height: 700px) {
  body{overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  .app{display:block;height:100dvh;min-height:100dvh;width:100vw;overflow:hidden}
  .sidebar{display:none}
  .game-wrap{padding:0;width:100vw;height:100dvh;overflow:hidden}
  #game{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:none;border-radius:0}
  .overlay{padding:calc(env(safe-area-inset-top,0) + 10px) 12px calc(env(safe-area-inset-bottom,0) + 12px) 12px;align-items:center;justify-content:center;overflow:hidden}
  .overlay-card{
    min-width:0;
    width:min(94vw, 460px);
    max-width:100%;
    max-height:calc(100dvh - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0) - 24px);
    margin-top:0;
    padding:22px 18px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
  .overlay-card h1,.overlay-card h2{font-size:clamp(28px, 6.2vw, 36px);line-height:1.06;letter-spacing:.08em;margin-bottom:14px}
  .overlay-card p,.overlay-card .muted,.overlay-card .small-sign{font-size:clamp(18px, 4.5vw, 22px);line-height:1.35}
  .overlay-card .smaller{font-size:clamp(16px, 4vw, 19px)}
  .main-btn,.sub-btn{font-size:clamp(20px, 4.8vw, 24px);line-height:1.15;padding:14px 18px;min-height:56px}
  .title-card,.intro-card,.result-card,.initials-card,.pilot-card,.credits-card{width:min(94vw, 460px)}
  .pilot-card{padding:20px 14px 18px}
  .pilot-card h2{margin-bottom:12px}
  .pilot-list{grid-template-columns:1fr;gap:12px;margin:14px 0}
  .pilot-item{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-width:0;padding:12px;border-radius:18px;text-align:left}
  .pilot-photo{width:104px;height:104px;min-width:104px;margin:0;border-radius:18px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-color:rgba(7,14,26,.9)}
  .pilot-title{font-size:22px;line-height:1.12;margin-bottom:7px;font-weight:900}
  .pilot-role,.pilot-suit,.pilot-ship{font-size:16px;line-height:1.3;word-break:break-word}
  .initials-value{font-size:clamp(54px, 14vw, 74px);letter-spacing:.16em;margin:14px 0}
  .initials-picker{gap:12px;margin:10px 0 18px}
  .initials-slot span{font-size:16px;letter-spacing:.12em}
  .initials-slot select{min-width:94px;font-size:32px;padding:14px 16px;border-radius:14px}
  .initials-help{font-size:16px;line-height:1.35}
  .title-leaderboard,.credits-leaderboard{padding:16px 14px;border-radius:20px}
  .title-leaderboard h3,.credits-leaderboard h3{font-size:18px}
  .title-leaderboard table,.credits-leaderboard table{font-size:16px}
  .title-leaderboard th,.title-leaderboard td,.credits-leaderboard th,.credits-leaderboard td{padding:8px 6px}
  .title-leaderboard th,.credits-leaderboard th{font-size:13px}
}

@media (max-width: 430px) and (orientation: portrait) {
  .overlay{padding:env(safe-area-inset-top,0) 8px calc(env(safe-area-inset-bottom,0) + 8px) 8px}
  .overlay-card{width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0) - 16px);padding:16px 12px;border-radius:18px}
  .pilot-card{padding:14px 10px 12px}
  .pilot-card h2{font-size:20px}
  .pilot-list{gap:8px}
  .pilot-item{grid-template-columns:88px minmax(0,1fr);gap:10px;padding:10px 9px}
  .pilot-photo{width:88px;height:88px;min-width:88px;margin:0;border-radius:15px}
  .pilot-title{font-size:17px}
  .pilot-role,.pilot-suit,.pilot-ship{font-size:12px;line-height:1.25}
}

@media (max-height: 740px) and (orientation: portrait) {
  .pilot-card{padding:12px 10px}
  .pilot-photo{width:80px;height:80px;min-width:80px;margin:0;border-radius:14px}
  .pilot-title{font-size:16px;margin-bottom:4px}
  .pilot-role,.pilot-suit,.pilot-ship{font-size:11px;line-height:1.2}
  .pilot-list{gap:7px;margin:10px 0}
}

@media (max-width: 430px) and (orientation: portrait) {
  .initials-value{font-size:46px;letter-spacing:.16em;margin:12px 0}
  .initials-picker{gap:10px;margin:6px 0 14px}
  .initials-slot span{font-size:14px}
  .initials-slot select{min-width:86px;font-size:28px;padding:12px 12px;border-radius:12px}
}

@media (max-width: 900px), (max-height: 700px) {
  .hud-buttons{top:calc(env(safe-area-inset-top,0) + 10px);right:10px;gap:8px}
  .hud-btn{width:40px;height:40px;font-size:18px;border-radius:11px}
  #titleScreen .muted,.overlay .muted{font-size:14px;line-height:1.35}
  .main-btn,.sub-btn{font-size:17px;line-height:1.2}
}

@media (max-width: 430px) and (orientation: portrait) {
  .overlay{padding:calc(env(safe-area-inset-top,0) + 8px) 10px calc(env(safe-area-inset-bottom,0) + 8px) 10px}
  .overlay-card{width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0) - 16px);padding:20px 16px;border-radius:20px}
  .overlay-card h1,.overlay-card h2{font-size:clamp(26px, 8vw, 34px)}
  .overlay-card p,.overlay-card .muted,.overlay-card .small-sign{font-size:clamp(17px, 4.9vw, 21px)}
  .pilot-card{padding:18px 12px 16px}
  .pilot-item{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:11px 10px}
  .pilot-photo{width:96px;height:96px;min-width:96px;border-radius:16px}
  .pilot-title{font-size:20px}
  .pilot-role,.pilot-suit,.pilot-ship{font-size:15px;line-height:1.28}
  .initials-value{font-size:52px}
  .initials-slot select{min-width:88px;font-size:30px;padding:13px 12px;border-radius:13px}
}

@media (max-height: 740px) and (orientation: portrait) {
  .overlay-card{justify-content:flex-start}
  .overlay-card h1,.overlay-card h2{font-size:clamp(24px, 6vw, 31px)}
  .overlay-card p,.overlay-card .muted,.overlay-card .small-sign{font-size:clamp(16px, 4.2vw, 19px)}
  .pilot-photo{width:84px;height:84px;min-width:84px}
  .pilot-title{font-size:18px;margin-bottom:4px}
  .pilot-role,.pilot-suit,.pilot-ship{font-size:14px;line-height:1.2}
  .pilot-list{gap:8px;margin:10px 0}
  .title-leaderboard table,.credits-leaderboard table{font-size:14px}
}


/* Initials arcade premium */
#initialsScreen .overlay-card{
  background:
    radial-gradient(circle at top,rgba(28,48,80,.22),transparent 34%),
    linear-gradient(180deg,rgba(7,13,24,.98),rgba(4,8,15,.99));
  border:1px solid rgba(123,160,208,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.5), inset 0 0 40px rgba(109,162,216,.08);
}
#initialsScreen .initials-picker{gap:16px;margin:14px 0 20px;}
#initialsScreen .initials-slot{padding:12px 10px 14px;border-radius:20px;background:linear-gradient(180deg,rgba(20,32,52,.92),rgba(9,15,25,.98));border:1px solid rgba(114,147,190,.24);min-width:108px;box-shadow:inset 0 0 18px rgba(255,255,255,.03),0 10px 22px rgba(0,0,0,.18);}
#initialsScreen .initials-slot span{font-size:13px;color:#8fb5df;}
#initialsScreen .initials-slot select{min-width:86px;border-color:rgba(126,160,201,.8);background-color:#132032;color:#eef7ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.26);}
#initialsScreen .main-btn{min-width:210px;font-size:20px;}
@media (max-width: 900px), (max-height: 700px) {
  #initialsScreen .overlay-card{justify-content:center;}
  #initialsScreen .initials-slot{min-width:102px;padding:10px 8px 12px;}
}
@media (max-width: 430px) and (orientation: portrait) {
  #initialsScreen .initials-picker{gap:10px;}
  #initialsScreen .initials-slot{min-width:92px;padding:8px 6px 10px;border-radius:16px;}
  #initialsScreen .initials-slot span{font-size:12px;}
}