/* =========================================================
   SUDOKU PUCARÁ
   STYLES 1.1
========================================================= */


/* =========================================================
   A1 — RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  margin: 0;

  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;

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

  background:
    radial-gradient(
      circle at 50% 0%,
      #173b2b 0%,
      #0b2118 34%,
      #06130e 72%,
      #030806 100%
    );

  color: #f5ecd1;
}


button {
  font: inherit;
}


button,
.sudoku-cell {
  -webkit-tap-highlight-color: transparent;
}


[hidden] {
  display: none !important;
}


/* =========================================================
   A2 — APP
========================================================= */

.sudoku-app {
  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;
}


/* =========================================================
   A3 — START SCREEN
========================================================= */

.start-screen {
  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at 50% 24%,
      rgba(33, 83, 59, 0.8),
      rgba(7, 28, 20, 0.96) 48%,
      #020806 100%
    );
}


.start-screen__content {
  width:
    min(
      520px,
      100%
    );

  text-align: center;
}


/* =========================================================
   A4 — START BRAND
========================================================= */

.start-brand {
  margin-bottom: 32px;
}


.start-brand__mark {
  width: 86px;
  height: 86px;

  margin:
    0
    auto
    14px;

  display: grid;
  place-items: center;

  border:
    2px solid
    rgba(
      223,
      189,
      88,
      0.92
    );

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #181813,
      #050605
    );

  color:
    #dfbd58;

  font-family:
    Georgia,
    serif;

  font-size: 48px;
  font-weight: 700;

  box-shadow:
    0 18px 45px
    rgba(
      0,
      0,
      0,
      0.45
    ),

    inset 0 0 26px
    rgba(
      212,
      175,
      55,
      0.12
    );
}


.start-brand__studio {
  margin: 0;

  color: #d8b955;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.34em;
}


.start-brand h1 {
  margin:
    5px
    0
    8px;

  color: #f6f0dc;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      42px,
      10vw,
      68px
    );

  letter-spacing: 0.08em;
}


.start-brand__subtitle {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.56
    );

  font-size: 13px;

  letter-spacing: 0.08em;
}


/* =========================================================
   A5 — START CONFIG
========================================================= */

.start-config {
  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 20px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.22
    );

  border-radius: 20px;

  background:
    rgba(
      1,
      12,
      8,
      0.62
    );

  box-shadow:
    0 24px 60px
    rgba(
      0,
      0,
      0,
      0.34
    );
}


.config-group {
  padding: 10px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.13
    );

  border-radius: 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );
}


.config-label {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(
      247,
      235,
      198,
      0.66
    );

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.segmented-control {
  display: flex;

  gap: 6px;
}


.segmented-control button {
  flex: 1;

  min-height: 38px;

  padding:
    6px
    10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius: 8px;

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

  color:
    rgba(
      255,
      255,
      255,
      0.7
    );

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}


.segmented-control button.is-active {
  border-color:
    rgba(
      215,
      180,
      75,
      0.85
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        212,
        175,
        55,
        0.3
      ),
      rgba(
        212,
        175,
        55,
        0.09
      )
    );

  color: #f7df93;
}


/* =========================================================
   A6 — PLAY BUTTON
========================================================= */

.play-button {
  width: 100%;

  min-height: 56px;

  margin-top: 4px;

  border:
    1px solid
    #e1c164;

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #e4c76d,
      #ac8128
    );

  color: #171109;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: 0.12em;

  cursor: pointer;

  box-shadow:
    0 8px 26px
    rgba(
      0,
      0,
      0,
      0.28
    );
}


.play-button:active {
  transform:
    translateY(
      1px
    );
}


.start-footer {
  margin:
    20px
    0
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.28
    );

  font-size: 10px;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


/* =========================================================
   A7 — GAME
========================================================= */

.game-screen {
  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;
}


/* =========================================================
   A8 — HEADER
========================================================= */

.sudoku-header {
  width: 100%;

  min-height: 66px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 12px;

  padding:
    10px
    clamp(
      12px,
      3vw,
      30px
    );

  border-bottom:
    1px solid
    rgba(
      212,
      175,
      55,
      0.28
    );

  background:
    rgba(
      2,
      10,
      7,
      0.76
    );

  backdrop-filter:
    blur(14px);
}


.sudoku-brand {
  display: flex;
  align-items: center;

  gap: 9px;
}


