*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 20%,#211044,#03040a 68%);font-family:"Courier New",monospace}
body{display:grid;place-items:center}
#app{position:relative;width:min(100vw,177.78vh);height:min(56.25vw,100vh);image-rendering:auto;overflow:hidden;background:#050711}
canvas{display:block;width:100%;height:100%;background:#070b18;image-rendering:auto;box-shadow:0 0 58px #000;touch-action:none}
#ui{position:absolute;inset:0;pointer-events:none}
.panel{pointer-events:auto;position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,5,14,.82);text-shadow:2px 2px #000}
.card{width:min(560px,90%);border:2px solid #5cecff;background:linear-gradient(180deg,rgba(13,22,52,.97),rgba(7,11,27,.97));box-shadow:0 0 0 4px #111a38,0 0 32px rgba(92,236,255,.3);padding:22px;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.05) 46%,transparent 50%);animation:cardSweep 4.8s linear infinite}
.wide-card{width:min(760px,94%)}
h1{margin:0 0 8px;color:#fff;font-size:34px;letter-spacing:3px}h2{margin-top:0;color:#fff;letter-spacing:2px}p{color:#c3cff0;line-height:1.5}
button{font:700 14px "Courier New",monospace;color:#06111a;background:#5cecff;border:0;padding:10px 16px;margin:5px;cursor:pointer;box-shadow:3px 3px #172342;transition:transform .08s,filter .12s,background .12s}
button:hover,button:focus{background:#fff;outline:2px solid #a06cff;transform:translate(-1px,-1px);filter:brightness(1.1)}button:active{transform:translate(2px,2px);box-shadow:1px 1px #172342}button.secondary,button.accent{background:#b35cff;color:#fff}
.track-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:250px;overflow:auto;padding:2px}.track{text-align:left;width:100%;color:#fff;background:#18213e;border-left:4px solid #5cecff}.small{font-size:12px;color:#9bacd5}kbd{color:#fff;border:1px solid #7386b8;background:#111a33;padding:1px 5px}

/* Animated vivid arcade splash menu using the supplied Arena Racer artwork. */
.main-menu-panel{display:block;background:radial-gradient(circle at 50% 58%,rgba(4,6,18,.05) 0 22%,rgba(2,3,12,.28) 52%,rgba(2,3,12,.62) 100%);overflow:hidden}
.main-logo{position:absolute;top:22px;left:50%;transform:translateX(-50%) skew(-6deg);color:#fff;text-align:center;filter:drop-shadow(0 0 9px #30eaff) drop-shadow(0 0 18px #ff4fc8);animation:logoPulse 2.8s ease-in-out infinite}
.main-logo span{display:block;font:900 18px Arial,sans-serif;letter-spacing:11px;color:#d9faff;margin-left:8px}.main-logo strong{display:block;font:italic 900 50px Arial,sans-serif;line-height:.88;letter-spacing:-2px;background:linear-gradient(180deg,#fff 0 30%,#69ecff 48%,#a564ff 74%,#ff4fc8);-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}.main-logo small{display:block;margin-top:8px;font:700 8px "Courier New",monospace;letter-spacing:2px;color:#fff}
.menu-center-frame{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);width:232px;padding:12px 15px 15px;background:linear-gradient(180deg,rgba(6,9,25,.76),rgba(7,6,24,.64));border:1px solid rgba(177,234,255,.72);box-shadow:0 0 0 2px rgba(24,48,87,.65),0 0 24px rgba(48,234,255,.28),inset 0 0 22px rgba(170,65,255,.12);backdrop-filter:blur(4px);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);animation:menuPanelPulse 3.6s ease-in-out infinite}
.menu-kicker{text-align:center;color:#eafaff;font-size:9px;letter-spacing:4px;margin:0 0 7px;text-shadow:0 0 8px #30eaff}
.menu-stack{display:flex;flex-direction:column;align-items:stretch;width:100%}.menu-stack button{position:relative;margin:3px 0;width:100%;text-align:center;padding:8px 12px;background:linear-gradient(90deg,rgba(20,218,255,.96),rgba(103,84,255,.94));color:#06111a;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 12px rgba(48,234,255,.24),inset 0 0 8px rgba(255,255,255,.14);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);animation:buttonGlow 3s ease-in-out infinite;letter-spacing:1px}.menu-stack button:nth-child(2n){animation-delay:-1.2s}.menu-stack button.secondary{background:linear-gradient(90deg,#ff4fc8,#8e55ff);color:#fff}.menu-stack .menu-primary{font-size:17px;padding:10px 12px;background:linear-gradient(90deg,#fff,#48f4ff 58%,#a95dff);box-shadow:0 0 18px rgba(72,244,255,.48),0 0 28px rgba(169,93,255,.22)}.menu-stack button:hover,.menu-stack button:focus{background:linear-gradient(90deg,#fff,#bdf8ff 60%,#f3d8ff);color:#07101a;transform:scale(1.035);outline:1px solid #fff}
.menu-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:15px;color:#eef4ff;font-size:10px;letter-spacing:.2px;white-space:nowrap;padding:5px 10px;background:rgba(4,7,18,.58);border:1px solid rgba(131,175,255,.26);text-align:center}.menu-scan{position:absolute;inset:-100% 0 0;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.07) 49.5%,transparent 50.5%);animation:scan 4.2s linear infinite}.menu-flare{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(28px);opacity:.13;mix-blend-mode:screen;animation:flareFloat 5s ease-in-out infinite}.flare-a{right:5%;top:7%;background:#30eaff}.flare-b{left:10%;bottom:-25%;background:#ff4fc8;animation-delay:-2.3s}
.menu-overlay{background:rgba(3,5,14,.72);backdrop-filter:blur(3px)}.pause-panel,.results-panel{background:rgba(3,5,14,.67);backdrop-filter:blur(2px)}

/* Level editor */
.editor-ui{pointer-events:none;position:absolute;inset:0}.editor-toolbar{pointer-events:auto;position:absolute;left:8px;top:8px;bottom:8px;width:208px;padding:9px;background:rgba(5,8,20,.94);border:1px solid #5cecff;box-shadow:0 0 18px rgba(92,236,255,.24);overflow:auto;color:#dce6ff;text-shadow:1px 1px #000}.editor-title{font-weight:900;font-size:17px;color:#fff;letter-spacing:2px;border-bottom:1px solid #35456d;padding:3px 2px 8px;margin-bottom:7px}.editor-toolbar label{display:block;font-size:10px;color:#9eacd0;margin:5px 0}.editor-toolbar input,.editor-toolbar select{width:100%;margin-top:3px;background:#111a33;color:#fff;border:1px solid #3a4b78;padding:6px;font:11px "Courier New",monospace}.editor-toolbar button{font-size:10px;margin:2px 0;padding:6px 7px;width:100%;text-align:left;background:#26355c;color:#fff;box-shadow:none;border-left:3px solid transparent}.editor-toolbar button.active{background:#5cecff;color:#06111a;border-left-color:#fff}.editor-toolbar button.accent{background:#b35cff}.editor-group{border-top:1px solid #2b385d;margin-top:7px;padding-top:5px}.editor-group>span{display:block;font-size:9px;color:#5cecff;letter-spacing:1px;margin-bottom:2px}.editor-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.editor-row button{margin:2px 0;text-align:center}.editor-row:has(button:nth-child(2):last-child){grid-template-columns:1fr 1fr}.editor-help{font-size:9px;line-height:1.35;margin:7px 0 0;color:#9dadd4}.editor-status{pointer-events:none;position:absolute;left:225px;bottom:8px;padding:7px 10px;background:rgba(4,7,18,.88);border-left:3px solid #ff4fc8;color:#fff;font-size:10px;text-shadow:1px 1px #000}

@keyframes logoPulse{0%,100%{transform:translateX(-50%) skew(-6deg) scale(1);filter:drop-shadow(0 0 7px #30eaff) drop-shadow(0 0 14px #ff4fc8)}50%{transform:translateX(-50%) skew(-6deg) scale(1.018);filter:drop-shadow(0 0 12px #30eaff) drop-shadow(0 0 24px #ff4fc8)}}
@keyframes buttonGlow{0%,100%{filter:brightness(.94)}50%{filter:brightness(1.15)}}@keyframes menuPanelPulse{0%,100%{box-shadow:0 0 0 2px rgba(24,48,87,.65),0 0 20px rgba(48,234,255,.22),inset 0 0 18px rgba(170,65,255,.1)}50%{box-shadow:0 0 0 2px rgba(24,48,87,.75),0 0 30px rgba(48,234,255,.36),inset 0 0 24px rgba(170,65,255,.18)}}@keyframes scan{to{transform:translateY(200%)}}@keyframes flareFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-12px) scale(1.18)}}@keyframes cardSweep{to{transform:translateX(180%)}}
@media (max-width:700px){.card{padding:14px}.track-grid{grid-template-columns:1fr}h1{font-size:26px}.menu-center-frame{width:210px;top:58%}.editor-toolbar{width:185px}.editor-status{left:196px}.main-logo strong{font-size:44px}.menu-controls{font-size:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.menu-art-loaded .main-logo{display:none}

/* V2.4 arcade boot sequence and cabinet-style main menu. */
.menu-art-loaded .main-logo{display:block}
.main-logo{top:18px;animation:logoFlyIn 1.05s cubic-bezier(.16,.88,.22,1.2) both,logoPulse 2.8s ease-in-out 1.05s infinite}
.press-start-layer{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:7px;transition:opacity .28s,transform .28s;z-index:4}
.press-start-layer.is-hidden{opacity:0;transform:translate(-50%,-44%) scale(.9);pointer-events:none}
.press-start-layer small{color:#c8f9ff;font-size:8px;letter-spacing:2px;text-shadow:0 0 9px #30eaff}
.press-start-button{min-width:230px;margin:0;padding:13px 25px;color:#fff;background:linear-gradient(180deg,#172b50 0 42%,#0a1229 43% 100%);border:2px solid #e9feff;outline:2px solid #2deaff;outline-offset:3px;box-shadow:0 0 0 5px rgba(8,16,38,.88),0 0 20px #2deaff,0 0 38px rgba(255,79,200,.5),inset 0 0 18px rgba(45,234,255,.24);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);font-size:18px;letter-spacing:4px;text-shadow:0 0 8px #fff;animation:pressStartFlash .82s steps(2,end) infinite}
.press-start-button:hover,.press-start-button:focus{background:linear-gradient(180deg,#fff,#69efff 55%,#b15eff);color:#06101c;transform:scale(1.045);outline-color:#fff}
.menu-center-frame{top:58%;opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.86);transition:opacity .34s ease,transform .42s cubic-bezier(.2,.9,.2,1.15);animation:none}
.menu-center-frame.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);animation:menuPanelPulse 3.2s ease-in-out infinite}
.menu-controls{opacity:0;transition:opacity .35s}.menu-controls.is-visible{opacity:1}
.menu-stack{gap:5px}
.menu-stack button{overflow:hidden;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;min-height:34px;padding:8px 12px 8px 7px;border:1px solid rgba(255,255,255,.78);background:linear-gradient(180deg,#38efff 0 44%,#1397c8 45% 100%);box-shadow:inset 0 2px rgba(255,255,255,.52),inset 0 -3px rgba(0,20,60,.32),0 3px 0 #06122d,0 0 14px rgba(48,234,255,.38);color:#03101a;text-shadow:0 1px rgba(255,255,255,.42);clip-path:polygon(9px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,9px 100%,0 calc(100% - 9px),0 9px);animation:buttonGlow 2.4s ease-in-out infinite}
.menu-stack button:before{content:"";position:absolute;left:-45%;top:0;width:34%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);transform:skewX(-18deg);animation:arcadeShine 3.8s linear infinite;pointer-events:none}
.menu-stack button:after{content:"◆";justify-self:end;color:rgba(255,255,255,.78);text-shadow:0 0 7px #fff}
.menu-stack button span{justify-self:start;display:grid;place-items:center;width:26px;height:20px;background:#07162b;color:#aaf9ff;border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 0 7px #2deaff;font-size:9px;text-shadow:0 0 5px #2deaff}
.menu-stack button.secondary{background:linear-gradient(180deg,#ff6ed1 0 44%,#8b43dc 45% 100%);color:#fff;text-shadow:0 1px #5c126c;box-shadow:inset 0 2px rgba(255,255,255,.5),inset 0 -3px rgba(58,0,87,.35),0 3px 0 #17072e,0 0 16px rgba(255,79,200,.4)}
.menu-stack .menu-primary{min-height:42px;font-size:17px;background:linear-gradient(180deg,#ffffff 0 28%,#55f3ff 29% 58%,#705fff 59% 100%);box-shadow:inset 0 2px #fff,inset 0 -4px rgba(24,8,91,.34),0 4px 0 #06122d,0 0 23px rgba(72,244,255,.65),0 0 34px rgba(169,93,255,.35)}
.menu-stack button:hover,.menu-stack button:focus{filter:brightness(1.25) saturate(1.2);transform:translateX(4px) scale(1.025);outline:1px solid #fff}

@keyframes logoFlyIn{0%{opacity:0;transform:translate(-50%,-145px) skew(-16deg) scale(1.55);filter:blur(6px) drop-shadow(0 0 35px #30eaff)}65%{opacity:1;transform:translate(-50%,8px) skew(-4deg) scale(.96)}100%{opacity:1;transform:translateX(-50%) skew(-6deg) scale(1)}}
@keyframes pressStartFlash{0%,42%{opacity:1;filter:brightness(1.25)}43%,100%{opacity:.38;filter:brightness(.75)}}
@keyframes arcadeShine{0%,62%{left:-45%}84%,100%{left:130%}}

/* V2.6: centered text-only arcade menu. The supplied splash artwork remains
   unobstructed because the old glass/card container has been removed. */
.menu-center-frame,
.menu-center-frame.is-visible{
  width:300px;
  top:58%;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  clip-path:none;
  animation:none;
}
.menu-kicker{display:none}
.menu-stack{gap:2px;align-items:center}
.menu-stack button,
.menu-stack button.secondary,
.menu-stack .menu-primary{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:12px;
  width:auto;
  min-width:260px;
  min-height:0;
  margin:0;
  padding:5px 18px;
  overflow:visible;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  color:#f4fbff;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-style:italic;
  font-size:22px;
  font-weight:900;
  letter-spacing:2px;
  line-height:1.05;
  -webkit-text-stroke:1px rgba(4,8,24,.9);
  text-shadow:2px 3px 0 #07142b,0 0 6px #35eaff,0 0 15px rgba(53,234,255,.58);
  transform:skew(-7deg);
  filter:none;
  animation:none;
}
.menu-stack .menu-primary{font-size:27px;color:#fff;text-shadow:2px 3px 0 #07142b,0 0 8px #fff,0 0 20px #35eaff}
.menu-stack button.secondary{color:#ffd9fa;text-shadow:2px 3px 0 #1c082c,0 0 7px #ff4fc8,0 0 18px rgba(255,79,200,.65)}
.menu-stack button:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:1px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#fff 18%,#39ecff 52%,#ff4fc8 82%,transparent);
  transform:translateX(-50%);
  box-shadow:0 0 8px #39ecff;
  animation:none;
  transition:width .14s ease;
}
.menu-stack button:after{
  content:"»";
  position:absolute;
  right:-4px;
  opacity:0;
  color:#fff;
  text-shadow:0 0 10px #39ecff;
  transition:opacity .1s,transform .1s;
}
.menu-stack button span{
  display:inline;
  width:auto;
  height:auto;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#79f5ff;
  font:900 9px "Arial Black",sans-serif;
  letter-spacing:0;
  text-shadow:0 0 6px #2deaff;
}
.menu-stack button b{font:inherit}
.menu-stack button:hover,
.menu-stack button:focus{
  color:#fff;
  background:transparent;
  box-shadow:none;
  outline:0;
  filter:brightness(1.3);
  transform:skew(-7deg) scale(1.08);
}
.menu-stack button:hover:before,.menu-stack button:focus:before{width:100%}
.menu-stack button:hover:after,.menu-stack button:focus:after{opacity:1;transform:translateX(8px)}
.press-start-button{
  min-width:0;
  padding:4px 10px;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  color:#fff;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-style:italic;
  font-size:25px;
  letter-spacing:5px;
  -webkit-text-stroke:1px #07142b;
  text-shadow:2px 3px 0 #07142b,0 0 8px #fff,0 0 18px #2deaff,0 0 30px #ff4fc8;
}
.press-start-button:hover,.press-start-button:focus{background:transparent;color:#fff;outline:0;transform:scale(1.08)}
.menu-controls{background:transparent;border:0;text-shadow:1px 2px #000,0 0 6px #30eaff}
@media(max-width:700px){.menu-center-frame{width:275px}.menu-stack button,.menu-stack button.secondary,.menu-stack .menu-primary{min-width:235px;font-size:19px}.menu-stack .menu-primary{font-size:24px}}

/* V2.8: restored fixed-resolution pixel rendering and aligned editor layout. */
#app{width:640px;height:360px;image-rendering:pixelated;image-rendering:crisp-edges}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 0 0 1px #182033,0 0 42px #000;cursor:default}
body.editor-active canvas{cursor:crosshair}
.editor-toolbar{
  left:8px;top:8px;bottom:8px;width:248px;padding:11px 12px;
  display:flex;flex-direction:column;gap:3px;
  background:rgba(5,8,18,.97);border:1px solid #64789f;
  box-shadow:0 0 0 2px rgba(5,8,18,.9),0 0 18px rgba(92,236,255,.2);
  scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#6680ae #0c1325;
}
.editor-title{font-size:16px;line-height:1.1;padding:2px 2px 9px;margin:0 0 4px;color:#f4f7ff;border-bottom:1px solid #3a4765}
.editor-toolbar label{font-size:9px;line-height:1.25;margin:3px 0;color:#b8c5df}
.editor-toolbar input,.editor-toolbar select{display:block;height:28px;margin-top:3px;padding:5px 7px;border:1px solid #53688f;background:#10182a;color:#fff;font-size:10px}
.editor-toolbar button{display:flex;align-items:center;justify-content:center;min-height:27px;margin:2px 0;padding:5px 7px;text-align:center;border:1px solid #354666;border-left:3px solid transparent;background:#202c48;color:#eef5ff;font-size:9px;line-height:1.15}
.editor-toolbar button:hover,.editor-toolbar button:focus{transform:none;filter:brightness(1.18);outline:1px solid #dffcff}
.editor-toolbar button.active{background:#83eafa;color:#061019;border-color:#d9fbff;border-left-color:#fff}
.editor-group{margin-top:5px;padding-top:6px;border-top:1px solid #303c57}
.editor-group>span{font-size:9px;margin-bottom:4px;color:#8fefff}
.editor-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
.editor-row:has(button:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.editor-row button{min-width:0;width:100%;margin:0}
.editor-help{font-size:8px;line-height:1.4;margin:7px 0;color:#aebbd3}
.editor-status{left:264px;right:8px;bottom:8px;min-height:27px;padding:7px 10px;background:rgba(4,7,18,.92);border:1px solid #344463;border-left:3px solid #ff4fc8;font-size:9px}
@media(max-width:700px){.editor-toolbar{width:220px}.editor-status{left:236px}}

/* V3.6.6 expandable online chat. */
#arena-chat{position:absolute;left:8px;width:304px;bottom:8px;height:122px;display:none;flex-direction:column;pointer-events:auto;z-index:12;font-family:"Courier New",monospace;text-shadow:1px 1px 0 #000,0 0 6px #000;transition:height .22s cubic-bezier(.2,.8,.2,1)}
#arena-chat.online{display:flex}
#arena-chat.expanded{height:222px}
.arena-chat-header{display:flex;align-items:center;justify-content:space-between;height:18px;padding:2px 8px;background:rgba(31,77,112,.72);border:1px solid rgba(134,229,255,.6);border-bottom:1px solid #75efff;color:#d9fcff;font:700 8px "Courier New",monospace;letter-spacing:.5px;cursor:pointer;pointer-events:auto}
.arena-chat-header strong{font:700 8px "Courier New",monospace;color:#d9fcff}
.arena-chat-arrow{display:inline-block;color:#e8eefb;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#arena-chat.expanded .arena-chat-arrow{transform:rotate(180deg)}
.arena-chat-log{display:flex;min-height:0;flex:1;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:8px 10px 6px;background:linear-gradient(90deg,rgba(3,7,18,.76),rgba(3,7,18,.58) 78%,rgba(3,7,18,.28));border:1px solid rgba(134,229,255,.6);border-top:0;border-left:3px solid rgba(88,234,255,.88);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%)}
.arena-chat-row{display:flex;align-items:flex-start;gap:8px;min-height:16px;color:#fff;font-size:13px;font-weight:800;line-height:16px;white-space:normal;overflow:visible}
.arena-chat-row strong{flex:0 0 auto;color:#71efff;font-weight:900}
.arena-chat-row span{min-width:0;flex:1;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}
.arena-chat-row.system strong{color:#ffcf5c}.arena-chat-row.system span{color:#eef2ff;font-style:italic}
.arena-chat-form{display:none;align-items:center;height:31px;padding:4px 9px;background:rgba(3,7,18,.94);border:1px solid rgba(134,229,255,.82);border-top:0;border-left:4px solid #58eaff;pointer-events:auto}
#arena-chat.typing .arena-chat-form{display:flex}
.arena-chat-form span{color:#6eeeff;font-size:15px;font-weight:900;margin-right:8px}.arena-chat-form input{min-width:0;flex:1;height:22px;padding:0;border:0;outline:0;background:transparent;color:#fff;font:800 13px "Courier New",monospace;text-shadow:1px 1px #000}
@media(max-width:760px){#arena-chat{left:8px;width:250px;height:110px}#arena-chat.expanded{height:194px}.arena-chat-row{font-size:11px;line-height:14px;min-height:14px}}
.online-spinner{margin:18px 0;color:#69efff;font-weight:900;letter-spacing:3px;animation:pressStartFlash .8s steps(2,end) infinite}.online-card{text-align:center}

/* V3.6.7: safe TrackMania-style nickname segments in chat. */
.tm-nickname-segment{display:inline;white-space:pre}


/* V3.7.0: live Arena Racer server browser. */
.server-browser-card{
  width:min(820px,94%);
  padding:18px;
  background:rgba(5,8,20,.97)
}

.server-browser-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px;
  margin-bottom:8px;
  border-bottom:1px solid #35456d
}

.server-browser-heading h2{
  margin:0;
  color:#fff
}

.server-browser-heading p{
  margin:4px 0 0;
  color:#9bacd5;
  font-size:10px
}

.server-browser-count{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid #5cecff;
  background:#0b1c32;
  color:#7cf4ff;
  font-size:9px;
  font-weight:900
}

.server-browser-columns,
.server-browser-row{
  display:grid;
  grid-template-columns:
    minmax(180px,1.35fr)
    minmax(150px,1fr)
    62px
    68px
    64px;
  align-items:center;
  gap:8px
}

.server-browser-columns{
  padding:4px 10px;
  color:#6f82aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px
}

.server-browser-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:118px;
  max-height:224px;
  overflow:auto;
  padding:2px
}

.server-browser-row{
  width:100%;
  min-height:58px;
  margin:0;
  padding:8px 10px;
  text-align:left;
  border:1px solid #3c527d;
  border-left:4px solid #70ff7a;
  background:linear-gradient(
    180deg,
    #15233f,
    #0b1327
  );
  box-shadow:none;
  color:#fff;
  clip-path:none;
  transform:none
}

.server-browser-row:hover,
.server-browser-row:focus{
  transform:translateX(2px);
  outline:1px solid #dffcff;
  background:linear-gradient(
    180deg,
    #20365f,
    #101c38
  )
}

.server-browser-row.offline{
  border-left-color:#ff6b6b;
  filter:saturate(.45);
  opacity:.72;
  cursor:not-allowed
}

.server-browser-row span{
  min-width:0
}

.server-browser-server,
.server-browser-track{
  display:flex;
  flex-direction:column;
  gap:3px
}

.server-browser-server strong,
.server-browser-track strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:11px
}

.server-browser-server small,
.server-browser-track small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#91a6d0;
  font-size:8px
}

.server-browser-players,
.server-browser-ping{
  text-align:center;
  color:#dbe7ff;
  font-size:10px;
  font-weight:900
}

.server-browser-join{
  padding:6px 5px;
  text-align:center;
  background:#5cecff;
  color:#06111a;
  font-size:9px;
  font-weight:900
}

.server-browser-row.offline
.server-browser-join{
  background:#522235;
  color:#ffc2cf
}

.server-browser-loading{
  display:grid;
  place-items:center;
  min-height:118px;
  color:#69efff;
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  animation:
    pressStartFlash
    .8s
    steps(2,end)
    infinite
}

.server-browser-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px
}

@media(max-width:760px){
  .server-browser-columns{
    display:none
  }

  .server-browser-row{
    grid-template-columns:
      minmax(140px,1.3fr)
      minmax(120px,1fr)
      46px
      56px
  }

  .server-browser-ping{
    display:none
  }

  .server-browser-card{
    padding:12px
  }
}


/* V3.7.2 CLEAN CHAT LAYOUT */
#arena-chat{
  height:126px;
}

#arena-chat.expanded{
  height:250px;
}

.arena-chat-header{
  order:0;
  flex:0 0 18px;
}

.arena-chat-log{
  order:1;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:flex-end;
  gap:3px;
  min-height:0;
  padding:8px 9px 7px;
  overflow:hidden;
  mask-image:none;
}

#arena-chat.expanded .arena-chat-log{
  overflow-y:auto;
  justify-content:flex-start;
  scrollbar-width:thin;
  scrollbar-color:#5cecff #07101c;
}

.arena-chat-form{
  order:2;
  flex:0 0 31px;
}

.arena-chat-row{
  display:block !important;
  flex:0 0 auto;
  width:100%;
  min-height:0 !important;
  margin:0;
  padding:0 0 2px;
  overflow:visible !important;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:14px;
  white-space:normal !important;
  opacity:1 !important;
}

.arena-chat-row > strong{
  display:inline;
  margin-right:6px;
  white-space:nowrap;
  color:#71efff;
  font-weight:900;
  line-height:inherit;
}

.arena-chat-row > strong .tm-nickname-segment{
  display:inline;
  line-height:inherit;
}

.arena-chat-row > span{
  display:inline;
  min-width:0;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:inherit;
}

.arena-chat-row.system > strong{
  color:#ffcf5c;
}

.arena-chat-row.system > span{
  color:#eef2ff;
  font-style:italic;
}

.arena-chat-form input{
  background:transparent !important;
  color:#fff !important;
}

@media(max-width:760px){
  #arena-chat{
    height:116px;
  }

  #arena-chat.expanded{
    height:220px;
  }

  .arena-chat-row{
    font-size:10px;
    line-height:13px;
  }
}


/* HIDE_SEPARATE_MENU_LOGO_ONLY */
.main-logo {
  display:none !important;
}

#game,
canvas {
  visibility:visible !important;
  opacity:1 !important;
}


/* HIDE_SEPARATE_MENU_LOGO_ONLY */
.main-logo {
  display:none !important;
}

#game,
canvas {
  visibility:visible !important;
  opacity:1 !important;
}


/* HIDE_SEPARATE_MENU_LOGO_ONLY */
.main-logo {
  display:none !important;
}

#game,
canvas {
  visibility:visible !important;
  opacity:1 !important;
}


/* FINAL_HIDE_MENU_LOGO_ONLY */
.main-logo {
  display: none !important;
}

/*
 * Do not hide, replace or cover the game canvas.
 * The canvas contains the backdrop, road, car and effects.
 */
#game {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}