/* Riveted steel, brushed surfaces and hazard paint: the junkyard HUD. */
:root{--steel-highlight:#88918b;--steel-edge:#4b5550;--yellow:#f1c75b}
.panel,.evolve-title,.class-choice,dialog{
  background:repeating-linear-gradient(0deg,#ffffff03 0px,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(145deg,#353d39f7 0%,#202824fa 38%,#171e1bfa 100%);
  border:1px solid #6c776580;border-top-color:#a4aca181;border-bottom-color:#0b100d;
  border-radius:3px;box-shadow:inset 0 1px 0 #d3dbc923,inset 0 -2px 0 #0008,0 3px 0 #0b100dcc,0 8px 22px #0003;
}
.driver-card,.progress-card,.ability-card,.death-card,.class-choice,.evolve-title{position:relative}
.panel::before,.class-choice::before,.evolve-title::before{
  content:"";position:absolute;inset:4px;pointer-events:none;
  background:radial-gradient(circle,#131913 0 1px,#8d9786 1.5px 2.5px,#111912 3px 4px,transparent 4.5px) left top/9px 9px no-repeat,
    radial-gradient(circle,#131913 0 1px,#8d9786 1.5px 2.5px,#111912 3px 4px,transparent 4.5px) right top/9px 9px no-repeat,
    radial-gradient(circle,#131913 0 1px,#64725a 1.5px 2.5px,#111912 3px 4px,transparent 4.5px) left bottom/9px 9px no-repeat,
    radial-gradient(circle,#131913 0 1px,#64725a 1.5px 2.5px,#111912 3px 4px,transparent 4.5px) right bottom/9px 9px no-repeat;
}
.panel::after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:3px;pointer-events:none;opacity:.48;background:repeating-linear-gradient(135deg,#e9bc50 0 7px,#172019 7px 14px)}
.panel-heading{background:linear-gradient(#69705b37,#0d160f38);padding:6px 8px;margin:-3px -5px 0;border-top:1px solid #bbc29e20;border-bottom:1px solid #030a0699;text-shadow:0 1px 1px #000a}
.panel-heading .tiny-icon{background:#131e14;padding:0 4px;border:1px solid #6871515c;font-size:13px}
.leaderboard{padding-top:20px}.leaderboard #board li:first-child{background:linear-gradient(90deg,#dbb85a19,transparent);border-left:2px solid #e4bd58;margin-left:-8px;padding-left:6px}
.leaderboard #board li.self{background:#f1c75b15}.leaderboard #board li:not(:last-child){border-bottom:1px solid #ffffff04}
.board-foot{margin-bottom:5px}.minimap{padding-top:17px;padding-bottom:15px}#map{border:3px solid #101b12;outline:1px solid #626c5280;box-shadow:inset 0 0 18px #0007}
.vehicle-thumbnail{background-color:#0c160d66;border:1px solid #a0ab8238;border-radius:3px;box-shadow:inset 0 0 9px #0006}
.driver-info strong{color:#f7ecd0;text-shadow:0 2px 0 #090e0a}
.health-track,.xp-track{border:1px solid #020c068c;box-shadow:0 1px 0 #cddbb019,inset 0 1px 3px #0008;height:7px}
.health-track span{background-image:linear-gradient(#fff3,transparent 60%,#0003)}
.xp-track{height:9px}.xp-track>span{background:repeating-linear-gradient(115deg,#e1b54a 0 10px,#f8d378 10px 13px);box-shadow:inset 0 1px 0 #fff5}
.ability-card kbd,kbd{background:linear-gradient(#465141,#263127);border:1px solid #8a967478;border-bottom:3px solid #111a12;text-shadow:0 1px 0 #0008;box-shadow:0 1px 0 #98a88322}
#ability-ring{background:radial-gradient(circle,#435139,#19281c);box-shadow:inset 0 0 9px #0006,0 0 0 3px #111b13,0 0 0 4px #82906555}
.primary{position:relative;background:linear-gradient(165deg,#ffe496,#efc356 46%,#d7a239);border-color:#fff0b1;border-bottom:3px solid #986c22;box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #c79235,0 4px 0 #07100988,0 6px 12px #0003;padding-left:23px;text-shadow:0 1px 0 #ffe7a9}
.primary::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:4px;background:repeating-linear-gradient(145deg,#2c352b 0 4px,#edc366 4px 8px);opacity:.75;pointer-events:none}
.primary:hover{background:linear-gradient(165deg,#fff0b7,#ffce66 48%,#dca73d)}.primary:active{transform:translateY(2px);box-shadow:inset 0 2px 3px #986f3944,0 2px 0 #07100988}
.brand-icon{border:1px solid #ffe69b;background:linear-gradient(145deg,#ffe4a3,#eab743);box-shadow:inset 0 1px 0 #fff8,0 3px 0 #141d15;text-shadow:0 1px #ffe9b1}
.wordmark{text-shadow:0 2px 0 #0d150f}.top-actions button,.server-pill{background:linear-gradient(145deg,#3b4538ed,#1b271ded);border-color:#9bac6e42;box-shadow:inset 0 1px 0 #e7e8cb16,0 2px 0 #09120cab}
.top-actions button:hover{color:var(--yellow);border-color:#e0c26590}
.name-input{background:linear-gradient(#0c170fc9,#253123);border-color:#79896377;box-shadow:inset 0 2px 7px #0005,0 1px 0 #b8c99822}
.lobby-options{display:flex;gap:8px;margin-bottom:10px}.lobby-options select,.lobby-options input{height:36px;min-width:0;background:#17231a;color:#d2dcc4;border:1px solid #73845c80;border-radius:2px;font:600 10px var(--display);letter-spacing:1px;padding:0 10px;box-shadow:inset 0 2px 5px #0003}
.lobby-options select{flex:1;cursor:pointer}.lobby-options input{width:45%;font-family:var(--body);font-size:9px;text-transform:uppercase}.lobby-options option{background:#1b281e}
.lobby-code{background:#101e14;color:var(--yellow);border:1px solid #a69d615c;border-radius:2px;padding:6px 8px;font:600 10px var(--display);letter-spacing:1.1px;white-space:nowrap}.lobby-code:hover{border-color:var(--yellow)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.menu-controls{gap:24px;margin-top:19px;padding-top:17px}.menu h1{font-size:clamp(64px,6.2vw,92px);text-shadow:0 3px 0 #09120d4a}
.class-choice:hover{border-color:#eac265;box-shadow:inset 0 1px 0 #ffe8b045,0 3px 0 #070f0a,0 0 14px #ecc36915}
#toast{background:linear-gradient(145deg,#394835,#152119);border:1px solid #dcc1659c;border-bottom:3px solid #83713a;box-shadow:0 5px 15px #0003}
#arena:focus{outline:none}dialog{box-shadow:inset 0 1px 0 #d3dbc932,0 10px 50px #0007}.death-card{border-top:3px solid #d4a750}
@media(min-width:1600px){.menu-controls{gap:34px}}
@media(max-width:1100px){.ability-card{position:absolute;bottom:110px;left:0}}
@media(max-height:760px){.menu h1{font-size:68px;margin:18px 0}.menu .intro{margin-bottom:19px}.menu-controls{margin-top:14px;padding-top:13px}}
@media(max-height:660px){.menu h1{font-size:60px;margin:15px 0}.menu-controls{padding-top:10px}.menu .intro{margin-bottom:14px}}
@media(max-width:760px){.menu-controls{gap:18px}.lobby-code{font-size:8px;padding:4px}.server-pill{gap:6px}.minimap{padding-bottom:12px}.menu h1{font-size:64px}}

.wordmark{flex-shrink:0}.wordmark img{display:block;width:174px;height:auto;filter:drop-shadow(0 3px 3px #0005)}
.topbar{top:16px}body.playing .wordmark img{width:130px}
@media(max-width:760px){.wordmark img{width:122px}.server-pill{top:68px}.topbar{top:10px}}