/* v136.1 — Bibi: cinematic reef & storybook art direction. */
:root{--ink:#0b2448;--gold:#fbe5b5;--foam:#e6fcff}
body{background:radial-gradient(ellipse at 50% -20%,#226ba0 0%,#0b365e 42%,#071739 82%);}
.intro h1{color:#fff0cf;text-shadow:0 4px 0 #1a3961,0 14px 35px #011633}
.intro h1 em{background:linear-gradient(100deg,#ffe7a5,#ffd0ee 55%,#c4f6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro .eyebrow{box-shadow:0 0 22px #9addff32,inset 0 1px #fff6}
.ocean{background:radial-gradient(ellipse at 22% 10%,#a0f6e663,transparent 40%),radial-gradient(ellipse at 84% 68%,#e2a2fa25,transparent 36%),linear-gradient(155deg,#1d9cac,#15517c 54%,#092350);border:2px solid #9deff9ad;box-shadow:0 28px 70px #010c2ea5,0 0 0 8px #c4faff0e,inset 0 0 50px #aafcff24}
.ocean::before{opacity:.9}
.ocean::after{background:radial-gradient(ellipse at 17% 0,#35cdb6aa,transparent 58%),linear-gradient(5deg,#04334e,#0d7c8b)}
.bubblefield{z-index:1;opacity:.86}
.art-area{z-index:2;min-height:560px;justify-content:flex-end;padding:0 0 24px;overflow:visible;isolation:isolate}
.art-halo{z-index:-1;width:110%;top:0;background:radial-gradient(ellipse,#99edfff2 0%,#b7ceff48 40%,transparent 72%);filter:blur(25px)}
.hero-art{position:absolute;z-index:-1;inset:0;width:100%;height:94%;max-height:none;object-fit:cover;object-position:49% 45%;border:0;border-radius:45% 45% 25% 25% / 22% 22% 15% 15%;mask-image:radial-gradient(ellipse 79% 69% at 50% 44%,#000 47%,#000b 64%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 79% 69% at 50% 44%,#000 47%,#000b 64%,transparent 98%);box-shadow:none;filter:saturate(1.06) contrast(1.06) drop-shadow(0 20px 40px #05194aaa)}
.art-note{position:relative;z-index:4;margin:0 auto 11px;background:linear-gradient(133deg,#fff7edeb,#ffe2f7ef 52%,#dbf8ffef);border:2px solid #fff8;box-shadow:0 9px 40px #05133c88;color:#4a3176;backdrop-filter:blur(10px);max-width:88%;transform:rotate(-1deg);border-radius:19px 26px 18px 24px}
.art-note small{color:#6c5985}
.reef-front{position:absolute;inset:auto 0 -1px;z-index:2;width:100%;height:clamp(115px,16vw,215px);pointer-events:none;filter:drop-shadow(0 -6px 22px #2cf6ee2b)}
.mini-fish{position:absolute;left:3%;top:18%;z-index:2;width:118px;height:75px;opacity:.85;filter:drop-shadow(0 5px 10px #084666);animation:schoolSwim 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes schoolSwim{to{transform:translateX(33px) translateY(-17px)}}
.reef-particles{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(circle,#fff9c5 0 1px,transparent 2px),radial-gradient(circle,#d2ffff 0 2px,transparent 4px);background-size:120px 128px,175px 199px;background-position:13px 48px,62px 12px;opacity:.55;animation:particleDrift 14s linear infinite alternate}
@keyframes particleDrift{to{background-position:13px 8px,72px 53px}}
.deco{z-index:3}
.play{z-index:3;background:linear-gradient(160deg,#102b60f5 0%,#17346dee 45%,#251b59f5 100%);border:2px solid #f8e6b6cc;border-radius:32px;color:#f1f8ff;box-shadow:0 22px 50px #040d398e,0 0 0 7px #d3efff14,inset 0 2px 0 #e8ffff30;backdrop-filter:blur(15px)}
.play::before{color:#ffdf97a3}
.leveltext{color:#c2dbff}
.pearls .pearl{box-shadow:inset -4px -4px 6px #6489aa,0 0 0 2px #d5ffff82,0 4px 10px #0007}
.pearls .pearl.done{box-shadow:0 0 0 2px #fff3bc,0 0 19px #ffe29bd1;animation:pearlPop .48s both}
@keyframes pearlPop{from{transform:scale(.55)}55%{transform:scale(1.22)}to{transform:scale(1)}}
.play h2{color:#ffebbf;text-shadow:0 2px 12px #050d3082}
.mission{color:#d9e9ff}
.artifact{background:radial-gradient(circle at 28% 21%,#fcffff,#baf4ff 39%,#82c9ef 65%,#296796);border:7px solid #f7e9ff;box-shadow:0 0 0 5px #e2faff86,0 10px 34px #060d35b3,inset -15px -22px 35px #1264a27d}
.artifact::before{background:#ffffffad}
.artifact.colored{box-shadow:0 0 0 6px #ffe6b5d1,0 0 29px #ffc9ecb0,0 14px 39px #060d35c6}
.artifact.colored .sprite{filter:drop-shadow(0 9px 7px #104174aa) drop-shadow(0 0 9px #fff)}
.sprite{filter:drop-shadow(0 8px 6px #09295daa);transition:color .45s ease,transform .45s ease,filter .45s}
.instruction{color:#ffe6b2;text-shadow:0 2px 8px #040f38}
.brush-label{color:#dfcff6}
.paint{color:#f5ecff;position:relative}
.paint .gem{border:6px solid #f9e7ff;outline:2px solid #ffe8b680;background:radial-gradient(circle at 28% 20%,#fffefce6 0%,#fff9 10%,#ffffff00 34%),radial-gradient(circle at 65% 75%,#142e6899,transparent 63%),radial-gradient(circle at 50% 44%,#ffffff55,transparent 59%),var(--color);box-shadow:0 7px 16px #030f3f80,inset -6px -9px 15px #29194e3b,0 0 17px color-mix(in srgb,var(--color),transparent 48%)}
.paint .gem::before{content:"";position:absolute;inset:7px;border:1.5px solid #ffffffa3;border-radius:50%}
.paint:hover .gem,.paint:focus-visible .gem{transform:translateY(-6px) scale(1.07) rotate(-5deg);box-shadow:0 13px 20px #010c3880,0 0 25px var(--color)}
.paint:active .gem{transform:scale(.93)}
.paint small{color:#eee8ff;font-size:13px}
.paint.try-again .gem{animation:gentleTry .38s ease}
@keyframes gentleTry{30%{transform:rotate(8deg)}65%{transform:rotate(-8deg)}}
.status{color:#fff0c5}
.btn{background:linear-gradient(150deg,#fff0bd,#ffc682);box-shadow:0 6px 0 #bf855c,0 11px 22px #0006;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #bf855c,0 7px 14px #0005}
.btn.secondary{background:linear-gradient(155deg,#ebe4ff,#c5b6f6);color:#382c75;box-shadow:0 5px 0 #8470aa,0 10px 16px #0003}
.btn.sound{background:linear-gradient(155deg,#ddffff,#a9dff4);color:#204b7e;box-shadow:0 5px 0 #68a7c3,0 10px 16px #0003}
.finish{background:radial-gradient(circle at 50% 12%,#fff9f0e8,transparent 38%),linear-gradient(150deg,#d6f9ffed,#f8d9f6f5 53%,#ffe9c6f4);border:2px solid #fff6ca;box-shadow:inset 0 0 0 6px #ffffff76,0 0 45px #ffeabc7e}
.finish .cup{font-size:72px;animation:celebrate 2.7s ease-in-out infinite alternate}
@keyframes celebrate{to{transform:translateY(-9px) rotate(4deg)}}
.finish h2{color:#60418d;text-shadow:none}
.finish p{color:#4a5c78}
.finish-scene{width:min(100%,320px);height:145px;object-fit:cover;object-position:center 45%;border:4px solid #fff;border-radius:21px;box-shadow:0 10px 30px #3c3c7940}
.finish .btn{max-width:100%}
.color-wave{position:absolute;z-index:5;left:var(--xx);top:var(--yy);width:16px;height:16px;border-radius:50%;border:4px solid var(--wave,#ffe19c);pointer-events:none;box-shadow:0 0 22px var(--wave,#ffe19c);animation:waterMagic .95s ease-out forwards}
@keyframes waterMagic{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(28)}}
.ocean.saved-ocean::before{filter:saturate(1.3)}
@media(min-width:841px){.art-area{margin:-15px -16px -18px -25px}.hero-art{height:100%;object-position:52% 43%}.art-note{margin-bottom:27px}}
@media(max-width:840px){.art-area{position:relative;display:flex;min-height:220px;max-height:255px;padding:0 12px 20px;align-items:flex-end;justify-content:center}.hero-art{position:absolute;width:100%;height:100%;border-radius:29px;object-position:50% 34%;mask-image:linear-gradient(to bottom,#000 35%,#000c 58%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 35%,#000c 58%,transparent 100%)}.art-note{margin:0 0 6px 0;max-width:95%}.art-halo{top:0;height:100%}.reef-front{height:125px}.mini-fish{width:68px}.ocean{padding:18px}}
@media(max-width:460px){.art-area{min-height:190px;max-height:220px}.ocean{padding:12px}.play{border-radius:24px;padding:18px 13px}.hero-art{object-position:53% 35%}.art-note{font-size:12px}.paint{min-width:70px}.paint .gem{width:62px;height:62px}}
@media(prefers-reduced-motion:reduce){.bubblefield i,.hero-art,.mini-fish,.reef-particles,.finish .cup,.paint.try-again .gem,.pearls .pearl.done,.color-wave{animation:none!important}.color-wave{display:none}}


/* v149 — atelierul interactiv: recif animat, perle magice și un ecran fără scroll. */
body:has(.bibi-game){height:100dvh;min-height:0;overflow:hidden}
body:has(.bibi-game) .topbar{min-height:56px;padding:9px clamp(12px,2vw,24px)}
main:has(.bibi-game){height:calc(100dvh - 56px);min-height:0;max-width:1320px;display:flex;flex-direction:column;padding-bottom:8px}
main:has(.bibi-game) .intro{flex:0 0 auto;padding:2px 0 9px}
main:has(.bibi-game) .intro .eyebrow{display:none}
main:has(.bibi-game) .intro h1{font-size:clamp(26px,3.1vw,40px);margin:3px 0 3px}
main:has(.bibi-game) .intro p{font-size:13px;line-height:1.35}
main:has(.bibi-game) .below{display:none}
.ocean:has(.bibi-game){flex:1;min-height:0;height:auto;padding:clamp(9px,1.35vw,20px);gap:clamp(10px,2vw,22px);grid-template-columns:minmax(190px,.72fr) minmax(410px,1.35fr)}
.ocean:has(.bibi-game) .art-area{min-height:0;max-height:none;align-self:stretch;height:100%}
.ocean:has(.bibi-game) .hero-art{object-position:center 43%}
.ocean:has(.bibi-game) .art-note{font-size:clamp(11px,1vw,14px)}
.ocean:has(.bibi-game) .reef-front{opacity:.75}
.ocean:has(.bibi-game) .bubblefield{transition:opacity .5s}
.ocean.bibi-ocean-restored .bubblefield{opacity:1}
.play.bibi-game{max-width:none;height:100%;min-height:0;margin:0;padding:clamp(9px,1.4vw,18px);display:flex;flex-direction:column;gap:5px;overflow:hidden;isolation:isolate}
.play.bibi-game::before{display:none}
.bibi-hud{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.bibi-kicker{font-size:10px;font-weight:900;color:#ffdda2;letter-spacing:.14em;white-space:nowrap}
.bibi-progress{display:flex;gap:8px;align-items:center;min-width:150px;justify-content:flex-end;color:#e9fdff;font-weight:900;font-size:12px}
.bibi-meter{width:105px;height:12px;border-radius:999px;overflow:hidden;border:1px solid #c4ffff82;background:#072454;box-shadow:inset 0 2px 5px #0007}
.bibi-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6de6d3,#ffe59a,#ff9dcb);border-radius:inherit;box-shadow:0 0 12px #ffe5a3;transition:width .5s ease}
.bibi-heading{flex:0 0 auto;text-align:center}
.play.bibi-game .bibi-heading h2{margin:0;color:#ffe8b4;text-shadow:0 3px 12px #05143b;font-size:clamp(19px,2vw,26px);line-height:1.15}
.bibi-heading p{margin:4px 0 0;color:#d4efff;font-weight:650;font-size:clamp(11px,1vw,13px)}
.bibi-board{--ocean-color:.3;position:relative;flex:1 1 auto;min-height:110px;min-width:0;overflow:hidden;border-radius:23px;border:3px solid #c6f8ffad;background:linear-gradient(145deg,#6cbbcf,#0c3c71);box-shadow:inset 0 3px 12px #d7feff42,0 8px 25px #030f368c,0 0 0 4px #91edff17;touch-action:manipulation}
.bibi-scene{display:block;width:100%;height:100%;min-height:0;user-select:none}
.bibi-backdrop{filter:saturate(var(--ocean-color));transition:filter .55s ease}
.bibi-colorable{cursor:pointer;outline:none;transition:filter .2s,transform .25s;transform-box:fill-box;transform-origin:center}
.bibi-colorable:hover{filter:drop-shadow(0 0 9px #fff5c1);transform:scale(1.025)}
.bibi-colorable:focus-visible{filter:drop-shadow(0 0 12px #ffe69d) drop-shadow(0 0 6px #fff)}
.bibi-colorable.bibi-painted{filter:drop-shadow(0 0 8px #fdf7ff82)}
.bibi-colorable.bibi-painted:hover{filter:drop-shadow(0 0 12px #ffe5a3)}
.bibi-glimmer{pointer-events:none}
.bibi-board-hint{pointer-events:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:40px;background:#0c376f96;color:#eaffff;border:1px solid #c7ffff63;padding:4px 12px;font-weight:800;font-size:10px;text-shadow:0 1px 4px #0008;max-width:95%;overflow:hidden;text-overflow:ellipsis}
.bibi-fizz{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bibi-spark{position:absolute;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);font-size:25px;font-weight:900;color:var(--shine);filter:drop-shadow(0 0 8px #fff3be);animation:bibiBurst .85s ease-out forwards}
@keyframes bibiBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.6)}}
.bibi-toolbar{display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap;flex:0 0 auto;padding-top:2px}
.bibi-palette{display:flex;justify-content:center;gap:clamp(4px,.9vw,9px);align-items:center;flex:1 1 260px;min-width:0}
.bibi-color{border:0;background:none;color:#ebfaff;display:flex;flex-direction:column;gap:3px;align-items:center;min-width:40px;max-width:58px;padding:3px 2px;border-radius:11px;transition:transform .15s}
.bibi-color[aria-pressed=true]{background:#ffffff1d}
.bibi-color .bibi-pearl{width:clamp(31px,3.6vw,43px);height:clamp(31px,3.6vw,43px);display:block;border:4px solid #fff6e7;border-radius:50%;background:radial-gradient(circle at 27% 21%,#ffffffed 0 9%,transparent 23%),radial-gradient(circle at 67% 78%,#102e7582,transparent 62%),var(--swatch);box-shadow:0 4px 10px #040f388a,inset -5px -6px 10px #25215955;transition:transform .16s,box-shadow .16s}
.bibi-color[aria-pressed=true] .bibi-pearl{box-shadow:0 0 0 3px #ffe7ac,0 0 18px var(--swatch),0 5px 11px #0009;transform:translateY(-2px) scale(1.08)}
.bibi-color:hover .bibi-pearl{transform:translateY(-3px)}
.bibi-color:active .bibi-pearl{transform:scale(.9)}
.bibi-color:focus-visible{outline:2px solid #fff4b6;outline-offset:1px}
.bibi-color-name{color:#d8edff;font-size:10px;font-weight:850;line-height:1}
.bibi-actions{display:flex;gap:6px;align-items:center;justify-content:center;flex:0 0 auto}
.bibi-tool,.bibi-again{border:1px solid #dffaff8e;background:linear-gradient(160deg,#e0f9ff,#b6dcf4);box-shadow:0 3px 0 #6a91b0,0 5px 13px #0006;color:#273d71;border-radius:16px;padding:10px 11px;white-space:nowrap;font-weight:900;font-size:11px;line-height:1.2;min-height:39px}
.bibi-tool:hover,.bibi-again:hover{filter:brightness(1.07)}
.bibi-tool:active,.bibi-again:active{transform:translateY(2px);box-shadow:0 1px 0 #769bbb}
.bibi-tool-magic[aria-pressed=true]{background:linear-gradient(140deg,#fff3c5,#ffc7e7);border-color:#fff1d9}
.bibi-tool-sound{min-width:40px;font-size:16px}
.bibi-status{font-size:12px;font-weight:800;color:#ffe9bf;min-height:18px;text-align:center;margin:2px 0 0;flex:0 0 auto;line-height:1.25}
.bibi-finish{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:clamp(12px,2vw,24px);border-radius:28px;background:radial-gradient(circle at 50% 0%,#fffef5,transparent 54%),linear-gradient(145deg,#e0f9fffa,#ffe3f5fa 58%,#fff0cbf9);box-shadow:inset 0 0 0 3px #fff8b5;color:#4d4078}
.bibi-finish[hidden]{display:none!important}
.bibi-medal{font-size:34px;filter:drop-shadow(0 3px 8px #a277d4)}
.bibi-finish h2{font:900 clamp(21px,2.7vw,32px)/1.15 Georgia,serif!important;color:#543c86!important;margin:0!important;text-shadow:none!important}
.bibi-finish img{width:min(100%,270px);height:min(24vh,148px);object-fit:cover;border-radius:18px;border:3px solid #fff;box-shadow:0 8px 16px #382c7d42}
.bibi-finish p{font-weight:800;font-size:13px;margin:0;line-height:1.4}
.bibi-finish-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.bibi-finish-actions a{font-weight:900;color:#514387;text-decoration:underline;font-size:13px}
.bibi-again{background:linear-gradient(135deg,#ffe8ae,#ffbcaa);border-color:#fff;padding:11px 18px;box-shadow:0 3px 0 #c78c79,0 5px 15px #0003}
@media(min-width:1200px){.ocean:has(.bibi-game){grid-template-columns:minmax(250px,.7fr) minmax(550px,1.3fr)}}
@media(max-width:1000px) and (min-width:841px){.ocean:has(.bibi-game){grid-template-columns:minmax(180px,.6fr) minmax(400px,1.4fr)}.bibi-toolbar{justify-content:center}.bibi-palette{flex:1 1 100%}}
@media(max-width:840px){
 body:has(.bibi-game) .topbar{height:44px;min-height:44px;padding:4px 12px;flex-wrap:nowrap;justify-content:space-between;gap:4px}
 body:has(.bibi-game) .topbar a{font-size:10px;white-space:nowrap}
 body:has(.bibi-game) .topbar .brand{font-size:14px}
 main:has(.bibi-game){height:calc(100dvh - 44px);padding:0 7px 5px}
 main:has(.bibi-game) .intro{padding:1px 0 5px}
 main:has(.bibi-game) .intro h1{font-size:clamp(22px,4vw,29px);margin:2px 0}
 main:has(.bibi-game) .intro p{display:none}
 .ocean:has(.bibi-game){grid-template-columns:1fr;grid-template-rows:minmax(65px,16%) minmax(0,1fr);gap:6px;padding:7px;border-radius:21px}
 .ocean:has(.bibi-game) .art-area{height:100%;min-height:0;max-height:none;display:flex;align-items:flex-end;padding:0;margin:0;overflow:hidden;border-radius:16px}
 .ocean:has(.bibi-game) .hero-art{position:absolute;inset:0;height:100%;width:100%;max-height:none;object-fit:cover;object-position:52% 32%;border-radius:16px;mask-image:linear-gradient(to bottom,#000 35%,#000e 65%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 35%,#000e 65%,transparent 100%)}
 .ocean:has(.bibi-game) .art-note{margin:0 auto 2px;padding:4px 12px;font-size:11px;max-width:92%;border-radius:12px}
 .ocean:has(.bibi-game) .art-note small{display:none}
 .ocean:has(.bibi-game) .art-halo{display:none}
 .ocean:has(.bibi-game) .mini-fish,.ocean:has(.bibi-game) .reef-front{display:none}
 .play.bibi-game{height:100%;min-height:0;max-width:none;width:100%;padding:9px;gap:4px;border-radius:18px}
 .bibi-hud{gap:5px}
 .bibi-kicker{font-size:9px;letter-spacing:.05em}
 .bibi-progress{font-size:11px;min-width:111px;gap:5px}
 .bibi-meter{width:75px;height:9px}
 .play.bibi-game .bibi-heading h2{font-size:clamp(18px,3.6vw,23px)}
 .bibi-heading p{font-size:11px}
 .bibi-toolbar{justify-content:center;gap:4px}
 .bibi-palette{flex:1 1 100%;gap:clamp(3px,1.4vw,10px)}
 .bibi-color{min-width:40px}
 .bibi-color .bibi-pearl{width:38px;height:38px}
 .bibi-actions{flex:1;gap:8px}
 .bibi-tool{padding:7px 13px;min-height:32px}
 .bibi-status{font-size:11px;min-height:15px;margin:0}
 .bibi-board{border-radius:15px;border-width:2px}
 .bibi-board-hint{font-size:9px;top:4px;padding:3px 8px}
}
@media(max-width:460px){
 .ocean:has(.bibi-game){grid-template-rows:minmax(62px,13%) minmax(0,1fr);padding:6px;gap:4px}
 .play.bibi-game{padding:7px;gap:3px}
 .bibi-heading p{display:none}
 .bibi-color{min-width:34px;padding:1px}
 .bibi-color .bibi-pearl{width:clamp(31px,9vw,38px);height:clamp(31px,9vw,38px);border-width:3px}
 .bibi-color-name{font-size:9px}
 .bibi-palette{gap:clamp(1px,1vw,5px)}
 .bibi-actions{gap:5px}
 .bibi-tool{font-size:10px;padding:6px 11px;min-height:30px;border-radius:11px}
 .bibi-tool-sound{font-size:14px}
 .bibi-board-hint{font-size:8px}
 .bibi-finish img{height:min(20vh,105px)}
 .bibi-finish h2{font-size:23px!important}
}
@media(max-height:680px){
 main:has(.bibi-game) .intro p{display:none}
 .bibi-heading p{display:none}
 .bibi-board-hint{display:none}
 .bibi-color-name{display:none}
 .bibi-color .bibi-pearl{width:32px;height:32px}
 .bibi-tool{min-height:28px;padding:5px 9px}
 .bibi-finish img{height:72px}
 .bibi-finish{gap:4px}
}
@media(prefers-reduced-motion:reduce){
 .bibi-spark{display:none!important}
 .bibi-colorable,.bibi-backdrop,.bibi-meter span,.bibi-color .bibi-pearl{transition:none!important}
}


/* v150 — Bibi: reciful fermecat. Fundal fără benzi, volum, profunzime și titlu clar. */
main:has(.bibi-game) .intro h1{
  line-height:1.22;
  color:#fff0d3;
  text-shadow:0 3px 12px #051f51,0 0 28px #6bc7ea50;
  overflow:visible;
}
main:has(.bibi-game) .intro h1 em{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#ffd8f1!important;
  -webkit-text-fill-color:#ffd8f1!important;
  text-shadow:0 3px 10px #09224d!important;
}
.bibi-board{
  background:
    radial-gradient(ellipse at 32% 6%,#c3fff1b8 0%,transparent 52%),
    radial-gradient(ellipse at 79% 66%,#ad9ff43d 0%,transparent 51%),
    linear-gradient(150deg,#6cd9df 0%,#349dba 34%,#236a9a 66%,#0c316c 100%);
  border:3px solid #b8f6fd;
  box-shadow:inset 0 0 0 2px #ffffff2f,inset 0 0 42px #bceaff38,0 11px 30px #030d38a8,0 0 18px #7fe4e43a;
  isolation:isolate;
}
.bibi-board::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:3;
  border:1px solid #fffff25c;
  border-radius:19px;
  pointer-events:none;
  box-shadow:inset 0 0 22px #64eaff38;
}
.bibi-scene{filter:drop-shadow(0 0 11px #62e6fe26)}
.bibi-backdrop{filter:saturate(var(--ocean-color)) brightness(1.04) contrast(1.05)}
.bibi-colorable{
  filter:url(#bbCrystalline) drop-shadow(0 0 4px #f4faff57);
  transition:filter .22s ease,transform .22s ease;
}
.bibi-colorable:hover{
  filter:url(#bbCrystalline) drop-shadow(0 0 13px #fff0ae) drop-shadow(0 0 5px #e9ffff);
  transform:scale(1.025);
}
.bibi-colorable.bibi-painted{
  filter:url(#bbCrystalline) drop-shadow(0 0 10px var(--piece-color,#9adce6));
}
.bibi-colorable.bibi-painted:hover{
  filter:url(#bbCrystalline) drop-shadow(0 0 16px var(--piece-color,#9adce6));
}
.bibi-colorable:focus-visible{filter:url(#bbCrystalline) drop-shadow(0 0 15px #fff0b0);outline:none}
.bibi-schoal{animation:bibiShoal 10s ease-in-out infinite alternate;transform-origin:center;transform-box:fill-box}
.bibi-orbital-lights{animation:bibiLuminous 7s ease-in-out infinite alternate}
.bibi-glimmer{animation:bibiLuminous 4s ease-in-out infinite alternate}
.bibi-foreground{filter:drop-shadow(0 1px 4px #83f9ff69)}
@keyframes bibiShoal{to{transform:translate(14px,-5px)}}
@keyframes bibiLuminous{to{opacity:.52}}
.bibi-board-hint{
  background:linear-gradient(135deg,#15346cca,#11648cc5);
  border:1px solid #d2f9ffb5;
  box-shadow:0 3px 13px #0a336998,0 0 11px #5cdddc60;
}
.bibi-game .bibi-heading h2{letter-spacing:.012em}
.ocean.bibi-ocean-restored .bibi-board{
  box-shadow:inset 0 0 0 2px #fff4d74b,0 13px 32px #030f388c,0 0 33px #8dfed495;
}
@media(max-width:840px){
 .bibi-board::after{border-radius:12px}
 .bibi-board{border-width:2px}
 .bibi-colorable:hover{transform:none}
 .bibi-board-hint{max-width:94%}
}
@media(prefers-reduced-motion:reduce){
 .bibi-schoal,.bibi-orbital-lights,.bibi-glimmer{animation:none!important}
 .bibi-colorable{transition:none!important}
}


/* v151 — character illustration finish: softly shaded, storybook-friendly touch targets */
.bibi-premium-character{transform-box:fill-box;transform-origin:center;outline:none}
.bibi-premium-character .bibi-character-art{transform-box:fill-box;transform-origin:center}
.bibi-premium-character .bibi-treasure-ring{opacity:.67;transition:opacity .22s ease}
.bibi-premium-character:hover .bibi-treasure-ring,
.bibi-premium-character:focus-visible .bibi-treasure-ring{opacity:1}
.bibi-premium-character.bibi-painted .bibi-character-art{
 animation:bibiCharacterBloom .55s cubic-bezier(.2,.75,.2,1) both
}
@keyframes bibiCharacterBloom{
 0%{transform:scale(.96);filter:brightness(1)}
 48%{transform:scale(1.055);filter:brightness(1.22) drop-shadow(0 0 11px #ffecc7)}
 100%{transform:scale(1);filter:brightness(1)}
}
@media(hover:none){
 .bibi-premium-character:hover{transform:none}
 .bibi-premium-character:hover .bibi-treasure-ring{opacity:.67}
}
@media(prefers-reduced-motion:reduce){
 .bibi-premium-character .bibi-character-art{animation:none!important}
 .bibi-premium-character .bibi-treasure-ring{transition:none!important}
}


/* v152 — final composition & painterly lighting of Bibi's reef */
.bibi-board{
  background:
    radial-gradient(ellipse at 33% 8%,#dafff4b0 0%,transparent 49%),
    radial-gradient(ellipse at 78% 65%,#d7beef54 0%,transparent 48%),
    linear-gradient(162deg,#72dfdf 0%,#37adca 33%,#2875a1 66%,#112e6a 100%);
  border-color:#d0ffff;
  box-shadow:inset 0 0 0 2px #ffffff38,inset 0 0 52px #acfcff30,0 12px 27px #05113d94,0 0 20px #95ffff24;
}
.bibi-premium-character{transition:transform .22s ease,filter .22s ease}
.bibi-premium-character .bibi-character-art{filter:drop-shadow(0 4px 5px #1b477251)}
.bibi-premium-character .bibi-painterly-sparkles{opacity:.82;mix-blend-mode:screen;pointer-events:none}
.bibi-premium-character.bibi-painted .bibi-painterly-sparkles{opacity:1}
.bibi-premium-character .bibi-treasure-ring{opacity:.48}
.bibi-premium-character.bibi-painted .bibi-treasure-ring{opacity:.86}
.bibi-premium-character.bibi-painted{filter:url(#bbCrystalline) drop-shadow(0 0 10px var(--piece-color,#aae1f3))}
.bibi-premium-character:hover{transform:scale(1.018)}
.bibi-board-hint{background:linear-gradient(120deg,#21447ba8,#186d91b8);color:#fff4d9;letter-spacing:.01em}
.bibi-color[aria-pressed=true] .bibi-pearl{box-shadow:0 0 0 3px #fff2c7,0 0 17px var(--swatch),0 5px 9px #0008}
@media(max-width:840px){
  .bibi-premium-character:hover{transform:none}
  .bibi-board-hint{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .bibi-premium-character{transition:none!important}
}


/* v153 — Bibi: ilustrația finală devine recompensa principală. */
.play.bibi-game .bibi-finish{
  gap:clamp(7px,1.25vh,13px);
}
.play.bibi-game .bibi-finish img{
  display:block;
  width:min(100%,470px);
  height:min(34dvh,255px);
  max-width:100%;
  object-fit:cover;
  object-position:center 43%;
  flex:0 1 auto;
  border-radius:20px;
  border:4px solid #fffdf1;
  box-shadow:0 12px 30px #36266546,0 0 0 3px #e0caff8a;
}
.play.bibi-game .bibi-finish p{
  font-size:clamp(12px,1.2vw,15px);
}
@media(max-width:840px){
  .play.bibi-game .bibi-finish img{
    width:min(100%,390px);
    height:min(26dvh,200px);
  }
}
@media(max-width:460px){
  .play.bibi-game .bibi-finish{
    gap:6px;
    padding:10px;
  }
  .play.bibi-game .bibi-finish img{
    width:min(100%,310px);
    height:min(23dvh,155px);
  }
}
@media(max-height:680px){
  .play.bibi-game .bibi-finish{
    gap:5px;
  }
  .play.bibi-game .bibi-finish img{
    width:min(100%,350px);
    height:min(23dvh,150px);
  }
}
@media(max-height:500px){
  .play.bibi-game .bibi-finish img{
    height:min(19dvh,94px);
  }
  .play.bibi-game .bibi-finish .bibi-medal{font-size:22px}
}