.sudoku-brand__mark {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(
      230,
      196,
      94,
      0.9
    );

  border-radius: 50%;

  background:
    #070907;

  color: #dfbd58;

  font-family:
    Georgia,
    serif;

  font-size: 21px;
  font-weight: 700;
}


.sudoku-brand__text {
  display: flex;
  flex-direction: column;

  line-height: 1;
}


.sudoku-brand__studio {
  margin-bottom: 3px;

  color: #d8b955;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.2em;
}


.sudoku-brand__text strong {
  color: #f6f0dc;

  font-size: 17px;

  letter-spacing: 0.07em;
}


.header-button {
  justify-self: end;

  min-height: 38px;

  padding:
    7px
    13px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.6
    );

  border-radius: 9px;

  background:
    rgba(
      212,
      175,
      55,
      0.08
    );

  color: #efd67f;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}


.header-button--back {
  justify-self: start;
}


/* =========================================================
   A9 — MAIN
========================================================= */

.sudoku-main {
  width:
    min(
      650px,
      calc(
        100% - 18px
      )
    );

  margin:
    0
    auto;

  padding:
    14px
    0
    28px;

  display: flex;
  flex-direction: column;

  gap: 12px;
}


/* =========================================================
   A10 — HUD
========================================================= */

.sudoku-hud {
  display: grid;

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

  gap: 7px;
}


.hud-item {
  padding:
    7px
    8px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.14
    );

  border-radius: 9px;

  background:
    rgba(
      2,
      12,
      8,
      0.43
    );

  text-align: center;
}


.hud-item span {
  display: block;

  margin-bottom: 2px;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


.hud-item strong {
  color: #f1da91;

  font-size: 15px;
}


/* =========================================================
   A11 — BOARD
========================================================= */

.board-section {
  display: flex;
  justify-content: center;

  width: 100%;
}


.sudoku-board {
  --board-size: 9;

  width:
    min(
      88vw,
      560px
    );

  aspect-ratio: 1 / 1;

  display: grid;

  grid-template-columns:
    repeat(
      var(--board-size),
      1fr
    );

  grid-template-rows:
    repeat(
      var(--board-size),
      1fr
    );

  border:
    3px solid
    #caa746;

  border-radius: 9px;

  overflow: hidden;

  background: #d8d1b9;

  box-shadow:
    0
    18px
    46px
    rgba(
      0,
      0,
      0,
      0.42
    );
}


/* =========================================================
   A12 — CELLS
========================================================= */

.sudoku-cell {
  position: relative;

  min-width: 0;
  min-height: 0;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  border-right:
    1px solid
    rgba(
      37,
      36,
      29,
      0.22
    );

  border-bottom:
    1px solid
    rgba(
      37,
      36,
      29,
      0.22
    );

  background: #eee8d4;

  color: #173c2b;

  cursor: pointer;

  user-select: none;
}


.sudoku-cell.box-border-left {
  border-left:
    2px solid
    rgba(
      56,
      46,
      19,
      0.72
    );
}


.sudoku-cell.box-border-top {
  border-top:
    2px solid
    rgba(
      56,
      46,
      19,
      0.72
    );
}


.sudoku-cell.is-fixed {
  background: #e2dac1;

  color: #171912;
}


.sudoku-cell.is-related {
  background: #e0e4cb;
}


.sudoku-cell.is-same-value {
  background: #d4ddb7;
}


.sudoku-cell.is-selected {
  z-index: 2;

  background: #f2d989;

  box-shadow:
    inset
    0
    0
    0
    2px
    rgba(
      102,
      79,
      18,
      0.7
    );
}


.sudoku-cell.is-error {
  animation:
    sudoku-error
    420ms
    ease;
}


.cell-value {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      18px,
      4.8vw,
      34px
    );

  font-weight: 700;
}


.sudoku-board[data-size="4"]
.cell-value {
  font-size:
    clamp(
      30px,
      9vw,
      58px
    );
}


.sudoku-board[data-size="6"]
.cell-value {
  font-size:
    clamp(
      24px,
      6vw,
      44px
    );
}


/* =========================================================
   A13 — NOTES
========================================================= */

.cell-notes {
  --notes-columns: 3;

  position: absolute;

  inset: 3px;

  display: grid;

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

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

  color:
    rgba(
      20,
      64,
      47,
      0.72
    );

  font-size:
    clamp(
      7px,
      1.8vw,
      11px
    );

  font-weight: 700;
}


