@font-face{font-family:AquariumNunito;src:local('Nunito');font-display:swap}
:root{color-scheme:dark;--ink:#ecf9f9;--muted:#accdd2;--line:rgba(181,225,230,.18);--mint:#92e5bf;--navy:#082f3d;--panel:rgba(8,41,54,.9);font-family:AquariumNunito,'Avenir Next','Segoe UI',sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#072834;color:var(--ink)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b6f3da;outline-offset:3px}button{transition:background .18s,box-shadow .18s}button:hover:not(:disabled){filter:brightness(1.1)}a{color:inherit;text-decoration:none}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.app{min-height:100svh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;background:#092e3b;min-height:94px;border-bottom:1px solid var(--line);z-index:5}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:#1b535a;border:1px solid #3e7a78;border-radius:15px;color:#abedcc}.brand-mark svg{width:29px;height:29px}.brand span{font-size:9px;letter-spacing:2px;font-weight:700;color:#97b8bd}.brand h1{font-size:22px;margin:3px 0 0;letter-spacing:-.7px;white-space:nowrap}.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:transparent;flex-shrink:0}.home-link{border:0;color:#9ebbc2;width:28px}.header-divider{height:34px;width:1px;background:var(--line);margin:0 10px}.class-label select{max-width:180px;border:0;background:#143e4a;color:#f2fcff;padding:11px 29px 11px 13px;border-radius:10px;font-size:14px;font-weight:600}.live-pill{font-size:11px;color:#a5c6c9;white-space:nowrap;margin-left:4px}.live-pill i{display:inline-block;width:6px;height:6px;background:#98e6bf;border-radius:50%;margin-right:5px;box-shadow:0 0 10px #77ccbb}.header-actions{margin-left:auto;display:flex;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:12px 18px;border-radius:12px;border:1px solid var(--line);font-size:13px;font-weight:650;background:#184351}.button.primary{background:#a0eac8;border-color:#b0efce;color:#143e3f}.button.subtle{background:transparent}.button.glass{background:rgba(15,57,73,.62);border-color:#7ca8af}.button.danger{background:#582e3c;border-color:#95596a;color:#ffe0e6}.button.full{width:100%}.aquarium{flex:1;min-height:540px;height:calc(100svh - 121px);position:relative;isolation:isolate;overflow:hidden;background:#056a84 url('/assets/akvaryum/arka-planlar/mercan-resifi.jpg') center/cover no-repeat}.aquarium:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,40,57,.3),transparent 45%,rgba(1,28,43,.42))}.scene-heading{position:absolute;left:38px;top:32px;pointer-events:none}.eyebrow{font-size:9px;font-weight:750;letter-spacing:1.8px;color:#aed8d5}.scene-heading h2{font-size:29px;font-weight:550;letter-spacing:-1px;margin:9px 0;color:#fff}.scene-heading p{font-size:12px;color:#d0e8ec;margin:0}.scene-controls{position:absolute;left:38px;top:153px;display:flex;gap:9px;z-index:3}.round-button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#083f54a6;border:1px solid #abdae347;color:#e7faf8;backdrop-filter:blur(8px)}.student-panel{position:absolute;top:24px;right:24px;bottom:103px;width:340px;border:1px solid #9ecbd53b;border-radius:22px;display:flex;flex-direction:column;background:var(--panel);backdrop-filter:blur(22px);box-shadow:0 14px 45px #05273140;z-index:4;overflow:hidden}.panel-top{padding:24px 21px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-top .eyebrow{font-size:8px;letter-spacing:1.4px;color:#9fc7c8}.panel-top h2{font-size:19px;letter-spacing:-.5px;margin:8px 0 0;font-weight:600}.panel-top h2 span{font-size:11px;display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:#254c58;color:#bddcd6;margin-left:6px;vertical-align:middle}.add-student{background:#a0eac817;color:#a0eac8;border-color:#a0eac832;width:33px;height:33px}.class-progress{margin:0 21px 22px;padding:14px 14px 12px;border:1px solid #96c7be1f;border-radius:12px;background:#7399950b}.progress-copy{display:flex;justify-content:space-between;font-size:11px;color:#c2d9db}.progress-copy strong{font-weight:600;color:#c4efd8}.progress-track{height:5px;background:#305461;border-radius:20px;margin-top:11px;overflow:hidden}.progress-track span{display:block;height:100%;background:#9ae5c1;border-radius:20px;transition:width .5s}.panel-tabs{display:flex;margin:0 21px;border-bottom:1px solid var(--line)}.panel-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:#a6c6ce;padding:0 8px 12px;flex:1;font-size:12px}.panel-tabs button[aria-selected=true]{color:#b3edcf;border-color:#a2e5bd}.search-box{display:flex;align-items:center;gap:9px;margin:17px 21px 5px;color:#88aeb9}.search-box svg{width:16px;height:16px}.search-box input{border:0;background:transparent;color:white;padding:7px 0;width:100%;font-size:12px;outline-offset:1px}.search-box input::placeholder{color:#a8c8cc}.panel-content{overflow-y:auto;flex:1;padding:8px 13px 16px;scrollbar-width:thin;scrollbar-color:#426d74 transparent}.student-row{width:100%;display:flex;align-items:center;gap:10px;padding:13px 8px;background:transparent;border:0;border-bottom:1px solid #b9e7e512;text-align:left;border-radius:10px}.student-row:hover{background:#8ad4d00b}.student-thumb{width:56px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 5px #0003)}.student-info{flex:1;min-width:0}.student-info strong{display:block;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-info small{display:flex;align-items:center;gap:4px;font-size:10px;margin-top:5px;color:#b0c8ca}.mood-dot{width:5px;height:5px;border-radius:50%;background:#a1c6d0;display:inline-block}.mood-happy .mood-dot,.mood-ready .mood-dot{background:#a4eac1}.mood-sad .mood-dot{background:#efbc8e}.feed-count{font-size:10px;white-space:nowrap;padding:6px 8px;background:#a1dbc411;border-radius:8px;color:#c8e5d8}.row-arrow{font-size:16px;color:#6e969d;margin-left:2px}.panel-bottom{padding:15px 20px;border-top:1px solid var(--line);background:#082e3ba6;display:flex;align-items:center;gap:10px;font-size:10px;color:#a6c4c8}.panel-bottom svg{width:16px;height:16px;color:#a0debd}.panel-bottom strong{color:#daece7;font-weight:500}.panel-empty{text-align:center;padding:40px 15px 20px;color:#c2d9dc}.panel-empty>svg{width:42px;height:42px;color:#8ec1c0}.panel-empty h3{font-size:15px;color:#e7f6f6;font-weight:550}.panel-empty p{font-size:12px;line-height:1.8}.swim-area{position:absolute;left:20px;right:380px;top:195px;bottom:103px;overflow:hidden}.fish{position:absolute;left:0;top:0;width:var(--fish-size,120px);border:0;padding:5px;background:transparent;display:flex;align-items:center;flex-direction:column;will-change:transform;cursor:pointer;z-index:1}.fish:focus-visible{outline-offset:0;border-radius:20px}.fish-art{width:100%;aspect-ratio:1.5;object-fit:contain;filter:drop-shadow(0 6px 6px #032f4933);transition:filter 1s;pointer-events:none}.fish.mood-sad .fish-art{filter:saturate(.7) drop-shadow(0 4px 5px #00253740)}.fish.mood-resting{opacity:1}.fish-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;line-height:1.6;background:rgba(3,39,56,.68);padding:2px 10px;border:1px solid #b7e2e82e;border-radius:7px;backdrop-filter:blur(4px);box-shadow:0 3px 8px #053c4922;pointer-events:none}.fish-name small{font-size:9px;font-weight:400;margin-left:5px;color:#bcecd8}.fish .mood-symbol{position:absolute;top:1%;right:10%;font-size:20px;color:#d7ffe4;text-shadow:0 0 8px #78ecae;pointer-events:none}.fish.mood-sad .mood-symbol{font-size:17px;color:#f7d6ac;text-shadow:none;transform:rotate(180deg)}.no-names .fish-name{display:none}.welcome{position:absolute;top:40%;transform:translateY(-27%);left:7%;width:calc(90% - 370px);z-index:2;pointer-events:none}.welcome-tag{display:inline-block;font-size:9px;letter-spacing:1.8px;border-radius:20px;border:1px solid #d9fce152;padding:9px 12px;background:#134c5a69;color:#d0f4e4}.welcome h2{font-size:clamp(32px,3.6vw,59px);line-height:1.14;letter-spacing:-2px;font-weight:550;margin:21px 0 18px;text-shadow:0 3px 28px #002d5aaa}.welcome h2 em{font-style:normal;color:#c7f1d6}.welcome p{font-size:14px;line-height:1.9;color:#e0eff0;text-shadow:0 1px 9px #002d5a}.welcome-actions{display:flex;gap:10px;margin-top:25px;pointer-events:auto;flex-wrap:wrap}.welcome-footnote{display:block;font-size:10px;color:#c5e4e8;margin-top:23px;line-height:1.5}.scene-footer{position:absolute;bottom:27px;left:34px;right:30px;display:flex;align-items:center;gap:25px;z-index:3}.theme-chip{display:flex;align-items:center;gap:13px;border:1px solid #b8e2e74a;background:#073a4ebd;padding:12px 17px;border-radius:15px;backdrop-filter:blur(12px);min-width:206px;text-align:left}.theme-chip svg{width:22px;height:22px;color:#b5e9d5}.theme-chip small{display:block;font-size:7px;letter-spacing:1.5px;color:#b0ccd0}.theme-chip strong{display:block;font-size:12px;margin-top:4px;font-weight:500}.tiny-arrow{margin-left:auto;color:#b6d5da}.mood-legend{display:flex;gap:17px;padding:12px 18px;background:#05374a65;border:1px solid #95c7d121;border-radius:25px;font-size:10px;color:#dfedf0;backdrop-filter:blur(10px)}.mood-legend i{width:6px;height:6px;display:inline-block;border-radius:50%;margin-right:5px}.happy-dot{background:#a5e8bb}.calm-dot{background:#b5dbe9}.sad-dot{background:#e8bd91}.help-button{margin-left:auto;display:flex;gap:10px;align-items:center;background:none;border:0;font-size:11px;color:#deedf1}.help-button span{width:22px;height:22px;display:grid;place-items:center;border:1px solid #d7f1f173;border-radius:50%}.save-line{display:flex;justify-content:space-between;padding:8px 28px;font-size:9px;color:#8eb2bc;letter-spacing:.2px;gap:10px}.save-line span:last-child{color:#b4ced0}.storage-warning{padding:12px 22px;background:#634126;color:#fff1ca;font-size:13px;line-height:1.5}.demo-banner{padding:9px 20px;text-align:center;background:#36514c;color:#e5f9eb;font-size:12px}.demo-banner button{background:none;border:0;color:#d6ffad;text-decoration:underline;margin-left:10px}.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.bubble{position:absolute;bottom:-30px;width:var(--size);height:var(--size);border:1px solid #c1f6ff40;border-radius:50%;box-shadow:inset 1px 1px 2px #e1ffff30;animation:rise var(--duration) linear infinite;animation-delay:var(--delay);left:var(--left)}@keyframes rise{to{transform:translate3d(25px,calc(-1 * var(--bubble-rise,1000px)),0);opacity:0}}.no-motion .bubble{animation-play-state:paused}.panel-hidden .student-panel{display:none}.panel-hidden .swim-area{right:20px}.panel-hidden .welcome{width:80%}.panel-hidden .scene-controls{left:auto;right:30px;top:30px}.feeding-effects{position:absolute;inset:0;pointer-events:none;z-index:6}.feed-particle{position:absolute;width:7px;height:7px;background:#ffd893;border-radius:50%;box-shadow:0 0 8px #ffe0a2;animation:food 1.2s ease-out forwards}.feed-heart{position:absolute;font-size:30px;color:#c2ffd6;animation:heart 1.5s ease-out forwards;text-shadow:0 0 12px #5ce2a3}@keyframes food{to{transform:translateY(100px);opacity:0}}@keyframes heart{to{transform:translateY(-75px) scale(1.4);opacity:0}}
dialog{color-scheme:dark;color:var(--ink);background:#103a49;border:1px solid #81b6bd57;border-radius:24px;box-shadow:0 40px 150px #001721a8;padding:28px;width:min(730px,calc(100% - 30px));max-height:88svh;overflow:auto}dialog::backdrop{background:#032431b5;backdrop-filter:blur(8px)}.modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.modal-heading h2{font-size:26px;letter-spacing:-.8px;margin:8px 0 0;font-weight:550}.modal-heading .eyebrow{color:#9ee3d0}.modal-intro{font-size:13px;color:#b8d3d8;line-height:1.8;margin:0 0 20px}.field{display:grid;gap:8px;margin-bottom:16px;font-size:12px;color:#c3dedf}.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #618693;border-radius:10px;background:#0a2e3c;color:#f1fbf9;min-height:45px}.field textarea{min-height:130px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#90acb5}.field-hint{color:#9ec1c8;font-size:11px;line-height:1.6}.form-error{color:#ffcaad;font-size:12px;margin:12px 0;line-height:1.6}.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}.species-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:12px 0}.species-card{position:relative;border:1px solid #73949d66;background:#153e4c;border-radius:15px;padding:12px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px}.species-card:has(input:checked){border-color:#b2f0c7;background:#244f53;box-shadow:inset 0 0 0 1px #a0e7c0}.species-card input{position:absolute;top:10px;left:10px;accent-color:#a9eac4;width:15px;height:15px}.species-card img{width:100%;height:87px;object-fit:contain}.species-card strong{font-size:12px;font-weight:600}.species-card small{font-size:9px;line-height:1.6;color:#b2cdd1}.species-group{border:0;padding:0;margin:0}.species-group legend{font-size:12px;color:#b8d2d8;margin-bottom:6px}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.theme-card{background:#153e4c;border:1px solid #67899160;border-radius:15px;padding:0 0 15px;overflow:hidden;text-align:left}.theme-card img{width:100%;height:112px;object-fit:cover}.theme-card strong,.theme-card small{display:block;padding:0 13px}.theme-card strong{margin:12px 0 6px;font-size:13px}.theme-card small{font-size:10px;color:#adcbce;line-height:1.5}.theme-card[aria-pressed=true]{border-color:#abe9c6;box-shadow:0 0 0 1px #abe9c6}.settings-section{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.settings-section h3{font-size:14px;font-weight:550;margin:0 0 14px}.settings-actions{display:flex;flex-wrap:wrap;gap:8px}.settings-note{font-size:11px;line-height:1.8;color:#b1cdd2}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:13px;gap:20px}.toggle-row input{width:19px;height:19px;accent-color:#9ee3bf}.detail-back{display:flex;gap:7px;align-items:center;color:#b0dbd6;font-size:11px;background:transparent;border:0;padding:6px 5px 15px}.detail-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.detail-header img{width:87px;height:72px;object-fit:contain}.detail-header h3{font-size:18px;font-weight:550;margin:0 0 6px;overflow-wrap:anywhere}.detail-header small{font-size:10px;color:#a9c8cf}.detail-note{font-size:11px;color:#b9d1d6;line-height:1.6;background:#67988b12;border-radius:10px;padding:11px;margin:6px 0 14px}.task-row{border:1px solid #6a949c33;border-radius:12px;padding:12px;margin-bottom:8px;background:#23455245}.task-row p{font-size:12px;line-height:1.5;margin:0 0 9px;overflow-wrap:anywhere}.task-actions{display:flex;gap:5px}.task-actions button{flex:1;font-size:10px;border:1px solid #7799a14f;padding:7px 4px;border-radius:7px;background:transparent}.task-actions button[aria-pressed=true]{background:#a7e8c32b;color:#c7ffe0;border-color:#a7e8c375}.task-actions button[data-status=missed][aria-pressed=true]{background:#d09a6c2b;color:#ffdeba;border-color:#d09a6c75}.feed-button{margin-top:8px;min-height:47px}.detail-extras{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.detail-extras button{flex:1;font-size:10px;padding:9px 7px;min-height:36px}.task-summary{padding:12px 8px;border-bottom:1px solid var(--line)}.task-summary h3{font-size:12px;line-height:1.6;font-weight:500;margin:0 0 7px;overflow-wrap:anywhere}.task-summary p{font-size:10px;color:#b1cecb;margin:0}.task-summary .progress-track{height:3px;margin:9px 0}.task-template{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.task-template span{overflow-wrap:anywhere}.task-template button{font-size:10px;flex-shrink:0}.inline-form{display:flex;gap:9px;align-items:flex-end;margin-top:18px}.inline-form .field{flex:1;margin:0}.inline-form .button{height:45px}.help-steps{display:grid;gap:15px}.help-step{display:flex;gap:14px;align-items:flex-start}.step-number{width:29px;height:29px;background:#9ed7b92b;border:1px solid #9ed7b94b;border-radius:50%;display:grid;place-items:center;font-size:12px;flex-shrink:0;color:#cbf4db}.help-step h3{font-size:14px;margin:3px 0 7px;font-weight:550}.help-step p{font-size:12px;color:#b6d1d4;line-height:1.8;margin:0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e2f4e9;color:#153f3e;border:1px solid #abdab8;box-shadow:0 8px 40px #002e4655;border-radius:12px;padding:14px 22px;font-size:13px;max-width:90vw;z-index:20;transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.import-choice{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}.import-choice strong{font-size:14px}.import-choice small{display:block;font-size:11px;color:#a5c5c9;margin-top:7px}.history-day{border-top:1px solid var(--line);padding:13px 0;font-size:12px}.history-day h3{font-size:13px}.history-day p{color:#aec8d1;line-height:1.6;margin:6px 0}.danger-zone{margin-top:24px;padding-top:16px;border-top:1px solid #b6767444}.no-motion .feed-particle,.no-motion .feed-heart{animation-duration:.01ms}.app:fullscreen{overflow:auto}.app:fullscreen .aquarium{height:calc(100svh - 121px)}
@media(min-width:1600px){.student-panel{width:370px;top:32px;right:32px;bottom:110px}.swim-area{right:420px}.scene-heading{left:50px;top:40px}.scene-controls{left:50px;top:174px}.welcome{width:calc(86% - 370px)}.student-row{padding:16px 10px}.student-thumb{width:62px;height:52px}.student-info strong{font-size:14px}.student-info small{font-size:11px}.scene-heading h2{font-size:34px}}
@media(max-width:1100px){.topbar{padding:15px 18px;gap:10px}.live-pill{display:none}.brand h1{font-size:19px}.header-divider{margin:0 3px}.student-panel{width:305px;right:16px}.swim-area{right:335px}.scene-heading{left:25px}.scene-heading h2{font-size:26px}.scene-controls{left:25px}.welcome{left:5%;width:calc(93% - 320px)}.welcome h2{font-size:38px}.welcome p{font-size:13px}.mood-legend{gap:10px;padding:10px 12px}.scene-footer{left:23px;gap:15px}.button{padding:11px 13px}.brand-mark{width:37px;height:37px}.class-label select{max-width:140px}.welcome-footnote{max-width:300px}}
@media(max-width:800px){.topbar{flex-wrap:wrap;min-height:115px;padding:12px 16px;gap:10px}.brand{flex:1}.brand h1{font-size:18px}.brand span{font-size:8px}.brand-mark{width:34px;height:34px}.header-divider,.live-pill{display:none}.class-label{order:5;flex:1}.class-label select{width:100%;max-width:none;font-size:12px;padding:9px 12px}.header-actions{order:6}.header-actions .button{min-height:37px;font-size:11px;padding:9px 12px}.header-actions svg{width:16px;height:16px}.aquarium{height:auto;min-height:1000px;display:flex;flex-direction:column;padding:0 14px 110px;background-position:center top;background-attachment:scroll}.scene-heading{top:24px;left:22px}.scene-heading .eyebrow{font-size:7px;letter-spacing:1.3px}.scene-heading h2{font-size:24px;margin-top:8px}.scene-heading p{font-size:10px}.scene-controls{top:126px;left:20px}.round-button{width:36px;height:36px}.swim-area{top:181px;left:8px;right:8px;bottom:auto;height:305px}.student-panel{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:495px;margin-top:495px;flex:none;border-radius:19px}.panel-content{padding-bottom:12px}.panel-top{padding:20px 20px 14px}.class-progress{margin-bottom:16px}.scene-footer{bottom:23px;left:16px;right:16px;gap:12px;flex-wrap:wrap}.theme-chip{padding:10px 12px;min-width:170px}.mood-legend{display:none}.help-button{font-size:10px}.welcome{top:192px;left:25px;transform:none;width:calc(100% - 50px)}.welcome h2{font-size:36px;margin:14px 0 10px}.welcome-tag{font-size:7px;padding:7px 9px}.welcome p{font-size:11px;line-height:1.7}.welcome-actions{margin-top:14px;gap:7px}.welcome-actions .button{font-size:11px;min-height:40px}.welcome-footnote{font-size:8px;margin-top:13px;max-width:none}.aquarium.is-empty .swim-area{opacity:.35;pointer-events:none}.panel-hidden.aquarium{min-height:calc(100svh - 143px);height:calc(100svh - 143px)}.panel-hidden .swim-area{right:8px;bottom:102px;height:auto}.panel-hidden .scene-controls{top:123px;left:20px;right:auto}.panel-hidden .welcome{width:calc(100% - 50px)}.save-line{padding:8px 15px;font-size:8px}.save-line span:last-child{display:none}dialog{padding:22px 18px;border-radius:18px}.modal-heading h2{font-size:23px}.species-grid{grid-template-columns:repeat(2,1fr);gap:9px}.species-card img{height:75px}.theme-grid{grid-template-columns:1fr}.theme-card{display:grid;grid-template-columns:100px 1fr;grid-template-rows:1fr 1fr;padding:0;min-height:90px}.theme-card img{grid-row:1/3;height:100%;min-height:90px}.theme-card strong{align-self:end;margin:0;padding-top:12px}.theme-card small{align-self:start;margin:5px 0 10px}.inline-form{flex-wrap:wrap}.inline-form .field{flex-basis:100%}.inline-form .button{width:100%}.app:fullscreen .aquarium{height:auto}.app:fullscreen .panel-hidden.aquarium{height:calc(100svh - 143px)}.import-choice{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}

@media(min-width:801px){.aquarium.is-empty .swim-area{top:58%;bottom:105px}.aquarium.is-empty .fish{opacity:1!important}}

.scene-heading{max-width:calc(100% - 420px)}.scene-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-hidden .scene-heading{max-width:calc(100% - 230px)}@media(max-width:800px){.scene-heading,.panel-hidden .scene-heading{max-width:calc(100% - 40px)}}

@media(min-width:801px) and (max-height:850px){.panel-top{padding:17px 20px 12px}.panel-top h2{font-size:18px}.class-progress{margin-bottom:13px;padding:11px 12px}.panel-tabs button{padding-bottom:10px}.search-box{margin-top:9px}.student-row{padding:9px 8px}.panel-bottom{padding:12px 19px}}

.species-search{display:flex;align-items:center;gap:10px;border:1px solid #648893;border-radius:10px;background:#0a2e3c;padding:0 12px;margin-top:7px}.species-search svg{width:17px;color:#aed6d2}.species-search input{width:100%;min-height:42px;border:0;background:transparent;color:#eefcfa;font-size:13px;padding:10px 0}.species-search input::placeholder{color:#9fbcc4}.species-grid{scrollbar-width:thin;scrollbar-color:#658b8d transparent;padding:3px}.species-card:focus-within{outline:2px solid #b8ebcd;outline-offset:1px}.species-result-count{font-size:11px;color:#bddccd;line-height:1.6;margin:9px 0 0}@media(max-width:800px){.species-grid{}}

/* Teacher access, audience mode and a distraction-free board. */
.access-gate { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px; text-align:center; background:#062f40; color:#ecfbff; }
.access-gate p { max-width:580px; line-height:1.8; color:#b5d5df; }
body:not(.access-pending) .access-gate { display:none; }
.access-pending #aquariumApp,.access-pending #modal,.access-pending #toast { display:none!important; }
.view-only .topbar,.view-only .save-line,.view-only .scene-heading,.view-only #studentPanel,.view-only .scene-footer,.view-only #welcome,.view-only #demoBanner { display:none!important; }
.view-only .scene-controls > :not([data-action="fullscreen"]) { display:none!important; }
.view-only #aquarium { height:100svh; min-height:0; }
.view-only #swimArea { inset:75px 20px 30px; height:auto; }
.view-only .fish { cursor:default; }
/* Read-only animals keep their normal appearance; disabled is an access guard. */
.view-only .fish:disabled { opacity:1; }
.share-state { padding:14px 18px; border-radius:14px; background:#104b51; color:#8de4c5; font-weight:700; }
.fish-chat { position:absolute; top:-42px; left:30%; background:#f4fcff; color:#123f4f; border-radius:18px 18px 18px 3px; padding:7px 12px; box-shadow:0 5px 22px #001a2940; font-size:21px; opacity:0; transform:translateY(8px) scale(.9); transition:opacity .5s,transform .5s; pointer-events:none; white-space:nowrap; }
.fish-chat.visible { opacity:1; transform:translateY(0) scale(1); }
.fish-chat.champion { background:#fff3c4; border:1px solid #efce75; font-size:25px; }
.fish-points { display:block!important; color:#ffe69c!important; }
.app:fullscreen { background:#062f40; overflow:hidden!important; }
.app:fullscreen > :not(#aquarium) { display:none!important; }
.app:fullscreen #aquarium { height:100vh!important; min-height:0!important; margin:0!important; border-radius:0; }
.app:fullscreen #aquarium > :not(#swimArea):not(.water-light):not(#waterWaves):not(#bubbles):not(#feedingEffects):not(#classPearl):not(#eggBed):not(#localClock):not(#cloudWarning):not(#modal):not(.scene-controls) { display:none!important; }
.app:fullscreen #swimArea { inset:55px 30px 35px!important; height:auto!important; width:auto!important; }
.app:fullscreen .mood-symbol { display:none!important; }
.app:fullscreen .fish { pointer-events:none; }
.app:fullscreen .fish-name { background:rgba(4,39,54,.55); }
/* Persistent board controls stay above the water layers and out of the clock corner. */
.app:fullscreen #aquarium .scene-controls{display:flex;left:calc(16px + env(safe-area-inset-left,0px));right:auto;top:calc(16px + env(safe-area-inset-top,0px));gap:8px;z-index:9;align-items:flex-start}
.app:fullscreen .scene-controls>:not(.fullscreen-keep){display:none!important}
.app:fullscreen .scene-controls .round-button,.app:fullscreen .sound-controls>.icon-button{width:44px;height:44px;background:#083f54b3;border:1px solid #abdae35c}
.app:fullscreen .sound-controls>.icon-button{border-radius:50%;font-size:22px}
.app:fullscreen .sound-toggle{width:40px;height:28px}
.app:fullscreen #activityTimerBadge{display:none!important}
@media(max-width:600px){.app:fullscreen #localClock{top:108px}.app:fullscreen #aquarium .scene-controls{gap:6px}}
.music-credit{font-size:12px;color:#b5d5df;line-height:1.65;margin-top:15px}.music-credit a{color:#b0eed9;text-decoration:underline;text-underline-offset:3px}

/* Teacher-controlled audio, labels and the shared classroom pearl. */
.sound-controls{display:flex;flex-direction:column;align-items:center;gap:3px}.sound-toggle{width:34px;height:25px;border:1px solid #bce4de55;background:#103e50cc;border-radius:9px;color:#cff5e2;font-size:13px;line-height:1;cursor:pointer}.sound-toggle[aria-pressed=true]{background:#bee6cd;color:#113e45}.scene-controls{align-items:flex-start}
.fish-points{position:absolute;top:calc(-23px - var(--points-gap, 10px) + var(--label-adjustment,0px));left:50%;transform:translateX(-50%);min-width:34px;padding:3px 7px;border:1px solid #f9e4a456;border-radius:9px;background:#163d49db;color:#fff0b2!important;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.2;box-shadow:0 3px 10px #06293430}
.fish-points[hidden],.fish-name[hidden]{display:none!important}.fish-chat{top:-70px}
.class-pearl{position:absolute;z-index:3;left:calc((100% - 350px)/2);bottom:55px;transform:translateX(-50%);width:170px;pointer-events:auto;filter:drop-shadow(0 10px 13px #052f4460);border:0;padding:0;background:transparent;color:inherit;appearance:none;cursor:pointer}.class-pearl[hidden]{display:none!important}.class-pearl img{width:100%;display:block;pointer-events:none}.pearl-score{position:absolute;top:42%;left:50%;transform:translate(-50%,-5%);display:grid;justify-items:center;text-align:center;gap:1px;width:138px;color:#24444b;text-shadow:0 1px 4px #fff,0 0 9px #fff;pointer-events:none}.pearl-score span{font-size:7px;letter-spacing:1px;font-weight:800}.pearl-score strong{font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums;max-width:130px;overflow-wrap:anywhere}.pearl-score small{font-size:8px;font-weight:700}.panel-hidden .class-pearl,.view-only .class-pearl{left:50%;bottom:32px}
.app:fullscreen #aquarium > #classPearl:not([hidden]){display:block!important;left:50%;bottom:18px;width:180px}.app:fullscreen #classPearl[hidden]{display:none!important}.app:fullscreen .pearl-score span,.app:fullscreen .pearl-score small{display:none}.app:fullscreen .pearl-score strong{font-size:28px}
.child-share{padding:16px;border:1px solid #70a4ac55;border-radius:12px;margin:12px 0;display:grid;gap:12px}.child-share>.field{margin:0}.child-share input{font-size:12px;font-family:ui-monospace,monospace}.child-share .button{font-size:11px}.parent-code-form{width:min(560px,100%);text-align:left}.parent-code-form .button{width:100%}.parent-code-form input{color:#ecfbff}
@media(max-width:800px){.class-pearl{left:50%;top:calc(495px - 100px);bottom:auto;width:130px}.pearl-score{width:110px}.pearl-score strong{font-size:20px}.pearl-score span{font-size:6px}.panel-hidden .class-pearl,.view-only .class-pearl{top:auto;bottom:12px}.fish-points{font-size:10px;top:calc(-20px - var(--points-gap, 8px) + var(--label-adjustment,0px))}.sound-toggle{height:23px}.app:fullscreen .class-pearl{top:auto}}
@media(min-width:801px){.aquarium #swimArea{bottom:30px}}
@media(max-width:800px){.aquarium:has(.class-pearl:not([hidden])):not(.panel-hidden) .student-panel{margin-top:595px}.class-pearl{top:492px}.panel-hidden .class-pearl{top:auto;bottom:72px}.view-only .class-pearl{top:auto;bottom:15px}}
.app:fullscreen #aquarium #swimArea,.view-only #aquarium #swimArea{bottom:30px!important}
/* Teacher behavior rewards and compact feeding reminders. */
.behavior-student{display:flex;align-items:center;gap:20px;margin:-5px 0 22px;padding:12px 20px;border:1px solid #8cccb32a;border-radius:16px;background:#82d5be0b}
.behavior-student img{width:100px;height:76px;object-fit:contain}.behavior-student p{font-size:16px;line-height:1.7;margin:0}.behavior-student span{font-size:12px;color:#b3d4d5}
.behavior-grid{display:grid;gap:10px}.behavior-choice{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:17px;border:1px solid #83c9b748;border-radius:14px;background:#174754}
.behavior-choice:hover:not(:disabled){background:#235c60;border-color:#a1eac9}.behavior-choice strong{display:block;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.behavior-choice small{display:block;font-size:11px;color:#aacecc;margin-top:4px}.behavior-choice b{margin-left:auto;flex-shrink:0;font-size:13px;color:#ffe6a2;background:#ffdfa510;padding:8px 11px;border-radius:10px}.behavior-choice:disabled{opacity:.6}.behavior-check{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#a5e6c519;color:#bcf6d8;font-size:22px}
.task-points-form>span{flex:1;min-width:0}.task-points-form .field{width:80px;flex-shrink:0;margin:0;font-size:10px}.task-points-form input{padding:10px;min-height:40px}.task-points-form .button{padding:9px 11px;min-height:40px}.behavior-form .points-field{flex:0 0 88px}.task-score{display:inline-block;font-size:10px;color:#ffe1a0;margin-left:5px}
.fish-hunger{font-size:9px;line-height:1.5;margin-top:4px;padding:2px 6px;border-radius:6px;background:#493d2deb;border:1px solid #e7bb7544;color:#ffe4b6;white-space:nowrap;pointer-events:none}.fish-hunger[hidden],.app:fullscreen .fish-hunger,.view-only .fish-hunger{display:none!important}
@media(max-width:600px){.behavior-student{gap:10px;padding:10px}.behavior-student img{width:72px;height:58px}.behavior-student p{font-size:14px}.behavior-choice{padding:13px 10px;gap:9px}.behavior-choice strong{font-size:12px}.behavior-choice b{font-size:11px;padding:7px}.behavior-check{width:26px;height:26px;font-size:18px}.task-points-form{flex-wrap:wrap;gap:8px}.task-points-form>span{flex-basis:100%}.task-points-form .field{margin-right:auto}.behavior-form .points-field{flex:1}.fish-hunger{font-size:8px}}
/* A quiet glass surface lets the aquarium remain part of the student profile. */
dialog{background:rgba(10,46,61,.89);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:#c3eee53b;box-shadow:0 24px 90px #001d3b65,inset 0 1px 0 #e5fff512}
dialog::backdrop{background:rgba(2,23,38,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.behavior-modal{width:min(880px,calc(100% - 36px));padding:26px 28px;background:linear-gradient(130deg,#174d5acf,#082d42d1);border-radius:26px}
.behavior-modal .modal-heading{margin-bottom:0}.behavior-modal .modal-heading h2{font-size:27px;font-weight:600;letter-spacing:-.6px}.behavior-modal .modal-heading .eyebrow{font-size:8px;color:#b4dbd4}.behavior-modal .modal-heading .icon-button{border-radius:50%;background:#d0f7ee0b}
.behavior-profile{display:flex;align-items:center;gap:13px;padding:8px 0 19px;margin-bottom:22px;border-bottom:1px solid #c7eee323}.behavior-profile img{width:74px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 10px #001c3733)}.profile-species,.profile-mood{display:block;font-size:12px;color:#d4ebe6;line-height:1.8}.profile-mood{font-size:11px;color:#a8d8c6}.profile-score{margin-left:auto;display:grid;gap:4px;text-align:center;background:#e5e5ae0c;border:1px solid #eae4b129;border-radius:14px;padding:9px 17px}.profile-score strong{font-size:20px;color:#ffedb3;font-weight:600}.profile-score small{font-size:9px;letter-spacing:.5px;color:#d2d7bc}
.behavior-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:25px}.behavior-nav{display:flex;flex-direction:column;align-items:stretch;gap:5px;border-right:1px solid #b9e8df21;padding-right:17px}.nav-caption{font-size:8px;color:#9fbfbe;letter-spacing:1.5px;margin:5px 10px 9px}.nav-caption:not(:first-child){margin-top:24px}.behavior-nav button{display:flex;align-items:center;gap:9px;padding:12px 10px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;font-size:11px;color:#c4ddda;line-height:1.5}.behavior-nav button:hover{background:#b9ead810}.behavior-nav button.active{color:#d1f9e6;background:#9ae5bf15;border-color:#b8f5d33b}.behavior-nav svg{width:17px;height:17px;color:#a1d6c6}.nav-symbol{width:17px;text-align:center;color:#addccc;font-size:18px}
.behavior-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px}.behavior-section-heading h3{font-size:16px;font-weight:550;margin:3px 0 7px;color:#e6f5ef}.behavior-section-heading p{font-size:11px;color:#b1cfcf;line-height:1.6;margin:0}.behavior-section-heading .icon-button{width:32px;height:32px;border-radius:10px;color:#b4dccd}.behavior-section-heading svg{width:17px;height:17px}
.behavior-modal .behavior-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.behavior-modal .behavior-choice{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:12px;padding:34px 10px 14px;min-height:152px;background:linear-gradient(140deg,#b3eee710,#7cd9cc06);border:1px solid #b9eade36;border-radius:17px;box-shadow:inset 0 1px 0 #edfff709}.behavior-modal .behavior-choice:hover:not(:disabled){background:#b8f1d91d;border-color:#b9efd590;box-shadow:0 6px 22px #031e3729}.behavior-modal .behavior-check{font-size:29px;width:46px;height:40px;border:0;background:transparent;line-height:1}.behavior-modal .behavior-choice strong{font-size:12px;font-weight:550;line-height:1.55}.behavior-modal .behavior-choice small{font-size:9px;line-height:1.5;color:#a8cbc3;margin-top:5px}.behavior-modal .behavior-choice b{position:absolute;top:10px;right:10px;margin:0;font-size:10px;font-weight:600;color:#c0efd4;background:transparent;padding:0}.behavior-modal .behavior-choice:disabled{opacity:.58;background:#a1c9be08}.behavior-footnote{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.7;color:#b7d1cb;margin:17px 0 0}.behavior-footnote svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:650px){.behavior-modal{padding:21px 18px;width:calc(100% - 24px);border-radius:22px}.behavior-modal .modal-heading h2{font-size:23px}.behavior-profile{margin-bottom:14px;padding-bottom:13px;gap:8px}.behavior-profile img{width:58px;height:48px}.profile-score{padding:7px 12px}.profile-score strong{font-size:18px}.behavior-layout{grid-template-columns:1fr;gap:17px}.behavior-nav{border:0;border-bottom:1px solid #b9e8df21;padding:0 0 13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.behavior-nav .nav-caption{display:none}.behavior-nav button{justify-content:center;flex-direction:column;gap:5px;padding:8px 4px;font-size:9px;line-height:1.4;text-align:center}.behavior-section-heading{margin-bottom:13px}.behavior-section-heading h3{font-size:15px}.behavior-section-heading p{font-size:10px}.behavior-modal .behavior-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.behavior-modal .behavior-choice{min-height:132px;padding:29px 8px 12px;gap:8px;border-radius:14px}.behavior-modal .behavior-check{font-size:26px;height:33px}.behavior-modal .behavior-choice strong{font-size:11px}.behavior-footnote{font-size:9px}}
@media(prefers-reduced-transparency:reduce){dialog,.behavior-modal{background:#103a49}}

/* Calm scene: details stay inside the student profile. */
.mood-legend{display:none}
.panel-hidden .swim-area{top:145px}
.finder-button{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:22px;border:1px solid #abdae347;background:#083f54bd;backdrop-filter:blur(8px);font-size:12px;color:#e7faf8}
.finder-button svg{width:17px;height:17px}
.finder-results{scrollbar-width:thin}
.finder-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.finder-row img{width:62px;height:46px;object-fit:contain}.finder-row strong{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}.finder-row .button{padding:9px 13px}
.fish.is-found{border-radius:24px;background:#bcf5e51c;outline:2px solid #d1ffee;outline-offset:3px;z-index:2;box-shadow:0 0 28px #b7f6e336}
.fish.is-selected .fish-art{filter:drop-shadow(0 0 10px #baf5e685)}
.student-facts{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin:0 0 22px;padding:13px 15px;border:1px solid #bde5dc24;border-radius:14px;background:#b3e5dc08}
.student-facts>div{display:grid;align-content:start;gap:6px}.student-facts small{font-size:10px;color:#b1ceca}.student-facts strong{font-size:15px;line-height:1.45;font-weight:550;color:#e3f8ed}.student-facts>div:last-child strong{font-size:12px}
.behavior-profile{margin-bottom:14px}
@media(min-width:801px) and (max-width:1100px){.panel-hidden .scene-controls{top:105px}.panel-hidden .swim-area{top:170px}}
@media(max-width:800px){
 .panel-hidden .swim-area{top:181px}
 body:not(.view-only) .app:not(:fullscreen) .aquarium.panel-hidden:not(.is-empty){height:auto;min-height:max(calc(100svh - 143px),calc(var(--mobile-swim-height,320px) + 320px))}
 body:not(.view-only) .app:not(:fullscreen) .panel-hidden:not(.is-empty) .swim-area{height:var(--mobile-swim-height,320px);bottom:auto}
 .finder-button{padding:0 11px;font-size:11px}.finder-row{gap:7px}.finder-row img{width:45px}.finder-row strong{font-size:12px}.finder-row .button{padding:9px 11px}
 .student-facts{gap:8px;padding:12px;margin-bottom:16px}.student-facts strong{font-size:14px}.student-facts>div:last-child strong{font-size:11px}
}

.behavior-nav button{padding-top:10px;padding-bottom:10px}.nav-caption:not(:first-child){margin-top:14px}
.fish-name{max-width:max(70px,100%)}
/* Teacher activities share the existing glass dialog; the scene stays quiet. */
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.activity-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;padding:20px 17px;border-radius:18px;background:#b3eee710;border:1px solid #b9eade36}
.activity-card svg{width:27px;height:27px;color:#b0e8d2}.activity-card strong{font-size:15px;font-weight:600}.activity-card span{font-size:12px;line-height:1.7;color:#bed8d7}.activity-card:hover{background:#b8f1d91d}
.shared-goal{padding:20px;margin:12px 0 22px;border:1px solid #b0e2bf42;border-radius:18px;background:linear-gradient(130deg,#aad9ae19,#65c2b406)}
.shared-goal h3{font-size:20px;margin:10px 0;overflow-wrap:anywhere}.shared-goal p{font-size:12px;color:#c1ded2;line-height:1.7}.shared-goal .progress-copy{gap:15px;margin-top:20px}.shared-goal .progress-track{height:7px}
.group-students{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0;scrollbar-width:thin}
.group-student{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#bae6dc08;cursor:pointer}
.group-student:has(input:checked){border-color:#b6efce;background:#b6efce18}.group-student.unavailable{opacity:.6;cursor:default}.group-student input{width:18px;height:18px;flex-shrink:0;accent-color:#a0eac8}.group-student img{width:45px;height:34px;object-fit:contain}.group-student span{min-width:0}.group-student strong{display:block;font-size:12px;overflow-wrap:anywhere}.group-student small{display:block;font-size:10px;color:#b4d2ce;margin-top:5px}
.focus-timer{text-align:center;padding:12px 0 20px}.focus-timer>p{color:#c8e4db;font-size:14px;line-height:1.7}.focus-timer>strong{font-variant-numeric:tabular-nums;font-size:clamp(55px,10vw,90px);font-weight:500;letter-spacing:3px;color:#d5f8e6}.focus-timer .settings-actions{justify-content:center;margin-top:25px}
.timer-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.timer-presets .button{flex:1;padding:10px;white-space:nowrap}
.activities-button{position:relative}#activityTimerBadge{position:absolute;top:44px;left:50%;transform:translateX(-50%);font-size:10px;font-variant-numeric:tabular-nums;color:#d4f5e4;background:#103e50e6;border:1px solid #bce4de55;border-radius:8px;padding:4px 6px;white-space:nowrap}
@media(max-width:650px){.activity-grid{grid-template-columns:1fr}.activity-card{display:grid;grid-template-columns:30px 1fr;gap:6px 13px;padding:16px}.activity-card svg{grid-row:1/3}.activity-card strong{font-size:14px}.activity-card span{font-size:11px}.group-students{grid-template-columns:1fr;}.shared-goal .progress-copy{flex-wrap:wrap;gap:8px}.scene-controls{gap:6px}.finder-button{padding:0 10px}}
@media(max-width:360px){.finder-button span{display:none}.finder-button{width:36px;padding:0;justify-content:center}}
/* Glass dialogs retain contrast over every aquarium background. */
dialog,.behavior-modal{background:linear-gradient(135deg,rgba(25,75,88,.83),rgba(6,37,54,.86));backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);border-color:#c4f9ed55;box-shadow:inset 0 1px 0 #effffb40,0 30px 100px #001c3380}
dialog::backdrop{background:#021b2b52;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog .field input,dialog .field textarea,dialog .field select{background:#062c3cb3}dialog .species-card{background:#b5e9df0c}dialog .species-card:has(input:checked){background:#a5efcc28}
.growth-thresholds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.growth-instructions{padding-left:20px;font-size:12px;line-height:1.9;color:#c7e2e3}.growth-instructions li{margin-bottom:9px}.growth-summary{font-size:12px;color:#d1f4dc;padding:12px 14px;background:#afe8d416;border:1px solid #c2ffe026;border-radius:12px}
.history-entry{padding:10px 0;border-bottom:1px solid #b8eadd1a;display:flex;align-items:center;justify-content:space-between;gap:14px}.history-entry .button{font-size:10px;min-height:36px;padding:8px 10px;white-space:nowrap}.history-entry p{flex:1}.history-entry .settings-actions{flex-shrink:0}
.fish-art{transition:filter .4s;transform-origin:50% 50%}.fish-egg{display:none;position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:calc(var(--fish-size)*.49);height:calc(var(--fish-size)*.49);border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffd154 0%,#ffb51b 32%,#fb9706 64%,#da6502 100%);border:1px solid #ffe7a6;box-shadow:inset -3px -5px 7px #bd4c0057,inset 2px 2px 4px #fff6cba1,0 3px 5px #102e3c55;pointer-events:none}
.fish-egg i{position:absolute;left:32%;bottom:17%;width:43%;height:40%;border-radius:50%;background:radial-gradient(circle at 37% 28%,#ffe48c94,#f5822066 70%);border:1px solid #ffdf803d;pointer-events:none}
.fish-egg .egg-embryo{position:absolute;left:12%;top:20%;width:76%;height:62%;object-fit:contain;opacity:.6;transform:rotate(-14deg);pointer-events:none}
.fish-egg::before{content:'';position:absolute;z-index:2;top:10%;left:13%;width:36%;height:28%;border-radius:50%;background:radial-gradient(ellipse at 36% 28%,#fffef1e8, #fff9dc6b 33%,#fff5c500 72%);transform:rotate(-35deg);pointer-events:none}
.is-egg .fish-art{opacity:0}.is-egg .fish-egg{display:block}.is-hatching .fish-egg{display:block;animation:egg-open 1.4s ease-out forwards}.is-hatching .fish-art{animation:fish-hatch 1.5s ease-out}.teacher-fish .fish-name{border-color:#e3d79b80;color:#fff1bd}
@keyframes egg-open{0%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.1);clip-path:polygon(0 0,100% 0,100% 40%,65% 51%,76% 66%,43% 53%,24% 70%,0 52%)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.2)}}@keyframes fish-hatch{0%,25%{opacity:0}100%{opacity:1}}
/* Shared stacking context lets living creatures pass behind and in front of the timer. */
.scene-timer{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%) perspective(700px) rotateY(-8deg);z-index:2;pointer-events:none;text-align:center;width:clamp(150px,24vw,290px);color:#dcfafca6;text-shadow:1px 2px 0 #357e9299,2px 4px 0 #184c6466,0 0 22px #b7f5ff5c;filter:drop-shadow(0 15px 7px #032c4166)}
.scene-timer strong{display:block;font-size:clamp(48px,7vw,96px);line-height:1.15;letter-spacing:-3px;font-weight:650;font-variant-numeric:tabular-nums}.scene-timer>span{display:block;font-size:11px;letter-spacing:1px;max-width:100%;overflow-wrap:anywhere;text-shadow:0 1px 4px #042b45}.scene-timer::after{content:'';position:absolute;bottom:-14px;left:8%;right:8%;height:11px;border-radius:50%;background:#03294144;filter:blur(6px);transform:rotateX(45deg)}.scene-timer[data-status=paused]{opacity:.6}.scene-timer[data-status=done]{color:#c5f7d6bf}
.scene-kelp{position:absolute;inset:auto 0 0;height:90px;z-index:4;pointer-events:none;opacity:.5;filter:blur(.25px)}.scene-kelp i{position:absolute;bottom:-10px;left:2%;height:80px;width:12px;border-radius:90% 0 90% 0;background:linear-gradient(80deg,#145a61,#69a88970);transform-origin:bottom;transform:rotate(-15deg);animation:kelp-sway 9s ease-in-out infinite alternate}.scene-kelp i:nth-child(2){left:4%;height:110px;animation-delay:-3s}.scene-kelp i:nth-child(3){left:7%;height:65px;animation-delay:-5s}.scene-kelp i:nth-child(4){left:94%;height:95px;animation-delay:-2s}.scene-kelp i:nth-child(5){left:97%;height:120px;animation-delay:-6s}@keyframes kelp-sway{to{transform:rotate(10deg) skewX(6deg)}}
.no-motion .scene-kelp i{animation:none}.app:fullscreen .scene-timer{top:70%}.app:fullscreen .scene-timer>span{display:none}
@media(max-width:600px){.history-entry{align-items:flex-start;flex-direction:column}.growth-thresholds{gap:0 10px}.growth-thresholds .field{font-size:10px}.scene-timer{left:50%;top:70%;width:155px}.scene-timer strong{font-size:48px}.scene-timer>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.scene-kelp i,.is-hatching .fish-egg,.is-hatching .fish-art{animation:none}.is-hatching .fish-egg{display:none}}
@media(prefers-reduced-transparency:reduce){dialog,.behavior-modal{background:#103a49;backdrop-filter:none;-webkit-backdrop-filter:none}dialog::backdrop{background:#032431b5}}
/* Eggs rest at the actual scene floor, independently of the fish swimming bounds. */
.egg-bed{position:absolute;inset:0 380px 8px 20px;pointer-events:none;z-index:3;overflow:hidden}.egg-bed .fish{pointer-events:auto}.panel-hidden .egg-bed,.view-only .egg-bed{right:20px}

.egg-bed .fish-egg::after{content:'';position:absolute;left:5%;width:90%;bottom:-10%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#57452554,transparent 72%);pointer-events:none}
.egg-bed .fish-name{margin-top:3px;font-size:10px;max-width:80px}.egg-bed .fish-points{font-size:10px;padding:2px 5px;top:-18px}.egg-bed .fish-hunger{font-size:8px}.egg-bed .fish-hunger.hunger-icon{position:absolute;right:0;top:0}
.app:fullscreen #aquarium > #eggBed:not([hidden]){display:block!important;inset:0 30px 25px!important}.app:fullscreen #eggBed .fish{pointer-events:none}
@media(min-width:1600px){.egg-bed{right:420px}}
@media(min-width:801px) and (max-width:1100px){.egg-bed{right:335px}}
@media(max-width:800px){.egg-bed{inset:181px 8px auto;height:var(--mobile-swim-height,360px)}.panel-hidden .egg-bed,.view-only .egg-bed{inset:0 8px 12px;height:auto}.aquarium:not(.panel-hidden) .egg-bed{height:305px}}

/* The scene toolbar already offers the background control; keep the sand unobstructed. */
.aquarium:has(.egg-bed:not([hidden])) .scene-footer{display:none}
/* Sound studio and editable behavior cards */
.sound-studio{display:grid;gap:18px}.mixer-master{padding:18px;border:1px solid #a5ecd433;border-radius:20px;background:#9aebd710}.mixer-master p{margin-top:0;color:var(--mint,#a8ead3)}.mixer-group h3,.mixer-favorites h3{margin:8px 0 14px}.mixer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mixer-channel{padding:14px;background:#d1f3ff08;border:1px solid #d1f3ff20;border-radius:16px;transition:background .2s}.mixer-channel.is-active{background:#9be6d21a;border-color:#9be6d277}.mixer-title{display:flex;gap:10px;align-items:center;cursor:pointer}.mixer-title>span{font-size:25px}.mixer-title strong{flex:1;font-size:14px}.mixer-title input{width:19px;height:19px;accent-color:#a5e7d0}.mixer-level{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:11px;color:#b4ced7;margin-top:16px}.mixer-level input{grid-column:1/-1;width:100%;accent-color:#a5e7d0}.mixer-level input:disabled{opacity:.3}.mixer-level output{color:#b5f1d9;font-weight:700}.mix-favorite{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #ffffff18}.mix-favorite>div:first-child{flex:1;min-width:0}.mix-favorite small{display:block;color:#b4ced7;font-size:11px;margin-top:5px}.mix-favorite .button{padding:9px 12px;font-size:12px}.mixer-favorites{padding-top:12px;border-top:1px solid #ffffff20}.task-editor{border:1px solid #b2e9e12e;border-radius:16px;background:#ffffff06;margin:10px 0;overflow:hidden}.task-editor summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px}.task-editor summary>span:first-child{font-size:25px}.task-editor summary strong{flex:1}.task-editor summary b{color:#b5f1d9}.task-editor summary>span:last-child{font-size:12px;color:#b4ced7}.task-editor form{padding:0 18px 18px;display:grid;gap:12px}.new-task-form{padding-top:18px;display:grid;gap:14px}.task-icon-picker{border:0;margin:0;padding:10px 0}.task-icon-picker legend{font-size:13px;color:#b4ced7}.task-icon-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.task-icon-option{width:39px;height:39px;padding:0;border-radius:10px;background:#ffffff09;border:1px solid #ffffff24;font-size:21px;cursor:pointer}.task-icon-option[aria-pressed=true]{border-color:#a5e7d0;background:#a5e7d030}.task-icon-option:focus-visible{outline:2px solid #a5e7d0;outline-offset:2px}.task-icon-picker input{max-width:180px}@media(max-width:600px){.mixer-grid{grid-template-columns:1fr}.mix-favorite{align-items:flex-start;flex-direction:column}.task-editor summary{gap:8px;padding:12px}.task-editor summary strong{font-size:14px}}

/* Atmospheric depth: transparent lighting layers, with no video or canvas loop. */
.swim-area::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 25%,#53b8cb08,transparent 75%)}
.fish .fish-art{filter:brightness(var(--water-brightness,1)) saturate(var(--water-saturation,1)) drop-shadow(0 5px 5px #032f4930)}
.fish.mood-sad .fish-art{filter:brightness(var(--water-brightness,1)) saturate(.8) drop-shadow(0 5px 5px #032f4930)}
.fish.is-selected .fish-art{filter:brightness(1.05) drop-shadow(0 0 10px #baf5e685)}
.fish::after{content:'';position:absolute;top:65%;left:20%;width:60%;height:9%;border-radius:50%;background:#052f45;opacity:var(--floor-shadow,0);filter:blur(5px);transform:translateY(14px) scaleY(.55);pointer-events:none;z-index:-1}

/* Quiet local clock, always available in immersive mode. */
.local-clock{display:none;position:absolute;right:24px;top:18px;z-index:8;pointer-events:none;text-align:right;color:#e7ffff;text-shadow:1px 2px #215168,2px 3px #123a50,3px 5px 9px #001b38cc;font-variant-numeric:tabular-nums}
.local-clock time{display:block;font-size:clamp(27px,3.5vw,50px);font-weight:700;letter-spacing:1px;line-height:1.2;transform:perspective(600px) rotateY(-7deg)}
.local-clock span{display:block;font-size:clamp(10px,1.2vw,15px);margin-top:7px;color:#e5f9f7;text-shadow:0 2px 5px #002034}
.app:fullscreen #localClock{display:block!important}
.scene-timer{width:clamp(220px,34vw,450px);top:66%;transform:translate(-50%,-50%) perspective(800px) rotateY(-10deg) rotateX(5deg)}
.scene-timer strong{font-size:clamp(72px,10vw,145px);letter-spacing:-4px;color:#d0f4f8ba;text-shadow:1px 1px 0 #b8e5e9,2px 3px 0 #518a9baa,3px 5px 0 #39738caa,4px 7px 0 #28617c99,5px 9px 0 #17476588,8px 15px 14px #00243a99,0 0 22px #adfaff38}
.scene-timer[data-status=done] strong{color:#f5e4b9d9;text-shadow:1px 2px #bcad7e,3px 5px #687c7d,6px 10px 20px #01384b}
.focus-timer>strong{font-size:clamp(68px,11vw,128px);font-variant-numeric:tabular-nums;text-shadow:1px 2px #70a5ac,3px 5px #39707e,5px 8px 14px #041e3099}
.birthday-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fish-birthday{position:absolute;top:-8px;right:2px;font-size:22px;filter:drop-shadow(0 0 6px #fff2c8);pointer-events:none}
.birthday-message{padding:24px;border-radius:20px;background:#ead29912;border:1px solid #f8df9445;color:#fff2c6;text-align:center;font-size:18px;line-height:1.8}
.app:fullscreen .birthday-fish{pointer-events:auto}
.app:fullscreen #eggBed .birthday-fish{pointer-events:auto}
@media(max-width:600px){.local-clock{right:16px;top:14px}.scene-timer{width:240px}.scene-timer strong{font-size:78px;letter-spacing:-3px}.fish-birthday{font-size:18px}}

/* Light follows the animal's transparent silhouette, never a badge or oval. */
.fish.birthday-fish .fish-art{filter:brightness(1.13) saturate(1.08) drop-shadow(0 0 4px #fff5ddb3) drop-shadow(0 0 13px #fff1b87a) drop-shadow(0 0 24px #a7edf24d)}
.fish.is-hungry:not(.birthday-fish) .fish-art{filter:brightness(.87) saturate(.72) drop-shadow(0 4px 3px #032f494d)}
.fish-birthday{right:-5px;top:-12px;font-size:18px}
.fish-hunger{display:block;width:max-content;max-width:150px;margin:3px auto 0;font-size:8px;background:#153844b3;border-color:#eed9a733;color:#f7e6c3}
/* Translucent, refractive-looking surfaces keep the aquarium visible. */
dialog,.behavior-modal{background:linear-gradient(135deg,#c3f4ec26 0%,#32768730 28%,#09334770 75%,#bddfe815 100%);backdrop-filter:blur(10px) saturate(145%);-webkit-backdrop-filter:blur(10px) saturate(145%);border:1px solid #d3fff275;border-radius:30px;box-shadow:inset 0 2px 1px #effffb75,inset 1px 0 0 #ecfff638,inset -1px -2px 1px #d3fffb35,0 24px 70px #001c335c;color:#f1ffff;text-shadow:0 1px 3px #032431b3}
dialog::backdrop{background:#00172524;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
dialog .settings-note,dialog .modal-intro,dialog p,dialog small{color:#d4e9eb}
dialog .activity-card,dialog .species-card,dialog .behavior-choice,dialog .button,dialog .child-share,dialog .toggle-row,dialog .behavior-nav button{background:linear-gradient(135deg,#e2fffa18,#c6e9f108);border-color:#d2f8ef47;box-shadow:inset 0 1px 0 #f4fffc24}
dialog .button.primary{background:linear-gradient(125deg,#bdf7ddc9,#7ed8c2a8);color:#123f45;text-shadow:none;border-color:#e2fff9a3}
dialog .button.danger{background:#953d493d;color:#ffe1e2;border-color:#ffc0c154}
dialog .field input,dialog .field textarea,dialog .field select,dialog .species-search{background:#062c3c59;border-color:#d4f4f052;box-shadow:inset 0 1px 6px #001a2626;color:#f3ffff}
dialog select option{background:#123e4d;color:#f3ffff}
dialog .button:hover:not(:disabled),dialog .activity-card:hover,dialog .behavior-choice:hover:not(:disabled){background-color:#d5fff52b;border-color:#dffffba6}
.modal-back{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;margin:0 0 19px;border:1px solid #d3fff25c;border-radius:20px;background:linear-gradient(140deg,#ddfff21f,#d7f1ff09);color:#ecfff9;box-shadow:inset 0 1px 0 #ffffff40;font-size:12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){dialog,.behavior-modal{background:#164554f2}}
@media(prefers-reduced-transparency:reduce){dialog,.behavior-modal{background:#103a49;backdrop-filter:none;-webkit-backdrop-filter:none}dialog::backdrop{background:#032431b5}}
@media(max-width:650px){dialog,.behavior-modal{border-radius:24px}.modal-back{margin-bottom:14px}}

/* Jointed swimming: the tail flexes at its root, while the face stays steady.
   A subpixel overlap avoids a hairline at the join during perspective turns. */
.fish-art{position:relative;display:block;flex-shrink:0}
.fish-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.fish-tail-image{display:none}
.has-tail .fish-body-image{clip-path:inset(0 0 0 calc(var(--tail-joint) - .3px))}
.has-tail .fish-tail-image{display:block;clip-path:inset(0 calc(100% - var(--tail-joint)) 0 0);transform-origin:var(--tail-joint) 50%;transform:rotateY(var(--tail-yaw,0deg)) skewY(var(--tail-flex,0deg))}
.no-motion .fish-tail-image,.is-hungry .fish-tail-image{transform:none}
/* Slow, independent light passes: broad rays in the water and soft sand ripples. */
@media(prefers-reduced-motion:reduce){.fish-tail-image{transform:none!important}}

/* Management controls stay reachable while the student list scrolls. */
.panel-heading-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.panel-top,.panel-tabs,.panel-bottom,.class-progress{flex-shrink:0}
.panel-content{min-height:0}
.panel-close{width:36px;height:36px;background:#bce8e914;border-color:#d4f5f45c;color:#efffff}
.fish.is-absent{opacity:1}
.fish.is-absent .fish-art{filter:brightness(.84) saturate(.4) drop-shadow(0 3px 4px #032f4933)}
.fish.is-absent .fish-egg{opacity:1;filter:brightness(.84) saturate(.4)}
.fish.is-absent .fish-tail-image{transform:none}
/* Compact, readable scoring. One composited glass surface per dialog. */
.behavior-modal{width:min(1060px,calc(100% - 32px));text-shadow:none;background:linear-gradient(125deg,#174959ec,#0a3044eb)}
.behavior-modal .behavior-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.behavior-modal .behavior-choice{min-height:126px;padding:28px 9px 12px;gap:8px;background:#143d4fe8;border-color:#b9eade60}
.behavior-modal .behavior-check{font-size:24px;width:30px;height:30px}
.behavior-modal .behavior-choice strong{font-size:15px;font-weight:700;line-height:1.35;color:#fff}
.behavior-modal .behavior-choice small{font-size:11px;color:#c4dce0}
.behavior-modal .behavior-choice b{font-size:12px;font-weight:750;color:#bcf4d3}
.behavior-modal .development-choice b{color:#ffd5b4}
.behavior-profile{margin:8px 0;padding-bottom:8px}.behavior-profile img{width:64px;height:48px}
.behavior-modal .student-facts{padding:12px;margin-bottom:12px}.behavior-modal .growth-summary{padding:10px;margin:10px 0}
.behavior-tabs{display:flex;gap:8px;margin:0 0 14px}.behavior-tabs button{min-height:44px;padding:10px 14px;border:1px solid #b4dedb55;border-radius:10px;background:#0b2e40;color:#d9edef;font-weight:700}
.behavior-tabs [aria-selected=true]{background:#a5e6ce;color:#133d45;border-color:#a5e6ce}
.device-quality{margin-bottom:22px}.device-quality small{font-size:12px;line-height:1.5;color:#d3e7e6}
dialog *,.fish-name,.fish-points,.fish-hunger{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.dialog-open dialog *{animation-play-state:running!important}
.dialog-open dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#03243165}
html.performance-lite dialog{background:linear-gradient(135deg,#1b4a59fa,#092f41fa);text-shadow:none}
html.performance-lite .scene-kelp{display:none}
/* Coral bubbles rise from the two coral banks without adding more particles. */
#aquarium[data-theme="coral-island"] .bubble{bottom:12%;}
html.performance-lite .bubbles i:nth-child(n+10){display:none}
html.performance-lite .fish-art,html.performance-lite .fish::after{filter:none!important}
html.performance-lite .birthday-fish .fish-art{filter:drop-shadow(0 0 7px #c0fff5)!important}
html.performance-lite .fish-name,html.performance-lite .fish-points{background:#0a3046e6}
html.performance-lite .student-panel{background:#103846f5}
@media(max-width:700px){.behavior-modal .behavior-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.behavior-modal .behavior-choice strong{font-size:14px}.behavior-tabs button{padding:9px;font-size:12px}}
html.performance-lite .fish.is-absent .fish-art{opacity:1!important;filter:brightness(.84) saturate(.4)!important}
html.performance-lite .fish.is-hungry .fish-art{opacity:1!important;filter:brightness(.9) saturate(.75)!important}

/* The picker keeps student selection, with compact four-column creature cards. */
dialog.species-picker-modal{width:min(1240px,calc(100% - 32px));max-height:94svh;padding:20px 26px}
.species-picker-modal .modal-back{margin-bottom:8px}
.species-picker-modal .modal-heading{margin-bottom:8px}
.species-picker-modal .modal-intro{margin:3px 0 10px;font-size:13px;line-height:1.5}
.species-picker-modal .field{margin:8px 0}
.species-picker-modal .species-group{margin:8px 0;padding:0;border:0}
.species-picker-modal .species-group legend{margin:0 0 8px;font-size:13px;font-weight:650;color:#d9f2ed}
.species-picker-modal .species-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:2px 4px 8px;scrollbar-width:thin}
.species-picker-modal .species-card{min-height:112px;padding:7px 10px;gap:3px;border-radius:14px;display:grid;grid-template-rows:58px auto 1fr;justify-items:center;align-content:center;text-align:center}
.species-picker-modal .species-card img{width:100%;height:56px;object-fit:contain}
.species-picker-modal .species-card strong{font-size:12px;line-height:1.25;color:#f0fffb}
.species-picker-modal .species-card small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:9px;line-height:1.25;color:#b7d6d3}
.species-picker-modal .species-result-count{margin:7px 0 0;font-size:11px;color:#bfe3dc}
.fish-name{margin-top:calc(6px - var(--label-adjustment,0px))}
@media(max-width:800px){.fish-points{top:calc(-20px - var(--points-gap, 8px) + var(--label-adjustment,0px))}}
/* Egg cards use a compact label plate so names and scores remain legible on the sand. */
.egg-bed .fish-art{height:0;aspect-ratio:auto;flex:0 0 0;visibility:hidden}
.egg-bed .fish-egg{top:calc(6px + var(--egg-size,48px)*.35);width:calc(var(--egg-size,48px)*.7);height:calc(var(--egg-size,48px)*.7)}
.egg-bed .fish-name{margin-top:calc(var(--egg-size,48px)*.7 + 7px);max-width:var(--egg-label-width,82px);font-size:var(--egg-label-size,10px);line-height:1.2}
.egg-bed .fish-points{top:-17px;font-size:10px;padding:2px 5px}
.egg-bed .fish-hunger{font-size:8px}
.leaderboard{list-style:none;padding:0;margin:16px 0;display:grid;gap:7px;scrollbar-width:thin}
.leaderboard li{display:grid;grid-template-columns:34px 48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid #bcebdc25;border-radius:14px;background:#a8e9db0b}
.leaderboard .rank-medal{font-size:19px;text-align:center}.leaderboard img{width:46px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 4px #001c2940)}
.leaderboard .rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}.leaderboard .rank-score{font-size:12px;font-weight:750;color:#c8f4d9;white-space:nowrap}
@media(max-width:700px){dialog.species-picker-modal{padding:16px 14px}.species-picker-modal .species-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}.species-picker-modal .species-card{min-height:102px;grid-template-rows:50px auto 1fr;padding:6px}.species-picker-modal .species-card img{height:48px}.species-picker-modal .species-card strong{font-size:11px}.leaderboard li{grid-template-columns:28px 40px minmax(0,1fr) auto;gap:7px;padding:8px}.leaderboard img{width:38px;height:34px}.leaderboard .rank-name{font-size:11px}.leaderboard .rank-score{font-size:10px}}
/* Four-species prototype keeps the existing art box, labels and depth layers. */
.fish-body-image{mask-image:var(--body-mask,none);-webkit-mask-image:var(--body-mask,none);mask-size:100% 100%;-webkit-mask-size:100% 100%}
.fish-art .creature-joint{display:block;pointer-events:none}
/* Read-only parent reports never enable teacher actions or other fish. */
.view-only.parent-view .scene-controls > [data-action="parent-history"]{display:inline-flex!important;align-items:center;font-size:12px;padding:9px 12px}
.view-only.parent-view .fish.parent-child{cursor:pointer;pointer-events:auto!important}
.view-only.parent-view .fish.parent-child .fish-name{border-color:#b5f2d7;box-shadow:0 0 0 1px #b5f2d72b}
.parent-history-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.parent-history-facts span{padding:12px;border:1px solid #d6fff52e;border-radius:14px;font-size:12px;color:#c9e7e7}
.parent-history-facts strong{display:block;font-size:22px;color:#f1ffff;margin-top:7px;font-variant-numeric:tabular-nums}
.parent-history-list{list-style:none;padding:0;margin:16px 0;scrollbar-width:thin}
.parent-history-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 5px;border-bottom:1px solid #c9fff120}
.parent-history-entry strong{display:block;font-size:14px}.parent-history-entry small{display:block;font-size:11px;margin-top:6px;color:#b5d4d6}
.parent-history-entry b{white-space:nowrap;color:#b8f2d9;font-size:14px}.parent-history-entry b.negative{color:#ffd3c3}
@media(max-width:600px){.parent-history-facts{gap:6px}.parent-history-facts span{padding:9px;font-size:10px}.parent-history-facts strong{font-size:18px}.parent-history-entry b{font-size:12px}}
.fish-art .creature-model{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.fish.has-3d .fish-art img{visibility:hidden}
.fish.has-3d .creature-model{display:block}

/* The dialog owns list scrolling; its toolbar stays reachable on long forms. */
html{scrollbar-gutter:stable}
html.aquarium-modal-open,body.dialog-open{overflow:hidden;overscroll-behavior:none}
#modal{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#779f9f transparent}
#modalContent{min-width:0;overflow:visible}
#modal :is(.species-grid,.finder-results,.group-students,.leaderboard,.parent-history-list){max-height:none;overflow:visible;overscroll-behavior:auto}
.modal-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:4px 0;background:linear-gradient(135deg,#1d4c59ed,#113c4bed);border-radius:12px}
.modal-toolbar .modal-back{margin:0;min-height:38px}
.modal-toolbar .icon-button{min-width:38px;min-height:38px}
#modal.group-reward-modal{width:min(900px,calc(100% - 30px));max-height:94svh;padding:18px 22px}
.group-reward-modal .modal-heading{margin-bottom:8px}
.group-reward-modal .modal-heading .eyebrow{display:none}
.group-reward-modal .modal-heading h2{font-size:24px;line-height:1.25;margin:0}
.group-reward-modal .modal-intro{margin:0 0 12px;font-size:12px;line-height:1.5}
.group-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:end}
.group-controls .field{min-width:0;gap:5px;margin:0}
.group-controls .field select{min-height:44px;padding:10px 12px}
.group-controls .settings-actions{margin:0;gap:7px;flex-wrap:nowrap}
.group-controls .button{min-height:44px;padding:10px 12px}
.group-reward-modal .group-students{margin:12px 0}
.group-reward-modal .group-student{padding:9px 12px;min-height:54px}
.group-reward-modal .group-student strong{font-size:13px}
.group-reward-modal .group-student small{margin-top:3px}
@media(max-width:650px){#modal.group-reward-modal{padding:14px;width:calc(100% - 20px)}.group-controls{grid-template-columns:1fr;gap:8px}.group-controls .settings-actions{flex-wrap:wrap}.group-controls .button{flex:1}.group-reward-modal .modal-heading h2{font-size:22px}.modal-toolbar{gap:8px}}
/* A lightweight turn picker: one image, bounded previews, no extra blur layers. */
.random-button{color:#c1f5df;background:#104c5fbf}
#modal.random-picker-modal{width:min(620px,calc(100% - 24px));padding:20px 26px;max-height:94svh}
/* Reuse the dialog's single glass layer; the picker adds only static highlights. */
#modal.random-picker-modal{background:radial-gradient(ellipse at 0 0,#d8fff747,transparent 52%),radial-gradient(ellipse at 100% 100%,#a7eee928,transparent 60%),linear-gradient(135deg,#39788954,#093b50b8);border:1px solid #d6fff29c;box-shadow:inset 0 2px 1px #effffb80,inset 1px 0 0 #ecfff640,inset -1px -2px 1px #d3fffb45,0 24px 70px #001c335c}
.random-picker-modal .modal-toolbar{background:linear-gradient(135deg,#c4fff512,#0b425738);border:1px solid #d5fff12b;padding:5px 7px;border-radius:20px}
.random-picker-modal .picker-stage{background:radial-gradient(ellipse at 50% 22%,#d1fff529,transparent 65%),linear-gradient(145deg,#bcfff510,#09354a33);border-color:#dcfff66b;box-shadow:inset 0 1px 0 #effffb38}
.random-picker-modal #pickerName{text-shadow:0 2px 8px #032431b3}
html.performance-lite #modal.random-picker-modal{background:radial-gradient(ellipse at 0 0,#86d5cf1c,transparent 60%),linear-gradient(135deg,#174e60f5,#092f41fa);text-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#modal.random-picker-modal{background:linear-gradient(135deg,#245967f5,#103a49fa)}}
@media(prefers-reduced-transparency:reduce){#modal.random-picker-modal{background:#103a49;backdrop-filter:none;-webkit-backdrop-filter:none}}
.random-picker-modal .modal-heading{margin-bottom:8px}.random-picker-modal .modal-heading .eyebrow{display:none}
.random-picker-modal .modal-heading h2{font-size:27px;margin:0}
.picker-intro{margin:0 0 10px;color:#c1e3df;font-size:12px}
.picker-stage{position:relative;isolation:isolate;text-align:center;padding:20px 12px 24px;overflow:hidden;border:1px solid #c5f8ed40;border-radius:24px;background:radial-gradient(ellipse at 50% 37%,#90e9dc20,transparent 65%),linear-gradient(150deg,#184f6033,#062d4977)}
.picker-orbit{position:absolute;width:216px;height:216px;border:1px solid #b4f1e72e;border-radius:50%;top:-15px;left:50%;transform:translateX(-50%);z-index:-1;box-shadow:0 0 0 22px #beffec04,0 0 0 44px #beffec03}
.picker-preview{height:138px;display:grid;place-items:center}.picker-preview img{width:200px;height:136px;object-fit:contain;filter:drop-shadow(0 8px 10px #002e4940)}
#pickerPlaceholder{display:grid;place-items:center;width:90px;height:90px;border:1px solid #b8e9df52;border-radius:50%;background:#a7eddb0c;color:#bcf2df}#pickerPlaceholder svg{width:40px;height:40px}
#pickerStatus{color:#b8eed6;font-size:14px;margin:12px 0 7px;min-height:22px}
#pickerName{display:block;color:white;font-size:clamp(23px,4vw,34px);font-weight:750;line-height:1.25;overflow-wrap:anywhere;min-height:43px}
#pickerHint{font-size:12px;line-height:1.6;color:#c2deda;margin:9px 0 0}
.picker-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}.picker-actions>.primary{min-width:190px}
#pickerResultActions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#pickerResultActions .button{font-size:12px;padding:10px 12px}
.picker-note{line-height:1.7;margin:18px 0 0}.picker-round{margin:8px 0 0;text-align:center;font-size:11px;color:#b6e2cf;min-height:16px}
.picker-stage.has-result{border-color:#b8f6d880;box-shadow:inset 0 0 32px #abf6dc0b}
.picker-stage.is-celebrating .picker-preview img{animation:picker-reveal-fish .95s cubic-bezier(.2,.75,.3,1) both}
.picker-stage.is-celebrating #pickerName{animation:picker-reveal-name .65s .12s ease-out both}
.picker-stage.is-drawing .picker-orbit{border-style:dashed;animation:picker-wheel 2.4s cubic-bezier(.15,.5,.3,1) both}
.picker-stage.is-celebrating .picker-orbit{animation:picker-ripple .95s ease-out both}
.picker-sparkles{position:absolute;left:50%;top:92px;pointer-events:none;z-index:2}
.picker-sparkles i{position:absolute;display:block;width:7px;height:10px;border-radius:3px;background:#adebd5;opacity:0}
.picker-sparkles i:nth-child(3n){background:#ffeab3}.picker-sparkles i:nth-child(3n+1){background:#bdefff;border-radius:50%;width:7px;height:7px}
.is-celebrating .picker-sparkles i{animation:picker-sparkle .95s ease-out both;animation-delay:calc(var(--spark)*12ms)}
.picker-sound{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px 0 0;color:#d4eee6;font-size:12px;min-height:32px;cursor:pointer}
.picker-sound input{width:18px;height:18px;accent-color:#a5e7d0;margin:0}.picker-sound small{color:#ffe3b2}
@keyframes picker-reveal-fish{0%{transform:translateY(24px) scale(.5) rotate(-9deg);opacity:0}55%{transform:translateY(-7px) scale(1.16) rotate(3deg);opacity:1}78%{transform:translateY(2px) scale(.97) rotate(-1deg)}100%{transform:none;opacity:1}}
@keyframes picker-reveal-name{from{transform:translateY(10px) scale(.93);opacity:0}to{transform:none;opacity:1}}
@keyframes picker-wheel{from{transform:translateX(-50%) rotate(-420deg)}to{transform:translateX(-50%) rotate(0)}}
@keyframes picker-ripple{from{transform:translateX(-50%) scale(.65);opacity:.9}to{transform:translateX(-50%) scale(1.25);opacity:0}}
@keyframes picker-sparkle{0%{transform:translate(0,10px) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-turn)) scale(.6);opacity:0}}
html.performance-lite .picker-sparkles i:nth-child(even){display:none}
.history-empty{padding:25px 0;color:#c9e8e0;font-size:14px}
@media(max-width:650px){#modal.random-picker-modal{padding:14px}.picker-stage{padding:12px 10px 18px}.picker-preview{height:110px}.picker-preview img{width:170px;height:110px}.picker-orbit{width:180px;height:180px}.picker-note{font-size:11px}.random-picker-modal .modal-heading h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.picker-stage.is-celebrating *,.picker-stage.is-drawing *{animation:none!important}.picker-sparkles{display:none}}

@media(max-width:400px){.finder-button span{display:none}.finder-button{width:36px;padding:0;justify-content:center}}
/* Disabled preview/visitor controls retain a solid creature silhouette. */
.fish:disabled{opacity:1}

/* Small transparent canvases deform the surface/floor reflections behind the fish.
   No whole-scene filter, background copy, WebGL or per-pixel rendering. */
.water-light,.water-waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:none;animation:none;transform:none;opacity:1;mix-blend-mode:screen}
.water-light::before,.water-light::after,.water-waves::before,.water-waves::after{content:none;animation:none}

/* The desktop management drawer overlays a stable scene instead of reseeding its grid. */
@media(min-width:801px){
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .swim-area{top:145px;right:20px;bottom:30px}
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .egg-bed{right:20px}
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .class-pearl{left:50%;bottom:32px}
}
@media(min-width:801px) and (max-width:1100px){body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .swim-area{top:170px}}
/* Mobile management stays below the same swimming viewport. */
@media(max-width:800px){
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .student-panel{margin-top:calc(181px + var(--mobile-swim-height,320px) + 24px)}
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .swim-area{inset:181px 8px auto;height:var(--mobile-swim-height,320px)}
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .egg-bed{inset:181px 8px auto;height:var(--mobile-swim-height,320px)}
 body:not(.view-only) .app:not(:fullscreen) .aquarium:not(.is-empty) .class-pearl{left:50%;top:calc(181px + var(--mobile-swim-height,320px) - 125px);bottom:auto}
}

.effect-range{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}.effect-range output{font-size:12px;color:#b9efda;font-variant-numeric:tabular-nums}.effect-range input{grid-column:1/-1;width:100%;height:28px;accent-color:#a5e7d0;touch-action:pan-y}.effect-range small{grid-column:1/-1;color:#bdd4d8;font-size:11px}.effect-range input:disabled{opacity:.4}
.fish-chat.teacher-note{transition:none;width:190px;max-width:calc(100vw - 32px);font-size:12px;font-weight:650;line-height:1.5;white-space:normal;text-align:center;border:1px solid #a5dfc6;background:#e7fbf3;color:#16453e;z-index:5;transform:translate(-50%,8px) scale(.96)}
.fish-chat.teacher-note.visible{transform:translate(-50%,0) scale(1)}
@media(prefers-reduced-motion:reduce){.fish-chat.teacher-note{transition:none}}

.fish.is-mentoring{z-index:6!important}

.bubbles{opacity:var(--bubble-opacity,.825)}
.fish.is-listening{z-index:5!important}

/* A rounded, textured body cross-section keeps sprite turns from flattening
   into a card. Both pieces reuse the selected, cached image. No blur/WebGL. */
.fish-side{position:absolute;inset:0;display:block;transform-origin:50% 50%;z-index:1}
.fish-turn-volume{position:absolute;display:block;left:50%;top:51%;width:var(--turn-width,30%);height:var(--turn-height,43%);border-radius:50%;overflow:hidden;transform:translate(-50%,-50%) scaleX(0);pointer-events:none;z-index:2}
.fish-art .fish-turn-volume img{width:450%;height:225%;max-width:none;inset:-63% auto auto -310%;object-fit:fill}
.fish-turn-volume::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 32% 28%,#ffffff28,transparent 52%),linear-gradient(90deg,#001c393d,transparent 34%,transparent 62%,#001c395c);pointer-events:none}
.is-egg .fish-turn-volume,.has-3d .fish-turn-volume{display:none}

/* A failed cloud write must be visible on a classroom board, including fullscreen. */
.fish-name{display:inline-flex;align-items:center;gap:4px}
.fish-label-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily-champion-medal{flex:none;font-size:12px;line-height:1;filter:none}
.cloud-warning{position:sticky;top:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:#60451f;color:#fff1cc;border-bottom:1px solid #bc9859;font-size:12px;z-index:12}
.cloud-warning span{flex:1;min-width:180px;line-height:1.5}.cloud-warning .button{min-height:36px;padding:7px 12px;background:#fff0cf18;border-color:#e6c99280}
.app:fullscreen #aquarium>.cloud-warning{position:absolute;top:90px;left:16px;right:16px;border:1px solid #bc9859;border-radius:12px}
.sync-copy-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.sync-copy-summary section{padding:14px;border:1px solid #a8e6d14d;border-radius:14px;background:#052d40a6}
.sync-copy-summary h3,.sync-copy-summary p{margin:0 0 6px}
.sync-comparison{width:100%;table-layout:fixed;border-collapse:collapse;margin:18px 0;font-size:14px}
.sync-comparison caption{text-align:left;padding:10px 0;font-weight:700}
.sync-comparison th,.sync-comparison td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid #b5e7e340;overflow-wrap:anywhere}
.sync-comparison th:first-child{width:25%}.sync-comparison strong,.sync-comparison span,.sync-comparison small{display:block}
.sync-comparison span,.sync-comparison small{font-size:12px;line-height:1.5;margin-top:5px}
.sync-comparison .sync-different{background:#fff0cb0d}.sync-different th small{color:#ffe4a4}
@media(max-width:480px){.sync-comparison th,.sync-comparison td{padding:10px 5px}}
@media(max-width:360px){.sync-copy-summary{grid-template-columns:1fr}}

/* Seasonal decoration shares the swimmers' depth layers; it never intercepts touch. */
.seasonal-suggestion{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#123f4c;color:#e7faf2;border-bottom:1px solid #94d8c84d;flex-wrap:wrap}
.seasonal-suggestion>div{flex:1 1 240px;display:grid;gap:3px}.seasonal-suggestion strong{font-size:14px}.seasonal-suggestion span{font-size:12px;color:#b9dbdc}.seasonal-suggestion .button{font-size:12px;padding:10px 14px;min-height:40px}
.seasonal-preview{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:16px;margin-bottom:16px}
.seasonal-snowman{position:absolute;right:5%;bottom:0;width:min(34%,360px);height:auto;aspect-ratio:1;z-index:2;pointer-events:none;object-fit:contain;filter:drop-shadow(0 10px 7px #072d3d55)}
.seasonal-snow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;--snow-fall:1200px}
.seasonal-flake{position:absolute;top:-16px;left:var(--left);width:var(--size);height:var(--size);background:#f3ffff;border-radius:50%;opacity:.55;animation:seasonal-snowfall var(--duration) var(--delay) linear infinite}
@keyframes seasonal-snowfall{0%{transform:translate3d(0,-20px,0)}50%{transform:translate3d(14px,calc(var(--snow-fall)/2),0)}100%{transform:translate3d(-8px,var(--snow-fall),0)}}
.seasonal-snow.is-paused .seasonal-flake,.no-motion .seasonal-flake,.page-hidden .seasonal-flake{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.seasonal-flake{animation:none}}
@media(max-width:800px){.seasonal-suggestion{padding:8px 12px}.seasonal-snowman{right:2%;width:min(46%,260px)}}

/* The flag sits beyond every swimmer. Lettering shares snowman's depth layer:
   fish at depth 1 pass behind it, fish at depth 3 pass in front. */
/* A feathered patch of the original photograph; background-cover alignment is
   computed by the seasonal controller for every viewport and orientation. */
.republic-flag{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.republic-flag canvas{position:absolute;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in}
.republic-decor{position:absolute;left:6%;bottom:4%;width:88%;z-index:2;pointer-events:none;container-type:inline-size;perspective:1000px}
.republic-lettering{position:relative;transform-style:preserve-3d;transform:rotateX(5deg) scaleX(var(--letter-scale,1));filter:drop-shadow(3px 7px 3px #341a1a66);font-family:Impact,'Arial Narrow','Roboto Condensed',sans-serif;font-weight:1000;letter-spacing:-.02em;font-size:clamp(16px,5.5vw,76px);font-size:8.4cqw;line-height:1.16;text-align:center}
.republic-type{position:absolute;inset:0;display:block;color:#721a16;transform:translate3d(calc(var(--depth)*.45px),calc(var(--depth)*.5px),calc(var(--depth)*-1px));-webkit-text-stroke:1px #70150f}
.republic-type b{display:inline-block;white-space:nowrap;font-weight:inherit}.republic-type.front{position:relative;transform:translateZ(0);color:#b80000;-webkit-text-stroke:.085em #fffaf0;paint-order:stroke fill;text-shadow:0 2px #680a0a}
@media(max-width:800px){.republic-decor{left:3%;width:94%;bottom:3%}.republic-lettering{font-size:5.6vw;font-size:8.4cqw}}
.preview-access .button{font-size:14px}

/* Short reward gestures compose with swimming; names and routes stay still. */
.fish.is-rewarding::before{content:'';position:absolute;inset:4% 8% 32%;border:1px solid #d7f9d999;border-radius:50%;background:radial-gradient(ellipse,#d6f9c923,transparent 70%);box-shadow:0 0 10px #caffd94d;opacity:var(--reward-glow,0);pointer-events:none}
.fish.is-rewarding.is-egg::before{display:none}
.fish.is-rewarding .fish-egg{box-shadow:inset -3px -5px 7px #bd4c0057,inset 2px 2px 4px #fff6cba1,0 0 12px #fff0a680}
.goal-celebration{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.goal-water-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 15%,#c8ffe025,transparent 65%);animation:goal-water-light 5.4s ease-in-out both}
.goal-celebration-banner{position:absolute;left:50%;top:clamp(100px,26%,230px);transform:translateX(-50%);display:grid;justify-items:center;gap:5px;width:max-content;max-width:calc(100% - 30px);padding:16px 30px;border:1px solid #d0f4c38a;border-radius:22px;background:linear-gradient(125deg,#0b4d59ee,#1f6259ed);color:#edfff0;box-shadow:0 5px 20px #00334540;text-align:center;animation:goal-banner 5.4s ease both}
.goal-celebration-banner>span{font-size:9px;letter-spacing:2px;color:#d2efad;font-weight:800}
.goal-celebration-banner>strong{font-size:clamp(19px,3vw,30px);line-height:1.3}
.goal-celebration-banner>small{font-size:12px;max-width:440px;overflow-wrap:anywhere;line-height:1.5;color:#d3eee7}
.goal-bubble{position:absolute;bottom:5%;left:var(--goal-left);width:var(--goal-size);height:var(--goal-size);border:1px solid #e5ffcfaa;border-radius:50%;background:radial-gradient(circle at 30% 25%,#edffdd6b,transparent 68%);animation:goal-bubble 4.5s var(--goal-delay) ease-out both}
.class-pearl.is-goal-celebrating{animation:goal-pearl 5.4s ease-in-out both}
@keyframes goal-water-light{0%,100%{opacity:0}30%,70%{opacity:1}}
@keyframes goal-banner{0%,100%{opacity:0;transform:translate(-50%,8px) scale(.98)}15%,80%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes goal-bubble{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}100%{opacity:0;transform:translate(15px,var(--goal-rise))}}
@keyframes goal-pearl{0%,100%{filter:drop-shadow(0 10px 13px #052f4460)}40%,65%{filter:drop-shadow(0 0 15px #eaffbc95)}}
.app:fullscreen #aquarium>#rewardAnnouncement{display:block!important}
html.performance-lite .goal-celebration-banner{box-shadow:none}
html.performance-lite .fish.is-rewarding::before{box-shadow:none}
html.performance-lite .class-pearl.is-goal-celebrating{animation:none}
.no-motion .goal-celebration,.no-motion .fish.is-rewarding::before{display:none}
@media(prefers-reduced-motion:reduce){.goal-celebration,.fish.is-rewarding::before{display:none}.class-pearl.is-goal-celebrating{animation:none}}

/* Ray wings bend on one continuous surface; its uncut sprite is the fallback. */
.fish-art .ray-surface{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}

/* Accessories share the fish's growth, heading, depth and reward transform.
   They never introduce new movement routes or sliced body parts. */
.fish-art img.fish-accessory,.cosmetic-preview-art img.fish-accessory{position:absolute;inset:auto;max-width:none;height:auto;object-fit:contain;pointer-events:none;z-index:4;filter:drop-shadow(0 1px 1px #173f4660);transform-origin:50% 77%}
.is-egg .fish-accessory{display:none}
.cosmetics-modal{width:min(1040px,calc(100vw - 28px))}
.cosmetic-layout{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:26px;align-items:start}
.cosmetic-preview-stage{position:sticky;top:76px;min-height:300px;padding:24px 18px 16px;border:1px solid #9ad5d33b;border-radius:24px;background:radial-gradient(ellipse at 45% 16%,#b7e6d32e,transparent 60%),linear-gradient(155deg,#125e70c9,#123c51ed);box-shadow:inset 0 -25px 55px #a5c9ba17;text-align:center;overflow:hidden;isolation:isolate}
.cosmetic-preview-stage:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.17;background:url('/assets/akvaryum/arka-planlar/sakin-lagun.jpg') center/cover}
.cosmetic-preview-float{display:grid;place-items:center;min-height:215px;animation:cosmetic-swim 7s ease-in-out infinite}
.cosmetic-preview-art{position:relative;display:block;width:min(100%,300px);aspect-ratio:640/426;filter:drop-shadow(0 7px 9px #032b4440)}
.cosmetic-preview-body{display:block;width:100%;height:100%;object-fit:contain}
.cosmetic-preview-label{display:inline-block;padding:6px 14px;border:1px solid #abd4cb55;border-radius:10px;background:#123e50d9;font-size:15px;font-weight:650}
#cosmeticPreviewDescription{font-size:12px;color:#c0dfdc;min-height:18px;margin:12px 0 0}
.cosmetic-options{min-width:0;margin:0 0 20px;padding:0;border:0}
.cosmetic-options legend{font-size:14px;font-weight:650;margin-bottom:12px;color:#e0f4ec}
.cosmetic-accessories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.cosmetic-option{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-width:0;min-height:94px;padding:10px 6px;border:1px solid #a0d3d340;border-radius:15px;background:#06384a58;cursor:pointer;text-align:center;font-size:11px;color:#d6e7e5;transition:background .15s,border-color .15s}
.cosmetic-option input{position:absolute;left:8px;top:8px;width:14px;height:14px;margin:0;accent-color:#a7e8cd}
.cosmetic-option:has(input:checked){background:#9be4c521;border-color:#b0eed5;box-shadow:inset 0 0 0 1px #a9e7ca66;color:#fff}
.cosmetic-option:has(input:focus-visible){outline:3px solid #c6f7e0;outline-offset:3px}
.cosmetic-option img{display:block;width:62px;height:49px;object-fit:contain}
.cosmetic-none{height:49px;display:grid;place-items:center;font-size:38px;line-height:1;color:#aacac7}
.cosmetic-option small{font-size:9px;color:#c7d7d4}
.cosmetic-option.is-locked{border-style:dashed;background:#0a32434d}
.cosmetic-options:disabled .cosmetic-option,.cosmetic-option.is-locked img{opacity:.5;cursor:default}
.cosmetic-palettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cosmetic-palettes .cosmetic-option{min-height:78px;padding-top:16px}
.cosmetic-palettes i{width:27px;height:27px;display:block;border-radius:50%;border:2px solid #dce7de70;box-shadow:inset -4px -4px 6px #10384c28,inset 3px 3px 4px #ffffff4d}
.cosmetic-layout form .form-actions{flex-wrap:wrap}
@keyframes cosmetic-swim{0%,100%{transform:translate(-7px,3px) rotate(-1deg)}50%{transform:translate(7px,-5px) rotate(1deg)}}
.cosmetic-preview-stage.is-still .cosmetic-preview-float,.no-motion .cosmetic-preview-float,html.performance-lite .cosmetic-preview-float{animation:none}
@media(max-width:700px){.cosmetic-layout{grid-template-columns:1fr;gap:20px}.cosmetic-preview-stage{position:relative;top:auto;min-height:210px;padding:12px}.cosmetic-preview-float{min-height:150px}.cosmetic-preview-art{width:225px}.cosmetic-accessories{grid-template-columns:repeat(3,minmax(0,1fr))}.cosmetic-palettes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.cosmetic-preview-float{animation:none}.cosmetic-option{transition:none}}

.character-collection-heading{margin:28px 0 14px;padding:18px 20px;border:1px solid #c5d99c45;border-radius:15px;background:linear-gradient(120deg,#b7dfac16,#a4dfe908)}
.character-collection-heading h3{font-size:17px;margin:0 0 7px;color:#d7efc5}
.character-collection-heading p{font-size:12px;line-height:1.7;margin:0;color:#bfd6d4}
.species-card.is-locked{border-style:dashed;cursor:default;background:#163a4959}
.species-card.is-locked img{opacity:.48;filter:saturate(.65)}
.species-card.is-locked strong{color:#b9ced0}
.species-card.character-card small{color:#e1dcb4}
.species-card:has(input:disabled){cursor:default}
.fish.is-character .fish-turn-volume{display:none}
/* A tiny glow is attached to the lure, behind the animal's heading transform. */
.fish[data-species="angler"] .fish-side::after{content:'';position:absolute;left:89%;top:25%;width:8%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbc057,#e8ce5233 30%,transparent 72%);pointer-events:none;animation:angler-lure 4.6s ease-in-out infinite}
@keyframes angler-lure{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:.9;transform:scale(1.12)}}
.no-motion .fish[data-species="angler"] .fish-side::after,.fish.is-hungry[data-species="angler"] .fish-side::after{animation:none;opacity:.5}
@media(prefers-reduced-motion:reduce){.fish[data-species="angler"] .fish-side::after{animation:none}}
.fish-art .expressive-effects{position:absolute;left:-30%;top:-30%;width:160%;height:160%;display:none;pointer-events:none;z-index:4}
.fish-art .expressive-effects.visible{display:block}
.fish-art .expressive-surface{position:absolute;inset:0;display:none;width:100%;height:100%;pointer-events:none}
.has-expressive-surface .fish-art .expressive-surface{display:block}
.has-expressive-surface .fish-body-image,.has-expressive-surface .fish-tail-image{visibility:hidden!important}
.fish.has-expressive-surface[data-species="angler"] .fish-side::after{display:none}
.fish.has-ray-surface .fish-body-image,.fish.has-ray-surface .fish-tail-image{visibility:hidden}
.fish.has-ray-surface .ray-surface{display:block}

.task-icon-category{max-width:330px;margin:6px 0 12px}.fish-chat.hunger-note{font-family:inherit;font-size:12px;line-height:1.4;white-space:normal;width:max-content;max-width:170px;text-align:center;padding:8px 11px}

/* One dialog scrollbar, with the current settings group kept in view. */
#modal.settings-modal{width:min(1060px,calc(100% - 28px));padding:20px 24px;max-height:93svh}
.settings-modal .modal-heading{margin-bottom:18px}
.settings-modal .modal-heading .eyebrow{display:none}
.settings-layout{display:grid;grid-template-columns:172px minmax(0,1fr);gap:25px;align-items:start}
.settings-tabs{position:sticky;top:58px;display:grid;gap:6px;padding:8px;border:1px solid #d2f8ef29;border-radius:18px;background:#062f425c}
.settings-tabs button{border:1px solid transparent;border-radius:11px;padding:12px 10px;text-align:left;font-size:12px;color:#cce5e6;background:transparent;min-height:44px}
.settings-tabs button[aria-selected=true]{color:#effff7;background:#a8ead323;border-color:#bcebd066;box-shadow:inset 3px 0 #abe8cd}
.settings-tabs button:focus-visible{outline:2px solid #b7f0d4;outline-offset:2px}
.settings-panels{min-width:0}
.settings-panels>[hidden]{display:none!important}
.settings-panels>[role=tabpanel]{min-width:0;outline-offset:5px}
.settings-panels .settings-section:first-child{border-top:0;padding-top:0;margin-top:0}
.settings-panels .inline-form{margin-top:0}
.settings-panels .settings-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.settings-menu .button{justify-content:flex-start;text-align:left;min-height:52px}
.settings-panels .toggle-row{line-height:1.6;gap:15px;border-bottom:1px solid #d0ece518;background:transparent;box-shadow:none}
.settings-panels .toggle-row input{flex:none}
.settings-panels .device-quality{margin-top:0}
/* Wide classroom boards fit three alphabetical columns; smaller screens wrap. */
#modal.group-reward-modal{width:min(1120px,calc(100% - 28px))}
.group-reward-modal .group-students{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.group-reward-modal .group-student{min-width:0;gap:9px;padding:10px}
.group-student>span{min-width:0;overflow-wrap:anywhere}
.group-reward-modal .group-student img{width:48px;flex:none}
/* Editable behavior cards expand in the same scrolling dialog. */
#modal.tasks-modal{width:min(1120px,calc(100% - 28px));padding:22px 26px}
.tasks-modal .modal-heading .eyebrow{display:none}
.tasks-modal .modal-intro{font-size:12px;line-height:1.7;margin-bottom:13px}
.task-edit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.task-edit-list .task-editor{margin:0;min-width:0}
.task-edit-list .task-editor summary{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px;min-height:138px;list-style:none}
.task-edit-list .task-editor summary::-webkit-details-marker{display:none}
.task-edit-list .task-editor summary>span:first-child{font-size:29px;grid-column:1}
.task-edit-list .task-editor summary strong{grid-column:1/-1;grid-row:2;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.task-edit-list .task-editor summary b{grid-row:1;grid-column:2;font-size:17px}
.task-edit-list .task-editor summary>span:last-child{grid-row:3;grid-column:1/-1;font-size:11px}
.task-edit-list .task-editor[open]{grid-column:1/-1;border-color:#b3efd582}
.task-edit-list .task-editor[open] summary{min-height:0;grid-template-columns:auto 1fr auto auto;align-items:center}
.task-edit-list .task-editor[open] summary>*{grid-area:auto}
.task-edit-list .task-editor[open] form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;padding-top:14px}
.task-edit-list .task-editor[open] .task-icon-picker,.task-edit-list .task-editor[open] .settings-actions{grid-column:1/-1}
.tasks-modal .new-task-form{margin-top:24px;padding:20px;border:1px solid #b2e9e12e;border-radius:18px;background:#ffffff06}
.tasks-modal .new-task-form h3{margin:0 0 3px;font-size:16px}
/* One soft blue/lavender light identifies the teacher, following its silhouette. */
.teacher-glow .fish-art::before{content:'';position:absolute;inset:-18% -10%;border-radius:50%;background:radial-gradient(ellipse at 52% 48%,#dbccff80 8%,#b7a5f466 28%,#88b8eb42 47%,#86d7ed14 63%,transparent 74%);opacity:var(--teacher-shimmer,.64);pointer-events:none}
.teacher-glow .fish-side{filter:drop-shadow(0 0 4px #cec2ffa6) drop-shadow(0 0 10px #94b9ee70)}
html.performance-lite .teacher-glow .fish-side{filter:drop-shadow(0 0 5px #bdb7f28c)}
.fish.is-rewarding:is([data-species=eel],[data-species=lina])::before{display:none}
/* Parent access uses a single scrolling sheet on phones and boards. */
#modal.sharing-modal{width:min(980px,calc(100% - 28px));padding:20px 24px;max-height:93svh}
.sharing-modal .modal-heading{margin-bottom:14px}.sharing-modal .modal-heading .eyebrow{display:none}
.parent-bulk{padding:18px;border:1px solid #a6edce60;border-radius:18px;background:#8ce9ce0c;margin-bottom:20px}
.parent-bulk h3{font-size:16px;margin:0 0 6px}.parent-bulk .settings-note{margin:6px 0 12px}
.parent-bulk-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}.parent-bulk-controls .field{margin:0}
.parent-bulk-controls .button{min-height:45px}.parent-search{margin-bottom:10px}
.child-shares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.child-shares .child-share{min-width:0;margin:0;padding:16px;gap:14px;border-radius:16px}
.child-share[hidden]{display:none!important}.child-share-header{display:flex;gap:12px;align-items:center;justify-content:space-between}
.child-share-header strong{font-size:16px;overflow-wrap:anywhere}.parent-code-state{font-size:10px;color:#b6e3d4;white-space:nowrap}
.parent-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.parent-share-actions .button{min-height:44px;padding:10px}
.parent-share-actions .button:last-child{grid-column:1/-1}.parent-share-actions .parent-whatsapp{color:#c5f7d6;border-color:#9be7bc70}
.child-share-details{font-size:12px;min-width:0}.child-share-details summary{cursor:pointer;color:#c5e2e2;padding:3px 0;min-height:28px}
.child-share-details[open] summary{margin-bottom:12px}.child-share-details .field textarea{min-height:130px;font:12px/1.6 inherit;resize:vertical}
.child-share-details .settings-actions .button{flex:1 1 40%;min-height:42px}
.parent-entry-note{overflow-wrap:anywhere}.settings-mobile-nav{display:none}
@media(max-width:650px){
 #modal.sharing-modal{padding:14px;width:calc(100% - 20px)}
 .sharing-modal .modal-heading h2{font-size:22px}.parent-bulk{padding:14px}.parent-bulk-controls{grid-template-columns:1fr;gap:10px}
 .child-shares{grid-template-columns:1fr}.parent-bulk-controls .button{width:100%}
 .settings-mobile-nav{display:grid;margin-bottom:16px}.settings-modal .settings-tabs{display:none}
}
@media(max-width:900px){.group-reward-modal .group-students{grid-template-columns:repeat(2,minmax(0,1fr))}.task-edit-list{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-layout{grid-template-columns:146px minmax(0,1fr);gap:17px}}
@media(max-width:650px){
 #modal.settings-modal,#modal.tasks-modal{padding:14px;width:calc(100% - 20px)}
 .settings-layout{grid-template-columns:1fr;gap:18px}
 .settings-tabs{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px}
 .settings-tabs button{font-size:11px;padding:9px 10px}
 .settings-panels .settings-menu{grid-template-columns:1fr}
 .task-edit-list{gap:9px}.task-edit-list .task-editor summary{padding:12px;min-height:138px}
 .task-edit-list .task-editor[open] summary{grid-template-columns:auto 1fr auto}.task-edit-list .task-editor[open] summary>span:last-child{grid-column:1/-1}
 .task-edit-list .task-editor[open] form{grid-template-columns:1fr;padding:12px}
 .task-edit-list .task-editor[open] form>*{grid-column:1}
}
@media(max-width:480px){.group-reward-modal .group-students{grid-template-columns:1fr}.task-edit-list .task-editor summary strong{font-size:12px}}