* { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }
:root { --bg: #03091b; --panel: rgba(10, 20, 48, .9); --text: #f4f7ff; --muted: #8fa6d9; --line: rgba(143, 166, 255, .22); --blue: #6688ff; --yellow: #ffd84d; --mint: #65e6b8; --shadow: 0 24px 70px rgba(0, 0, 0, .28); }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 12% 10%, rgba(52, 87, 213, .24), transparent 30%), radial-gradient(circle at 86% 80%, rgba(39, 181, 139, .10), transparent 25%), var(--bg); font-family: Inter, "Segoe UI", Arial, sans-serif; }
button { font: inherit; } .hidden { display: none !important; }
.app-shell { width: min(1400px, 100%); min-height: 100vh; margin: 0 auto; padding: 30px; }
.setup-screen { display: grid; align-content: center; gap: 28px; min-height: calc(100vh - 60px); max-width: 1120px; margin: auto; }
.brand-lockup { max-width: 680px; } .brand-kicker, .selection-heading > span, .function-button span, .reference-type, .progress span { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.brand-lockup h1 { margin: 8px 0 14px; font-size: clamp(40px, 6vw, 74px); line-height: .95; letter-spacing: .04em; } .brand-lockup h1 em { color: var(--yellow); font-style: normal; } .brand-lockup p { margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 20px); }
.setup-card, .example-card { border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.setup-card { padding: clamp(22px, 4vw, 42px); }.selection-block + .selection-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }.selection-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }.selection-heading > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; }.selection-heading h2 { margin: 0; font-size: 20px; }.selection-heading p { margin: 4px 0 0; color: var(--muted); }
.grade-grid { display: flex; flex-wrap: wrap; gap: 12px; }.grade-button, .function-button { border: 1px solid var(--line); color: var(--text); background: rgba(17, 35, 79, .68); cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }.grade-button:hover, .function-button:hover { transform: translateY(-2px); border-color: var(--blue); }.grade-button.selected, .function-button.selected { border-color: var(--yellow); background: rgba(87, 74, 22, .72); box-shadow: 0 0 20px rgba(255,216,77,.12); }.grade-button { min-width: 130px; padding: 16px 20px; border-radius: 14px; font-weight: 900; letter-spacing: .06em; }.function-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }.function-button { display: grid; gap: 8px; padding: 20px; border-radius: 18px; text-align: left; }.function-button strong { font-size: 20px; }.function-button small { color: var(--muted); line-height: 1.4; }
.setup-summary { display: grid; gap: 5px; margin: 28px 0 16px; padding: 16px 18px; border-left: 3px solid var(--yellow); border-radius: 8px; background: rgba(2, 7, 23, .34); }.setup-summary span { color: var(--muted); }.primary-button, .secondary-button, .icon-button { border: 0; border-radius: 14px; cursor: pointer; font-weight: 950; letter-spacing: .06em; }.primary-button { padding: 16px 24px; color: #111833; background: var(--yellow); }.primary-button:disabled { cursor: not-allowed; opacity: .42; }.secondary-button, .icon-button { padding: 14px 18px; color: var(--text); background: #142650; border: 1px solid var(--line); }
.setup-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.presentation-screen { min-height: calc(100vh - 60px); display: grid; grid-template-rows: auto auto 1fr auto; gap: 20px; }.presentation-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 18px; }.session-info { display: grid; gap: 4px; min-width: 0; max-width: 34vw; }.tool-credit { justify-self: start; color: var(--yellow); font-size: 14px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }.session-info span { color: var(--muted); font-weight: 800; letter-spacing: .08em; }.session-info strong { overflow: hidden; font-size: clamp(17px, 2vw, 26px); text-overflow: ellipsis; white-space: nowrap; }.progress { display: grid; justify-items: end; }.progress strong { color: var(--yellow); font-size: 20px; }.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #1b2d57; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5478ff, var(--yellow)); transition: width .3s ease; }
.example-card { display: grid; grid-template-columns: minmax(300px, .92fr) minmax(360px, 1.08fr); overflow: hidden; min-height: 0; }.visual-panel { display: grid; place-items: center; position: relative; min-height: 410px; padding: 28px; background: rgba(4, 12, 31, .72); }.visual-panel img { width: min(500px, 100%); aspect-ratio: 1; object-fit: contain; border-radius: 22px; background: white; }.visual-fallback { display: grid; align-content: center; gap: 16px; width: min(500px, 100%); min-height: 310px; padding: 32px; border: 1px dashed #5370b5; border-radius: 22px; color: var(--muted); background: linear-gradient(135deg, rgba(48,79,150,.35), rgba(10,20,48,.3)); }.visual-fallback span { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .16em; }.visual-fallback p { margin: 0; color: var(--text); font-size: clamp(20px, 3vw, 32px); font-weight: 800; line-height: 1.2; }.visual-fallback small { line-height: 1.5; }.sentence-panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 6vw, 82px); }.article-badge { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 20px; border-radius: 18px; color: #201d07; background: var(--yellow); font-size: 40px; font-weight: 950; text-transform: uppercase; }.article-badge.specific { color: #062a20; background: var(--mint); }.reference-type { margin: 0 0 12px; }.sentence-panel h1 { max-width: 100%; margin: 0; font-size: clamp(34px, 5vw, 70px); line-height: 1.06; overflow-wrap: anywhere; }.sentence-panel h1.long-phrase { font-size: clamp(30px, 4vw, 58px); }.sentence-panel mark { padding: 0 .08em; border-radius: .12em; color: #172033; background: var(--yellow); }.function-description { max-width: 500px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.45; }.navigation-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }.slide-dots { display: flex; justify-content: center; gap: 7px; }.slide-dots span { width: 9px; height: 9px; border-radius: 50%; background: #29416f; }.slide-dots span.complete { background: #6688ff; }.slide-dots span.active { width: 26px; border-radius: 99px; background: var(--yellow); }
.complete-screen { display: grid; min-height: calc(100vh - 60px); place-items: center; }.complete-card { display: grid; justify-items: center; max-width: 700px; padding: clamp(34px, 7vw, 80px); border: 1px solid rgba(255,255,255,.1); border-radius: 32px; text-align: center; background: var(--panel); box-shadow: var(--shadow); }.complete-card h1 { margin: 12px 0 18px; font-size: clamp(48px, 8vw, 92px); line-height: .92; }.complete-card h1 em { color: var(--yellow); font-style: normal; }.complete-card > p:not(.brand-kicker) { margin: 0 0 28px; color: var(--muted); font-size: 19px; line-height: 1.5; }.exercise-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto auto 1fr; gap: 20px; }.exercise-score { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }.exercise-score strong { margin-left: 5px; color: var(--yellow); font-size: 22px; }.exercise-card { display: grid; grid-template-columns: minmax(300px, .92fr) minmax(360px, 1.08fr); overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }.exercise-panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 6vw, 82px); }.exercise-word { color: var(--yellow); font-size: clamp(25px, 3vw, 42px); font-weight: 950; letter-spacing: .12em; }.exercise-panel h1 { margin: 12px 0 14px; font-size: clamp(38px, 5vw, 66px); }.exercise-panel h1.compact-prompt { max-width: 560px; color: #c4d2f5; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; }.exercise-sentence { max-width: 560px; margin: 0 0 28px; color: var(--muted); font-size: clamp(18px, 2vw, 25px); font-weight: 700; line-height: 1.35; }.article-options { display: grid; width: min(520px, 100%); grid-template-columns: repeat(3, 1fr); gap: 12px; }.article-option { min-height: 90px; border: 2px solid #506ab5; border-radius: 18px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(24px, 3vw, 38px); font-weight: 950; }.article-option:hover { border-color: var(--yellow); }.article-option.correct { border-color: #65e6b8; color: #dffdf2; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.38); }.article-option.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.article-option:disabled { cursor: default; }.exercise-feedback { min-height: 28px; margin: 22px 0 14px; color: var(--muted); font-weight: 900; }.exercise-feedback.correct { color: var(--mint); }.exercise-feedback.wrong { color: #ff9b86; }.article-badge.long { width: auto; min-width: 130px; padding: 0 18px; font-size: clamp(19px, 2.4vw, 30px); letter-spacing: .06em; }.sentence-panel mark.plural-ending { padding: 0; background: transparent; font-weight: 950; }.sentence-panel mark.ending-s { color: #70a1ff; }.sentence-panel mark.ending-es { color: var(--yellow); }.sentence-panel mark.ending-ies { color: var(--mint); }.sentence-panel mark.ending-irregular { color: #ff9b86; }.rule-note { max-width: 560px; margin-top: 22px; padding: 15px 18px; border-left: 4px solid var(--yellow); border-radius: 0 12px 12px 0; color: #fff4c0; background: rgba(255,216,77,.10); font-size: 16px; font-weight: 750; line-height: 1.45; }.presentation-example-sentence { max-width: 560px; margin: 18px 0 0; color: #c4d2f5; font-size: clamp(18px, 2.2vw, 27px); font-weight: 750; line-height: 1.35; }
.exercise-menu-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 7, 23, .82); backdrop-filter: blur(10px); }.exercise-menu-card { position: relative; width: min(780px, 100%); padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(143,166,255,.34); border-radius: 30px; background: #0d1b39; box-shadow: var(--shadow); }.exercise-menu-card h2 { margin: 8px 0 26px; font-size: clamp(32px, 5vw, 56px); }.exercise-menu-close { position: absolute; top: 20px; right: 20px; }.exercise-menu-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }.exercise-menu-option { display: grid; gap: 8px; min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; color: var(--text); text-align: left; background: #142b5c; cursor: pointer; }.exercise-menu-option:hover { border-color: var(--yellow); transform: translateY(-2px); }.exercise-menu-option span { color: var(--yellow); font-size: 10px; font-weight: 950; letter-spacing: .14em; }.exercise-menu-option strong { font-size: 23px; }.exercise-menu-option small { color: var(--muted); line-height: 1.4; }.sort-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto auto auto 1fr; gap: 20px; }.sort-instruction { margin: 0; color: var(--muted); text-align: center; font-weight: 750; }.sort-card-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 108px; padding: 20px; border: 1px dashed #4c659e; border-radius: 22px; background: rgba(5,12,30,.48); }.sort-card { min-width: 110px; min-height: 66px; padding: 12px 18px; border: 2px solid #6688ff; border-radius: 16px; color: var(--text); background: #193875; cursor: grab; font-size: clamp(16px, 2vw, 24px); font-weight: 950; letter-spacing: .04em; }.sort-card.dragging { opacity: .42; }.sort-card.selected { border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,216,77,.38); }.sort-card.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }.sort-card.sorted { border-color: var(--mint); color: #e4fff5; background: #135342; cursor: default; }.sort-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: stretch; }.sort-zone { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 10px; min-height: 220px; padding: 20px; border: 2px dashed #5570ad; border-radius: 24px; background: rgba(16,34,77,.7); cursor: pointer; }.sort-zone > strong { width: 100%; color: var(--yellow); text-align: center; font-size: clamp(22px, 3vw, 34px); letter-spacing: .09em; }.sort-zone > span { width: 100%; color: var(--muted); text-align: center; font-size: 10px; font-weight: 900; letter-spacing: .13em; }.sort-zone .sort-card { min-width: 96px; min-height: 52px; padding: 9px 13px; font-size: clamp(14px, 1.45vw, 19px); }.sort-zone:has(.sort-card) { border-style: solid; border-color: var(--mint); }@keyframes sortShake { 0%,100% { transform: translateX(0); } 30%,70% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.conversation-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.conversation-card, .club-quiz-card { display: grid; align-content: center; justify-items: stretch; max-width: 1080px; width: 100%; margin: auto; padding: clamp(28px, 5vw, 64px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.conversation-card h1, .club-quiz-card h1 { margin: 0 0 26px; text-align: center; font-size: clamp(28px, 4vw, 52px); }.conversation-card .reference-type, .club-quiz-card .reference-type { text-align: center; }.conversation-line-bank, .conversation-sequence { display: grid; gap: 12px; }.conversation-line-bank { margin-top: 20px; }.conversation-sequence { min-height: 240px; padding: 18px; border: 2px dashed #4c659e; border-radius: 22px; background: rgba(4,12,30,.44); }.conversation-sequence:empty::before { align-self: center; color: var(--muted); content: "TAP THE LINES BELOW TO BUILD THE CONVERSATION"; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-align: center; }.conversation-sequence-item { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }.conversation-sequence-item > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #062a20; background: var(--mint); font-weight: 950; }.conversation-line { padding: 16px 20px; border: 1px solid #5370b5; border-radius: 14px; color: var(--text); text-align: left; background: #173267; cursor: pointer; font-size: clamp(17px, 2vw, 26px); font-weight: 800; }.conversation-line:hover { border-color: var(--yellow); }.conversation-line.selected { cursor: default; border-color: #6688ff; background: #142a59; }.conversation-line.correct { border-color: var(--mint); background: #135342; }.conversation-line.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }.club-quiz-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.club-quiz-option { overflow: hidden; padding: 0; border: 2px solid #506ab5; border-radius: 18px; color: var(--text); background: #173267; cursor: pointer; }.club-quiz-option img, .club-image-placeholder { display: grid; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }.club-image-placeholder { place-items: center; padding: 18px; color: #172033; font-size: clamp(14px, 2vw, 24px); font-weight: 950; text-align: center; }.club-quiz-option:hover { border-color: var(--yellow); }.club-quiz-option.correct { border-color: var(--mint); box-shadow: 0 0 18px rgba(101,230,184,.36); }.club-quiz-option.wrong { border-color: #ff8066; background: #6e2c25; }.club-quiz-option:disabled { cursor: default; }.club-quiz-card > .primary-button { justify-self: end; }.conversation-card .exercise-feedback, .club-quiz-card .exercise-feedback { text-align: center; }
.conversation-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.conversation-card, .club-quiz-card { display: grid; align-content: center; justify-items: stretch; max-width: 1080px; width: 100%; margin: auto; padding: clamp(28px, 5vw, 64px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.conversation-card h1, .club-quiz-card h1 { margin: 0 0 26px; text-align: center; font-size: clamp(28px, 4vw, 52px); }.conversation-card .reference-type, .club-quiz-card .reference-type { text-align: center; }.conversation-line-bank, .conversation-sequence { display: grid; gap: 12px; }.conversation-line-bank { margin-top: 20px; }.conversation-sequence { min-height: 240px; padding: 18px; border: 2px dashed #4c659e; border-radius: 22px; background: rgba(4,12,30,.44); }.conversation-sequence:empty::before { align-self: center; color: var(--muted); content: "TAP THE LINES BELOW TO BUILD THE CONVERSATION"; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-align: center; }.conversation-sequence-item { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }.conversation-sequence-item > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #062a20; background: var(--mint); font-weight: 950; }.conversation-line { padding: 16px 20px; border: 1px solid #5370b5; border-radius: 14px; color: var(--text); text-align: left; background: #173267; cursor: pointer; font-size: clamp(17px, 2vw, 26px); font-weight: 800; }.conversation-line:hover { border-color: var(--yellow); }.conversation-line.selected { cursor: default; border-color: #6688ff; background: #142a59; }.conversation-line.correct { border-color: var(--mint); background: #135342; }.conversation-line.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }.conversation-next { justify-self: end; margin-top: 20px; }.club-quiz-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.club-quiz-option { overflow: hidden; padding: 0; border: 2px solid #506ab5; border-radius: 18px; color: var(--text); background: #173267; cursor: pointer; }.club-quiz-option img, .club-image-placeholder { display: grid; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }.club-image-placeholder { place-items: center; padding: 18px; color: #172033; font-size: clamp(14px, 2vw, 24px); font-weight: 950; text-align: center; }.club-quiz-option:hover { border-color: var(--yellow); }.club-quiz-option.correct { border-color: var(--mint); box-shadow: 0 0 18px rgba(101,230,184,.36); }.club-quiz-option.wrong { border-color: #ff8066; background: #6e2c25; }.club-quiz-option:disabled { cursor: default; }.club-quiz-card > .primary-button { justify-self: end; }.conversation-card .exercise-feedback, .club-quiz-card .exercise-feedback { text-align: center; }
.jumbled-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.jumbled-card { display: grid; align-content: center; justify-items: stretch; width: min(1180px, 100%); margin: auto; padding: clamp(28px, 5vw, 64px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.jumbled-card.wrong-drop { animation: sortShake .38s ease-in-out; border-color: #ff8066; box-shadow: 0 0 26px rgba(255,128,102,.28); }.jumbled-card .reference-type { text-align: center; }.jumbled-card h1 { margin: 0 0 30px; text-align: center; font-size: clamp(28px, 4vw, 50px); }.jumbled-word-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 160px; padding: 24px; border: 2px dashed #4c659e; border-radius: 22px; background: rgba(4,12,30,.44); }.jumbled-word { min-height: 62px; padding: 11px 18px; border: 2px solid #6688ff; border-radius: 15px; color: var(--text); background: #193875; cursor: grab; font-size: clamp(17px, 2vw, 27px); font-weight: 900; }.jumbled-word.dragging { opacity: .42; }.jumbled-word.correct-position, .jumbled-word.correct { border-color: var(--mint); color: #dffdf2; background: #135342; box-shadow: 0 0 15px rgba(101,230,184,.4); cursor: default; }.jumbled-word.correct-position { pointer-events: auto; }.jumbled-lives { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 12px; background: rgba(255,128,102,.12); }.life-heart { color: #ff8066; font-size: 27px; line-height: 1; text-shadow: 0 0 10px rgba(255,128,102,.45); }.life-heart.lost { color: #3b4d77; text-shadow: none; }
.matching-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.matching-card { width: min(1320px, 100%); margin: auto; padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.matching-card .reference-type { text-align: center; }.matching-card h1 { margin: 0 0 26px; text-align: center; font-size: clamp(24px, 3.5vw, 44px); }.matching-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.matching-sentence-grid, .matching-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.matching-sentence, .matching-visual { overflow: hidden; border: 2px solid #506ab5; border-radius: 16px; color: var(--text); background: #173267; cursor: pointer; }.matching-sentence { min-height: 96px; padding: 14px; text-align: left; font-size: clamp(15px, 1.5vw, 21px); font-weight: 850; line-height: 1.25; }.matching-visual { position: relative; padding: 0; }.matching-visual img, .matching-image-placeholder { display: grid; width: 100%; aspect-ratio: 1.45; object-fit: cover; background: #fff; }.matching-image-placeholder { place-items: center; padding: 14px; color: #172033; font-size: clamp(13px, 1.5vw, 19px); font-weight: 900; text-align: center; }.matching-visual:not(.revealed):not(.correct) > img, .matching-visual:not(.revealed):not(.correct) > .matching-image-placeholder { visibility: hidden; }.matching-visual:not(.revealed):not(.correct)::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; background: linear-gradient(135deg, #173267, #0c1d42); font-size: clamp(42px, 7vw, 92px); font-weight: 950; }.matching-sentence:hover, .matching-visual.ready:hover { border-color: var(--yellow); }.matching-sentence.selected { border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,216,77,.35); }.matching-visual.ready { border-color: #6688ff; cursor: pointer; }.matching-sentence.correct, .matching-visual.correct { border-color: var(--mint); background: #135342; box-shadow: 0 0 15px rgba(101,230,184,.28); }.matching-sentence.wrong, .matching-visual.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }.matching-sentence:disabled, .matching-visual:disabled { cursor: default; }
.matching-sentence:not(.revealed):not(.correct) { position: relative; color: transparent; }.matching-sentence:not(.revealed):not(.correct)::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; background: linear-gradient(135deg, #173267, #0c1d42); font-size: clamp(34px, 5vw, 66px); font-weight: 950; }
@media (max-width: 760px) { .app-shell { padding: 18px; }.presentation-header { grid-template-columns: auto 1fr auto; }.presentation-header .progress { display: none; }.tool-credit { display: none; }.example-card, .exercise-card { grid-template-columns: 1fr; }.visual-panel { min-height: 270px; }.visual-panel img { max-height: 330px; }.sentence-panel { min-height: 340px; }.slide-dots { display: none; }.navigation-bar { grid-template-columns: 1fr 1fr; }.navigation-bar button { width: 100%; }.session-info strong { font-size: 15px; }.exercise-panel { min-height: 360px; }.setup-actions { width: 100%; }.setup-actions button { flex: 1; }.sort-zones { grid-template-columns: 1fr; }.exercise-menu-overlay { padding: 14px; } }
@media (max-width: 760px) { .conversation-card, .club-quiz-card { padding: 24px 18px; }.club-quiz-options { grid-template-columns: repeat(2, 1fr); }.conversation-actions { justify-content: stretch; }.conversation-actions button, .club-quiz-card > .primary-button { flex: 1; width: 100%; } }
/* ── STAMP OVERLAY ── */
#func-stamp { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.stamp-badge { font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: clamp(72px, 14vw, 130px); letter-spacing: .12em; border: 8px solid; border-radius: 12px; padding: 10px 32px; opacity: 0; transform: scale(1.6) rotate(-12deg); animation: stampDrop .55s cubic-bezier(.2,.85,.4,1.1) forwards; }
.stamp-badge.stamp-correct { color: rgba(74,222,128,.92); border-color: rgba(74,222,128,.85); text-shadow: 0 0 40px rgba(74,222,128,.6); box-shadow: 0 0 60px rgba(74,222,128,.25); }
.stamp-badge.stamp-wrong { color: rgba(248,113,113,.92); border-color: rgba(248,113,113,.85); text-shadow: 0 0 40px rgba(248,113,113,.6); box-shadow: 0 0 60px rgba(248,113,113,.25); }
@keyframes tsShake { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-7px,-4px)} 20%{transform:translate(7px,4px)} 30%{transform:translate(-7px,4px)} 40%{transform:translate(7px,-4px)} 50%{transform:translate(-6px,6px)} 60%{transform:translate(6px,-6px)} 70%{transform:translate(-5px,3px)} 80%{transform:translate(5px,-3px)} 90%{transform:translate(-2px,1px)} }
.ts-shake { animation: tsShake 1s ease-out; }
@keyframes stampDrop { 0% { opacity: 0; transform: scale(1.6) rotate(-12deg); } 35% { opacity: 1; transform: scale(.95) rotate(-6deg); } 60% { transform: scale(1.04) rotate(-6deg); } 80% { transform: scale(.98) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }

.sentence-panel mark.modal-mustnt { color: #fff0ec; background: #c94d3e; box-shadow: 0 0 18px rgba(255, 109, 95, .38); }
.sentence-panel mark.modal-cant { color: #eafff7; background: #18795d; box-shadow: 0 0 18px rgba(101, 230, 184, .30); }
.article-badge.modal-mustnt { color: #fff0ec; background: #c94d3e; box-shadow: 0 0 20px rgba(255, 109, 95, .28); }
.article-badge.modal-cant { color: #eafff7; background: #18795d; box-shadow: 0 0 20px rgba(101, 230, 184, .24); }
.sentence-panel mark.imperative-dont { color: #fff0ec; background: #c94d3e; box-shadow: 0 0 18px rgba(255, 109, 95, .38); }.sentence-panel mark.imperative-do { color: #eafff7; background: #18795d; box-shadow: 0 0 18px rgba(101, 230, 184, .30); }.article-badge.imperative-dont { color: #fff0ec; background: #c94d3e; box-shadow: 0 0 20px rgba(255, 109, 95, .28); }.article-badge.imperative-do { color: #eafff7; background: #18795d; box-shadow: 0 0 20px rgba(101, 230, 184, .24); }
.sentence-panel mark.to-be-am { color: #2a2200; background: #ffd84d; box-shadow: 0 0 18px rgba(255, 216, 77, .34); }.sentence-panel mark.to-be-is { color: #eafff7; background: #18795d; box-shadow: 0 0 18px rgba(101, 230, 184, .30); }.sentence-panel mark.to-be-are { color: #eef2ff; background: #405fc5; box-shadow: 0 0 18px rgba(102, 136, 255, .32); }.article-badge.to-be-am { color: #2a2200; background: #ffd84d; }.article-badge.to-be-is { color: #eafff7; background: #18795d; }.article-badge.to-be-are { color: #eef2ff; background: #405fc5; }
.time-digital { width: fit-content; margin-bottom: 16px; padding: 9px 15px; border: 1px solid rgba(255,216,77,.45); border-radius: 12px; color: #2a2200; background: var(--yellow); font-size: clamp(22px, 3vw, 38px); font-weight: 950; letter-spacing: .08em; }.example-card.time-prompt-slide { grid-template-columns: 1fr; width: min(900px, 100%); margin: auto; }.example-card.time-prompt-slide .sentence-panel { align-items: center; min-height: 480px; text-align: center; }.time-prompt-view { display: grid; justify-items: center; gap: 24px; }.time-prompt-view > span { color: var(--yellow); font-size: clamp(72px, 12vw, 150px); font-weight: 950; letter-spacing: .06em; line-height: 1; text-shadow: 0 0 26px rgba(255,216,77,.3); }.time-prompt-view > p { margin: 0; color: var(--mint); font-size: clamp(28px, 4vw, 56px); font-weight: 900; line-height: 1.2; }
.sentence-panel mark.time-full, .sentence-panel mark.time-half, .sentence-panel mark.time-quarter, .sentence-panel mark.time-past, .sentence-panel mark.time-to { padding: 0; background: transparent; box-shadow: none; }.sentence-panel mark.time-full { color: var(--yellow); }.sentence-panel mark.time-half { color: var(--mint); }.article-badge.time-full { color: #2a2200; background: var(--yellow); font-size: clamp(20px, 2.3vw, 28px); }.article-badge.time-half { width: auto; min-width: 128px; padding: 0 16px; color: #062a20; background: var(--mint); font-size: clamp(18px, 2vw, 25px); letter-spacing: .04em; }
.sentence-panel mark.time-quarter { color: #84a0ff; }.sentence-panel mark.time-past { color: #ff9b86; }.article-badge.time-quarter, .article-badge.time-past { width: auto; min-width: 128px; padding: 0 16px; font-size: clamp(18px, 2vw, 25px); letter-spacing: .04em; }.article-badge.time-quarter { color: #eef2ff; background: #405fc5; }.article-badge.time-past { color: #fff0ec; background: #c94d3e; }
.sentence-panel mark.time-to { color: #ffa94d; }.article-badge.time-to { width: auto; min-width: 128px; padding: 0 16px; color: #2a2200; background: #ffa94d; font-size: clamp(18px, 2vw, 25px); letter-spacing: .04em; }
.time-question { margin: 0 0 10px; color: #c4d2f5; font-size: clamp(20px, 2.5vw, 32px); font-weight: 850; line-height: 1.2; }
.time-setter-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.time-setter-card { display: grid; align-content: center; justify-items: center; gap: 20px; width: min(920px, 100%); margin: auto; padding: clamp(32px, 6vw, 72px); border: 1px solid rgba(255,255,255,.10); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }.time-setter-card > .reference-type { margin: 0; }.time-setter-question { margin: 0; color: var(--yellow); font-size: clamp(36px, 5vw, 66px); font-weight: 950; letter-spacing: .03em; line-height: 1; }.time-setter-analog { position: relative; width: clamp(180px, 22vw, 270px); aspect-ratio: 1; border: 12px solid var(--yellow); border-radius: 50%; background: #f8fbff; box-shadow: 0 0 26px rgba(255,216,77,.22); }.time-setter-analog::before { position: absolute; inset: 10%; border: 2px dashed #8fa6d9; border-radius: inherit; content: ""; }.time-setter-hour-hand, .time-setter-minute-hand { position: absolute; bottom: 50%; left: 50%; z-index: 1; width: 10px; transform: translateX(-50%) rotate(0deg); transform-origin: bottom center; border-radius: 999px; background: #172033; transition: transform .18s ease; }.time-setter-hour-hand { height: 28%; }.time-setter-minute-hand { height: 39%; width: 7px; background: #405fc5; }.time-setter-clock-center { position: absolute; z-index: 2; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow); }.time-setter-instruction { margin: 0; color: var(--muted); font-size: clamp(18px, 2.2vw, 26px); font-weight: 750; }.time-setter-clock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 34px); width: min(650px, 100%); margin-top: 10px; }.time-setter-unit { display: grid; justify-items: stretch; gap: 12px; }.time-setter-unit strong { display: grid; place-items: center; min-height: 128px; border: 2px solid #6688ff; border-radius: 24px; color: var(--text); background: #173267; font-size: clamp(68px, 10vw, 122px); font-weight: 950; line-height: 1; }.time-setter-colon { color: var(--yellow); font-size: clamp(64px, 9vw, 112px); font-weight: 950; }.time-step-button { min-height: 58px; border: 2px solid #506ab5; border-radius: 16px; color: var(--text); background: #102652; cursor: pointer; font-size: 34px; font-weight: 950; }.time-step-button:hover { border-color: var(--yellow); transform: translateY(-1px); }.time-step-button:disabled { cursor: default; opacity: .45; }.time-setter-actions { justify-content: center; }.time-setter-actions .primary-button, .time-setter-actions .secondary-button { min-width: 150px; }@media (max-width: 560px) { .time-setter-clock { gap: 8px; }.time-setter-unit strong { min-height: 94px; }.time-step-button { min-height: 48px; } }
.function-intro { display: grid; align-content: center; justify-items: stretch; gap: 24px; min-height: 0; padding: clamp(30px, 6vw, 76px); border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }.function-intro h1 { margin: 0; font-size: clamp(34px, 5vw, 68px); }.pronoun-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.pronoun-group { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; min-height: 160px; padding: 22px; border: 2px solid #506ab5; border-radius: 22px; background: #173267; }.pronoun-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }.pronoun-list span { padding: 7px 10px; border-radius: 9px; color: #f4f7ff; background: rgba(3,9,27,.46); font-size: clamp(15px, 1.5vw, 22px); font-weight: 950; }.pronoun-arrow { color: var(--muted); font-size: 28px; }.pronoun-group strong { padding: 12px; border-radius: 12px; font-size: clamp(28px, 4vw, 52px); }.pronoun-group.to-be-am strong { color: #2a2200; background: #ffd84d; }.pronoun-group.to-be-is strong { color: #eafff7; background: #18795d; }.pronoun-group.to-be-are strong { color: #eef2ff; background: #405fc5; }@media (max-width: 760px) { .pronoun-table { grid-template-columns: 1fr; } }
.article-options.sentence-choice-options { width: min(640px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-option.sentence-choice-option { min-height: 132px; padding: 18px; font-size: clamp(18px, 2.2vw, 29px); line-height: 1.25; text-transform: none; }
.article-option.sentence-choice-option .modal-option-word { padding: 0; color: var(--yellow); background: transparent; font-weight: 950; }
.exercise-card.text-only-choice { grid-template-columns: 1fr; width: min(980px, 100%); margin: auto; border-radius: 30px; }.exercise-card.text-only-choice .exercise-panel { align-items: center; min-height: 500px; text-align: center; }.exercise-card.text-only-choice .reference-type { color: var(--yellow); font-size: 15px; font-weight: 950; letter-spacing: .14em; }.exercise-card.text-only-choice h1 { max-width: 860px; margin: 14px 0 34px; font-size: clamp(34px, 5vw, 66px); line-height: 1.18; }.exercise-card.text-only-choice .article-options { width: min(720px, 100%); }.exercise-card.text-only-choice .article-option { min-height: 110px; font-size: clamp(26px, 4vw, 48px); letter-spacing: .08em; }
.exercise-card.text-only-choice .reference-type.choice-mode-prompt { font-size: clamp(38px, 7vw, 88px); letter-spacing: .08em; text-shadow: 0 0 22px rgba(255, 216, 77, .34); }
.true-false-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.true-false-card { width: min(1320px, 100%); margin: auto; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.true-false-card > .reference-type { text-align: center; }.true-false-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }.true-false-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 78px; padding: 12px 14px 12px 18px; border: 1px solid #506ab5; border-radius: 16px; background: #173267; }.true-false-row p { margin: 0; font-size: clamp(15px, 1.45vw, 21px); font-weight: 800; line-height: 1.25; }.true-false-actions { display: flex; gap: 8px; }.true-false-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #6688ff; border-radius: 12px; background: #102652; cursor: pointer; font-size: 25px; font-weight: 950; }.true-false-button.true-button { color: var(--yellow); }.true-false-button.false-button { color: #ff8066; }.true-false-button:hover { transform: translateY(-1px); }.true-false-button.true-button:hover { border-color: var(--mint); }.true-false-button.false-button:hover { border-color: #ff8066; }.true-false-button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 14px rgba(101,230,184,.3); }.true-false-button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.true-false-button:disabled { cursor: default; }.true-false-row.answered-correct { border-color: rgba(101,230,184,.55); }.true-false-row.answered-wrong { border-color: rgba(255,128,102,.55); }@media (max-width: 760px) { .true-false-grid { grid-template-columns: 1fr; } }
.true-false-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.true-false-card { width: min(1320px, 100%); margin: auto; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.true-false-card > .reference-type { text-align: center; }.true-false-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }.true-false-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 78px; padding: 12px 14px 12px 18px; border: 1px solid #506ab5; border-radius: 16px; background: #173267; }.true-false-row p { margin: 0; font-size: clamp(15px, 1.45vw, 21px); font-weight: 800; line-height: 1.25; }.true-false-row.statement-true p { color: var(--yellow); }.true-false-row.statement-false p { color: #ff8066; }.true-false-actions { display: flex; gap: 8px; }.true-false-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #6688ff; border-radius: 12px; background: #102652; cursor: pointer; font-size: 25px; font-weight: 950; }.true-false-button.true-button { color: var(--yellow); }.true-false-button.false-button { color: #ff8066; }.true-false-button:hover { transform: translateY(-1px); }.true-false-button.true-button:hover { border-color: var(--mint); }.true-false-button.false-button:hover { border-color: #ff8066; }.true-false-button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 14px rgba(101,230,184,.3); }.true-false-button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.true-false-button:disabled { cursor: default; }.true-false-row.answered-correct { border-color: rgba(101,230,184,.55); }.true-false-row.answered-wrong { border-color: rgba(255,128,102,.55); }@media (max-width: 760px) { .true-false-grid { grid-template-columns: 1fr; } }
.pronoun-memory-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pronoun-memory-card { display: grid; align-content: center; justify-items: center; gap: 26px; width: min(1280px, 100%); margin: auto; padding: clamp(28px, 5vw, 62px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.pronoun-memory-card > .reference-type { text-align: center; }.pronoun-memory-images { display: grid; grid-template-columns: repeat(var(--memory-image-count, 1), minmax(120px, 1fr)); gap: clamp(10px, 1.8vw, 22px); width: 100%; }.pronoun-memory-image { position: relative; overflow: hidden; border: 2px solid #6688ff; border-radius: 22px; background: #fff; transition: opacity .25s ease, transform .25s ease; }.pronoun-memory-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }.pronoun-memory-image > span { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #172033; background: var(--yellow); font-size: 15px; font-weight: 950; }.pronoun-memory-image.concealed { display: grid; place-items: center; min-height: 180px; border-style: dashed; background: linear-gradient(135deg, #173267, #0c1d42); }.pronoun-memory-image.concealed img { visibility: hidden; }.pronoun-memory-image.concealed::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; font-size: clamp(54px, 8vw, 110px); font-weight: 950; }.pronoun-memory-choices { display: grid; justify-items: center; gap: 18px; width: 100%; }.pronoun-memory-choices p { margin: 0; color: var(--text); font-size: clamp(22px, 3vw, 38px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 12px; width: min(720px, 100%); }.pronoun-choice-buttons button { min-height: 78px; border: 2px solid #6688ff; border-radius: 17px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(23px, 3vw, 36px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons button:hover { border-color: var(--yellow); transform: translateY(-2px); }.pronoun-choice-buttons button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.32); }.pronoun-choice-buttons button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.pronoun-choice-buttons button:disabled { cursor: default; }.memory-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }@media (max-width: 760px) { .pronoun-memory-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pronoun-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pronoun-memory-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pronoun-memory-card { display: grid; align-content: center; justify-items: center; gap: 26px; width: min(1280px, 100%); margin: auto; padding: clamp(28px, 5vw, 62px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.pronoun-memory-card > .reference-type { text-align: center; }.pronoun-memory-images { display: grid; grid-template-columns: repeat(var(--memory-image-count, 1), minmax(120px, 1fr)); gap: clamp(10px, 1.8vw, 22px); width: 100%; }.pronoun-memory-image { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; justify-self: center; overflow: hidden; border: 2px solid #6688ff; border-radius: 22px; background: #fff; transition: opacity .25s ease, transform .25s ease; }.pronoun-memory-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }.pronoun-memory-image > span { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #172033; background: var(--yellow); font-size: 15px; font-weight: 950; }.pronoun-memory-image.concealed { display: grid; place-items: center; min-height: 0; border-style: dashed; background: linear-gradient(135deg, #173267, #0c1d42); }.pronoun-memory-image.concealed img { visibility: hidden; }.pronoun-memory-image.concealed::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; font-size: clamp(54px, 8vw, 110px); font-weight: 950; }.pronoun-memory-choices { display: grid; justify-items: center; gap: 18px; width: 100%; }.pronoun-memory-choices p { margin: 0; color: var(--text); font-size: clamp(22px, 3vw, 38px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 12px; width: min(720px, 100%); }.pronoun-choice-buttons button { min-height: 78px; border: 2px solid #6688ff; border-radius: 17px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(23px, 3vw, 36px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons button:hover { border-color: var(--yellow); transform: translateY(-2px); }.pronoun-choice-buttons button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.32); }.pronoun-choice-buttons button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.pronoun-choice-buttons button:disabled { cursor: default; }.memory-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }@media (max-width: 760px) { .pronoun-memory-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pronoun-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pronoun-memory-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pronoun-memory-card { display: grid; align-content: center; justify-items: center; gap: 26px; width: min(1280px, 100%); margin: auto; padding: clamp(28px, 5vw, 62px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.pronoun-memory-card > .reference-type { text-align: center; }.pronoun-memory-images { display: grid; grid-template-columns: repeat(var(--memory-image-count, 1), minmax(120px, 1fr)); gap: clamp(10px, 1.8vw, 22px); width: 100%; }.pronoun-memory-image { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; overflow: hidden; border: 2px solid #6688ff; border-radius: 22px; background: #fff; transition: opacity .25s ease, transform .25s ease; }.pronoun-memory-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }.pronoun-memory-image > span { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #172033; background: var(--yellow); font-size: 15px; font-weight: 950; }.pronoun-memory-image.concealed { display: grid; place-items: center; min-height: 0; border-style: dashed; background: linear-gradient(135deg, #173267, #0c1d42); }.pronoun-memory-image.concealed img { visibility: hidden; }.pronoun-memory-image.concealed::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; font-size: clamp(54px, 8vw, 110px); font-weight: 950; }.pronoun-memory-choices { display: grid; justify-items: center; gap: 18px; width: 100%; }.pronoun-memory-choices p { margin: 0; color: var(--text); font-size: clamp(22px, 3vw, 38px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 12px; width: min(720px, 100%); }.pronoun-choice-buttons button { min-height: 78px; border: 2px solid #6688ff; border-radius: 17px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(23px, 3vw, 36px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons button:hover { border-color: var(--yellow); transform: translateY(-2px); }.pronoun-choice-buttons button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.32); }.pronoun-choice-buttons button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.pronoun-choice-buttons button:disabled { cursor: default; }.memory-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }@media (max-width: 760px) { .pronoun-memory-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pronoun-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pronoun-memory-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pronoun-memory-card { display: grid; align-content: center; justify-items: center; gap: 26px; width: min(1280px, 100%); margin: auto; padding: clamp(28px, 5vw, 62px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.pronoun-memory-card > .reference-type { text-align: center; }.pronoun-memory-images { display: grid; grid-template-columns: repeat(var(--memory-image-count, 1), minmax(120px, 1fr)); gap: clamp(10px, 1.8vw, 22px); width: 100%; }.pronoun-memory-image { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; overflow: hidden; border: 2px solid #6688ff; border-radius: 22px; background: #fff; transition: opacity .25s ease, transform .25s ease; }.pronoun-memory-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }.pronoun-memory-image > span { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #172033; background: var(--yellow); font-size: 15px; font-weight: 950; }.pronoun-memory-image.concealed { display: grid; place-items: center; min-height: 0; border-style: dashed; background: linear-gradient(135deg, #173267, #0c1d42); }.pronoun-memory-image.concealed img { visibility: hidden; }.pronoun-memory-image.concealed::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); content: ""; font-size: clamp(54px, 8vw, 110px); font-weight: 950; }.pronoun-memory-choices { display: grid; justify-items: center; gap: 18px; width: 100%; }.pronoun-memory-choices p { margin: 0; color: var(--text); font-size: clamp(22px, 3vw, 38px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 12px; width: min(720px, 100%); }.pronoun-choice-buttons button { min-height: 78px; border: 2px solid #6688ff; border-radius: 17px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(23px, 3vw, 36px); font-weight: 950; letter-spacing: .08em; }.pronoun-choice-buttons button:hover { border-color: var(--yellow); transform: translateY(-2px); }.pronoun-choice-buttons button.correct { border-color: var(--mint); color: #e4fff5; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.32); }.pronoun-choice-buttons button.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.pronoun-choice-buttons button:disabled { cursor: default; }.memory-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }@media (max-width: 760px) { .pronoun-memory-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pronoun-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pronoun-snap-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pronoun-snap-card { display: grid; align-content: center; justify-items: center; gap: 22px; width: min(820px, 100%); margin: auto; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }.pronoun-snap-card.snap-correct { border-color: var(--mint); box-shadow: 0 0 28px rgba(101,230,184,.24); }.pronoun-snap-card.snap-wrong { border-color: #ff8066; box-shadow: 0 0 28px rgba(255,128,102,.24); }.pronoun-snap-card > .reference-type { text-align: center; }.pronoun-snap-card img { width: min(300px, 100%); aspect-ratio: 1; object-fit: contain; border: 2px solid #6688ff; border-radius: 22px; background: #fff; }.pronoun-snap-repeat-visual { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); place-items: center; gap: 10px; width: min(540px, 100%); min-height: 300px; padding: 18px; border: 2px solid #6688ff; border-radius: 22px; background: #fff; }.pronoun-snap-repeat-visual img { width: min(92px, 100%); aspect-ratio: 1; object-fit: contain; border: 0; border-radius: 0; background: transparent; }.pronoun-snap-card .pronoun-choice-buttons { width: min(720px, 100%); }.pronoun-snap-card .pronoun-choice-buttons button { min-height: 70px; }@media (max-width: 620px) { .pronoun-snap-card .pronoun-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.time-setter-analog { background: repeating-conic-gradient(from -1deg, #405fc5 0deg 2deg, #f8fbff 2deg 30deg); }.time-setter-analog::before { border-style: solid; border-color: rgba(23,32,51,.18); }
.time-setter-clock { display: grid !important; grid-template-columns: 1fr !important; justify-items: center; gap: 14px !important; width: min(720px, 100%) !important; }.time-step-row { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 16px; width: min(560px, 100%); }.digital-clock-body { position: relative; display: grid; justify-items: center; gap: 8px; width: min(620px, 100%); padding: 22px clamp(22px, 4vw, 42px) 28px; border: 10px solid #0b1224; border-radius: 34px; background: linear-gradient(180deg, #111827, #020817 55%, #050b18); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -18px 30px rgba(0,0,0,.48), 0 18px 48px rgba(0,0,0,.34), 0 0 34px rgba(101,230,184,.10); overflow: hidden; }.digital-clock-body::before { position: absolute; inset: 14px; border: 1px solid rgba(101,230,184,.18); border-radius: 22px; content: ""; pointer-events: none; }.digital-clock-label { z-index: 1; color: rgba(101,230,184,.72); font-size: 12px; font-weight: 950; letter-spacing: .22em; }.digital-clock-display { position: relative; z-index: 1; color: var(--yellow); }.digital-clock-glare { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 20%, rgba(255,255,255,.10) 35%, transparent 52%); opacity: .65; pointer-events: none; }.time-step-button { background: linear-gradient(180deg, #1b3976, #102652) !important; letter-spacing: .08em; font-size: clamp(18px, 2vw, 27px) !important; }.time-step-button:hover { box-shadow: 0 0 18px rgba(255,216,77,.18); }@media (max-width: 560px) { .time-step-row { grid-template-columns: 1fr 1fr; gap: 8px; }.digital-clock-body { border-width: 7px; border-radius: 24px; } }
.digital-clock-body { box-shadow: inset 0 0 0 3px rgba(255,216,77,.08), inset 0 -18px 30px rgba(0,0,0,.48), 0 18px 48px rgba(0,0,0,.34), 0 0 34px rgba(255,216,77,.10); }.digital-clock-body::before { border-color: rgba(255,216,77,.18); }.digital-clock-label { color: rgba(255,216,77,.72); }.digital-clock-display { color: var(--yellow); }.digital-clock-glare { background: linear-gradient(105deg, transparent 0 20%, rgba(255,216,77,.10) 35%, transparent 52%); }
.digital-clock-display { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); width: 100%; min-height: clamp(138px, 17vw, 214px); font-size: 0; text-shadow: none; }.digital-clock-display::before, .digital-clock-display::after { display: none; }.digital-digit { position: relative; display: block; width: clamp(70px, 8vw, 112px); height: clamp(126px, 15vw, 202px); filter: drop-shadow(0 0 12px rgba(255,216,77,.35)) drop-shadow(0 0 28px rgba(255,174,0,.18)); }.segment { position: absolute; display: block; border-radius: 999px; background: rgba(255,216,77,.075); box-shadow: inset 0 0 10px rgba(0,0,0,.28); transition: background .12s ease, box-shadow .12s ease; }.segment.active { background: linear-gradient(180deg, #fff1a8, var(--yellow) 42%, #ffb600); box-shadow: 0 0 10px rgba(255,216,77,.92), 0 0 24px rgba(255,216,77,.50), inset 0 0 4px rgba(255,255,255,.55); }.segment-a, .segment-d, .segment-g { left: 18%; width: 64%; height: 11%; }.segment-a { top: 2%; }.segment-g { top: 44.5%; }.segment-d { bottom: 2%; }.segment-b, .segment-c, .segment-e, .segment-f { width: 13%; height: 40%; }.segment-b, .segment-c { right: 3%; }.segment-f, .segment-e { left: 3%; }.segment-b, .segment-f { top: 8%; }.segment-c, .segment-e { bottom: 8%; }.digital-colon { display: grid; align-content: center; gap: clamp(22px, 3vw, 42px); width: clamp(18px, 2.2vw, 30px); height: clamp(126px, 15vw, 202px); }.digital-colon i { display: block; width: clamp(14px, 1.7vw, 24px); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px rgba(255,216,77,.95), 0 0 24px rgba(255,216,77,.50); }@media (max-width: 560px) { .digital-clock-display { gap: 6px; min-height: 118px; }.digital-digit { width: 54px; height: 98px; }.digital-colon { height: 98px; width: 14px; gap: 20px; }.digital-colon i { width: 12px; } }
.digital-clock-body { width: min(660px, 100%); padding-left: clamp(34px, 5vw, 62px); padding-right: clamp(34px, 5vw, 62px); }.digital-clock-display { gap: clamp(6px, 1.2vw, 14px); min-height: clamp(118px, 14.5vw, 184px); }.digital-digit { width: clamp(58px, 6.8vw, 94px); height: clamp(106px, 12.8vw, 170px); }.digital-colon { width: clamp(14px, 1.7vw, 24px); height: clamp(106px, 12.8vw, 170px); gap: clamp(18px, 2.4vw, 34px); }.digital-colon i { width: clamp(11px, 1.3vw, 19px); }
.digital-clock-label { display: none; }.digital-clock-body { gap: 12px; padding-top: 18px; padding-bottom: 18px; }.digital-clock-body .time-step-row { position: relative; z-index: 2; grid-template-columns: repeat(3, minmax(100px, 1fr)); width: min(560px, 92%); gap: 10px; }.digital-clock-body .time-step-row.top { margin-bottom: 2px; }.digital-clock-body .time-step-row.bottom { margin-top: 2px; }.digital-clock-body .time-step-button { min-height: 42px; padding: 7px 12px; border-radius: 999px; border-color: rgba(255,216,77,.34); color: #ffeeb0; background: linear-gradient(180deg, rgba(36,50,86,.95), rgba(8,14,28,.95)) !important; font-size: clamp(13px, 1.25vw, 18px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.26); }.digital-clock-body .time-step-button:hover { border-color: var(--yellow); transform: translateY(-1px); }.digital-clock-body .time-step-button:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0,0,0,.42); }.digital-clock-body .time-action-exit { border-color: rgba(255,128,102,.65); color: #ffe3dd; background: linear-gradient(180deg, rgba(129,45,36,.96), rgba(78,22,18,.96)) !important; }.digital-clock-body .time-action-ok { border-color: rgba(101,230,184,.72); color: #e7fff6; background: linear-gradient(180deg, rgba(28,117,88,.96), rgba(13,73,55,.96)) !important; }.time-setter-actions:empty { display: none; }
.example-card.timetable-slide .sentence-panel { padding: clamp(28px, 4.5vw, 62px); }.timetable-sentence { color: var(--yellow); font-size: clamp(32px, 4vw, 58px) !important; line-height: 1.2 !important; }.timetable-sentence .timetable-detail, .timetable-answer-view .timetable-detail { color: #f4f7ff; }.timetable-sentence .timetable-preposition, .timetable-answer-view .timetable-preposition { color: var(--mint); font-weight: 950; }.timetable-answer-view { display: grid; gap: 16px; margin-top: 26px; }.timetable-answer-view p { margin: 0; color: var(--yellow); font-size: clamp(25px, 3vw, 42px); font-weight: 900; line-height: 1.25; }.timetable-answer-view .primary-button { width: fit-content; }
.example-card.presence-slide .sentence-panel { padding: clamp(24px, 4.5vw, 58px); }.presence-view { display: grid; gap: 16px; width: 100%; }.presence-kicker { margin: 0; color: var(--yellow); font-size: 13px; font-weight: 950; letter-spacing: .16em; }.presence-title { margin: 0 0 4px; color: #f4f7ff; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; }.presence-note { margin: 0; color: var(--muted); font-size: 18px; font-weight: 750; }.presence-list { display: grid; gap: 14px; width: min(720px, 100%); }.presence-row { padding: 14px 16px; border: 1px solid rgba(102,136,255,.28); border-radius: 18px; background: rgba(19, 40, 86, .54); }.presence-prompt, .presence-answer { margin: 0; color: #d9e4ff; font-size: clamp(20px, 2.25vw, 34px); font-weight: 900; line-height: 1.22; }.presence-answer { margin-top: 10px; color: var(--mint); font-size: clamp(18px, 1.9vw, 27px); }.presence-reveal { margin-top: 12px; padding: 11px 18px; font-size: 14px; }.presence-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }.presence-choice { min-height: 58px; border: 2px solid #506ab5; border-radius: 16px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(17px, 2vw, 26px); font-weight: 950; }.presence-choice.correct { border-color: #65e6b8; color: #dffdf2; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.34); }.presence-choice.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }.presence-choice:disabled { cursor: default; }.presence-yellow { color: var(--yellow); }.presence-mint { color: var(--mint); }.presence-blue { color: #8da7ff; }.presence-red { color: #ff9b86; }.presence-white { color: #f4f7ff; }
.presence-prompt-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }.presence-next { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid rgba(255,216,77,.75); border-radius: 999px; color: #201d07; background: var(--yellow); cursor: pointer; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: 0 0 16px rgba(255,216,77,.20); }.presence-next:hover:not(:disabled) { transform: translateX(2px); box-shadow: 0 0 22px rgba(255,216,77,.34); }.presence-next:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }.presence-row { animation: presenceRowIn .22s ease-out; }@keyframes presenceRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.presence-hotspot-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }.presence-hotspot-marker { position: absolute; width: clamp(70px, 6vw, 104px); height: clamp(16px, 1.35vw, 24px); border: 5px solid #7d1414; border-radius: 999px; background: var(--yellow); box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 28px rgba(255,216,77,.45); transform: translate(calc(-100% - 22px), -50%); }.presence-hotspot-marker::before { content: ""; position: absolute; right: -39px; top: 50%; width: 0; height: 0; border-top: calc(clamp(18px, 1.65vw, 27px) + 8px) solid transparent; border-bottom: calc(clamp(18px, 1.65vw, 27px) + 8px) solid transparent; border-left: 42px solid #7d1414; transform: translateY(-50%); }.presence-hotspot-marker::after { content: ""; position: absolute; right: -31px; top: 50%; width: 0; height: 0; border-top: clamp(18px, 1.65vw, 27px) solid transparent; border-bottom: clamp(18px, 1.65vw, 27px) solid transparent; border-left: 32px solid var(--yellow); transform: translateY(-50%); filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }.presence-row.hotspot-step.pending-hotspot { border-style: dashed; border-color: rgba(255,216,77,.34); background: rgba(255,216,77,.05); }.presence-row.hotspot-step.pending-hotspot .presence-prompt-line { grid-template-columns: 1fr auto; min-height: 42px; }
.presence-title.compact { color: var(--muted); font-size: clamp(16px, 1.5vw, 22px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.presence-slide .presence-title.compact { color: #f4f7ff; font-size: clamp(24px, 2.8vw, 40px); white-space: normal; }
.example-card.inline-choice-slide .presence-title.compact { font-size: clamp(18px, 1.9vw, 28px); white-space: normal; }
.example-card:has(.comparatives-followup-list) .presence-title.compact { font-size: clamp(13px, 1.15vw, 18px); margin-bottom: 0; }
.comparatives-followup-list .inline-choice-prompt { font-size: clamp(17px, 1.55vw, 24px); line-height: 1.12; }
.comparatives-followup-list .presence-row { padding: 9px 12px; border-radius: 14px; }
.example-card:has(.simple-past-choice-list) .presence-title.compact { font-size: clamp(15px, 1.35vw, 22px); margin-bottom: 0; }
.simple-past-choice-list .inline-choice-prompt { font-size: clamp(15px, 1.35vw, 21px); line-height: 1.12; }
.simple-past-choice-list .presence-row { padding: 8px 11px; border-radius: 14px; }
.simple-past-choice-list .presence-next-word { width: auto; min-width: 96px; padding: 0 18px; border-radius: 18px; font-size: clamp(14px, 1.1vw, 18px); letter-spacing: .06em; }
.example-card.no-visual-slide:has(.simple-past-verb-review-list) { width: 100%; }
.example-card:has(.simple-past-verb-review-list) .sentence-panel { padding: clamp(18px, 2.4vw, 34px); }
.example-card:has(.simple-past-verb-review-list) .presence-view { align-items: stretch; gap: 10px; }
.example-card:has(.simple-past-verb-review-list) .presence-title { display: none; }
.example-card:has(.simple-past-verb-review-list) .presence-kicker { text-align: center; font-size: clamp(10px, .85vw, 13px); }
.simple-past-verb-review-list { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; }
.simple-past-verb-review-list .presence-row.category-list { width: 100%; min-width: 0; min-height: 58px; padding: 8px 12px; pointer-events: none; }
.simple-past-verb-review-list .presence-prompt-line { width: 100%; grid-template-columns: 1fr; }
.simple-past-verb-review-list .presence-prompt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; font-size: clamp(12px, 1.12vw, 18px) !important; letter-spacing: .025em !important; }
.simple-past-verb-review-list .verb-review-v1, .simple-past-verb-review-list .verb-review-v2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-past-verb-review-list .verb-review-v1 { color: #f4f7ff; }
.simple-past-verb-review-list .verb-review-v2 { color: var(--yellow); }
.example-card.inline-choice-slide .inline-choice-prompt { font-size: clamp(16px, 1.55vw, 24px); }
.example-card.inline-choice-slide .inline-choice-trigger { font-size: clamp(13px, 1.3vw, 20px); min-height: 32px; padding: 4px 12px; }
.example-card.inline-choice-slide .inline-choice-popup-option { font-size: clamp(13px, 1.3vw, 20px); min-height: 32px; padding: 5px 12px; }

.example-card.speech-bubble-slide .sentence-panel { position: relative; align-self: center; border: 0; background: transparent; box-shadow: none; }
.example-card.speech-bubble-slide .presence-view { position: relative; width: min(620px, 100%); padding: clamp(28px, 4vw, 48px); border: 4px solid rgba(255,216,77,.75); border-radius: 44px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,240,170,.94)); box-shadow: 0 22px 52px rgba(0,0,0,.28), 0 0 28px rgba(255,216,77,.18); }
.example-card.speech-bubble-slide .presence-view::before { content: ""; position: absolute; left: -38px; top: 48%; width: 64px; height: 64px; background: inherit; border-left: 4px solid rgba(255,216,77,.75); border-bottom: 4px solid rgba(255,216,77,.75); transform: rotate(45deg); }
.example-card.speech-bubble-slide .presence-kicker { color: #173267; }
.example-card.speech-bubble-slide .presence-title { position: relative; color: #071735; text-shadow: none; }
.presence-ending-s { color: #ffd84d; text-shadow: 0 0 16px rgba(255,216,77,.36); }
.presence-ending-es { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.36); }
.presence-negative-dont { color: #ff9b86; text-shadow: 0 0 16px rgba(255,155,134,.36); }
.presence-negative-doesnt { color: #8da7ff; text-shadow: 0 0 16px rgba(141,167,255,.36); }
.presence-question-do { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.36); }
.presence-question-does { color: #ffd84d; text-shadow: 0 0 16px rgba(255,216,77,.36); }
.presence-row.category-list { position: relative; display: inline-grid; place-items: center; min-height: 74px; padding: 16px 24px; border-color: rgba(255,216,77,.42); color: var(--yellow); background: linear-gradient(135deg, rgba(23,50,103,.92), rgba(9,23,58,.94)); box-shadow: 0 0 18px rgba(255,216,77,.10); }.presence-row.category-list.visited::after { content: "\2713"; position: absolute; top: -10px; right: -10px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid #071230; border-radius: 999px; color: #061d18; background: var(--mint); font-size: 20px; font-weight: 950; line-height: 1; box-shadow: 0 0 18px rgba(101,230,184,.38); pointer-events: none; }.presence-row.category-list .presence-prompt { color: var(--yellow); font-size: clamp(20px, 2.4vw, 34px); letter-spacing: .08em; }.presence-row.keyword-row { padding: 0; border: 0; background: transparent; }.presence-row.keyword-row .presence-prompt { display: flex; flex-wrap: wrap; gap: 9px; }.presence-row.keyword-row .presence-prompt span { display: inline-grid; place-items: center; min-height: 44px; padding: 8px 14px; border: 2px solid rgba(102,136,255,.62); border-radius: 12px; color: var(--yellow); background: #102650; font-size: clamp(14px, 1.45vw, 21px); letter-spacing: .05em; }.presence-height-tall { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.30); }.presence-height-medium { color: #ffd84d; text-shadow: 0 0 16px rgba(255,216,77,.30); }.presence-height-short { color: #ff9b86; text-shadow: 0 0 16px rgba(255,155,134,.30); }
.presence-row.capability-line { padding: clamp(18px, 2.6vw, 30px); border-color: rgba(255,216,77,.30); background: linear-gradient(135deg, rgba(24,49,102,.82), rgba(9,20,48,.76)); }
.presence-row.capability-line .presence-prompt { color: #f4f7ff; font-size: clamp(26px, 3vw, 44px); line-height: 1.18; }
.presence-list.can-capability-choice-list { width: min(760px, 100%); }
.can-capability-choice-list .presence-row { padding: clamp(20px, 3vw, 34px); border-color: rgba(255,216,77,.30); background: linear-gradient(135deg, rgba(24,49,102,.82), rgba(9,20,48,.76)); }
.can-capability-choice-list .presence-prompt { color: #f4f7ff; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.2; text-align: center; }
.can-capability-choice-list .presence-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.can-capability-choice-list .presence-choice { min-height: 72px; font-size: clamp(24px, 2.6vw, 38px); text-transform: uppercase; }
.presence-list.category-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, 100%); }
.presence-row.category-list.clickable { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }.presence-row.category-list.clickable:hover, .presence-row.category-list.clickable:focus-visible { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 24px rgba(255,216,77,.22); outline: none; }
.presence-image-link { display: inline; padding: 0 2px; border: 0; border-bottom: 3px solid currentColor; color: inherit; background: transparent; cursor: pointer; font: inherit; text-decoration: none; text-underline-offset: 5px; }
.presence-image-link:hover, .presence-image-link:focus-visible { color: var(--yellow); text-shadow: 0 0 16px rgba(255,216,77,.35); outline: none; }
.presence-room-link { color: var(--yellow); text-shadow: 0 0 16px rgba(255,216,77,.28); }
.house-room-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(62px, auto)); gap: 12px; width: min(900px, 100%); align-items: stretch; }
.house-room-grid .presence-row.category-list { width: 100%; min-width: 0; min-height: 62px; padding: 10px 12px; text-align: center; cursor: pointer; }
.house-room-grid .presence-row.category-list .presence-prompt { color: #fff; font-size: clamp(11px, 1.15vw, 18px); letter-spacing: .06em; }
.house-room-grid .presence-row:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; min-height: 140px; background: rgba(255,216,77,.14); border-color: rgba(255,216,77,.68); pointer-events: none; cursor: default; }
.house-room-grid .presence-row:nth-child(4) .presence-prompt { color: var(--yellow); font-size: clamp(17px, 1.8vw, 28px); line-height: 1.12; }
.example-card:has(.house-room-grid) .presence-title { font-size: clamp(18px, 2vw, 28px); }
.possessive-s-grid .presence-row.category-list .presence-prompt { font-size: clamp(12px, 1.25vw, 19px); }
.possessive-s-grid .presence-row:nth-child(4) .presence-prompt { letter-spacing: .12em; }
.character-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(620px, 100%); }
.character-hub-grid .presence-row.category-list { min-height: 58px; padding: 10px 12px; text-align: center; cursor: pointer; }
.character-hub-grid .presence-row.category-list .presence-prompt { color: #fff; font-size: clamp(11px, 1.05vw, 16px); letter-spacing: .05em; }
.character-hub-grid .presence-row:nth-child(5) { min-height: 86px; background: rgba(255,216,77,.14); border-color: rgba(255,216,77,.68); pointer-events: none; cursor: default; }
.character-hub-grid .presence-row:nth-child(5) .presence-prompt { color: var(--yellow); font-size: clamp(17px, 1.8vw, 28px); letter-spacing: .12em; white-space: pre-line; }
.example-card:has(.character-hub-grid) .presence-title { font-size: clamp(18px, 2vw, 28px); }
.count-noun-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(28px, 4.5vw, 70px); width: min(1040px, 100%); min-height: 330px; margin-top: 0; }
.count-noun-side { position: relative; display: grid; place-items: center; min-height: 300px; overflow: visible; }
.count-noun-options { position: absolute; inset: 0; transition: opacity .18s ease, transform .18s ease; }
.count-noun-options.hidden { display: none; }
.count-noun-main, .count-noun-item { border: 2px solid rgba(101,230,184,.72); color: #dffdf2; background: linear-gradient(135deg, rgba(21,83,66,.72), rgba(16,38,80,.82)); box-shadow: 0 0 18px rgba(101,230,184,.16); cursor: pointer; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.count-noun-main { z-index: 2; min-width: min(300px, 92%); min-height: 96px; padding: 18px; border-radius: 26px; font-size: clamp(21px, 2.35vw, 36px); position: relative; }
.count-noun-main:hover, .count-noun-main.active { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 26px rgba(255,216,77,.24); transform: translateY(-2px); }
.count-noun-item { position: absolute; min-width: 108px; min-height: 42px; padding: 7px 10px; border-radius: 15px; font-size: clamp(10px, .86vw, 14px); }
.count-noun-options .count-noun-item:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); }
.count-noun-options .count-noun-item:nth-child(2) { left: 2%; top: 15%; }
.count-noun-options .count-noun-item:nth-child(3) { right: 2%; top: 15%; }
.count-noun-options .count-noun-item:nth-child(4) { left: 6%; bottom: 0; }
.count-noun-options .count-noun-item:nth-child(5) { right: 6%; bottom: 0; }
.count-noun-item:hover, .count-noun-item.active { border-color: var(--yellow); color: #081735; background: var(--yellow); box-shadow: 0 0 22px rgba(255,216,77,.34); }
.count-noun-item:hover, .count-noun-item.active { transform: none; }
.example-card:has(.count-noun-hub) .sentence-panel { align-items: center; padding-block: clamp(18px, 3vw, 38px); }
.example-card:has(.count-noun-hub) .presence-view { gap: 8px; }
.example-card:has(.count-noun-hub) .presence-title { text-align: center; font-size: clamp(18px, 2vw, 31px); letter-spacing: .08em; }
.presentation-screen:has(.count-noun-placeholder) { height: calc(100vh - 60px); min-height: 0; gap: 12px; overflow: hidden; }
.presentation-screen:has(.count-noun-placeholder) .example-card { min-height: 0; }
.example-card:has(.count-noun-placeholder) .visual-panel { min-height: 370px; padding-block: 18px; overflow: hidden; }
.visual-panel img.count-noun-placeholder { width: min(672px, 100%); height: min(378px, 72vh); object-fit: contain; background: transparent; transform: scale(1.22); transform-origin: center; }
.count-noun-repeat-visual { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); place-items: center; gap: 10px; width: min(620px, 92%); max-height: 390px; padding: 18px; overflow: hidden; }
.count-noun-repeat-visual img { width: min(112px, 100%); aspect-ratio: 1; object-fit: contain; background: transparent; filter: drop-shadow(0 12px 16px rgba(0,0,0,.22)); }
.exercise-repeat-visual { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); place-items: center; gap: 12px; width: min(620px, 92%); max-height: 440px; padding: 18px; overflow: hidden; }
.exercise-repeat-visual img { width: min(120px, 100%); aspect-ratio: 1; object-fit: contain; background: transparent; filter: drop-shadow(0 12px 16px rgba(0,0,0,.24)); }
.exercise-visual-caption { position: absolute; left: 50%; bottom: clamp(16px, 2.4vw, 30px); z-index: 5; transform: translateX(-50%); width: min(720px, 90%); padding: 12px 22px; border: 2px solid rgba(255,216,77,.70); border-radius: 18px; color: #f4f7ff; background: rgba(7,18,48,.88); text-align: center; font-size: clamp(22px, 2.35vw, 38px); font-weight: 950; line-height: 1.18; box-shadow: 0 16px 36px rgba(0,0,0,.32), 0 0 24px rgba(255,216,77,.15); }
.exercise-visual-caption .quantity-verb, .exercise-visual-caption .quantity-suffix, .exercise-visual-caption .quantity-answer { color: var(--yellow); text-shadow: 0 0 14px rgba(255,216,77,.30); }
.exercise-visual-caption .quantity-blank { display: inline-block; min-width: 170px; border-bottom: .12em solid rgba(255,216,77,.82); transform: translateY(-.06em); }
.count-noun-visual-caption { position: absolute; left: 50%; bottom: clamp(20px, 3vw, 38px); transform: translateX(-50%); z-index: 5; min-width: min(520px, 88%); padding: 12px 24px; border: 2px solid rgba(255,216,77,.72); border-radius: 999px; color: #f4f7ff; background: rgba(7,18,48,.88); text-align: center; font-size: clamp(22px, 2.55vw, 40px); font-weight: 950; letter-spacing: .03em; box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 28px rgba(255,216,77,.18); }
.count-noun-visual-caption.stacked { width: min(680px, 92%); min-width: 0; padding: 14px 20px; border-radius: 18px; font-size: clamp(20px, 2.25vw, 34px); line-height: 1.15; }
.count-noun-visual-caption p { margin: 0; }
.count-noun-visual-caption p + p { margin-top: 8px; }
.count-noun-caption-next { margin: 9px auto; padding: 7px 18px; border: 2px solid rgba(255,216,77,.75); border-radius: 999px; color: #081735; background: var(--yellow); cursor: pointer; font-size: clamp(12px, 1vw, 16px); font-weight: 950; letter-spacing: .08em; }
.count-noun-caption-next:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,216,77,.28); }
@media (max-width: 900px) { .count-noun-hub { grid-template-columns: 1fr; min-height: 720px; }.count-noun-side { min-height: 330px; } }
.presence-list.some-any-choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: min(1180px, 100%); }
.some-any-choice-list .presence-row { padding: 10px 12px; border-radius: 15px; }
.some-any-choice-list .presence-prompt { font-size: clamp(15px, 1.28vw, 22px); line-height: 1.15; }
.some-any-choice-list .presence-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.some-any-choice-list .presence-choice { min-height: 42px; border-radius: 12px; font-size: clamp(15px, 1.25vw, 21px); text-transform: uppercase; }
.example-card:has(.some-any-choice-list) .presence-view { gap: 10px; }
.example-card:has(.some-any-choice-list) .presence-title { font-size: clamp(20px, 2.2vw, 34px); text-align: center; }
@media (max-width: 900px) { .presence-list.some-any-choice-list { grid-template-columns: 1fr; } }
.presence-list.some-any-single-choice-list { width: min(760px, 100%); }
.some-any-single-choice-list .presence-row { padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: linear-gradient(135deg, rgba(24,49,102,.82), rgba(9,20,48,.74)); }
.some-any-single-choice-list .presence-prompt { text-align: center; font-size: clamp(30px, 4vw, 58px); line-height: 1.08; }
.some-any-single-choice-list .presence-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.some-any-single-choice-list .presence-choice { min-height: 82px; border-radius: 20px; font-size: clamp(26px, 3vw, 42px); text-transform: uppercase; }
.some-any-single-choice-list .presence-next { display: block; width: min(220px, 100%); margin: 22px auto 0; }
.example-card:has(.some-any-single-choice-list) .presence-view { align-items: center; }
.example-card:has(.some-any-single-choice-list) .presence-title { text-align: center; font-size: clamp(23px, 2.5vw, 40px); }
.pie-dialogue-panel { display: grid; width: min(720px, 100%); gap: 18px; }
.pie-bubble-stack { display: grid; gap: 18px; justify-items: center; }
.pie-speech-bubble { position: relative; width: min(650px, 100%); margin: 0; padding: 22px 28px; border: 4px solid rgba(255,216,77,.86); border-radius: 28px; color: #f4f7ff; background: rgba(13,32,77,.92); font-size: clamp(24px, 2.6vw, 42px); font-weight: 950; line-height: 1.15; text-align: center; box-shadow: 0 20px 48px rgba(0,0,0,.34), 0 0 26px rgba(255,216,77,.15); }
.pie-speech-bubble::after { content: ""; position: absolute; left: 50%; width: 32px; height: 32px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.pie-speech-bubble.top::after { top: -19px; border-left: 4px solid rgba(255,216,77,.86); border-top: 4px solid rgba(255,216,77,.86); }
.pie-speech-bubble.bottom::after { bottom: -19px; border-right: 4px solid rgba(255,216,77,.86); border-bottom: 4px solid rgba(255,216,77,.86); }
.pie-dialogue-next { width: min(220px, 100%); }
.pie-inline-choices { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(102,136,255,.28); border-radius: 24px; background: rgba(8,20,50,.52); }
.pie-inline-choice { margin: 0; color: #f4f7ff; font-size: clamp(21px, 2.2vw, 34px); font-weight: 950; line-height: 1.55; }
.example-card:has(.pie-dialogue-panel) .presence-view { align-items: center; }
.example-card:has(.pie-dialogue-panel) .presence-title { text-align: center; font-size: clamp(20px, 2.2vw, 34px); }
.example-card:has(.sitting-room-list) .presence-title.compact { font-size: clamp(16px, 1.45vw, 22px); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.presence-weight-medium { color: #ffd84d; text-shadow: 0 0 16px rgba(255,216,77,.30); }.presence-weight-slim { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.30); }
.presence-have-got { color: #8da7ff; text-shadow: 0 0 16px rgba(141,167,255,.35); }.presence-hair-length { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.30); }.presence-hair-style { color: #ffd84d; text-shadow: 0 0 16px rgba(255,216,77,.30); }.presence-hair-color { color: #ff9b86; text-shadow: 0 0 16px rgba(255,155,134,.30); }
.presence-row.style-match { padding: 0; border: 0; background: transparent; }.presence-style-match { display: grid; gap: 14px; width: min(980px, 100%); }.presence-style-match img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 2px solid rgba(102,136,255,.45); border-radius: 20px; background: #fff; }.style-match-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.style-match-slot { display: grid; place-items: center; min-height: 64px; border: 2px dashed #6688ff; border-radius: 15px; color: rgba(244,247,255,.46); background: rgba(7,18,48,.72); font-size: clamp(14px, 1.5vw, 21px); font-weight: 950; letter-spacing: .05em; }.style-match-slot.filled { border-style: solid; border-color: var(--mint); color: #dffdf2; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.30); }.style-match-slot.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }.style-match-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }.style-match-card { min-height: 58px; padding: 10px 18px; border: 2px solid rgba(255,216,77,.62); border-radius: 14px; color: var(--yellow); background: #102650; cursor: grab; font-size: clamp(17px, 1.8vw, 25px); font-weight: 950; letter-spacing: .06em; }.style-match-card.used { opacity: .36; cursor: default; }
.visual-panel img.physical-quiz-image { width: min(430px, 92%); max-height: 70vh; }.visual-panel img.inline-choice-visual { width: min(400px, 80%); }.example-card.description-choice-slide .presence-title { font-size: clamp(22px, 2.4vw, 34px); white-space: normal; }.presence-list.description-choice-list { width: min(760px, 100%); }.presence-list.description-choice-list .presence-row { padding: 12px; }.presence-list.description-choice-list .presence-choices { grid-template-columns: 1fr; gap: 10px; }.presence-list.description-choice-list .presence-choice { min-height: 58px; padding: 10px 16px; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.16; text-align: center; }
.exercise-card .visual-panel.focus-zoom-panel { overflow: hidden; }.exercise-card .visual-panel img.exercise-focus-zoom { width: min(500px, 100%); aspect-ratio: 1; object-fit: cover; transform: scale(var(--focus-zoom, 2)); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); background: white; }
.visual-speech-bubble { position: absolute; left: clamp(28px, 4vw, 58px); top: clamp(12px, 2.4vw, 34px); width: max-content; max-width: min(560px, 86%); padding: 13px 20px; border: 4px solid rgba(255,216,77,.92); border-radius: 24px; color: #081735; background: rgba(255,255,255,.96); font-size: clamp(18px, 1.75vw, 28px); font-weight: 950; line-height: 1.08; white-space: nowrap; box-shadow: 0 18px 36px rgba(0,0,0,.30), 0 0 24px rgba(255,216,77,.18); z-index: 4; }.visual-speech-bubble::after { content: ""; position: absolute; left: 42px; bottom: -24px; width: 38px; height: 38px; border-right: 4px solid rgba(255,216,77,.92); border-bottom: 4px solid rgba(255,216,77,.92); background: inherit; transform: rotate(45deg); }.visual-name-caption { position: absolute; left: 50%; bottom: clamp(20px, 3vw, 38px); z-index: 4; transform: translateX(-50%); min-width: 180px; padding: 10px 22px; border: 3px solid rgba(255,216,77,.82); border-radius: 999px; color: var(--yellow); background: rgba(7,18,48,.88); text-align: center; font-size: clamp(18px, 1.8vw, 28px); font-weight: 950; letter-spacing: .08em; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.visual-hover-nametag { position: absolute; z-index: 8; transform: translate(-50%, calc(-100% - 12px)); min-width: 104px; padding: 7px 15px; border: 3px solid rgba(255,216,77,.95); border-radius: 999px; color: #081735; background: rgba(255,216,77,.96); text-align: center; font-size: clamp(13px, 1.25vw, 19px); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 24px rgba(255,216,77,.30); pointer-events: none; }.visual-hover-nametag::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 18px; border-right: 3px solid rgba(255,216,77,.95); border-bottom: 3px solid rgba(255,216,77,.95); background: inherit; transform: translateX(-50%) rotate(45deg); }
.presence-eye-blue { color: #70a1ff; text-shadow: 0 0 16px rgba(112,161,255,.34); }.presence-eye-brown { color: #c58b52; text-shadow: 0 0 16px rgba(197,139,82,.34); }.presence-eye-wears { color: #65e6b8; text-shadow: 0 0 16px rgba(101,230,184,.30); }
.inline-choice-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.7; }
.inline-choice-group { display: inline-flex; position: relative; vertical-align: middle; }
.inline-choice-trigger { min-height: 38px; padding: 5px 16px; border: 2px solid #506ab5; border-radius: 11px; color: var(--yellow); background: #173267; cursor: pointer; font-size: clamp(15px, 1.45vw, 22px); font-weight: 950; letter-spacing: .04em; transition: border-color .14s, background .14s; }
.inline-choice-trigger:hover:not(:disabled) { border-color: #6688ff; }
.inline-choice-trigger.correct { border-color: var(--mint); color: #dffdf2; background: #135342; box-shadow: 0 0 14px rgba(101,230,184,.32); cursor: default; }
.inline-choice-trigger.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; cursor: default; }
.inline-choice-trigger:disabled { cursor: default; }
.inline-choice-popup { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid rgba(102,136,255,.48); border-radius: 14px; background: #0e1f50; box-shadow: 0 8px 32px rgba(0,0,0,.6); z-index: 200; min-width: max-content; }
.inline-choice-popup::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #0e1f50; }
.inline-choice-popup-option { min-height: 38px; padding: 7px 16px; border: 2px solid #506ab5; border-radius: 10px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(15px, 1.45vw, 22px); font-weight: 950; white-space: nowrap; transition: border-color .12s, background .12s; }
.inline-choice-popup-option:hover { border-color: #6688ff; background: #1e3d7a; }
.example-card.no-visual-slide { grid-template-columns: 1fr; width: min(1120px, 100%); margin: auto; }.example-card.no-visual-slide .sentence-panel { align-items: stretch; }.presence-underlined { color: #f4f7ff; text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; }
.presence-row.replace-choice { padding: 16px; border-color: rgba(255,216,77,.28); background: linear-gradient(135deg, rgba(24,49,102,.78), rgba(9,20,48,.72)); }.presence-row.replace-choice .replace-prompt-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; }.replace-source, .replace-target { display: block; min-height: 72px; padding: 14px 18px; border: 1px solid rgba(102,136,255,.52); border-radius: 16px; background: rgba(10,25,61,.74); font-size: clamp(20px, 2vw, 30px); line-height: 1.18; white-space: normal; }.replace-source span, .replace-target span { display: inline; }.replace-target { border-color: rgba(255,216,77,.48); color: #fff1a8; background: rgba(255,216,77,.08); }.replace-arrow { display: grid; place-items: center; min-width: 48px; color: var(--yellow); font-size: clamp(24px, 2.6vw, 38px); font-weight: 950; }.presence-row.replace-choice .presence-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }.presence-row.replace-choice .presence-choice { min-height: 56px; font-size: clamp(18px, 1.7vw, 25px); }@media (max-width: 820px) { .presence-row.replace-choice .replace-prompt-line { grid-template-columns: 1fr; }.replace-arrow { min-height: 24px; transform: rotate(90deg); }.presence-row.replace-choice .presence-choices { grid-template-columns: 1fr; } }
.true-false-card.with-visual { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr); gap: 0; max-width: 1450px; padding: 0; overflow: hidden; }.true-false-card.with-visual .visual-panel { min-height: 100%; }.true-false-content { padding: clamp(24px, 3vw, 42px); }.true-false-card.with-visual .true-false-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.true-false-card.with-visual .true-false-row { min-height: 68px; padding: 10px 12px; }.true-false-card.with-visual .true-false-row p { font-size: clamp(14px, 1.15vw, 18px); }.true-false-actions { justify-content: center; margin-top: 18px; }@media (max-width: 900px) { .true-false-card.with-visual { grid-template-columns: 1fr; }.true-false-card.with-visual .visual-panel { min-height: 310px; }.true-false-card.with-visual .true-false-grid { grid-template-columns: 1fr; } }
.true-false-screen[data-exercise-id="there-is-are-unit5-true-false"] .true-false-card.with-visual .true-false-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }.true-false-screen[data-exercise-id="there-is-are-unit5-true-false"] .true-false-card.with-visual .true-false-row { min-height: 76px; }
.true-false-action-message { flex: 1 0 100%; max-width: 720px; margin: 0 auto 12px; color: var(--muted); font-size: clamp(17px, 1.6vw, 24px); font-weight: 850; line-height: 1.35; text-align: center; }
.exercise-card.wide-options-choice .exercise-panel { padding: clamp(26px, 4vw, 54px); }.exercise-card.wide-options-choice .exercise-panel h1.compact-prompt { max-width: 720px; margin-bottom: 22px; font-size: clamp(24px, 3.1vw, 44px); }.article-options.wide-sentence-options { grid-template-columns: 1fr; width: min(760px, 100%); }.article-options.wide-sentence-options .article-option { min-height: 74px; padding: 14px 22px; font-size: clamp(18px, 2vw, 29px); line-height: 1.2; text-align: left; text-transform: none; }
.visual-panel img.wide-clean-visual { width: min(620px, 100%); aspect-ratio: auto; max-height: 460px; object-fit: contain; background: transparent; }
.visual-panel img.hub-collage-visual { width: min(640px, 100%); aspect-ratio: 16 / 9; max-height: 460px; object-fit: contain; background: transparent; }
.true-false-statement { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.true-false-image-button { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid rgba(255,216,77,.7); border-radius: 10px; color: var(--yellow); background: rgba(255,216,77,.08); cursor: pointer; font-size: 18px; font-weight: 950; line-height: 1; }
.true-false-image-button:hover { border-color: var(--yellow); background: rgba(255,216,77,.18); transform: translateY(-1px); }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-card-bank { min-height: 88px; padding: 14px; gap: 8px; }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-card { min-width: 86px; min-height: 50px; padding: 8px 12px; font-size: clamp(13px, 1.35vw, 18px); letter-spacing: .03em; }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; justify-items: stretch; min-height: 245px; padding: 14px; gap: 8px; }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zone > strong,
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zone > span { grid-column: 1 / -1; }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zone > strong { font-size: clamp(16px, 1.8vw, 24px); }
.sort-screen[data-exercise-id="comparatives-sort"] .sort-zone .sort-card { width: 100%; min-width: 0; min-height: 42px; padding: 7px 8px; font-size: clamp(12px, 1.05vw, 15px); }
@media (max-width: 900px) { .sort-screen[data-exercise-id="comparatives-sort"] .sort-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sort-screen[data-exercise-id="comparatives-sort"] .sort-zones { grid-template-columns: 1fr; } }
.lucky-spin-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 18px; }
.lucky-spin-card { position: relative; display: grid; grid-template-columns: minmax(380px, .9fr) minmax(420px, 1.1fr); gap: clamp(20px, 3vw, 42px); align-items: center; width: min(1450px, 100%); margin: auto; min-height: 0; padding: clamp(22px, 3.4vw, 44px); border: 1px solid rgba(143,166,255,.22); border-radius: 30px; background: linear-gradient(135deg, rgba(10,25,61,.9), rgba(5,12,30,.86)); box-shadow: var(--shadow); overflow: hidden; }
.lucky-wheel-wrap { position: relative; display: grid; place-items: center; justify-self: center; width: min(500px, 100%); aspect-ratio: 1; }
.lucky-wheel { position: relative; width: 100%; aspect-ratio: 1; border: 12px solid #0a1631; border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(255,255,255,.13), inset 0 0 42px rgba(0,0,0,.36), 0 24px 70px rgba(0,0,0,.42), 0 0 34px rgba(255,216,77,.12); transition: transform 2.55s cubic-bezier(.12,.72,.12,1); overflow: hidden; }
.lucky-wheel::after { position: absolute; inset: 15%; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; pointer-events: none; }
.lucky-segment-label { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px; border-radius: 50%; color: #071225; background: rgba(255,255,255,.88); font-size: 19px; font-weight: 950; transform: rotate(var(--segment-angle)) translateY(-172px) rotate(calc(var(--segment-counter-angle) + var(--wheel-counter-rotation, 0deg))); box-shadow: 0 3px 12px rgba(0,0,0,.22); }
.lucky-pointer { position: absolute; z-index: 4; top: -2px; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 42px solid #ffd84d; filter: drop-shadow(0 8px 10px rgba(0,0,0,.34)); }
.lucky-spin-button { position: absolute; z-index: 5; display: grid; place-items: center; width: clamp(108px, 11vw, 142px); aspect-ratio: 1; border: 7px solid rgba(255,255,255,.32); border-radius: 50%; color: #241f00; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd84d 52%, #e1a900); cursor: pointer; font-size: clamp(22px, 2.5vw, 32px); font-weight: 950; letter-spacing: .08em; box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 28px rgba(255,216,77,.28); }
.lucky-spin-button:hover:not(:disabled) { transform: scale(1.04); }
.lucky-spin-button:disabled { cursor: default; opacity: .65; transform: none; }
.lucky-task-panel { display: grid; align-content: center; gap: 16px; min-height: 470px; padding: clamp(24px, 3vw, 42px); border: 1px solid rgba(143,166,255,.24); border-radius: 28px; background: rgba(7,17,40,.76); }
.lucky-spin-visual { overflow: hidden; justify-self: start; width: min(306px, 100%); border: 2px solid rgba(255,216,77,.45); border-radius: 20px; background: #fff; cursor: zoom-in; }
.lucky-spin-visual img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.lucky-task-panel h1 { margin: 0; color: #f4f7ff; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.18; }
.lucky-task-panel p:not(.eyebrow) { margin: 0; color: #aeb9d4; font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; }
.lucky-judge { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.lucky-judge button { flex: 1 1 170px; }
.lucky-judge .secondary-button { color: #ffe4df; border-color: #ff8066; background: rgba(110,44,37,.65); }
.lucky-end { display: grid; gap: 14px; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(143,166,255,.22); }
.lucky-end h2 { margin: 0; color: #ffd84d; font-size: clamp(36px, 4.6vw, 66px); }
.lucky-end-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lucky-end-actions button { flex: 1 1 180px; }
.lucky-floating-text { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffd84d; font-size: clamp(42px, 6vw, 86px); font-weight: 950; letter-spacing: .08em; text-shadow: 0 0 18px rgba(255,216,77,.7), 0 8px 22px rgba(0,0,0,.45); pointer-events: none; opacity: 0; }
.lucky-floating-text.show { animation: luckyFloatScore 1.05s ease-out forwards; }
@keyframes luckyFloatScore { 0% { opacity: 0; transform: translate(-50%, -26%) scale(.72); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -138%) scale(1); } }
.lucky-image-overlay { position: fixed; z-index: 9990; inset: 0; display: grid; place-items: center; padding: clamp(18px, 3vw, 42px); background: rgba(2,7,23,.9); backdrop-filter: blur(8px); }
.lucky-image-overlay img { display: block; max-width: min(88vw, 980px); max-height: 86vh; border-radius: 24px; background: #fff; object-fit: contain; box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 34px rgba(255,216,77,.16); }
.lucky-image-overlay-close { position: fixed; top: 22px; right: 22px; z-index: 9991; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid rgba(255,255,255,.34); border-radius: 14px; color: #f4f7ff; background: rgba(10,25,61,.86); cursor: pointer; font-size: 24px; font-weight: 950; }
.lucky-image-overlay-close:hover { border-color: var(--yellow); color: var(--yellow); }
.jumbled-card.with-visual { grid-template-columns: minmax(260px, .55fr) minmax(420px, 1fr); align-items: center; column-gap: clamp(18px, 3vw, 42px); }
.jumbled-card.with-visual .reference-type,
.jumbled-card.with-visual h1,
.jumbled-card.with-visual .exercise-feedback { grid-column: 1 / -1; }
.jumbled-image-panel { overflow: hidden; justify-self: center; width: min(340px, 100%); border: 2px solid rgba(255,216,77,.42); border-radius: 22px; background: #fff; }
.jumbled-image-panel img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.jumbled-card.with-visual .jumbled-word-tiles { min-height: 210px; }
@media (max-width: 820px) { .jumbled-card.with-visual { grid-template-columns: 1fr; }.jumbled-card.with-visual .reference-type, .jumbled-card.with-visual h1, .jumbled-card.with-visual .exercise-feedback { grid-column: auto; } }
@media (max-width: 980px) { .lucky-spin-card { grid-template-columns: 1fr; }.lucky-wheel-wrap { width: min(380px, 100%); }.lucky-segment-label { transform: rotate(var(--segment-angle)) translateY(-132px) rotate(calc(var(--segment-counter-angle) + var(--wheel-counter-rotation, 0deg))); } }
.pc-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.pc-card { display: grid; grid-template-columns: minmax(280px, .88fr) minmax(360px, 1.12fr); overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }.pc-text-panel { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(30px, 5.5vw, 68px); }.pc-paragraph { display: flex; flex-direction: column; gap: 16px; }.pc-paragraph .inline-choice-prompt { margin: 0; color: #d9e4ff; font-size: clamp(18px, 2vw, 30px); font-weight: 900; line-height: 1.7; }.pc-result { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(102,136,255,.22); }.pc-result-text { margin: 0; color: var(--mint); font-size: clamp(18px, 2vw, 28px); font-weight: 900; }.pc-card .visual-panel img { width: min(460px, 100%); aspect-ratio: auto; max-height: 72vh; object-fit: contain; background: white; }
.pc-card.pc-text-only { grid-template-columns: 1fr; width: min(980px, 100%); margin: auto; }
.pc-card.pc-text-only .pc-text-panel { align-items: center; text-align: center; }
.pc-card.pc-text-only .pc-paragraph { width: min(820px, 100%); }
.pc-card.pc-text-only .pc-paragraph .inline-choice-prompt { justify-content: center; font-size: clamp(30px, 4vw, 58px); line-height: 1.35; }
.pc-personality-match { display: grid; gap: 14px; width: min(820px, 100%); margin-top: 12px; padding-top: 18px; border-top: 1px solid rgba(102,136,255,.24); }
.pc-personality-match h2 { margin: 0; color: var(--yellow); font-size: clamp(22px, 2.4vw, 36px); font-weight: 950; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.pc-personality-match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-personality-character-option { display: grid; gap: 8px; justify-items: center; padding: 10px; border: 2px solid rgba(102,136,255,.46); border-radius: 18px; color: #f4f7ff; background: rgba(20,43,92,.82); cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.pc-personality-character-option:hover:not(:disabled),
.pc-personality-character-option:focus-visible:not(:disabled) { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,216,77,.18); outline: none; }
.pc-personality-character-option img { width: min(118px, 100%); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; background: white; }
.pc-personality-character-option strong { color: var(--yellow); font-size: clamp(12px, 1vw, 17px); font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.pc-personality-character-option.correct { border-color: var(--mint); background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.28); }
.pc-personality-character-option.wrong { border-color: #ff8066; background: #6e2c25; animation: sortShake .35s ease-in-out; }
.pc-personality-character-option:disabled { cursor: default; }
@media (max-width: 780px) { .pc-personality-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fill-blank-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.fill-blank-card { display: grid; align-content: center; gap: 18px; width: min(1320px, 100%); margin: auto; padding: clamp(24px, 4vw, 54px); border: 1px solid rgba(255,255,255,.10); border-radius: 30px; background: var(--panel); box-shadow: var(--shadow); }.fill-blank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.fill-blank-item { display: flex; align-items: center; gap: 8px; min-height: 88px; padding: 16px 18px; border: 1px solid rgba(102,136,255,.30); border-radius: 18px; color: var(--yellow); background: rgba(19, 40, 86, .54); font-size: clamp(18px, 1.55vw, 27px); font-weight: 900; line-height: 1.24; flex-wrap: wrap; }.fill-blank-mark { color: #f4f7ff; }.fill-blank-answer { min-width: 86px; min-height: 38px; padding: 3px 14px; border: 2px dashed rgba(255,216,77,.75); border-radius: 999px; color: var(--yellow); background: rgba(255,216,77,.08); cursor: pointer; font-size: inherit; font-weight: 950; }.fill-blank-answer.revealed { border-style: solid; border-color: var(--mint); color: #062a20; background: var(--mint); box-shadow: 0 0 18px rgba(101,230,184,.30); cursor: default; }@media (max-width: 900px) { .fill-blank-grid { grid-template-columns: 1fr; } }
.mistake-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr; gap: 20px; }.mistake-card { display: grid; align-content: center; justify-items: center; gap: 22px; width: min(1180px, 100%); margin: auto; padding: clamp(28px, 5vw, 66px); border: 1px solid rgba(255,255,255,.10); border-radius: 30px; text-align: center; background: var(--panel); box-shadow: var(--shadow); }.mistake-card h1 { max-width: 1000px; margin: 0; color: #f4f7ff; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; }.mistake-card h1.mistake-correct-sentence { color: var(--mint); text-shadow: 0 0 20px rgba(101,230,184,.22); }.mistake-card h1.mistake-wrong-sentence { color: #ffb5a8; }.mistake-decision-buttons { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 16px; width: min(620px, 100%); }.mistake-decision-buttons button, .mistake-word { min-height: 72px; border: 2px solid #506ab5; border-radius: 18px; color: var(--text); background: #173267; cursor: pointer; font-size: clamp(20px, 2.5vw, 34px); font-weight: 950; }.mistake-decision-buttons button:first-child { border-color: rgba(101,230,184,.65); }.mistake-decision-buttons button:last-child { border-color: rgba(255,128,102,.65); }.mistake-decision-buttons button:disabled, .mistake-word:disabled { cursor: default; opacity: .72; }.mistake-word-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: min(980px, 100%); padding: 22px; border: 2px dashed #4c659e; border-radius: 22px; background: rgba(4,12,30,.44); }.mistake-word { min-height: 62px; padding: 10px 18px; font-size: clamp(18px, 2.1vw, 30px); }.mistake-word.correct { border-color: var(--mint); color: #dffdf2; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.36); }.mistake-word.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; animation: sortShake .35s ease-in-out; }
.mistake-fixed-sentence { display: block; margin-top: 12px; padding: 16px 22px; border: 2px solid rgba(101,230,184,.55); border-radius: 18px; color: #dffdf2; background: rgba(19,83,66,.55); box-shadow: 0 0 18px rgba(101,230,184,.18); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.18; }

/* ── STUDENT MATCH ─────────────────────────────────────── */
.sm-screen { display: grid; min-height: calc(100vh - 60px); grid-template-rows: auto 1fr auto auto; gap: 18px; padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 40px); }
.sm-progress-wrap { font-size: clamp(14px, 1.3vw, 20px); font-weight: 950; letter-spacing: .06em; color: var(--yellow); white-space: nowrap; }
.sm-student-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 22px); }
.sm-student-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(10px, 1.5vw, 18px) clamp(8px, 1vw, 14px); border: 2px solid rgba(102,136,255,.38); border-radius: 22px; background: var(--panel); cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.sm-student-card:hover:not(.sm-matched) { border-color: #6688ff; box-shadow: 0 0 20px rgba(102,136,255,.22); }
.sm-student-card.sm-matched { border-color: rgba(102,136,255,.2); opacity: .32; filter: grayscale(1); cursor: default; box-shadow: none; }
.sm-student-img-frame { width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 14px; background: #fff; }
.sm-student-img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.sm-student-name { color: var(--yellow); font-size: clamp(13px, 1.3vw, 20px); font-weight: 950; letter-spacing: .06em; text-align: center; }
.sm-desc-list { display: flex; flex-direction: column; gap: 10px; }
.sm-desc-card { display: flex; align-items: center; min-height: 58px; padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 24px); border: 2px solid rgba(102,136,255,.38); border-radius: 16px; color: var(--text); background: var(--panel); cursor: pointer; font-size: clamp(14px, 1.35vw, 22px); font-weight: 850; line-height: 1.3; transition: border-color .14s, background .14s, opacity .25s; }
.sm-desc-card:hover:not(.sm-matched) { border-color: #6688ff; background: #1a2f60; }
.sm-desc-card.sm-selected { border-color: var(--yellow); background: rgba(255,216,77,.10); color: var(--yellow); }
.sm-desc-card.sm-matched { opacity: .28; cursor: default; pointer-events: none; }
.sm-result { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px; }
.sm-result-text { margin: 0; color: var(--mint); font-size: clamp(18px, 1.8vw, 28px); font-weight: 950; }

/* ── PRESENCE OVERLAY (adverb / clickable item popup) ── */
.presence-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(2,7,23,.86); }
.presence-overlay-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(640px, 100%); padding: clamp(28px, 5vw, 52px) clamp(24px, 4vw, 44px); border: 1px solid rgba(143,166,255,.34); border-radius: 28px; background: #0d1b39; box-shadow: var(--shadow); }
.presence-overlay-card.overlay-lg { width: min(768px, 100%); }
.presence-overlay-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #142650; cursor: pointer; font-size: 18px; font-weight: 900; }
.presence-overlay-close:hover { color: var(--text); border-color: #6688ff; }
.presence-overlay-question { margin: 0; color: #f4f7ff; font-size: clamp(18px, 2.2vw, 30px); font-weight: 900; text-align: center; }
.presence-overlay-image { width: min(420px, 100%); aspect-ratio: 4/3; object-fit: contain; border-radius: 18px; background: #fff; }
.overlay-lg .presence-overlay-image { width: min(504px, 100%); }
.presence-overlay-sentence { margin: 0; color: #f4f7ff; font-size: clamp(20px, 2.6vw, 34px); font-weight: 900; text-align: center; line-height: 1.3; }
.freq-highlight { color: var(--yellow); }
.reveal-blank { color: var(--yellow); font-weight: 900; cursor: pointer; border-bottom: 2px solid var(--yellow); padding: 0 3px; }
.reveal-blank:hover { opacity: .75; }

/* ── FREQ ADVERB LIST — %30 küçük ── */
.freq-adverb-list .presence-row.category-list { min-height: 52px; padding: 11px 17px; }
.freq-adverb-list .presence-row.category-list .presence-prompt { font-size: clamp(14px, 1.68vw, 24px); }
.freq-overlay-line { display: block; margin-top: 10px; }
.freq-overlay-line:first-child { margin-top: 0; }
.freq-adverb-list .presence-row.category-list { width: fit-content; min-width: 0; padding-left: 28px; padding-right: 28px; }
.freq-adverb-list { display: grid !important; grid-template-columns: max-content; }
.freq-adverb-list .presence-row.category-list { width: 100%; min-width: 0; }

/* ── PRESENT PROGRESSIVE — cross/diamond verb grid ── */
.ppt-verb-cross { display: grid !important; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 14px; width: 100%; height: 100%; place-items: center; }
.ppt-verb-cross .presence-row:nth-child(1) { grid-column: 1; grid-row: 1; }
.ppt-verb-cross .presence-row:nth-child(2) { grid-column: 3; grid-row: 1; }
.ppt-verb-cross .presence-row:nth-child(3) { grid-column: 2; grid-row: 2; background: rgba(255,216,77,.12); border-color: rgba(255,216,77,.6); white-space: nowrap; }
.ppt-verb-cross .presence-row:nth-child(4) { grid-column: 1; grid-row: 3; }
.ppt-verb-cross .presence-row:nth-child(5) { grid-column: 3; grid-row: 3; }
.ppt-verb-cross .presence-row.category-list { width: 100%; text-align: center; }
.ppt-verb-cross .presence-row.category-list .presence-prompt { color: #fff; font-size: clamp(15px, 1.7vw, 26px); }
.ppt-verb-cross .presence-row:nth-child(3) .presence-prompt { color: var(--yellow); font-size: clamp(22px, 2.6vw, 38px); font-weight: 800; letter-spacing: .12em; }

/* ── COMPARATIVES — image next button ── */
.img-next-btn { display: block; margin: 10px auto 0; padding: 8px 28px; background: #142650; border: 2px solid var(--yellow); border-radius: 12px; color: var(--yellow); font-size: clamp(13px, 1.4vw, 18px); font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.img-next-btn:hover { background: rgba(255,216,77,.12); }

/* ── COMPARATIVES — student reveal list ── */
.ppt-comp-reveal-list { width: 100%; display: flex !important; flex-direction: column; gap: 8px; }
.ppt-comp-reveal-list .presence-row.category-list { width: 100%; min-width: clamp(260px, 28vw, 460px); text-align: center; min-height: 48px; padding: 9px 22px; }
.ppt-comp-reveal-list .presence-row.category-list .presence-prompt { color: var(--yellow); font-size: clamp(14px, 1.6vw, 22px); font-weight: 900; letter-spacing: .07em; }
.ppt-comp-reveal-list .presence-row.revealed { border-color: rgba(255,216,77,.45); background: rgba(255,216,77,.07); cursor: default; }
.ppt-comp-reveal-list .presence-row.revealed .presence-prompt { color: #f4f7ff; font-size: clamp(11px, 1.2vw, 17px); font-weight: 700; letter-spacing: .02em; line-height: 1.65; text-align: left; }

/* ── COMPARATIVES — diamond grid (TL _ TR / _ C _ / BL _ BR) ── */
.ppt-comp-diamond { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows: 1fr 1fr 1fr; gap: 14px; width: 100%; height: 100%; place-items: center; }
.ppt-comp-diamond .presence-row:nth-child(1) { grid-column: 1; grid-row: 1; }
.ppt-comp-diamond .presence-row:nth-child(2) { grid-column: 3; grid-row: 1; }
.ppt-comp-diamond .presence-row:nth-child(3) { grid-column: 1 / 4; grid-row: 2; justify-self: center; background: rgba(255,216,77,.12); border-color: rgba(255,216,77,.6); pointer-events: none; cursor: default; white-space: nowrap; width: fit-content; }
.ppt-comp-diamond .presence-row:nth-child(4) { grid-column: 1; grid-row: 3; }
.ppt-comp-diamond .presence-row:nth-child(5) { grid-column: 3; grid-row: 3; }
.ppt-comp-diamond .presence-row.category-list { width: 100%; min-width: 0; text-align: center; padding: 10px 14px; min-height: 56px; }
.ppt-comp-diamond .presence-row.category-list .presence-prompt { color: #fff; font-size: clamp(11px, 1.2vw, 17px); }
.ppt-comp-diamond .presence-row:nth-child(3) .presence-prompt { font-size: clamp(11px, 1.2vw, 18px); font-weight: 800; letter-spacing: .02em; }
.example-card:has(.ppt-comp-diamond) .presence-title { font-size: clamp(18px, 2vw, 28px); white-space: normal; }

/* ── COMPARATIVES — 3×3 grid (TL T TR / _ C _ / BL B BR) ── */
.ppt-comp-cross { display: grid !important; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 14px; width: 100%; height: 100%; place-items: center; }
.ppt-comp-cross .presence-row:nth-child(1) { grid-column: 1; grid-row: 1; }
.ppt-comp-cross .presence-row:nth-child(2) { grid-column: 2; grid-row: 1; }
.ppt-comp-cross .presence-row:nth-child(3) { grid-column: 3; grid-row: 1; }
.ppt-comp-cross .presence-row:nth-child(4) { grid-column: 2; grid-row: 2; background: rgba(255,216,77,.12); border-color: rgba(255,216,77,.6); pointer-events: none; cursor: default; white-space: nowrap; }
.ppt-comp-cross .presence-row:nth-child(5) { grid-column: 1; grid-row: 3; }
.ppt-comp-cross .presence-row:nth-child(6) { grid-column: 2; grid-row: 3; }
.ppt-comp-cross .presence-row:nth-child(7) { grid-column: 3; grid-row: 3; }
.ppt-comp-cross .presence-row:nth-child(8) { grid-column: 1; grid-row: 2; }
.ppt-comp-cross .presence-row:nth-child(9) { grid-column: 3; grid-row: 2; }
.ppt-comp-cross .presence-row.category-list { width: 100%; text-align: center; }
.ppt-comp-cross .presence-row.category-list .presence-prompt { color: #fff; font-size: clamp(13px, 1.5vw, 22px); }
.ppt-comp-cross .presence-row:nth-child(4) .presence-prompt { font-size: clamp(20px, 2.4vw, 36px); font-weight: 800; letter-spacing: .1em; }
.example-card:has(.ppt-comp-cross) .presence-title { font-size: clamp(18px, 2vw, 28px); white-space: normal; }

/* ── PRESENT PROGRESSIVE — character name buttons ── */
.ppt-character-list { width: fit-content; justify-self: center; }
.ppt-character-list .presence-row.category-list { min-width: clamp(220px, 22vw, 340px); text-align: center; }
.ppt-character-list .presence-row.category-list .presence-prompt { color: var(--yellow); font-size: clamp(18px, 2vw, 30px); font-weight: 900; }
.ppt-character-list .presence-row.revealed { border-color: rgba(255,216,77,.55); background: rgba(255,216,77,.08); cursor: default; }
.ppt-character-list .presence-row.revealed .presence-prompt { color: #f4f7ff; font-size: clamp(15px, 1.6vw, 24px); }

/* ── FILL BLANK — image+segments layout ── */
.fill-blank-grid-img { grid-template-columns: 1fr; }
.fill-blank-item-seg { align-items: center; gap: 16px; flex-wrap: nowrap; min-height: 100px; }
.fill-blank-seg-img { flex-shrink: 0; width: clamp(120px, 14vw, 200px); aspect-ratio: 4/3; object-fit: contain; border-radius: 12px; background: #fff; }
.fill-blank-seg-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; color: #f4f7ff; font-size: clamp(16px, 1.6vw, 26px); font-weight: 900; line-height: 1.6; }
.fill-blank-clue { color: var(--muted); font-size: .82em; font-weight: 700; }
.word-bank-fill-grid { display: block; }
.word-bank-fill-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: clamp(18px, 3vw, 34px); align-items: stretch; }
.word-bank-fill-bank { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; padding: 16px; border: 2px dashed rgba(255,216,77,.35); border-radius: 22px; background: rgba(255,216,77,.05); }
.word-bank-fill-word { min-height: 56px; padding: 10px 14px; border: 2px solid rgba(101,230,184,.78); border-radius: 16px; color: #f4f7ff; background: rgba(12,82,67,.68); font-size: clamp(18px, 1.45vw, 26px); font-weight: 950; letter-spacing: .03em; text-transform: uppercase; cursor: grab; transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease; touch-action: none; user-select: none; }
.word-bank-fill-word:hover, .word-bank-fill-word.selected { transform: translateY(-2px); border-color: var(--yellow); background: rgba(255,216,77,.18); color: var(--yellow); box-shadow: 0 0 18px rgba(255,216,77,.18); }
.word-bank-fill-word.dragging { opacity: .55; transform: scale(.96); }
.word-bank-fill-word.used { cursor: default; opacity: .38; border-color: rgba(101,230,184,.42); background: rgba(101,230,184,.10); color: rgba(244,247,255,.72); box-shadow: none; }
.word-bank-fill-word.wrong, .word-bank-fill-target.wrong { animation: screenShake .24s linear; border-color: #ff5d6c; background: rgba(255,93,108,.18); color: #ffb7bf; }
.word-bank-fill-sentences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.word-bank-fill-row { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; min-height: 88px; padding: 14px 16px; border: 1px solid rgba(102,136,255,.34); border-radius: 18px; background: rgba(19,40,86,.56); }
.word-bank-fill-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #061629; background: var(--yellow); font-size: 18px; font-weight: 950; }
.word-bank-fill-sentence { margin: 0; color: #f4f7ff; font-size: clamp(16px, 1.25vw, 22px); font-weight: 850; line-height: 1.35; }
.word-bank-fill-target { min-width: 130px; min-height: 42px; margin-left: 6px; padding: 4px 14px; border: 2px dashed rgba(255,216,77,.72); border-radius: 999px; color: var(--yellow); background: rgba(255,216,77,.08); font: inherit; font-weight: 950; text-transform: uppercase; cursor: pointer; }
.word-bank-fill-target.drag-over { transform: scale(1.04); border-style: solid; background: rgba(255,216,77,.18); }
.word-bank-fill-target.revealed { border-style: solid; border-color: var(--mint); color: #062a20; background: var(--mint); box-shadow: 0 0 18px rgba(101,230,184,.28); cursor: default; }
.word-bank-fill-actions { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
@media (max-width: 980px) { .word-bank-fill-layout { grid-template-columns: 1fr; } .word-bank-fill-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); } .word-bank-fill-sentences { grid-template-columns: 1fr; } }

/* ── PC SKIP BUTTON ── */
.pc-skip-btn { align-self: center; margin-top: 10px; padding: 7px 20px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: clamp(12px, 1.2vw, 16px); font-weight: 700; letter-spacing: .06em; }
.pc-skip-btn:hover { border-color: #6688ff; color: var(--text); }

/* ── COMPARISON OVERLAY (Present Progressive vs Simple Present) ── */
.presence-overlay.comparison-mode .presence-overlay-card { width: min(1200px, 96%); max-height: 90vh; }
.presence-overlay.comparison-mode .presence-overlay-question { display: none; }
.presence-overlay.comparison-mode .presence-overlay-image { display: none; }
.presence-overlay.comparison-mode .presence-overlay-sentence { width: 100%; font-size: inherit; }
.comp-layout { display: flex; align-items: stretch; gap: 10px; width: 100%; }
.comp-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.comp-col.hidden { display: none; }
.comp-img { width: 84%; aspect-ratio: 4/3; object-fit: contain; border-radius: 14px; background: #fff; }
.comp-caption { color: #f4f7ff; font-size: clamp(14px, 1.6vw, 22px); font-weight: 800; text-align: center; margin: 0; line-height: 1.3; }
.comp-divider { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.comp-advance-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--yellow); color: var(--yellow); background: rgba(255,216,77,.12); cursor: pointer; font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.comp-advance-btn:hover { background: rgba(255,216,77,.28); }
.comp-reveal-btn { padding: 8px 20px; border-radius: 10px; border: 2px solid var(--yellow); color: var(--yellow); background: rgba(255,216,77,.1); cursor: pointer; font-size: clamp(13px, 1.4vw, 18px); font-weight: 800; }
.comp-reveal-btn:hover { background: rgba(255,216,77,.22); }
.comp-reveal-sentence { color: #f4f7ff; font-size: clamp(14px, 1.6vw, 22px); font-weight: 800; text-align: center; margin: 0; line-height: 1.3; }
.comp-reveal-sentence.hidden { display: none; }

.pronoun-snap-card .pronoun-choice-buttons.quantity-snap-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(760px, 100%); }
.pronoun-snap-card .pronoun-choice-buttons.quantity-snap-choices button { min-height: 54px; padding: 8px 10px; border-radius: 14px; font-size: clamp(15px, 1.65vw, 24px); letter-spacing: .06em; line-height: 1.05; white-space: normal; }
@media (max-width: 760px) { .pronoun-snap-card .pronoun-choice-buttons.quantity-snap-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.snap-total-timer { --snap-total-angle: 360deg; position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(var(--yellow) var(--snap-total-angle), #20335f 0deg); box-shadow: 0 0 24px rgba(255,216,77,.18); }
.snap-total-timer::before { position: absolute; inset: 7px; border-radius: inherit; background: #08152f; content: ""; }
.snap-total-timer-emoji { position: absolute; top: 12px; z-index: 1; font-size: 20px; line-height: 1; }
.snap-total-timer strong { position: relative; z-index: 1; margin-top: 18px; color: var(--yellow); font-size: 28px; font-weight: 950; line-height: 1; }

.room-screen { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; height: 100%; }
.room-header { grid-template-columns: auto 1fr auto; }
.room-stage { display: grid; grid-template-columns: minmax(300px, 1.4fr) minmax(280px, .7fr); gap: 22px; min-height: 0; }
.room-image-wrap { position: relative; width: 100%; aspect-ratio: 1672 / 941; border-radius: 24px; overflow: hidden; background: #040a1e; border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow); }
.room-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.room-hit-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-hit-shape { fill: transparent; cursor: pointer; }
.room-hit-svg.debug-outline .room-hit-shape { fill: rgba(255, 80, 80, .30); stroke: #ff5050; stroke-width: 4; }
.room-sentence-panel { display: grid; align-content: center; gap: 22px; padding: 28px; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.room-sentence { margin: 0; color: var(--text); font-size: clamp(20px, 2.1vw, 32px); font-weight: 800; line-height: 1.3; }
.room-sentence .room-word { color: var(--yellow); font-weight: 950; }
.room-feedback { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -10px); padding: 12px 28px; border-radius: 999px; font-size: clamp(18px, 2vw, 28px); font-weight: 950; letter-spacing: .06em; opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none; z-index: 9; }
.room-feedback.show { opacity: 1; transform: translate(-50%, 0); }
.room-feedback.correct { color: #dffdf2; background: rgba(19, 83, 66, .92); box-shadow: 0 0 24px rgba(101,230,184,.35); }
.room-feedback.wrong { color: #ffe9e4; background: rgba(110, 44, 37, .92); box-shadow: 0 0 24px rgba(255,128,102,.30); }
.room-speech-bubble { position: absolute; width: max-content; max-width: 62%; padding: 14px 24px; border: 4px solid rgba(255,216,77,.92); border-radius: 24px; color: #081735; background: rgba(255,255,255,.96); font-size: clamp(16px, 1.7vw, 26px); font-weight: 950; text-align: center; box-shadow: 0 18px 36px rgba(0,0,0,.30), 0 0 24px rgba(255,216,77,.18); z-index: 6; }
.room-speech-bubble .room-word { color: #b8790a; }
.room-intro-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(3, 9, 27, .72); z-index: 10; }
.room-intro-card { display: grid; gap: 18px; justify-items: center; padding: 32px 40px; border: 1px solid rgba(255,216,77,.4); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.room-intro-card p { margin: 0; color: var(--yellow); font-size: clamp(22px, 2.4vw, 34px); font-weight: 950; letter-spacing: .06em; text-align: center; }
@media (max-width: 900px) { .room-stage { grid-template-columns: 1fr; } }

.poss-simon-screen { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; height: 100%; }
.poss-simon-stage { display: grid; align-content: center; justify-items: center; gap: 18px; min-height: 0; }
.poss-simon-image-wrap { width: min(1196px, 98%); }
.poss-simon-caption { margin: 0; text-align: center; color: var(--text); font-size: clamp(18px, 2vw, 28px); font-weight: 800; min-height: 1.4em; }
.poss-simon-caption .poss-simon-speaker { color: var(--yellow); font-weight: 950; }
.room-hit-shape.poss-simon-hit-glow { animation: poss-simon-glow 1s ease-out; }
@keyframes poss-simon-glow {
  0% { fill: rgba(255, 255, 255, 0); filter: blur(0px); }
  35% { fill: rgba(255, 255, 255, .32); filter: blur(10px); }
  100% { fill: rgba(255, 255, 255, 0); filter: blur(16px); }
}
.poss-simon-blink { position: absolute; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .06s ease; }
.poss-simon-blink.show { opacity: 1; }
.poss-simon-breathe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: 1; animation: poss-simon-breathe 3.4s ease-in-out infinite; }
.poss-simon-breathe-oliver { clip-path: inset(20.2% 58.1% 46.9% 23.9%); transform-origin: 32% 53%; }
.poss-simon-breathe-ingrid { clip-path: inset(28% 28.2% 41.6% 59.2%); transform-origin: 65.5% 58.4%; animation-duration: 3.7s; animation-delay: -1.3s; }
@keyframes poss-simon-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.018); }
}
.snap-total-timer.hidden { display: none; }
.permission-dialogue-list { width: min(760px, 100%); }
.example-card:has(.permission-dialogue-list) .sentence-panel { justify-content: flex-start; padding-top: clamp(28px, 3.5vw, 52px); }
.example-card:has(.permission-dialogue-list) .presence-view { align-content: start; }
.permission-dialogue-list .presence-row { padding: 10px 14px; }
.permission-dialogue-list .presence-prompt-line { grid-template-columns: 1fr auto; }
.permission-dialogue-list .presence-prompt { font-size: clamp(18px, 1.85vw, 28px); }
.speaker-line { display: grid; grid-template-columns: clamp(62px, 5.2vw, 78px) minmax(0, 1fr); align-items: center; column-gap: 18px; }
.speaker-head { flex: 0 0 clamp(62px, 5.2vw, 78px); width: clamp(62px, 5.2vw, 78px); height: clamp(62px, 5.2vw, 78px); border: 3px solid rgba(255,216,77,.9); border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 18px rgba(255,216,77,.16); }
.speaker-line-text { display: inline; min-width: 0; }
.permission-dialogue-list .inline-choice-prompt.speaker-line { display: grid; flex-wrap: nowrap; }

/* ================================================================
   AURORA CLASSROOM — setup & presentation chrome redesign
   Smartboard-safe: static gradients only, transform/opacity
   transitions, no filter / backdrop-filter / infinite keyframes.
   ================================================================ */
:root {
  --font-display: "Barlow Condensed", "Segoe UI", Arial, sans-serif;
  --u2-gold: #ffd84d;
  --u2-grad-gold: linear-gradient(135deg, #ffe27a 0%, #ffd84d 45%, #ffb648 100%);
  --u2-card: #0a142f;
  --u2-card-2: #0d1a3c;
  --u2-line: rgba(143, 166, 255, .16);
  --u2-line-gold: rgba(255, 216, 77, .55);
  --u2-dim: #8fa6d9;
}

body {
  background:
    radial-gradient(1100px 520px at 8% -10%, rgba(74, 108, 224, .16), transparent 60%),
    radial-gradient(900px 480px at 108% 112%, rgba(39, 181, 139, .10), transparent 55%),
    radial-gradient(700px 380px at 88% -6%, rgba(255, 216, 77, .05), transparent 60%),
    var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: #1d2f60; border: 2px solid #050b20; }
::-webkit-scrollbar-track { background: transparent; }
button:focus-visible { outline: 2px solid var(--u2-gold); outline-offset: 2px; }

/* ---------- SETUP: two-panel hero layout ---------- */
.app-shell { width: min(1500px, 100%); }
.setup-screen {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: clamp(22px, 3vw, 48px);
  max-width: 1460px;
  min-height: calc(100vh - 60px);
  margin: auto;
}
.brand-lockup {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 22px;
  max-width: none;
  padding: clamp(26px, 4vh, 52px) clamp(24px, 2.4vw, 42px);
  border: 1px solid var(--u2-line);
  border-radius: 30px;
  background:
    linear-gradient(160deg, rgba(38, 62, 138, .38), rgba(8, 16, 40, .18) 55%),
    repeating-linear-gradient(0deg, rgba(143, 166, 255, .045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(143, 166, 255, .045) 0 1px, transparent 1px 56px),
    var(--u2-card);
  overflow: hidden;
}
.brand-lockup::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--u2-grad-gold);
}
.brand-lockup::after {
  content: "Aa"; position: absolute; right: -14px; bottom: -54px;
  font-family: var(--font-display); font-weight: 800; font-size: 250px; line-height: 1;
  color: rgba(143, 166, 255, .07); pointer-events: none;
}
.brand-kicker {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 216, 77, .45);
  background: rgba(255, 216, 77, .08);
  color: var(--u2-gold); font-size: 12px; font-weight: 900; letter-spacing: .22em;
}
.brand-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--u2-gold); box-shadow: 0 0 10px rgba(255, 216, 77, .9); }
.brand-lockup h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 4.5vw, 78px); line-height: .9; letter-spacing: .01em; color: #f4f7ff;
}
.brand-lockup h1 em {
  font-style: normal;
  background: var(--u2-grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-lockup p { margin: 0; max-width: 36ch; color: var(--u2-dim); font-size: 16px; font-weight: 650; line-height: 1.6; }
.brand-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-chip {
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid var(--u2-line); background: rgba(19, 38, 84, .55);
  color: #d9e4ff; font-size: 13px; font-weight: 800; letter-spacing: .03em;
}
.brand-steps { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--u2-dim); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; }
.brand-steps span { display: inline-flex; align-items: center; }
.brand-steps b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
  border: 1px solid rgba(255, 216, 77, .5); border-radius: 50%;
  background: rgba(255, 216, 77, .12); color: var(--u2-gold); font-size: 11px;
}
.brand-steps i { flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, rgba(255, 216, 77, .6), rgba(143, 166, 255, .18)); }

.setup-card {
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px);
  padding: clamp(22px, 3vh, 36px) clamp(20px, 2.2vw, 38px);
  border: 1px solid var(--u2-line); border-radius: 30px;
  background: linear-gradient(180deg, rgba(16, 30, 68, .72), rgba(8, 16, 40, .66)), var(--u2-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.selection-block + .selection-block { margin-top: 0; padding-top: clamp(14px, 2vh, 22px); border-top: 1px solid rgba(143, 166, 255, .10); }
.selection-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.selection-heading > span {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--u2-line); border-radius: 14px;
  background: var(--u2-card-2);
  color: var(--u2-dim); font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .05em;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.selection-block:has(.selected) .selection-heading > span { border-color: var(--u2-line-gold); background: rgba(255, 216, 77, .12); color: transparent; }
.selection-block:has(.selected) .selection-heading > span::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--u2-gold); font-family: var(--font-display); font-size: 20px; font-weight: 800;
}
.selection-heading h2 { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.selection-heading p { margin: 2px 0 0; font-size: 13.5px; font-weight: 650; }

.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.grade-button {
  display: grid; justify-items: center; gap: 0;
  min-width: 0; padding: 13px 10px 10px;
  border: 1px solid #2b4084; border-radius: 18px;
  background: linear-gradient(180deg, #16295a, #101f47);
  color: #d9e4ff;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.grade-button:hover { transform: translateY(-2px); border-color: #4a66c0; }
.grade-button:active { transform: translateY(0); }
.grade-button .opt-kicker { color: #7f97d6; font-size: 10.5px; font-weight: 900; letter-spacing: .26em; transition: color .15s ease; }
.grade-button .opt-number { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1.04; }
.grade-button.selected {
  border-color: transparent;
  background: var(--u2-grad-gold);
  color: #14183a;
  box-shadow: 0 14px 34px rgba(255, 199, 61, .26);
}
.grade-button.selected .opt-kicker { color: #7a610f; }
#unitOptions.grade-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
#unitOptions .grade-button { padding: 10px 8px 8px; border-radius: 16px; }
#unitOptions .grade-button .opt-number { font-size: 31px; }

.function-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.function-button {
  position: relative; overflow: hidden;
  display: grid; gap: 4px; text-align: left;
  padding: 15px 62px 15px 24px;
  border: 1px solid #2b4084; border-radius: 18px;
  background: linear-gradient(180deg, #15285a, #0f1e45);
  color: #f4f7ff;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.function-button::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--u2-grad-gold); opacity: 0; transition: opacity .15s ease;
}
.function-button:hover { transform: translateY(-2px); border-color: #4a66c0; }
.function-button:hover::before { opacity: .8; }
.function-button > span { color: #7f97d6; font-size: 10.5px; font-weight: 900; letter-spacing: .24em; }
.function-button strong { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: .035em; line-height: 1.06; }
.function-button small { color: var(--u2-dim); font-size: 13px; font-weight: 650; line-height: 1.45; }
.function-button .fn-arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid #2b4084; border-radius: 50%;
  background: #0d1b3f; color: #8fa6d9;
  font-style: normal; font-size: 17px; font-weight: 900;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.function-button:hover .fn-arrow { transform: translate(3px, -50%); border-color: #4a66c0; color: #d9e4ff; }
.function-button.selected {
  border-color: var(--u2-line-gold);
  background: linear-gradient(180deg, rgba(255, 216, 77, .14), rgba(255, 216, 77, .04)), #101f47;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}
.function-button.selected::before { opacity: 1; }
.function-button.selected > span { color: #e9c64f; }
.function-button.selected .fn-arrow { border-color: transparent; background: var(--u2-grad-gold); color: #14183a; }

.setup-footer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin-top: auto; padding: 16px 20px;
  border: 1px solid var(--u2-line); border-radius: 20px;
  background: rgba(5, 12, 30, .66);
}
.setup-summary { margin: 0; padding: 0; border: 0; background: transparent; display: grid; gap: 3px; }
.setup-summary strong { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: .04em; }
.setup-summary span { font-size: 13px; font-weight: 650; }
.setup-actions { flex-wrap: nowrap; }
.setup-actions .primary-button {
  padding: 17px 34px; border: 0; border-radius: 16px;
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .1em;
  color: #14183a; background: var(--u2-grad-gold);
  box-shadow: 0 12px 30px rgba(255, 199, 61, .24);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.setup-actions .primary-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255, 199, 61, .32); }
.setup-actions .primary-button:disabled { opacity: .3; box-shadow: none; cursor: not-allowed; }
.setup-actions .secondary-button {
  min-width: 0; padding: 16px 26px; border: 1px solid rgba(255, 216, 77, .45); border-radius: 16px;
  background: rgba(255, 216, 77, .06); color: var(--u2-gold);
  font-weight: 900; letter-spacing: .08em;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.setup-actions .secondary-button:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255, 216, 77, .13); }
.setup-actions .secondary-button:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- PRESENTATION chrome ---------- */
.presentation-header {
  padding: 10px 14px;
  border: 1px solid var(--u2-line); border-radius: 20px;
  background: rgba(8, 16, 40, .72);
}
.presentation-header .icon-button {
  padding: 12px 18px;
  border: 1px solid #2b4084; border-radius: 14px;
  background: #12234e; color: #d9e4ff;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.presentation-header .icon-button:hover { transform: translateY(-1px); border-color: #4a66c0; }
.presentation-header .header-next-button {
  min-width: 92px;
  padding: 11px 22px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 10px 24px rgba(255, 199, 61, .20);
}
.presentation-header .header-next-button:disabled {
  cursor: not-allowed;
  opacity: .36;
  box-shadow: none;
}
.presentation-header .fullscreen-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  font-size: 23px;
  line-height: 1;
}
#presentationExercisesButton { border-color: rgba(255, 216, 77, .5); background: rgba(255, 216, 77, .08); color: var(--u2-gold); }
.session-info { gap: 5px; justify-items: start; }
.session-info > span {
  width: fit-content; padding: 3px 11px;
  border: 1px solid rgba(255, 216, 77, .4); border-radius: 999px;
  background: rgba(255, 216, 77, .08);
  color: var(--u2-gold); font-size: 11px; font-weight: 900; letter-spacing: .18em;
}
.session-info > strong { font-family: var(--font-display); font-size: clamp(20px, 2vw, 30px); font-weight: 800; letter-spacing: .045em; }
.progress { gap: 1px; padding: 7px 14px; border: 1px solid var(--u2-line); border-radius: 14px; background: #0d1b3f; }
.progress strong { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: .06em; color: var(--u2-gold); }
.progress span { font-size: 10px; letter-spacing: .22em; color: var(--u2-dim); }
.progress-track { height: 6px; border: 1px solid rgba(143, 166, 255, .12); background: #0d1b3f; }
#progressBar { display: block; height: 100%; border-radius: inherit; background: var(--u2-grad-gold); box-shadow: 0 0 14px rgba(255, 216, 77, .45); transition: width .35s ease; }
.example-card { position: relative; border-radius: 30px; }
.example-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent 8%, rgba(255, 216, 77, .5), transparent 92%);
  pointer-events: none;
}
.navigation-bar {
  padding: 10px 12px;
  border: 1px solid var(--u2-line); border-radius: 999px;
  background: rgba(8, 16, 40, .72);
}
.navigation-bar .secondary-button {
  min-width: 0; padding: 13px 26px;
  border: 1px solid #2b4084; border-radius: 999px;
  background: transparent; color: #d9e4ff;
  font-weight: 900; letter-spacing: .08em;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.navigation-bar .secondary-button:hover { transform: translateY(-1px); border-color: #4a66c0; background: #12234e; }
.navigation-bar .primary-button {
  padding: 14px 36px; border: 0; border-radius: 999px;
  font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: .12em;
  color: #14183a; background: var(--u2-grad-gold);
  box-shadow: 0 10px 26px rgba(255, 199, 61, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.navigation-bar .primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 199, 61, .34); }
.slide-dots span { width: 8px; height: 8px; transition: background-color .2s ease, width .2s ease; }
.slide-dots span.complete { background: rgba(255, 216, 77, .5); }
.slide-dots span.active { width: 26px; background: var(--u2-grad-gold); box-shadow: 0 0 12px rgba(255, 216, 77, .5); }

@media (max-width: 980px) {
  .setup-screen { grid-template-columns: 1fr; }
  .brand-lockup { padding: 26px 22px; }
  .brand-lockup h1 { font-size: clamp(46px, 10vw, 66px); }
  .brand-lockup::after { font-size: 170px; bottom: -40px; }
  .setup-footer { grid-template-columns: 1fr; }
  .setup-actions { width: 100%; }
  .setup-actions .primary-button { flex: 1; }
  .presentation-header { grid-template-columns: auto 1fr auto; row-gap: 10px; }
}

/* ---------- SETUP wizard: one layer at a time, anchored to top ---------- */
.setup-card .selection-block { display: none; }
.setup-card[data-step="grade"] .step-grade,
.setup-card[data-step="unit"] .step-unit,
.setup-card[data-step="function"] .step-function { display: block; animation: stepIn .22s ease; }
.setup-card .selection-block + .selection-block { margin-top: 0; padding-top: 0; border-top: 0; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
.step-back {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid #2b4084; border-radius: 14px;
  background: #12234e; color: #d9e4ff;
  font-size: 18px; font-weight: 900; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.step-back:hover { transform: translateX(-2px); border-color: #4a66c0; }

/* ---------- Wizard v2: big colorful option cards + hover glow ---------- */
.grade-grid > .grade-button:nth-child(6n+1), .function-grid > .function-button:nth-child(6n+1) { --tone: #ffd84d; --tone-2: #ffb648; --tone-glow: rgba(255, 216, 77, .42); --tone-dim: rgba(255, 216, 77, .38); --tone-soft: rgba(255, 216, 77, .10); }
.grade-grid > .grade-button:nth-child(6n+2), .function-grid > .function-button:nth-child(6n+2) { --tone: #65e6b8; --tone-2: #3ecf9a; --tone-glow: rgba(101, 230, 184, .40); --tone-dim: rgba(101, 230, 184, .38); --tone-soft: rgba(101, 230, 184, .10); }
.grade-grid > .grade-button:nth-child(6n+3), .function-grid > .function-button:nth-child(6n+3) { --tone: #6fb5ff; --tone-2: #4a8ef0; --tone-glow: rgba(111, 181, 255, .42); --tone-dim: rgba(111, 181, 255, .38); --tone-soft: rgba(111, 181, 255, .10); }
.grade-grid > .grade-button:nth-child(6n+4), .function-grid > .function-button:nth-child(6n+4) { --tone: #ff8f6b; --tone-2: #ff6b4a; --tone-glow: rgba(255, 143, 107, .42); --tone-dim: rgba(255, 143, 107, .38); --tone-soft: rgba(255, 143, 107, .10); }
.grade-grid > .grade-button:nth-child(6n+5), .function-grid > .function-button:nth-child(6n+5) { --tone: #b28bff; --tone-2: #9a6bff; --tone-glow: rgba(178, 139, 255, .42); --tone-dim: rgba(178, 139, 255, .38); --tone-soft: rgba(178, 139, 255, .10); }
.grade-grid > .grade-button:nth-child(6n+6), .function-grid > .function-button:nth-child(6n+6) { --tone: #ff7ac8; --tone-2: #f055a8; --tone-glow: rgba(255, 122, 200, .42); --tone-dim: rgba(255, 122, 200, .38); --tone-soft: rgba(255, 122, 200, .10); }

.grade-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.grade-grid > .grade-button {
  padding: 28px 12px 24px; border-radius: 24px; gap: 6px;
  border-color: var(--tone-dim);
  background: linear-gradient(180deg, var(--tone-soft), rgba(16, 31, 71, 0) 62%), linear-gradient(180deg, #16295a, #101f47);
}
.grade-grid > .grade-button .opt-kicker { font-size: 13px; letter-spacing: .3em; }
.grade-grid > .grade-button .opt-number { font-size: 86px; color: var(--tone); transition: color .15s ease; }
.grade-grid > .grade-button:hover {
  transform: translateY(-4px); border-color: var(--tone);
  box-shadow: 0 0 30px var(--tone-glow), 0 18px 36px rgba(0, 0, 0, .32);
}
.grade-grid > .grade-button.selected {
  border-color: transparent;
  background: linear-gradient(180deg, var(--tone), var(--tone-2));
  box-shadow: 0 18px 44px var(--tone-glow);
  color: #14183a;
}
.grade-grid > .grade-button.selected .opt-number { color: #14183a; }
.grade-grid > .grade-button.selected .opt-kicker { color: rgba(20, 24, 58, .62); }

#unitOptions.grade-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
#unitOptions .grade-button { padding: 22px 10px 18px; border-radius: 22px; }
#unitOptions .grade-button .opt-number { font-size: 64px; }

.function-grid > .function-button { padding: 18px 66px 18px 26px; border-color: var(--tone-dim); }
.function-grid > .function-button::before { background: var(--tone); }
.function-grid > .function-button strong { font-size: 25px; }
.function-grid > .function-button:hover {
  transform: translateY(-3px); border-color: var(--tone);
  box-shadow: 0 0 28px var(--tone-glow), 0 16px 34px rgba(0, 0, 0, .32);
}
.function-grid > .function-button:hover .fn-arrow { border-color: var(--tone); color: var(--tone); }
.function-grid > .function-button.selected {
  border-color: var(--tone);
  background: linear-gradient(180deg, var(--tone-soft), rgba(16, 31, 71, 0) 70%), #101f47;
  box-shadow: 0 0 30px var(--tone-glow);
}
.function-grid > .function-button.selected > span { color: var(--tone); }
.function-grid > .function-button.selected .fn-arrow { border-color: transparent; background: linear-gradient(180deg, var(--tone), var(--tone-2)); color: #14183a; }

/* ---------- Grade step: 2x2 visual cards (16:9 images) ---------- */
#gradeOptions.grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 880px); }
.grade-grid > .grade-button.grade-visual {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; padding: 0; border-radius: 24px;
  background: #16295a;
}
.grade-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.grade-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(closest-side at 50% 52%, rgba(3, 9, 27, .42), rgba(3, 9, 27, .04) 72%);
  pointer-events: none;
}
.grade-grid > .grade-button.grade-visual .opt-number {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  font-size: clamp(70px, 8vw, 128px); line-height: 1; color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .70), 0 0 36px rgba(0, 0, 0, .55);
  transition: color .15s ease;
}
.grade-grid > .grade-button.grade-visual:hover .opt-number { color: var(--tone); }
.grade-grid > .grade-button.grade-visual:hover {
  box-shadow: 0 0 0 2px var(--tone), 0 0 46px var(--tone-glow), 0 20px 42px rgba(0, 0, 0, .36);
}
.grade-grid > .grade-button.grade-visual:hover img { transform: scale(1.025); }
.grade-grid > .grade-button.grade-visual.placeholder:hover img { transform: none; }
.grade-grid > .grade-button.grade-visual.selected {
  background: #16295a; border-color: var(--tone);
  box-shadow: 0 0 32px var(--tone-glow), 0 18px 40px rgba(0, 0, 0, .34);
}
.grade-grid > .grade-button.grade-visual.selected .opt-number { color: var(--tone); }
.grade-grid > .grade-button.grade-visual.placeholder { cursor: default; }
.grade-grid > .grade-button.grade-visual.placeholder:hover {
  transform: none; border-color: var(--tone-dim); box-shadow: none;
}
.grade-grid > .grade-button.grade-visual.placeholder:hover .opt-number { color: #fff; }

/* ---------- Standard cross hub ---------- */
.standard-hub-cross {
  display: grid;
  grid-template-columns: repeat(3, clamp(150px, 11vw, 190px));
  grid-template-areas:
    ". habitat ."
    "species lion diet"
    ". body .";
  align-items: center;
  justify-items: center;
  gap: clamp(14px, 1.25vw, 22px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.standard-hub-cross .presence-row.category-list {
  width: 100%;
  min-width: 0;
  height: clamp(74px, 6vw, 92px);
  min-height: 0;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border-color: rgba(101, 230, 184, .45);
  background: linear-gradient(135deg, rgba(101, 230, 184, .16), rgba(26, 49, 107, .72));
  cursor: pointer;
}
.standard-hub-cross .presence-row.category-list .presence-prompt-line {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.standard-hub-cross .presence-row.category-list .presence-prompt {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--yellow);
  font-size: var(--presence-item-font-size, clamp(20px, 2.05vw, 32px));
  line-height: 1.05;
  letter-spacing: var(--presence-item-letter-spacing, .08em);
  text-align: center;
  text-wrap: balance;
}
.standard-hub-cross .presence-row.category-list:nth-child(1) { grid-area: habitat; }
.standard-hub-cross .presence-row.category-list:nth-child(2) { grid-area: diet; }
.standard-hub-cross .presence-row.category-list:nth-child(3) {
  grid-area: lion;
  height: clamp(112px, 8.5vw, 148px);
  border-color: rgba(255, 216, 77, .75);
  background: rgba(255, 216, 77, .12);
  cursor: default;
}
.standard-hub-cross .presence-row.category-list:nth-child(3) {
  pointer-events: none;
}
.standard-hub-cross .presence-row.category-list:nth-child(4) { grid-area: species; }
.standard-hub-cross .presence-row.category-list:nth-child(5) { grid-area: body; }
.standard-hub-cross .presence-row.category-list:nth-child(3) .presence-prompt {
  color: var(--yellow);
  font-size: var(--presence-item-font-size, clamp(28px, 3vw, 44px));
}

/* ---------- Wild life Wh-questions hub ---------- */
.wild-life-wh-grid .presence-row.category-list:nth-child(5) .presence-prompt {
  font-size: clamp(18px, 1.9vw, 29px);
}

/* ---------- Guess the animal ---------- */
.guess-animal-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-height: calc(100vh - 48px);
}
.guess-animal-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  width: min(1120px, 100%);
  margin: auto;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 30px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.guess-animal-card.wrong-drop {
  animation: sortShake .38s ease-in-out;
  border-color: rgba(255, 128, 102, .85);
  box-shadow: 0 0 26px rgba(255, 128, 102, .28);
}
.guess-animal-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.guess-animal-slots span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid #6688ff;
  border-radius: 13px;
  background: #173267;
  color: #f4f7ff;
  font-size: 32px;
  font-weight: 950;
}
.guess-animal-slots span.correct {
  border-color: var(--mint);
  background: #135342;
  box-shadow: 0 0 15px rgba(101, 230, 184, .32);
}
.guess-animal-slots span.wrong {
  border-color: #ff8066;
  background: #6e2c25;
}
.guess-animal-hints {
  display: grid;
  gap: 10px;
  width: min(760px, 100%);
}
.guess-animal-hints p {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #506ab5;
  border-radius: 15px;
  background: #102652;
  color: #d9e4ff;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 850;
}
.guess-animal-hints p span {
  display: inline-block;
  margin-right: 14px;
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 950;
}
.guess-animal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.guess-animal-keyboard-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(760px, 100%);
}
.guess-animal-keyboard {
  display: grid;
  grid-template-columns: repeat(10, minmax(42px, 1fr));
  gap: 8px;
  width: 100%;
}
.guess-animal-keyboard button {
  min-height: 48px;
  border: 2px solid #6688ff;
  border-radius: 12px;
  color: #f4f7ff;
  background: linear-gradient(135deg, #173267, #102652);
  cursor: pointer;
  font-size: 20px;
  font-weight: 950;
}
.guess-animal-keyboard button:nth-child(3n+1) { border-color: #ffd84d; }
.guess-animal-keyboard button:nth-child(3n+2) { border-color: #65e6b8; }
.guess-animal-keyboard button:nth-child(3n+3) { border-color: #6fb5ff; }
.guess-animal-keyboard button.wide {
  grid-column: span 2;
  color: var(--yellow);
}
@media (max-width: 760px) {
  .wild-life-wh-grid { grid-template-columns: 1fr; grid-template-areas: "habitat" "diet" "lion" "species" "body"; }
  .guess-animal-keyboard { grid-template-columns: repeat(6, 1fr); }
  .guess-animal-slots span { width: 46px; height: 46px; font-size: 25px; }
}

/* Guess Animal compact classroom layout */
.guess-animal-card {
  position: relative;
  gap: 14px;
  padding: clamp(18px, 3.2vw, 38px);
}
.guess-animal-slots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.guess-animal-slots {
  gap: 7px;
}
.guess-animal-slots span {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 24px;
}
.guess-animal-slots-row #guessAnimalNextButton {
  min-width: 112px;
  padding: 14px 20px;
  border-radius: 16px;
}
.guess-animal-hints {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(920px, 100%);
}
.guess-animal-hints p {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.18;
}
.guess-animal-hints p span {
  margin-right: 8px;
  font-size: 9px;
  letter-spacing: .1em;
}
.guess-animal-actions {
  gap: 10px;
}
.guess-animal-actions .primary-button,
.guess-animal-actions .secondary-button {
  min-width: 150px;
  padding: 14px 22px;
}
.guess-animal-keyboard-panel {
  width: min(700px, 100%);
}
.guess-animal-keyboard {
  grid-template-columns: repeat(10, minmax(34px, 1fr));
  gap: 6px;
}
.guess-animal-keyboard button {
  min-height: 38px;
  border-radius: 10px;
  font-size: 17px;
}
.guess-animal-keyboard button.key-pressed {
  animation: guessKeyPress .18s ease-out;
}
@keyframes guessKeyPress {
  0% { transform: scale(1); filter: brightness(1); box-shadow: none; }
  42% { transform: scale(.9); filter: brightness(1.45); box-shadow: 0 0 18px rgba(255, 216, 77, .46); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: none; }
}
.guess-animal-floating-text {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 52px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  font-size: clamp(32px, 4.5vw, 62px);
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 0 16px rgba(255, 216, 77, .55), 0 8px 20px rgba(0, 0, 0, .45);
}
.guess-animal-floating-text.gain { color: var(--yellow); }
.guess-animal-floating-text.loss { color: #ff5d4d; text-shadow: 0 0 16px rgba(255, 93, 77, .55), 0 8px 20px rgba(0, 0, 0, .45); }
.guess-animal-floating-text.show { animation: guessAnimalFloat .9s ease-out forwards; }
@keyframes guessAnimalFloat {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.82); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1.08); }
}
@media (max-width: 760px) {
  .guess-animal-slots-row { flex-direction: column; }
  .guess-animal-hints { grid-template-columns: 1fr; }
  .guess-animal-keyboard { grid-template-columns: repeat(7, 1fr); }
}

/* ---------- Simple past verb cards ---------- */
.verb-card-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-height: calc(100vh - 48px);
}
.verb-card-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid rgba(110, 136, 211, .26);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(9, 20, 48, .98), rgba(11, 28, 68, .94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.verb-card-level-panel,
.verb-card-play-panel {
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(820px, 100%);
}
.verb-card-level-buttons,
.verb-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.verb-card-level-buttons button {
  min-width: 220px;
}
.verb-card-pool-message {
  margin: 0;
  color: var(--yellow);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 2.4vw, 30px);
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(255, 216, 77, .36);
}
.verb-card-flip {
  width: min(450px, 58.5vw);
  aspect-ratio: 3 / 2;
  perspective: 1100px;
}
.verb-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .62s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}
.verb-card-flip.flipped .verb-card-inner {
  transform: rotateY(180deg);
}
.verb-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  border: 5px solid #6688ff;
  border-radius: 30px;
  background: radial-gradient(circle at 30% 20%, rgba(96, 132, 255, .34), rgba(29, 61, 130, .96) 56%, rgba(15, 34, 76, .98));
  color: #f4f7ff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(46px, 7.5vw, 94px);
  letter-spacing: .08em;
  line-height: .92;
  text-shadow: 0 10px 20px rgba(0, 0, 0, .35);
  backface-visibility: hidden;
  white-space: nowrap;
  text-align: center;
}
.verb-card-back {
  transform: rotateY(180deg);
  border-color: #4a66c0;
  color: #f4f7ff;
  background: radial-gradient(circle at 30% 20%, rgba(60, 84, 180, .30), rgba(16, 34, 76, .97) 56%, rgba(6, 14, 34, .99));
}
.verb-card-front {
  padding: 16px;
}
.verb-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(255, 255, 255, .4));
}
.verb-card-front-label {
  font-size: inherit;
}
.verb-card-input {
  min-width: min(420px, 76vw);
  padding: 10px 18px;
  border: 2px solid rgba(101, 230, 184, .62);
  border-radius: 14px;
  background: rgba(8, 22, 52, .9);
  color: #f4f7ff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3.8vw, 42px);
  letter-spacing: .08em;
  text-align: center;
}
.verb-card-input.empty {
  color: rgba(188, 204, 247, .58);
  font-size: clamp(18px, 2.3vw, 26px);
}
.verb-card-keyboard-panel {
  width: min(820px, 100%);
}
.verb-card-keyboard-panel .rgb-keyboard {
  max-width: 780px;
}

/* ---------- Simple past snapword memory chain ---------- */
.memory-chain-screen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg);
}
.memory-chain-board {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(12px, 2vh, 20px);
  min-height: 0;
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid rgba(110, 136, 211, .26);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(9, 20, 48, .98), rgba(11, 28, 68, .94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.memory-chain-card {
  position: relative;
  display: grid;
  place-items: center;
  width: min(420px, 54vw);
  aspect-ratio: 3 / 2;
  padding: 16px;
  overflow: hidden;
  border: 5px solid #6688ff;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 20%, rgba(96, 132, 255, .34), rgba(29, 61, 130, .96) 56%, rgba(15, 34, 76, .98));
}
.memory-chain-card.memory-chain-card-back {
  border-color: var(--yellow);
  background: radial-gradient(circle at 30% 20%, rgba(255, 216, 77, .22), rgba(32, 83, 66, .98) 60%, rgba(10, 45, 38, .98));
}
.memory-chain-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 6px rgba(255, 255, 255, .4));
}
.memory-chain-card-label {
  color: var(--yellow);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: .08em;
  white-space: nowrap;
}
.memory-chain-card-word {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border: 2px solid rgba(255, 216, 77, .74);
  border-radius: 999px;
  background: rgba(2, 7, 23, .78);
  color: var(--yellow);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .08em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.memory-chain-input {
  min-width: min(460px, 76vw);
  padding: 10px 18px;
  border: 2px solid rgba(101, 230, 184, .62);
  border-radius: 14px;
  background: rgba(8, 22, 52, .9);
  color: #f4f7ff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3.6vw, 42px);
  letter-spacing: .08em;
  text-align: center;
}
.memory-chain-input.empty {
  color: rgba(188, 204, 247, .58);
  font-size: clamp(18px, 2.2vw, 26px);
}
.memory-chain-keyboard-panel {
  width: min(820px, 100%);
}
.memory-chain-keyboard-panel .rgb-keyboard {
  max-width: 780px;
}
.memory-chain-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* Overlay: sentence above image (superlatives format) */
.presence-overlay-question.as-sentence { font-size: clamp(20px, 2.6vw, 34px); line-height: 1.3; }

/* Triple-form (adjective -> -er -> the -est) cross layout: tighter cards, smaller type */
.ppt-comp-triple .presence-row.category-list { padding: 10px 10px; }
.ppt-comp-triple .presence-row.category-list .presence-prompt { font-size: clamp(11px, 1.15vw, 17px); line-height: 1.25; }
.ppt-comp-triple .presence-row:nth-child(4) { white-space: nowrap; }
.ppt-comp-triple .presence-row:nth-child(4) .presence-prompt { font-size: clamp(16px, 1.9vw, 28px); }
.ppt-comp-triple { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ppt-comp-triple .presence-row { min-width: 0; }

/* Cross-app nav link, pinned to bottom of the brand panel */
.brand-lockup { position: relative; padding-bottom: clamp(90px, 11vh, 118px); }
.app-switch-link {
  position: absolute; left: clamp(24px, 2.4vw, 42px); right: clamp(24px, 2.4vw, 42px); bottom: clamp(26px, 4vh, 52px);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 216, 77, .45);
  background: rgba(255, 216, 77, .08);
  color: var(--u2-gold); text-decoration: none;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: .1em;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.app-switch-link span { transition: transform .15s ease; }
.app-switch-link:hover { transform: translateY(-2px); background: rgba(255, 216, 77, .15); border-color: rgba(255, 216, 77, .7); }
.app-switch-link:hover span { transform: translateX(3px); }
.brand-credit { position: absolute; left: 0; right: 0; bottom: calc(clamp(26px, 4vh, 52px) + 86px); color: var(--u2-gold); font-size: clamp(16px, 1.35vw, 20px); font-weight: 850; letter-spacing: .1em; text-align: center; }
.brand-credit b { color: #ffffff; font-weight: 900; }

/* Thought-bubble overlay mode (be going to: plans) */
.presence-overlay-card.thought-mode .presence-overlay-image {
  border: 5px solid rgba(255, 255, 255, .92);
  border-radius: 46px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.presence-overlay-portrait {
  position: absolute; left: -62px; bottom: -40px; z-index: 3;
  width: clamp(100px, 11vw, 150px); height: clamp(100px, 11vw, 150px);
}
.presence-overlay-portrait img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border: 4px solid var(--yellow); border-radius: 50%;
  background: #0a142f;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.presence-overlay-portrait i {
  position: absolute; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.presence-overlay-portrait i:nth-of-type(1) { width: 14px; height: 14px; right: -10px; top: -18px; }
.presence-overlay-portrait i:nth-of-type(2) { width: 24px; height: 24px; right: -30px; top: -52px; }

/* Unit theme label (tiny, under the unit number) */
.opt-theme { display: block; min-width: 0; max-width: 100%; margin-top: 3px; color: #7f97d6; font-size: 9px; font-weight: 800; letter-spacing: .05em; line-height: 1.25; text-align: center; text-transform: uppercase; white-space: normal; transition: color .15s ease; }
.grade-button.selected .opt-theme { color: rgba(20, 24, 58, .68); }

.going-to-builder-list .presence-prompt-line { display: flex; align-items: center; gap: 12px; }
.going-to-builder-list .presence-prompt-line .presence-prompt { flex: 1; min-width: 0; }
.presence-icon-button { flex: 0 0 auto; min-width: 64px; min-height: 48px; border: 2px solid rgba(101, 230, 184, .75); border-radius: 14px; color: #dffdf2; background: rgba(18, 84, 67, .72); cursor: pointer; font-size: 14px; font-weight: 950; letter-spacing: .09em; }
.presence-icon-button:hover { box-shadow: 0 0 16px rgba(101, 230, 184, .28); transform: translateY(-1px); }
.presence-inline-reveal { flex: 0 0 auto; margin-top: 0; min-height: 48px; padding: 10px 16px; font-size: 13px; }
.going-to-builder-list { width: min(840px, 100%); gap: 10px; }
.going-to-builder-list .presence-row { padding: 10px 12px; }
.going-to-builder-list .presence-prompt { font-size: clamp(18px, 1.65vw, 26px); }
.going-to-build-visual { object-fit: cover; }
.example-card:has(.going-to-builder-list) .presence-title.compact { font-size: clamp(13px, 1.1vw, 17px); color: var(--muted); letter-spacing: .08em; }
.going-to-plan-check-list { width: min(900px, 100%); gap: 12px; }
.going-to-plan-check-list .presence-row { padding: 12px 14px; }
.going-to-plan-check-list .inline-choice-prompt { font-size: clamp(17px, 1.55vw, 24px); line-height: 1.25; }
.going-to-plan-check-list .presence-icon-button { min-width: 92px; }
.going-to-portrait-visual { width: min(430px, 78%); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px; }

.exercise-card.character-hub-exercise .exercise-panel { justify-content: center; }
.exercise-card.character-hub-exercise .exercise-word { display: none; }
.exercise-character-hub-options { display: block; width: 100%; }
.exercise-character-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.25vw, 16px); width: min(720px, 100%); margin-top: 12px; }
.exercise-character-hub-button,
.exercise-character-hub-center { display: grid; place-items: center; min-height: clamp(58px, 7vh, 92px); padding: 10px 12px; border: 2px solid rgba(80, 190, 170, .68); border-radius: 18px; color: #f4f7ff; background: linear-gradient(135deg, rgba(18,55,75,.92), rgba(24,55,112,.82)); font-size: clamp(13px, 1.15vw, 20px); font-weight: 950; letter-spacing: .06em; text-align: center; }
.exercise-character-hub-button { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.exercise-character-hub-button:hover,
.exercise-character-hub-button:focus-visible { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 22px rgba(255,216,77,.20); outline: none; }
.exercise-character-hub-button.completed { position: relative; border-color: var(--mint); color: #dffdf2; background: linear-gradient(135deg, rgba(18,84,67,.96), rgba(16,58,75,.90)); cursor: default; box-shadow: 0 0 20px rgba(101,230,184,.22); }
.exercise-character-hub-button.completed::after { content: "✓"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid #0d1b39; border-radius: 999px; color: #062a20; background: var(--mint); font-size: 22px; font-weight: 950; box-shadow: 0 0 18px rgba(101,230,184,.36); }
.exercise-character-hub-button.completed:hover { transform: none; border-color: var(--mint); box-shadow: 0 0 20px rgba(101,230,184,.22); }
.exercise-character-hub-center { min-height: clamp(74px, 9vh, 112px); border-color: rgba(255,216,77,.68); color: var(--yellow); background: rgba(255,216,77,.12); font-size: clamp(18px, 1.7vw, 30px); white-space: pre-line; pointer-events: none; }
.presence-overlay-card.overlay-lg .freq-overlay-line.inline-choice-prompt { justify-content: center; color: #f4f7ff; font-size: clamp(22px, 2.25vw, 36px); font-weight: 950; line-height: 1.55; text-align: center; }

.example-card.personality-hub-slide { grid-template-columns: minmax(360px, .95fr) minmax(560px, 1.05fr); }
.example-card.personality-hub-slide .sentence-panel { justify-content: center; padding: clamp(22px, 3.2vw, 46px); }
.example-card.personality-hub-slide .presence-view { gap: 14px; }
.example-card.personality-hub-slide .presence-title { font-size: clamp(22px, 2.1vw, 34px); }
.personality-trait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, .75vw, 10px); width: min(820px, 100%); }
.personality-trait-button { min-height: clamp(38px, 5.6vh, 58px); padding: 7px 9px; border: 2px solid rgba(80, 190, 170, .56); border-radius: 13px; color: #f4f7ff; background: linear-gradient(135deg, rgba(18,55,75,.92), rgba(24,55,112,.82)); cursor: pointer; font-size: clamp(10px, .86vw, 15px); font-weight: 950; letter-spacing: .035em; line-height: 1.08; text-align: center; text-transform: uppercase; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.personality-trait-button:hover,
.personality-trait-button:focus-visible { transform: translateY(-1px); border-color: var(--yellow); box-shadow: 0 0 16px rgba(255,216,77,.18); outline: none; }
.personality-trait-button.active { border-color: var(--yellow); color: var(--yellow); background: rgba(255,216,77,.13); box-shadow: 0 0 18px rgba(255,216,77,.18); }
.personality-trait-button.completed { position: relative; border-color: var(--mint); color: #dffdf2; background: linear-gradient(135deg, rgba(18,84,67,.96), rgba(16,58,75,.90)); }
.personality-trait-button.completed::after { content: "\2713"; position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #071631; border-radius: 50%; color: #05291f; background: var(--mint); font-size: 17px; font-weight: 950; }
.personality-trait-button.cooling { filter: grayscale(1); opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.personality-character-zone { display: grid; gap: 16px; width: min(720px, 98%); padding: clamp(16px, 2vw, 26px); border: 2px dashed rgba(102,136,255,.34); border-radius: 26px; background: rgba(8,20,50,.48); }
.personality-character-heading { color: var(--yellow); font-size: clamp(20px, 2.2vw, 34px); font-weight: 950; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.personality-character-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: clamp(5px, .65vw, 9px); overflow-x: auto; padding: 2px 2px 10px; }
.personality-character-card { position: relative; display: grid; gap: 7px; place-items: center; flex: 0 0 clamp(118px, 12.2vw, 166px); min-height: 0; padding: 8px; border: 2px solid rgba(102,136,255,.46); border-radius: 18px; color: #f4f7ff; background: rgba(20,43,92,.82); cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.personality-character-card:hover,
.personality-character-card:focus-visible { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,216,77,.18); outline: none; }
.personality-character-card.completed { position: relative; border-color: var(--mint); background: linear-gradient(135deg, rgba(18,84,67,.92), rgba(20,43,92,.82)); box-shadow: 0 0 20px rgba(101,230,184,.18); }
.personality-character-card.completed::after { content: "\2713"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid #071631; border-radius: 50%; color: #05291f; background: var(--mint); font-size: 22px; font-weight: 950; box-shadow: 0 0 18px rgba(101,230,184,.30); }
.personality-character-card.cooling { filter: grayscale(1); opacity: .34; cursor: not-allowed; transform: none; box-shadow: none; }
.personality-character-card img { width: 100%; aspect-ratio: 418 / 942; object-fit: contain; border-radius: 16px; background: transparent; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.personality-character-card img.fallback-portrait { aspect-ratio: 1 / 1; object-fit: cover; background: white; }
.personality-character-card strong { display: none; color: var(--yellow); font-size: clamp(13px, 1vw, 18px); font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.personality-character-card:has(img.fallback-portrait) strong { display: block; }
.personality-empty { margin: 0; color: var(--muted); font-size: 18px; font-weight: 850; text-align: center; }
.presence-overlay-card.personality-quiz-overlay { width: min(850px, 96%); }
.presence-overlay-card.personality-quiz-overlay .presence-overlay-image { width: min(360px, 100%); max-height: 42vh; background: white; filter: drop-shadow(0 12px 22px rgba(0,0,0,.32)); }
.presence-overlay-card.personality-quiz-overlay .presence-overlay-image.fallback-portrait { width: min(360px, 100%); aspect-ratio: 1 / 1; object-fit: cover; background: white; }
.personality-definition-quiz { display: grid; gap: 14px; width: min(760px, 100%); }
.personality-definition-instruction { margin: 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 20px); font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.personality-definition-options { display: grid; gap: 10px; }
.personality-definition-option { min-height: 60px; padding: 12px 18px; border: 2px solid #506ab5; border-radius: 16px; color: #f4f7ff; background: #173267; cursor: pointer; font-size: clamp(17px, 1.45vw, 24px); font-weight: 900; line-height: 1.18; text-align: left; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.personality-definition-option:hover:not(:disabled),
.personality-definition-option:focus-visible:not(:disabled) { transform: translateY(-1px); border-color: var(--yellow); outline: none; }
.personality-definition-option.correct { border-color: var(--mint); color: #dffdf2; background: #135342; box-shadow: 0 0 18px rgba(101,230,184,.26); }
.personality-definition-option.wrong { border-color: #ff8066; color: #ffe9e4; background: #6e2c25; }
.personality-definition-option:disabled { cursor: default; }
.personality-definition-result { margin: 4px 0 0; padding: 14px 16px; border: 1px solid rgba(101,230,184,.38); border-radius: 16px; color: #f4f7ff; background: rgba(18,84,67,.28); font-size: clamp(18px, 1.65vw, 26px); font-weight: 900; line-height: 1.25; text-align: center; }