/* =====================================================
   JEUX TOURAK — Mobile App Experience v4 (Premium)
   App-like UI, fullscreen games, native gestures
   Dual targeting: media query OR .is-mobile class (JS fallback)
   ===================================================== */

/* Belt-and-braces: also apply if JS detected mobile (html.is-mobile) */
html.is-mobile .nav-toggle,
html.is-mobile .nav-main { display: none !important; }
html.is-mobile .footer { display: none !important; }
html.is-mobile body { padding-bottom: 80px; }
html.is-mobile .tabbar { display: flex !important; }
html.is-mobile .games-grid { grid-template-columns: repeat(2, 1fr) !important; }
html.is-mobile .topbar .nav-user .btn-ghost,
html.is-mobile .topbar .nav-user .btn-primary { display: none !important; }
html.is-mobile .game-wrap { grid-template-columns: 1fr !important; }
html.is-mobile body.playing .topbar,
html.is-mobile body.playing .tabbar,
html.is-mobile body.playing .footer { display: none !important; }

/* ===== WebView (APK) mode — even more compact ===== */
html.in-webview .topbar { padding-top: 0 !important; }
html.in-webview .footer { display: none !important; }
html.in-webview body { padding-bottom: 0 !important; }
html.in-webview .install-banner { display: none !important; }
html.in-webview body.playing main { padding: 0 !important; margin: 0 !important; }
html.in-webview body.playing .game-canvas-box { border-radius: 0 !important; padding: 0 !important; }

