/* STARTPAL ARCADE — shared chrome for the hub and each player's area.
   Palette lifted from RYDER so the whole site reads as one machine. */
:root{
  --bg:#0a0d11; --panel:#141a21; --panel2:#1b232c;
  --line:#2a333d; --txt:#dfe9f2; --dim:#8b99a7;
  --mint:#8ef5d0; --cyan:#7fd3ff; --gold:#ffd166; --pink:#ff8fc7; --orange:#ff9f43;
  --accent:var(--mint);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--txt);
  background:
    radial-gradient(1100px 560px at 50% -12%, #1a2330 0%, transparent 62%),
    linear-gradient(180deg,#0a0d11,#070a0d 60%);
  font-family:"Rajdhani",system-ui,sans-serif;
}
.wrap{max-width:1040px; margin:0 auto; padding:34px 20px 60px}

/* -------------------------------------------------------------- header */
header.top{display:flex; align-items:center; gap:14px; margin-bottom:6px}
header.top .mark{font-size:40px; filter:drop-shadow(0 0 10px rgba(142,245,208,.45))}
header.top h1{
  margin:0; font-size:30px; letter-spacing:.2em; line-height:1;
}
header.top h1 span{color:var(--accent)}
header.top em{
  display:block; margin-top:5px; font-style:normal; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}
.lead{
  margin:18px 0 26px; max-width:62ch; font-size:16px; line-height:1.55; color:#b9c6d3;
}
.lead b{color:var(--mint)}
.back{
  display:inline-block; margin-bottom:20px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
}
.back:hover{color:var(--mint)}

h2.sec{
  margin:34px 0 12px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:7px;
}

/* --------------------------------------------------------------- cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:12px}
.card{
  display:block; text-decoration:none; color:var(--txt);
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:8px; padding:14px 16px;
  transition:transform .08s, background .14s, border-color .14s;
}
.card:hover{background:var(--panel2); transform:translateY(-2px)}
.card .ci{font-size:28px; line-height:1; display:block; margin-bottom:8px}
.card .cn{display:block; font-size:19px; font-weight:600; letter-spacing:.03em; line-height:1.2}
.card .cd{
  display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--dim);
}
.card .cc{
  display:block; margin-top:10px; font-family:"Share Tech Mono",monospace;
  font-size:10px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase;
}
.card.empty{
  border-left-color:#2a333d; cursor:default; opacity:.72;
}
.card.empty:hover{transform:none; background:var(--panel)}

/* ------------------------------------------------------------ emptiness */
.blank{
  background:var(--panel); border:1px dashed var(--line); border-radius:8px;
  padding:26px 22px; color:var(--dim); font-size:15px; line-height:1.6;
}
.blank b{color:var(--txt)}

footer.bot{
  margin-top:46px; padding-top:14px; border-top:1px solid var(--line);
  font-family:"Share Tech Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; color:#5d6b79;
}

@media (max-width:560px){
  .wrap{padding:24px 16px 48px}
  header.top h1{font-size:23px; letter-spacing:.14em}
  header.top .mark{font-size:32px}
  .lead{font-size:15px}
}