/* ═══════════════════════════════════════════════════════════════
   fw.css — Base styles for the browser game framework
   Green felt / casino aesthetic. Override with game.css per game.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (theme tokens) ─────────────────────── */
:root {
  --felt:   #1a4a2a;        /* table felt green */
  --felt2:  #143d22;        /* darker felt */
  --gold:   #d4a820;        /* accent gold */
  --gold2:  #f0c840;        /* hover gold */
  --cream:  #f4eedc;        /* warm white text */
  --red:    #c0392b;        /* danger / loss */
  --dark:   #0a1510;        /* deepest background */
  --dark2:  #0a2010;        /* slightly lighter dark */
  --blue:   #7ec8e3;        /* score / info accent */
}

/* ── Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dark);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
}

/* ── Screen system ─────────────────────────────────────────────── */
/* Each screen is a fixed full-screen div. Only .on is visible.    */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  background: var(--dark);
}
.screen.on {
  display: flex;
}

/* ── Home screen ───────────────────────────────────────────────── */
#sHome {
  background: radial-gradient(ellipse at 50% 35%, #1e5c2e 0%, #0a2010 55%, #050d07 100%);
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 32px 20px 28px;
  overflow-y: auto;
}

.fw-logo {
  text-align: center;
  margin-bottom: 28px;
}
.fw-logo-box {
  width: 80px;
  height: 80px;
  background: var(--felt);
  border-radius: 18px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 8px 32px #0008;
}
.fw-logo h1 {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -1px;
  line-height: 1;
}
.fw-logo p {
  font-size: 11px;
  color: #6a8a70;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Home mode cards */
.fw-home-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.fw-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform .12s, filter .12s;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.12);
}
.fw-card:active {
  transform: scale(.97);
  filter: brightness(.9);
}
.fw-card.solo {
  background: linear-gradient(120deg, rgba(212,168,32,.18) 0%, rgba(212,168,32,.07) 100%);
  border-color: rgba(212,168,32,.35);
}
.fw-card.online {
  background: linear-gradient(120deg, rgba(74,158,90,.22) 0%, rgba(74,158,90,.07) 100%);
  border-color: rgba(74,158,90,.45);
}
.fw-card.score {
  background: linear-gradient(120deg, rgba(126,200,227,.18) 0%, rgba(126,200,227,.07) 100%);
  border-color: rgba(126,200,227,.35);
}
.fw-card-emoji {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.fw-card-text { flex: 1; }
.fw-card-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3px;
}
.fw-card.solo   .fw-card-title { color: #e8c84a; }
.fw-card.online .fw-card-title { color: #7ed898; }
.fw-card.score  .fw-card-title { color: #a8dff0; }
.fw-card-sub {
  font-size: 12px;
  color: rgba(255,255,255,.42);
  font-weight: 400;
  line-height: 1.4;
}
.fw-card-arrow {
  font-size: 20px;
  color: rgba(255,255,255,.2);
  flex-shrink: 0;
  margin-left: 4px;
}

/* Home secondary buttons */
.fw-home-sec {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  max-width: 380px;
}
.fw-home-sec-btn {
  flex: 1;
  padding: 11px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  color: rgba(255,255,255,.38);
  font-size: 13px;
  transition: background .12s;
}
.fw-home-sec-btn:active {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}

/* ── Generic modal button (mbtn) ───────────────────────────────── */
.mbtn {
  width: 100%;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin: 6px 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  transition: background .15s;
}
.mbtn:active { background: rgba(255,255,255,.12); }
.mbtn.gold { background: var(--gold); border-color: var(--gold); color: #0a0a00; font-weight: 700; }
.mbtn.gold:active { background: var(--gold2); }
.mbtn-icon { font-size: 24px; min-width: 30px; text-align: center; }
.mbtn-label { flex: 1; }
.mbtn-sub { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 400; margin-top: 2px; }
.mbtn.gold .mbtn-sub { color: rgba(0,0,0,.4); }

/* ── Top bar (used by lobby, join, online screens) ─────────────── */
.fw-top {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0d1f14;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.fw-top h2 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
}
.fw-back {
  background: none;
  border: none;
  color: #6a8a70;
  font-size: 26px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

/* ── Form fields ───────────────────────────────────────────────── */
.fw-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  overflow-y: auto;
}
.fw-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a8a70;
  margin-bottom: 8px;
}
.fw-field input[type="text"] {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--cream);
  font-size: 16px;
  outline: none;
}
.fw-field input[type="text"]:focus {
  border-color: var(--gold);
}

/* ── Online mode choice screen ─────────────────────────────────── */
#sOnline {
  background: radial-gradient(ellipse at 50% 30%, #0d3020 0%, #050d07 100%);
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

/* ── Lobby screen ──────────────────────────────────────────────── */
#sLobby, #sJoin {
  background: radial-gradient(ellipse at 50% 35%, #1e5c2e 0%, #0a2010 55%, #050d07 100%);
  overflow: hidden;
}

.lobby-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  overflow-y: auto;
}

/* Room code display block */
.lobby-code-block {
  text-align: center;
  background: rgba(0,0,0,.4);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 20px;
}
.lobby-code-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6a8a70;
  margin-bottom: 8px;
}
.lobby-code-val {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 6px;
  line-height: 1;
}
.lobby-status {
  font-size: 13px;
  color: #9ab0a0;
  text-align: center;
  margin-top: 8px;
}

/* Share buttons row */
.lobby-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.share-btn:active { background: rgba(255,255,255,.14); }
.share-btn.wa  { background: rgba(37,211,102,.15); border-color: #25d166; color: #25d166; }
.share-btn.sig { background: rgba(63,131,248,.15); border-color: #3f83f8; color: #8ab4f8; }

/* QR code container */
.lobby-qr {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.lobby-qr canvas, .lobby-qr img {
  border-radius: 10px;
}

/* Player list */
.lobby-players-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a8a70;
}
.lobby-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lobby-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 16px;
}
.lobby-player.lobby-ai { opacity: .55; }
.lobby-av { font-size: 24px; }
.lobby-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--cream); }
.lobby-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--gold);
  color: #080800;
  font-weight: 700;
}

