.game-section {
  width: min(1280px, calc(100% - 28px));
  padding-block: 34px 84px;
}

.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-light);
  padding: 12px 14px;
}

.game-score-cluster,
.game-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.game-score-cluster > span {
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.game-score-cluster strong {
  margin-left: 5px;
  color: var(--ink);
  font-size: .95rem;
  letter-spacing: 0;
}

#game-lives { color: #57b96b; letter-spacing: .12em; }

.game-tool-button,
.game-start-button,
.game-settings-save {
  min-height: 42px;
  border: 1px solid var(--control-bg);
  border-radius: 10px;
  background: var(--control-bg);
  padding: 0 16px;
  color: var(--control-fg);
  cursor: pointer;
  font-weight: 850;
}

.game-tool-button:hover,
.game-tool-button:focus-visible,
.game-start-button:hover,
.game-start-button:focus-visible,
.game-settings-save:hover,
.game-settings-save:focus-visible {
  border-color: var(--control-hover);
  background: var(--control-hover);
  color: var(--control-fg);
  outline: 3px solid color-mix(in srgb, var(--control-bg) 25%, transparent);
  outline-offset: 2px;
}

.game-tool-button:disabled { cursor: not-allowed; opacity: .42; }

.alien-game-shell {
  overflow: hidden;
  border: 1px solid rgba(229, 201, 104, .38);
  border-radius: 24px;
  background: #09130c;
  box-shadow: 0 28px 85px rgba(4, 12, 7, .3);
}

.alien-game-stage {
  position: relative;
  height: clamp(360px, 42vw, 480px);
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(to bottom, rgba(3, 12, 6, .06) 0%, rgba(4, 14, 8, .1) 48%, rgba(2, 9, 5, .86) 100%),
    url("../assets/mandarin-game-forest.jpg") center / cover no-repeat;
}

.game-sky-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 214, 102, .18), transparent 28%),
    linear-gradient(to bottom, transparent 55%, rgba(3, 13, 6, .7));
  pointer-events: none;
}

