/* Schermate menu */
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:20;
  background:radial-gradient(1200px 600px at 50% -10%, #16223d 0%, rgba(11,15,26,.92) 60%);
  backdrop-filter:blur(2px);
}
.screen.transparent{background:rgba(8,11,20,.72);}
.logo{display:flex; flex-direction:column; align-items:center; margin-bottom:26px;}
.logo img{width:min(420px,80vw);}
.logo .tag{color:var(--dim); letter-spacing:4px; font-size:12px; margin-top:6px; text-transform:uppercase;}
.menu-box{width:min(380px,90vw);}
.menu-foot{position:absolute; bottom:14px; color:var(--dim); font-size:12px; letter-spacing:1px;}
h2.screen-title{font-size:22px; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; color:var(--accent);}
.track-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; width:min(880px,92vw);}
.track-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px;
  cursor:pointer; transition:all .15s; position:relative; overflow:hidden;
}
.track-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.track-card.locked{opacity:.45; cursor:not-allowed;}
.track-card h3{font-size:16px; letter-spacing:1px; margin-bottom:6px;}
.track-card p{color:var(--dim); font-size:12px; line-height:1.5;}
.track-card .best{margin-top:10px; font-size:12px; color:var(--ok);}
.track-card .lock{position:absolute; top:10px; right:12px; font-size:18px;}
.nick-row{display:flex; gap:8px; width:100%; margin-bottom:8px;}
.nick-row input{
  flex:1; padding:12px; border-radius:10px; border:1px solid var(--line);
  background:#0b0f1a; color:var(--txt); font-size:15px; letter-spacing:1px;
}
.records-strip{display:flex; gap:18px; margin-top:20px; flex-wrap:wrap; justify-content:center;}
.records-strip .rec{font-size:12px; color:var(--dim); text-align:center;}
.records-strip .rec b{display:block; color:var(--txt); font-size:14px;}