:root{
  font-family:Arial,Helvetica,sans-serif;
  color:#e9eaec;
  background:#242424;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:#242424}
.game{min-height:100vh;max-width:448px;margin:0 auto;background:#242424}
html:not(.account-state-ready) .game-top .resource-panel,
html:not(.account-state-ready) .game-top .level-row{visibility:hidden}
.current-rank-title{margin:2px 0;color:#f2f2ef;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-style:normal;font-stretch:normal;font-weight:600;line-height:normal;letter-spacing:normal;text-shadow:0 1px 2px #000,0 0 4px #000;-webkit-text-stroke:0}
.current-rank-title.current-rank-title strong{color:#22cc36;font-weight:700}
.page-title{margin:7px 0 8px;color:#f3f3f0;text-align:center;font-size:23px;line-height:1.2}
.screen-panel{margin-top:5px;padding:8px 10px;border:1px solid #3b3c3e;border-radius:8px;background:#292929;box-shadow:0 1px 2px #0008}
/* Общая иллюстрация локации: 448 × 189 px, на узком экране 390 × 178 px. */
.game-hero{position:relative;overflow:hidden;height:189px;border:1px solid #3b3c3e;border-radius:8px;background:#191b1b;box-shadow:0 1px 2px #0008}
.game-hero>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:390px){.game-hero{height:178px}}
.game-top{padding-top:0}
.game-brand{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:50px;margin:0;overflow:hidden;border:0;background:#171819 url('assets/ui/game-header-brand-v2.png') center/100% 100% no-repeat}
.game-brand img{content:url('assets/ui/mir-tankov-logo-with-tanks-v1.png');display:block;position:relative;z-index:1;width:390px;max-width:90%;height:47px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px #000)}
.resource-panel{
  display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);
  height:32px;padding:0;
  border:0;border-top:2px solid #455561;border-radius:0;
  background:#343735;
  border-bottom:2px solid #455561;
}
.resource{
  display:flex;align-items:center;gap:7px;
  min-width:0;padding:0 9px;
  border:0;border-left:1px solid #455561;
  background:transparent;
}
.fuel-icon{display:block;width:18px;height:22px;object-fit:contain;flex:none}
.coin-icon{display:block;width:22px;height:22px;object-fit:contain;flex:none}
.resource-count{
  overflow:hidden;
  color:#f0f1ee;font-size:14px;font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  letter-spacing:-.02em;line-height:1.2;
}
.game-top .resource-panel.resource-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  height:59px;margin:0;padding:5px 8px 4px;
  overflow:hidden;border:0;border-radius:0;
  background:#1a1b1c url('assets/ui/game-header-resources-v1.png') center/100% 100% no-repeat;
  box-shadow:none;
}
.game-top .resource-panel.resource-summary .resource{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-sizing:border-box;min-width:0;min-height:0;height:100%;padding:2px 5px;
  border:0;background:transparent;text-align:center;
}
.game-top .resource-panel.resource-summary .resource+.resource{
  border-left:0;background:transparent;
}
.game-top .resource-panel.resource-summary .resource-name{
  order:1;overflow:hidden;max-width:100%;
  color:#aaa;font-size:8px;font-weight:400;line-height:10px;
  text-overflow:ellipsis;white-space:nowrap;
}
.game-top .resource-panel.resource-summary .resource img{
  order:2;width:16px;height:16px;flex:0 0 16px;margin:0;
  object-fit:contain;filter:drop-shadow(0 1px 1px #000);
}
.game-top .resource-panel.resource-summary .resource:last-child img{
  width:13px;height:13px;flex-basis:13px;margin:1.5px 0;
}
.game-top .resource-panel.resource-summary .resource-count{
  order:3;overflow:hidden;max-width:100%;
  color:#f4d465;font:400 12px/14px Arial,Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;text-shadow:0 1px #000;
  text-overflow:ellipsis;white-space:nowrap;
}
.game-top .resource-panel.resource-summary .resource:last-child .resource-count{color:#d8d8d8}
.level-row{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;gap:0;margin-top:0;height:29px;padding:0 5px;background:transparent url('assets/ui/game-header-level-v1.png') center/100% 100% no-repeat}
.level-badge,.level-percent{
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;height:25px;padding:0 7px;
  border:0;border-radius:0;
  background:transparent;color:#e5e5e5;
  box-shadow:none;
  font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;text-shadow:0 1px #000;
}
.level-badge{gap:4px;padding-left:3px;min-width:0}.level-emblem{display:block;width:20px;height:20px;object-fit:contain;flex:none}
.level-percent{min-width:0}
.level-track{position:relative;width:100%;height:9px;overflow:hidden;border:1px solid #080b0d;background:linear-gradient(#080b0f,#18232b 50%,#080c10);box-shadow:inset 0 1px 2px #000,0 1px #70757a}
.level-fill{display:block;width:78%;height:100%;background:repeating-linear-gradient(125deg,#0651a9 0 13px,#087ce0 13px 25px,#219cfa 25px 38px,#063f99 38px 50px);box-shadow:inset 0 1px 2px #a6dcffb3,inset 0 -1px 1px #07356a}
@media(max-width:390px){
  .game-top{padding-inline:0}
  .resource-panel{height:32px;padding:0}
  .resource-panel{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
  .resource{gap:5px;padding-inline:5px}
  .fuel-icon{width:15px;height:19px}
  .coin-icon{width:19px;height:19px}
  .resource-count{font-size:clamp(12px,3.5vw,14px)}
  .game-top .resource-panel.resource-summary{grid-template-columns:repeat(3,minmax(0,1fr));height:55px;padding:4px 7px 3px}
  .game-top .resource-panel.resource-summary .resource{gap:0;padding-inline:2px}
  .game-top .resource-panel.resource-summary .resource img{width:15px;height:15px;flex-basis:15px}
  .game-top .resource-panel.resource-summary .resource:last-child img{width:12px;height:12px;flex-basis:12px}
  .game-top .resource-panel.resource-summary .resource-count{font-size:11px;line-height:13px}
  .game-top .resource-panel.resource-summary .resource-name{font-size:8px;line-height:9px}
  .game-brand{height:46px}
  .game-brand img{width:350px;height:43px}
  .level-row{grid-template-columns:55px minmax(0,1fr) 55px;height:27px;padding-inline:4px}
}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:2px solid #b5d9f5;outline-offset:2px}
.news-panel{height:130px;margin-top:3px;border:1px solid #3b3c3e;border-radius:9px;text-align:center;padding:5px 8px;background:#292929}
.news-panel h1{display:table;margin:0 auto 7px;padding:0 5px 5px;border-bottom:1px dotted #656565;color:#ff8255;font-size:18px;line-height:25px}
.news-panel p{margin:0 0 7px;color:#fff5b2;font-size:15px;font-weight:700}
.game-button{min-height:34px;border:2px solid #171717;border-radius:7px;background:linear-gradient(#535456,#353638);color:#f2f2f2;font-family:"Trebuchet MS",Verdana,sans-serif;font-size:13px;font-weight:700;letter-spacing:.035em;text-shadow:0 1px #000;-webkit-text-stroke:.35px #171717}
.action-row a.game-button{display:flex;align-items:center;justify-content:center;text-decoration:none}
.bottom-nav a.game-button{display:flex;align-items:center;justify-content:center;text-decoration:none}
.game-button:hover{filter:brightness(1.12)}
.game-button:focus-visible{outline:2px solid #b5d9f5;outline-offset:2px}
.game-button-green{background:linear-gradient(#0baa08,#086f04);border-color:#1a2119;-webkit-text-stroke-color:#173017}
.collection-select-panel{margin:8px 0 0;padding:0;border:0;background:transparent;text-align:center}
.collection-select-status{min-height:17px;margin:0 0 7px;color:#f4d465;font-size:13px;line-height:17px}
.collection-select-panel .game-button{width:100%}
.game-button-red{background:linear-gradient(#ed1711,#a50000);border-color:#351311;-webkit-text-stroke-color:#4b1110}
.game-button-blue{background:linear-gradient(#18bdd0,#08739e);border-color:#18313b;-webkit-text-stroke-color:#18313b}
.game-button-compact{min-height:28px;font-size:12px;letter-spacing:.02em}
.battle-instruction{margin:7px 0 4px;color:#f0f0ef;font-size:14px;line-height:1.25;text-align:center}
.news-button{min-height:27px;padding:0 12px;font-size:13px;border-radius:5px}
.text-button{display:block;margin:6px auto 0;padding:0;border:0;background:none;color:#9b9b9b;text-decoration:underline;font-size:12px}
.action-row,.bottom-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:5px}
.hangar{height:240px;position:relative;margin-top:3px;overflow:hidden;border-radius:4px;background:#151515}
.hangar-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.hangar:has(.hangar-tank)::before{content:"";position:absolute;z-index:1;left:31%;bottom:34px;width:48%;height:25px;border-radius:50%;background:radial-gradient(ellipse,#080705b3 0%,#08070566 40%,transparent 72%);pointer-events:none}
.hangar-tank{display:block;position:absolute;z-index:1;left:50%;bottom:34px;width:min(70%,270px);height:auto;transform:translateX(-50%);pointer-events:none;user-select:none}
.hangar::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#0008,transparent 38%,transparent 72%,#0003),linear-gradient(0deg,#0009 0,transparent 34%),linear-gradient(180deg,#8bb2c214,transparent 44%);pointer-events:none}
.stats,.profile,.power{position:absolute;z-index:3;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000}
.stats{top:8px;left:10px;color:#fff;font-size:15px;font-weight:700;line-height:19px}
.stats strong,.power{color:#35c5db}
.profile{top:9px;right:9px;width:72px;padding:0;border:0;background:none;color:#fff;font-size:13px;text-decoration:none}
.profile-image{display:block;width:56px;height:56px;margin:0 auto 3px;border:3px solid #343434;border-radius:6px;background:url('assets/menu-tiles.png') 33.333% 100%/400% 200%}
.power{bottom:20px;left:0;right:0;text-align:center;font-size:14px;font-weight:700}
.upgrade-button{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;width:228px;margin:-17px auto 0;text-decoration:none}
.equipment-slots{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;height:46px;margin-top:6px;border:2px solid #3b3b3b;border-radius:5px;background:#343537}
.equipment-slots span{width:26px;height:26px;border-radius:4px;background:#070707}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:8px;margin:5px 8px 0}
.menu-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;color:#fff;font-size:13px;text-shadow:1px 1px #000}
.tile-image{display:block;width:54px;height:54px;border:2px solid #111;border-radius:7px;background-image:url('assets/menu-tiles.png');background-size:400% 200%;background-repeat:no-repeat}
.tile-gold{background-position:0 0}.tile-missions{background-position:33.333% 0}.tile-battles{background-position:66.667% 0}.tile-fights{background-position:100% 0}
.tile-tanks{background-position:0 100%}.tile-ranking{background-position:33.333% 100%}.tile-war{background-position:66.667% 100%}.tile-duel{background-position:100% 100%}
.tile-training,.tile-recon,.tile-workshop,.tile-depot{background-size:cover;background-position:center}
.tile-training{background-image:url('assets/location-training.png')}
.tile-recon{background-image:url('assets/location-recon.png')}
.tile-workshop{background-image:url('assets/location-workshop.png')}
.tile-depot{background-image:url('assets/location-depot.png')}
.menu-tile:hover .tile-image{border-color:#bbb}
.base-tip{min-height:45px;display:flex;align-items:center;justify-content:center;margin:8px 0 0;padding:5px 10px;border:1px solid #353535;border-radius:7px;color:#20c335;text-align:center;font-size:14px;line-height:17px}
.bottom-nav{gap:4px;margin-top:4px}
.game-footer{text-align:center;padding:4px 0 25px;font-size:13px}
.game-footer p{margin:2px 0}.game-footer .promo{color:#f0a8e9;font-size:17px}.game-footer .footer-chat{color:#ffe09a;font-size:17px}.online{color:#ffe09a;font-weight:700}.footer-muted{color:#999}
.game-footer button{padding:0;border:0;background:none;color:inherit;font-size:inherit}.game-footer button:hover{text-decoration:underline}
.game-dialog{width:min(400px,calc(100% - 30px));border:1px solid #555;border-radius:8px;background:#292929;color:#eee;text-align:center}
.game-dialog::backdrop{background:#000a}.game-dialog h2{margin:0 0 12px;font-size:20px}.game-dialog p{min-height:35px;color:#bbb}.game-dialog .game-button{min-width:130px}
@media(max-width:448px){.game{width:100%}.stats{font-size:clamp(12px,3.4vw,15px)}.action-row,.bottom-nav{gap:4px}}
@media(max-width:390px){.page-title{font-size:20px}.screen-panel{padding:7px 8px}}

/* Общая полосатая шкала прочности: конвой и битвы. */
.battle-meter{display:flex;align-items:center;width:100%;height:22px}
.battle-meter-value{display:flex;align-items:center;justify-content:center;min-width:40px;height:21px;padding:0 5px;border-radius:5px;background:#3c3c3c;color:#eee;font-family:"Trebuchet MS",Verdana,sans-serif;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.035em;-webkit-text-stroke:.35px #171717}
.battle-meter-track{position:relative;display:block;flex:1;height:9px;overflow:hidden;border-top:1px solid #20110c;border-bottom:1px solid #695348;background:linear-gradient(#1a1310,#30251f 50%,#17100d)}
.battle-meter-fill{display:block;width:100%;height:100%;background:repeating-linear-gradient(125deg,#b92915 0 13px,#e4501b 13px 25px,#f39a32 25px 38px,#9f2112 38px 50px);box-shadow:inset 0 1px 2px #ffd49ab3,inset 0 -1px 1px #70210f}