/* HarfIz ortak responsive yerlesim katmani.
   Sayfa ve oyun mantigini degistirmeden tum ekranlarda tek olcu sistemi kurar. */
:root {
  --page-max: 1180px;
  --page-gutter: clamp(12px, 3vw, 24px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(16px + var(--safe-top));
}

*, *::before, *::after { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  min-height: 100dvh;
  font-size: 1rem;
  overflow-x: hidden;
  overflow-x: clip;
}

main, header, footer, section, article, aside, nav, form, fieldset,
.page-shell, .page-container, .game-shell, .game-page, .duel-page {
  min-width: 0;
  max-width: 100%;
}

img, picture, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  max-width: 100%;
}

input, select, textarea { font-size: max(16px, 1em); }

h1, h2, h3, h4, p, li, label, small, strong, b, a {
  overflow-wrap: break-word;
}

.page-container,
.page-shell,
.how {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max));
  margin-inline: auto;
  padding-inline: 0;
}

.page-shell {
  padding-block: clamp(30px, 6vw, 80px);
}

main {
  flex: 1 0 auto;
  width: 100%;
}

body > footer {
  position: static !important;
  flex-shrink: 0;
  width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max));
  margin-top: auto;
  margin-inline: auto;
  transform: none !important;
}

/* Ortak ust alan */
.topbar {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max));
  max-width: var(--page-max);
  margin: max(10px, var(--safe-top)) auto 10px;
  padding-inline: clamp(14px, 2vw, 24px);
}

.brand { flex: 0 0 auto; }
.desktop-nav, .mobile-nav { min-width: 0; }
.desktop-nav > *, .mobile-nav > * { flex-shrink: 0; }

.mobile-menu > div,
.mobile-menu > .mobile-menu-panel,
.mobile-notification-panel {
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 20px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu > summary,
.mobile-notification-menu > summary,
.theme-button,
.notification-link {
  flex: 0 0 auto;
  touch-action: manipulation;
}

.context-back-nav {
  width: min(calc(100% - (2 * var(--page-gutter))), 1132px);
  max-width: 1132px;
}

.context-back-nav a {
  min-height: 36px;
  white-space: normal;
}

/* Ortak tipografi ve kartlar */
.page-shell > h1,
.hero h1,
.auth-copy h1,
.game-heading h1 {
  font-size: clamp(38px, 7vw, 88px);
}

.page-shell h2 { font-size: clamp(24px, 4vw, 44px); }

.button, button, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.form-grid,
.admin-stats,
.admin-menu-grid,
.season-admin-list,
.rank-columns,
.stat-grid {
  min-width: 0;
}

.form-grid > *,
.admin-stats > *,
.admin-menu-grid > *,
.season-admin-list > *,
.rank-columns > *,
.stat-grid > * { min-width: 0; }

.table-wrap,
.admin-table-wrap,
.leaderboard-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Oyun tahtasi ve klavye: ortak, ekrana sigan olcu sistemi */
.game-page,
.duel-page.duel-game-page {
  width: min(calc(100% - (2 * var(--page-gutter))), 1080px);
  margin-inline: auto;
}

.game-shell,
.duel-playfield {
  width: 100%;
  min-width: 0;
}

.game-shell .board,
.duel-playfield .board {
  width: min(100%, 360px);
  min-width: 0;
  aspect-ratio: 5 / 6;
}

.duel-hard-mode .board { aspect-ratio: 1 / 1; }

.game-shell .row,
.duel-playfield .row { min-width: 0; }

.game-shell .tile,
.duel-playfield .tile {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
}

.game-shell .keyboard,
.duel-playfield .keyboard,
.bomb-playfield .keyboard {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  margin: 12px auto 0 !important;
  padding-inline: 0;
}

.game-shell .keyboard > div,
.duel-playfield .keyboard > div,
.bomb-playfield .keyboard-row {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0;
}

.game-shell .keyboard button,
.duel-playfield .keyboard button,
.bomb-playfield .keyboard button,
.bomb-playfield .keyboard .key {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: clamp(12px, 3.8vw, 15px) !important;
  font-weight: 800 !important;
  user-select: none !important;
  touch-action: manipulation;
}

.game-shell .keyboard .wide,
.duel-playfield .keyboard .wide,
.bomb-playfield .keyboard .wide {
  flex: 1.6 !important;
  font-size: clamp(10px, 3.2vw, 13px) !important;
}

/* Oyun merkezi haftalik gorev seridi */
.hub-status-strip,
.hub-status-metrics,
.hub-duel-card,
.hub-duel-actions { min-width: 0; }

.hub-weekly-strip {
  width: 100%;
  min-width: 0;
}

.hub-weekly-strip span,
.hub-weekly-strip strong { white-space: normal; }

.hub-weekly-strip i {
  min-width: 0;
  height: 20px;
}

.hub-weekly-strip i > em {
  padding-inline: 8px;
  white-space: nowrap;
  font-size: clamp(10px, 2.6vw, 12px);
}

/* Tum grid yapilarinda dar ekranda tasma yerine dogal kirilma */
@media (min-width: 761px) {
  .responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: clamp(12px, 2vw, 24px);
  }
}