/* ===== Game canvas fullscreen on mobile playing ===== */
html.is-mobile body.playing main { padding: 0; }
html.is-mobile body.playing .bread,
html.is-mobile body.playing .game-intro,
html.is-mobile body.playing aside.game-side { display: none !important; }
html.is-mobile body.playing .section-head { padding: .8rem 1rem .4rem; margin: 0; }
html.is-mobile body.playing .game-wrap > div:first-child { margin: 0; }
html.is-mobile body.playing .game-canvas-box {
  background: var(--bg-0);
  min-height: calc(100vh - 60px);
  padding: 0;
  border-radius: 0;
}
html.is-mobile body.playing canvas {
  max-width: 100vw !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  :root {
    --header-h: 56px;
    --tabbar-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
  }

  html, body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
  input, textarea, [contenteditable] { user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }

  body {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
    background: var(--bg-1);
    background-image: none;
  }

  /* ====== App Header (slim, app-style) ====== */
  .topbar {
    height: calc(var(--header-h) + var(--safe-top));
    padding: var(--safe-top) 1rem 0;
    background: rgba(10,14,39,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid var(--line);
    gap: 0;
    justify-content: space-between;
  }
  .topbar .logo {
    font-size: 1rem;
    flex: 0 0 auto;
    gap: .4rem;
  }
  .topbar .logo span:not(.logo-icon) { display: inline; font-size: .9rem; letter-spacing: .03em; }
  .nav-main { display: none !important; }
  .nav-toggle { display: none !important; }
  .nav-user .btn-ghost,
  .nav-user .btn-primary { display: none; }
  .nav-user .user-chip {
    padding: .25rem .55rem;
    background: rgba(99,102,241,0.18);
    border: 0;
    font-size: .8rem;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
  }
  .nav-user .user-chip .user-name { font-size: .8rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-user .user-chip .btn-icon { display: none; }
  .nav-user .user-chip .user-points { color: var(--gold); font-size: .8rem; }

  /* ====== Bottom Tab Bar ====== */
  .tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(10,14,39,0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid var(--line);
    z-index: 100;
    justify-content: space-around;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-dim);
    font-size: .65rem;
    font-weight: 600;
    gap: 2px;
    padding-top: 6px;
    transition: color .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .tab-item:active { transform: scale(0.9); }
  .tab-item .tab-icon { font-size: 1.45rem; line-height: 1; }
  .tab-item.active { color: var(--accent); }
  .tab-item.active .tab-icon { filter: drop-shadow(0 0 8px rgba(34,211,238,.7)); transform: translateY(-2px); }
  .tab-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 24px; height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 8px var(--accent);
  }

  /* ====== Main: full bleed cards ====== */
  .main {
    padding: 1rem 1rem 1.5rem;
    max-width: 100%;
  }

  /* ====== Hero (compact) ====== */
  .hero {
    padding: 1.6rem 1.2rem;
    border-radius: 20px;
    margin-bottom: 1.2rem;
  }
  .hero h1 { font-size: 1.8rem; line-height: 1.1; }
  .hero p { font-size: .92rem; margin-bottom: 1rem; line-height: 1.4; }
  .hero-cta { flex-direction: column; gap: .6rem; }
  .hero-cta .btn { width: 100%; padding: .95rem; font-size: 1rem; }
  .hero-stats { gap: .8rem; margin-top: 1.4rem; padding: .8rem; background: rgba(0,0,0,.25); border-radius: 14px; }
  .hero-stat strong { font-size: 1.5rem; }
  .hero-stat span { font-size: .75rem; }

  /* ====== Game cards: full-bleed list style ====== */
  .games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .7rem;
  }
  .game-card {
    padding: 1rem .8rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 0 0 1px var(--line);
    background: var(--bg-2);
  }
  .game-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 0 0 1px var(--line); }
  .game-card:active { transform: scale(0.96); box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 0 0 1px var(--card-color,var(--primary)); }
  .game-icon { font-size: 2.2rem; margin-bottom: .3rem; }
  .game-name { font-size: .95rem; line-height: 1.1; }
  .game-desc {
    font-size: .72rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
  }
  .game-meta { font-size: .7rem; }
  .game-meta .badge { padding: .1rem .4rem; font-size: .7rem; }

  /* ====== Section heads ====== */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .8rem;
  }
  .section-head h1, .section-head h2 { font-size: 1.4rem; line-height: 1.2; }
  .filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    display: flex;
    gap: .4rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .5rem .95rem;
    font-size: .85rem;
    border-radius: 99px;
  }

  /* ====== Auth (full-screen cards) ====== */
  .auth-wrap {
    margin: 0;
    padding: 1rem;
  }
  .auth-card {
    padding: 1.8rem 1.3rem;
    border-radius: 22px;
    background: var(--bg-2);
  }
  .auth-card h1 { font-size: 1.5rem; }
  .form input { padding: 1rem; font-size: 1rem; border-radius: 14px; }
  .form .btn { padding: 1.05rem; font-size: 1rem; border-radius: 14px; }

  /* ====== Dashboard / Profile ====== */
  .profile-head {
    padding: 1.4rem 1rem;
    border-radius: 20px;
    gap: 1rem;
  }
  .avatar-lg { width: 72px; height: 72px; font-size: 1.8rem; }
  .profile-info h1 { font-size: 1.3rem; }
  .profile-stats { gap: .6rem; }
  .stat-card { padding: .8rem; border-radius: 14px; }
  .stat-card strong { font-size: 1.2rem; }

  /* ====== Leaderboard table ====== */
  .lb-table { font-size: .85rem; border-radius: 16px; }
  .lb-table th, .lb-table td { padding: .7rem .5rem; }
  .lb-table th { font-size: .7rem; }
  .lb-table tr td:last-child, .lb-table tr th:last-child { text-align: right; }
  .lb-rank { width: 36px; font-size: .9rem; }
  .lb-user .avatar-sm { width: 28px; height: 28px; font-size: .75rem; }
  .lb-user span:not(.avatar-sm) { font-size: .85rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ====== Game page: fullscreen play ====== */
  body.playing { padding-bottom: 0; }
  body.playing .topbar { display: none; }
  body.playing .tabbar { display: none; }
  body.playing .footer { display: none; }
  body.playing .flash { display: none; }
  body.playing .game-wrap > .game-side { display: none; }

  .game-wrap {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .game-wrap > div:first-child { margin: 0 -1rem; }
  .game-canvas-box {
    border-radius: 0;
    padding: .5rem;
    border-left: 0;
    border-right: 0;
    background: var(--bg-0);
  }
  .game-canvas-box canvas { border-radius: 8px; max-width: 100%; }
  .game-side { padding: 0 1rem; margin-top: 1rem; }
  .side-card { padding: 1rem; border-radius: 16px; }

  /* Back button overlay on game page mobile */
  .game-back-btn {
    position: fixed;
    top: calc(var(--safe-top) + 12px);
    left: 12px;
    z-index: 200;
    width: 40px; height: 40px;
    background: rgba(10,14,39,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
  .game-back-btn:active { transform: scale(0.9); background: var(--primary); }

  /* ====== Footer: hidden on mobile (bottom tab) ====== */
  .footer { display: none; }

  /* ====== Touch controls bigger on mobile ====== */
  .touch-pad {
    grid-template-columns: 72px 72px 72px;
    grid-template-rows: 72px 72px 72px;
    gap: .45rem;
  }
  .touch-btn {
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    background: rgba(99,102,241,0.25);
    border-width: 2px;
  }

  /* ====== Quiz UI mobile ====== */
  .quiz-options { grid-template-columns: 1fr; gap: .6rem; }
  .quiz-option { padding: 1.1rem; font-size: 1rem; border-radius: 14px; }
  .quiz-question { font-size: 1.2rem; }

  /* ====== Buttons mobile (bigger tap targets) ====== */
  .btn { padding: .9rem 1.3rem; font-size: .95rem; min-height: 44px; }
  .btn-lg { padding: 1.05rem 1.5rem; font-size: 1.02rem; }
  .game-toolbar { gap: .5rem; flex-wrap: wrap; }
  .game-toolbar .btn { padding: .7rem 1rem; }

  /* ====== Headings mobile ====== */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }

  /* ====== Flash messages style change ====== */
  .flash {
    margin: .6rem 1rem;
    border-radius: 14px;
    font-size: .9rem;
    padding: .8rem 1rem;
  }

  /* ====== Alerts ====== */
  .alert { padding: .9rem; border-radius: 14px; font-size: .9rem; }

  /* ====== Premium / clan / category pages from other Claude ====== */
  .premium-card,
  .clan-card,
  .raid-card,
  .category-card {
    border-radius: 18px !important;
    padding: 1rem !important;
  }

  /* ====== Modal / overlays mobile ====== */
  .overlay {
    border-radius: 8px;
  }
  .overlay h2 { font-size: 1.5rem; }
  .overlay .score-big { font-size: 2.8rem; }

  /* ====== Tables that overflow ====== */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ====== iOS-style: smooth scroll, momentum ====== */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-overflow-scrolling: touch; }
}

/* ====== Splash / install prompt ====== */
.app-splash {
  position: fixed;
  inset: 0;
  background: var(--grad-1);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: white;
}
.app-splash.show { display: flex; animation: splash-out 0.6s 1.2s forwards; }
.app-splash .splash-icon { font-size: 5rem; animation: bounce 0.8s infinite alternate; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3)); }
.app-splash h1 { color: white; font-size: 2rem; letter-spacing: .05em; }
@keyframes bounce { to { transform: translateY(-15px); } }
@keyframes splash-out { to { opacity: 0; pointer-events: none; } }

