:root {
  --background: #f3f7ff;
  --panel: #ffffff;

  --text: #19324d;
  --muted: #6a7b91;

  --primary: #2f6fed;
  --primary-dark: #2358c4;
  --primary-soft: #eaf1ff;

  --border: #d9e4f3;

  --success: #168554;
  --danger: #c4424f;

  --shadow:
    0 18px 50px
    rgba(37, 72, 120, 0.13);
}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  margin: 0;

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at top left,
      #dfeaff 0,
      transparent 34rem
    ),
    var(--background);
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


.hidden {
  display: none !important;
}


/* =========================
   GENERAL
========================= */


.app-shell {
  width:
    min(
      1180px,
      calc(100% - 24px)
    );

  margin-inline: auto;

  padding:
    20px 0
    32px;
}


.screen {
  display: none;
}


.screen.active {
  display: block;
}


.menu-panel,
.auth-card,
.game-layout {
  border:
    1px solid
    var(--border);

  border-radius: 22px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    var(--shadow);
}


.menu-panel {
  width:
    min(
      620px,
      100%
    );

  margin:
    3vh auto
    0;

  padding:
    clamp(
      24px,
      5vw,
      45px
    );

  text-align: center;
}


.brand-mark {
  display: grid;

  place-items: center;

  width: 68px;
  height: 68px;

  margin:
    0 auto
    12px;

  border-radius: 20px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #2f6fed,
      #668fff
    );

  font-size: 1.35rem;
  font-weight: 900;
}


.brand-mark.small {
  width: 54px;
  height: 54px;

  margin-top: 20px;

  border-radius: 16px;

  font-size: 1rem;
}


.eyebrow {
  margin:
    0 0
    5px;

  color:
    var(--primary);

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform:
    uppercase;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


h1 {
  margin-bottom: 10px;

  font-size:
    clamp(
      2rem,
      7vw,
      3.6rem
    );

  line-height: 1;

  letter-spacing:
    -0.04em;
}


h2 {
  margin-bottom: 14px;
}


.tagline,
.login-intro,
.dialog-subtitle {
  color:
    var(--muted);
}


/* =========================
   BUTTONS
========================= */


.primary-btn,
.secondary-btn,
.danger-btn {
  min-height: 44px;

  padding:
    10px 16px;

  border-radius: 12px;

  font-weight: 800;
}


.primary-btn {
  border:
    1px solid
    var(--primary);

  color: white;

  background:
    var(--primary);
}


.primary-btn:hover:not(:disabled) {
  background:
    var(--primary-dark);
}


.secondary-btn {
  border:
    1px solid
    var(--border);

  color:
    var(--text);

  background: white;
}


.secondary-btn:hover:not(:disabled) {
  background:
    #f4f8ff;
}


.danger-btn {
  border:
    1px solid
    #efd1d5;

  color:
    var(--danger);

  background:
    #fff6f7;
}


.wide-btn {
  width: 100%;
}


.text-btn {
  padding:
    8px 0;

  border: 0;

  color:
    var(--primary);

  background:
    transparent;

  font-weight: 800;
}


/* =========================
   MENU
========================= */


.menu-section {
  margin-top: 30px;
}


.size-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.size-btn {
  display: grid;

  gap: 2px;

  min-height: 82px;

  padding:
    12px 8px;

  border:
    2px solid
    var(--border);

  border-radius: 16px;

  color:
    var(--text);

  background: white;

  transition:
    transform 150ms ease,
    border-color 150ms ease;
}


.size-btn:hover:not(:disabled) {
  transform:
    translateY(-2px);

  border-color:
    var(--primary);
}


.size-btn strong {
  color:
    var(--primary);

  font-size: 1.45rem;
}


.size-btn span {
  color:
    var(--muted);

  font-size: 0.82rem;
}


#howToPlayBtn {
  margin-top: 18px;
}


/* =========================
   ACCOUNT
========================= */


