/* Every game's way in, the same everywhere (shared/entrance.js). Everything is under .ent-. */
.ent { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.ent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ent-names { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ent-kind { font: 800 10.5px var(--display); letter-spacing: .26em; color: var(--cyan); }
.ent-name { margin: 0; font: 900 min(84px, 13cqi)/.9 var(--display); /* as big as the card allows, so a long name still fits beside the ? */ letter-spacing: .04em; color: transparent;
  background: linear-gradient(95deg, #8ff4ff, var(--cyan) 35%, #d59bff 65%, var(--pink)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(255, 61, 242, .35)); }
.ent-name.ent-sub { font-size: clamp(22px, 3vw, 30px); line-height: 1; align-self: center; color: #fff; background: none; filter: none; text-shadow: 0 0 24px rgba(157, 123, 255, .5); }
.ent-help { flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; font: 900 22px/1 var(--display); color: var(--cyan);
  background: rgba(10, 10, 30, .5); border: 1px solid var(--line-hi); transition: border-color .2s, box-shadow .2s, transform .15s; }
.ent-help:hover { border-color: var(--cyan); box-shadow: 0 0 22px rgba(34, 230, 255, .35); transform: translateY(-1px); }
.ent-back { flex-shrink: 0; }
.ent-blurb { margin: 0; color: var(--soft); font-size: 13.5px; line-height: 1.7; }
.ent-off { margin: 0; font-size: 12.5px; color: var(--gold, #ffd76a); }
.ent-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ent-actions .btn { width: 100%; justify-content: center; }
/* the open lobby: host · game setup · stake · players · ping · JOIN */
.ent-lobby { display: flex; flex-direction: column; gap: 8px; }
.ent-lrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(70px, .7fr) 64px 58px 92px; /* the JOIN column has a set width, so the headings line up with the rows */ gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(8, 8, 26, .55); border: 1px solid var(--line); }
.ent-lrow .btn { padding: 11px 18px; }
.ent-lhead { background: none; border: 0; padding: 0 12px; font: 800 9px var(--display); letter-spacing: .16em; color: var(--dim); }
.ent-lhost { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ent-lhost b { font: 800 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-lpic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 900 14px var(--display); color: #050414; object-fit: cover; image-rendering: pixelated; }
.ent-lsetup { font-size: 12px; color: var(--soft); }
.ent-lstake { font: 800 13px var(--mono); color: var(--gold, #ffd76a); white-space: nowrap; }
.ent-lstake small { display: block; font: 600 10.5px var(--mono); color: var(--dim); }
.ent-lplayers { font: 800 13px var(--mono); text-align: center; }
.ent-lping { font: 800 13px var(--mono); text-align: center; color: var(--dim); white-space: nowrap; }
.ent-lping small { font: 600 10px var(--mono); margin-left: 1px; color: var(--dim); }
.ent-lping.good { color: var(--ok); } .ent-lping.fair { color: var(--gold, #ffd76a); } .ent-lping.poor { color: var(--red, #ff2e4d); }
@media (max-width: 600px) {
  .ent-lhead { display: none; }
  .ent-lrow { grid-template-columns: minmax(0, 1fr) auto; }
  .ent-lsetup, .ent-lstake, .ent-lplayers, .ent-lping { grid-column: 1; }
  .ent-lplayers, .ent-lping { text-align: left; } /* no headings on a phone, so each says what it is */
  .ent-lplayers::before { content: 'PLAYERS '; } .ent-lping::before { content: 'PING '; }
  .ent-lplayers::before, .ent-lping::before { font: 800 9px var(--display); letter-spacing: .16em; color: var(--dim); }
  .ent-lrow .btn { grid-column: 2; grid-row: 1 / span 5; }
}
.ent-live { font-style: normal; color: var(--ok); }
.ent-empty { padding: 26px 16px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.7; border: 1px dashed var(--line-hi); border-radius: 14px; }
/* a game's options (HOST A GAME, a game room's settings): a label, then a row of buttons; side by side where there's room */
.ent-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 14px 32px; }
.ent-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; }
.ent-row > span { font: 700 10px var(--display); letter-spacing: .16em; color: var(--dim); }
.ent-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ent-seg button { font: 700 11px var(--display); letter-spacing: .12em; color: var(--soft); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 10, 30, .55); cursor: pointer; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; }
.ent-seg button:hover { color: var(--ink); border-color: var(--line-hi); }
.ent-seg button.on { color: #04040d; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(34, 230, 255, .45); }
.ent-seg button.on:hover:not(:disabled) { color: #fff; background: rgba(34, 230, 255, .22); border-color: var(--cyan); } /* the chosen one, hovered: white text, every game */
.ent-seg button:disabled { opacity: .4; cursor: not-allowed; }
.ent-go { width: 100%; justify-content: center; margin-top: 4px; }
@media (max-width: 560px) { .ent-row { grid-template-columns: 1fr; gap: 6px; } }