#ordid-app {
  --o-ink:#081d43; --o-muted:#395574; --o-blue:#075bd8; --o-green:#087a51;
  color:var(--o-ink); color-scheme:only light; isolation:isolate;
  background:radial-gradient(ellipse at 50% 0,#dcecff 0,#edf4ff 48%,#f5f8ff 100%);
  font-family:'Nunito','Avenir Next','Trebuchet MS',sans-serif;
  font-size:16px; line-height:1.5; padding:24px 24px 18px; -webkit-font-smoothing:antialiased;
}
#ordid-app *,#ordid-app *::before,#ordid-app *::after { box-sizing:border-box; }
#ordid-app button { font:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#ordid-app button:focus-visible { outline:3px solid #1464e3; outline-offset:4px; }
#ordid-app .o-game { max-width:1440px; margin:0 auto; background:#fff; color:#081d43; border-radius:28px; overflow:hidden; box-shadow:0 16px 54px #244a8420,0 3px 8px #1b407814; }
#ordid-app .o-scene { position:relative; aspect-ratio:2.15; max-height:640px; overflow:hidden; background:#b3d8f1; }
#ordid-app .o-art { display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
#ordid-app .o-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0a284419 0,transparent 24%,transparent 70%,#0a284438 100%); pointer-events:none; }
#ordid-app .o-scene-top { position:absolute; z-index:2; top:26px; left:28px; right:28px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
#ordid-app .o-location { display:flex; align-items:center; gap:12px; padding:13px 23px; border-radius:40px; border:1px solid #ffffff72; background:linear-gradient(145deg,#1a71de,#104eac); color:#fff; box-shadow:0 5px 20px #062e7333,inset 0 1px 0 #ffffff42; }
#ordid-app .o-game-name { font-size:24px; font-weight:900; letter-spacing:-.7px; color:#fff; }
#ordid-app .o-location-divider { color:#bcd7ff; font-size:20px; }
#ordid-app .o-location-number { color:#fff; font-size:17px; font-weight:800; white-space:nowrap; }
#ordid-app .o-progress { display:flex; align-items:center; gap:19px; background:#fffffff5; color:#081d43; padding:15px 23px; border-radius:40px; box-shadow:0 3px 15px #102e6a13; }
#ordid-app .o-progress-label { font-size:18px; font-weight:900; white-space:nowrap; color:#081d43; }
#ordid-app .o-dots { display:flex; gap:10px; }
#ordid-app .o-dot { width:13px; height:13px; border-radius:50%; background:#d6e1ef; }
#ordid-app .o-dot.current { background:#075bd8; box-shadow:0 0 0 4px #075bd814; }
#ordid-app .o-dot.done { background:#109c70; }
#ordid-app .o-message { position:absolute; z-index:1; right:5%; bottom:10%; max-width:55%; padding:17px 25px 20px; background:linear-gradient(135deg,#f5ffe8,#e9fbdc); color:#112b27; border:1.5px solid #a7c69b; border-radius:25px 25px 6px 25px; box-shadow:0 8px 28px #10282c28,inset 0 1px 0 #fff; }
#ordid-app .o-scene[data-scene="bus"] .o-message { top:25%; bottom:auto; right:7%; max-width:48%; }
#ordid-app .o-speaker { display:block; color:#376347; font-size:11px; line-height:1.3; text-transform:uppercase; font-weight:800; letter-spacing:1.2px; margin-bottom:5px; }
#ordid-app .o-phrase { display:block; color:#112b27; font-size:clamp(23px,2.4vw,34px); font-weight:800; line-height:1.25; letter-spacing:-.7px; overflow-wrap:break-word; }
#ordid-app .o-content { position:relative; z-index:2; margin-top:-20px; background:#fff; color:#081d43; border-radius:26px 26px 0 0; padding:35px 40px 38px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:32px; align-items:start; }
#ordid-app .o-content.is-unanswered { grid-template-columns:minmax(0,1fr); }
#ordid-app .is-unanswered .o-question-area { width:100%; max-width:1000px; margin:0 auto; }
#ordid-app .o-question-area { min-width:0; }
#ordid-app .o-eyebrow { color:#335d98; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.35px; line-height:1.4; margin:0 0 10px; }
#ordid-app h1.o-question { color:#081d43!important; -webkit-text-fill-color:#081d43; font-size:clamp(29px,3.1vw,45px); font-weight:900; line-height:1.15; letter-spacing:-1.25px; margin:0 0 13px; padding:0; text-wrap:pretty; }
#ordid-app .o-context { color:#304f76; font-size:17px; line-height:1.6; margin:0 0 24px; }
#ordid-app .o-answer-hint { margin:0 0 9px; color:#34537a; font-size:12px; font-weight:800; }
#ordid-app .has-feedback .o-answer-hint { display:none; }
#ordid-app .o-answers { display:grid; gap:12px; }
#ordid-app button.o-answer { display:flex; align-items:center; gap:16px; width:100%; min-width:0; min-height:70px; padding:17px 21px; text-align:left; border:2px solid #b8cbe5; border-radius:15px; color:#081d43; background:#fff; box-shadow:0 2px 0 #153a6505; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }
#ordid-app .o-answer:not(:disabled) { cursor:pointer; }
#ordid-app .o-answer:not(:disabled):hover { background:#edf5ff; border-color:#397ee0; box-shadow:0 4px 13px #1763c313; transform:translateY(-1px); }
#ordid-app .o-answer:not(:disabled):active { transform:translateY(1px); background:#e2eeff; }
#ordid-app .o-answer:disabled { color:#081d43; opacity:1; -webkit-text-fill-color:currentColor; }
#ordid-app .o-answer-token { display:grid; place-items:center; flex:0 0 32px; height:32px; border:2px solid #8497b1; border-radius:50%; background:#fff; color:#4f6786; font-size:12px; font-weight:800; }
#ordid-app .o-answer-label { min-width:0; color:#081d43; font-size:19px; font-weight:800; line-height:1.35; }
#ordid-app .o-answer-note { display:block; margin-top:4px; font-size:11px; font-weight:800; }
#ordid-app button.o-answer.correct { background:#e2f8ed; border-color:#26a67b; box-shadow:0 2px 0 #16815a0b; }
#ordid-app .o-answer.correct .o-answer-token { background:#119661; border-color:#119661; color:#fff; font-size:22px; }
#ordid-app .o-answer.correct .o-answer-note { color:#086b46; }
#ordid-app button.o-answer.wrong { background:#fff0eb; border-color:#dd755f; }
#ordid-app .o-answer.wrong .o-answer-token { background:#c5533e; border-color:#c5533e; color:#fff; font-size:25px; }
#ordid-app .o-answer.wrong .o-answer-note { color:#993c29; }
#ordid-app .o-side { min-width:0; align-self:stretch; display:flex; }
#ordid-app .o-feedback { display:flex; flex-direction:column; width:100%; padding:29px; border-radius:22px; color:#081d43; }
#ordid-app .o-feedback.positive { background:linear-gradient(135deg,#d9f6e9,#ebfcf4); border:1px solid #b0e2d0; }
#ordid-app .o-feedback.negative { background:linear-gradient(135deg,#ffeadf,#fff5ed); border:1px solid #efc6b1; }
#ordid-app .o-feedback-heading { display:flex; align-items:center; gap:14px; margin:0 0 20px; }
#ordid-app .o-feedback-icon { display:grid; place-items:center; flex:0 0 53px; height:53px; border-radius:50%; background:linear-gradient(145deg,#1faf76,#07834e); color:#fff; font-size:34px; font-weight:800; box-shadow:0 4px 10px #09835018; }
#ordid-app .negative .o-feedback-icon { background:#b95b36; box-shadow:none; font-size:29px; }
#ordid-app h2.o-feedback-title { color:#075335!important; -webkit-text-fill-color:#075335; font-size:34px; font-weight:900; line-height:1.15; letter-spacing:-.9px; margin:0; padding:0; }
#ordid-app .negative h2.o-feedback-title { color:#7c371e!important; -webkit-text-fill-color:#7c371e; }
#ordid-app .o-feedback-text { color:#0c2b4c; font-size:17px; line-height:1.65; margin:0 0 16px; }
#ordid-app .o-aside { color:#204a45; font-size:16px; line-height:1.65; margin:0 0 26px; }
#ordid-app .negative .o-aside { color:#65402f; }
#ordid-app button.o-next { display:flex; width:100%; align-items:center; justify-content:center; gap:20px; min-height:64px; margin-top:auto; padding:17px 22px; border:0; border-radius:15px; background:linear-gradient(180deg,#0867e8,#0052cc); box-shadow:0 4px 0 #0343a5,0 7px 15px #0059ce1a; color:#fff; -webkit-text-fill-color:#fff; font-size:18px; font-weight:900; line-height:1.4; cursor:pointer; transition:filter .16s,transform .16s,box-shadow .16s; }
#ordid-app .o-next:hover { filter:brightness(1.07); box-shadow:0 4px 0 #0343a5,0 8px 19px #0059ce2b; }
#ordid-app .o-next:active { transform:translateY(2px); box-shadow:0 2px 0 #0343a5; }
#ordid-app .o-arrow { color:#fff; font-size:28px; font-weight:600; line-height:1; }
#ordid-app .o-footer { display:flex; justify-content:space-between; gap:12px; max-width:1440px; margin:18px auto 0; padding:0 3px; color:#42618a; font-size:11px; font-weight:700; }
#ordid-app .o-footer-heart { color:#1455b8; }
#ordid-app .o-results { padding:35px 30px 40px; background:#fff; text-align:center; color:#081d43; }
#ordid-app .o-results h1 { color:#081d43!important; -webkit-text-fill-color:#081d43; font-size:clamp(30px,4vw,46px); font-weight:900; line-height:1.2; letter-spacing:-1px; margin:0 0 14px; }
#ordid-app .o-results-intro { max-width:570px; margin:0 auto 26px; color:#304f76; font-size:17px; }
#ordid-app .o-score { display:flex; align-items:baseline; justify-content:center; gap:10px; color:#0954c0; font-size:27px; font-weight:800; margin-bottom:7px; }
#ordid-app .o-score strong { color:#0954c0; font-size:78px; font-weight:900; line-height:1; letter-spacing:-3px; }
#ordid-app .o-score-label { color:#304f76; margin:0 0 27px; font-size:14px; font-weight:700; }
#ordid-app .o-review { display:grid; gap:9px; text-align:left; max-width:660px; margin:0 auto 30px; }
#ordid-app .o-review-row { display:flex; align-items:center; gap:13px; padding:13px 16px; border:1px solid #d3e7f5; border-radius:13px; background:#f0f7ff; }
#ordid-app .o-review-mark { color:#087a51; font-size:23px; width:25px; flex:none; }
#ordid-app .o-review-mark.missed { color:#a6512e; }
#ordid-app .o-review-phrase { color:#081d43; font-size:15px; font-weight:800; }
#ordid-app .o-review-translation { display:block; color:#395574; font-size:14px; font-weight:600; }
#ordid-app .o-results .o-next { max-width:330px; margin:0 auto; }
#ordid-app .o-result-scene { aspect-ratio:3; max-height:450px; }
#ordid-app .o-result-scene .o-art { object-position:center 28%; }
#ordid-app .o-completed-pill { position:absolute; z-index:1; left:50%; bottom:24px; transform:translateX(-50%); padding:12px 22px; border-radius:35px; color:#083663; background:#ffffffed; font-size:16px; font-weight:800; white-space:nowrap; }
@media(min-width:1700px) { #ordid-app { padding-top:36px; } }
@media(max-width:1100px) {
 #ordid-app { padding:16px; }
 #ordid-app .o-content { padding:30px; gap:25px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
 #ordid-app h1.o-question { font-size:34px; }
 #ordid-app .o-feedback { padding:23px; }
 #ordid-app .o-feedback-text,#ordid-app .o-aside { font-size:15px; }
 #ordid-app h2.o-feedback-title { font-size:29px; }
 #ordid-app .o-feedback-heading { gap:12px; }
 #ordid-app .o-feedback-icon { flex-basis:46px; height:46px; font-size:29px; }
 #ordid-app .o-answer-label { font-size:17px; }
 #ordid-app .o-context { font-size:16px; }
}
@media(max-width:760px) {
 #ordid-app { padding:10px 10px 16px; }
 #ordid-app .o-game { border-radius:22px; }
 #ordid-app .o-scene { aspect-ratio:1.45; }
 #ordid-app .o-art { object-position:46% 35%; }
 #ordid-app .o-scene-top { top:18px; left:18px; right:18px; gap:10px; }
 #ordid-app .o-location { gap:8px; padding:10px 15px; }
 #ordid-app .o-game-name { font-size:20px; }
 #ordid-app .o-location-number { font-size:13px; }
 #ordid-app .o-progress { padding:12px 16px; gap:12px; }
 #ordid-app .o-progress-label { font-size:15px; }
 #ordid-app .o-dots { gap:7px; }
 #ordid-app .o-dot { width:10px; height:10px; }
 #ordid-app .o-message,#ordid-app .o-scene[data-scene="bus"] .o-message { top:auto; bottom:10%; right:5%; max-width:88%; padding:14px 20px 16px; border-radius:21px 21px 5px 21px; }
 #ordid-app .o-phrase { font-size:25px; }
 #ordid-app .o-speaker { font-size:10px; }
 #ordid-app .o-content,#ordid-app .o-content.is-unanswered { grid-template-columns:minmax(0,1fr); gap:24px; padding:27px 25px 29px; margin-top:-18px; border-radius:23px 23px 0 0; }
 #ordid-app h1.o-question { font-size:32px; letter-spacing:-1px; }
 #ordid-app .o-context { font-size:16px; margin-bottom:21px; }
 #ordid-app button.o-answer { min-height:68px; padding:16px; gap:14px; }
 #ordid-app .o-answer-label { font-size:18px; }
 #ordid-app .o-feedback { padding:24px; }
 #ordid-app .o-feedback-text,#ordid-app .o-aside { font-size:16px; }
 #ordid-app .o-feedback-heading { margin-bottom:17px; }
 #ordid-app h2.o-feedback-title { font-size:31px; }
 #ordid-app .o-next { margin-top:0; }
 #ordid-app .o-footer { flex-wrap:wrap; justify-content:center; text-align:center; gap:4px 15px; }
 #ordid-app .o-result-scene { aspect-ratio:1.75; }
}
@media(max-width:440px) {
 #ordid-app { padding:0 0 16px; }
 #ordid-app .o-game { border-radius:0 0 22px 22px; }
 #ordid-app .o-scene { aspect-ratio:1.18; }
 #ordid-app .o-scene-top { top:15px; left:13px; right:13px; gap:8px; }
 #ordid-app .o-location { gap:7px; padding:9px 12px; }
 #ordid-app .o-game-name { font-size:18px; }
 #ordid-app .o-location-divider { font-size:16px; }
 #ordid-app .o-location-number { font-size:12px; }
 #ordid-app .o-progress { padding:11px 12px; gap:9px; }
 #ordid-app .o-progress-label { font-size:14px; }
 #ordid-app .o-dots { gap:6px; }
 #ordid-app .o-dot { width:8px; height:8px; }
 #ordid-app .o-message,#ordid-app .o-scene[data-scene="bus"] .o-message { bottom:10%; right:5%; max-width:90%; padding:14px 17px; }
 #ordid-app .o-phrase { font-size:23px; }
 #ordid-app .o-content,#ordid-app .o-content.is-unanswered { padding:26px 20px 27px; }
 #ordid-app h1.o-question { font-size:29px; letter-spacing:-.8px; }
 #ordid-app .o-eyebrow { font-size:10px; letter-spacing:1.1px; }
 #ordid-app .o-context { font-size:15px; line-height:1.6; margin-bottom:19px; }
 #ordid-app button.o-answer { min-height:65px; padding:15px 14px; gap:12px; border-radius:13px; }
 #ordid-app .o-answer-label { font-size:16px; }
 #ordid-app .o-answer-token { flex-basis:30px; height:30px; }
 #ordid-app .o-feedback { padding:21px; border-radius:18px; }
 #ordid-app .o-feedback-text,#ordid-app .o-aside { font-size:15px; }
 #ordid-app button.o-next { font-size:17px; padding:15px; min-height:60px; gap:14px; }
 #ordid-app .o-footer { font-size:10px; padding:0 12px; }
 #ordid-app .o-result-scene { aspect-ratio:1.5; }
 #ordid-app .o-results { padding:29px 20px 34px; }
 #ordid-app .o-results-intro { font-size:15px; }
}
@media(prefers-reduced-motion:no-preference) {
 #ordid-app .o-feedback { animation:o-reveal .24s ease-out; }
 @keyframes o-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
}
/* Focused language assistance. The taught phrase always stays Faroese. */
#ordid-app .o-english { color:#304f76; margin:-12px 0 18px; font-size:14px; }
#ordid-app .o-english summary { display:list-item; width:fit-content; min-height:44px; padding:11px 3px; color:#1556ad; font-size:13px; font-weight:800; cursor:pointer; }
#ordid-app .o-english summary:focus-visible { outline:3px solid #1464e3; outline-offset:3px; border-radius:4px; }
#ordid-app .o-english summary:hover { color:#003d92; text-decoration:underline; text-underline-offset:3px; }
#ordid-app .o-english .o-hide-english { display:none; }
#ordid-app .o-english[open] .o-show-english { display:none; }
#ordid-app .o-english[open] .o-hide-english { display:inline; }
#ordid-app .o-english-text { border-left:3px solid #94b6e4; padding:1px 0 1px 13px; margin:1px 0 12px; }
#ordid-app .o-english-text p { color:#304f76; font-size:15px; line-height:1.65; margin:6px 0 10px; }
#ordid-app .o-feedback .o-english { margin:-15px 0 20px; }
#ordid-app .o-feedback .o-english-text p { color:#173d44; }
#ordid-app .negative .o-english-text p { color:#65402f; }
#ordid-app #o-question:focus-visible,#ordid-app #o-feedback-title:focus-visible,#ordid-app #o-result-heading:focus-visible { outline:3px solid #1464e3; outline-offset:5px; border-radius:3px; }
/* Keep heads above the crop and move badges to the lower scenery in these three scenes. */
#ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-art { object-position:center top; }
#ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-scene-top { top:auto; bottom:34px; }
#ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-message { bottom:20%; }
#ordid-app .o-result-scene .o-art { object-position:center top; }
@media(max-width:760px) {
 #ordid-app .o-scene[data-scene="coffee"] .o-art { object-position:62% top; }
 #ordid-app .o-scene[data-scene="shop"] .o-art { object-position:60% top; }
 #ordid-app .o-scene[data-scene="meal"] .o-art { object-position:48% top; }
 #ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-scene-top { bottom:32px; }
 #ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-message { bottom:29%; }
}
@media(max-width:440px) {
 #ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-message { bottom:27%; }
}
@media(max-width:360px) {
 #ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-phrase { font-size:20px; }
 #ordid-app .o-scene:is([data-scene="coffee"],[data-scene="shop"],[data-scene="meal"]) .o-message { bottom:28%; }
}
/* Home and mode navigation extend the existing game styling. */
#ordid-app .o-game-nav { display:flex; align-items:center; gap:14px; padding:8px 22px; min-height:60px; background:#fff; color:#304f76; }
#ordid-app button.o-home-button { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px; background:transparent; border:0; border-radius:9px; color:#1457b3; font-size:14px; font-weight:800; cursor:pointer; }
#ordid-app .o-home-button:hover { background:#edf4ff; }
#ordid-app .o-nav-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#385c88; font-size:13px; font-weight:800; }
#ordid-app .o-game-nav .o-progress { padding:9px 13px; gap:12px; background:#edf4ff; box-shadow:none; flex:none; }
#ordid-app .o-game-nav .o-progress-label { font-size:14px; }
#ordid-app .o-game-nav .o-dot { width:9px; height:9px; }
#ordid-app .o-game-nav .o-dots { gap:7px; }
#ordid-app .o-home { padding:30px 38px 25px; color:#081d43; background:linear-gradient(180deg,#f6faff,#fff 28%); }
#ordid-app .o-home-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 29px; }
#ordid-app .o-home-logo { color:#145abb; font-size:42px; font-weight:900; letter-spacing:-2px; line-height:1.1; }
#ordid-app .o-home-logo span { color:#e8a23c; }
#ordid-app .o-home-kicker { color:#42628b; font-size:13px; font-weight:800; margin:0; }
#ordid-app .o-home-intro { text-align:center; margin:0 auto 30px; max-width:730px; }
#ordid-app .o-home-intro h1 { color:#081d43!important; -webkit-text-fill-color:#081d43; font-size:clamp(31px,3.5vw,48px); font-weight:900; line-height:1.16; letter-spacing:-1.4px; margin:0 0 13px; }
#ordid-app .o-home-intro > p { color:#385779; font-size:17px; line-height:1.6; margin:0 0 11px; }
#ordid-app .o-home-intro .o-english { text-align:left; margin:0 auto; width:fit-content; max-width:100%; }
#ordid-app .o-home-intro .o-english summary { margin:0 auto; }
#ordid-app .o-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
#ordid-app .o-mode-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #d4e3f5; border-radius:23px; overflow:hidden; box-shadow:0 7px 24px #1b497712; }
#ordid-app .o-weekly-card { border-color:#d6e4c7; box-shadow:0 7px 24px #547b3020; }
#ordid-app .o-mode-art { aspect-ratio:1.65; overflow:hidden; background:#cbe3f2; }
#ordid-app .o-mode-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
#ordid-app .o-mode-copy { flex:1; display:flex; flex-direction:column; padding:25px 27px 28px; }
#ordid-app .o-mode-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 12px; margin-bottom:16px; color:#486385; font-size:12px; font-weight:800; }
#ordid-app .o-mode-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; color:#1958a6; background:#eaf3ff; font-size:11px; font-weight:900; }
#ordid-app .o-weekly-badge { background:#fff0cb; color:#795018; }
#ordid-app .o-mode-copy h2 { color:#081d43!important; -webkit-text-fill-color:#081d43; font-size:29px; font-weight:900; line-height:1.2; letter-spacing:-.8px; margin:0 0 11px; }
#ordid-app .o-mode-description { color:#345477; font-size:16px; line-height:1.6; margin:0 0 18px; }
#ordid-app .o-mode-copy .o-english { margin:-9px 0 20px; }
#ordid-app .o-mode-copy .o-next { margin-top:auto; }
#ordid-app .o-home-note { margin:26px 0 0; text-align:center; color:#466489; font-size:12px; font-weight:700; }
#ordid-app .o-result-actions { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:340px; margin:0 auto; }
#ordid-app button.o-secondary { min-height:46px; padding:10px 20px; border:1.5px solid #b8cbe5; border-radius:12px; background:#fff; color:#1456b1; font-size:15px; font-weight:800; cursor:pointer; }
#ordid-app .o-secondary:hover { background:#edf4ff; }
#ordid-app .o-story-ending { max-width:590px; padding:21px 24px 12px; margin:0 auto 28px; border-radius:18px; background:#e9f8f0; border:1px solid #bde7d2; text-align:left; }
#ordid-app .o-story-ending > p { color:#154139; margin:0 0 10px; font-size:17px; line-height:1.65; font-weight:700; }
#ordid-app .o-story-ending .o-english { margin:0; }
/* Story progress has its own safe navigation row; dialogue sits below the faces. */
#ordid-app .o-scene[data-story="true"] .o-scene-top { display:none; }
#ordid-app .o-scene[data-story="true"] .o-art { object-position:center top; }
#ordid-app .o-scene[data-story="true"] .o-message { top:auto; right:4%; bottom:8%; max-width:78%; }
@media(max-width:760px) {
 #ordid-app .o-home { padding:25px 21px 23px; }
 #ordid-app .o-home-header { margin-bottom:24px; }
 #ordid-app .o-home-logo { font-size:36px; }
 #ordid-app .o-home-kicker { font-size:11px; }
 #ordid-app .o-home-intro { margin-bottom:25px; }
 #ordid-app .o-home-intro h1 { font-size:34px; letter-spacing:-1px; }
 #ordid-app .o-home-intro > p { font-size:16px; }
 #ordid-app .o-mode-grid { grid-template-columns:minmax(0,1fr); gap:23px; }
 #ordid-app .o-mode-art { aspect-ratio:1.55; }
 #ordid-app .o-mode-copy { padding:23px; }
 #ordid-app .o-mode-copy h2 { font-size:28px; }
 #ordid-app .o-scene[data-story="true"] .o-message { top:auto; right:5%; bottom:8%; max-width:90%; }
 #ordid-app .o-scene[data-story="true"] .o-phrase { font-size:24px; }
 #ordid-app .o-game-nav { padding:6px 12px; gap:10px; min-height:57px; }
}
@media(max-width:440px) {
 #ordid-app .o-home { padding:23px 16px 24px; }
 #ordid-app .o-home-header { gap:12px; }
 #ordid-app .o-home-kicker { font-size:10px; }
 #ordid-app .o-home-intro h1 { font-size:31px; }
 #ordid-app .o-home-intro > p { font-size:15px; }
 #ordid-app .o-mode-copy { padding:22px 20px 25px; }
 #ordid-app .o-mode-copy h2 { font-size:26px; }
 #ordid-app .o-mode-description { font-size:15px; }
 #ordid-app .o-mode-art { aspect-ratio:1.4; }
 #ordid-app .o-scene[data-story="true"] .o-phrase { font-size:22px; }
 #ordid-app .o-game-nav .o-progress { padding:9px 11px; gap:9px; }
 #ordid-app .o-game-nav .o-progress-label { font-size:12px; }
 #ordid-app .o-game-nav .o-dot { width:7px; height:7px; }
 #ordid-app .o-game-nav .o-dots { gap:6px; }
 #ordid-app .o-nav-label { font-size:11px; }
 #ordid-app button.o-home-button { font-size:13px; gap:7px; padding:8px; }
 #ordid-app .o-story-ending { padding:19px 19px 10px; }
 #ordid-app .o-story-ending > p { font-size:15px; }
}
/* Appearance is outside the changing game surface, on every screen. */
#ordid-app .o-appearance-bar { display:flex; justify-content:flex-end; max-width:1440px; margin:0 auto 12px; }
#ordid-app .o-appearance-control { display:flex; align-items:center; gap:9px; color:#395574; font-size:13px; font-weight:800; }
#ordid-app .o-appearance-icon { color:#1457b3; font-size:23px; line-height:1; }
#ordid-app .o-appearance-control select { min-height:44px; max-width:180px; padding:8px 30px 8px 12px; border:1px solid #a3bbda; border-radius:12px; background:#fff; color:#081d43; font:inherit; font-size:16px; cursor:pointer; }
#ordid-app .o-appearance-control select:focus-visible { outline:3px solid #1464e3; outline-offset:3px; }
#ordid-app #o-packs-heading:focus-visible,#ordid-app #o-home-heading:focus-visible { outline:3px solid #1464e3; outline-offset:5px; border-radius:3px; }
/* Packs use the same illustrated card language as the two home choices. */
#ordid-app .o-pack-selection { padding:30px 34px 38px; background:linear-gradient(180deg,#f6faff,#fff 28%); }
#ordid-app .o-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
#ordid-app .o-pack-grid .o-mode-art { aspect-ratio:1.5; }
#ordid-app .o-pack-grid .o-mode-art img { object-position:center top; }
#ordid-app .o-pack-grid .o-mode-copy { padding:23px; }
#ordid-app .o-pack-grid .o-mode-copy h2 { font-size:28px; }
#ordid-app .o-pack-grid .o-mode-meta { gap:7px; font-size:11px; }
#ordid-app .o-pack-grid .o-mode-description { font-size:15px; }
#ordid-app .o-pack-status { display:flex; flex-wrap:wrap; gap:4px 14px; margin:auto 0 19px; padding:12px 0; border-top:1px solid #d4e3f5; color:#395574; font-size:13px; font-weight:800; }
#ordid-app .o-pack-status.completed { color:#086b46; }
#ordid-app .o-pack-grid .o-next { margin-top:0; }
/* New art has safe headroom. Progress stays in the navigation row. */
#ordid-app .o-scene:is([data-pack="arbeidi"],[data-pack="uti-i-foroyum"]) .o-scene-top { display:none; }
#ordid-app .o-scene:is([data-pack="arbeidi"],[data-pack="uti-i-foroyum"]) .o-art { object-position:center top; }
#ordid-app .o-scene:is([data-pack="arbeidi"],[data-pack="uti-i-foroyum"]) .o-message { right:4%; bottom:8%; max-width:75%; }
/* Preserve the artwork's original colors in every appearance. */
#ordid-app .o-scene::after { background:none; }
@media(max-width:1050px) and (min-width:761px) {
 #ordid-app .o-pack-grid { grid-template-columns:minmax(0,1fr); }
 #ordid-app .o-pack-grid .o-mode-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
 #ordid-app .o-pack-grid .o-mode-art { height:100%; aspect-ratio:auto; min-height:290px; }
}
@media(max-width:760px) {
 #ordid-app .o-pack-selection { padding:25px 21px 30px; }
 #ordid-app .o-pack-grid { grid-template-columns:minmax(0,1fr); }
 #ordid-app .o-scene:is([data-pack="arbeidi"],[data-pack="uti-i-foroyum"]) .o-message { right:5%; max-width:90%; }
}
@media(max-width:440px) {
 #ordid-app .o-appearance-bar { padding:8px 12px 0; margin-bottom:8px; }
 #ordid-app .o-pack-selection { padding:23px 16px 28px; }
 #ordid-app .o-pack-grid .o-mode-copy { padding:22px 20px 25px; }
 #ordid-app .o-pack-grid .o-mode-copy h2 { font-size:26px; }
 #ordid-app .o-scene:is([data-pack="arbeidi"],[data-pack="uti-i-foroyum"]) .o-phrase { font-size:22px; }
 #ordid-app .o-result-actions { width:100%; }
 #ordid-app .o-result-actions > button { max-width:100%; overflow-wrap:anywhere; }
}
/* A designed navy palette, independent of the illustration pixels. */
html[data-theme="dark"] body { background:#0b1424!important; }
html[data-theme="dark"] #ordid-app { --o-ink:#eff5ff; --o-muted:#aac0da; --o-blue:#9bc6ff; --o-green:#9be6c0; color:#eff5ff; color-scheme:dark; background:radial-gradient(ellipse at 50% 0,#172b46 0,#0e1b2f 48%,#0b1424 100%); }
html[data-theme="dark"] #ordid-app .o-game { background:#142238; color:#eff5ff; box-shadow:0 16px 54px #0004,0 3px 8px #0003; }
html[data-theme="dark"] #ordid-app :is(.o-content,.o-results,.o-game-nav) { background:#142238; color:#eff5ff; }
html[data-theme="dark"] #ordid-app :is(.o-home,.o-pack-selection) { background:linear-gradient(180deg,#192d49,#142238 28%); color:#eff5ff; }
html[data-theme="dark"] #ordid-app :is(h1.o-question,.o-home-intro h1,.o-results h1,.o-mode-copy h2) { color:#eff5ff!important; -webkit-text-fill-color:#eff5ff; }
html[data-theme="dark"] #ordid-app :is(.o-context,.o-results-intro,.o-score-label,.o-mode-description,.o-home-intro > p,.o-review-translation,.o-english,.o-english-text p) { color:#d3e0f1; }
html[data-theme="dark"] #ordid-app :is(.o-eyebrow,.o-answer-hint,.o-home-kicker,.o-home-note,.o-nav-label,.o-mode-meta,.o-footer,.o-appearance-control) { color:#aac0da; }
html[data-theme="dark"] #ordid-app :is(.o-home-logo,.o-footer-heart,.o-appearance-icon,.o-home-button,.o-english summary) { color:#9bc6ff; }
html[data-theme="dark"] #ordid-app .o-english summary:hover { color:#c5deff; }
html[data-theme="dark"] #ordid-app .o-english-text { border-color:#6c98c9; }
html[data-theme="dark"] #ordid-app :is(.o-mode-card,.o-appearance-control select,button.o-secondary) { background:#1a2b44; color:#eff5ff; border-color:#425c7b; }
html[data-theme="dark"] #ordid-app .o-weekly-card { border-color:#657554; box-shadow:0 7px 24px #0003; }
html[data-theme="dark"] #ordid-app .o-mode-badge { background:#203b5e; color:#c2ddff; }
html[data-theme="dark"] #ordid-app .o-weekly-badge { background:#443a23; color:#ffe3a2; }
html[data-theme="dark"] #ordid-app .o-pack-status { border-color:#425c7b; color:#aac0da; }
html[data-theme="dark"] #ordid-app .o-pack-status.completed { color:#9be6c0; }
html[data-theme="dark"] #ordid-app :is(.o-home-button,button.o-secondary):hover { background:#233c5d; }
html[data-theme="dark"] #ordid-app button.o-answer { color:#eff5ff; background:#1a2b44; border-color:#7791af; box-shadow:0 2px 0 #0002; }
html[data-theme="dark"] #ordid-app .o-answer-label { color:#eff5ff; }
html[data-theme="dark"] #ordid-app .o-answer-token { color:#d3e0f1; background:#20334e; border-color:#8299b6; }
html[data-theme="dark"] #ordid-app .o-answer:not(:disabled):hover { background:#233c5d; border-color:#9bc6ff; }
html[data-theme="dark"] #ordid-app .o-answer:not(:disabled):active { background:#294766; }
html[data-theme="dark"] #ordid-app button.o-answer.correct { background:#103e36; border-color:#55c69b; }
html[data-theme="dark"] #ordid-app .o-answer.correct .o-answer-token { background:#08784c; border-color:#55c69b; color:#fff; }
html[data-theme="dark"] #ordid-app .o-answer.correct .o-answer-note { color:#9be6c0; }
html[data-theme="dark"] #ordid-app button.o-answer.wrong { background:#492b29; border-color:#e6927d; }
html[data-theme="dark"] #ordid-app .o-answer.wrong .o-answer-token { background:#a23e2c; border-color:#e6927d; color:#fff; }
html[data-theme="dark"] #ordid-app .o-answer.wrong .o-answer-note { color:#ffc2ae; }
html[data-theme="dark"] #ordid-app .o-feedback.positive { background:linear-gradient(135deg,#103e36,#153e35); border-color:#3b997b; }
html[data-theme="dark"] #ordid-app .o-feedback.negative { background:linear-gradient(135deg,#492b29,#3e2b29); border-color:#ba7967; }
html[data-theme="dark"] #ordid-app h2.o-feedback-title { color:#9be6c0!important; -webkit-text-fill-color:#9be6c0; }
html[data-theme="dark"] #ordid-app .negative h2.o-feedback-title { color:#ffc2ae!important; -webkit-text-fill-color:#ffc2ae; }
html[data-theme="dark"] #ordid-app .positive :is(.o-feedback-text,.o-aside,.o-english-text p) { color:#d9f6e9; }
html[data-theme="dark"] #ordid-app .negative :is(.o-feedback-text,.o-aside,.o-english-text p) { color:#ffded2; }
html[data-theme="dark"] #ordid-app .o-progress { background:#172a43f5; color:#edf5ff; }
html[data-theme="dark"] #ordid-app .o-progress-label { color:#edf5ff; }
html[data-theme="dark"] #ordid-app .o-dot { background:#617899; }
html[data-theme="dark"] #ordid-app .o-dot.current { background:#9bc6ff; box-shadow:0 0 0 4px #70a8ff20; }
html[data-theme="dark"] #ordid-app .o-dot.done { background:#46c68e; }
html[data-theme="dark"] #ordid-app .o-message { background:linear-gradient(135deg,#203c32,#192f2a); color:#effbf3; border-color:#6b977c; box-shadow:0 8px 28px #10282c28,inset 0 1px 0 #ffffff10; }
html[data-theme="dark"] #ordid-app .o-phrase { color:#effbf3; }
html[data-theme="dark"] #ordid-app .o-speaker { color:#aed2bd; }
html[data-theme="dark"] #ordid-app :is(.o-score,.o-score strong) { color:#a0c6ff; }
html[data-theme="dark"] #ordid-app .o-review-row { background:#1b304b; border-color:#425c7b; }
html[data-theme="dark"] #ordid-app .o-review-phrase { color:#eff5ff; }
html[data-theme="dark"] #ordid-app .o-review-mark { color:#9be6c0; }
html[data-theme="dark"] #ordid-app .o-review-mark.missed { color:#ffc2ae; }
html[data-theme="dark"] #ordid-app .o-completed-pill { background:#172a43f5; color:#edf5ff; }
html[data-theme="dark"] #ordid-app .o-story-ending { background:#103e36; border-color:#3b997b; }
html[data-theme="dark"] #ordid-app .o-story-ending > p { color:#d9f6e9; }
html[data-theme="dark"] #ordid-app :is(button,select,summary,#o-question,#o-feedback-title,#o-result-heading,#o-home-heading,#o-packs-heading):focus-visible { outline:3px solid #a3c9ff; outline-offset:4px; }