/* The 2012 uTanks look: the µt header with the menu painted in, the blue and orange boxes, the orange content panel. The artwork is the old site's (wwwroot/img). */
html { background: #1e1e1e; }
body { background: #1e1e1e; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 13px; margin: 0; }
a { color: #7fc4ee; }
a:hover { color: #fff; }
#Page { width: 1000px; margin: 0 auto; padding: 10px 0 20px 21px; box-sizing: border-box; }

/* ---- the header ---- */
#SiteHeader { position: relative; width: 958px; height: 246px; background: url(/img/header.png?v=2) no-repeat; }
#SiteHeader.in { background-image: url(/img/header-in.png?v=2); }   /* the same picture with the log in boxes covered */
#SiteHeader .hot { position: absolute; top: 183px; height: 40px; display: block; }   /* the menu is part of the picture: these are the clickable areas over it */
#HeaderLogin input { position: absolute; left: 812px; width: 122px; height: 20px; background: transparent; border: 0; outline: none; color: #fff; text-align: right; font: 12px Verdana, sans-serif; padding: 0 4px; box-sizing: border-box; }
#HeaderLogin .hu { top: 97px; } #HeaderLogin .hp { top: 123px; }
#HeaderLogin .hok { position: absolute; left: 790px; top: 111px; width: 24px; height: 22px; background: transparent; border: 0; padding: 0; cursor: pointer; }
#SiteHeader .hforgot { position: absolute; left: 806px; top: 149px; width: 44px; height: 16px; display: block; }
#SiteHeader .hregister { position: absolute; left: 896px; top: 149px; width: 46px; height: 16px; display: block; }
#SiteHeader .whoami { position: absolute; left: 742px; top: 34px; width: 198px; text-align: right; color: #d8ecf8; font-size: 12px; line-height: 1.5; text-shadow: 0 1px 2px #000; }
#SiteHeader .whoami a { color: #8fd0ff; text-decoration: none; } #SiteHeader .whoami a:hover { color: #fff; }

/* ---- the columns ---- */
#Columns { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0 0; width: 990px; }
#Main { width: 647px; flex: none; }
#Side { width: 319px; flex: none; margin-left: 6px; }
.PanelHeader { height: 52px; width: 647px; background: url(/img/panel-header.png) no-repeat; }
.PanelTitle { display: block; width: 120px; text-align: right; position: relative; left: 485px; top: 4px; line-height: 16px; color: #616161; font-size: 13px; }   /* (in the glass tab of the panel picture, which ends 21px down: like the boxes' titles) */
.PanelRepeat { width: 647px; background: url(/img/panel-repeat.png) repeat-y; min-height: 420px; padding: 0 28px 0 30px; box-sizing: border-box; }
.PanelBody { width: 589px; color: #fff; overflow-wrap: anywhere; }
.PanelFooter { height: 41px; width: 647px; background: url(/img/panel-footer.png) no-repeat; }
#Foot { position: relative; width: 956px; height: 60px; background: url(/img/footer.png) no-repeat; margin-top: 12px; }
#Foot .fhot { position: absolute; top: 10px; height: 28px; display: block; }   /* the footer's links are part of the picture: these are the clickable areas over them */

/* ---- the boxes on the right ---- */
.Box { position: relative; width: 319px; height: 326px; margin: 0 0 4px; background-repeat: no-repeat; }
.Box.blue { background-image: url(/img/box-blue.png); } .Box.orange { background-image: url(/img/box-orange.png); }
.BoxTitle { position: absolute; right: 48px; top: 3px; width: 140px; text-align: right; color: #616161; font-size: 12px; }
.BoxContent { position: absolute; left: 15px; top: 30px; width: 285px; height: 270px; color: #fff; overflow: hidden; }
.profile { padding: 14px 10px; line-height: 1.6; } .profile p { margin: 0 0 12px; }
.regpic { position: absolute; left: -5px; top: -14px; width: 299px; height: 294px; background: url(/img/bg-register.png) no-repeat; }
.regpic a { position: absolute; top: 257px; height: 28px; display: block; } .regpic .sign { left: 13px; width: 92px; } .regpic .play { left: 188px; width: 91px; }
.quick { position: absolute; left: -2px; top: 14px; width: 288px; height: 210px; background: url(/img/bg-quicklinks.png) no-repeat; }
.quick a { position: absolute; left: 10px; width: 262px; height: 33px; display: block; } .quick .manual { top: 1px; } .quick .top25 { top: 43px; } .quick .maps { top: 87px; }
.tourney { position: absolute; left: -2px; top: -4px; width: 286px; height: 292px; background: url(/img/bg-tournament.png?v=5) no-repeat; font-size: 15px; }
.tourney span { position: absolute; white-space: nowrap; overflow: hidden; width: 200px; text-shadow: 0 1px 2px #000; }
.tourney .tmap { left: 40px; top: 6px; width: 100px; font-size: 11px; } .tourney .tdate { left: 185px; top: 6px; width: 90px; font-size: 11px; }
.tourney .p1 { left: 50px; top: 50px; } .tourney .p2 { left: 50px; top: 85px; } .tourney .p3 { left: 50px; top: 120px; } .tourney .p4 { left: 50px; top: 155px; } .tourney .p5 { left: 50px; top: 190px; }   /* a name takes the place of the picture's word for it, just above its row's line */
.tourney .tnext { left: 0; top: 246px; width: 279px; text-align: center; font-size: 14px; line-height: 18px; color: #fff; white-space: normal; }   /* counts down to the next tournament, under the picture's own "Next Tournament:" (site.js) */
.tourney .tmore { position: absolute; left: 0; width: 279px; text-align: center; top: 268px; font-size: 11px; }
.BoxContent:has(.tourney) { height: 292px; }   /* the Tournaments box's picture runs to the bottom of its strip: let it show there (the usual box content stops 22px short) */
.rss { position: absolute; left: -2px; top: -4px; width: 302px; height: 294px; background: url(/img/bg-rss.png) no-repeat; padding: 20px 18px; box-sizing: border-box; overflow: hidden; }
.rss a { display: block; color: #fff; text-decoration: none; font-size: 12px; margin-bottom: 10px; text-shadow: 0 1px 2px #000; } .rss a:hover { color: #ffb050; }
.rss .hd { display: block; color: #ffb050; font-size: 10px; }

/* ---- what goes inside the panel ---- */
.PanelBody h3 { color: #ffa733; margin: 14px 0 6px; }
.PanelBody p { line-height: 1.5; }
.center { text-align: center; }
.dim { color: #a0a0a0; font-size: 11px; }
input, select, textarea { background: #3a3a3a; color: #bfe0f5; border: 1px solid #6996b2; padding: 4px 6px; font: inherit; }
button, .btn { background: #3f3f3f; color: #fff; border: 1px solid #6996b2; padding: 5px 14px; cursor: pointer; border-radius: 3px; text-decoration: none; display: inline-block; font: inherit; margin: 0 6px 0 0; }
button:hover, .btn:hover { background: #505050; color: #fff; }
button.link { background: none; border: 0; color: #8fd0ff; text-decoration: underline; padding: 0 4px; margin: 0; }
form.inline { display: inline; }
.err { color: #ff7a7a; } .ok { color: #8fdc8f; } .warn { color: #ff9a5a; }
table { border-collapse: collapse; width: 100%; } td, th { padding: 4px 8px; border-bottom: 1px solid #555; text-align: left; font-size: 12px; } th { color: #ffa733; }
.field { margin: 10px 0; } .field label { display: inline-block; width: 150px; }
.news { margin: 14px 0; padding-top: 10px; border-top: 1px solid #555; } .news h3 { margin: 4px 0; } .news .date { color: #a0a0a0; font-size: 11px; }
.tank { margin: 12px 0; padding: 8px 0; border-top: 1px solid #555; position: relative; } .tank h3 { margin: 4px 0 8px; } .tank form { position: absolute; right: 0; top: 8px; }
.pager a { margin-right: 16px; }
.filters label { margin: 0 6px 0 14px; } .filters label:first-child { margin-left: 0; }
.force { font-weight: bold; } .f0 { color: #ff5a5a; } .f1 { color: #5a9bff; } .f2 { color: #ffa030; } .f3 { color: #d070e8; }
code, .cmd { background: #111; padding: 2px 6px; border-radius: 3px; color: #b2d4ea; }
ul { padding-left: 20px; } li { margin: 6px 0; }

/* the panel stretches to the height of the boxes on the right (it used to stop short, with bare space under it), and has no fixed height of its own */
#Columns { align-items: stretch; }
#Main { display: flex; flex-direction: column; }
.PanelRepeat { flex: 1 1 auto; min-height: 200px; }
table.nodes td, table.nodes th { font-size: 12px; }

/* the fifth quick link (Map editor), built to sit with the four baked ones: the Donate bar's own picture as the base (its accent cap turned violet), its glass redrawn under the new word, and a strip of map tiles with the editor's brush square for the picture */
.quick .editor { left: 0; top: 173px; width: 288px; height: 35px; overflow: hidden;
  -webkit-mask: url(/img/bg-quicklinks.png) 0 -130px / 288px 167px no-repeat; mask: url(/img/bg-quicklinks.png) 0 -130px / 288px 167px no-repeat; }
.quick .editor i, .quick .editor b, .quick .editor span { position: absolute; display: block; }
.quick .editor .base { left: 0; top: 0; width: 288px; height: 35px; background: url(/img/bg-quicklinks.png) 0 -130px no-repeat; filter: hue-rotate(82deg) saturate(1.15); }
.quick .editor .glass { left: 11px; top: 0; width: 124px; height: 35px; background: linear-gradient(180deg, #595959 0.00% 2.86%, #626262 2.86% 5.71%, #575757 5.71% 8.57%, #5c5c5c 8.57% 11.43%, #646464 11.43% 14.29%, #606060 14.29% 17.14%, #5d5d5d 17.14% 20.00%, #5a5a5a 20.00% 22.86%, #565656 22.86% 25.71%, #535353 25.71% 28.57%, #505050 28.57% 31.43%, #4e4e4e 31.43% 34.29%, #4b4b4b 34.29% 37.14%, #494949 37.14% 40.00%, #474747 40.00% 42.86%, #454545 42.86% 45.71%, #171717 45.71% 48.57%, #191919 48.57% 51.43%, #1b1b1b 51.43% 54.29%, #1e1e1e 54.29% 57.14%, #202020 57.14% 60.00%, #232323 60.00% 62.86%, #262626 62.86% 65.71%, #2a2a2a 65.71% 68.57%, #2d2d2d 68.57% 71.43%, #303030 71.43% 74.29%, #343434 74.29% 77.14%, #313131 77.14% 80.00%, #2f2f2f 80.00% 82.86%, #363636 82.86% 85.71%, #333333 85.71% 88.57%, rgba(0,0,0,.33) 88.57% 91.43%, rgba(0,0,0,.26) 91.43% 94.28%, rgba(0,0,0,.18) 94.28% 97.14%, rgba(0,0,0,.1) 97.14% 100%); }
.quick .editor .thumb { left: 135px; top: 0; width: 153px; height: 35px; background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px); mask-image: linear-gradient(90deg, transparent 0, #000 26px); }
.quick .editor .thumb b { top: 2px; width: 32px; height: 32px; background: url(/img/quick-tiles.png) no-repeat; background-size: 256px 608px; }
.quick .editor .thumb .t1 { left: 3px; background-position: -64px 0; } .quick .editor .thumb .t2 { left: 35px; background-position: -160px 0; } .quick .editor .thumb .t3 { left: 67px; background-position: 0 0; }
.quick .editor .thumb .t4 { left: 99px; background-position: -96px -128px; } .quick .editor .thumb .t5 { left: 131px; background-position: -64px 0; }
.quick .editor .thumb .t3::after { content: ''; position: absolute; inset: 0; background: url(/img/quick-brush.png); }
.quick .editor .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%, rgba(0,0,0,.28)), rgba(0,0,0,.14); }
.quick .editor span { left: 12px; top: 5px; font: 20px/24px 'Century Gothic', Futura, 'Avenir Next', 'Trebuchet MS', sans-serif; white-space: nowrap; letter-spacing: .1px;
  background: linear-gradient(180deg, #f6e6ff 8%, #d89bff 50%, #b255ff 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) saturate(1.2) brightness(1.1); }

/* the tournament form: a label column and a column for the controls and their hints (it used to wrap under the labels) */
#tForm .field { display: grid; grid-template-columns: 150px 1fr; column-gap: 10px; align-items: start; margin: 12px 0; }
#tForm .field > label { width: auto; padding-top: 5px; }
#tForm .field .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; line-height: 1.5; }
#tForm .field .ctl .dim { flex: 0 1 auto; }
#tForm .field .ctl input[type=checkbox] { margin: 0 4px 0 0; }

/* a tournament's Join: shown from a minute before the start (site.js adds .open at the time) and while it is on */
.joincell .when-open { display: none; } .joincell.open .when-open { display: inline; } .joincell.open .when-wait { display: none; }
button.joinnow { background: #2f7a2f; border-color: #8fdc8f; font-weight: bold; }
button.joinnow:hover { background: #3d9a3d; }
.tourney .tnext a.joinbtn { display: inline-block; padding: 1px 12px; border-radius: 10px; background: #2f7a2f; border: 1px solid #8fdc8f; color: #fff; text-decoration: none; font-weight: bold; text-shadow: 0 1px 2px #000; }
.tourney .tnext a.joinbtn:hover { background: #3d9a3d; }

/* the awards a tank carries, as the game draws them (cut from img/awards.png, the game's UI/Awards.png) */
i.award { display: inline-block; position: relative; background: url(/img/awards.png) no-repeat; margin-right: 8px; vertical-align: middle; cursor: help; }   /* at the picture's own size: scaled up it only blurs and blocks */
td.earned i.award { margin-right: 5px; }
.tank p.awards { min-height: 24px; margin: 6px 0; }

/* ---- the game page (Game.cshtml): the header stays, the panels make way, and the game (served by its game server into the frame) slides up under it ---- */
#GameStage { width: 1024px; margin: 8px 0 0 -33px; animation: game-in .45s ease-out both; }   /* (centred under the 958px header; the game client draws the rest) */
#GameStage #app { padding: 0; }
#GameStage.leaving { animation: game-out .38s ease-in forwards; }
@keyframes game-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes game-out { to { opacity: 0; transform: translateY(48px); } }
/* the panels: slide out when Play is pressed (site.js), slide back in on the page the game hands back to (?back=1) */
#Columns.slide-out #Main { animation: main-out .35s ease-in forwards; }
#Columns.slide-out #Side { animation: side-out .35s ease-in forwards; }
#Columns.slide-in #Main { animation: main-in .5s ease-out both; }
#Columns.slide-in #Side { animation: side-in .5s ease-out .05s both; }
@keyframes main-out { to { opacity: 0; transform: translateX(-80px); } }
@keyframes side-out { to { opacity: 0; transform: translateX(80px); } }
@keyframes main-in { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes side-in { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #GameStage, #GameStage.leaving, #Columns.slide-out #Main, #Columns.slide-out #Side, #Columns.slide-in #Main, #Columns.slide-in #Side { animation-duration: 1ms; } }

/* ---- About µTanks ---- */
.about p { line-height: 1.6; margin: 0 0 12px; }
.about figure { margin: 16px 0 20px; }
.about figure img { display: block; max-width: 100%; height: auto; border: 1px solid #3a4a5c; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.about figcaption { margin-top: 8px; color: #b9c7d4; font-size: 12px; line-height: 1.5; }
.about .sig { font-style: italic; color: #ffd84a; }

/* ---- The Team and Terms of Use ---- */
.team h3 { margin: 18px 0 6px; font-size: 14px; } .team h3:first-child { margin-top: 0; }
.team h3.studio { color: #ff3b30; } .team h3.support { color: #3d7fff; } .team h3.donors { color: #33c43a; }
.team ul { list-style: none; margin: 0; padding: 0; line-height: 1.55; }
.team ul.names { columns: 3; column-gap: 24px; }
.team .thanks { margin-top: 18px; line-height: 1.6; }
.terms { line-height: 1.6; }
.terms h3 { margin: 20px 0 6px; color: #ffd84a; font-size: 14px; } .terms h3:first-child { margin-top: 0; }
.terms h4 { margin: 12px 0 4px; color: #b9d8ee; font-size: 13px; }
.terms p { margin: 0 0 10px; } .terms ul, .terms ol { margin: 0 0 10px; padding-left: 22px; }
.terms ul.dash { list-style: '– '; }
.terms .toc a { color: #8fd0ff; }
/* the feedback form: labels beside the boxes, a wide message box, and a field only bots see */
.feedback .field { display: grid; grid-template-columns: 90px 1fr; column-gap: 10px; align-items: start; }
.feedback .field label { width: auto; padding-top: 5px; }
.feedback input, .feedback textarea { width: 100%; box-sizing: border-box; }
.feedback textarea { resize: vertical; }
.feedback .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the Game News box when it has the live feed: more, shorter lines (the time over each) */
.rss.live a { font-size: 11px; margin-bottom: 7px; line-height: 1.3; }
/* the Play page: the battlefield from above on the left; the tank, the battlefield and the force on the right, the tank turning in the force's colour (play.js) */
form.play { display: grid; grid-template-columns: 300px 1fr; gap: 6px 22px; align-items: start; }
.play-map img { display: block; width: 300px; height: 300px; image-rendering: pixelated; border: 1px solid #6996b2; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); background: #222; }
.play-map #mapNone { width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; border: 1px dashed #555; }
.play-map #mapNone[hidden], .play-map img[hidden] { display: none; }
.play-map .cap { margin-top: 6px; color: #bfe0f5; font-size: 12px; }
.play-pick .field { display: grid; grid-template-columns: 76px 1fr; align-items: center; margin: 0 0 10px; }
.play-pick .field label { width: auto; }
.play-pick select { width: 100%; box-sizing: border-box; }
.forces { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.force-btn { margin: 0; padding: 5px 0; border: 2px solid transparent; border-radius: 4px; color: #fff; font: inherit; font-weight: bold; cursor: pointer; opacity: .55; text-shadow: 0 1px 2px #000; }
.force-btn.c0 { background: #b32424; } .force-btn.c1 { background: #2450b3; } .force-btn.c2 { background: #c97a12; } .force-btn.c3 { background: #84208a; }
.force-btn:hover { opacity: .85; }
.force-btn.on { opacity: 1; border-color: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .45); }
.force-btn:focus-visible { outline: 2px solid #ffd84a; outline-offset: 1px; }
#tankSpin { display: block; margin: 4px auto 6px; width: 192px; height: 192px; image-rendering: pixelated; }
.play-go { display: block; width: 100%; margin: 0; padding: 9px 0; font-size: 16px; font-weight: bold; cursor: pointer; }
.play-note { grid-column: 1 / -1; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
@media (max-width: 700px) { form.play { grid-template-columns: 1fr; } }
/* under the turning tank: its rank and record on the battlefield and force picked, then its awards */
#tankAwards { text-align: center; margin: 0 0 10px; min-height: 44px; }
#tankAwards .record { color: #bfe0f5; font-size: 12px; margin-bottom: 5px; }
#tankAwards .awards { line-height: 26px; }
#tankAwards .awards i.award { margin: 0 3px; }
/* the Controls page: each action and its key boxes; the box waiting for a key glows */
.hotkeys h3 { margin: 16px 0 4px; color: #ffd84a; font-size: 13px; }
.hotkeys table { width: 100%; border-collapse: collapse; }
.hotkeys td { padding: 3px 0; border-bottom: 1px solid #333; }
.hotkeys td:first-child { width: 55%; }
.hk-slot { display: inline-flex; align-items: center; margin-right: 8px; }
.hk-key { min-width: 46px; margin: 0; padding: 3px 8px; font-weight: bold; text-align: center; }
.hk-key.empty { color: #777; border-style: dashed; font-weight: normal; }
.hk-key.listening { background: #2f5f7a; border-color: #ffd84a; color: #fff; }
.hk-clear { margin: 0 0 0 2px; padding: 0 5px; background: none; border: 0; color: #ff7a7a; font-size: 14px; }
.hk-clear:hover { background: none; color: #ff4a4a; }
.hk-note { min-height: 16px; margin-top: 10px; }
.hk-buttons { margin-top: 14px; }