/* =========================================================
   A14 — ACTION BAR
========================================================= */

.action-bar {
  display: grid;

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

  gap: 7px;
}


.action-button {
  min-height: 54px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 2px;

  padding: 5px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.18
    );

  border-radius: 10px;

  background:
    rgba(
      4,
      19,
      13,
      0.62
    );

  color: #e9ddb8;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}


.action-button__icon {
  color: #d7b958;

  font-size: 20px;
}


.action-button.is-active {
  border-color:
    rgba(
      216,
      181,
      75,
      0.85
    );

  background:
    rgba(
      212,
      175,
      55,
      0.17
    );

  color: #f6df98;
}


.action-button:disabled {
  opacity: 0.34;

  cursor: default;
}


/* =========================================================
   A15 — NUMBER PAD
========================================================= */

.number-pad {
  --number-count: 9;

  display: grid;

  grid-template-columns:
    repeat(
      var(--number-count),
      minmax(
        0,
        1fr
      )
    );

  gap: 5px;
}


.number-button {
  aspect-ratio: 1 / 1;

  min-width: 0;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.35
    );

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      rgba(
        23,
        53,
        39,
        0.94
      ),
      rgba(
        7,
        24,
        17,
        0.96
      )
    );

  color: #e4c867;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      19px,
      4vw,
      29px
    );

  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   A16 — RESULT
========================================================= */

.result-overlay {
  position: fixed;

  inset: 0;

  z-index: 100;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(
      0,
      6,
      4,
      0.82
    );

  backdrop-filter:
    blur(10px);
}


.result-card {
  width:
    min(
      390px,
      100%
    );

  padding: 28px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.72
    );

  border-radius: 20px;

  background:
    linear-gradient(
      160deg,
      #10291f,
      #04110c
    );

  text-align: center;
}


.result-kicker {
  color: #d6b653;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.24em;
}


.result-card h2 {
  margin:
    8px
    0;

  color: #f6edd4;

  font-family:
    Georgia,
    serif;

  font-size: 32px;
}


.result-card p {
  color:
    rgba(
      255,
      255,
      255,
      0.6
    );
}


.result-stats {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;

  margin:
    20px
    0;
}


.result-stats div {
  padding: 10px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.14
    );

  border-radius: 10px;
}


.result-stats span {
  display: block;

  color:
    rgba(
      255,
      255,
      255,
      0.45
    );

  font-size: 10px;

  text-transform: uppercase;
}


.result-stats strong {
  color: #f1d67f;

  font-size: 22px;
}


.result-button,
.result-back-button {
  width: 100%;

  min-height: 44px;

  border-radius: 10px;

  font-weight: 800;

  cursor: pointer;
}


.result-button {
  border:
    1px solid
    #d5b354;

  background:
    linear-gradient(
      180deg,
      #e0bf61,
      #ad852b
    );

  color: #13100a;
}


.result-back-button {
  margin-top: 8px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.32
    );

  background: transparent;

  color: #e5cf8b;
}


/* =========================================================
   A17 — ERROR
========================================================= */

@keyframes sudoku-error {

  0% {
    transform:
      translateX(
        0
      );
  }

  20% {
    background: #dc7e74;

    transform:
      translateX(
        -3px
      );
  }

  40% {
    transform:
      translateX(
        3px
      );
  }

  60% {
    transform:
      translateX(
        -2px
      );
  }

  80% {
    transform:
      translateX(
        2px
      );
  }

  100% {
    transform:
      translateX(
        0
      );
  }

}


/* =========================================================
   A18 — MOBILE
========================================================= */

@media (
  max-width: 680px
) {

  .start-screen {
    padding: 15px;
  }


  .start-brand {
    margin-bottom: 22px;
  }


  .start-brand__mark {
    width: 70px;
    height: 70px;

    font-size: 38px;
  }


  .start-config {
    padding: 13px;
  }


  .segmented-control button {
    min-height: 34px;

    padding:
      5px
      5px;

    font-size: 11px;
  }


  .sudoku-header {
    min-height: 58px;

    padding:
      7px
      8px;
  }


  .sudoku-brand__mark {
    width: 32px;
    height: 32px;

    font-size: 18px;
  }


  .sudoku-brand__text strong {
    font-size: 14px;
  }


  .header-button {
    min-height: 34px;

    padding:
      5px
      8px;

    font-size: 10px;
  }


  .sudoku-main {
    width:
      calc(
        100% - 10px
      );

    padding-top: 8px;

    gap: 8px;
  }


  .sudoku-board {
    width:
      calc(
        100vw - 12px
      );
  }


  .action-button {
    min-height: 47px;
  }


  .number-pad {
    gap: 4px;
  }

}


