/* ==================================================================
   games.css — the pieces the home page and the poker page share.

   Two groups. The account panel, whose markup used to live inside the
   blackjack table and therefore inside table.css; and the game cards
   and beta gate, which are new. Everything leans on the tokens and the
   .btn / .modal rules already in base.css, so nothing is redefined
   here that base.css owns.
================================================================== */

/* ---------- the account panel ---------- */

.mod{border:1.5px solid var(--ink); background:var(--sheet); padding:14px 16px; margin-top:14px}
.mod h3{font-size:12px; font-weight:700; margin-bottom:8px; letter-spacing:.06em; text-transform:uppercase}

.mod table.data{width:100%; border-collapse:collapse; font-size:14px}
.mod table.data td{padding:5px 0; border-bottom:1px dotted rgba(0,0,0,.25)}
.mod table.data td:last-child{text-align:right; font-weight:600}
.mod table.data tr:last-child td{border-bottom:none}

.note-sm{font-size:13px; color:var(--grey); line-height:1.5; margin:8px 0}
.note-sm.err{color:var(--red)}
.note-sm a{color:inherit; text-decoration:underline; text-underline-offset:3px}

.claim{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.claim input, .restore input, .keyfield{
  flex:1 1 200px; min-width:0; font:inherit; font-size:14px;
  border:1.5px solid var(--ink); background:#fff; padding:9px 10px; min-height:var(--tap);
}
.keyfield{flex-basis:100%; width:100%; font-size:12px; margin:6px 0 8px}

.act{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--ink); background:var(--sheet-2);
  padding:9px 18px; min-height:var(--tap);
}
.act:hover:not(:disabled){background:var(--ink); color:var(--sheet)}
.act:disabled{opacity:.28; cursor:not-allowed}

.link{
  font:inherit; font-size:13px; color:var(--grey); cursor:pointer;
  background:none; border:none; padding:6px 0;
  text-decoration:underline; text-underline-offset:3px;
}
.link:hover{color:var(--red)}

.board-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px}
.restore{margin-top:12px; font-size:13px; color:var(--grey)}
.restore summary{cursor:pointer; padding:5px 0}
.restore input{margin:7px 0}

/* ---------- the two game cards ---------- */

.gamecards{display:flex; flex-wrap:wrap; gap:0; border:1.5px solid var(--ink); background:var(--sheet)}
.gamecard{
  flex:1 1 280px; padding:20px 22px 22px;
  border-right:1px solid var(--ink);
  display:flex; flex-direction:column; align-items:flex-start;
}
.gamecard:last-child{border-right:none}
.gamecard h3{font-size:21px; letter-spacing:-.02em; margin-bottom:8px}
.gamecard p{font-size:14px; line-height:1.55; margin-bottom:16px}
.gamecard .btn, .gamecard .act{margin-top:auto}
.gamecard .note-sm{margin:12px 0 0}

.tag{
  display:inline-block; vertical-align:middle; margin-left:8px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--red); color:var(--red); padding:1px 7px;
}

/* ---------- the beta gate ---------- */

.gate, .choose{padding:44px 0 30px; max-width:640px}
.choose{max-width:none}
.gate h1, .choose h1{font-size:clamp(24px,4vw,38px); letter-spacing:-.035em; margin-bottom:12px}
.gate .lede{margin-bottom:20px}
.gate .claim{max-width:420px}

@media (max-width:640px){
  .gamecard{flex:1 1 100%; border-right:none; border-bottom:1px solid var(--ink)}
  .gamecard:last-child{border-bottom:none}
  .claim input, .claim .act{flex:1 1 100%}
}