* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
  color: #333;
  overscroll-behavior: none;
}

/* Chrome screens (join / my games / lobby / game over) sit in a white card. */
#app { max-width: 760px; margin: 16px auto; padding: 22px; background: #fff;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
/* The game screen goes full-bleed (its own felt fills the space). */
#app.full { background: transparent; box-shadow: none; padding: 8px; max-width: 1000px; }
#app.full h1 { color: #fff; }

h1 { color: #667eea; font-size: 24px; margin: 0 0 12px; }
h3 { color: #333; font-size: 16px; margin: 14px 0 6px; }

button { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 12px 18px;
  color: #fff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 44px; cursor: pointer; }
button:active { background: linear-gradient(135deg, #5566cc 0%, #653a8a 100%); }
button.secondary { background: #eef0fb; color: #4a4a8a; }
button:disabled { background: #bbb; color: #fff; }

input { font: inherit; padding: 12px; border-radius: 8px; border: 2px solid #e0e0e0;
  background: #fff; color: #333; width: 100%; }
input:focus { outline: none; border-color: #667eea; }

.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #e3f2fd; color: #0d47a1; border: 1px solid #1976d2; padding: 10px 16px;
  border-radius: 8px; z-index: 50; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.toast.error { background: #ffebee; color: #b71c1c; border-color: #c62828; }
.toast.success { background: #e8f5e9; color: #1b5e20; border-color: #2e7d32; }

.hidden { display: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* My Games room cards */
.listcard { border: 1px solid #e6e6f0; background: #f7f8ff; border-radius: 10px; padding: 12px; }
.gamesel { font: inherit; padding: 12px; border-radius: 8px; border: 2px solid #e0e0e0; background: #fff; color: #333; width: 100%; }