*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --gs: 1; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0e1a;
  color: #e5e5e5;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

#app { width: 100%; height: 100%; position: relative; }

.screen { display: none; width: 100%; height: 100%; flex-direction: column; position: absolute; inset: 0; }
.screen.active { display: flex; }

/* Menu */
#screen-menu { align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem; }
#screen-menu h1 { font-size: 1.6rem; text-align: center; letter-spacing: 0.05em; }
.suit-r { color: #e74c3c; }

.menu-items {
  display: flex; flex-direction: column; gap: 0.6rem;
  width: 100%; max-width: 420px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 75vh;
}

.game-card {
  display: flex; align-items: center; gap: 0.8rem;
  background: #1a1a2e; border-radius: 10px; padding: 0.75rem;
  cursor: pointer; transition: background 0.15s;
}
.game-card:active { transform: scale(0.97); background: #252545; }

.gc-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
  background: #0f1525; border-radius: 8px; flex-shrink: 0;
  color: #64c8ff;
}
.gc-title { font-size: 1rem; font-weight: 600; }
.gc-desc { font-size: 0.75rem; color: #888; margin-top: 0.1rem; }

/* Game header */
.game-header {
  display: flex; align-items: center;
  padding: 0.5rem 0.75rem;
  background: #111729; border-bottom: 1px solid #1e2740;
  flex-shrink: 0; gap: 0.5rem;
}
.game-title { flex: 1; font-size: 1rem; font-weight: 600; text-align: center; }
.btn-back {
  background: none; border: none; color: #64c8ff;
  font-size: 1.3rem; cursor: pointer; padding: 0.2rem;
}
.score-display { font-size: 0.8rem; color: #aaa; white-space: nowrap; }

/* Game content */
.game-content {
  flex: 1; overflow: auto; position: relative;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* Cards */
.card {
  width: calc(60px * var(--gs)); height: calc(84px * var(--gs));
  background: #fff; color: #222;
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  position: relative; flex-shrink: 0;
  transition: transform 0.12s;
}
.card-sm { width: calc(44px * var(--gs)); height: calc(62px * var(--gs)); }
.card-red { color: #d32f2f; }
.card-black { color: #222; }
.card .card-rank { font-size: calc(1rem * var(--gs)); line-height: 1; }
.card .card-suit { font-size: calc(1.2rem * var(--gs)); line-height: 1; }
.card-sm .card-rank { font-size: calc(0.75rem * var(--gs)); }
.card-sm .card-suit { font-size: calc(0.9rem * var(--gs)); }

.cc {
  position: absolute; font-size: calc(0.55rem * var(--gs)); line-height: 1.1;
  display: flex; flex-direction: column; align-items: center;
}
.card-sm .cc { font-size: calc(0.45rem * var(--gs)); }
.cc-tl { top: calc(3px * var(--gs)); left: calc(4px * var(--gs)); }
.cc-br { bottom: calc(3px * var(--gs)); right: calc(4px * var(--gs)); transform: rotate(180deg); }

.card-back-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a3a5c, #2a5a8c);
  border-radius: 5px;
}

.card.selected {
  transform: translateY(calc(-8px * var(--gs)));
  box-shadow: 0 4px 12px rgba(100,200,255,0.4);
}

/* Game area */
.game-area {
  flex: 1; display: flex; flex-direction: column;
  padding: calc(0.5rem * var(--gs)); overflow: hidden;
}

.hand-row {
  display: flex; flex-wrap: wrap; gap: calc(0.25rem * var(--gs));
  justify-content: center; align-items: center;
  min-height: calc(50px * var(--gs));
}

.msg {
  text-align: center; font-size: calc(0.9rem * var(--gs)); font-weight: 600;
  min-height: 1.3em; padding: calc(0.3rem * var(--gs));
}
.msg-win  { color: #22c55e; }
.msg-lose { color: #ef4444; }
.msg-push { color: #facc15; }
.msg-info { color: #64c8ff; }

.controls {
  display: flex; gap: calc(0.5rem * var(--gs)); flex-wrap: wrap;
  justify-content: center; padding: calc(0.5rem * var(--gs));
}

.btn {
  padding: calc(0.55rem * var(--gs)) calc(1.2rem * var(--gs)); border: none; border-radius: 7px;
  font-size: calc(0.9rem * var(--gs)); font-weight: 600; cursor: pointer;
  transition: opacity 0.15s; touch-action: manipulation;
}
.btn:active { opacity: 0.7; }
.btn:disabled { opacity: 0.3; cursor: default; }

.btn-pri {
  background: linear-gradient(135deg, #64c8ff, #a064ff); color: #fff;
}
.btn-sec { background: #2a2a3e; color: #ccc; }
.btn-ghost { background: none; color: #888; border: 1px solid #333; }

/* Solitaire / FreeCell / Spider */
.tableau-area {
  flex: 1; display: flex; gap: calc(0.3rem * var(--gs));
  justify-content: center; overflow: hidden;
  padding: calc(0.3rem * var(--gs)) 0;
}

.col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  max-width: calc(65px * var(--gs)); overflow: hidden;
}
.col-sm { max-width: calc(48px * var(--gs)); }
.col-label {
  font-size: calc(0.6rem * var(--gs)); color: #555; text-align: center;
  padding: calc(0.15rem * var(--gs)); cursor: pointer;
}

.col-stack {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; width: 100%;
  position: relative;
}

.col-card {
  width: 100%; cursor: pointer;
  margin-top: calc(-64px * var(--gs));
}
.col-card:first-child { margin-top: 0; }

.foundation-row {
  display: flex; gap: calc(0.3rem * var(--gs)); justify-content: center;
  padding: calc(0.25rem * var(--gs));
}

.stock-area {
  display: flex; gap: calc(0.3rem * var(--gs)); align-items: center;
  justify-content: center; padding: calc(0.25rem * var(--gs));
}

/* Hearts specific */
.hearts-table {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(0.3rem * var(--gs));
  flex: 1; padding: calc(0.3rem * var(--gs));
}

.hearts-pass {
  display: flex; gap: calc(0.3rem * var(--gs)); flex-wrap: wrap;
  justify-content: center; padding: calc(0.25rem * var(--gs));
}

.hearts-pass .card { cursor: pointer; }
.hearts-pass .card.selected { transform: translateY(calc(-6px * var(--gs))); }

/* Crazy 8 */
.crazy-pile { display: flex; justify-content: center; gap: calc(0.25rem * var(--gs)); padding: calc(0.25rem * var(--gs)); }

/* Memory */
.memory-grid {
  display: grid; gap: calc(0.4rem * var(--gs));
  justify-content: center; align-content: center;
  flex: 1; padding: calc(0.5rem * var(--gs));
}

.mem-card {
  width: calc(58px * var(--gs)); height: calc(78px * var(--gs)); border-radius: 6px;
  cursor: pointer; transition: transform 0.2s;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(1.8rem * var(--gs));
}
.mem-card:active { transform: scale(0.95); }
.mem-card.mem-face-down {
  background: linear-gradient(135deg, #1a3a5c, #2a5a8c);
  color: transparent;
}
.mem-card.mem-face-up {
  background: #fff; color: #d32f2f;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mem-card.mem-matched { visibility: hidden; }

/* Video Poker */
.vp-hand { display: flex; gap: calc(0.4rem * var(--gs)); justify-content: center; padding: calc(0.5rem * var(--gs)); }
.vp-card { cursor: pointer; }
.vp-card .card { width: calc(54px * var(--gs)); height: calc(76px * var(--gs)); }
.vp-card.held .card { transform: translateY(calc(-8px * var(--gs))); box-shadow: 0 4px 12px rgba(100,200,255,0.3); }
.vp-card .hold-label {
  text-align: center; font-size: calc(0.65rem * var(--gs)); color: #64c8ff;
  min-height: 1em; margin-top: calc(0.15rem * var(--gs));
}
.vp-paytable { font-size: calc(0.65rem * var(--gs)); color: #888; text-align: center; padding: calc(0.25rem * var(--gs)); line-height: 1.5; }

/* Go Fish */
.gf-opponent { text-align: center; font-size: calc(0.8rem * var(--gs)); color: #888; padding: calc(0.3rem * var(--gs)); }

/* Responsive */
@media (max-width: 400px) {
  .card { width: calc(48px * var(--gs)); height: calc(68px * var(--gs)); }
  .card-sm { width: calc(36px * var(--gs)); height: calc(50px * var(--gs)); }
  .card .card-rank { font-size: calc(0.85rem * var(--gs)); }
  .card .card-suit { font-size: calc(1rem * var(--gs)); }
  .card-sm .card-rank { font-size: calc(0.65rem * var(--gs)); }
  .card-sm .card-suit { font-size: calc(0.75rem * var(--gs)); }
  .cc { font-size: calc(0.45rem * var(--gs)); }
  .card-sm .cc { font-size: calc(0.35rem * var(--gs)); }
  .game-card { padding: 0.6rem; }
  .gc-icon { width: 36px; height: 36px; font-size: 1rem; }
  .mem-card { width: calc(46px * var(--gs)); height: calc(62px * var(--gs)); font-size: calc(1.4rem * var(--gs)); }
  .vp-card .card { width: calc(44px * var(--gs)); height: calc(62px * var(--gs)); }
  .col { max-width: calc(50px * var(--gs)); }
  .col-sm { max-width: calc(38px * var(--gs)); }
}