/* AI fill-in option */
.lobby-ai-option {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.lobby-ai-option label {
  color: #ddd;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

/* Sticky footer with start button */
.lobby-footer {
  flex-shrink: 0;
  padding: 10px 20px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(10,32,16,0) 0%, rgba(10,32,16,.97) 30%);
}
.lobby-start {
  width: 100%;
  padding: 18px;
  background: var(--gold);
  border: none;
  border-radius: 14px;
  color: #0a0800;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
}
.lobby-start:disabled { opacity: .4; pointer-events: none; }
.lobby-start:active   { background: var(--gold2); }

/* ── Join screen ───────────────────────────────────────────────── */
.join-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.join-code-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 18px;
  color: var(--gold);
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 8px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}
.join-code-input:focus { border-color: var(--gold); }
.join-btn {
  width: 100%;
  padding: 18px;
  background: var(--gold);
  border: none;
  border-radius: 14px;
  color: #0a0800;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 900;
}
.join-btn:active { background: var(--gold2); }

/* ── Game screen (shell — game-ui.js fills the interior) ───────── */
#sGame {
  background: radial-gradient(ellipse at 50% 40%, #1e5c2e 0%, #0c2a15 70%, #050d07 100%);
  overflow: hidden;
  position: relative;
}
#sGame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 5px,
    rgba(0,0,0,.04) 5px, rgba(0,0,0,.04) 6px
  );
}
/* The #gameArea div inside #sGame is where game-ui.js renders */
#gameArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ── Score screen ──────────────────────────────────────────────── */
#sScore {
  background: radial-gradient(ellipse at 50% 30%, #1e3a5c 0%, #0a1525 55%, #050a0f 100%);
  overflow-y: auto;
}
.score-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.score-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--blue);
  font-weight: 700;
  flex: 1;
}
.score-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.score-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 14px;
}
.score-player-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}
.score-player-pts {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--gold);
}

/* ── Toast ─────────────────────────────────────────────────────── */
#fwToast {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,20,10,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  z-index: 400;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 88vw;
  text-align: center;
}
#fwToast.on { opacity: 1; }

/* ── Announcement overlay ──────────────────────────────────────── */
#fwAnnounce {
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) scale(.88);
  background: rgba(6,18,10,.97);
  border: 2px solid var(--gold);
  border-radius: 22px;
  padding: 18px 38px 16px;
  z-index: 350;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  min-width: 180px;
  max-width: 88vw;
}
#fwAnnounce.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.fw-ann-head {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: .5px;
}
.fw-ann-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #9ab0a0;
  margin-top: 5px;
  min-height: 18px;
}

