.game-page .game-side {
  display: grid;
  grid-template-rows: auto auto;
  gap: 17px;
  min-width: 0;
  align-self: start;
}

.game-page .scratchpad {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: clamp(300px, 32vh, 330px);
  padding: 14px;
  border: 1px solid #8bd8cb;
  border-radius: 25px;
  background: linear-gradient(155deg, #f2fffa, #e7f4ff);
  box-shadow: 0 10px 0 #347d83, 0 24px 44px #06113d54;
}
.game-page .scratchpad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-page .scratchpad-head .overline { color: #276c69; font-size: .62rem; }
.game-page .scratchpad-head h2 { margin: 2px 0 0; color: #18365b; font-size: 1.35rem; line-height: 1.1; }
.game-page .scratchpad-head h2 span { color: #7658bc; }
.game-page .scratchpad-spark { color: #d69b3f; font-size: 1.55rem; }
.game-page .scratchpad-intro { margin: 5px 0 9px; color: #435f70; font-size: .72rem; line-height: 1.3; }
.game-page .scratchpad-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 9px; }
.game-page .scratchpad-tool {
  min-width: 0;
  min-height: 37px;
  padding: 5px 3px;
  border: 1px solid #7795a8;
  border-radius: 9px;
  background: #fff;
  color: #21455e;
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}
.game-page .scratchpad-tool[aria-pressed="true"] { border-color: #386a8b; background: #d5e9ff; box-shadow: inset 0 0 0 1px #386a8b; }
.game-page .scratchpad-tool:disabled { opacity: .5; cursor: default; }
.game-page .scratchpad-tool:not(:disabled):hover { background: #dff8f0; }
.game-page .scratchpad-tool:focus-visible,
.game-page .scratchpad-keyboard:focus-visible,
.game-page #scratchText:focus-visible { outline: 3px solid #9c62ee; outline-offset: 2px; }
.game-page .scratchpad-surface {
  position: relative;
  flex: 1;
  min-height: 105px;
  overflow: hidden;
  border: 4px solid #8c6349;
  border-radius: 13px;
  background: repeating-linear-gradient(0deg, transparent 0 27px, #ffffff12 27px 28px), #174b4b;
  box-shadow: inset 0 0 20px #091b2455, 0 4px 0 #654b3d;
}
.game-page #scratchCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.game-page .scratchpad-surface.is-erasing canvas { cursor: cell; }
.game-page .scratchpad-keyboard {
  align-self: flex-start;
  min-height: 30px;
  margin-top: 10px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #255966;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  text-decoration: underline;
  cursor: pointer;
}
.game-page #scratchText {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #174b4b;
  color: #f6ffe1;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: none;
}
.game-page #scratchText::placeholder { color: #d0e6d2; }
.game-page #scratchText[hidden] { display: none; }
.game-page .scratchpad label[for="scratchText"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 901px) {
  .game-page .game-side .stats-panel { height: clamp(300px, 30vh, 320px); padding: 11px 13px; gap: 5px; }
  .game-page .game-side .stats-head h2 { font-size: 1.3rem; }
  .game-page .game-side .stats-emblem { width: 32px; height: 32px; font-size: 1.1rem; }
  .game-page .game-side .stats-intro { display: none; }
  .game-page .game-side .level-card { min-height: 62px; padding: 7px 9px; gap: 8px; }
  .game-page .game-side .level-card .avatar-preview { width: 42px; height: 42px; }
  .game-page .game-side .level-card small { font-size: .54rem; }
  .game-page .game-side .level-card strong { font-size: 1.3rem; }
  .game-page .game-side .level-card-link { display: none; }
  .game-page .game-side .stat-hero { min-height: 40px; margin: 0; padding: 6px 8px; }
  .game-page .game-side .stat-hero > span { font-size: .63rem; }
  .game-page .game-side .stat-hero strong { font-size: 1.25rem; }
  .game-page .game-side .stats-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .game-page .game-side .stat { min-height: 43px; padding: 5px 6px; }
  .game-page .game-side .stat span { font-size: .59rem; line-height: 1.1; }
  .game-page .game-side .stat strong { font-size: 1.02rem; }
  .game-page .game-side .tip { display: none; }
}

/* En escritorio, el progreso se convierte en una banda; reto y pizarra ocupan
   la misma fila y altura sin sumar dos tarjetas en la columna derecha. */
@media (min-width: 1700px) and (min-height: 800px) {
  .game-page #gameScreen .game-grid { grid-template-rows: auto auto; }
  .game-page #gameScreen .game-side { display: contents; }
  .game-page #gameScreen .stats-panel {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 130px 180px 150px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    height: 110px;
    padding: 10px 14px;
  }
  .game-page #gameScreen .stats-head { margin: 0; }
  .game-page #gameScreen .stats-intro,
  .game-page #gameScreen .tip { display: none; }
  .game-page #gameScreen .level-card { min-height: 70px; }
  .game-page #gameScreen .stat-hero { min-height: 68px; }
  .game-page #gameScreen .stats-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .game-page #gameScreen .stat { min-height: 65px; }
  .game-page #gameScreen .play-panel { grid-column: 1; grid-row: 2; }
  .game-page #gameScreen .scratchpad { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1700px) and (max-height: 1000px) and (min-height: 800px) {
  .game-page #gameScreen .scratchpad { height: 598px; }
}
@media (min-width: 1700px) and (max-width: 1920px) and (min-height: 1001px) {
  .game-page #gameScreen .scratchpad { height: 686px; }
}
@media (min-width: 1921px) and (min-height: 1250px) {
  .game-page #gameScreen .scratchpad { height: 840px; }
}

@media (max-width: 900px) {
  .game-page .scratchpad { height: 300px; }
}
@media (max-width: 600px) {
  .game-page .scratchpad { border-radius: 20px; }
  .game-page .scratchpad-tool { min-height: 42px; }
}