/* =========================================================
   A19 — LANDSCAPE BAJO
========================================================= */

@media (
  orientation: landscape
)
and (
  max-height: 650px
) {

  .sudoku-header {
    min-height: 46px;

    padding:
      4px
      10px;
  }


  .sudoku-main {
    width:
      min(
        960px,
        calc(
          100% - 14px
        )
      );

    display: grid;

    grid-template-columns:
      minmax(
        290px,
        76vh
      )
      minmax(
        280px,
        1fr
      );

    grid-template-areas:

      "board hud"
      "board actions"
      "board numbers";

    gap:
      7px
      14px;

    align-items: start;

    padding:
      7px
      0;
  }


  .sudoku-hud {
    grid-area: hud;
  }


  .board-section {
    grid-area: board;
  }


  .action-bar {
    grid-area: actions;
  }


  .number-pad {
    grid-area: numbers;
  }


  .sudoku-board {
    width:
      min(
        76vh,
        530px
      );
  }

}

/* =========================================================
   SUDOKU PUCARÁ 2.0 — INTRO, MENÚ Y SISTEMAS
========================================================= */

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #174f38 0%, #071a13 45%, #020806 100%);
}

.intro-screen__glow {
  position: absolute;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221,180,67,.2), transparent 64%);
  animation: intro-pulse 3s ease both;
}