/* ── Reconnect overlay ─────────────────────────────────────────── */
#fwReconnectOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.75);
  z-index: 600;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--cream);
  font-family: 'Fraunces', serif;
}
#fwReconnectOverlay.on { display: flex; }
.fw-reconnect-spinner {
  font-size: 42px;
  animation: fwSpin 1.2s linear infinite;
}
@keyframes fwSpin { to { transform: rotate(360deg); } }

/* ── Chat ──────────────────────────────────────────────────────── */
#fwChatBubble {
  position: absolute;
  bottom: 88px;
  right: 12px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212,168,32,.18);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 20px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
#fwChatBubble:active { background: rgba(212,168,32,.35); }

#fwChatBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  display: none;
}

#fwChatPanel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 220;
  background: #0c2018;
  border-top: 2px solid rgba(212,168,32,.3);
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: height .25s cubic-bezier(.4,0,.2,1);
}
#fwChatPanel.open { height: 52vh; }

.fw-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.fw-chat-title {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--gold);
  font-weight: 700;
}
.fw-chat-close {
  background: none;
  border: none;
  color: #6a8a70;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

#fwChatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
#fwChatMessages::-webkit-scrollbar { width: 4px; }
#fwChatMessages::-webkit-scrollbar-track { background: transparent; }
#fwChatMessages::-webkit-scrollbar-thumb { background: rgba(212,168,32,.25); border-radius: 2px; }

.fw-chat-msg {
  max-width: 85%;
  word-break: break-word;
  line-height: 1.4;
}
.fw-chat-msg.from-me {
  align-self: flex-end;
  background: rgba(212,168,32,.18);
  border: 1px solid rgba(212,168,32,.3);
  border-radius: 14px 14px 4px 14px;
  padding: 7px 12px;
}
.fw-chat-msg.from-other {
  align-self: flex-start;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px 14px 14px 4px;
  padding: 7px 12px;
}
.fw-chat-msg.system {
  align-self: center;
  font-size: 11px;
  color: #6a8a70;
  background: none;
  border: none;
  padding: 2px 0;
}
.fw-chat-sender { font-size: 10px; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.fw-chat-text   { font-size: 13px; color: var(--cream); }

.fw-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
#fwChatInput {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--cream);
  font-size: 14px;
  outline: none;
}
#fwChatInput::placeholder { color: #4a6a50; }
#fwChatInput:focus { border-color: rgba(212,168,32,.5); }
#fwChatSend {
  background: var(--gold);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: #0a1510;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
#fwChatSend:active { background: var(--gold2); }

/* Chat popup preview (shown above chat bubble) */
#fwChatPopup {
  position: absolute;
  bottom: 140px;
  right: 10px;
  z-index: 210;
  max-width: 220px;
  background: #0c2018;
  border: 1px solid rgba(212,168,32,.45);
  border-radius: 12px;
  padding: 8px 12px;
  pointer-events: none;
  transition: opacity .3s;
  opacity: 0;
}
.fw-chat-popup-name { font-size: 10px; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.fw-chat-popup-text { font-size: 13px; color: var(--cream); }

/* ── Retry button (connection errors) ──────────────────────────── */
#fwRetryBtn {
  display: none;
  margin-top: 12px;
  width: 100%;
  padding: 14px;
  background: var(--gold);
  border: none;
  border-radius: 12px;
  color: #0a0800;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
#fwRetryBtn:active { background: var(--gold2); }

/* ── Responsive: small phones ──────────────────────────────────── */
@media (max-height: 700px) {
  .lobby-code-val       { font-size: 36px; letter-spacing: 3px; }
  .lobby-code-block     { padding: 14px 16px; }
  .lobby-qr             { display: none; }
  .lobby-body           { gap: 12px; }
}
@media (max-height: 600px) {
  .lobby-code-val       { font-size: 30px; letter-spacing: 2px; }
  .lobby-body           { gap: 10px; }
}

/* ── Bounce animation (re-usable) ──────────────────────────────── */
@keyframes fwBounce {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.18); }
  70%       { transform: scale(.94); }
}
.fw-bounce { animation: fwBounce .35s ease; }