:root {
  --bg-deep: #030d23;
  --bg-mid: #0a1f49;
  --panel-top: #102b5a;
  --panel-mid: #0a1f47;
  --panel-bottom: #081735;
  --panel-border: #2d4f84;
  --panel-inner: #89baff1f;
  --text-main: #e8f3ff;
  --text-soft: #aec9e8;
  --title-top: #c7edff;
  --title-bottom: #53b9ff;
  --button-top: #47b7ff;
  --button-bottom: #0f53c7;
  --button-dark-top: #2f4f84;
  --button-dark-bottom: #152a57;
  --key-top: #44669a;
  --key-bottom: #1b315d;
  --wrong-top: #cf6a56;
  --wrong-bottom: #8d2f2e;
  --correct-top: #6ca886;
  --correct-bottom: #2d6a51;
  --glow: 0 0 25px #5dc2ff66;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-lg: 0 20px 50px #000a;
  --shadow-sm: 0 6px 14px #0008;
  --ease: 0.22s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  color: var(--text-main);
  background:
    linear-gradient(#00000040, #00000040),
    url("../fon.png") center / cover no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

body::before,
body::after {
  display: none;
}

#hangman-app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
}

.screen {
  display: none;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: 24px 28px;
  flex-direction: column;
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.screen::before {
  display: none;
}

.screen.active {
  display: flex;
}

.start-content,
.result-content {
  position: relative;
  z-index: 1;
}

.start-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 12px;
  padding-top: 12px;
}

.game-title {
  font-family: "Arial Black", "Impact", sans-serif;
  font-size: clamp(2.7rem, 10vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  color: var(--title-top);
  text-shadow:
    0 2px 0 #1f6ecf,
    0 6px 0 #114894,
    0 11px 0 #0b336f,
    0 16px 22px #000b,
    0 0 28px #6fc6ff4d;
  transform: translateY(-2px);
}

.game-subtitle {
  max-width: 420px;
  color: #d8ecff;
  font-size: clamp(1rem, 2.8vw, 2rem);
  text-shadow: 0 2px 8px #000a;
}

.guest-status {
  color: var(--text-soft);
  font-size: 1rem;
}

.start-buttons {
  width: min(100%, 470px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.topic-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.topic-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #4f74ac;
  background: linear-gradient(180deg, #2e4f80 0%, #162c56 100%);
  box-shadow: inset 0 1px 0 #a8d4ff2d, 0 2px 6px #0008;
  color: #d4e8ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
}

.topic-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.topic-btn.active {
  border-color: #8ac8ff;
  background: linear-gradient(180deg, #5bbfff 0%, #1f74d9 100%);
  color: #f4fbff;
  box-shadow: 0 0 0 1px #9fd6ff88, 0 8px 14px #0a204f80;
}

.secondary-buttons {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.secondary-buttons .btn {
  flex: none;
}

.btn {
  border: 1px solid #4d77b4;
  border-radius: var(--radius-sm);
  color: #f3f9ff;
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 14px 18px;
  text-shadow: 0 2px 5px #000a;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
  box-shadow: inset 0 1px 0 #d7f0ff55, inset 0 -3px 0 #0a244f, 0 7px 14px #0009;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, #ffffff28 0%, #ffffff08 40%, #00000000 62%);
  pointer-events: none;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(180deg, var(--button-top) 0%, #2477e0 45%, var(--button-bottom) 100%);
  box-shadow: inset 0 1px 0 #dbf4ff88, inset 0 -4px 0 #0d3f9a, 0 10px 20px #091a3b;
}

.btn-secondary,
.btn-hint {
  background: linear-gradient(180deg, var(--button-dark-top) 0%, var(--button-dark-bottom) 100%);
}

.start-stats {
  width: min(100%, 470px);
  margin-top: 4px;
  padding: 12px 18px;
  border-top: 1px solid #6ea6df44;
  border-bottom: 1px solid #6ea6df33;
  display: flex;
  justify-content: space-between;
  color: #c4def9;
  font-weight: 700;
}

.start-stats strong {
  color: #f6fbff;
}

.guest-panel {
  width: min(100%, 470px);
  border-top: 1px solid #6ea6df33;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guest-panel .guest-status {
  font-size: 1.05rem;
  color: #cfe4fb;
}

.audio-controls {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #5e8fc248;
  background: linear-gradient(180deg, #18335f5a 0%, #10244552 100%);
}

.audio-control {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 8px;
  color: #d6e9ff;
  font-size: 0.9rem;
  font-weight: 700;
}

.audio-control input[type="range"] {
  width: 100%;
  accent-color: #69c0ff;
}

#screen-game {
  gap: 8px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.game-scene-title {
  position: absolute;
  left: 0;
  right: 50%;
  width: auto;
  max-width: none;
  top: 26px;
  margin: 0;
  font-family: "Arial Black", "Impact", sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 4.8rem);
  line-height: 0.9;
  color: #d7f4ff;
  text-shadow:
    0 3px 0 #1f74d6,
    0 9px 0 #0f4a9b,
    0 16px 20px #000b;
  letter-spacing: 0.02em;
  z-index: 3;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  box-sizing: border-box;
  padding-left: 28px;
  padding-right: 28px;
}

.game-header {
  display: flex;
  position: relative;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: 56px;
  z-index: 2;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border: 1px solid #4f77ad;
  border-radius: 10px;
  background: linear-gradient(180deg, #2e5081 0%, #152c56 100%);
  color: #d5e9ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease);
}

.btn-icon:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-sound {
  width: 36px;
  height: 36px;
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  margin-left: 10px;
  order: 0;
  border-radius: 10px;
}

#btn-menu {
  display: grid;
}

.topic-label {
  display: none;
}

.game-stats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: 0;
  margin-right: 0;
  order: 2;
}

.error-counter {
  color: #f2f7ff;
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.3rem);
}

.record-display {
  color: #9fc0e7;
  font-size: 0.82rem;
}

.game-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(640px, 1fr) minmax(700px, 1.08fr);
  align-items: end;
  gap: 20px;
  position: relative;
  z-index: 1;
  width: min(100%, 1580px);
  margin-inline: auto;
  padding-top: 122px;
}

.hangman-container {
  grid-column: 2;
  width: min(100%, 950px);
  aspect-ratio: 3 / 2;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  align-self: end;
  transform: translateY(62px);
  pointer-events: none;
}

.hangman-container.hangman-frames-mode {
  transform: translateY(88px);
}

.hangman-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 4px #0008);
}

.hangman-part {
  opacity: 0;
  transition: opacity 0.26s ease;
}

.hangman-part.visible {
  opacity: 1;
}

.hangman-art-layer {
  image-rendering: auto;
}


.word-display {
  grid-area: word;
  grid-column: 1;
  align-self: end;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 74px;
  width: min(100%, 900px);
  padding-left: 0;
  margin-inline: auto;
  transform: translateY(-120px);
}

.game-footer .word-display {
  grid-column: 1;
  justify-self: center;
}

.letter-cell {
  width: 56px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #eef8ff;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 900;
  text-shadow: 0 2px 8px #000b;
  border-bottom: 4px solid #e5f2ff;
  text-transform: uppercase;
  opacity: 1;
  animation: none !important;
  transition: none !important;
}

.letter-cell.revealed {
  color: #f5fcff;
  border-bottom-color: #7fd0ff;
  box-shadow: inset 0 -4px 0 #7fd0ff55;
  text-shadow: 0 3px 10px #000c;
}

@keyframes cell-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-footer {
  display: grid;
  grid-template-columns: minmax(640px, 1.05fr) minmax(640px, 1fr);
  grid-template-areas:
    "word ."
    "keyboard ."
    "actions .";
  gap: 4px;
  width: min(100%, 1580px);
  margin-inline: auto;
  align-self: stretch;
  padding-bottom: 8px;
  z-index: 2;
  margin-top: -72px;
}

.action-row-game {
  grid-area: actions;
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
  justify-self: center;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  width: auto;
  margin: 0;
  padding: 0;
}

.action-row .btn {
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 240px;
  padding: 10px 14px;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
}

.action-row-top {
  display: flex;
  margin-left: auto;
  margin-right: 14px;
  order: 1;
  align-items: center;
}

#btn-menu-bottom {
  display: none !important;
}

.keyboard {
  grid-area: keyboard;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transform: translateY(-112px);
  width: min(100%, 900px);
  padding-left: 0;
  margin-inline: auto;
}

.keyboard-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.keyboard-row:nth-child(2) {
  margin-left: 18px;
}

.keyboard-row:nth-child(3) {
  margin-left: 34px;
}

.key {
  width: clamp(46px, 3.3vw, 62px);
  height: clamp(54px, 4vw, 70px);
  border: 1px solid #4a6fa8;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--key-top) 0%, var(--key-bottom) 100%);
  box-shadow: inset 0 1px 0 #d8f0ff2a, inset 0 -3px 0 #12264a, 0 5px 9px #0008;
  color: #ecf6ff;
  font-size: clamp(1.1rem, 1.45vw, 1.7rem);
  font-weight: 900;
  text-shadow: 0 2px 4px #000a;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
}

.key:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.key:active:not(:disabled) {
  transform: translateY(1px);
}

.key:disabled {
  opacity: 0.9;
  cursor: not-allowed;
}

.key.used {
  text-decoration: none;
}

.key-correct {
  background: linear-gradient(180deg, var(--correct-top) 0%, var(--correct-bottom) 100%) !important;
  border-color: #7dbe9b !important;
}

.key-wrong {
  background: linear-gradient(180deg, var(--wrong-top) 0%, var(--wrong-bottom) 100%) !important;
  border-color: #d58d84 !important;
  text-decoration-line: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #f2f8ff;
  text-decoration-skip-ink: none;
}

.result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.result-title {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  text-shadow: var(--shadow-sm);
}

.result-title.lose {
  color: #ffb4ad;
}

.result-word {
  color: #c8dff7;
}

.result-word-value {
  color: #f0f8ff;
  letter-spacing: 0.09em;
  font-weight: 900;
}

.result-buttons {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #020a1ccc;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  width: min(94vw, 760px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 24px;
  border: 1px solid #86bfff66;
  background:
    radial-gradient(circle at 12% -18%, #81d2ff50 0%, #00000000 40%),
    radial-gradient(circle at 88% 118%, #3e7eff45 0%, #00000000 42%),
    linear-gradient(165deg, #102b56f0 0%, #0c2146f4 52%, #091a39f4 100%);
  box-shadow:
    0 30px 70px #000c,
    inset 0 1px 0 #cae9ff4d,
    inset 0 -1px 0 #6eb3ff30,
    0 0 0 1px #9fd0ff25;
  padding: 26px;
  position: relative;
}

.modal-title {
  margin-bottom: 16px;
  padding-right: 46px;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  color: #f4fbff;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-shadow:
    0 8px 22px #0009,
    0 0 22px #77c8ff33;
}

.modal-body {
  color: #c3d9f4;
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px !important;
  left: auto !important;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid #90c5f55f;
  background: linear-gradient(180deg, #345f95 0%, #1a345f 100%);
  box-shadow: inset 0 1px 0 #e2f2ff5f, 0 9px 18px #0008;
}

.result-modal-body {
  display: grid;
  gap: 18px;
  padding: 12px 2px 4px;
}

.result-hero {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #8dbde748;
  background:
    linear-gradient(180deg, #2a51815f 0%, #10284845 100%);
  box-shadow: inset 0 1px 0 #d9efff30;
}

.result-chip {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ecf8ff;
  border: 1px solid #9fd4ff5a;
  background: linear-gradient(180deg, #72c6ff44 0%, #3a80d02c 100%);
}

.result-modal-body .result-word {
  margin: 0;
  padding: 10px 2px 2px;
  border: none;
  background: transparent;
  color: #dbeeff;
  font-size: 1.06rem;
  line-height: 1.4;
  text-align: left;
  display: grid;
  gap: 5px;
}

.result-word-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5c4e6;
  font-weight: 700;
}

.result-modal-body .result-word-value {
  margin-left: 0;
  color: #f7fcff;
  letter-spacing: 0.1em;
  font-weight: 900;
  text-shadow: 0 4px 14px #0009;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.result-modal-body .result-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.result-modal-body .result-buttons .btn {
  min-height: 54px;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  padding: 12px 16px;
  border-radius: 13px;
}

.modal-overlay[data-result=\"win\"] .modal-title {
  color: #eafff3;
}

.modal-overlay[data-result=\"lose\"] .modal-title {
  color: #ffe8e5;
}

.modal-overlay[data-result=\"win\"] .result-chip {
  border-color: #8ce1b37a;
  background: linear-gradient(180deg, #57d38c4a 0%, #2f8e6245 100%);
}

.modal-overlay[data-result=\"lose\"] .result-chip {
  border-color: #ffb7ad75;
  background: linear-gradient(180deg, #ff9b8b3f 0%, #c35c4a33 100%);
}

.result-btn-next {
  box-shadow: inset 0 1px 0 #e3f7ff66, inset 0 -4px 0 #0e4b9f, 0 10px 22px #071938cc;
}

.result-btn-menu {
  box-shadow: inset 0 1px 0 #d7ebff45, inset 0 -4px 0 #132a51, 0 10px 22px #071938cc;
}

.rules-list {
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.rules-list li strong {
  color: #ffd3cc;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.topic-card {
  border-radius: 12px;
  border: 1px solid #476d9f;
  background: linear-gradient(180deg, #2a4a79 0%, #1a315c 100%);
  padding: 12px;
  text-align: center;
}

.topic-card-btn {
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #d3efff2b, inset 0 -3px 0 #102449, 0 5px 10px #0008;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
}

.topic-card-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.topic-card-btn:active {
  transform: translateY(1px);
}

.topic-card-name {
  display: block;
  font-weight: 800;
  color: #ecf7ff;
}

.topic-card-count {
  font-size: 0.82rem;
  color: #b6d3f2;
}

.rating-stats {
  color: #def1ff;
}

/* Result Modal: cleaner modern style */
.modal-overlay[data-result] {
  background:
    radial-gradient(circle at 50% 0%, #6dbdff22 0%, #00000000 45%),
    #020817cc;
  backdrop-filter: blur(8px) saturate(125%);
}

.modal-overlay[data-result] .modal {
  width: min(92vw, 560px);
  border-radius: 22px;
  border: 1px solid #9ecfff4d;
  background:
    linear-gradient(180deg, #132c52f2 0%, #0a1b39f6 100%);
  box-shadow:
    0 22px 50px #000b,
    inset 0 1px 0 #d8efff30;
  padding: 24px 22px 20px;
}

.modal-overlay[data-result] .modal-title {
  margin: 0 0 14px;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
}

.modal-overlay[data-result] .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.modal-overlay[data-result] .result-modal-body {
  gap: 14px;
  padding: 2px 0 0;
}

.modal-overlay[data-result] .result-hero {
  gap: 10px;
  border-radius: 14px;
  border: 1px solid #8cbce13f;
  background: linear-gradient(180deg, #315f9350 0%, #132c4f25 100%);
  padding: 14px;
}

.modal-overlay[data-result] .result-chip {
  justify-self: center;
  font-size: 0.76rem;
  padding: 5px 11px;
  letter-spacing: 0.05em;
}

.modal-overlay[data-result] .result-modal-body .result-word {
  text-align: center;
  gap: 3px;
  padding: 0;
}

.modal-overlay[data-result] .result-word-label {
  font-size: 0.74rem;
  color: #9db9d8;
}

.modal-overlay[data-result] .result-modal-body .result-word-value {
  font-size: clamp(1.22rem, 3vw, 1.52rem);
  letter-spacing: 0.11em;
}

.modal-overlay[data-result] .result-modal-body .result-buttons {
  grid-template-columns: 1fr;
  gap: 10px;
}

.modal-overlay[data-result] .result-modal-body .result-buttons .btn {
  width: 100%;
  min-height: 50px;
  font-size: 1.03rem;
}

.modal-overlay[data-result="win"] .modal-title {
  color: #eafff1;
}

.modal-overlay[data-result="lose"] .modal-title {
  color: #ffe9e7;
}

.modal-overlay[data-result="win"] .result-chip {
  border-color: #95e3b76b;
  background: linear-gradient(180deg, #5ccc9340 0%, #2f82593a 100%);
}

.modal-overlay[data-result="lose"] .result-chip {
  border-color: #ffb1a16a;
  background: linear-gradient(180deg, #ea8c7f3e 0%, #a84f4230 100%);
}

@media (max-width: 720px) {
  #hangman-app {
    width: 100%;
    margin: 0;
  }

  .screen {
    min-height: 100dvh;
    height: 100dvh;
    padding: 14px 12px;
    overflow: hidden;
  }

  #screen-game {
    padding-left: 8px;
    padding-right: 8px;
  }

  .secondary-buttons {
    flex-direction: column;
  }

  .start-stats {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  #btn-menu {
    display: grid;
  }

  #btn-menu-bottom {
    display: none;
  }

  .game-scene-title {
    top: 8px;
    font-size: clamp(1.5rem, 7.5vw, 2.3rem);
    line-height: 1;
    text-shadow: 0 2px 0 #1f74d6, 0 5px 0 #0f4a9b, 0 10px 14px #000b;
  }

  .game-header {
    min-height: 42px;
    padding: 2px 0;
    gap: 6px;
    align-items: center;
  }

  .btn-sound {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 16px;
    margin-left: 0;
  }

  .game-stats {
    margin-left: auto;
    gap: 6px;
    align-items: center;
  }

  .error-counter {
    font-size: 0.95rem;
  }

  .record-display {
    font-size: 0.76rem;
  }

  .action-row-top {
    display: none !important;
  }

  #btn-menu-bottom {
    display: none !important;
  }

  #btn-hint {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
  }

  .action-row .btn {
    min-width: 108px;
    max-width: 138px;
    padding: 7px 8px;
    font-size: 0.85rem;
  }

  .game-body {
    grid-template-columns: 1fr;
    width: 100%;
    padding-top: 28px;
    gap: 8px;
    flex: 0 0 auto;
  }

  .hangman-container {
    grid-column: 1;
    width: 100%;
    max-width: none;
    height: 50dvh;
    min-height: 280px;
    aspect-ratio: auto;
    transform: translateY(0) !important;
    margin-inline: auto;
  }

  .hangman-container.hangman-frames-mode {
    transform: translateY(0) !important;
  }

  .word-display {
    transform: none;
    min-height: 52px;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 2px;
    margin-top: -20px;
  }

  #screen-game {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #screen-game .game-body,
  #screen-game .game-footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .game-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 5px;
    margin-top: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    align-content: end;
    transform: translateY(-56px);
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
    outline: none !important;
  }

  .game-footer::before,
  .game-footer::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .word-display,
  .keyboard,
  .keyboard-row,
  .action-row-game {
    grid-area: auto !important;
    grid-column: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    outline: none !important;
  }

  .game-footer > * {
    background-color: transparent !important;
    backdrop-filter: none !important;
  }

  .keyboard {
    width: calc(100vw - 20px);
    max-width: 380px;
    align-items: center;
    padding-left: 0;
    transform: none;
    gap: 6px;
    margin-inline: auto;
    margin-top: -6px;
  }

  .keyboard-row {
    width: 100%;
    display: grid;
    gap: 2px;
  }

  .keyboard-row:nth-child(1) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .keyboard-row:nth-child(2) {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .keyboard-row:nth-child(3) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .keyboard-row:nth-child(2),
  .keyboard-row:nth-child(3) {
    margin-left: 0;
  }

  .key {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 50px;
    font-size: 1.34rem;
    border-radius: 9px;
    padding: 0;
  }

  .letter-cell {
    width: 28px;
    height: 40px;
    font-size: 1.65rem;
    border-bottom-width: 3px;
  }

  .action-row {
    width: auto;
    justify-content: flex-end;
    gap: 8px;
  }

  .result-modal-body .result-buttons {
    grid-template-columns: 1fr;
  }

  .action-row-game {
    justify-content: center;
    margin-top: 6px;
  }
}

@media (max-width: 420px) {
  .screen {
    padding: 10px 8px;
  }

  .game-header {
    padding: 2px 0;
    gap: 4px;
  }

  .topic-label {
    font-size: 0.95rem;
  }

  .record-display {
    display: none;
  }

  .hangman-container {
    padding: 0;
    width: 100%;
    height: 50dvh;
    min-height: 240px;
    aspect-ratio: auto;
  }

  .keyboard-row {
    gap: 1px;
  }

  .key {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 46px;
    font-size: 1.28rem;
  }

  .keyboard {
    width: calc(100vw - 14px);
    max-width: 346px;
    margin-top: -6px;
  }

  #screen-game {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .game-footer {
    transform: translateY(-48px);
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    outline: none !important;
  }

  .letter-cell {
    width: 24px;
    height: 34px;
    font-size: 1.5rem;
  }
}