/* IsmaGames — shared theme for every page (kid-friendly, bright & bouncy) */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html { min-height:100%; }
body {
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,214,64,0.18) 0%, transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(255,107,157,0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(79,209,232,0.15) 0%, transparent 50%),
    linear-gradient(180deg, #2a1b5e 0%, #1b1042 55%, #120a2e 100%);
  font-family: 'Baloo 2', 'Segoe UI', Arial, sans-serif;
  color:#fff;
  display:flex;
  flex-direction:column;
}

header.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(90deg, #ff6b9d, #ffb86b, #6bd6ff);
  background-size:200% 100%;
  animation: headerShift 12s ease infinite;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.35);
  flex-wrap:wrap;
  gap:10px;
  position:sticky;
  top:0;
  z-index:100;
}
@keyframes headerShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.logo {
  font-size:24px;
  font-weight:800;
  letter-spacing:0.5px;
  color:#fff;
  text-decoration:none;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  display:inline-block;
  animation: wiggle 3s ease-in-out infinite;
}
.logo span { color:#1b1042; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}
.logo-wrap { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.site-count {
  font-size:12px;
  font-weight:700;
  color:#1b1042;
  background:rgba(255,255,255,0.4);
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
}
header.site-header nav ul {
  list-style:none;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
header.site-header nav a {
  color:#1b1042;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.35);
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display:inline-block;
}
header.site-header nav a:hover {
  background:#fff;
  transform: translateY(-2px) scale(1.05);
}
header.site-header nav a.active {
  background:#1b1042;
  color:#fff;
}
header.site-header nav {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.lang-switch {
  display:flex;
  gap:4px;
  background:rgba(0,0,0,0.15);
  padding:4px;
  border-radius:999px;
}
.lang-btn {
  border:none;
  background:transparent;
  color:#1b1042;
  font-weight:800;
  font-size:12px;
  font-family:inherit;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-btn:hover { background:rgba(255,255,255,0.4); }
.lang-btn.active { background:#1b1042; color:#fff; }

main {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:36px 16px;
}

h1.page-title {
  font-size:32px;
  font-weight:800;
  margin-bottom:14px;
  text-align:center;
  color:#fff;
  text-shadow: 0 3px 0 rgba(0,0,0,0.3);
}

.hud {
  display:flex;
  gap:24px;
  margin-bottom:12px;
  font-weight:700;
  flex-wrap:wrap;
  justify-content:center;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.25);
  border-radius:999px;
  padding:8px 20px;
}

.game-wrap { position:relative; width:100%; }

canvas.game-canvas {
  width:100%;
  display:block;
  border-radius:16px;
  background:#0d2b12;
  box-shadow: 0 8px 0 rgba(0,0,0,0.3), 0 20px 50px rgba(0,0,0,0.5), 0 0 0 6px #ffd640;
  touch-action:none;
}

.btn {
  display:inline-block;
  background:linear-gradient(180deg, #ffd640, #ff9f43);
  color:#4a2600;
  border:none;
  border-radius:14px;
  padding:12px 26px;
  font-weight:800;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 5px 0 #c9760e, 0 8px 16px rgba(0,0,0,0.35);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.15s;
}
.btn:hover { filter:brightness(1.08); transform: translateY(-2px); box-shadow: 0 7px 0 #c9760e, 0 10px 18px rgba(0,0,0,0.4); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9760e, 0 4px 10px rgba(0,0,0,0.3); }

.hint {
  margin-top:14px;
  color:rgba(255,255,255,0.8);
  font-size:13px;
  text-align:center;
  max-width:560px;
}

.panel {
  background:rgba(255,255,255,0.08);
  border:3px solid rgba(255,255,255,0.25);
  border-radius:20px;
  padding:24px;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2), 0 16px 30px rgba(0,0,0,0.35);
}

.overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:rgba(20,10,40,0.72);
  backdrop-filter: blur(2px);
  border-radius:16px;
  text-align:center;
  gap:14px;
  padding:20px;
}
.overlay.hidden { display:none; }
.overlay .title { font-size:26px; font-weight:800; }

/* Big centered "Commencer" gate shown before a game's action begins */
.start-overlay {
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  background:rgba(20,10,40,0.78);
  backdrop-filter: blur(3px);
  border-radius:16px;
  text-align:center;
  padding:24px;
}
.start-overlay.hidden { display:none; }
.start-overlay .start-emoji { font-size:56px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.start-btn {
  font-size:20px;
  padding:16px 38px;
  background:linear-gradient(180deg, #6bffb0, #22c46f);
  color:#04321a;
  box-shadow: 0 6px 0 #0f7a42, 0 10px 20px rgba(0,0,0,0.4);
}
.start-btn:hover { box-shadow: 0 8px 0 #0f7a42, 0 12px 22px rgba(0,0,0,0.45); }
.start-btn:active { box-shadow: 0 2px 0 #0f7a42, 0 4px 10px rgba(0,0,0,0.3); }

/* Difficulty selector shown in the start overlay before a game begins */
.diff-select {
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  justify-content:center;
  margin:2px 0 4px;
  max-width:100%;
}
.diff-btn {
  background:rgba(255,255,255,0.12);
  border:2px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.diff-btn:hover { background:rgba(255,255,255,0.22); transform:translateY(-2px); }
.diff-btn.active { background:#ffd640; border-color:#ffd640; color:#4a2600; }

@media (max-width:480px){
  .diff-select { gap:4px; }
  .diff-btn { padding:6px 8px; font-size:11px; }
}

footer.site-footer {
  text-align:center;
  padding:18px 20px;
  background:linear-gradient(90deg, #6bd6ff, #ffb86b, #ff6b9d);
  background-size:200% 100%;
  animation: headerShift 14s ease infinite;
  color:#1b1042;
  font-weight:700;
  font-size:13px;
}

/* "More games" suggestions injected under every game page to keep players on the site */
.more-games {
  width:100%;
  max-width:1000px;
  margin:8px auto 0;
  padding:24px 20px 8px;
}
.more-games-title {
  text-align:center;
  font-size:20px;
  font-weight:800;
  margin-bottom:16px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.more-games-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:14px;
}
.mg-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.18);
  border-radius:14px;
  overflow:hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.3);
}
.mg-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color:#ffd640;
  box-shadow: 0 6px 0 rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.35);
}
.mg-thumb {
  width:100%;
  aspect-ratio: 5 / 3;
  object-fit:cover;
  display:block;
  border-bottom:2px solid rgba(255,255,255,0.18);
}
.mg-title {
  font-size:13px;
  font-weight:700;
  padding:8px 8px;
}

/* Prevent any fixed-width element from forcing horizontal scroll on small screens */
html, body { overflow-x:hidden; }
img, canvas, table { max-width:100%; }

/* Mobile tuning: tighter spacing, smaller type, full-width touch-friendly controls */
@media (max-width:640px){
  header.site-header { padding:10px 14px; justify-content:center; text-align:center; }
  .logo { font-size:20px; }
  header.site-header nav a { padding:7px 14px; font-size:13px; }
  main { padding:20px 12px; }
  h1.page-title { font-size:24px; margin-bottom:10px; }
  .hud { gap:14px; padding:6px 14px; font-size:14px; }
  .btn { padding:11px 20px; font-size:14px; }
  .start-btn { font-size:17px; padding:14px 28px; }
  .panel { padding:16px; }
  .more-games { padding:16px 12px 4px; }
  .more-games-title { font-size:17px; }
  .more-games-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap:10px; }
  .mg-title { font-size:12px; padding:6px; }
}

/* On-screen touch controls for keyboard-driven games — shown only on touch devices */
.touch-controls {
  display:none;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:20px;
  flex-wrap:wrap;
}
@media (pointer:coarse){
  .touch-controls { display:flex; }
}
.tc-dpad {
  display:grid;
  grid-template-columns: 58px 58px 58px;
  grid-template-rows: 58px 58px 58px;
  gap:6px;
}
.tc-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.35);
  border-radius:14px;
  font-size:24px;
  color:#fff;
  user-select:none;
  touch-action:none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, transform 0.1s;
}
.tc-btn.active, .tc-btn:active {
  background:#ffd640;
  color:#4a2600;
  border-color:#ffd640;
  transform:scale(0.94);
}
.tc-up { grid-column:2; grid-row:1; }
.tc-left { grid-column:1; grid-row:2; }
.tc-down { grid-column:2; grid-row:2; }
.tc-right { grid-column:3; grid-row:2; }
.tc-lr-only { grid-template-columns: 58px 58px; grid-template-rows: 58px; gap:14px; }
.tc-lr-only .tc-left { grid-column:1; grid-row:1; }
.tc-lr-only .tc-right { grid-column:2; grid-row:1; }
.tc-fire {
  width:78px;
  height:78px;
  border-radius:50%;
  font-size:22px;
  font-weight:800;
  align-self:center;
}