/* Guess the Idiom — light board, purple accents (the Arcade card's colour).
   Everything a learner must read is at least ~16px and passes 4.5:1. */
[data-game="idiom"] { --gi: #6D3FD8; --gi-2: #5B2FC4; --gi-soft: #F1E9FF; --gi-line: #D9C9FB; }
[data-game="idiom"] .gx-skill { background: var(--gi-soft); color: var(--gi-2); }

/* ── start screen: the topics ── */
.gi-sets { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gi-set { display: grid; gap: 7px; align-content: start; text-align: left; padding: 18px; border-radius: 20px; border: 2px solid var(--line); background: var(--cyc); color: var(--ink); cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.gi-set:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--gi); }
.gi-set:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.gi-set.mix { background: linear-gradient(135deg, var(--gi-soft), var(--cyc) 70%); border-style: dashed; border-color: var(--gi-line); }
.gi-set.done { border-color: #1F9D55; }
.gi-set-top { display: flex; justify-content: space-between; align-items: center; }
.gi-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; background: var(--gi-soft); }
.gi-set-name { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; font-variation-settings: 'opsz' 36, 'wght' 750; }
.gi-set-why { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.gi-sample { display: flex; flex-wrap: wrap; gap: 6px; }
.gi-sample i { font-style: normal; font-size: .9rem; padding: 3px 10px; border-radius: 999px; background: var(--cyc-2); color: var(--ink); }
.gi-set-meta { font-size: .9rem; color: var(--ink-3); }
@media (max-width: 860px) { .gi-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gi-sets { grid-template-columns: minmax(0, 1fr); } }

/* ── in the game ── */
.gi-sound { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--cyc); color: var(--ink); font-family: var(--f-display); font-size: .92rem; font-variation-settings: 'wght' 620; min-height: 44px; }
.gi-sound[aria-pressed="false"] { color: var(--ink-2); border-style: dashed; }
.lu-back { min-height: 44px; }
.gi-card { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(20px, 4vw, 36px) clamp(14px, 3vw, 28px); border-radius: 22px; background: linear-gradient(135deg, var(--gi-soft), #FAF7FF 60%, var(--pen-soft)); }
.gi-card .lu-kicker { color: var(--gi-2); }
.gi-ask { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink-2); font-variation-settings: 'wght' 650; }
.gi-meaning { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; font-variation-settings: 'opsz' 60, 'wght' 720; }
.gi-example { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.45; text-wrap: balance; max-width: 34ch; }
.gi-example mark, .gi-ex mark, .gi-clue mark { background: linear-gradient(transparent 12%, var(--pen) 12%, var(--pen) 88%, transparent 88%); color: var(--ink); padding: 0 .12em; border-radius: 3px; font-weight: 700; }
.gi-gap { display: inline-block; min-width: 4.5em; border-bottom: 3px solid var(--gi); color: var(--gi); font-family: var(--f-display); text-align: center; font-variation-settings: 'wght' 750; }
.gi-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--sound); color: #fff; font-family: var(--f-display); font-size: .98rem; font-variation-settings: 'wght' 680; cursor: pointer; box-shadow: 0 6px 16px rgba(36, 87, 245, .3); transition: transform .2s var(--ease-out), background .2s; }
.gi-play:hover { background: var(--sound-2); transform: translateY(-1px); }
.gi-play:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.gi-play.big { padding: 12px 22px; font-size: 1.05rem; }
.gi-play.on span { animation: lu-pulse 1s ease-in-out infinite; display: inline-block; }
.gi-opts .opt { font-size: 1.12rem; min-height: 60px; font-family: var(--f-display); font-variation-settings: 'opsz' 24, 'wght' 620; }
.gi-opts.long .opt { font-family: var(--f-text); font-size: 1.05rem; line-height: 1.35; }
.gi-opts .opt.gone { opacity: .25; text-decoration: line-through; }
.gi-clue { display: grid; gap: 6px; padding: 14px 18px; border-radius: 16px; background: var(--pen-soft); border: 2px solid var(--pen); text-align: center; animation: gm-in .35s var(--ease-out); }
.gi-clue p { font-size: 1.1rem; line-height: 1.5; }
.gi-clue .lab, .gi-lit .lab, .gi-real .lab { font-family: var(--f-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: 'wght' 720; }

/* the answer: what you chose, then word-for-word vs what it really means */
.gi-wrong { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: #FFF6F5; border-left: 5px solid var(--live); animation: gm-in .35s var(--ease-out); }
.gi-wrong b { font-family: var(--f-display); font-size: 1.08rem; font-variation-settings: 'wght' 700; }
.gi-wrong p { font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.gi-reveal { display: grid; gap: 14px; padding: clamp(16px, 3vw, 24px); border-radius: 22px; border: 2px solid var(--gi-line); background: var(--cyc); animation: gm-in .4s var(--ease-out); }
.gi-reveal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gi-idiom { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -.025em; line-height: 1.1; color: var(--gi-2); font-variation-settings: 'opsz' 60, 'wght' 780; }
.gi-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.gi-lit, .gi-real { display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; padding: 16px; border-radius: 18px; }
.gi-lit { background: var(--cyc-2); }
.gi-lit .lab { color: var(--ink-2); }
.gi-lit p { font-size: 1.02rem; line-height: 1.45; color: var(--ink-2); font-style: italic; }
.gi-pic { font-size: clamp(2.6rem, 2rem + 2.5vw, 3.6rem); line-height: 1.1; animation: gi-wobble 1.6s var(--ease-out) both; }
.gi-real { background: #E5F6EC; animation: gi-flip .55s .45s var(--ease-out) both; }
.gi-real .lab { color: #136B39; }
.gi-real-m { font-family: var(--f-display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; font-variation-settings: 'opsz' 36, 'wght' 700; }
.gi-arrow { align-self: center; font-family: var(--f-display); font-size: 1.6rem; color: var(--gi); }
@keyframes gi-wobble { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 50% { transform: scale(1.12) rotate(4deg); opacity: 1; } 75% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes gi-flip { from { transform: perspective(600px) rotateY(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
.gi-ex { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--sound-soft); }
.gi-ex p { font-size: 1.1rem; line-height: 1.5; }
.gi-note { font-size: 1rem; line-height: 1.5; color: var(--ink); padding: 10px 14px; border-radius: 12px; background: var(--gi-soft); }
.gi-note b { font-family: var(--f-display); color: var(--gi-2); font-variation-settings: 'wght' 700; margin-right: 4px; }
@media (max-width: 600px) {
  .gi-split { grid-template-columns: minmax(0, 1fr); }
  .gi-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) { .gi-pic, .gi-real, .gi-play.on span { animation: none; } }

/* ── the end: idioms I learned today ── */
.gi-today-h { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.01em; margin-top: 6px; font-variation-settings: 'wght' 720; }
.gm-results .gi-today li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--cyc); border: 1.5px solid var(--line); border-radius: 14px; }
.gi-rv { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .9rem; }
.gi-rv.ok { background: #1F9D55; } .gi-rv.no { background: var(--live); }
.gi-rv-pic { flex: none; font-size: 1.5rem; width: 3.2em; text-align: center; }
.gi-rv-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gm-results .gi-rv-txt b { color: var(--ink); font-family: var(--f-display); font-size: 1.08rem; font-variation-settings: 'wght' 700; }
.gi-rv-txt span { font-size: 1rem; color: var(--ink-2); line-height: 1.4; }
.gm-results .gi-today .gi-play { flex: none; padding: 8px; width: 44px; }
@media (max-width: 420px) { .gi-rv-pic { display: none; } }

/* scrolling to the board or the answer stops below the floating nav bar */
[data-game="idiom"], [data-game="idiom"] .lu-res { scroll-margin-top: calc(var(--bar-h) + 34px); }

/* phones: one row for back, sound and score; no keyboard hints */
@media (max-width: 480px) { .gi-sound span { display: none; } .gi-sound { min-width: 44px; padding: 9px 12px; } [data-game] .gi-keys { display: none; } }
.gm-results .gi-today { padding: 0; margin-left: 0; }
@media (max-width: 480px) { [data-game="idiom"] .lu-top .stat { min-width: 56px; padding: 6px 8px; } [data-game="idiom"] .lu-back { padding: 9px 12px; } }