.account-panel {
  position: relative;

  margin-top: 24px;

  padding: 20px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    #f9fbff;
}


.account-panel h2 {
  margin-bottom: 6px;
}


.account-panel p {
  margin-bottom: 14px;

  color:
    var(--muted);

  font-size: 0.9rem;
}


.account-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}


.account-note {
  margin:
    12px 0
    0 !important;

  font-size:
    0.78rem !important;
}


.signed-in-panel {
  padding: 10px;
}


.account-menu-btn {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 48px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  color:
    var(--text);

  background: white;

  font-weight: 800;
}


.account-dropdown {
  position: absolute;

  z-index: 100;

  top:
    calc(
      100% - 2px
    );

  right: 10px;
  left: 10px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background: white;

  box-shadow:
    0 16px 35px
    rgba(37, 72, 120, 0.18);
}


.account-dropdown button {
  width: 100%;

  padding:
    13px 16px;

  border: 0;

  border-bottom:
    1px solid
    #edf2f8;

  color:
    var(--text);

  background: white;

  text-align: left;

  font-weight: 750;
}


.account-dropdown button:last-child {
  border-bottom: 0;
}


.account-dropdown button:hover {
  background:
    #f3f7ff;
}


.status-line,
.form-message,
.save-status {
  min-height: 22px;

  margin:
    12px 0
    0;

  color:
    var(--muted);

  font-size:
    0.86rem;
}


.success {
  color:
    var(--success) !important;
}


.error {
  color:
    var(--danger) !important;
}


/* =========================
   AUTH
========================= */


.auth-card {
  width:
    min(
      500px,
      100%
    );

  margin:
    5vh auto
    0;

  padding:
    clamp(
      24px,
      5vw,
      42px
    );
}


.auth-card h1 {
  margin-top: 14px;
}


.form-group {
  display: grid;

  gap: 7px;

  margin-bottom: 16px;
}


.form-group label {
  font-size: 0.87rem;
  font-weight: 800;
}


.form-group input {
  width: 100%;

  min-height: 48px;

  padding:
    10px 13px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  outline: none;

  color:
    var(--text);

  background: white;
}


.form-group input:focus {
  border-color:
    var(--primary);

  box-shadow:
    0 0 0
    3px
    rgba(47,111,237,0.12);
}


/* =========================
   GAME HEADER
========================= */


.game-layout {
  padding:
    clamp(
      12px,
      2.5vw,
      26px
    );
}


.game-header {
  display: flex;

  align-items: center;
  justify-content:
    space-between;

  gap: 16px;

  margin-bottom: 14px;
}


.game-header h1 {
  margin: 0;

  font-size:
    clamp(
      1.45rem,
      4vw,
      2.4rem
    );
}


.game-header-actions {
  display: flex;

  gap: 8px;
}


.stat-pill {
  min-width: 76px;

  padding:
    7px 11px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    #f8fbff;

  text-align: center;
}


.stat-pill span {
  display: block;

  color:
    var(--muted);

  font-size: 0.7rem;
  font-weight: 800;

  text-transform:
    uppercase;
}


.stat-pill strong {
  color:
    var(--primary);

  font-size: 1.15rem;
}


/* =========================
   WORD BUILDER
========================= */


.word-builder {
  margin-bottom: 12px;

  padding:
    10px 13px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    #f9fbff;
}


.builder-label {
  display: block;

  margin-bottom: 5px;

  color:
    var(--muted);

  font-size: 0.75rem;
  font-weight: 900;

  text-transform:
    uppercase;
}


.current-word-wrap {
  display: grid;

  place-items: center;

  min-height: 50px;

  border-radius: 12px;

  background: white;
}


.current-word {
  color:
    var(--text);

  font-size:
    clamp(
      1.3rem,
      4vw,
      2rem
    );

  font-weight: 900;

  letter-spacing:
    0.08em;
}


.builder-actions,
.footer-actions,
.dialog-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.builder-actions {
  justify-content: center;

  margin-top: 9px;
}


