* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: 'Comic Sans MS', 'Trebuchet MS', 'Segoe UI', sans-serif;
  background: linear-gradient(160deg, #fff4d6, #cdeaff 60%, #d8ffe0);
  overflow-x: hidden;
}
.screen { display: none; min-height: 100vh; padding: 20px; }
.screen.active { display: block; }

.title { text-align: center; font-size: 2.4em; color: #333; margin: 10px 0 30px; text-shadow: 2px 2px 0 #fff; }
.title.small { font-size: 1.5em; margin: 0; flex: 1; }

.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.avatar-list { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; }
.avatar-btn {
  width: 160px; height: 160px; border-radius: 50%; border: 8px solid white;
  font-size: 4em; font-weight: bold; color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 0 rgba(0,0,0,0.15);
  transition: transform 0.1s;
}
.avatar-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

.me-badge {
  width: 50px; height: 50px; border-radius: 50%; color: white; font-weight: bold;
  display: flex; align-items: center; justify-content: center; font-size: 1.4em;
  border: 3px solid white; box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin-bottom: 30px; }
.game-card { background: white; border-radius: 22px; padding: 20px 10px; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,0.1); font-size: 1.1em; font-weight: bold; color: #444; }
.game-card .emoji { font-size: 2.6em; display: block; margin-bottom: 8px; }
.game-card .players-req { font-size: 0.7em; color: #888; font-weight: normal; margin-bottom: 10px; }
.game-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.game-card-btn {
  background: #ff922b; color: white; border-radius: 12px; padding: 10px 8px; font-size: 0.65em;
  cursor: pointer; box-shadow: 0 4px 0 #c76a00;
}
.game-card-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c76a00; }
.game-card-btn.bot { background: #495057; box-shadow: 0 4px 0 #212529; }

.room-panel {
  background: #fffbe8; border-radius: 20px; padding: 20px; margin-bottom: 20px;
  border: 4px dashed #ffd166;
}
.room-panel.hidden { display: none; }
.room-players { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.room-chip { padding: 8px 16px; border-radius: 30px; color: white; font-weight: bold; }
.room-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn { background: #ff922b; color: white; border: none; border-radius: 16px; padding: 16px 26px;
  font-size: 1.1em; font-weight: bold; cursor: pointer; box-shadow: 0 5px 0 #c76a00; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c76a00; }
.btn.secondary { background: #adb5bd; box-shadow: 0 5px 0 #6c757d; }
.btn-small { background: #495057; color: white; border: none; border-radius: 12px; padding: 10px 16px; font-size: 1em; cursor: pointer; }

.section-label { color: #555; margin-bottom: 8px; }
.open-rooms { display: flex; flex-direction: column; gap: 10px; }
.open-room-row {
  background: white; border-radius: 16px; padding: 14px 18px; display: flex; justify-content: space-between;
  align-items: center; box-shadow: 0 3px 0 rgba(0,0,0,0.08); cursor: pointer;
}

.game-board { display: flex; justify-content: center; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.game-message { text-align: center; font-size: 1.6em; margin-top: 20px; font-weight: bold; color: #333; min-height: 1.4em; }

/* Tic Tac Toe / Connect4 shared grid */
.grid { display: grid; gap: 8px; }
.cell {
  background: white; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 2.4em; box-shadow: 0 4px 0 rgba(0,0,0,0.12); cursor: pointer;
}
.cell:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.ttt-grid { grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px); }
.c4-grid { grid-template-columns: repeat(7, 55px); grid-template-rows: repeat(6, 55px); }
.c4-col-btn { width: 55px; height: 40px; cursor: pointer; background: #4dabf7; border-radius: 8px 8px 0 0; }

.rps-row, .simon-grid, .reaction-wrap { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.rps-btn { font-size: 3.5em; background: white; border-radius: 20px; padding: 20px 30px; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,0.12); }
.rps-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.rps-btn.chosen { outline: 5px solid #ffd166; }

.simon-grid { display: grid; grid-template-columns: repeat(2, 140px); grid-template-rows: repeat(2, 140px); gap: 10px; }
.simon-btn { border-radius: 20px; cursor: pointer; opacity: 0.55; transition: opacity 0.1s, transform 0.1s; }
.simon-btn.flash { opacity: 1; transform: scale(1.05); }
.simon-btn.red { background: #ff6b6b; } .simon-btn.blue { background: #4dabf7; }
.simon-btn.yellow { background: #ffd43b; } .simon-btn.green { background: #51cf66; }

.reaction-btn {
  width: 260px; height: 260px; border-radius: 50%; background: #ced4da; color: white;
  font-size: 1.6em; font-weight: bold; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,0.15);
}
.reaction-btn.go { background: #51cf66; box-shadow: 0 8px 0 #2f9e44; }
.reaction-btn.early { background: #ff6b6b; }

.memory-grid { display: grid; gap: 8px; }
.memory-card {
  width: 70px; height: 70px; border-radius: 12px; background: #748ffc; display: flex;
  align-items: center; justify-content: center; font-size: 2em; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.memory-card.revealed { background: #d3f9d8; box-shadow: none; cursor: default; }
.memory-card.flipped { background: white; box-shadow: none; }

.scoreboard { display: flex; gap: 14px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.score-chip { padding: 8px 16px; border-radius: 30px; color: white; font-weight: bold; }

/* Krokodil Bijt */
.croc-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.croc-tooth {
  width: 60px; height: 60px; border-radius: 12px; background: #ffe066; font-size: 1.8em;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.croc-tooth:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.croc-tooth.pressed { background: #e9ecef; cursor: default; box-shadow: none; }
.croc-tooth.bitten { background: #ff6b6b; }

/* Tik de Mol */
.mole-grid { grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px); }
.mole-hole {
  width: 90px; height: 90px; border-radius: 50%; background: #8d6e4f; font-size: 2.2em;
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.mole-hole.up { background: #c99a5b; cursor: pointer; }

/* Ganzenbord */
.goose-grid { grid-template-columns: repeat(5, 62px); grid-template-rows: repeat(4, 62px); }
.goose-tile {
  width: 62px; height: 62px; border-radius: 10px; background: white; position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1); font-size: 0.85em;
}
.goose-tile-label { position: absolute; top: 2px; left: 4px; font-size: 0.7em; color: #999; }
.goose-token {
  width: 24px; height: 24px; border-radius: 50%; color: white; font-weight: bold;
  display: flex; align-items: center; justify-content: center; font-size: 0.8em;
}
.goose-roll-btn { margin: 16px auto 0; width: fit-content; }

/* Zeeslag */
.battleship-wrap { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.battleship-box { text-align: center; }
.battleship-grid { grid-template-columns: repeat(5, 55px); grid-template-rows: repeat(5, 55px); }
.battleship-cell { font-size: 1.6em; }

/* Boggle */
.boggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boggle-preview {
  font-size: 1.8em; font-weight: bold; letter-spacing: 4px; min-height: 1.4em; color: #333;
  background: white; border-radius: 14px; padding: 8px 24px; box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
.boggle-grid { grid-template-columns: repeat(4, 75px); grid-template-rows: repeat(4, 75px); }
.boggle-tile {
  width: 75px; height: 75px; border-radius: 14px; background: white; font-size: 1.8em; font-weight: bold;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12); color: #444;
}
.boggle-tile.selected { background: #ffd166; }
.boggle-actions { display: flex; gap: 12px; }
.boggle-words { font-size: 0.95em; color: #555; text-align: center; max-width: 500px; }

/* Dieren Spotten */
.spotit-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.spotit-round { font-size: 1.1em; color: #666; font-weight: bold; }
.spotit-card {
  display: grid; grid-template-columns: repeat(4, 70px); gap: 8px; justify-content: center;
  background: white; border-radius: 20px; padding: 16px; margin-bottom: 10px;
  box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
.spotit-tile {
  width: 70px; height: 70px; border-radius: 14px; background: #f1f3f5; font-size: 2.2em;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.spotit-tile:active { transform: scale(0.95); }
.spotit-tile.correct { background: #b2f2bb; }

@media (max-width: 600px) {
  .title { font-size: 1.7em; }
  .avatar-btn { width: 120px; height: 120px; font-size: 3em; }
  .ttt-grid { grid-template-columns: repeat(3, 78px); grid-template-rows: repeat(3, 78px); }
  .c4-grid { grid-template-columns: repeat(7, 42px); grid-template-rows: repeat(6, 42px); }
  .simon-grid { grid-template-columns: repeat(2, 110px); grid-template-rows: repeat(2, 110px); }
  .reaction-btn { width: 200px; height: 200px; }
  .mole-grid { grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); }
  .mole-hole { width: 70px; height: 70px; }
  .goose-grid { grid-template-columns: repeat(5, 48px); grid-template-rows: repeat(4, 48px); }
  .goose-tile { width: 48px; height: 48px; }
  .battleship-grid { grid-template-columns: repeat(5, 44px); grid-template-rows: repeat(5, 44px); }
  .boggle-grid { grid-template-columns: repeat(4, 62px); grid-template-rows: repeat(4, 62px); }
  .boggle-tile { width: 62px; height: 62px; font-size: 1.4em; }
  .spotit-card { grid-template-columns: repeat(4, 56px); }
  .spotit-tile { width: 56px; height: 56px; font-size: 1.7em; }
}