@font-face{font-family:'Tuti UI';src:url('/fonts/Garet-Bold.woff2') format('woff2');font-weight:700 950;font-display:swap}
@font-face{font-family:'Tuti UI';src:url('/fonts/Garet-Regular.woff2') format('woff2');font-weight:400 600;font-display:swap}
body.tuti-ocean{--ink:#073977;--ink-soft:#175d7b;background:#078bc7;font-family:'Tuti UI',sans-serif}
.tuti-ocean .newtoon-game-nav{background:#0577a8!important;border:0!important;padding:7px 18px!important;min-height:38px;gap:12px!important}
.tuti-ocean .newtoon-game-nav a{color:white!important;background:transparent!important;padding:3px 10px!important;font-size:13px!important;border-radius:20px!important;border:1px solid #d1fcff70!important}
.tuti-ocean .game-shell,.tuti-ocean .game-shell.phase-intro{background:#079ecd url('./assets/reef.png') center bottom/cover no-repeat;background-attachment:fixed;min-height:calc(100svh - 38px);font-family:'Tuti UI',sans-serif}
.tuti-ocean .topbar,.tuti-ocean .game-shell.phase-intro .topbar{width:min(1420px,calc(100% - 32px));padding:14px 0 8px;gap:12px}
.tuti-ocean .brand-logo{width:clamp(150px,21vw,285px);height:auto}
.tuti-ocean .round-icon-button,.tuti-ocean .game-shell.phase-intro .round-icon-button{width:48px;height:48px;background:#0084bfb8;box-shadow:none;border:2px solid #aff5ff}
.tuti-ocean .play-stage,.tuti-ocean .game-shell.phase-intro .play-stage,.tuti-ocean .game-shell.capture-active .play-stage{display:grid;align-items:start;width:min(1320px,calc(100% - 28px));min-height:0;padding:8px 0 50px;margin:0 auto}
.tuti-ocean .game-card,.tuti-ocean .game-shell.phase-intro .intro-card,.tuti-ocean .game-shell.capture-active .capture-layout-card{isolation:isolate;justify-self:center;width:min(1050px,100%);min-height:0;background:transparent url('./assets/panel-main.png') center/100% 100% no-repeat;border:0;border-radius:40px;padding:34px 48px 42px;box-shadow:0 18px 40px #00669730;backdrop-filter:none;overflow:visible;position:relative}
.tuti-ocean .stage-content{justify-content:flex-start;padding:14px 0 0;gap:4px;min-width:0}
.tuti-ocean .game-card h1,.tuti-ocean .game-shell.phase-intro .intro-card h1,.tuti-ocean .game-shell.capture-active .prompt-row h1{font-family:'Tuti UI',sans-serif;font-weight:950;letter-spacing:-.035em;color:#073977;font-size:clamp(27px,3.4vw,46px);line-height:1.14;text-shadow:none}
.tuti-ocean .stage-instruction,.tuti-ocean .intro-lead,.tuti-ocean .game-shell.phase-intro .intro-lead{color:#175d7b;font-size:clamp(15px,1.7vw,20px);line-height:1.45;font-weight:700;margin:8px auto 14px;max-width:800px}
.tuti-ocean .journey-progress{justify-content:center;align-items:center;flex-direction:row;gap:24px;align-self:center;width:fit-content;max-width:100%;margin:-16px auto 4px;padding:8px 24px;background:linear-gradient(#f6ffff,#a4f4ff);border:2px solid #e4ffff;border-radius:999px;color:#073977;font-size:16px;box-shadow:0 4px 0 #67d2e4}
.tuti-ocean .journey-progress>.pearl-progress{gap:5px}
.tuti-ocean .journey-progress>.pearl-progress i{width:40px;height:37px;border:0;border-radius:0;background:transparent url('./assets/shell.png') center/145% auto no-repeat;box-shadow:none;filter:hue-rotate(180deg) saturate(.55);opacity:.48;transition:filter .25s,opacity .25s,transform .25s}
.tuti-ocean .journey-progress>.pearl-progress i.current,.tuti-ocean .journey-progress>.pearl-progress i.done{filter:none;opacity:1}
.tuti-ocean .journey-progress>.pearl-progress i.current{transform:scale(1.1);filter:drop-shadow(0 2px 3px #b53d6a44)}
.tuti-ocean .capture-progress-row{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:4px}
.tuti-ocean .capture-progress-row .journey-progress{flex-direction:row;margin:0;color:#073977;font-size:15px}
.tuti-ocean .capture-counter{align-items:center!important;color:#175d7b;font-family:'Tuti UI',sans-serif}
.tuti-ocean .video-layout{width:min(850px,100%);gap:16px}
/* The official player stays fully visible; all decoration is outside its frame. */
.tuti-ocean .youtube-player,.tuti-ocean .synced-player{width:min(660px,100%);margin:0 auto;aspect-ratio:16/9;min-width:200px;min-height:200px;border:4px solid white;border-radius:28px;box-shadow:0 8px 0 #4eb6d33b,0 12px 25px #0663972b;position:relative;z-index:6}
.tuti-ocean .youtube-player iframe{min-width:200px;min-height:200px;width:100%;height:100%}
.tuti-ocean .video-action-panel,.tuti-ocean .video-action-panel.has-cue{isolation:isolate;position:relative;min-height:115px;background:transparent;border:0;box-shadow:none;border-radius:28px;padding:20px 28px 24px;gap:4px}
.tuti-ocean .video-action-panel:before{content:'';position:absolute;z-index:-1;inset:0;background:url('./assets/panel-turn.png') center/106% 137% no-repeat;border-radius:28px;pointer-events:none}
.tuti-ocean .video-action-panel h2{font-family:'Tuti UI',sans-serif;font-size:clamp(22px,2.5vw,32px);font-weight:950;color:#073977;margin:4px 0 10px}
.tuti-ocean .cue-source{background:linear-gradient(#e4ffff,#63dfee);color:#06498a;border-bottom:3px solid #39bfd8;border-radius:999px;padding:4px 24px;font-size:15px;font-weight:950;text-transform:uppercase}
.tuti-ocean .cue-options{gap:22px;margin:6px 0 8px}
.tuti-ocean .cue-option{background:linear-gradient(#fff,#def8ff);border:3px solid #b3e6fa;border-radius:23px;min-width:100px;min-height:90px;color:#084359;box-shadow:0 6px 0 #a5d9eb;font-size:64px;cursor:pointer;transition:transform .15s}
.tuti-ocean .cue-option.is-selected,.tuti-ocean .visible-word-card.is-selected,.tuti-ocean .story-choice.is-selected{background:linear-gradient(#ceffea,#88f5df);border-color:#18cfb3;box-shadow:0 6px 0 #27bda9,0 0 16px #42e6bc55;color:#053f48}
.tuti-ocean .primary-button,.tuti-ocean .game-shell.phase-intro .primary-button{font-family:'Tuti UI',sans-serif;font-weight:950;background:linear-gradient(#ff7892,#ff3d66);border:2px solid #ff9eaf;color:#fff;border-radius:999px;min-height:54px;padding:12px 27px;font-size:clamp(16px,1.8vw,22px);box-shadow:0 6px 0 #c9234c,0 12px 20px #c9234c25}
.tuti-ocean .secondary-button,.tuti-ocean .listen-button{font-family:'Tuti UI',sans-serif;color:#075587;background:#f8ffff;border-color:#64cede;font-weight:700}
.tuti-ocean .feedback{font-family:'Tuti UI',sans-serif;font-size:clamp(15px,1.8vw,21px);line-height:1.4;margin:7px 0;min-height:26px}.tuti-ocean .feedback.right{color:#00794f}.tuti-ocean .feedback.try-again{color:#a63440}
.tuti-ocean .video-skip-button{font-family:'Tuti UI',sans-serif;font-weight:950;color:#073977;min-height:44px;padding:8px 14px;margin-top:14px}
.tuti-ocean .video-privacy-note{font-size:12px;color:#245c78;margin-top:12px}
.tuti-ocean .tuti-character,.tuti-ocean .game-shell.phase-intro .tuti-character,.tuti-ocean .game-shell.capture-active .tuti-character{z-index:2;width:clamp(180px,22vw,310px);right:-18px;bottom:0;pointer-events:none}
.tuti-ocean .game-shell.phase-intro .intro-card{padding:50px 54px 55px;width:min(950px,100%);min-height:440px}
.tuti-ocean .intro-vowels{margin:22px auto 18px;gap:16px}.tuti-ocean .intro-vowel-bubble{width:clamp(48px,10vw,90px);height:clamp(48px,10vw,90px);font-size:clamp(30px,5vw,56px)}
.tuti-ocean .intro-card .primary-button{margin-top:16px}
.tuti-ocean .video-choice-stage{min-height:310px;justify-content:center;padding-block:22px}
.tuti-ocean .video-choice-panel{margin:18px auto 6px}
.tuti-ocean .game-shell.capture-active .capture-stage{padding-top:18px;min-height:325px;justify-content:center}
.tuti-ocean .prompt-row{margin:12px 0 4px}.tuti-ocean .five-bubbles{flex-wrap:wrap;gap:12px;min-height:160px}
.tuti-ocean .visible-word-cards,.tuti-ocean .story-choice-row{margin-block:18px}
.tuti-ocean .trace-area{max-width:100%}.tuti-ocean .complete-card{min-height:420px}
.tuti-ocean button:focus-visible,.tuti-ocean a:focus-visible{outline:4px solid #062c73;outline-offset:4px}
@media(max-width:800px){
 .tuti-ocean .topbar,.tuti-ocean .game-shell.phase-intro .topbar{padding:10px 0 4px}
 .tuti-ocean .game-card,.tuti-ocean .game-shell.phase-intro .intro-card,.tuti-ocean .game-shell.capture-active .capture-layout-card{width:100%;padding:27px 24px 34px;border-radius:28px;min-height:0}
 .tuti-ocean .game-card{background-size:100% 100%}
 .tuti-ocean .play-stage,.tuti-ocean .game-shell.phase-intro .play-stage,.tuti-ocean .game-shell.capture-active .play-stage{width:calc(100% - 20px);padding-bottom:30px}
 .tuti-ocean .tuti-character,.tuti-ocean .game-shell.phase-intro .tuti-character,.tuti-ocean .game-shell.capture-active .tuti-character{display:none}
 .tuti-ocean .journey-progress{font-size:14px;gap:12px;padding:7px 16px;margin:-12px auto 4px}
 .tuti-ocean .journey-progress>.pearl-progress i{width:32px;height:31px}
 .tuti-ocean .video-action-panel{padding:18px 18px 22px}
}
@media(max-width:480px){
 .tuti-ocean .game-card,.tuti-ocean .game-shell.phase-intro .intro-card,.tuti-ocean .game-shell.capture-active .capture-layout-card{padding:24px 16px 28px;background-image:none;background-color:#dffafff5;border:3px solid #efffff;box-shadow:inset 0 0 15px #48d1e65c,0 8px 0 #069bc36e;border-radius:28px}
 .tuti-ocean .journey-progress{gap:8px;font-size:12px;padding:6px 10px;white-space:nowrap;max-width:100%}
 .tuti-ocean .journey-progress>.pearl-progress{gap:2px}.tuti-ocean .journey-progress>.pearl-progress i{width:27px;height:26px}
 .tuti-ocean .primary-button,.tuti-ocean .secondary-button{width:100%;padding:12px 16px;min-width:0}
 .tuti-ocean .cue-option{min-width:78px;min-height:76px;font-size:48px}
 .tuti-ocean .stage-instruction{margin-bottom:10px}
 .tuti-ocean .youtube-player,.tuti-ocean .synced-player{border-width:3px;border-radius:18px}
 .tuti-ocean .video-action-panel{padding:17px 12px 20px}
 .tuti-ocean .five-bubbles{gap:10px}.tuti-ocean .letter-bubble{width:80px;height:80px;font-size:52px}
 .tuti-ocean .brand-logo{width:170px}.tuti-ocean .game-shell{background-attachment:scroll}
 .tuti-ocean .capture-progress-row .journey-progress{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.tuti-ocean *, .tuti-ocean *:before,.tuti-ocean *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* On shorter landscape screens the turn stays beside the video, within reach. */
@media(min-width:1000px) and (max-height:820px){
 .tuti-ocean .topbar{padding-top:8px;padding-bottom:0}.tuti-ocean .brand-logo{width:205px}
 .tuti-ocean .game-card{width:min(1120px,100%);padding:28px 38px 34px}
 .tuti-ocean .journey-progress{padding:5px 20px;margin-top:-14px}
 .tuti-ocean .journey-progress>.pearl-progress i{width:32px;height:30px}
 .tuti-ocean .game-card h1{font-size:34px}
 .tuti-ocean .video-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:20px;align-items:center;width:100%;margin-top:6px}
 .tuti-ocean .youtube-player,.tuti-ocean .synced-player{width:100%}
 .tuti-ocean .video-action-panel{min-height:245px;padding:24px 18px}
 .tuti-ocean .video-action-panel:before{background-size:106% 130%}
 .tuti-ocean .video-action-panel h2{font-size:25px}
 .tuti-ocean .cue-options{gap:15px}
 .tuti-ocean .cue-option{min-width:78px;min-height:76px;font-size:48px}
 .tuti-ocean .video-action-panel .primary-button{font-size:16px;padding:10px 16px}
 .tuti-ocean .video-action-panel .feedback{font-size:16px}
}
@media(min-width:801px){
 .tuti-ocean .tuti-character,.tuti-ocean .game-shell.phase-intro .tuti-character,.tuti-ocean .game-shell.capture-active .tuti-character{z-index:7;width:clamp(170px,20vw,260px);right:-18px;bottom:-40px}
}