.message {
  min-height: 18px;

  margin:
    6px 0
    0;

  text-align: center;

  font-size: 0.86rem;
  font-weight: 750;
}


/* =========================
   BOARD
========================= */


.board-section {
  width: 100%;

  min-height: 0;

  overflow: hidden;
}


.tile-grid {
  display: grid;

  grid-template-columns:
    repeat(
      var(--grid-columns, 5),
      var(--tile-size, 48px)
    );

  grid-template-rows:
    repeat(
      var(--grid-rows, 5),
      var(--tile-size, 48px)
    );

  gap:
    var(--tile-gap, 7px);

  justify-content:
    center;

  align-content:
    start;

  width: 100%;

  max-width: 100%;

  margin-inline: auto;
}


.tile-slot {
  position: relative;

  width:
    var(--tile-size, 48px);

  height:
    var(--tile-size, 48px);
}


.tile-slot.empty {
  pointer-events: none;
}


.tile-slot .tile {
  width: 100%;
  height: 100%;
}


.tile {
  position: relative;

  display: grid;

  place-items: center;

  padding: 0;

  border:
    1px solid
    #c8d7ec;

  border-radius:
    clamp(
      6px,
      1.3vw,
      12px
    );

  color:
    var(--text);

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #edf4ff
    );

  box-shadow:
    0 3px 0 #cbd9ec,
    0 6px 12px
    rgba(40,74,120,0.09);

  user-select: none;

  touch-action:
    manipulation;
}


.tile:hover {
  z-index: 2;

  transform:
    translateY(-2px);
}


.tile-letter {
  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  padding-bottom: 3px;

  font-size:
    clamp(
      0.68rem,
      calc(
        var(--tile-size, 50px) * 0.42
      ),
      2rem
    );

  font-weight: 950;
}


.tile-value {
  position: absolute;

  right: 8%;
  bottom: 5%;

  color:
    #718096;

  font-size:
    clamp(
      0.37rem,
      calc(
        var(--tile-size, 50px) * 0.18
      ),
      0.7rem
    );

  font-weight: 900;
}


.tile.selecting {
  animation:
    selectTile
    160ms ease
    forwards;
}


.tile.returning {
  animation:
    returnTile
    220ms ease;
}


@keyframes selectTile {

  to {
    transform:
      translateY(-8px)
      scale(1.08);

    opacity: 0;
  }

}


@keyframes returnTile {

  from {
    transform:
      scale(0.7);

    opacity: 0;
  }

  to {
    transform:
      scale(1);

    opacity: 1;
  }

}


/* =========================
   WORD HISTORY
========================= */


.history-panel {
  margin-top: 14px;

  padding-top: 12px;

  border-top:
    1px solid
    var(--border);
}


.history-heading {
  display: flex;

  align-items: center;
  justify-content:
    space-between;
}


.history-heading h2 {
  margin: 0;
}


.history-heading span {
  color:
    var(--muted);

  font-size: 0.84rem;
}


.word-history {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(120px, 1fr)
    );

  gap: 7px;

  max-height: 110px;

  margin:
    10px 0
    0;

  padding: 0;

  overflow: auto;

  list-style: none;
}


.word-history li {
  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  padding:
    7px 10px;

  border-radius: 10px;

  background:
    #f5f8fd;
}


.word-history strong {
  color:
    var(--success);
}


.footer-actions {
  justify-content:
    space-between;

  margin-top: 12px;
}


/* =========================
   DIALOGS
========================= */


.app-dialog {
  width:
    min(
      520px,
      calc(100% - 24px)
    );

  padding: 0;

  border: 0;

  border-radius: 20px;

  background:
    transparent;
}


.wide-dialog {
  width:
    min(
      760px,
      calc(100% - 24px)
    );
}


.app-dialog::backdrop {
  background:
    rgba(
      17,
      36,
      60,
      0.55
    );

  backdrop-filter:
    blur(3px);
}


