/* 새 영단어 게임 모드 — 문항 데이터는 game-mode-content.js에서 별도로 관리한다. */
#view-game .gm-mode-launch { cursor: pointer; font: inherit; text-align: left; }
#view-game .gm-mode-launch:focus-visible { outline: 3px solid rgba(79, 114, 242, .34); outline-offset: 2px; }

.gm-mode-shell { min-height: min(62vh, 560px); color: #17233C; }
.gm-mode-shell .game-top { margin-bottom: 22px; }
.gm-mode-stage { max-width: 760px; margin: 0 auto; padding: 20px 8px 16px; }
.gm-mode-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gm-mode-eyebrow { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid #D8E1EB; border-radius: 4px; color: #65738A; background: #F7F9FC; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.gm-mode-card-timer { display: inline-flex; align-items: center; justify-content: center; min-width: 43px; min-height: 24px; padding: 0 7px; border: 1px solid #C8D5E1; border-radius: 4px; color: #40566E; background: #F8FAFC; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-mode-card-timer.is-danger { border-color: #E07070; color: #B52424; background: #FFF4F3; }
.gm-mode-prompt { margin: 13px 0 20px; color: #17233C; font-size: clamp(20px, 3vw, 30px); font-weight: 800; line-height: 1.38; letter-spacing: -.045em; text-align: center; word-break: keep-all; }
.gm-mode-hint { margin: -10px 0 20px; color: #65738A; font-size: 13px; line-height: 1.55; text-align: center; }
.gm-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm-mode-option { position: relative; display: flex; align-items: center; min-height: 72px; padding: 13px 14px; border: 1px solid #DCE4EE; border-radius: 10px; background: #fff; color: #17233C; cursor: pointer; text-align: left; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 120ms ease; }
.gm-mode-option:hover { border-color: #98AAC0; background: #F7F9FC; box-shadow: 0 5px 14px rgba(23, 35, 60, .07); }
.gm-mode-option:active { transform: translateY(1px); }
.gm-mode-option:focus-visible { outline: 3px solid rgba(79, 114, 242, .28); outline-offset: 2px; }
.gm-mode-option[disabled] { cursor: default; opacity: .72; }
.gm-mode-option.is-correct { border-color: #159A68; background: #F0FBF6; color: #126A4A; }
.gm-mode-option.is-wrong { border-color: #D65A5A; background: #FFF5F4; color: #A23737; }
.gm-mode-option-number { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; margin-right: 11px; border: 1px solid #B7C5D5; border-radius: 50%; color: #4C6077; background: #fff; font-size: 11px; font-weight: 800; }
.gm-mode-number-key-hint { position: absolute; top: -21px; left: 8px; z-index: 3; color: #9AA7B4; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.95); animation: gm-mode-number-key-hint 3s ease-in-out both; }
@keyframes gm-mode-number-key-hint { 0%, 100% { opacity: 0; transform: translateY(3px); } 9%, 20% { opacity: .78; transform: translateY(0); } 14%, 25% { opacity: .14; } 39%, 50% { opacity: .78; transform: translateY(0); } 44%, 55% { opacity: .14; } 69%, 80% { opacity: .78; transform: translateY(0); } 74%, 85% { opacity: .14; } }
.gm-mode-option-copy { min-width: 0; }
.gm-mode-option-word { display: block; color: inherit; font-size: 18px; font-weight: 800; line-height: 1.25; }
.gm-mode-option-meaning { display: none; margin-top: 4px; color: #65738A; font-size: 13px; font-weight: 600; line-height: 1.35; }
.gm-mode-option.is-correct .gm-mode-option-meaning, .gm-mode-option.is-wrong .gm-mode-option-meaning { color: inherit; opacity: .82; }
.gm-mode-reviewing .gm-mode-option-meaning, .gm-mode-studying .gm-mode-option-meaning { display: block; }
.gm-mode-answer-label { display: none; width: max-content; margin-top: 7px; padding: 5px 8px; border: 2px solid #0E7950; border-radius: 4px; background: #159A68; color: #fff; font-size: 15px; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: .03em; box-shadow: 0 2px 0 rgba(8, 83, 53, .2); }
.gm-mode-reviewing .is-correct .gm-mode-answer-label, .gm-mode-studying .is-correct .gm-mode-answer-label { display: inline-flex; }
.gm-mode-feedback-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 640px; margin: 19px auto 23px; }
.gm-mode-feedback-slot:empty { display: none; }
.gm-mode-feedback { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; width: 100%; margin: 0; padding: 14px 17px; border: 2px solid #B7D9EE; border-radius: 8px; background: #EAF6FF; color: #28506D; font: inherit; font-size: 14px; line-height: 1.45; text-align: center; }
.gm-mode-feedback-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #2D709A; color: #fff; font-family: Georgia, serif; font-size: 25px; font-weight: 700; line-height: 1; }
.gm-mode-feedback-copy { display: grid; gap: 3px; justify-items: center; min-width: 0; }
.gm-mode-feedback b { color: #123B59; font-size: 18px; font-weight: 900; }
.gm-mode-feedback-copy > span { color: #3B607B; font-size: 13px; font-weight: 650; word-break: keep-all; }
.gm-mode-feedback.is-correct { border-color: #A9DCC8; background: #F1FBF6; }
.gm-mode-feedback.is-correct .gm-mode-feedback-mark { background: #159A68; }
.gm-mode-feedback.is-wrong { border-color: #B7D9EE; background: #EAF6FF; }
.gm-mode-feedback.is-advanceable { cursor: pointer; animation: gm-mode-feedback-pulse 1.05s ease-in-out infinite; box-shadow: 0 4px 0 #78AAC7; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 110ms ease; }
.gm-mode-feedback.is-advanceable:hover, .gm-mode-feedback.is-advanceable:focus-visible { border-color: #5A97BD; background: #DDF1FD; outline: none; transform: translateY(-1px); box-shadow: 0 5px 0 #5A97BD; }
.gm-mode-feedback.is-advanceable:active { transform: translateY(3px); box-shadow: 0 1px 0 #5A97BD; }
@keyframes gm-mode-feedback-pulse {
  0%, 100% { border-color: #111827; box-shadow: 0 4px 0 #111827, 0 0 0 0 rgba(17, 24, 39, .22); }
  50% { border-color: #B7D9EE; box-shadow: 0 4px 0 #78AAC7, 0 0 0 5px rgba(17, 24, 39, .13); }
}
.gm-mode-stage { position: relative; }
.gm-mode-correct-stamp { position: absolute; z-index: 8; top: 50%; left: 50%; display: grid; width: clamp(152px, 28vw, 236px); aspect-ratio: 1; place-items: center; background: transparent; box-shadow: none; color: #CE3D37; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-9deg) scale(.72); transition: opacity 130ms ease, transform 300ms cubic-bezier(.18,.86,.27,1.2); }
.gm-mode-correct-stamp.is-visible { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
.gm-mode-pen-ring { position: absolute; inset: 6%; border: 10px solid currentColor; border-radius: 48% 52% 51% 47% / 53% 45% 55% 47%; opacity: .96; transform: rotate(-7deg); }
.gm-mode-pen-ring::after { position: absolute; inset: -6px 2px 4px -5px; border: 2px solid rgba(206, 61, 55, .72); border-radius: inherit; content: ''; transform: rotate(8deg); }
.gm-mode-correct-stamp b { position: relative; z-index: 1; margin-top: 5px; font-family: 'Yeon Sung', cursive; font-size: 28px; font-weight: 700; letter-spacing: .05em; text-shadow: 1px 1px 0 rgba(117, 34, 30, .18); }
.gm-mode-correct-stamp em { min-height: 14px; margin-top: 2px; color: inherit; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .03em; }
.gm-mode-wrong-stamp { position: absolute; z-index: 9; top: 50%; left: 50%; display: grid; width: clamp(168px, 31vw, 252px); aspect-ratio: 1; place-items: center; background: transparent; box-shadow: none; color: #DC2626; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(8deg) scale(.7); }
.gm-mode-wrong-stamp.is-visible { animation: gm-mode-wrong-stamp 1.8s ease both; }
.gm-mode-pen-x { position: absolute; inset: 12%; display: block; }
.gm-mode-pen-x u { position: absolute; top: 48%; left: -4%; display: block; width: 108%; height: 12px; border-radius: 999px; background: currentColor; box-shadow: 1px 1px 0 rgba(127, 29, 29, .35); text-decoration: none; transform: rotate(46deg); }
.gm-mode-pen-x u:last-child { height: 10px; opacity: .9; transform: rotate(-43deg); }
.gm-mode-wrong-stamp b { position: relative; z-index: 1; align-self: end; margin-bottom: 5px; font-family: 'Yeon Sung', cursive; font-size: 28px; font-weight: 700; letter-spacing: .05em; text-shadow: 1px 1px 0 rgba(127, 29, 29, .18); }
@keyframes gm-mode-wrong-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(8deg) scale(.7); } 18%, 62% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(8deg) scale(1.06); } }
.gm-mode-review-count { margin: 10px auto 0; color: #A23737; font-size: 13px; font-weight: 700; text-align: center; }
.gm-mode-review-count b { color: #C91E1E; font-size: 1.2em; }
.gm-mode-review-translation { max-width: 700px; margin: -7px auto 15px; padding: 12px 14px; border: 1px solid #E1C9C5; border-left: 4px solid #C8423A; border-radius: 6px; background: #FFF9F7; color: #503E3B; text-align: left; }
.gm-mode-review-translation > span { display: block; margin-bottom: 5px; color: #A73D36; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.gm-mode-review-translation p { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.62; word-break: keep-all; }
.gm-mode-review-translation strong { color: #9C251F; font-size: 1.08em; font-weight: 900; }
.gm-mode-review-meaning { padding: 0 2px; background: #FFF19B; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.gm-mode-review-translation em { margin-left: 3px; color: #A73D36; font-size: .86em; font-style: normal; font-weight: 800; }
.gm-mode-studying .gm-mode-review-translation { border-color: #B9DFC9; border-left-color: #159A68; background: #F4FCF7; color: #28503E; }
.gm-mode-studying .gm-mode-review-translation > span, .gm-mode-studying .gm-mode-review-translation em, .gm-mode-studying .gm-mode-review-translation strong { color: #0E7950; }
.gm-mode-definition .gm-mode-definition-correct-meanings .gm-mode-option-meaning { display: block; margin-top: 7px; color: #126A4A; font-size: 18px; font-weight: 900; line-height: 1.35; }
.gm-mode-definition .gm-mode-definition-correct-meanings .gm-mode-option { min-height: 88px; }

.gm-mode-relation .gm-mode-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-mode-relation-question { margin: 15px 0 20px; text-align: center; }
.gm-mode-relation-target { margin: 0 0 6px; color: #425A73; font-size: clamp(19px, 2.7vw, 27px); font-weight: 800; line-height: 1.25; letter-spacing: -.035em; word-break: keep-all; }
.gm-mode-relation-target strong { color: #172E48; font-weight: 900; }
.gm-mode-relation-target em { color: #627991; font-size: .76em; font-style: normal; font-weight: 750; }
.gm-mode-relation-prompt { margin: 0; color: #263C55; font-size: clamp(18px, 2.25vw, 23px); font-weight: 800; letter-spacing: -.03em; line-height: 1.35; }
.gm-mode-relation .gm-mode-relation-correct-meanings .gm-mode-option-meaning, .gm-mode-relation .gm-mode-relation-review-meanings .gm-mode-option-meaning { display: block; margin-top: 7px; color: #5D2BA8; font-size: 18px; font-weight: 900; line-height: 1.35; }
.gm-mode-relation .gm-mode-relation-correct-meanings .gm-mode-option, .gm-mode-relation .gm-mode-relation-review-meanings .gm-mode-option { min-height: 86px; }
.gm-mode-relation .gm-mode-option.is-selected { border: 2px solid #315D88; background: #EAF2F8; color: #173A5C; box-shadow: 0 0 0 2px rgba(49, 93, 136, .15), inset 0 0 0 1px rgba(49, 93, 136, .07); }
.gm-mode-relation .gm-mode-option.is-selected .gm-mode-option-number { border-color: #315D88; color: #173A5C; }
.gm-mode-relation-status { margin-top: 12px; color: #3C5570; font-size: 16px; font-weight: 800; }
.gm-mode-relation-status b { color: #173A5C; font-size: 26px; line-height: .8; }
.gm-mode-speed-ox .gm-mode-stage { max-width: 660px; }
.gm-mode-speed-ox .gm-mode-prompt { min-height: 112px; display: grid; place-items: center; }
.gm-mode-ox-study { max-width: 560px; margin: 0 auto 2px; padding: 18px 22px 20px; border: 1px solid #D7E0E9; border-top: 3px solid #506B87; border-radius: 8px; background: #FCFDFC; text-align: center; box-shadow: 0 7px 18px rgba(23, 35, 60, .05); }
.gm-mode-ox-label { display: inline-block; color: #60758D; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.gm-mode-idiom-expression { display: block; margin-top: 7px; color: #172E48; font-size: clamp(26px, 4vw, 38px); font-weight: 900; line-height: 1.2; letter-spacing: -.04em; }
.gm-mode-ox-example { margin: 0 auto; color: #556A7F; font-size: 15px; font-style: italic; line-height: 1.55; }
.gm-mode-ox-example-only { max-width: 490px; padding: 7px 0 6px; font-size: clamp(17px, 2.2vw, 21px); }
.gm-mode-ox-example-idiom { color: #102E50; font-size: 1.14em; font-style: normal; font-weight: 900; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gm-mode-ox-claim { margin: 18px auto 0; padding: 12px 14px; border-top: 1px solid #E0E7ED; color: #40566E; }
.gm-mode-ox-claim span { display: block; margin-bottom: 4px; color: #718195; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.gm-mode-ox-claim strong { display: block; color: #172E48; font-size: clamp(20px, 3vw, 26px); font-weight: 800; line-height: 1.35; letter-spacing: -.045em; word-break: keep-all; }
.gm-mode-ox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gm-mode-ox { position: relative; display: grid; min-height: 104px; place-items: center; border: 1px solid #CBD7E3; border-radius: 11px; background: #fff; color: #263C55; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 120ms ease; }
.gm-mode-ox:hover { border-color: #718AA3; background: #F7F9FC; }
.gm-mode-ox:active { transform: translateY(1px); }
.gm-mode-ox b { font-family: Georgia, serif; font-size: 47px; font-weight: 700; line-height: .9; }
.gm-mode-ox span { margin-top: 8px; color: #65738A; font-size: 12px; font-weight: 700; }
.gm-mode-ox.is-correct { border-color: #159A68; background: #F0FBF6; color: #126A4A; }
.gm-mode-ox.is-wrong { border-color: #D65A5A; background: #FFF5F4; color: #A23737; }
.gm-mode-reviewing .gm-mode-ox.is-correct .gm-mode-answer-label { position: absolute; top: 9px; right: 9px; margin: 0; }
.gm-mode-countdown { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 18px; border: 1px solid #CBD7E3; border-radius: 50%; color: #243A58; background: #F7F9FC; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

.gm-mode-situation .gm-mode-prompt { max-width: 640px; margin-left: auto; margin-right: auto; }
.gm-mode-situation-topic { color: #C62828; font-weight: 900; }
.gm-mode-scene-example { max-width: 700px; margin: -4px auto 15px; padding: 10px 13px 11px; border: 1px solid #DEE6ED; border-left: 3px solid #718AA3; border-radius: 6px; background: #FAFBFC; color: #4E6174; text-align: left; }
.gm-mode-scene-example span { display: block; margin-bottom: 3px; color: #718195; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.gm-mode-scene-example strong { display: block; color: #263C55; font-size: 14px; font-weight: 700; line-height: 1.45; }
.gm-mode-scene-example small { display: block; margin-top: 3px; color: #748396; font-size: 12px; line-height: 1.45; word-break: keep-all; }
.gm-mode-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 700px; margin: 0 auto; gap: 9px; }
.gm-mode-key { position: relative; min-height: 94px; padding: 28px 11px 12px; border: 1px solid #DCE4EE; border-radius: 8px; background: #fff; color: #17233C; cursor: pointer; text-align: left; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 120ms ease; }
.gm-mode-key:hover { border-color: #96A9BD; background: #F7F9FC; box-shadow: 0 4px 12px rgba(23, 35, 60, .06); }
.gm-mode-key:active { transform: translateY(1px); }
.gm-mode-key:focus-visible { outline: 3px solid rgba(79, 114, 242, .28); outline-offset: 2px; }
.gm-mode-key.is-selected { border: 2px solid #315D88; background: #EAF2F8; color: #173A5C; box-shadow: 0 0 0 2px rgba(49, 93, 136, .16), inset 0 0 0 1px rgba(49, 93, 136, .08); }
.gm-mode-key.is-selected::after { content: '선택됨'; position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 3px; background: #315D88; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.gm-mode-key.is-selected .gm-mode-option-number { border-color: #315D88; background: #fff; color: #173A5C; }
.gm-mode-key.is-correct { border-color: #159A68; background: #F0FBF6; color: #126A4A; }
.gm-mode-key.is-wrong { border-color: #D65A5A; background: #FFF5F4; color: #A23737; }
.gm-mode-reviewing .gm-mode-key.is-correct { z-index: 1; opacity: 1; border-width: 3px; background: #EBFFF5; box-shadow: 0 0 0 3px rgba(21, 154, 104, .16), 0 9px 18px rgba(21, 154, 104, .16); transform: scale(1.025); animation: gm-mode-correct-card-spark 1.1s ease-in-out infinite; }
.gm-mode-reviewing .gm-mode-key.is-correct .gm-mode-option-word { color: #075E3D; }
.gm-mode-reviewing .gm-mode-key.is-correct .gm-mode-option-meaning { color: #075E3D; opacity: 1; }
.gm-mode-reviewing .gm-mode-key.is-wrong { opacity: .42; filter: saturate(.55); }
@keyframes gm-mode-correct-card-spark {
  0%, 100% { border-color: #159A68; box-shadow: 0 0 0 0 rgba(21, 154, 104, .08), inset 0 0 0 1px rgba(21, 154, 104, .18); }
  45% { border-color: #F2C94C; box-shadow: 0 0 0 3px rgba(242, 201, 76, .22), 0 0 16px rgba(21, 154, 104, .20), inset 0 0 0 2px rgba(242, 201, 76, .42); }
}
.gm-mode-key .gm-mode-option-number { position: absolute; top: 9px; left: 9px; width: 20px; height: 20px; margin: 0; font-size: 9px; }
.gm-mode-key .gm-mode-option-word { font-size: 20px; }
.gm-mode-key .gm-mode-option-meaning { white-space: normal; overflow: visible; text-overflow: clip; }
.gm-mode-key-status { max-width: 700px; min-height: 22px; margin: 13px auto 0; color: #65738A; font-size: 12px; text-align: center; }
.gm-mode-key-status b { color: #263C55; }
.gm-mode-key-status span { margin-left: 5px; color: #526E89; font-size: 11px; }
.gm-mode-tts-controls { position: absolute; top: 19px; right: 8px; display: inline-flex; align-items: center; gap: 5px; }
.gm-mode-tts-shortcut { display: inline-block; margin-left: 4px; padding: 1px 4px; border: 1px solid #D8C27A; border-radius: 3px; background: #FFF6C7; color: #7C4B05; font-size: 9px; font-weight: 900; line-height: 1.1; }
.gm-mode-tts-controls.is-intro .gm-mode-tts-toggle:not(:disabled), .gm-mode-tts-controls.is-intro .gm-mode-tts-replay:not(:disabled) { animation: gm-mode-tts-intro 820ms ease-in-out infinite; }
@keyframes gm-mode-tts-intro { 0%, 100% { transform: translateY(0); box-shadow: 0 1px 0 rgba(30, 41, 59, .05); } 50% { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(230, 189, 77, .22), 0 5px 12px rgba(30, 41, 59, .12); } }
.gm-mode-tts-toggle, .gm-mode-tts-replay { min-height: 27px; border: 1px solid #C9D6E2; border-radius: 4px; background: #fff; color: #4D6277; cursor: pointer; font-size: 11px; font-weight: 800; }
.gm-mode-tts-toggle { display: inline-flex; width: auto; min-width: 48px; padding: 0 4px; align-items: center; justify-content: center; gap: 3px; font-size: 15px; line-height: 1; }
.gm-mode-tts-replay { padding: 0 8px; }
.gm-mode-tts-toggle:hover, .gm-mode-tts-toggle:focus-visible, .gm-mode-tts-replay:hover, .gm-mode-tts-replay:focus-visible { border-color: #5B7996; background: #F5F8FB; outline: none; }
.gm-mode-tts-replay[disabled] { cursor: default; opacity: .45; }

.gm-relation-focus-picker { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(18, 32, 50, .58); }
.gm-relation-focus-card { position: relative; width: min(100%, 420px); padding: 27px 24px 24px; border: 1px solid #DCE4EE; border-radius: 8px; background: #fff; box-shadow: 0 22px 55px rgba(12, 28, 46, .25); text-align: center; }
.gm-relation-focus-card > span { display: block; color: #677A91; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.gm-relation-focus-card h2 { margin: 7px 0 20px; color: #17233C; font-size: 21px; line-height: 1.35; }
.gm-relation-focus-card > div { display: grid; gap: 9px; }
.gm-relation-focus-card [data-gm-focus] { display: block; width: 100%; padding: 15px 17px; border: 1px solid #D8E1EA; border-radius: 7px; background: #FAFBFC; color: #243A58; cursor: pointer; text-align: left; }
.gm-relation-focus-card [data-gm-focus]:hover, .gm-relation-focus-card [data-gm-focus]:focus-visible { border-color: #4E827F; background: #F0F8F7; outline: none; }
.gm-relation-focus-card [data-gm-focus] b { display: block; font-size: 16px; }
.gm-relation-focus-card [data-gm-focus] small { display: block; margin-top: 4px; color: #64748B; font-size: 12px; font-weight: 500; line-height: 1.45; }
.gm-relation-focus-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #5C6C7D; font-size: 24px; line-height: 1; cursor: pointer; }
.gm-relation-focus-close:hover, .gm-relation-focus-close:focus-visible { background: #EEF2F5; outline: none; }

.gm-mode-empty, .gm-mode-finish, .gm-mode-invalid { max-width: 610px; margin: 45px auto 18px; padding: 30px 30px 28px; border: 1px solid #DCE4EE; border-radius: 10px; background: #fff; text-align: center; }
.gm-mode-empty h2, .gm-mode-finish h2, .gm-mode-invalid h2 { margin: 13px 0 8px; color: #17233C; font-size: 23px; letter-spacing: -.05em; }
.gm-mode-empty p, .gm-mode-finish p, .gm-mode-invalid p { margin: 0; color: #65738A; font-size: 13px; line-height: 1.65; word-break: keep-all; }
.gm-mode-empty .gm-mode-empty-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E5EBF2; color: #8793A5; font-size: 11px; }
.gm-mode-finish-score { margin: 18px 0 6px; color: #263C55; font-size: 31px; font-weight: 800; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.gm-mode-finish-score small { margin-left: 4px; color: #65738A; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.gm-mode-actions { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.gm-mode-actions button { min-height: 39px; padding: 0 15px; border: 1px solid #C9D5E2; border-radius: 6px; background: #fff; color: #344B65; cursor: pointer; font-size: 13px; font-weight: 800; }
.gm-mode-actions .gm-mode-primary { border-color: #315D88; background: #315D88; color: #fff; }
.gm-mode-actions button:hover { filter: brightness(.98); box-shadow: 0 4px 10px rgba(23, 35, 60, .08); }

.gm-mode-choice-meanings .gm-mode-option-meaning, .gm-mode-choice-meanings .gm-mode-key .gm-mode-option-meaning { display: block; margin-top: 7px; color: #5D2BA8; font-size: 18px; font-weight: 900; line-height: 1.35; }
.gm-mode-choice-meanings .gm-mode-option, .gm-mode-choice-meanings .gm-mode-key { min-height: 86px; }

@media (max-width: 640px) {
  .gm-mode-shell { min-height: min(70vh, 600px); }
  .gm-mode-shell .game-top { margin-bottom: 14px; }
  .gm-mode-stage { padding: 8px 0 12px; }
  .gm-mode-prompt { margin: 11px 0 18px; font-size: 21px; }
  .gm-mode-options { grid-template-columns: 1fr; gap: 8px; }
  .gm-mode-option { min-height: 61px; padding: 11px 12px; }
  .gm-mode-option-word { font-size: 16px; }
  .gm-mode-answer-label { font-size: 13px; }
  .gm-mode-feedback-slot { margin: 17px auto 21px; }
  .gm-mode-feedback { grid-template-columns: 29px minmax(0, 1fr); padding: 13px 11px; }
  .gm-mode-feedback-mark { width: 24px; height: 24px; font-size: 23px; }
  .gm-mode-feedback b { font-size: 17px; }
  .gm-mode-feedback-copy > span { font-size: 12px; }
  .gm-mode-review-translation { margin-top: -5px; padding: 10px 11px; }
  .gm-mode-review-translation p { font-size: 14px; }
  .gm-mode-definition .gm-mode-definition-correct-meanings .gm-mode-option-meaning { font-size: 15px; }
  .gm-mode-relation .gm-mode-relation-correct-meanings .gm-mode-option-meaning, .gm-mode-relation .gm-mode-relation-review-meanings .gm-mode-option-meaning { font-size: 15px; }
  .gm-mode-relation .gm-mode-options { grid-template-columns: 1fr; }
  .gm-mode-relation-question { margin: 13px 0 18px; }
  .gm-mode-relation-target { font-size: 21px; }
  .gm-mode-relation-prompt { font-size: 18px; }
  .gm-mode-ox { min-height: 92px; }
  .gm-mode-ox-study { padding: 16px 14px 17px; }
  .gm-mode-idiom-expression { font-size: 26px; }
  .gm-mode-ox-example { font-size: 14px; }
  .gm-mode-ox-example-only { font-size: 16px; }
  .gm-mode-ox-claim { margin-top: 15px; }
  .gm-mode-scene-example { margin-bottom: 12px; padding: 9px 11px; }
  .gm-mode-scene-example strong { font-size: 13px; }
  .gm-mode-scene-example small { font-size: 11px; }
  .gm-mode-key { min-height: 81px; padding: 26px 8px 8px; }
  .gm-mode-key .gm-mode-option-word { font-size: 16px; }
  .gm-mode-key .gm-mode-option-meaning { font-size: 10px; }
  .gm-mode-choice-meanings .gm-mode-option-meaning, .gm-mode-choice-meanings .gm-mode-key .gm-mode-option-meaning { font-size: 15px; }
  .gm-mode-tts-controls { top: 7px; right: 0; }
  .gm-mode-empty, .gm-mode-finish, .gm-mode-invalid { margin-top: 24px; padding: 24px 19px 22px; }
  .gm-mode-empty h2, .gm-mode-finish h2, .gm-mode-invalid h2 { font-size: 20px; }
}