.lesson-layout.game-layout { display: block; max-width: 860px; margin: 0 auto; }
.lesson-visual.game-visual { padding: 0; border: 0; background: transparent; box-shadow: none; }
.game-visual .visual-toolbar { margin-bottom: 20px; }
.game-visual .media-tabs { margin-right: 0; }
.one-east-game { --game-green: #276e56; --game-ink: #233f36; color: var(--game-ink); scroll-margin-top: 94px; }
.one-east-game button { -webkit-tap-highlight-color: transparent; }
.game-task-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5b7469; font-size: 12px; line-height: 24px; }
.game-eyebrow { margin: 0; color: #497466; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.game-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 8px 0 12px; }
.game-progress span { height: 5px; border-radius: 3px; background: #dbe5df; }
.game-progress .is-current { background: #66a799; }
.game-progress .is-done { background: var(--game-green); }
.game-question-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding-bottom: 12px; }
#game-question { min-width: 0; margin: 0; color: var(--game-ink); font-family: inherit; font-size: 24px; line-height: 1.5; letter-spacing: 0; }
#game-question:focus { outline: none; }
.game-tools { display: flex; flex: 0 0 auto; gap: 4px; }
.game-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; pointer-events: none; }
.game-tool { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 1px solid #c7d8d0; border-radius: 6px; color: var(--game-green); background: #f8fcfa; }
.game-tool:not(:disabled):hover, .game-tool[aria-pressed="true"] { border-color: #7aab95; background: #e2efe8; }
.game-tool:disabled { opacity: .38; }
.game-reference { margin: -4px 0 12px; color: #657e72; font-family: "Songti SC", serif; font-size: 18px; line-height: 1.6; text-align: center; }
.game-scene { position: relative; width: 100%; max-width: 100%; min-width: 0; height: 254px; overflow: hidden; background: #eaf5f7; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s; }
.game-scene.is-drag-over { outline-color: #4f967a; }
.game-pair { display: grid; grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr); align-items: center; justify-content: center; gap: 14px; padding: 20px 36px; }
.game-pair-half { min-width: 0; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.game-pair-half > img { width: 100%; height: 156px; object-fit: contain; mix-blend-mode: multiply; }
.game-pair-half strong { font-family: "Songti SC", serif; font-size: 29px; font-weight: 700; }
.game-pair-link { color: #55776c; font-family: "STKaiti", "KaiTi", serif; font-size: 34px; text-align: center; }
.game-empty { border: 2px dashed #9abac0; border-radius: 8px; background: #f4fafb; }
.game-question-mark { color: #78a4ad; font-size: 62px; line-height: 1.3; }
.game-slot-name { color: #698b92; font-size: 12px; }
.game-arrival { animation: game-arrive .4s ease-out; }
.game-landscape { height: auto; min-height: 190px; max-height: 360px; aspect-ratio: 2 / 1; background: #e6f1ed; }
.game-landscape > img { width: 100%; height: 100%; object-fit: contain; }
.game-scene-mask { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed #a8c8c3; background: #e7f2f0; }
.game-scene-mask > span { color: #87aca4; font-size: 48px; }
.game-scene-mask > small { color: #557c70; font-size: 16px; }
.game-weather-mask { inset: 16% 23%; }
.game-garden-weather { inset: 0 50% 0 0; background: #e5f0f6; }
.game-garden-flower { inset: 0 0 0 50%; background: #edf2e5; }
.game-scene-verse { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); padding: 5px 10px; color: #284f3d; background: rgba(255, 255, 255, .92); font-family: "Songti SC", serif; font-size: 22px; line-height: 1.6; white-space: nowrap; }
.game-scene-verse span { color: #a34756; }
.game-scene-steps { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.game-scene-steps span { padding: 3px 9px; border: 1px solid #ccdad2; border-radius: 4px; color: #688078; background: #fff; font-size: 12px; }
.game-scene-steps .is-filled { color: #fff; border-color: var(--game-green); background: var(--game-green); }
.game-mist-motion { position: absolute; inset: 30% -15% 12%; pointer-events: none; background: linear-gradient(transparent 20%, rgba(255, 255, 255, .34) 42%, transparent 56%, rgba(255, 255, 255, .25) 74%, transparent); animation: game-mist 7s ease-in-out infinite alternate; }
.game-rain-motion { position: absolute; inset: -70px -20px; pointer-events: none; opacity: .35; background-image: repeating-linear-gradient(110deg, transparent 0 46px, #effaff 47px 48px, transparent 49px 91px); background-size: 92px 64px; animation: game-rain .8s linear infinite; }
.game-verse-board { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 18px; background: #eef3f9; }
.game-meaning-board { height: auto; min-height: 190px; overflow: visible; }
.game-match-board { height: auto; min-height: 190px; overflow: visible; padding: 14px 12px; gap: 10px; }
.game-match-board .game-reference { margin: 0; }
.game-matched-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; min-width: 0; }
.game-matched-scene { min-width: 0; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid #c9dcd5; border-radius: 6px; color: #557267; background: rgba(255, 255, 255, .72); text-align: center; }
.game-matched-scene img { width: 100%; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.game-matched-scene > span:last-child { font-size: 13px; line-height: 1.45; }
.game-verse-board p { display: flex; align-items: center; gap: 4px; margin: 0; color: #314d6b; font-family: "Songti SC", serif; font-size: 28px; line-height: 1.6; }
.game-word-slot { display: inline-grid; place-items: center; width: 43px; height: 50px; flex: 0 0 auto; border: 1px dashed #afbfcf; border-radius: 5px; color: #8598b2; background: #f7fafd; }
.game-word-slot.is-current { border: 2px solid #668baa; }
.game-word-slot.is-filled { color: var(--game-green); border: 1px solid #8db7a1; background: #f4faf4; }
.game-order-board { gap: 16px; }
.game-order-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 450px); gap: 8px; }
.game-order-slot { min-width: 0; min-height: 52px; padding: 4px 8px; border: 1px dashed #91a9c1; border-radius: 6px; color: #6a86a6; background: #f7fafd; font-family: "Songti SC", serif; font-size: 24px; white-space: nowrap; }
.game-order-slot:disabled { opacity: 1; }
.game-order-slot.is-filled { border-style: solid; border-color: #8daeb5; color: #235646; background: #fff; }
.game-order-tools { height: 48px; }
.game-verse-check { color: var(--game-green); font-size: 14px; }
.game-feedback { min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 8px 6px; color: var(--game-green); font-size: 15px; line-height: 1.65; text-align: center; }
.game-feedback.is-incorrect { color: #9a5a2b; }
.game-feedback.is-hint { color: #526b95; }
.game-notice { margin: 0 0 10px; color: #955036; font-size: 12px; text-align: center; }
.game-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.game-option { position: relative; min-width: 0; overflow: hidden; border: 2px solid #d3e0da; border-radius: 8px; background: #fff; }
.game-option.is-correct { border-color: #408365; background: #edf6f0; }
.game-option.is-used .game-choice { opacity: .4; }
.game-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; min-width: 0; min-height: 116px; padding: 10px; border: 0; color: #294f43; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-choice:disabled { opacity: 1; }
.game-choice:not(:disabled):hover { background: #eef7f5; }
.game-choice:focus-visible { outline-offset: -4px; }
.game-option-art { width: 100%; height: 110px; object-fit: contain; pointer-events: none; }
.game-option-word { max-width: 100%; font-size: 21px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.game-option-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--game-green); }
.game-option-check .game-icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.game-word-listen { display: grid; place-items: center; width: 100%; height: 48px; padding: 0; border: 0; border-top: 1px solid #e3ebe7; background: #f6faf8; }
.game-word-listen:hover { background: #e5f1eb; }
.game-word-listen .game-icon { width: 18px; height: 18px; }
.game-color-swatch { width: 53px; height: 53px; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #dde4df; }
.game-word-options .game-choice { min-height: 74px; }
.game-recall { min-height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 14px 0; }
.game-recall > p { margin: 0; color: #597467; font-size: 17px; }
.game-command, .game-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 8px 18px; border: 1px solid var(--game-green); border-radius: 6px; color: #fff; background: var(--game-green); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.game-command .game-icon { filter: brightness(0) invert(1); }
.game-command:not(:disabled):hover { background: #215c48; }
.game-command:disabled { opacity: .42; }
.game-secondary { color: var(--game-green); background: transparent; }
.game-footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #d9e4dd; }
.game-footer > .game-command { margin-left: auto; }
.game-skip { min-height: 48px; padding: 6px; border: 0; color: #6b7e73; background: transparent; font-size: 13px; }
.game-drag-ghost { position: fixed; z-index: 100; transform: translate(-50%, -50%); min-width: 64px; padding: 10px 16px; border: 2px solid #62967d; border-radius: 8px; color: #204e3e; background: #fff; box-shadow: 0 8px 22px rgba(29, 67, 51, .16); font-size: 22px; font-weight: 700; pointer-events: none; }
.game-reset-dialog { max-width: calc(100vw - 32px); padding: 24px; border: 1px solid #bdcfc3; border-radius: 8px; color: #234435; background: #fff; }
.game-reset-dialog::backdrop { background: rgba(22, 39, 31, .3); }
.game-reset-dialog h3 { margin: 0 0 24px; font-family: inherit; font-size: 21px; }
.game-reset-dialog > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.game-results { position: relative; text-align: center; }
.game-unfinished-count { padding: 30px 0 18px; color: #647f71; font-size: 18px; }
.game-unfinished-count strong { color: var(--game-green); font-size: 32px; }
.game-finished-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: 220px; }
.game-finished-art img { width: 100%; height: 100%; object-fit: cover; }
.game-result-seal { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 18px 0 13px; transform: rotate(-8deg); border: 2px solid #b76368; color: #a4515b; font-family: "STKaiti", serif; font-size: 23px; }
.game-results h2 { margin: 8px 0 20px; font-family: inherit; font-size: 27px; line-height: 1.5; }
.game-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 15px 0; border-top: 1px solid #dbe3da; border-bottom: 1px solid #dbe3da; }
.game-result-stats dt { color: #698172; font-size: 12px; }
.game-result-stats dd { margin: 7px 0 0; color: var(--game-green); font-size: 23px; font-weight: 700; }
.game-results-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 14px 0 22px; padding: 0; list-style: none; text-align: left; }
.game-results-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid #e0e7de; font-size: 13px; }
.game-results-list li > span:last-child { color: #8a7961; font-size: 12px; }
.game-results-list li > .is-done { color: #4d7e66; }
.game-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@keyframes game-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes game-mist { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes game-rain { to { background-position: -12px 64px; } }
@media (max-width: 760px) {
  .lesson-page:has(.game-layout) { padding-top: 20px; }
  .lesson-page:has(.game-layout) .page-topline { margin-bottom: 16px; }
  .game-visual .visual-toolbar { margin-bottom: 16px; }
  .game-question-row { flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
  #game-question { width: 100%; font-size: 22px; }
  .game-tools { margin-left: auto; }
  .game-progress { margin-bottom: 10px; }
  .game-scene { height: 190px; }
  .game-pair { grid-template-columns: minmax(0, 1fr) 27px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .game-pair-half { height: 164px; }
  .game-pair-half > img { height: 113px; }
  .game-pair-half strong { font-size: 26px; }
  .game-pair-link { font-size: 27px; }
  .game-landscape { height: auto; min-height: 185px; }
  .game-match-board { min-height: 190px; padding: 10px 8px; }
  .game-matched-scene { min-height: 112px; padding: 6px; }
  .game-matched-scene img { height: 76px; }
  .game-scene-verse { font-size: 18px; }
  .game-verse-board { gap: 14px; padding: 14px 8px; }
  .game-verse-board p { font-size: 23px; }
  .game-word-slot { width: 34px; height: 43px; }
  .game-order-slot { min-height: 48px; padding: 4px 2px; font-size: 21px; }
  .game-options { gap: 8px; }
  .game-choice { padding: 7px; min-height: 106px; }
  .game-option-art { height: 78px; }
  .game-option-word { font-size: 18px; }
  .game-word-options .game-option-word { font-size: 17px; }
  .game-feedback { min-height: 57px; font-size: 14px; }
  .game-footer { gap: 6px; }
  .game-command { padding: 8px 12px; }
  .game-finished-art { height: 140px; gap: 7px; }
  .game-results h2 { font-size: 24px; }
  .game-results-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .one-east-game *, .one-east-game *::before, .one-east-game *::after { animation: none !important; transition: none !important; }
}