.install-banner {
  position: fixed;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  left: 12px; right: 12px;
  background: var(--grad-1);
  color: white;
  padding: .8rem 1rem;
  border-radius: 14px;
  display: none;
  align-items: center;
  gap: .8rem;
  font-size: .9rem;
  font-weight: 600;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
}
.install-banner.show { display: flex; }
.install-banner > span { flex: 1; min-width: 0; }
.install-banner button { background: white; color: #6366f1; border: 0; padding: .5rem .9rem; border-radius: 99px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.install-banner .close-x { background: transparent; color: white; padding: 0 .4rem; font-size: 1.2rem; }

/* ====== Toast notification ====== */
.toast {
  position: fixed;
  top: calc(var(--safe-top, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  background: rgba(10,14,39,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  padding: .8rem 1.4rem;
  border-radius: 99px;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-size: .9rem;
  transition: transform .35s cubic-bezier(.4,1.5,.5,1);
  max-width: 90%;
  border: 1px solid var(--line);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: #22c55e; }
.toast.error { border-color: #ef4444; }
.toast.info { border-color: var(--accent); }

/* ====== Page transitions ====== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: slide-out-left .25s ease forwards; }
::view-transition-new(root) { animation: slide-in-right .25s ease backwards; }
@keyframes slide-out-left { to { transform: translateX(-30px); opacity: 0; } }
@keyframes slide-in-right { from { transform: translateX(30px); opacity: 0; } }

/* ====== Search bar (used in games.php) ====== */
.search-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  margin-bottom: 1rem;
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar .search-ico { font-size: 1.1rem; color: var(--text-dim); }