/* style.css — Bubblo. Chrome clair aquatique + bac eau profonde. Geist. */
@font-face { font-family:'Geist'; font-weight:400; font-display:swap; src:url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-display:swap; src:url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:600; font-display:swap; src:url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:700; font-display:swap; src:url('fonts/geist-700.woff2') format('woff2'); }

:root {
  --bg:#080f14; --surface:#0c1d2a; --surface-2:#091620; --hover:#112233;
  --line:#173040; --line-2:#1e3d50; --ink:#bfd8e5; --muted:#5c8899; --faint:#2e4d5c;
  --accent:#0e9bb0; --accent-2:#13b4cc; --accent-tint:rgba(14,155,176,.15); --accent-line:rgba(14,155,176,.35);
  --coin:#f2b21e; --pearl:#c98bff; --good:#22c55e; --bad:#f87171;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow:0 6px 24px -6px rgba(0,0,0,.65);
  --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; --r:14px; --r-sm:10px;
}
* { box-sizing:border-box; }
html,body { margin:0; color:var(--ink); font-family:var(--sans); background:var(--bg); min-height:100dvh; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; } svg { flex:none; }
.muted { color:var(--muted); } .small { font-size:.82rem; } .block { display:block; width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.topbar { max-width:60rem; margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; }
.brand-ic { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.brand-ic svg { width:18px; height:18px; }
.brand-name { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.lang-switch { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:500; font-size:.82rem; border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--surface); }
.lang-switch svg { width:15px; height:15px; } .lang-switch:hover { color:var(--accent); border-color:var(--accent-line); }

.wrap { max-width:60rem; margin:0 auto; padding:0 18px 40px; }

/* HUD */
.hud { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.hud-stat { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-family:var(--mono); font-weight:500; box-shadow:var(--shadow-sm); }
.hud-ic { display:inline-flex; } .hud-ic svg { width:17px; height:17px; }
.hud-ic.coin { color:var(--coin); } .hud-ic.pearl { color:var(--pearl); } .hud-ic.rate { color:var(--accent); }
.hud-daily { margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:linear-gradient(180deg,#ffd66b,#f2b21e); color:#3a2a00; border:none; border-radius:999px; padding:8px 15px; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; box-shadow:0 6px 16px -6px rgba(242,178,30,.6); animation:pulse 1.6s ease-in-out infinite; }
.hud-daily svg { width:16px; height:16px; }
.hud-daily[hidden] { display:none; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

/* bac */
.tank { position:relative; width:100%; height:min(56vh,440px); border-radius:18px; overflow:hidden; box-shadow:inset 0 0 60px rgba(0,0,0,.35), var(--shadow); border:1px solid var(--line-2); }
.tank-water { position:absolute; inset:0; background:linear-gradient(180deg,#0a5a6e 0%,#042033 60%,#021522 100%); }
.tank-water::before { content:""; position:absolute; inset:-8%; background:radial-gradient(ellipse 50% 25% at 28% 28%,rgba(255,255,255,.09) 0%,transparent 100%),radial-gradient(ellipse 35% 18% at 70% 20%,rgba(255,255,255,.07) 0%,transparent 100%),radial-gradient(ellipse 28% 14% at 48% 35%,rgba(255,255,255,.05) 0%,transparent 100%); filter:blur(28px); animation:causticDrift 11s ease-in-out infinite alternate; pointer-events:none; }
.tank-water::after  { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 22%,transparent 38%); animation:surfaceShimmer 5s ease-in-out infinite alternate; pointer-events:none; }
.decor-layer, .fish-layer, .bubbles { position:absolute; inset:0; pointer-events:none; }
.tank-rays { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ray { position:absolute; top:0; width:var(--ray-w,40px); height:78%; background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,transparent 100%); transform-origin:top center; transform:rotate(var(--ray-rot,0deg)); filter:blur(8px); border-radius:50%; animation:rayPulse 8s ease-in-out infinite alternate; }
.decor { position:absolute; bottom:0; width:64px; height:84px; opacity:.92; }
.decor.sway   { transform-origin:bottom center; animation:sway  var(--dur,4s) ease-in-out infinite; }
.decor.sway-b { transform-origin:bottom center; animation:sway-b var(--dur,4s) ease-in-out infinite; }
@keyframes sway {
  0%  { transform:rotate(-6deg) scaleX(1); }
  20% { transform:rotate(-1deg) scaleX(1.02); }
  55% { transform:rotate(5deg) scaleX(.99); }
  80% { transform:rotate(3deg) scaleX(1.01); }
  100%{ transform:rotate(-6deg) scaleX(1); }
}
@keyframes sway-b {
  0%  { transform:rotate(5deg) scaleX(1); }
  30% { transform:rotate(-2deg) scaleX(.98); }
  65% { transform:rotate(4deg) scaleX(1.02); }
  100%{ transform:rotate(5deg) scaleX(1); }
}
.fish { position:absolute; top:0; left:0; will-change:transform; filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); pointer-events:auto; cursor:pointer; }
.fish-inner { width:100%; height:100%; transition:transform .35s ease; }
.fish-anim  { width:100%; height:100%; animation:fishWiggle var(--wig,.5s) ease-in-out infinite alternate; }
.tank-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#bfe0e8; font-size:.95rem; padding:24px; }
.tank-empty[hidden] { display:none; }
.bubble { position:absolute; bottom:-12px; width:var(--sz); height:var(--sz); border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); animation:rise linear infinite; }
@keyframes rise { to { transform:translateY(-460px) translateX(12px); opacity:0; } }
@keyframes causticDrift  { 0%{transform:translate(0,0) scale(1);opacity:.5;} 40%{transform:translate(3%,2%) scale(1.05);opacity:.95;} 100%{transform:translate(-2%,3%) scale(.96);opacity:.55;} }
@keyframes surfaceShimmer{ 0%{opacity:.7;} 100%{opacity:1;} }
@keyframes rayPulse { 0%{opacity:.1;transform:rotate(var(--ray-rot)) scaleX(1);} 50%{opacity:.5;transform:rotate(var(--ray-rot)) scaleX(1.25);} 100%{opacity:.15;transform:rotate(var(--ray-rot)) scaleX(.8);} }
@keyframes fishWiggle { 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.93);} }
.happy-bar { position:absolute; left:10px; right:10px; bottom:10px; height:6px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.happy-fill { display:block; height:100%; background:linear-gradient(90deg,#3ee08a,#13b4cc); transition:width .4s; }
.tank-fs-btn { position:absolute; top:10px; right:10px; z-index:10; width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .15s,color .15s; }
.tank-fs-btn:hover { background:rgba(255,255,255,.2); color:#fff; }
.tank-fs-btn svg { width:15px; height:15px; }
#bb-tank:fullscreen      { height:100dvh; border-radius:0 !important; border:none !important; box-shadow:none !important; }
#bb-tank:-webkit-full-screen { height:100dvh; border-radius:0 !important; border:none !important; }

/* soin */
.care { display:flex; gap:8px; align-items:center; margin:12px 0 6px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; cursor:pointer; font-weight:600; font-family:inherit; font-size:.9rem; box-shadow:var(--shadow-sm); transition:border-color .15s, color .15s; }
.btn svg { width:17px; height:17px; } .btn:hover:not(:disabled) { border-color:var(--accent-line); color:var(--accent); }
.care-btn i { font-family:var(--mono); font-size:.74rem; color:var(--muted); font-style:normal; }
.care-btn.cooling { opacity:.6; }
.btn-accent { background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff; border:none; }
.tank-slots { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-family:var(--mono); font-size:.85rem; }
.tank-slots svg { width:16px; height:16px; }

/* boutique */
.shop { margin-top:14px; }
.shop-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.tab { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; font-family:inherit; font-weight:500; font-size:.86rem; color:var(--muted); box-shadow:var(--shadow-sm); }
.tab svg { width:15px; height:15px; } .tab:hover { color:var(--ink); } .tab.on { background:var(--accent); color:#fff; border-color:transparent; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:10px; }
.shop-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:6px; }
.shop-card.wide { grid-column:1/-1; }
.shop-art { height:74px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0a5a6e,#042033); border-radius:var(--r-sm); padding:8px; }
.shop-art.decor-art { background:linear-gradient(180deg,#0e6b8a,#0a3a52); }
.shop-art.bg-art { padding:0; }
.shop-art svg { max-height:100%; }
.shop-name { font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rar { font-size:.7rem; font-weight:600; } .own { color:var(--accent); font-size:.8rem; }
.shop-blurb { color:var(--muted); font-size:.78rem; line-height:1.3; flex:1; }
.shop-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.shop-rate { display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-family:var(--mono); font-size:.78rem; font-weight:600; }
.shop-rate svg { width:13px; height:13px; }
.fish-rate { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--accent); font-family:var(--mono); font-weight:600; margin:4px 0 10px; }
.fish-rate svg { width:16px; height:16px; }
#bb-fish-sell { margin-top:10px; margin-bottom:8px; }
#bb-fish-sell svg { width:15px; height:15px; }
.price { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-weight:500; font-size:.86rem; }
.price svg { width:15px; height:15px; } .price.coin { color:var(--coin); } .price.pearl { color:var(--pearl); }
.buy { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:7px 12px; font-family:inherit; font-weight:600; font-size:.82rem; cursor:pointer; transition:filter .15s; }
.buy:hover:not(:disabled) { filter:brightness(1.08); } .buy:disabled { background:var(--line-2); color:var(--faint); cursor:not-allowed; }

/* modales */
.overlay { position:fixed; inset:0; background:rgba(2,8,16,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.overlay[hidden] { display:none; }
.modal { max-width:380px; width:100%; text-align:center; padding:28px; animation:pop .4s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes pop { from{opacity:0;transform:scale(.9) translateY(8px)} to{opacity:1;transform:none} }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.modal-ic { color:var(--accent); margin-bottom:6px; } .modal-ic svg { width:42px; height:42px; }
.modal-big { font-size:1.3rem; font-weight:600; margin:8px 0 16px; } .modal-big b { color:var(--accent); }
.top-actions { display:inline-flex; align-items:center; gap:8px; }
.icon-round { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--muted); cursor:pointer; box-shadow:var(--shadow-sm); }
.icon-round svg { width:17px; height:17px; } .icon-round:hover { color:var(--accent); border-color:var(--accent-line); }
.help-modal { text-align:left; }
.help-title { text-align:center; font-size:1.3rem; margin:4px 0 16px; }
.help-steps { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:12px; }
.help-steps li { display:flex; align-items:flex-start; gap:11px; font-size:.92rem; line-height:1.4; color:var(--ink); }
.hs-ic { flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:var(--accent-tint); color:var(--accent); }
.hs-ic svg { width:17px; height:17px; }

.footer { max-width:60rem; margin:30px auto 0; padding:18px; text-align:center; color:var(--faint); font-size:.76rem; border-top:1px solid var(--line); }
.footer a { color:var(--muted); border-bottom:1px solid var(--line-2); } .footer .joke { font-style:italic; } .footer .sep { opacity:.5; margin:0 5px; }

/* couveuse & album */
.hud-egg { display:inline-flex; align-items:center; gap:6px; margin-left:auto; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff; border:none; border-radius:999px; padding:8px 15px; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; box-shadow:0 6px 16px -6px rgba(14,155,176,.6); animation:pulse 1.6s ease-in-out infinite; }
.hud-egg svg { width:16px; height:16px; } .hud-egg[hidden] { display:none; }
.breed-row { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 2px; }
.breed-row label { flex:1 1 8rem; display:flex; flex-direction:column; gap:4px; font-size:.74rem; color:var(--muted); }
.breed-row select { background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 10px; font-family:inherit; font-size:.84rem; cursor:pointer; }
.breed-row select:focus { outline:none; border-color:var(--accent-line); }
.egg-card { align-items:center; text-align:center; gap:8px; }
.egg-card .egg-ic { color:var(--accent); animation:eggBob 2.4s ease-in-out infinite; }
.egg-card .egg-ic svg { width:34px; height:34px; }
.egg-card.ready .egg-ic { color:var(--coin); }
.egg-state { font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.egg-card.ready .egg-state { color:var(--coin); font-weight:600; }
.egg-hatch { width:100%; }
@keyframes eggBob { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-3px) rotate(3deg);} }
.album-card { gap:8px; }
.album-name { font-weight:600; font-size:.9rem; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.vchips { display:flex; gap:5px; }
.vchip { flex:1; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; background:linear-gradient(180deg,#0a5a6e,#042033); padding:3px; border:1px solid var(--line); }
.vchip.locked { background:var(--surface-2); border-style:dashed; opacity:.5; }
.vchip svg { width:100%; height:100%; }
.hatch-art { height:90px; display:flex; align-items:center; justify-content:center; margin:2px auto 4px; }
.hatch-art svg { max-height:100%; }
.hatch-variant { font-weight:700; font-size:.95rem; margin:-6px 0 14px; }

/* biomes */
.biome-decors { display:flex; gap:6px; align-items:flex-end; justify-content:center; width:100%; height:100%; padding:2px 8px 4px; }
.biome-decor { width:26px; height:34px; opacity:.95; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.biome-decor svg { width:100%; height:100%; }

/* événements */
.event-sprite { position:absolute; left:0; width:48px; height:48px; padding:0; border:none; background:transparent; cursor:pointer; z-index:9; animation:eventDrift 15s linear forwards; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); transition:transform .15s; }
.event-sprite:hover { transform:scale(1.14); }
.event-sprite svg { width:100%; height:100%; pointer-events:none; }
.event-wild { animation-duration:13s; }
@keyframes eventDrift { from { left:-14%; } to { left:114%; } }
.bb-toast { position:absolute; left:50%; top:18%; transform:translateX(-50%); background:rgba(8,16,24,.88); color:#fff; font-family:var(--mono); font-weight:600; font-size:.88rem; padding:8px 14px; border-radius:999px; border:1px solid var(--accent-line); z-index:20; pointer-events:none; animation:toastUp 2.2s ease forwards; white-space:nowrap; box-shadow:var(--shadow); }
@keyframes toastUp { 0%{opacity:0; transform:translate(-50%,8px);} 12%{opacity:1; transform:translate(-50%,0);} 80%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-14px);} }
.season-badge { background:linear-gradient(180deg,#ffd66b,#f2b21e); color:#3a2a00; padding:1px 7px; border-radius:999px; }
.tank.season-ete::after, .tank.season-halloween::after, .tank.season-noel::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; z-index:3; }
.tank.season-ete::after { background:radial-gradient(circle at 50% 0%, rgba(255,210,80,.18), transparent 70%); }
.tank.season-halloween::after { background:radial-gradient(circle at 50% 0%, rgba(255,120,40,.18), transparent 70%); }
.tank.season-noel::after { background:radial-gradient(circle at 50% 0%, rgba(120,180,255,.18), transparent 70%); }

/* réglages */
.settings-modal { text-align:left; max-width:420px; }
.settings-modal .help-title, .settings-modal .modal-ic { text-align:center; }
.set-section { margin:12px 0; display:flex; flex-direction:column; gap:6px; }
.set-area { width:100%; background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 10px; font-family:var(--mono); font-size:.72rem; resize:vertical; }
.set-area:focus { outline:none; border-color:var(--accent-line); }
.settings-modal .btn { justify-content:center; margin-top:8px; }
.btn.danger { color:var(--bad); border-color:rgba(248,113,113,.4); }
.btn.danger:hover:not(:disabled) { border-color:var(--bad); color:var(--bad); }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; } .bubble{display:none} }