.dialog-card {
  position: relative;

  padding:
    clamp(
      22px,
      4vw,
      34px
    );

  border-radius: 20px;

  background: white;

  box-shadow:
    var(--shadow);
}


.dialog-close {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 38px;
  height: 38px;

  border: 0;

  border-radius: 50%;

  color:
    var(--muted);

  background:
    #f3f6fa;

  font-size: 1.4rem;
}


.result-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 10px;

  margin:
    20px 0;
}


.result-grid > div {
  padding:
    14px 10px;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background:
    #f8fbff;

  text-align: center;
}


.result-grid span {
  display: block;

  color:
    var(--muted);

  font-size: 0.76rem;
}


.result-grid strong {
  display: block;

  margin-top: 4px;

  font-size: 1.45rem;
}


.final-result {
  background:
    var(--primary-soft)
    !important;
}


/* =========================
   STATISTICS
========================= */


.stats-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 10px;

  margin-top: 18px;
}


.stats-card,
.board-records > div {
  padding: 14px;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background:
    #f8fbff;
}


.stats-card span,
.board-records span {
  display: block;

  color:
    var(--muted);

  font-size: 0.77rem;
  font-weight: 700;
}


.stats-card strong,
.board-records strong {
  display: block;

  margin-top: 5px;

  overflow-wrap:
    anywhere;

  font-size: 1.2rem;
}


.board-records {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 9px;
}


/* =========================
   LEADERBOARD
========================= */


.leaderboard-filters {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 8px;

  margin:
    18px 0
    12px;
}


.leaderboard-filter {
  min-height: 40px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  color:
    var(--text);

  background: white;

  font-weight: 850;
}


.leaderboard-filter.active {
  border-color:
    var(--primary);

  color: white;

  background:
    var(--primary);
}


.leaderboard-table-wrap {
  overflow-x: auto;

  border:
    1px solid
    var(--border);

  border-radius: 14px;
}


.leaderboard-table {
  width: 100%;

  border-collapse:
    collapse;
}


.leaderboard-table th,
.leaderboard-table td {
  padding:
    11px 12px;

  border-bottom:
    1px solid
    #edf2f8;

  text-align: left;
}


.leaderboard-table th {
  color:
    var(--muted);

  background:
    #f8fbff;

  font-size: 0.75rem;

  text-transform:
    uppercase;
}


.leaderboard-table th:first-child,
.leaderboard-table td:first-child,
.leaderboard-table th:nth-child(3),
.leaderboard-table td:nth-child(3),
.leaderboard-table th:nth-child(4),
.leaderboard-table td:nth-child(4) {
  text-align: center;
}


.current-player-row {
  background:
    #edf4ff;
}


/* =========================
   MOBILE
========================= */


@media (max-width: 760px) {

  .app-shell {
    width:
      calc(100% - 12px);

    padding-top: 6px;
  }


  .size-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .game-header {
    align-items:
      flex-start;
  }


  .stat-pill {
    min-width: 64px;

    padding-inline: 7px;
  }


  .stats-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .board-records {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}


@media (max-width: 500px) {

  .account-actions,
  .result-grid {
    grid-template-columns:
      1fr;
  }


  .builder-actions button {
    flex: 1;

    min-width: 86px;
  }


  .leaderboard-table th,
  .leaderboard-table td {
    padding:
      9px 7px;

    font-size: 0.8rem;
  }

}


@media (max-height: 850px) {

  .game-layout {
    padding-top: 10px;
    padding-bottom: 10px;
  }


  .game-header {
    margin-bottom: 9px;
  }


  .word-builder {
    margin-bottom: 9px;

    padding:
      8px 11px;
  }


  .current-word-wrap {
    min-height: 44px;
  }


  .history-panel {
    margin-top: 10px;

    padding-top: 9px;
  }


  .word-history {
    max-height: 80px;
  }

}


@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.001ms !important;

    transition-duration:
      0.001ms !important;
  }

}