.intro-brand { position: relative; text-align: center; animation: intro-brand 3s ease both; }
.intro-brand img { width: clamp(110px, 23vw, 180px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 35px rgba(0,0,0,.5)); }
.intro-brand p { margin: 18px 0 3px; color: #d9b84f; font-size: 11px; font-weight: 900; letter-spacing: .34em; }
.intro-brand h1 { margin: 0; color: #fff2be; font: 700 clamp(38px, 9vw, 76px)/1 Georgia,serif; letter-spacing: .12em; }
.intro-brand span { display: block; margin-top: 8px; color: #dfbd58; font: 700 clamp(25px, 6vw, 48px)/1 Georgia,serif; letter-spacing: .2em; }
.intro-brand small { display: block; margin-top: 18px; color: rgba(255,255,255,.55); letter-spacing: .16em; }

@keyframes intro-brand { 0% { opacity: 0; transform: scale(.9); } 25%,75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes intro-pulse { 0% { opacity: 0; transform: scale(.7); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }

.start-screen {
  position: relative;
  isolation: isolate;
  background: #06130e url("banner.png") center/cover no-repeat;
}
.start-screen::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg,rgba(1,8,5,.96),rgba(4,18,12,.78) 55%,rgba(2,10,7,.88)),linear-gradient(0deg,#020806,transparent 48%); }
.start-screen__content { padding: clamp(20px,4vw,36px); border: 1px solid rgba(223,189,88,.25); border-radius: 28px; background: linear-gradient(150deg,rgba(4,20,14,.88),rgba(1,8,5,.72)); box-shadow: 0 28px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.start-brand__mark { background: url("icono.png") center/contain no-repeat; color: transparent; border: 0; border-radius: 22px; }
.start-menu { display: grid; gap: 9px; }
.start-menu button { width:100%; min-height:48px; border:1px solid rgba(223,189,88,.28); border-radius:11px; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.015)); color:#eadba6; font-size:12px; font-weight:850; letter-spacing:.11em; cursor:pointer; }
.start-menu button:hover:not(:disabled) { border-color:#dfbd58; background:rgba(223,189,88,.13); transform:translateY(-1px); }
.start-menu button:disabled { opacity:.35; cursor:not-allowed; }
.start-menu .play-button { min-height:56px; color:#171109; font-size:16px; background:linear-gradient(180deg,#f0d47e,#b98a29); }

.sudoku-hud { grid-template-columns: repeat(4,minmax(0,1fr)); }
.hud-pause { border:1px solid rgba(212,175,55,.3); border-radius:9px; background:linear-gradient(145deg,rgba(212,175,55,.16),rgba(4,19,13,.7)); color:#efd67f; font-size:11px; font-weight:800; cursor:pointer; }
.sudoku-board { border-color:#e0bd58; background:#ba9a42; box-shadow:0 22px 58px rgba(0,0,0,.55),0 0 0 1px rgba(255,231,151,.25),inset 0 0 30px rgba(58,42,8,.28); }
.sudoku-cell { background:linear-gradient(145deg,#f7f1df,#e7ddc0); }
.sudoku-cell.is-fixed { background:linear-gradient(145deg,#ded5bc,#cfc3a2); }
.sudoku-cell.is-selected { background:linear-gradient(145deg,#ffeaa1,#dfb94e); }
.game-screen.is-paused .sudoku-main { visibility:hidden; }

.modal-overlay { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:18px; background:rgba(0,7,4,.87); backdrop-filter:blur(12px); }
.modal-card { width:min(520px,100%); max-height:calc(100dvh - 36px); overflow:auto; padding:clamp(24px,5vw,38px); border:1px solid rgba(223,189,88,.5); border-radius:24px; color:#f6edd4; background:radial-gradient(circle at 85% 0,rgba(218,174,78,.12),transparent 32%),linear-gradient(155deg,#123326,#04110c); box-shadow:0 30px 90px rgba(0,0,0,.6); }
.modal-card { scrollbar-width:thin; scrollbar-color:#b98a29 #0a241a; }
.modal-card::-webkit-scrollbar { width:8px; }
.modal-card::-webkit-scrollbar-track { background:#0a241a; }
.modal-card::-webkit-scrollbar-thumb { border-radius:8px; background:#b98a29; }
.modal-kicker { color:#d6b653; font-size:10px; font-weight:900; letter-spacing:.23em; }
.modal-card h2 { margin:7px 0 12px; font:700 clamp(27px,7vw,38px)/1.1 Georgia,serif; }
.modal-card>p { color:rgba(255,255,255,.62); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.modal-close { width:40px; height:40px; border:1px solid rgba(223,189,88,.3); border-radius:50%; color:#efd67f; background:rgba(255,255,255,.04); font-size:25px; cursor:pointer; }
.settings-list { display:grid; gap:10px; margin-top:22px; }
.setting-row,.setting-select { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.035); }
.setting-row span,.setting-select span { font-weight:750; }
.setting-row small { display:block; margin-top:3px; color:rgba(255,255,255,.45); font-size:10px; font-weight:400; }
.setting-row input { width:22px; height:22px; accent-color:#d6b653; }
.setting-select select { padding:8px; border:1px solid rgba(223,189,88,.3); border-radius:8px; color:#f5e5ab; background:#0a241a; }
.legal-links { display:flex; justify-content:center; gap:18px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.legal-links a { color:#d9bd67; font-size:11px; font-weight:800; text-transform:uppercase; }
.stats-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0; }
.stats-summary div { padding:14px 8px; border:1px solid rgba(223,189,88,.17); border-radius:11px; text-align:center; background:rgba(255,255,255,.035); }
.stats-summary span { display:block; color:rgba(255,255,255,.48); font-size:9px; text-transform:uppercase; }
.stats-summary strong { color:#f1d67f; font-size:20px; }
.stats-difficulties { display:grid; gap:9px; }
.stats-difficulties article { padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(255,255,255,.025); }
.stats-difficulties h3,.stats-difficulties p { margin:0 0 4px; }
.stats-difficulties span { color:rgba(255,255,255,.52); font-size:11px; }

@media (max-width:520px) {
  .start-screen__content { padding:16px; }
  .start-config { padding:10px; }
  .stats-summary { grid-template-columns:repeat(2,1fr); }
  .sudoku-hud { gap:4px; }
  .hud-pause { font-size:9px; }
  .legal-links { gap:11px; }
}

/* =========================================================
   SUDOKU 2.1 — BARRA CON ASSETS Y AJUSTE DE ALTURA
========================================================= */

.header-actions { min-width:0; display:flex; align-items:center; gap:8px; }
.header-actions--left { justify-self:start; }
.header-actions--right { justify-self:end; }
.header-button { min-width:92px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:5px 10px; }
.header-button img { width:31px; height:31px; flex:0 0 auto; border-radius:7px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.34); }
.action-button__icon img { width:27px; height:27px; display:block; border-radius:6px; object-fit:cover; }
.sudoku-hud { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (min-width:681px) and (max-height:950px) {
  .sudoku-header { min-height:58px; padding-top:6px; padding-bottom:6px; }
  .sudoku-main { padding:7px 0 10px; gap:7px; }
  .sudoku-hud { gap:6px; }
  .hud-item { padding:5px 7px; }
  .sudoku-board { width:min(88vw,560px,calc(100dvh - 290px)); }
  .action-button { min-height:48px; }
  .number-button { max-height:48px; }
}

@media (max-width:680px) {
  .sudoku-header { grid-template-columns:1fr auto 1fr; gap:5px; }
  .header-actions { gap:3px; }
  .header-button { position:relative; min-width:42px; width:42px; height:42px; padding:4px; border-radius:9px; }
  .header-button img { width:30px; height:30px; }
  .header-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .sudoku-brand__text { display:none; }
  .sudoku-brand__mark { width:34px; height:34px; }
  .sudoku-board { width:min(calc(100vw - 12px),calc(100dvh - 260px)); }
}

@media (max-width:390px), (max-height:720px) {
  .sudoku-header { min-height:50px; }
  .sudoku-main { padding-top:5px; gap:5px; }
  .hud-item { padding:4px; }
  .hud-item strong { font-size:13px; }
  .action-button { min-height:43px; }
}

/* =========================================================
   SUDOKU 2.2 — HERRAMIENTAS EN EL HUD SUPERIOR
========================================================= */

.header-tools { display:flex; align-items:center; gap:5px; margin-right:4px; }
.header-tools button { position:relative; width:42px; height:42px; display:grid; place-items:center; padding:4px; border:1px solid rgba(212,175,55,.38); border-radius:9px; color:#e5c963; background:rgba(212,175,55,.055); cursor:pointer; }
.header-tools button:hover:not(:disabled),.header-tools button.is-active { border-color:#e0bd58; background:rgba(212,175,55,.17); }
.header-tools button:disabled { opacity:.34; cursor:default; }
.header-tools img { width:31px; height:31px; border-radius:6px; object-fit:cover; }
.header-tools__symbol { font-size:24px; line-height:1; }
.header-tools button>span:last-child:not(.header-tools__symbol) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (min-width:681px) {
  .action-bar--board { display:none; }
  .sudoku-board { width:min(88vw,560px,calc(100dvh - 235px)); }
}

@media (max-width:680px) {
  .header-tools { display:none; }
  .action-bar--board { display:grid; }
}

/* =========================================================
   SUDOKU 2.3 — TABLERO ESMERALDA PUCARÁ
========================================================= */

.sudoku-board {
  border-color:#e1bd58;
  background:#b98a29;
  box-shadow:
    0 22px 58px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,231,151,.36),
    0 0 34px rgba(201,157,46,.12),
    inset 0 0 28px rgba(0,0,0,.3);
}

.sudoku-cell {
  border-right-color:rgba(223,189,88,.22);
  border-bottom-color:rgba(223,189,88,.22);
  background:linear-gradient(145deg,#174333 0%,#0d2a20 100%);
  color:#f5d979;
}

.sudoku-cell.is-fixed {
  background:linear-gradient(145deg,#102f24 0%,#071d16 100%);
  color:#f7edcf;
  text-shadow:0 1px 0 #000,0 0 12px rgba(238,203,101,.12);
}

.sudoku-cell.box-border-left { border-left-color:rgba(239,205,108,.78); }
.sudoku-cell.box-border-top { border-top-color:rgba(239,205,108,.78); }

.sudoku-cell.is-related {
  background:linear-gradient(145deg,#28604a 0%,#174534 100%);
}

.sudoku-cell.is-same-value {
  background:linear-gradient(145deg,#426b3c 0%,#28532f 100%);
  color:#ffe38a;
  box-shadow:inset 0 0 18px rgba(222,184,74,.14);
}

.sudoku-cell.is-selected {
  background:linear-gradient(145deg,#f1d675 0%,#b88926 100%);
  color:#10251c;
  text-shadow:0 1px rgba(255,255,255,.35);
  box-shadow:
    inset 0 0 0 2px #fff0ad,
    inset 0 0 20px rgba(91,59,4,.18),
    0 0 0 2px rgba(255,224,126,.68),
    0 0 22px rgba(239,197,78,.82);
  animation:sudoku-selected-glow .75s ease-out;
}

.cell-notes { color:rgba(245,217,121,.78); }

.sudoku-cell.is-selected .cell-notes { color:#173729; }

@keyframes sudoku-selected-glow {
  0% { filter:brightness(1); box-shadow:inset 0 0 0 2px #fff0ad,0 0 0 rgba(239,197,78,0); }
  55% { filter:brightness(1.13); box-shadow:inset 0 0 0 2px #fff4c4,0 0 28px rgba(255,215,96,.95); }
  100% { filter:brightness(1); }
}

@keyframes sudoku-error {
  0%,100% { transform:translateX(0); }
  20% { background:#8b2929; color:#fff; transform:translateX(-3px); }
  40% { transform:translateX(3px); }
  60% { transform:translateX(-2px); }
  80% { transform:translateX(2px); }
}

/* =========================================================
   SUDOKU 2.4 — RESULTADOS DIFERENCIADOS
========================================================= */

.result-card { position:relative; overflow:hidden; isolation:isolate; animation:result-card-in .42s cubic-bezier(.2,.8,.2,1) both; }
.result-card::before { content:""; position:absolute; inset:-35%; z-index:-1; pointer-events:none; opacity:.55; }
.result-emblem { width:70px; height:70px; display:grid; place-items:center; margin:14px auto 8px; border-radius:50%; font:700 38px/1 Georgia,serif; }

.result-overlay[data-outcome="win"] .result-card {
  border-color:#ebca68;
  background:linear-gradient(155deg,#174936 0%,#09281d 58%,#04110c 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 38px rgba(221,180,67,.22);
}
.result-overlay[data-outcome="win"] .result-card::before { background:repeating-conic-gradient(from 0deg,rgba(242,211,117,.14) 0 7deg,transparent 7deg 18deg); animation:result-rays 12s linear infinite; }
.result-overlay[data-outcome="win"] .result-emblem { color:#173023; border:1px solid #ffe597; background:linear-gradient(145deg,#fff0ad,#c9942d); box-shadow:0 0 28px rgba(239,197,78,.56); animation:win-emblem .7s ease-out both; }
.result-overlay[data-outcome="win"] .result-card h2 { color:#fff3c7; text-shadow:0 0 18px rgba(238,199,85,.22); }

.result-overlay[data-outcome="loss"] .result-card {
  border-color:#9e603d;
  background:linear-gradient(155deg,#382019 0%,#1e120e 54%,#0b0907 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 30px rgba(128,49,34,.18);
}
.result-overlay[data-outcome="loss"] .result-card::before { background:radial-gradient(circle at 50% 15%,rgba(173,81,49,.22),transparent 42%); }
.result-overlay[data-outcome="loss"] .result-emblem { color:#f0c69b; border:1px solid #a9633e; background:linear-gradient(145deg,#713c2b,#271511); box-shadow:0 0 22px rgba(125,48,31,.34); }
.result-overlay[data-outcome="loss"] .result-card h2 { color:#f1d4b6; }
.result-overlay[data-outcome="loss"] .result-button { border-color:#c58d55; background:linear-gradient(180deg,#c99d65,#82512f); color:#1a0f0a; }

@keyframes result-card-in { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes result-rays { to { transform:rotate(1turn); } }
@keyframes win-emblem { 0% { opacity:0; transform:scale(.5) rotate(-20deg); } 70% { transform:scale(1.12) rotate(4deg); } 100% { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  .result-card,.result-card::before,.result-emblem { animation:none !important; }
}

/* =========================================================
   ANDROID — BARRAS DEL SISTEMA Y ZONAS SEGURAS
========================================================= */

html,body { overscroll-behavior:none; }
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
button,select,input { touch-action:manipulation; }

@supports (padding:max(0px)) {
  .start-screen {
    padding-top:max(15px,env(safe-area-inset-top));
    padding-right:max(15px,env(safe-area-inset-right));
    padding-bottom:max(15px,env(safe-area-inset-bottom));
    padding-left:max(15px,env(safe-area-inset-left));
  }
  .sudoku-header {
    padding-top:max(7px,env(safe-area-inset-top));
    padding-right:max(8px,env(safe-area-inset-right));
    padding-left:max(8px,env(safe-area-inset-left));
  }
  .sudoku-main {
    padding-right:env(safe-area-inset-right);
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    padding-left:env(safe-area-inset-left);
  }
  .modal-overlay,.result-overlay {
    padding-top:max(18px,env(safe-area-inset-top));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    padding-left:max(18px,env(safe-area-inset-left));
  }
}