/* enter.css — nakładka wejścia do gry (game-enter.js). Tokeny UI 2.0. */
#join-overlay { background: #07070f !important; }                 /* 2026-09-13: pełne krycie — nic spod spodu nie prześwituje */
.enter-box { width: min(640px, 94vw); background: var(--sw-panel, #11141C); border: 1px solid var(--sw-ash, #2A2F3A); border-top: 1px solid var(--sw-gold-dim, #8A7220);
  border-radius: var(--sw-radius, 2px); padding: 22px 26px 14px; color: var(--sw-bone, #C8D0D8); font-family: var(--sw-font-body, 'IBM Plex Sans', system-ui, sans-serif); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.enter-title { margin: 0 0 6px; font: 600 15px/1.2 var(--sw-font-display, Cinzel, serif); letter-spacing: .18em; color: var(--sw-bone); }
.enter-title span { color: var(--sw-gold, #C9A227); }
.enter-status { font: 11px/1.4 var(--sw-font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--sw-bone-dim, #7A828E); margin-bottom: 12px; }
.enter-body { display: flex; flex-direction: column; gap: 10px; }
.enter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.enter-wait { padding: 18px 0; color: var(--sw-bone-dim); font-size: 13px; }
.enter-err { margin-top: 8px; color: var(--sw-danger, #c0392b); font: 12px var(--sw-font-mono, monospace); }
.enter-foot { display: flex; justify-content: space-between; margin-top: 14px; font: 10px var(--sw-font-mono, monospace); color: var(--sw-bone-faint, #4A515C); }
.enter-factions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.enter-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--sw-well, #0D0F16); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); cursor: pointer; text-align: center; }
.enter-card .g { font-size: 20px; } .enter-card b { font: 600 12px var(--sw-font-display, serif); letter-spacing: .06em; } .enter-card small { font-size: 10px; color: var(--sw-bone-dim); }
.enter-card.sel.f-luminaris { border-color: var(--sw-luminaris, #E8C55A); box-shadow: inset 0 0 0 1px var(--sw-luminaris, #E8C55A); }
.enter-card.sel.f-entropia  { border-color: var(--sw-entropia, #7A3FF2); box-shadow: inset 0 0 0 1px var(--sw-entropia, #7A3FF2); }
.enter-card.sel.f-shadow    { border-color: var(--sw-shadow, #4A7A8A);   box-shadow: inset 0 0 0 1px var(--sw-shadow, #4A7A8A); }
.enter-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.enter-class { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); cursor: pointer; text-align: left; }
.enter-class b { font-size: 12px; } .enter-class small { font-size: 10px; color: var(--sw-bone-dim); }
.enter-class.sel { border-color: var(--sw-gold); background: var(--sw-gold-glow, rgba(201,162,39,.18)); }
.enter-mini { flex: 1; padding: 6px; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone-dim); cursor: pointer; font-size: 12px; }
.enter-mini.sel { color: var(--sw-bone); border-color: var(--sw-gold-dim); }
#enter-name { flex: 1; padding: 9px 10px; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); font: 14px var(--sw-font-body); }
#enter-name:focus { outline: 0; border-color: var(--sw-gold-dim); }
.enter-btn { padding: 10px 18px; background: transparent; border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); color: var(--sw-bone); font: 600 12px var(--sw-font-display, serif); letter-spacing: .14em; cursor: pointer; }
.enter-btn.primary { flex: 1; border-color: var(--sw-gold); color: var(--sw-gold); background: var(--sw-gold-glow, rgba(201,162,39,.18)); }
.enter-btn:disabled { opacity: .4; cursor: default; }
.enter-link { background: none; border: 0; color: var(--sw-bone-faint); font: 11px var(--sw-font-mono, monospace); cursor: pointer; text-decoration: underline dotted; }
.enter-char { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--sw-well); border: 1px solid var(--sw-ash); border-radius: var(--sw-radius); }
.enter-char .g { font-size: 26px; } .enter-char b { display: block; font: 600 15px var(--sw-font-display, serif); letter-spacing: .06em; } .enter-char small { color: var(--sw-bone-dim); font-size: 11px; }
.enter-char.f-luminaris .g { color: var(--sw-luminaris); } .enter-char.f-entropia .g { color: var(--sw-entropia); } .enter-char.f-shadow .g { color: var(--sw-shadow); }
.enter-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font: 13px var(--sw-font-mono, monospace); }
.enter-ms li { display: flex; gap: 10px; align-items: baseline; color: var(--sw-bone-dim); } .enter-ms li span { width: 14px; color: var(--sw-bone-faint); }
.enter-ms li.ok { color: var(--sw-bone); } .enter-ms li.ok span { color: var(--sw-gold); } .enter-ms li small { color: var(--sw-bone-faint); }
@media (max-width: 560px) { .enter-factions, .enter-classes { grid-template-columns: 1fr 1fr; } }