/* Every page's frame (Pages/Shared/_Layout.cshtml), over site.css (which has what goes inside the panel): the banner, the menu, the log in, the panel, the boxes
   and the footer, drawn here to match the 2012 pictures (their colours were sampled from them); the only artwork kept is the µt (img/logo-ut.svg, traced from the logo
   art), a few game sprites (img/battle) and the pictures inside the Account and Quick Links boxes. The font is Jost, a free Futura like the artwork's (wwwroot/fonts).
   Below 900px the boxes go under the panel; below 700px the menu and the log in go under the banner. */
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format('woff2'); }   /* (served from here: wwwroot/fonts, SIL Open Font License) */
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url(/fonts/jost-latin-500-normal.woff2) format('woff2'); }
:root {
  --orange: #cf581e; --orange-2: #c54c0e; --blue: #2e9aec; --blue-2: #1a8fd9; --green: #3fae2a;
  --ink: #fff; --dim: #b0b0b0; --tab: #c2ccd2;   /* (the tab names were #8a8a8a on the glass, too faint to read: now well clear of it) */
  --gloss: linear-gradient(180deg, #4e4e4e 0, #3a3a3a 42%, #1e1e1e 50%, #262626 62%, #3d3d3d 100%);
  --panel: linear-gradient(180deg, #2f2f2f 0, #262626 140px, #232323 100%);
  --box: linear-gradient(180deg, #404040 0, #2b2b2b 31%, #151515 55%, #1d1d1d 68%, #333 100%);
  --head: 'Jost', 'Century Gothic', 'Futura', Verdana, sans-serif;
}
body.nl { font-family: var(--head); font-size: 15px;   /* one family for everything: Jost (the headings' Futura look) for the text too */ background: radial-gradient(ellipse at 50% 0, #2a2f33 0, #1e1e1e 60%) #1e1e1e no-repeat; min-height: 100vh; }
#Page { max-width: 1600px; margin: 0 auto; padding: 10px 16px 24px; box-sizing: border-box; }
.nl-skip { position: absolute; left: -9999px; } .nl-skip:focus { left: 12px; top: 8px; z-index: 9; background: #000; padding: 6px 10px; }
.nl a:focus-visible, .nl button:focus-visible, .nl input:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }

/* ---- the banner: drawn here, no picture. A field with blue edges (banner.js's little battle in it, under a dim veil and the old art's glow), the µt drawn over it
   (img/logo-ut.svg, traced from Logos Raw.png), the tagline as text, the log in on glass on the right, and the glossy menu bar under it. Any width, phones too. ---- */
.nl-head { position: relative; margin: 0 auto; height: 246px; }
.nl-banner { position: absolute; inset: 0 0 auto; height: 178px; }   /* (no stack of its own: the µ runs down over the menu bar, as it did in the art) */
.nl-field { position: absolute; left: 14px; right: 6px; top: 20px; height: 152px; border-radius: 22px; overflow: hidden; background: #2b2f31;
  box-shadow: -6px 0 0 0 #2aa8e8, 6px 0 0 0 #2aa8e8, -6px 0 10px 1px rgba(42, 168, 232, .45), 6px 0 10px 1px rgba(42, 168, 232, .45), 0 6px 14px rgba(0, 0, 0, .6); }
.nl-battle { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nl-field::after { content: ''; position: absolute; inset: 0; pointer-events: none;   /* the veil: dims the battle to the art's faded battlefield, with its teal glow along the top and a light beam from the logo */
  background: linear-gradient(104deg, transparent 18%, rgba(150, 215, 225, .12) 26%, rgba(150, 215, 225, .2) 31%, rgba(150, 215, 225, .1) 38%, transparent 50%),
              linear-gradient(180deg, rgba(80, 120, 126, .55) 0, rgba(96, 140, 142, .55) 14%, rgba(50, 66, 70, .45) 30%, rgba(34, 36, 38, .45) 45%, rgba(34, 36, 38, .4) 75%, rgba(52, 52, 52, .45) 100%); }
.nl-logo { position: absolute; left: 20px; top: -4px; width: 380px; height: 176px; z-index: 2; text-decoration: none; }   /* (the link's area stops above the menu bar: it used to lie over "home" and "tournaments" and take their clicks) */
.nl-logo img { position: absolute; left: 0; top: 0; height: 250px; width: auto; pointer-events: none; }   /* (the µ's tail runs down over the bar: it is drawn there, but a click there is the bar's) */
.nl-tag { position: absolute; left: 62px; top: 138px; font: 400 36px/1 var(--head); letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 0 6px rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #6fd0f5 0, #3fa7cf 60%, #2b86b0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nl-tag i { font-style: normal; background: linear-gradient(180deg, #ffd21a 0, #f59a08 55%, #e56d00 100%); -webkit-background-clip: text; background-clip: text; }
.nl-nav { position: absolute; left: 14px; right: 6px; top: 181px; height: 37px; display: flex; align-items: stretch; padding-left: 44px; border-radius: 8px; background: var(--gloss);
  box-shadow: -6px 0 0 0 #2a9ee0, 6px 0 0 0 #2a9ee0, 0 3px 8px rgba(0, 0, 0, .6); z-index: 1; }
.nl-nav a { display: flex; align-items: center; padding: 0 23px; font: 500 20px/1 var(--head); color: #5cb8e6; text-decoration: none; text-shadow: 0 1px 2px #000; border-right: 1px dotted #6a6a6a; }
.nl-nav a:hover, .nl-nav a.on { color: #fff; background: linear-gradient(180deg, rgba(92, 184, 230, .16), rgba(92, 184, 230, 0) 50%, rgba(92, 184, 230, .1)); }
.nl-nav a.nl-play { color: #9be37f; }
.nl-nav a.nl-play:hover, .nl-nav a.nl-play.on { color: #fff; background: linear-gradient(180deg, rgba(110, 220, 80, .22), rgba(110, 220, 80, 0) 50%, rgba(110, 220, 80, .14)); }
.nl-account { position: absolute; right: 22px; top: 82px; width: 150px; padding: 8px 9px; border-radius: 12px; z-index: 1; font-size: 12px; text-align: right; color: #d8ecf8; text-shadow: 0 1px 2px #000;
  background: rgba(20, 24, 26, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nl-login input { display: block; width: 100%; height: 22px; margin: 0 0 5px; padding: 0 9px; box-sizing: border-box; border: 1px solid #5a5a5a; border-radius: 11px;
  background: linear-gradient(180deg, #2a2a2a, #3c3c3c); color: #fff; font: 12px Verdana, sans-serif; text-align: right; }
.nl-login input::placeholder { color: #8a8a8a; }
.nl-login-row { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; white-space: nowrap; }
.pill { display: inline-block; margin: 0; padding: 2px 8px; border: 0; border-radius: 10px; font: 11px/1.3 var(--head); color: #fff; text-decoration: none; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill.orange { background: linear-gradient(180deg, #f07a2a, #b94a0c); } .pill.blue { background: linear-gradient(180deg, #3ab0ff, #1470c8); } .pill.green { background: linear-gradient(180deg, #5fd23c, #2c8a17); }
.pill:hover { filter: brightness(1.15); color: #fff; }
.nl-who { margin-bottom: 6px; } .nl-who b { color: #fff; }
.nl-links a, .nl-links button.link { color: #8fd0ff; text-decoration: none; font-size: 12px; margin-left: 6px; padding: 0; } .nl-links a:hover, .nl-links button.link:hover { color: #fff; }
@media (max-width: 1200px) { .nl-nav a { padding: 0 15px; font-size: 18px; } }   /* (eight items fit on one line from 960 up when signed in) */
@media (max-width: 960px) { .nl-nav a { padding: 0 14px; font-size: 17px; } }

/* ---- the columns ---- */
.nl #Columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 18px; margin: 10px 0 0 7px; align-items: start; }
.nl #Main { display: block; min-width: 0; }
.nl #Side { width: auto; margin: 0; }

/* the panel and the boxes: a dark card on its coloured edge, with its name in a faint glass tab over the top right, as the pictures drew them */
.nl-panel, .nl-box { position: relative; border-radius: 20px 24px 24px 20px; box-shadow: -7px 0 0 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .55); }
.nl-panel { --edge: var(--orange); background: var(--panel); margin-top: 26px; padding: 18px 30px 34px; min-height: 420px; }
.nl-box { --edge: var(--blue); background: var(--box); margin-top: 26px; padding: 14px 14px 16px; }
.nl-box.orange { --edge: var(--orange-2); }
.nl-tab { position: absolute; right: 36px; bottom: 100%; margin: 0; padding: 3px 18px 2px; min-width: 90px; text-align: right; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); color: var(--tab); font: 500 14px/18px var(--head); letter-spacing: .02em; }
.nl-tab a { color: inherit; text-decoration: none; } .nl-tab a:hover { color: #fff; }   /* (the My Tanks box's tab is a way to the page) */
.nl .PanelBody { width: auto; overflow-x: auto; }
.nl .PanelBody h3, .nl .news h3 { font-family: var(--head); font-weight: 500; font-size: 18px; }
.nl .PanelBody p { line-height: 1.6; }
.nl .btn, .nl button:not(.link):not(.pill):not(.force-btn):not(.hk-clear):not(.hk-key):not(.danger):not(.nl-big) { font-family: var(--head); font-size: 15px; border-radius: 8px; padding: 6px 18px; background: var(--gloss); border: 1px solid #5a7f99; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.nl .btn:hover, .nl button:not(.link):not(.pill):not(.force-btn):not(.hk-clear):not(.hk-key):not(.danger):not(.nl-big):hover { border-color: #8fd0ff; filter: brightness(1.12); }
.nl button.danger { font-family: var(--head); font-size: 15px; border-radius: 8px; padding: 6px 18px; background: linear-gradient(180deg, #5a2a2a, #3a1616); border: 1px solid #ff7a7a; color: #ffd0d0; } .nl button.danger:hover { border-color: #ffb0b0; background: linear-gradient(180deg, #7a3a3a, #4a1a1a); }   /* (Delete my account: red, not like every other button) */

/* Account: the four battlefields from the old picture, and the two buttons as real ones */
.nl-shots { aspect-ratio: 299 / 238; margin: -4px 0 8px; background: url(/img/bg-register.png) 50% 0 / 100% auto no-repeat; }   /* (the old picture down to its painted buttons, which are real ones under it) */
.nl-pair { display: flex; justify-content: space-between; gap: 10px; }
.nl-pair span { flex: 1; display: flex; flex-direction: column; align-items: center; color: #cfd8de; font: 13px var(--head); gap: 3px; }
.nl-big { display: block; width: 100%; padding: 5px 0; border-radius: 18px; text-align: center; color: #fff; text-decoration: none; font: 500 17px/1.2 var(--head); text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 4px rgba(0, 0, 0, .5); }
.nl-big.blue { background: linear-gradient(180deg, #5cc6ff 0, #2a9be6 48%, #1678c6 52%, #2b8fd8 100%); }
.nl-big.green { background: linear-gradient(180deg, #7ee35a 0, #43b52a 48%, #2a8c18 52%, #3aa424 100%); }
.nl-big:hover { filter: brightness(1.12); color: #fff; }
/* Watch a recording (Replay.cshtml): the site's panel, narrow and centred over the game stage; the client's own lobby stays out of sight */
.nl-watch { width: min(600px, 100%); margin: 40px auto 0; min-height: 0; padding-bottom: 26px; }
.nl-watch-lead { font-size: 16px; line-height: 1.5; margin: 6px 0 0; }
.nl-watch-actions { display: grid; gap: 14px; margin: 22px 0 16px; }
.nl .nl-watch button.nl-big { padding: 11px 0; border: 0; border-radius: 18px; box-shadow: none; font: 500 19px/1.2 var(--head); cursor: pointer; }   /* (the site's plain-button rule would grey them) */
.nl .nl-watch button.nl-big.green { background: linear-gradient(180deg, #7ee35a 0, #43b52a 48%, #2a8c18 52%, #3aa424 100%); }
.nl .nl-watch button.nl-big.blue { background: linear-gradient(180deg, #5cc6ff 0, #2a9be6 48%, #1678c6 52%, #2b8fd8 100%); }
.nl-watch-status { min-height: 1.4em; margin: 0 0 8px; color: #ffd27a; font-weight: 500; }
.nl-watch-status:empty { display: none; }
body.site-watch #lobby { display: none !important; }
.nl-profile { padding: 4px 6px; line-height: 1.6; } .nl-profile p { margin: 0 0 10px; }
/* My Tanks: a row a tank, its best rank under its name and a play button at the end */
.nl-mytanks { list-style: none; padding: 0; margin: 0 0 8px; }
.nl-mytanks li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin: 0; padding: 7px 2px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nl-mytanks li:last-child { border-bottom: 0; }
.nl-mytanks .name { font: 500 16px/1.2 var(--head); color: #fff; text-decoration: none; } .nl-mytanks .name:hover { color: #8fd0ff; }
.nl-mytanks .dim { grid-row: 2; font-size: 12px; }
.nl-mytanks form { display: contents; }   /* (the play button posts the tank; the button itself sits in the grid) */
.nl-mytanks .pill { grid-row: 1 / span 2; grid-column: 2; font-size: 14px; padding: 4px 14px; border-radius: 12px; }
.nl-small-links { font-size: 12px; margin: 4px 0 0 !important; }

/* Quick Links: glossy bars, each with its colour and the old picture's little scene at its right end */
.nl-quick { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; }
.nl-quick a { --c: #ff8c1a; position: relative; display: flex; align-items: center; height: 31px; padding: 0 0 0 12px; border-radius: 10px; overflow: hidden; background: var(--gloss);
  box-shadow: -6px 0 0 0 var(--c), 0 2px 4px rgba(0, 0, 0, .5); margin-left: 6px; color: var(--c); text-decoration: none; font: 500 18px/1 var(--head); text-shadow: 0 1px 2px #000; }
.nl-quick a::after { content: ''; position: absolute; right: 0; top: 0; width: 96px; height: 31px; background: url(/img/bg-quicklinks.png) no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px); mask-image: linear-gradient(90deg, transparent, #000 34px); opacity: .9; }
.nl-quick a:hover { filter: brightness(1.18); }
.nl-quick .q-manual { --c: #ff8c1a; } .nl-quick .q-manual::after { background-position: -186px -2px; }   /* (the sprite's rows are 31px at y 2, 43, 86 and 130; their scenes end at x 282) */
.nl-quick .q-top { --c: #ffd22a; } .nl-quick .q-top::after { background-position: -186px -43px; }
.nl-quick .q-maps { --c: #86e33c; } .nl-quick .q-maps::after { background-position: -186px -86px; }
.nl-quick .q-editor { --c: #c27cff; } .nl-quick .q-editor::after { background: url(/img/quick-tiles.png) -64px 0 / 256px 608px; }

/* Tournaments: the last one's top five in medal colours (the names in their force's), then the countdown to the next */
.nl-last { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; margin: 0 4px 4px; }
.nl-tourney ol { list-style: none; margin: 0; padding: 4px 10px; border-radius: 14px; background: linear-gradient(180deg, #3a3a3a, #2c2c2c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 3px 8px rgba(0, 0, 0, .5); }
.nl-tourney li { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .04); font: 500 16px var(--head); text-shadow: 0 1px 2px #000; overflow: hidden; white-space: nowrap; }
.nl-tourney li:last-child { border: 0; box-shadow: none; }
.nl-tourney .place { width: 32px; flex: none; font-size: 13px; color: #b0b0b0; } .nl-tourney .p1 .place { color: #ffc21a; } .nl-tourney .p2 .place { color: #c8c8f0; } .nl-tourney .p3 .place { color: #ff8c1a; }
.nl-tourney .p1 { font-size: 18px; }
.nl-next { margin-top: 12px; text-align: center; color: #cfd8de; font: 13px var(--head); } .nl-next .tnext { color: #fff; font-size: 15px; }
.nl-more { display: block; text-align: center; margin-top: 6px; font-size: 13px; }

/* Coming soon: the promised features, a line each */
.nl-soon { list-style: none; margin: 0; padding: 2px 4px; }
.nl-soon li { margin: 0; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); line-height: 1.35; }
.nl-soon li:last-child { border-bottom: 0; }
.nl-soon b { display: block; font: 500 15px/1.3 var(--head); color: #ffb050; }
.nl-soon span { display: block; color: var(--dim); font-size: 12px; }

/* Game News: the old box's lines, scrolling when there are many */
.rss { max-height: 300px; padding: 4px 6px; overflow-y: auto; }
.rss a { display: block; color: #fff; text-decoration: none; font-size: 13px; margin-bottom: 10px; text-shadow: 0 1px 2px #000; } .rss a:hover { color: #ffb050; }
.rss .hd { display: block; color: #ffb050; font-size: 12px; }

/* ---- the footer: the old bar's links as text ---- */
.nl-foot { margin: 26px 7px 0; padding: 10px 22px; border-radius: 18px; background: var(--box); box-shadow: -7px 0 0 0 var(--blue-2), 7px 0 0 0 var(--blue-2), 0 6px 14px rgba(0, 0, 0, .55);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.nl-foot nav { display: flex; flex-wrap: wrap; gap: 4px 34px; }
.nl-foot nav a { color: #fff; text-decoration: none; font: 15px var(--head); } .nl-foot nav a:hover { color: #8fd0ff; } .nl-foot .mu { color: #2e9aec; }
.nl-copy { color: #b0b0b0; font: 13px var(--head); } .nl-copy a { color: #9a9a9a; } .nl-copy a:hover { color: #fff; }

/* ---- smaller screens ---- */
@media (max-width: 900px) {
  .nl #Columns { grid-template-columns: minmax(0, 1fr); }
  .nl #Side { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 18px; }
}
/* on a phone the boxes under the panel are the account and the tournaments only: Quick Links (the map tools need a computer) and Game News (the home page has it) stay on wider screens */
@media (max-width: 700px) { .nl-wide-only { display: none; } }
@media (max-width: 700px) {
  .nl #Page { padding: 6px 10px 18px; }
  /* the banner at half size, the battle still in it; the menu and the log in under it */
  .nl-head { height: auto; display: flex; flex-direction: column; }
  .nl-banner { position: relative; height: 112px; }
  .nl-field { left: 8px; right: 4px; top: 10px; height: 92px; border-radius: 16px; }
  .nl-logo { left: 10px; top: -2px; width: 220px; height: 100px; }
  .nl-logo img { height: 120px; }
  .nl-tag { left: 30px; top: 70px; font-size: 19px; }
  .nl-nav, .nl-account { position: static; width: auto; height: auto; }
  .nl-nav { flex-wrap: wrap; justify-content: space-between; padding: 0; margin: 4px 0 0; border-radius: 12px; box-shadow: -5px 0 0 0 var(--blue-2), 5px 0 0 0 var(--blue-2); }
  .nl-nav a { padding: 11px 8px; font-size: 15px; border-right: 0; }
  .nl-account { margin-top: 8px; padding: 0; font-size: 13px; text-align: left; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nl-login { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .nl-login input { height: 34px; margin: 0; font-size: 15px; border-radius: 10px; text-align: left; padding: 0 10px; }
  .nl-login-row { grid-column: 1 / -1; margin: 0; gap: 8px; }
  .nl-login-row .pill { flex: 1; font-size: 15px; padding: 7px 0; border-radius: 10px; text-align: center; }
  .nl-links a, .nl-links button.link { font-size: 14px; margin: 0 12px 0 0; }
  .nl #Columns { margin-left: 6px; }
  .nl-panel { padding: 16px 16px 26px; min-height: 0; }
  .nl-foot { margin-left: 6px; margin-right: 6px; }
  .nl-foot nav { gap: 6px 18px; }
}