/* Verbivelle colour system: ocean blue identity, white study surfaces,
   yellow actions. Orange belongs to Vivi; green/coral communicate feedback. */
:root{
 color-scheme:light;background:#f5f8ff;color:#102e50;
 --brand-canvas:#f5f8ff;--brand-paper:#fff;--brand-ink:#102e50;--brand-muted:#516783;
 --brand-blue:#1558d6;--brand-blue-deep:#0b3584;--brand-blue-soft:#eaf1ff;--brand-water:#d8e9ff;
 --brand-on-blue:#fff;--brand-on-blue-muted:#ddebff;
 --brand-yellow:#ffde59;--brand-yellow-hover:#ffe789;--brand-yellow-shadow:#b87d0e;
 --brand-line:#bfcee5;--brand-line-soft:#dce5f3;--brand-shadow:#12377910;
 --brand-green:#177147;--brand-green-soft:#e9f8ef;--brand-coral:#ad3e32;--brand-coral-soft:#fff0ec;--brand-disabled:#edf1f7;
}
body.daylight{--bg:var(--brand-canvas);--panel:var(--brand-paper);--line:var(--brand-line);--ink:var(--brand-ink);--muted:var(--brand-muted);--mint:var(--brand-blue);--gold:var(--brand-blue);--deep:var(--brand-ink);--action:var(--brand-yellow);--selection:var(--brand-blue);--success:var(--brand-green);--practice:var(--brand-coral);--paper:var(--brand-paper);--paper-ink:var(--brand-ink);--paper-muted:var(--brand-muted);--night:var(--brand-canvas);--aqua:var(--brand-blue);--sun:var(--brand-yellow);--yellow:var(--brand-yellow);--purple:var(--brand-blue);background:var(--brand-canvas);color:var(--brand-ink)}
body.daylight p{color:var(--brand-muted)}
body.daylight :is(h1,h2,h3){color:var(--brand-ink)}
body.daylight :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--brand-blue);outline-offset:4px}
body.daylight :is(.primary,.button.gold){background:var(--brand-yellow);color:var(--brand-ink);border:1px solid var(--brand-yellow);box-shadow:0 4px 0 var(--brand-yellow-shadow);min-height:52px}
body.daylight :is(.primary,.button.gold):hover{background:var(--brand-yellow-hover);border-color:var(--brand-yellow-hover);box-shadow:0 5px 0 var(--brand-yellow-shadow)}
body.daylight :is(.primary,.button.gold):active{transform:translateY(3px);box-shadow:0 1px 0 var(--brand-yellow-shadow)}
body.daylight :is(.secondary,.button.secondary){background:var(--brand-paper);color:var(--brand-blue);border:1px solid var(--brand-line);box-shadow:0 3px 0 var(--brand-line-soft)}
body.daylight :is(.secondary,.button.secondary):not(:disabled):hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight :is(.primary,.button.gold,.secondary):disabled{background:var(--brand-disabled);border-color:var(--brand-line);color:var(--brand-muted);box-shadow:none;transform:none;opacity:1}
body.daylight :is(.text-link,.link-button,.worlds-link,.replay-link,.verb-open,.plain-button,.eyebrow,.greeting){color:var(--brand-blue)}
body.daylight :is(.small-note,.support-copy,.lesson-step,.round-meta,.play-top,.counting-range,.number-notes,.field-hint,.support-note,.step-number,.loading){color:var(--brand-muted)}
body.daylight :is(input,select,textarea){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line)}
body.daylight :is(input,textarea)::placeholder{color:var(--brand-muted)}
/* Consistent blue navigation across all worlds. */
body.daylight :is(.vw-header,.entry-header){background:var(--brand-blue);border-bottom:1px solid #ffffff30;max-width:none;padding-left:max(24px,calc((100% - 1170px)/2));padding-right:max(24px,calc((100% - 1170px)/2))}
body.daylight :is(.vw-brand,.wordmark,.vw-header nav a){color:var(--brand-on-blue)}
body.daylight :is(.vw-brand small,.wordmark span){color:var(--brand-on-blue-muted)}
body.daylight .vw-header nav a:hover{color:var(--brand-yellow)}
body.daylight :is(.vw-header,.entry-header) :is(a,button):focus-visible{outline-color:var(--brand-yellow)}
body.daylight .header-login{background:transparent;color:var(--brand-on-blue);border:1px solid #ffffff80}
body.daylight .header-login:hover{background:var(--brand-blue-deep)}
body.daylight .xp-pill{background:var(--brand-yellow);color:var(--brand-ink);border-color:var(--brand-yellow)}
body.daylight :is(.vw-footer,.dash-footer){color:var(--brand-muted);border-color:var(--brand-line-soft)}
body.daylight :is(.vw-footer,.dash-footer) a{color:var(--brand-blue)}
/* Welcome: one blue field, Vivi and one clear yellow action. */
body.daylight:has(.landing),body.daylight #entry-main:has(.landing){background:var(--brand-blue)}
body.daylight .landing{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);gap:0 68px;align-content:center;justify-items:start;text-align:left;max-width:1120px;padding:40px 32px 70px;min-height:calc(100dvh - 100px)}
body.daylight .landing .mascot-stage{grid-column:1;grid-row:1/5;background:#ffffff16;border:1px solid #ffffff26;border-radius:50%;width:100%;max-width:370px;padding:20px;margin:0;align-self:center}
body.daylight .landing>:not(.mascot-stage){grid-column:2}
body.daylight .landing h1{color:var(--brand-on-blue);font-size:clamp(2.25rem,4.4vw,3.7rem);max-width:560px;line-height:1.12}
body.daylight .landing h1 span{color:var(--brand-yellow)}
body.daylight .landing>p{margin:20px 0 26px;color:var(--brand-on-blue-muted);max-width:470px;font-size:1.0625rem}
body.daylight .landing .small-note{margin-top:25px;color:var(--brand-on-blue-muted)}
body.daylight .landing .secondary{background:transparent;color:var(--brand-on-blue);border-color:#ffffff80;box-shadow:none}
body.daylight .landing .secondary:hover{background:var(--brand-blue-deep);border-color:var(--brand-on-blue)}
body.daylight .landing :is(a,button):focus-visible{outline-color:var(--brand-on-blue)}
body.daylight .mascot{filter:drop-shadow(0 14px 14px #0b35842b)}
body.daylight .hello-tag{background:var(--brand-paper);color:var(--brand-blue);border:1px solid var(--brand-paper);box-shadow:0 4px 0 #0b358430}
/* Registration and the learner's path. */
body.daylight .intro .speech{background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line);box-shadow:0 5px 0 var(--brand-line-soft)}
body.daylight .speech b{color:var(--brand-blue)}
body.daylight :is(.intro>p,.question-head p,.account-screen>p,.dash-welcome p){color:var(--brand-muted)}
body.daylight .footer-controls{background:var(--brand-paper);border-color:var(--brand-line-soft)}
body.daylight .back-button{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .back-button:hover{background:var(--brand-blue-soft)}
body.daylight :is(.setup-progress,.play-progress){background:var(--brand-line-soft)}
body.daylight :is(.setup-progress span,.play-progress>span,.teaching-surface .play-progress>span){background:var(--brand-blue);box-shadow:inset 0 -3px 0 var(--brand-blue-deep)}
body.daylight .option{background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line);box-shadow:0 3px 0 var(--brand-line-soft)}
body.daylight .option:hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight .option.selected{background:var(--brand-blue-soft);border-color:var(--brand-blue);box-shadow:0 3px 0 var(--brand-blue)}
body.daylight :is(.option-icon,.reaction){color:var(--brand-blue)}
body.daylight .option small{color:var(--brand-muted)}
body.daylight .select-mark{border-color:var(--brand-line);color:var(--brand-paper)}
body.daylight .selected .select-mark{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-on-blue)}
body.daylight :is(.plan-preview,.plan-card,.path-panel){background:var(--brand-paper);border-color:var(--brand-line);box-shadow:0 8px 24px var(--brand-shadow)}
body.daylight :is(.plan-preview span,.plan-card p,.path-title span,.step-copy p){color:var(--brand-muted)}
body.daylight :is(.path-title,.path-step+.path-step){border-color:var(--brand-line-soft)}
body.daylight .step-badge{background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .path-step.current .step-badge{background:var(--brand-yellow);border-color:var(--brand-yellow-shadow);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand-yellow-shadow)}
body.daylight .path-step.done .step-badge{background:var(--brand-green-soft);border-color:var(--brand-green);color:var(--brand-green)}
body.daylight :is(.path-step.locked,.path-step.locked p){color:var(--brand-muted)}
body.daylight .goal-number{color:var(--brand-blue)}
body.daylight .goal-number span{color:var(--brand-muted)}
body.daylight .explore-links a{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .explore-links a:hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight .verb-feature{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-on-blue);box-shadow:0 5px 0 var(--brand-blue-deep)}
body.daylight .verb-feature :is(small,p){color:var(--brand-on-blue-muted)}
body.daylight .verb-feature b{background:var(--brand-yellow);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand-yellow-shadow)}
body.daylight .complete-banner{background:var(--brand-green-soft);color:var(--brand-green)}
body.daylight .error{background:var(--brand-coral-soft);border-color:var(--brand-coral);color:var(--brand-coral)}
/* The map is blue; white stops let the current lesson stand out. */
body.daylight :is(.page-heading,.map-heading,.number-hero){background:var(--brand-blue);border:1px solid var(--brand-blue);border-radius:24px;padding:26px 30px}
body.daylight :is(.page-heading,.map-heading,.number-hero) :is(h1,h2){color:var(--brand-on-blue)}
body.daylight :is(.page-heading,.map-heading,.number-hero) :is(p,.counting-range,.eyebrow,.map-progress,.map-progress b span){color:var(--brand-on-blue-muted)}
body.daylight :is(.number-hero h1 em,.map-heading .map-progress b){color:var(--brand-yellow)}
body.daylight :is(.page-heading,.map-heading,.number-hero) :is(a,button):focus-visible{outline-color:var(--brand-on-blue)}
body.daylight .map-heading{margin-bottom:20px}
body.daylight .map-heading .eyebrow{margin-top:0}
body.daylight :is(.world-card,.verb-card,.utility-card){background:var(--brand-paper);border-color:var(--brand-line);box-shadow:0 5px 18px var(--brand-shadow)}
body.daylight .world-card.featured{border-color:var(--brand-blue);box-shadow:0 5px 0 var(--brand-blue)}
body.daylight :is(.world-meta b,.world-card.featured .world-meta b){color:var(--brand-blue)}
body.daylight .world-art{border-bottom:1px solid var(--brand-line-soft)}
body.daylight .feature-tag{background:var(--brand-paper);color:var(--brand-blue);border:1px solid var(--brand-line)}
body.daylight .featured .feature-tag{background:var(--brand-yellow);color:var(--brand-ink);border-color:var(--brand-yellow)}
body.daylight .number-art{background:var(--brand-blue)}
body.daylight .map-number-tiles>span{background:var(--brand-paper);border-color:var(--brand-paper);color:var(--brand-blue);box-shadow:0 5px 0 var(--brand-blue-deep)}
body.daylight .map-number-tiles>span:nth-child(2){background:var(--brand-yellow);border-color:var(--brand-yellow);color:var(--brand-ink)}
body.daylight .map-number-tiles>span:nth-child(3){background:var(--brand-water);border-color:var(--brand-water);color:var(--brand-ink)}
body.daylight .map-number-tiles small{color:inherit}
body.daylight .little-wave{color:var(--brand-blue)}
body.daylight .guide-strip{background:var(--brand-blue-soft);border-color:var(--brand-line);box-shadow:none}
body.daylight .guide-strip p{color:var(--brand-muted)}
body.daylight .guide-strip p b{color:var(--brand-ink)}
body.daylight :is(.foundation-node,.number-node){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line);box-shadow:0 3px 0 var(--brand-line-soft)}
body.daylight :is(.foundation-node .lesson-icon,.number-badge){background:var(--brand-blue-soft);color:var(--brand-blue)}
body.daylight .foundation-node small{color:var(--brand-blue)}
body.daylight :is(.foundation-node>span:nth-child(2)>span,.number-node small,.foundation-node .lesson-state,.number-node .node-state){color:var(--brand-muted)}
body.daylight :is(.foundation-node.current,.number-node.current){background:var(--brand-blue);color:var(--brand-on-blue);border-color:var(--brand-blue);box-shadow:0 4px 0 var(--brand-blue-deep)}
body.daylight :is(.foundation-node.current,.number-node.current) small,body.daylight .foundation-node.current>span:nth-child(2)>span{color:var(--brand-on-blue-muted)}
body.daylight :is(.foundation-node.current .lesson-icon,.number-node.current .number-badge){background:var(--brand-yellow);color:var(--brand-ink)}
body.daylight :is(.foundation-node.current .lesson-state,.number-node.current .node-state){color:var(--brand-yellow)}
body.daylight :is(.foundation-node.complete .lesson-state,.number-node.complete .node-state){color:var(--brand-green)}
body.daylight :is(.foundation-node.complete,.number-node.complete){border-color:var(--brand-green)}
body.daylight :is(.foundation-node.waiting,.number-node:disabled){opacity:1;background:var(--brand-disabled);border-color:var(--brand-line-soft);color:var(--brand-muted);box-shadow:none}
body.daylight .later-routes{border-color:var(--brand-line)}
body.daylight .later-routes summary{color:var(--brand-blue)}
body.daylight .atlas{border-color:var(--brand-blue);box-shadow:0 8px 26px var(--brand-shadow)}
body.daylight .region{background:var(--brand-paper);border-color:var(--brand-line);box-shadow:0 8px 22px var(--brand-shadow)}
body.daylight .region-title small{color:var(--brand-blue)}
body.daylight .route{background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight .route:hover{background:var(--brand-water);border-color:var(--brand-blue)}
body.daylight .route-number{background:var(--brand-blue);color:var(--brand-on-blue)}
body.daylight .route-arrow{color:var(--brand-blue)}
body.daylight .stars{color:var(--brand-muted)}
body.daylight .stars .won{color:#8d6200;text-shadow:none}
body.daylight .utility-card>b{color:var(--brand-blue)}
body.daylight .example-box{background:var(--brand-blue-soft);color:var(--brand-ink);border-color:var(--brand-blue)}
body.daylight .example-box>span{color:var(--brand-muted)}
body.daylight .selected-verb{background:var(--brand-blue-soft);color:var(--brand-ink)}
body.daylight .mode-card{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight .mode-card>span{background:var(--brand-blue-soft);color:var(--brand-blue)}
body.daylight .mode-card small{color:var(--brand-muted)}
body.daylight .mode-card.selected{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight .ready-vocabulary{background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight .ready-vocabulary b{color:var(--brand-blue)}
body.daylight .verb-card:hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight .level-tag{background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-blue)}
/* White teaching cards, blue pattern emphasis, text plus colour for feedback. */
body.daylight :is(table,.person-row,.lesson-examples>div){background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight :is(th,td){border-color:var(--brand-line-soft)}
body.daylight :is(th,td:first-child){color:var(--brand-muted)}
body.daylight :is(.audio-button,.hint-button){background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .teaching-surface{background:var(--brand-paper);border-color:var(--brand-line);box-shadow:0 8px 26px var(--brand-shadow)}
body.daylight .teaching-surface :is(.lesson-examples>div,.person-row){background:var(--brand-blue-soft);border-color:var(--brand-line)}
body.daylight .teaching-surface .person-row:hover{background:var(--brand-water);border-color:var(--brand-blue)}
body.daylight .teaching-surface :is(.lesson-examples b,.person-pronoun,.spoken-form,.lesson-explanation){color:var(--brand-ink)}
body.daylight .teaching-surface :is(.lesson-examples span,.person-pronoun small,.spoken-form small){color:var(--brand-muted)}
body.daylight .teaching-surface :is(.spoken-form strong,.person-audio,.eyebrow){color:var(--brand-blue)}
body.daylight :is(.teaching-surface .lesson-note,.lesson-note){background:var(--brand-blue-soft);border-color:var(--brand-blue);color:var(--brand-ink)}
body.daylight .exit-button{color:var(--brand-muted)}
body.daylight .play-panel .question-card{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-ink);box-shadow:0 8px 25px var(--brand-shadow)}
body.daylight .play-panel .question-card h2{color:var(--brand-ink)}
body.daylight .play-panel .question-card p{color:var(--brand-muted)}
body.daylight .play-panel .verb-chip{background:var(--brand-blue-soft);color:var(--brand-blue)}
body.daylight .play-panel .meaning-toggle{color:var(--brand-blue);border-color:var(--brand-blue)}
body.daylight :is(.answer-choice,.number-answer){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line);box-shadow:0 3px 0 var(--brand-line-soft)}
body.daylight :is(.answer-choice,.number-answer):not(:disabled):hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight :is(.answer-choice.selected,.number-answer.selected){background:var(--brand-blue-soft);border-color:var(--brand-blue);box-shadow:0 3px 0 var(--brand-blue);color:var(--brand-ink)}
body.daylight :is(.answer-number,.number-answer>span:first-child){background:var(--brand-disabled);border-color:var(--brand-line);color:var(--brand-muted)}
body.daylight :is(.answer-choice.correct,.number-answer.correct,.choice.correct){background:var(--brand-green-soft);border-color:var(--brand-green);box-shadow:0 3px 0 var(--brand-green);color:var(--brand-green)}
body.daylight :is(.answer-choice.incorrect,.number-answer.wrong,.choice.wrong){background:var(--brand-coral-soft);border-color:var(--brand-coral);box-shadow:0 3px 0 var(--brand-coral);color:var(--brand-coral)}
body.daylight .number-answer.selected .choice-status{color:var(--brand-blue)}
body.daylight .number-answer.correct .choice-status{color:var(--brand-green)}
body.daylight .number-answer.wrong .choice-status{color:var(--brand-coral)}
body.daylight :is(.feedback,.number-feedback){background:var(--brand-green-soft);border-color:var(--brand-green);color:var(--brand-green)}
body.daylight :is(.feedback.try-again,.feedback.wrong,.number-feedback.retry){background:var(--brand-coral-soft);border-color:var(--brand-coral);color:var(--brand-coral)}
body.daylight :is(.feedback p,.number-feedback p,.feedback .text-link,.feedback .small-note){color:inherit}
body.daylight :is(.result-stats,.result-stats>div){background:var(--brand-paper);border-color:var(--brand-line)}
body.daylight .result-stats b{color:var(--brand-blue)}
body.daylight .result-stats span{color:var(--brand-muted)}
/* Counting uses the same semantic palette as the verb journey. */
body.daylight .number-region,body.daylight .number-region:nth-child(2){background:var(--brand-paper);border-color:var(--brand-line);border-top:5px solid var(--brand-blue)}
body.daylight .number-region-heading>span{background:var(--brand-blue-soft)}
body.daylight .number-region-heading>small{color:var(--brand-muted)}
body.daylight .number-tools .button{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-blue);box-shadow:none}
body.daylight .number-tools .button:hover{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight :is(.number-tile,.number-learning .number-tile){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line);box-shadow:0 3px 0 var(--brand-line-soft)}
body.daylight :is(.number-tile:hover,.number-learning .number-tile:hover){background:var(--brand-blue-soft);border-color:var(--brand-blue)}
body.daylight .number-tile>b{color:var(--brand-blue)}
body.daylight .number-tile .french-number{color:var(--brand-ink)}
body.daylight .number-tile .tile-audio{color:var(--brand-blue)}
body.daylight .number-learning .learn-controls{background:linear-gradient(0deg,#fff 88%,#ffffff00)}
body.daylight :is(.number-equation,.number-learning .number-equation){background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .count-shells .no-shells{color:var(--brand-muted)}
body.daylight .number-question .listen-number{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-on-blue);box-shadow:0 4px 0 var(--brand-blue-deep)}
body.daylight .number-question .number-listen-help{color:var(--brand-blue)}
body.daylight .number-error{color:var(--brand-coral)}
body.daylight .example-number{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight .builder-output{background:var(--brand-paper);border-color:var(--brand-line);box-shadow:0 8px 25px var(--brand-shadow)}
body.daylight .builder-digits{color:var(--brand-blue)}
body.daylight .builder-words{color:var(--brand-ink)}
body.daylight .place-group,body.daylight .place-group:nth-child(2),body.daylight .place-group:nth-child(3){background:var(--brand-blue-soft);border-color:var(--brand-line)}
body.daylight .place-group small{color:var(--brand-muted)}
body.daylight .place-group b{color:var(--brand-blue)}
body.daylight .number-review-row{background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight .number-review-row b{color:var(--brand-blue)}
body.daylight .number-bonus{border-color:var(--brand-line)}
/* Preserve the illustrated ocean; unify the controls and text panels. */
body.daylight.ocean-theme{background:var(--brand-water)}
body.daylight.ocean-theme .ocean-art{background:url('/photos/ocean-world.webp') center 43%/cover no-repeat}
body.daylight.ocean-theme .ocean-art:after{background:linear-gradient(180deg,#1558d618,transparent 70%)}
body.daylight.ocean-theme .ocean-header{background:var(--brand-blue);border:1px solid var(--brand-blue);border-radius:0 0 22px 22px;margin-bottom:15px}
body.daylight.ocean-theme .ocean-brand{color:var(--brand-on-blue);text-shadow:none}
body.daylight.ocean-theme .brand-mark{background:var(--brand-paper);color:var(--brand-blue)}
body.daylight.ocean-theme .ocean-header :is(a,button):focus-visible{outline-color:var(--brand-yellow)}
body.daylight.ocean-theme :is(.glass-button,.level-switch){background:var(--brand-paper);border-color:var(--brand-line);color:var(--brand-blue)}
body.daylight.ocean-theme .level-switch button{color:var(--brand-muted)}
body.daylight.ocean-theme .level-switch button.active{background:var(--brand-blue);color:var(--brand-on-blue)}
body.daylight.ocean-theme .home-copy{background:var(--brand-blue);color:var(--brand-on-blue);border:1px solid var(--brand-blue);border-radius:25px;padding:25px;text-shadow:none}
body.daylight.ocean-theme .home-copy h1{color:var(--brand-on-blue)}
body.daylight.ocean-theme .home-copy h1 span{color:var(--brand-yellow)}
body.daylight.ocean-theme .home-copy :is(p,.eyebrow){color:var(--brand-on-blue-muted)}
body.daylight.ocean-theme :is(.panel,.game-panel,.prompt-panel,.game-bottom,.mission-card,dialog){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line)}
body.daylight.ocean-theme .mission-card:disabled{background:var(--brand-disabled);color:var(--brand-muted)}
body.daylight.ocean-theme :is(.bubble,.token,.word-card){background:var(--brand-paper);color:var(--brand-ink);border-color:var(--brand-line)}
body.daylight.ocean-theme :is(.bubble.correct,.ocean-feedback.reward){background:var(--brand-green-soft);color:var(--brand-green);border-color:var(--brand-green)}
body.daylight.ocean-theme :is(.listen-button,.hint-button){background:var(--brand-blue-soft);color:var(--brand-blue);border-color:var(--brand-line)}
body.daylight.ocean-theme .ocean-feedback{background:var(--brand-coral-soft);color:var(--brand-coral);border-color:var(--brand-coral)}
body.daylight.ocean-theme .home-footer{background:var(--brand-paper);border-radius:15px;padding:12px;color:var(--brand-muted)}
/* Carry the identity into the existing practice hub. */
body.daylight:has(.shell)>header{background:var(--brand-blue);border-color:var(--brand-blue)}
body.daylight:has(.shell)>header .brand{color:var(--brand-on-blue)}
body.daylight:has(.shell)>header .brand small{color:var(--brand-on-blue-muted)}
body.daylight:has(.shell)>header .badge{background:var(--brand-yellow);color:var(--brand-ink)}
body.daylight:has(.shell)>header :is(a,button):focus-visible{outline-color:var(--brand-yellow)}
body.daylight .nav:hover,body.daylight .nav.active{background:var(--brand-blue-soft);color:var(--brand-blue)}
body.daylight .nav.active{box-shadow:inset 3px 0 var(--brand-blue)}
body.daylight .nav-group{color:var(--brand-muted)}
body.daylight .welcome-hero{background:var(--brand-blue-soft);border-color:var(--brand-line)}
body.daylight .welcome-hero::after{border-color:var(--brand-water)}
@media(max-width:760px){
 body.daylight .landing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;padding:26px 22px 42px;min-height:calc(100dvh - 95px)}
 body.daylight .landing .mascot-stage{width:210px;max-width:60vw;padding:12px;margin:0 auto 22px}
 body.daylight .landing h1{font-size:clamp(2rem,8vw,2.7rem)}
 body.daylight .landing>p{margin:18px 0 25px;font-size:1rem}
 body.daylight .landing .small-note{font-size:.875rem}
 body.daylight :is(.entry-header,.vw-header){padding-left:20px;padding-right:20px}
 body.daylight :is(.page-heading,.map-heading,.number-hero){padding:20px 18px;border-radius:20px}
 body.daylight .number-hero{grid-template-columns:minmax(0,1fr) 70px;gap:10px}
 body.daylight .number-scene img{width:70px;height:70px}
 body.daylight.ocean-theme .ocean-header{padding:16px}
 body.daylight.ocean-theme .home-copy{padding:20px}
}
@media(max-width:390px){body.daylight .number-hero{grid-template-columns:minmax(0,1fr) 54px;padding:18px 14px;gap:8px}body.daylight .number-scene img{width:54px;height:54px}body.daylight .number-hero h1{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){body.daylight .primary:hover{transform:none}}
/* One device-wide control for game effects; pronunciation has its own Listen controls. */
body.daylight header .game-sound-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;margin:0;padding:10px 13px;border:1px solid #fff;border-radius:14px;background:#fff;color:var(--brand-blue);font:inherit;font-size:.875rem;font-weight:700;line-height:1.3;white-space:nowrap;cursor:pointer;touch-action:manipulation}
body.daylight header .game-sound-toggle[aria-pressed="false"]{background:var(--brand-blue-soft);border-color:var(--brand-line);color:var(--brand-ink)}
body.daylight .vw-header{flex-wrap:wrap}
body.daylight .header-actions{flex-wrap:wrap}
@media(max-width:550px){body.daylight.ocean-theme .ocean-header{flex-wrap:wrap}body.daylight.ocean-theme .header-actions{width:100%;justify-content:flex-start}body.daylight header .game-sound-toggle{min-height:44px}}