/* O que é exclusivo de uma tela só: menu, seleção de mapa e o tabuleiro. */

/* ---------- menu ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile-btn{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;text-align:left;cursor:pointer;
  position:relative;overflow:hidden;
  transition:border-color .14s,transform .14s;
}
.tile-btn:hover{border-color:var(--ember);transform:translateY(-3px);box-shadow:0 8px 20px rgba(120,95,40,.16)}
.tile-btn::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ember);
  transform:scaleY(0);transform-origin:top;transition:transform .18s;
}
.tile-btn:hover::after{transform:scaleY(1)}
.tile-btn strong{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.01em;color:#5a3d1f;margin-bottom:5px}
.tile-btn small{display:block;font-family:var(--mono);font-size:11px;color:var(--ash-dim);line-height:1.5}

/* ---------- seleção de mapa ---------- */
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.map-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .14s,transform .14s,box-shadow .14s;box-shadow:0 4px 0 rgba(150,120,60,.12)}
.map-card:hover{border-color:var(--ember);transform:translateY(-3px);box-shadow:0 8px 20px rgba(120,95,40,.16)}
.map-card canvas{display:block;width:100%;background:#cfe6ad;border-bottom:1px solid var(--line)}
.map-card .body{padding:14px}
.map-card strong{display:block;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.01em;color:#5a3d1f}
.map-card .diff{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 8px}
.map-card p{font-size:12px;color:var(--ash-dim);line-height:1.6}
.map-card .best{font-family:var(--mono);font-size:11px;color:var(--brass);margin-top:10px;border-top:1px solid var(--line);padding-top:10px}

/* ---------- tabuleiro ---------- */
#stage{
  background:#cfe6ad;border:3px solid #b58a4c;border-radius:16px;
  display:block;width:100%;height:auto;cursor:crosshair;
  box-shadow:0 6px 0 rgba(120,90,45,.35),0 14px 30px rgba(80,60,25,.22);
}

/* ---------- app desktop: o endereço já vem gravado ---------- */
body.desktop #server-box{display:none}