.falling-brick-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.game-brick {
  --brick-y: -120px;
  position: absolute;
  top: 0;
  left: var(--brick-x, 50%);
  display: grid;
  width: clamp(150px, 22vw, 250px);
  min-height: 78px;
  place-items: center;
  transform: translate3d(-50%, var(--brick-y), 0);
  border: 4px solid #4a2c18;
  border-radius: 8px;
  background:
    linear-gradient(25deg, transparent 46%, rgba(69, 38, 18, .7) 48% 51%, transparent 53%) 24% 42% / 42px 34px,
    linear-gradient(-22deg, transparent 46%, rgba(255, 218, 144, .18) 48% 51%, transparent 53%) 75% 58% / 54px 42px,
    linear-gradient(145deg, #b86a35 0%, #7e4425 58%, #4c2b1d 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 217, 143, .2), 0 12px 22px rgba(0, 0, 0, .4);
  padding: 12px 16px;
  color: #fff6de;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72);
  will-change: transform;
  pointer-events: auto;
}

.game-brick.phrase { width: clamp(230px, 38vw, 440px); }
.game-brick-prompt {
  display: grid;
  width: 100%;
  place-items: center;
  border-color: rgba(255, 237, 181, .36);
  border-radius: 7px;
  background: rgba(34, 16, 7, .18);
  padding: 7px 9px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-shadow: inherit;
  touch-action: manipulation;
}
.game-brick-prompt:hover,
.game-brick-prompt:focus-visible { border-color: #fff2b8; background: rgba(255, 235, 162, .16); outline: 2px solid #fff2b8; outline-offset: 2px; }
.game-brick-copy {
  min-height: 30px;
  margin-top: 7px;
  border-color: rgba(255, 239, 183, .62);
  border-radius: 99px;
  background: rgba(20, 9, 4, .66);
  padding: 4px 13px;
  color: #fff6de;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: inherit;
  text-transform: uppercase;
  touch-action: manipulation;
}
.game-brick-copy:hover,
.game-brick-copy:focus-visible { border-color: #fff2b8; background: #3b1e0d; outline: 2px solid #fff2b8; outline-offset: 2px; }
.game-brick.symbols strong { font: 800 clamp(1.45rem, 3vw, 2.35rem)/1.25 var(--serif-sc); }
.game-brick.pinyin strong { font-size: clamp(.95rem, 2vw, 1.35rem); line-height: 1.3; }
.game-brick small { display: block; margin-top: 3px; color: #ffe6a4; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.game-brick.zapped { animation: brick-zap .3s ease-out forwards; }
.game-brick.missed { animation: brick-miss .35s ease-in forwards; }

@keyframes brick-zap {
  35% { filter: brightness(2.3) saturate(1.6); transform: translate3d(-50%, var(--brick-y), 0) scale(1.08); }
  100% { filter: brightness(2.8); opacity: 0; transform: translate3d(-50%, var(--brick-y), 0) scale(.12) rotate(18deg); }
}

@keyframes brick-miss {
  to { opacity: 0; transform: translate3d(-50%, calc(var(--brick-y) + 70px), 0) rotate(10deg); }
}

.game-alien {
  position: absolute;
  bottom: 4px;
  left: 50%;
  z-index: 3;
  width: clamp(125px, 16vw, 175px);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 18px rgba(111, 255, 128, .35));
  pointer-events: none;
}

.game-alien svg { display: block; width: 100%; height: auto; overflow: visible; }
.alien-shadow { fill: rgba(0, 0, 0, .45); }
.alien-body { fill: #2d8d4a; stroke: #102f21; stroke-width: 5; }
.alien-arm { fill: none; stroke: #76dc62; stroke-linecap: round; stroke-width: 14; }
.alien-finger { fill: none; stroke: #95ef79; stroke-linecap: round; stroke-width: 6; }
.alien-head { fill: url(#alien-head-glow); stroke: #123b27; stroke-width: 6; }
.alien-eye { fill: #08120e; stroke: #b9ff9b; stroke-width: 2; }
.alien-eye-glint { fill: #e9ffd8; }
.alien-mouth { fill: none; stroke: #174a2b; stroke-linecap: round; stroke-width: 5; }
.alien-emitter { fill: #f6df79; filter: drop-shadow(0 0 8px #e8ff91); }
.game-alien.hit { animation: alien-hit .38s ease; }

@keyframes alien-hit {
  25% { transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 0 24px #ff684f); }
  65% { transform: translateX(-50%) rotate(6deg); }
}

.game-laser {
  position: absolute;
  z-index: 5;
  display: none;
  width: 6px;
  border-radius: 99px;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, #d8ff8e, #fff6ad 45%, rgba(255,255,255,.9));
  box-shadow: 0 0 8px #c8ff6c, 0 0 18px #65ff72, 0 0 32px rgba(101,255,114,.75);
  pointer-events: none;
}

.game-laser.firing { display: block; animation: laser-flash .28s ease-out; }
@keyframes laser-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.game-burst {
  position: absolute;
  z-index: 6;
  display: none;
  color: #fff5a8;
  font-size: 4.5rem;
  line-height: 1;
  text-shadow: 0 0 14px #f3ff8d, 0 0 30px #74ff77;
  pointer-events: none;
}

.game-burst.active { display: block; animation: burst .34s ease-out forwards; }
@keyframes burst { from { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(42deg); } }

.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(3, 12, 6, .5);
  padding: 20px;
  backdrop-filter: blur(5px);
}

.game-overlay[hidden] { display: none; }
.game-overlay-card {
  width: min(470px, 100%);
  border: 1px solid rgba(255, 236, 163, .38);
  border-radius: 22px;
  background: rgba(7, 22, 12, .88);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .45);
  padding: 30px;
  color: #f7f6e9;
  text-align: center;
}

.game-kicker { color: #e6c470; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.game-overlay-card h2 { margin: 13px 0 9px; color: #f7f6e9; font: 750 clamp(1.7rem, 4vw, 2.7rem)/1.06 var(--serif-sc); }
.game-overlay-card p { margin: 0 auto 22px; max-width: 360px; color: rgba(247,246,233,.72); font-size: .9rem; }

.game-answer-panel {
  position: relative;
  z-index: 8;
  border-top: 1px solid rgba(229, 201, 104, .28);
  background: rgba(5, 16, 9, .98);
  padding: 14px;
}

#game-question-label { margin: 0 0 8px; color: rgba(242, 247, 237, .58); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.game-answer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.game-answer {
  position: relative;
  display: grid;
  gap: 5px;
  place-content: center;
  min-height: 58px;
  border: 1px solid rgba(210, 229, 206, .23);
  border-radius: 12px;
  background: #17261b;
  padding: 9px 12px;
  color: #f5f7ed;
  cursor: pointer;
  font-size: clamp(.72rem, 1.2vw, .88rem);
  font-weight: 750;
  line-height: 1.25;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.game-answer:hover,
.game-answer:focus-visible { border-color: #c7e8b5; background: #294b31; outline: 2px solid #e6c470; outline-offset: 2px; }
.game-answer.correct { border: 2px solid #8ff05a; background: #266337; color: #f7ffe9; box-shadow: 0 9px 24px rgba(115, 238, 84, .32); transform: scale(1.035); }
.game-answer.correct::after { content: "✓ Correct"; color: #caffaa; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.game-answer.wrong { border: 2px solid #ff776a; background: #7a281f; color: #fff2ed; box-shadow: 0 7px 18px rgba(255, 94, 78, .24); }
.game-answer.wrong .game-answer-text { text-decoration: line-through; text-decoration-thickness: 2px; }
.game-answer.wrong::after { content: "✕ Incorrect"; color: #ffc0b7; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.game-answer:disabled { cursor: default; opacity: .58; }
.game-answer.correct:disabled { opacity: 1; }

.game-status { min-height: 18px; margin: 8px 0 0; color: #dfc773; font-size: .72rem; font-weight: 800; text-align: center; }

.game-settings {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(3, 10, 6, .8);
  padding: 20px;
  backdrop-filter: blur(10px);
}

.game-settings[hidden] { display: none; }
.game-settings-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper-light);
  box-shadow: var(--shadow);
  padding: 24px;
}

.game-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.game-settings-heading h2 { margin: 0; color: var(--ink); font: 750 1.8rem var(--serif-sc); }
.game-settings-heading button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.4rem; }
.game-settings-card fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.game-settings-card legend { padding: 0 6px; color: var(--ink); font-size: .78rem; font-weight: 900; }
.game-settings-card label { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 99px; padding: 0 12px; color: var(--ink); cursor: pointer; font-size: .78rem; font-weight: 750; }
.game-settings-card label:has(input:checked) { border-color: var(--control-bg); background: var(--control-bg); color: var(--control-fg); }
.game-settings-card input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--control-bg); }
.game-settings-error { min-height: 18px; margin: 6px 0; color: #a33d32; font-size: .78rem; font-weight: 800; }
.game-settings-save { width: 100%; margin-top: 4px; }

@media (max-width: 800px) {
  .game-section { width: min(100% - 16px, 1280px); padding-top: 20px; }
  .game-toolbar { align-items: stretch; flex-direction: column; }
  .game-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .game-score-cluster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-score-cluster > span { min-width: 0; padding-inline: 8px; text-align: center; }
  .alien-game-stage { height: clamp(360px, 50vh, 430px); min-height: 360px; }
  .game-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-brick { width: clamp(145px, 46vw, 230px); }
  .game-brick.phrase { width: min(82vw, 390px); }
  .game-alien { width: 125px; }
}

@media (max-width: 440px) {
  .game-score-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-score-cluster > span { display: grid; gap: 2px; }
  .game-score-cluster strong { margin-left: 0; }
  .alien-game-stage { height: clamp(340px, 48vh, 390px); min-height: 340px; }
  .game-answer-panel { padding: 10px; }
  .game-answer { min-height: 64px; padding: 8px; }
  .game-overlay-card { padding: 24px 18px; }
  .game-settings-card { padding: 18px 14px; }
  .game-settings-card fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-settings-card label { justify-content: center; padding-inline: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .game-brick,
  .game-alien,
  .game-laser,
  .game-burst { animation-duration: .01ms !important; }
}

/* Universal button-border contract: every enabled button renders a visible 1px border. */
button:not(:disabled) {
  border-style: solid !important;
  border-width: 1px !important;
}