/* Masaustu oyun olculeri ekran yuksekliginden bagimsizdir. */
@media (min-width: 769px) {
  body.game-screen,
  body.duel-game-screen {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  body.unified-header.game-screen main,
  body.unified-header.duel-game-screen main {
    height: auto !important;
    min-height: calc(100dvh - 64px) !important;
    overflow: visible !important;
  }

  .game-page,
  .game-page:not(.finished),
  .duel-page.duel-game-page,
  .duel-page.duel-game-page:not(.duel-finished):not(.duel-waiting-result) {
    width: min(calc(100% - 48px), 760px);
    max-width: 760px;
    min-height: auto;
    margin-inline: auto;
    padding: 24px 0 40px;
    grid-template-columns: minmax(0, 1fr);
    transform: none !important;
    zoom: 1;
  }

  .game-shell,
  .game-page .game-shell,
  .duel-playfield {
    width: min(calc(100% - 32px), 760px);
    max-width: 760px;
    min-height: auto;
    margin-inline: auto;
    padding: 0;
    transform: none !important;
    zoom: 1;
  }

  .game-heading h1,
  .duel-playfield > header h1 {
    font-size: clamp(2rem, 3vw, 3rem);
  }

  .game-heading p,
  .duel-playfield > header p {
    font-size: clamp(.9rem, 1.1vw, 1.05rem);
  }

  .game-shell .board,
  .game-screen .game-shell .board,
  .duel-playfield .board,
  .duel-hard-mode .board {
    width: min(100%, 350px);
    min-width: 0;
    max-width: 350px;
    margin: 12px auto 18px;
    gap: clamp(6px, .7vw, 9px);
    transform: none;
  }

  .game-shell .row,
  .duel-playfield .row {
    gap: clamp(6px, .7vw, 9px);
  }

  .game-shell .tile,
  .duel-playfield .tile {
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  }

  .game-shell .keyboard,
  .duel-playfield .keyboard,
  .bomb-playfield .keyboard {
    position: static !important;
    width: min(100%, 540px) !important;
    max-width: 540px !important;
    margin: 12px auto 0 !important;
    transform: none !important;
  }

  .game-shell .keyboard button,
  .duel-playfield .keyboard button,
  .bomb-playfield .keyboard button,
  .bomb-playfield .keyboard .key {
    height: 48px !important;
    font-size: 14px !important;
  }

  body.game-screen > footer,
  body.duel-game-screen > footer {
    display: flex;
    position: static !important;
    margin-top: auto;
  }
}

@media (max-width: 900px) {
  .hero,
  .auth-shell,
  .game-page,
  .duel-page:has(.duel-playfield) {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-result,
  .duel-result-card { position: static; }
}

@media (max-width: 760px) {
  :root { --page-gutter: clamp(10px, 3.7vw, 16px); }

  .topbar {
    min-height: 58px;
    height: auto;
    margin-top: max(6px, var(--safe-top));
    padding: 8px 12px;
  }

  .brand { font-size: clamp(23px, 7vw, 28px); }

  .mobile-nav { margin-left: auto; }

  .mobile-menu > summary,
  .mobile-notification-menu > summary {
    width: 44px;
    height: 44px;
  }

  .mobile-menu > .mobile-menu-panel,
  .mobile-notification-panel {
    right: max(0px, var(--safe-right));
  }

  .page-shell {
    width: calc(100% - (2 * var(--page-gutter)));
    padding-block: clamp(24px, 7vw, 48px);
  }

  .page-shell > h1 { font-size: clamp(36px, 12vw, 52px); }

  .context-back-nav {
    width: calc(100% - (2 * var(--page-gutter)));
    margin-top: 8px;
  }

  .form-grid,
  .admin-stats,
  .admin-menu-grid,
  .season-admin-list,
  .rank-columns,
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hub-status-strip { grid-template-columns: minmax(0, 1fr); }
  .hub-status-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-status-metrics article {
    min-height: 80px;
    padding: 12px 9px;
  }
  .hub-status-metrics small { font-size: 9px; }
  .hub-status-metrics b { font-size: clamp(22px, 7vw, 29px); }

  .hub-weekly-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .hub-weekly-strip span { min-width: 0; font-size: 11px; }
  .hub-weekly-strip strong { font-size: 11px; }
  .hub-weekly-strip i { grid-column: 1 / -1; width: 100%; }

  body.game-screen,
  body.duel-game-screen { min-height: 100dvh; }

  body.game-screen main,
  body.duel-game-screen main {
    min-height: 0;
    padding-bottom: max(8px, var(--safe-bottom));
    scroll-padding-bottom: calc(16px + var(--safe-bottom));
  }

  .game-page,
  .duel-page.duel-game-page {
    width: calc(100% - (2 * var(--page-gutter)));
    padding-inline: 0 !important;
    padding-bottom: max(12px, calc(var(--safe-bottom) + 8px)) !important;
  }

  .game-shell .board,
  .duel-playfield .board {
    width: min(88vw, 340px, calc((100dvh - 325px) * .84));
    min-width: min(205px, 70vw);
  }

  .duel-hard-mode .board {
    width: min(92vw, 380px, calc((100dvh - 325px) * .96));
  }

  .game-shell .keyboard button,
  .duel-playfield .keyboard button,
  .bomb-playfield .keyboard button,
  .bomb-playfield .keyboard .key {
    height: clamp(38px, 5.8dvh, 50px) !important;
    font-size: clamp(11px, 3.5vw, 14px) !important;
  }

  .duel-result-card,
  .game-result.visible {
    max-width: calc(100vw - (2 * var(--page-gutter)));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    overflow-y: auto;
  }
}

@media (max-width: 430px) {
  .hub-status-welcome { padding: 17px 18px; }
  .hub-status-welcome b { font-size: 21px; }
  .hub-status-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-status-metrics article { padding-inline: 7px; }
  .hub-status-metrics small { font-size: 8px; line-height: 1.25; }

  .hub-duel-card { padding-inline: clamp(14px, 4vw, 18px) !important; }
  .hub-duel-actions > a,
  .hub-duel-actions > button { width: 100%; }

  .game-shell .keyboard,
  .duel-playfield .keyboard,
  .bomb-playfield .keyboard { gap: 5px !important; }

  .game-shell .keyboard > div,
  .duel-playfield .keyboard > div,
  .bomb-playfield .keyboard-row { gap: 3px !important; }
}

@media (max-width: 360px) {
  :root { --page-gutter: 9px; }

  .topbar { padding-inline: 9px; }
  .brand { font-size: 22px; }
  .mobile-nav { gap: 5px; }

  .mobile-menu > summary,
  .mobile-notification-menu > summary {
    width: 42px;
    height: 42px;
  }

  .game-shell .board,
  .duel-playfield .board {
    width: min(86vw, 300px, calc((100dvh - 305px) * .82));
  }

  .game-shell .keyboard button,
  .duel-playfield .keyboard button,
  .bomb-playfield .keyboard button,
  .bomb-playfield .keyboard .key {
    height: clamp(36px, 5.6dvh, 44px) !important;
    font-size: 11px !important;
  }
}

@media (max-height: 680px) and (max-width: 600px) {
  .game-shell .board,
  .duel-playfield .board {
    width: min(76vw, 270px, calc((100dvh - 285px) * .82));
    margin-block: 3px 6px !important;
  }

  .game-shell .keyboard button,
  .duel-playfield .keyboard button,
  .bomb-playfield .keyboard button,
  .bomb-playfield .keyboard .key { height: 36px !important; }
}

@media (display-mode: standalone) {
  body { padding-bottom: var(--safe-bottom); }
  .topbar { margin-top: max(6px, var(--safe-top)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}