.game-shell:has(.idiom-quiz-game){grid-template-columns:minmax(0,1fr);gap:12px}
.game-shell:has(.idiom-quiz-game) .game-status{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px}
.game-shell:has(.idiom-quiz-game) .game-status strong{max-width:68%}
.game-shell:has(.idiom-quiz-game) .game-tools{flex-direction:row;padding:0}
.game-shell:has(.idiom-quiz-game) .game-tools button{flex:1;padding:12px 8px;text-align:center}
.idiom-quiz-game{width:min(100%,1120px);display:grid;gap:6px;color:#f1dfb9}
.idiom-quiz-title{margin:0;color:#f1dfb9;font:900 clamp(2.45rem,5vw,4.2rem)/.84 "Barlow Condensed",sans-serif;letter-spacing:.075em;text-align:center;text-transform:uppercase;text-shadow:2px 3px 0 #6f431d,0 0 22px #c79a4d2c}
.idiom-quiz-subtitle{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;color:#d6a84f;font:900 .63rem "Barlow Condensed",sans-serif;letter-spacing:.3em;text-align:center;text-transform:uppercase}
.idiom-quiz-subtitle::before,.idiom-quiz-subtitle::after{content:"";width:82px;height:1px;background:linear-gradient(90deg,transparent,#c08d3d)}
.idiom-quiz-subtitle::after{transform:scaleX(-1)}
.idiom-quiz-theatre{--time-ratio:1;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-areas:"summary" "stage" "question" "choices" "progress-label" "progress" "actions" "prompt";gap:9px;padding:12px 18px 11px;border:2px solid #a7742d;border-radius:5px;background-color:#06111c;background-image:url("/assets/covers/idiom-quiz.webp");background-position:center 44%;background-size:cover;box-shadow:inset 0 0 0 5px #140d09,inset 0 0 0 6px #7e5524,0 6px 0 #02070c,0 12px 28px #0009}
.idiom-quiz-theatre::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#07101be8 0 12%,transparent 29% 71%,#07101be8 88% 100%);pointer-events:none}
.idiom-quiz-summary{grid-area:summary;position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);margin-inline:6px;border:1px solid #9c743e;background:#071522f2;box-shadow:0 3px 0 #02070c}
.idiom-quiz-summary span{display:grid;gap:2px;padding:8px 6px;text-align:center}
.idiom-quiz-summary span+span{border-left:1px solid #63553d}
.idiom-quiz-summary small{color:#d7a54c;font:900 .49rem "Barlow Condensed",sans-serif;letter-spacing:.15em;text-transform:uppercase}
.idiom-quiz-summary strong{color:#f3e4c7;font:900 1rem "Barlow Condensed",sans-serif;letter-spacing:.04em}
.idiom-quiz-summary span:nth-child(3) strong{color:#7fc0a0}
.idiom-quiz-summary span:nth-child(4) strong{color:#ef6d61;letter-spacing:.08em}
.idiom-quiz-summary span:last-child{position:relative}
.idiom-quiz-summary span:last-child::before{content:"";position:absolute;left:7px;right:7px;bottom:4px;height:3px;background:#2d3335}
.idiom-quiz-summary span:last-child::after{content:"";position:absolute;left:7px;bottom:4px;width:calc((100% - 14px)*var(--time-ratio));height:3px;background:#d9a23f;box-shadow:0 0 7px #d9a23f;transition:width .2s linear}
.idiom-quiz-stage{grid-area:stage;position:relative;z-index:1;width:min(100%,790px);min-height:126px;margin:auto;display:grid;place-content:center;gap:7px;padding:16px 42px 17px;border:2px solid #a8742e;background:#ecd7ad;color:#1b140e;box-shadow:inset 0 0 0 4px #f8ebcf,inset 0 0 0 5px #8d6229,0 7px 16px #0009;text-align:center;clip-path:polygon(2% 0,98% 0,98% 8%,100% 8%,100% 92%,98% 92%,98% 100%,2% 100%,2% 92%,0 92%,0 8%,2% 8%)}
.idiom-quiz-stage::before{content:attr(data-category);position:absolute;right:18px;top:11px;color:#76551e;font:900 .43rem "Barlow Condensed",sans-serif;letter-spacing:.15em;text-transform:uppercase}
.idiom-quiz-stage-label{color:#6d4c21;font:900 .55rem Georgia,serif;letter-spacing:.18em;text-transform:uppercase}
.idiom-quiz-idiom{font:900 clamp(1.75rem,4vw,3rem)/.96 Georgia,serif;letter-spacing:.055em;text-transform:uppercase;text-wrap:balance}
.idiom-quiz-example{margin:0;color:#3e2d1a;font:italic 700 clamp(.78rem,1.7vw,1.05rem)/1.32 Georgia,serif;text-wrap:balance}
.idiom-quiz-question{grid-area:question;position:relative;z-index:1;width:min(100%,520px);display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto;padding:4px 12px;border-block:1px solid #8c682f;background:#071522eb;color:#e2b459;font:900 1rem Georgia,serif;text-align:center;text-shadow:0 1px 0 #000}
.idiom-quiz-question::before,.idiom-quiz-question::after{content:"";width:62px;height:1px;background:#ba812b}
.idiom-quiz-choices{grid-area:choices;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;width:min(100%,830px);margin:auto}
.idiom-quiz-choice{min-height:67px;display:grid;grid-template-columns:34px 1fr 58px;align-items:center;gap:9px;padding:9px 12px;border:2px solid #9c6c2d;background:#ead3a7;color:#1d160f;clip-path:polygon(2% 0,98% 0,98% 8%,100% 8%,100% 92%,98% 92%,98% 100%,2% 100%,2% 92%,0 92%,0 8%,2% 8%);box-shadow:inset 0 0 0 3px #f8e9c9,0 4px 0 #65441f,0 7px 14px #0009;cursor:pointer;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s,opacity .14s}
.idiom-quiz-choice:hover:not(:disabled),.idiom-quiz-choice:focus-visible{z-index:2;transform:translateY(-2px);border-color:#e2aa43;outline:3px solid #e2aa43;outline-offset:2px;background:#f0ddb8;box-shadow:inset 0 0 0 3px #fff0d1,0 4px 0 #65441f,0 9px 18px #000b}
.idiom-quiz-choice>span{width:31px;aspect-ratio:1;display:grid;place-items:center;border-right:1px solid #967340;color:#7b551d;font:900 1.05rem Georgia,serif}
.idiom-quiz-choice strong{min-width:0;font:700 clamp(.84rem,1.75vw,1.05rem)/1.22 Georgia,serif;text-align:center;text-wrap:balance}
.idiom-quiz-choice i{color:#795d35;font:900 .41rem "Barlow Condensed",sans-serif;letter-spacing:.08em;text-align:right;text-transform:uppercase}
.idiom-quiz-choice.hinted{border-color:#d9a23f;box-shadow:inset 0 0 0 3px #fff0d1,0 0 0 4px #d9a23f,0 8px 18px #d9a23f55;animation:idiom-pulse .68s ease-in-out infinite alternate}
.idiom-quiz-choice.correct{border-color:#316f52;background:#7fb89a;box-shadow:inset 0 0 0 3px #b8dec9,0 4px 0 #315e49}
.idiom-quiz-choice.wrong{border-color:#8a3029;background:#df6d60;animation:idiom-shake .24s linear}
.idiom-quiz-choice.rejected{border-color:#66615b;background:#a39b8d;box-shadow:none;opacity:.34}
.idiom-quiz-choice:disabled{cursor:default}
.idiom-quiz-progress-label{grid-area:progress-label;position:relative;z-index:1;color:#d7a54c;font:900 .48rem "Barlow Condensed",sans-serif;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.idiom-quiz-progress{grid-area:progress;position:relative;z-index:1;display:flex;justify-content:center;gap:62px;padding-block:2px 4px}
.idiom-quiz-progress span{position:relative;width:27px;aspect-ratio:1;display:grid;place-items:center;border:2px solid #9b753e;border-radius:50%;background:#071522;color:#cf9d45;font:900 .68rem "Barlow Condensed",sans-serif;box-shadow:0 0 0 3px #0c1115,0 3px 0 #02070c}
.idiom-quiz-progress span+span::before{content:"";position:absolute;right:100%;top:50%;width:66px;height:2px;background:#76582f;transform:translateY(-50%)}
.idiom-quiz-progress span.active{border-color:#e2aa43;color:#e2aa43;box-shadow:0 0 0 3px #0c1115,0 0 14px #d9a23f88}
.idiom-quiz-progress span.done{border-color:#7fbf9f;background:#7fbf9f;color:#071522}
.idiom-quiz-progress span.done::after{content:"\2713"}
.idiom-quiz-progress span.done+span::before{background:#7fbf9f;box-shadow:0 0 6px #7fbf9f}
.idiom-quiz-actions{grid-area:actions;position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,190px));justify-content:center;gap:12px}
.idiom-quiz-actions button{min-height:46px;border:1px solid #c99237;border-radius:3px;background:#101b25;color:#e2b45c;font:900 .72rem "Barlow Condensed",sans-serif;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 3px 0 #02070c;cursor:pointer}
.idiom-quiz-actions button:last-child{border-color:#a84940;background:#4e201f;color:#f2a59c}
.idiom-quiz-actions button:hover:not(:disabled),.idiom-quiz-actions button:focus-visible{outline:3px solid #e2aa43;outline-offset:2px;transform:translateY(-1px)}
.idiom-quiz-actions button:disabled{opacity:.38;cursor:default;transform:none}
.idiom-quiz-prompt{grid-area:prompt;position:relative;z-index:1;margin:0;padding-top:5px;border-top:1px solid #665033;color:#b4b0a6;font-size:.59rem;line-height:1.4;text-align:center}
.idiom-quiz-game.paused .idiom-quiz-stage,.idiom-quiz-game.paused .idiom-quiz-choices,.idiom-quiz-game.paused .idiom-quiz-progress{opacity:.42}
.idiom-quiz-game.complete .idiom-quiz-title{color:#8fd0ad;text-shadow:2px 3px 0 #315e49,0 0 24px #7fbf9f66}
@keyframes idiom-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes idiom-pulse{to{box-shadow:inset 0 0 0 3px #fff0d1,0 0 0 5px #d9a23f,0 9px 19px #d9a23f77}}
@media(prefers-reduced-motion:reduce){.idiom-quiz-choice,.idiom-quiz-summary span:last-child::after{transition:none}.idiom-quiz-choice.wrong,.idiom-quiz-choice.hinted{animation:none}}
@media(max-width:720px){
  .game-shell:has(.idiom-quiz-game) .game-status{align-items:flex-start;flex-direction:column;gap:7px}.game-shell:has(.idiom-quiz-game) .game-status strong{max-width:none}
  .idiom-quiz-title{font-size:2.1rem}.idiom-quiz-subtitle{font-size:.49rem}.idiom-quiz-subtitle::before,.idiom-quiz-subtitle::after{width:34px}.idiom-quiz-theatre{gap:7px;padding:9px 8px 10px;background-position:center 40%}.idiom-quiz-summary{margin-inline:2px}.idiom-quiz-summary span{padding:7px 2px}.idiom-quiz-summary small{font-size:.38rem}.idiom-quiz-summary strong{font-size:.72rem}
  .idiom-quiz-stage{min-height:112px;padding:13px 17px}.idiom-quiz-stage::before{right:10px;top:7px;font-size:.37rem}.idiom-quiz-stage-label{font-size:.47rem}.idiom-quiz-idiom{font-size:clamp(1.28rem,6vw,1.85rem)}.idiom-quiz-example{font-size:.72rem}.idiom-quiz-question{font-size:.78rem}.idiom-quiz-question::before,.idiom-quiz-question::after{width:28px}
  .idiom-quiz-choices{gap:7px}.idiom-quiz-choice{min-height:58px;grid-template-columns:28px 1fr;padding:7px}.idiom-quiz-choice strong{font-size:.77rem}.idiom-quiz-choice i{display:none}.idiom-quiz-choice>span{width:25px;font-size:.84rem}.idiom-quiz-progress{gap:37px}.idiom-quiz-progress span{width:25px}.idiom-quiz-progress span+span::before{width:40px}.idiom-quiz-actions button{min-height:46px}.idiom-quiz-prompt{font-size:.52rem}
}
@media(max-width:430px){
  .idiom-quiz-summary small{font-size:.33rem}.idiom-quiz-summary strong{font-size:.62rem}.idiom-quiz-stage{min-height:105px;padding-inline:12px}.idiom-quiz-stage::before{display:none}.idiom-quiz-idiom{font-size:1.23rem}.idiom-quiz-example{font-size:.66rem}.idiom-quiz-choices{grid-template-columns:1fr}.idiom-quiz-choice{min-height:50px}.idiom-quiz-choice strong{font-size:.76rem}.idiom-quiz-progress{gap:24px}.idiom-quiz-progress span{width:23px}.idiom-quiz-progress span+span::before{width:27px}.idiom-quiz-prompt{display:none}
}