/* AquaNim — pastel mobile-first UI */
:root{
  --pink:#ffd6e8; --pink-d:#f7a8c9;
  --blue:#bfe9ff; --blue-d:#7fc8e8;
  --mint:#c9f2dd; --lav:#e3d4ff;
  --cream:#e9f9ee; --ink:#2c4a3a; --ink-soft:#5f7f6b;
  --card:rgba(222,255,232,.93);
  --green:#5ccb52; --green-d:#2f9e44; --green-border:#a9dfb6;
  --shadow:0 6px 24px rgba(46,120,70,.20);
  --radius:18px;
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  font-family:"Comic Sans MS","Chalkboard SE","Segoe UI Rounded",system-ui,sans-serif;
  color:var(--ink);background:#9fd8f0;overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ---------- auth ---------- */
.auth-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0e7d9c url('../assets/auth/underwater-bg.jpg') center/cover no-repeat;
  padding:20px;z-index:50;overflow:auto;
}
.auth-card{
  position:relative;
  background:rgba(240,255,250,.30);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:28px;padding:46px 22px 22px;width:100%;max-width:370px;
  box-shadow:0 18px 50px rgba(0,40,60,.35), inset 0 1px 0 rgba(255,255,255,.65);
  border:2px solid rgba(255,255,255,.55);
  text-align:center;
}
.auth-mascot{
  position:absolute;top:-44px;left:50%;width:88px;transform:translateX(-50%);
  filter:drop-shadow(0 5px 6px rgba(0,40,60,.35));
  animation:swim 4.5s ease-in-out infinite;pointer-events:none;
}
.auth-mascot img{width:100%;display:block}
@keyframes swim{
  0%,100%{transform:translateX(calc(-50% - 26px)) rotate(-7deg)}
  50%{transform:translateX(calc(-50% + 26px)) rotate(7deg)}
}
.sub-betta{height:1.6em;vertical-align:-0.4em;margin:0 1px}
.dive-fish img{height:28px;vertical-align:-6px}
.auth-title{
  margin:0 0 4px;font-size:37px;font-weight:900;letter-spacing:.5px;line-height:1.08;
  font-family:ui-rounded,'SF Pro Rounded','Nunito','Trebuchet MS','Comic Sans MS',sans-serif;
}
.auth-title .t-green{
  color:#58bd4c;
  text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
    2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,
    0 5px 0 #2e7a35,0 8px 10px rgba(0,40,60,.30);
}
.auth-title .t-yellow{
  color:#ffc93c;
  text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
    2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,
    0 5px 0 #d18a1f,0 8px 10px rgba(0,40,60,.30);
}
.auth-sub{margin:0 0 4px;color:#0e5b50;font-size:14px;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.auth-tabs{
  display:flex;background:rgba(8,84,72,.60);border-radius:999px;padding:5px;
  margin:14px 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
.auth-tab{
  flex:1;padding:11px;border:none;background:transparent;border-radius:999px;
  font-weight:800;font-size:16px;color:rgba(255,255,255,.72);cursor:pointer;
}
.auth-tab.active{background:#fff;color:#1d6b4f;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-field{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.88);border-radius:999px;padding:3px 8px 3px 16px;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 3px 10px rgba(0,60,80,.18);
}
.auth-field:focus-within{border-color:#7fe0a8;box-shadow:0 0 0 3px rgba(127,224,168,.35)}
.auth-ico{font-size:20px;flex:none}
.auth-field input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-size:16px;padding:13px 0;color:#223;
}
.auth-field input::placeholder{color:#8a9aa0}
.auth-eye{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;flex:none;opacity:.65}
.auth-eye:active{transform:scale(.9)}
.btn-dive{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#5ccb52,#2f9e44 60%,#1f7a38);
  color:#fff;font-weight:900;font-size:21px;padding:15px;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 18px rgba(46,158,68,.50), inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.12);
  text-shadow:0 2px 3px rgba(0,60,20,.35);
  font-family:ui-rounded,'SF Pro Rounded','Nunito','Trebuchet MS',sans-serif;
}
.btn-dive:active{transform:scale(.97)}
.dive-fish{font-size:24px}
.dive-arrow{font-size:26px;font-weight:900;opacity:.9}
.auth-error{color:#c22a55;font-size:13px;margin:4px 0 0;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.auth-ok{color:#1e7a45;font-size:13px;margin:4px 0 0;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.auth-note{font-size:13px;color:#0d5c46;margin:12px 0 0;font-weight:600}
.auth-note a{color:#0b4a39;font-weight:800;text-decoration:underline}
.auth-foot{margin-top:16px}

/* ---------- game shell ---------- */
#game{position:fixed;inset:0}
#tank{position:absolute;inset:0;width:100dvw;height:100dvh;display:block;touch-action:none}

/* top HUD — slim */
#hud-top{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;
  pointer-events:none;
}
.hud-left,.hud-right{display:flex;gap:6px;align-items:center;pointer-events:auto;flex-wrap:wrap}
/* currency chips stay together on the top row (never split across lines) */
.hud-currencies{display:inline-flex;gap:5px;align-items:center;flex-wrap:nowrap}
.hud-currencies .hud-chip{padding:5px 8px}
.hud-chip{
  background:rgba(222,255,232,.88);border-radius:999px;padding:5px 10px;
  font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12);
  border:1.5px solid var(--green-border);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.hud-chip img.hud-ic{width:20px;height:20px;object-fit:contain;pointer-events:none}
#offline-badge{background:rgba(255,243,205,.95);border-color:#e0b64f;color:#7a5b12}
.hud-plus{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--green-border);
  background:linear-gradient(180deg,#3fae5c,#2a8f46);color:#fff;
  font-size:15px;font-weight:800;line-height:1;padding:0;margin-left:-4px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.hud-plus:active{transform:scale(.9)}
.fab img.fab-ic{width:34px;height:34px;object-fit:contain;pointer-events:none}
#hud-food{cursor:pointer}
#hud-food:active{transform:scale(.94)}
.food-pop-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(40,20,60,.28);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:calc(64px + env(safe-area-inset-top,0px));
}
.food-pop{
  background:rgba(222,255,232,.97);border-radius:18px;padding:14px 14px 12px;min-width:250px;max-width:86vw;
  border:2px solid var(--green-border);box-shadow:0 10px 32px rgba(0,0,0,.22);
}
.hud-btn{
  background:rgba(222,255,232,.88);border:1.5px solid var(--green-border);border-radius:12px;
  width:32px;height:32px;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.hud-btn:active{transform:scale(.92)}
.hud-btn img{width:24px;height:24px;object-fit:contain;pointer-events:none;vertical-align:middle}
#btn-edit.on{background:var(--green);border-color:var(--green-d)}

/* floating action buttons on home */
#home-actions{
  position:absolute;right:10px;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  display:flex;flex-direction:column;gap:10px;z-index:10;
}
.fab{
  width:52px;height:52px;border-radius:50%;font-size:24px;
  background:rgba(222,255,232,.93);border:2px solid var(--green-border);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.fab:active{transform:scale(.9)}
.fab.hidden{display:none}
#btn-filter{background:#d8f5c8;border-color:#9fe08a}

/* edit mode bar */
#edit-bar{
  position:absolute;top:calc(52px + env(safe-area-inset-top,0px));left:8px;right:8px;z-index:11;
  background:var(--card);border-radius:14px;padding:8px 10px;display:flex;gap:8px;
  align-items:center;box-shadow:var(--shadow);border:2px solid var(--green-d);
  font-size:12.5px;
}
#edit-hint{flex:1;color:var(--ink-soft)}
.btn-small{padding:8px 12px;border-radius:12px;font-weight:700;font-size:13px;background:#c9eed4}
.btn-small.primary{background:linear-gradient(135deg,#5ccb52,#2f9e44);color:#fff}
.btn-small.danger{background:#ffb3c1;color:#8f1d3a}
.btn-small:disabled{opacity:.4}

/* bottom nav */
#bottom-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:20;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;background:rgba(222,255,232,.95);backdrop-filter:blur(8px);
  border-top:2px solid var(--pink);box-shadow:0 -4px 18px rgba(122,90,150,.15);
}
/* tank switcher on table edge */
#tank-switcher{
  position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b) + 6px);z-index:15;
  display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;
}
#tank-switcher[hidden]{display:none}
.tank-arrow{
  pointer-events:auto;width:32px;height:32px;border-radius:50%;
  background:rgba(20,40,80,.8);border:1.5px solid rgba(100,180,255,.5);
  color:#aee2ff;font-size:20px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.35);backdrop-filter:blur(4px);
}
.tank-arrow:active{transform:scale(.92)}
.tank-info{pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.tank-name-pill{
  background:rgba(20,40,80,.8);border:1.5px solid rgba(100,180,255,.4);border-radius:12px;
  color:#fff;font-size:12px;font-weight:700;padding:5px 12px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.35);backdrop-filter:blur(4px);
}
.tank-cap-pill{
  background:rgba(20,40,80,.7);border:1px solid rgba(100,180,255,.3);border-radius:10px;
  color:#aee2ff;font-size:10px;font-weight:600;padding:3px 10px;white-space:nowrap;
  box-shadow:0 1px 6px rgba(0,0,0,.25);backdrop-filter:blur(4px);
}
.nav-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-soft);font-size:10px;font-weight:700;min-width:0;
}
.nav-ico{font-size:21px;line-height:1}
.nav-ico img.nav-ic{width:28px;height:28px;object-fit:contain;pointer-events:none;vertical-align:middle}
.nav-ico img.nav-ic.big{width:34px;height:34px}
.nav-ico img.nav-ic.xl{width:46px;height:46px}
#screen-title img.title-ic{width:26px;height:26px;object-fit:contain;vertical-align:-6px;margin-right:6px;pointer-events:none}
.nav-tab.active{color:#1f7a38}
.nav-tab.active .nav-ico{transform:scale(1.18)}

/* screens */
#screen-overlay{
  position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(74,63,85,.35);
}
.screen-sheet{
  background:var(--cream);border-radius:24px 24px 0 0;width:100%;max-width:640px;
  max-height:88dvh;display:flex;flex-direction:column;border-top:3px solid var(--green-border);
  animation:slideup .25s ease-out;
}
@keyframes slideup{from{transform:translateY(60px);opacity:.6}to{transform:none;opacity:1}}
.screen-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px;
}
.screen-head h2{margin:0;font-size:20px;color:#5b4a75}
.screen-body{overflow-y:auto;padding:4px 14px calc(20px + var(--safe-b));-webkit-overflow-scrolling:touch}
.screen-body h3{margin:14px 0 8px;font-size:15px;color:#8a5f9e}

/* fish tap menu: bottom sheet */
#fish-menu-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(74,63,85,.4)}
.fish-menu{background:var(--cream);border-radius:20px 20px 0 0;padding:10px 14px calc(16px + env(safe-area-inset-bottom));width:min(430px,96vw);
  border:3px solid var(--green-border);border-bottom:none;box-shadow:var(--shadow);animation:slideup .2s ease-out}
.fish-menu-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fish-menu-head .fish-prev{width:44px;height:36px;object-fit:contain}
.fish-menu-head .sub{font-size:11px;color:var(--ink-soft)}
.fish-menu-head .hud-btn{margin-left:auto}
.fish-menu-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.fish-menu-btns .pill-btn{flex:1;padding:8px 6px;font-size:12px}

/* fish status panel (hunger / mood / level) */
.fish-stats{background:#f2fdf5;border:2px solid var(--green-border);border-radius:14px;padding:8px 10px;margin:2px 0 4px;display:flex;flex-direction:column;gap:6px}
.stat-row{display:flex;align-items:center;gap:8px;font-size:13px}
.stat-row>span{color:var(--ink-soft);font-weight:700;white-space:nowrap}
.stat-row>b{margin-left:auto;white-space:nowrap}
.hbar{flex:1;height:10px;background:#d3edd9;border-radius:999px;overflow:hidden}
.hbar>i{display:block;height:100%;border-radius:999px;transition:width .3s}

/* cards & lists */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{
  background:#f2fdf5;border-radius:var(--radius);padding:10px;box-shadow:0 3px 10px rgba(46,120,70,.12);
  border:2px solid var(--green-border);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
}
.card img.fish-prev{width:72px;height:54px;object-fit:contain}
.card .nm{font-weight:800;font-size:13.5px}
.card .sub{font-size:11.5px;color:var(--ink-soft)}
.card .price{font-weight:800;font-size:13px}
.row-card{
  background:#f2fdf5;border-radius:14px;padding:10px 12px;margin-bottom:8px;
  border:2px solid var(--green-border);display:flex;align-items:center;gap:10px;
}
.row-card .grow{flex:1;min-width:0}
.pill-btn{
  background:linear-gradient(135deg,#9fd8a8,#6fbf8f);color:#fff;font-weight:800;
  padding:9px 14px;border-radius:999px;font-size:13.5px;white-space:nowrap;
}
.pill-btn:disabled{opacity:.45;filter:grayscale(.4)}
.pill-btn.pink{background:linear-gradient(135deg,#5ccb52,#2f9e44)}
.pill-btn.blue{background:linear-gradient(135deg,#5ccb52,#2f9e44)}
.pill-btn.gold{background:linear-gradient(135deg,#5ccb52,#2f9e44)}
.pill-btn:active{transform:scale(.95)}
.pill-btn img.btn-ic{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin-right:4px;pointer-events:none}
.ic-inline{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:2px;pointer-events:none}
.cur-ic{width:18px;height:18px;object-fit:contain;vertical-align:-4px;pointer-events:none}
.emo-ic{width:20px;height:20px;object-fit:contain;vertical-align:-5px;pointer-events:none}
.tabbar{display:flex;gap:8px;margin-bottom:12px}
.tabbar .pill-btn{flex:1;background:#f2fdf5;color:#3d6b4d;border:2px solid var(--green-border)}
.tabbar .pill-btn.active{background:linear-gradient(135deg,#5ccb52,#2f9e44);color:#fff;border-color:transparent}
.progress{height:10px;background:#d3edd9;border-radius:999px;overflow:hidden;margin-top:6px}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#5ccb52,#2f9e44);border-radius:999px}
.search{
  width:100%;padding:11px 14px;border-radius:14px;border:2px solid var(--green-border);
  font-size:15px;margin-bottom:10px;background:#f2fdf5;outline:none;
}
.deco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.deco-card{background:#f2fdf5;border-radius:14px;padding:8px;border:2px solid var(--green-border);text-align:center;font-size:11px;display:flex;flex-direction:column;gap:4px;align-items:center}
.deco-card img{width:100%;height:56px;object-fit:contain}
.deco-card .nm{font-weight:700;font-size:11px;min-height:26px}
.quest-done{opacity:.65}
.tag{font-size:10.5px;background:#d9f0de;border-radius:999px;padding:2px 8px;font-weight:700;color:#2f6b42}
.tag.hybrid{background:#ffe3a3;color:#8a5a00}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid #cfe8d4}
.switch{position:relative;width:52px;height:30px;background:#bcdcc2;border-radius:999px;transition:.2s;flex-shrink:0}
.switch.on{background:#8fd694}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;background:#f2fdf5;border-radius:50%;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.switch.on::after{left:25px}
select.sel{padding:10px;border-radius:12px;border:2px solid var(--green-border);font-size:14px;background:#f2fdf5;width:100%}
.fish-pick{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px}
.fish-pick .pick{
  flex:0 0 auto;width:92px;background:#f2fdf5;border:2px solid var(--green-border);border-radius:14px;
  padding:6px;text-align:center;font-size:11px;
}
.fish-pick .pick.sel{border-color:var(--green-d);background:#d7f4dd;box-shadow:0 0 0 2px var(--green-d)}
.fish-pick .pick img{width:64px;height:48px;object-fit:contain}
.egg-card{background:#edfaef;border:2px dashed var(--green-d)}
.egg-ic{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;font-size:30px}
.egg-ic img{width:46px;height:46px;object-fit:contain}
.egg-right{text-align:right;flex:0 0 auto}
.egg-name{font-weight:800;font-size:13px}
.countdown{font-weight:800;color:#2f7a45;font-variant-numeric:tabular-nums}
.lineage{font-size:11px;color:var(--ink-soft)}
.hidden{display:none!important}

/* toast */
#toast{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + var(--safe-b) + 76px);z-index:60;
  background:rgba(74,63,85,.94);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;box-shadow:var(--shadow);max-width:88vw;text-align:center;
  animation:toastin .2s ease-out;
}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}

/* minigame */
#mg-stage{position:relative;width:100%;height:52dvh;background:linear-gradient(#aee3ff,#d9f2ff);border-radius:18px;overflow:hidden;border:2px solid var(--green-border)}
#mg-fish{position:absolute;width:84px;transform:translate(-50%,-50%);cursor:pointer;display:none}
.mg-hud{display:flex;justify-content:space-between;font-weight:800;margin:8px 2px}
.big-score{text-align:center;font-size:22px;margin:10px 0}

/* daily shell game */
.shell-box{background:var(--card);border-radius:var(--radius);padding:12px;
  border:2px solid var(--green-border);box-shadow:var(--shadow);margin-bottom:4px}
.shell-title{font-weight:800;font-size:16px;margin-bottom:2px}
#shell-row{display:flex;justify-content:center;gap:16px;margin:10px 0 4px;min-height:76px}
.shell{font-size:58px;line-height:1;padding:4px;transition:transform .18s;background:none;border:none;cursor:pointer;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.shell img{width:72px;height:72px;object-fit:contain;pointer-events:none}
.shell.shuffling{animation:shellshuffle .38s ease-in-out 4}
.shell:disabled{cursor:default}
.shell.picked{transform:translateY(-10px) scale(1.15)}
.shell.dim{opacity:.45;filter:grayscale(.7)}
.shell.reveal{animation:shellpop .35s ease-out}
@keyframes shellshuffle{
  0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-16px) rotate(-14deg)}
  75%{transform:translateX(16px) rotate(14deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes shellpop{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.shell-result{text-align:center;font-weight:800;margin:6px 0;min-height:22px}

/* minigame FAB notification dot (daily shell game available) */
.fab{position:relative}
.fab .dot{position:absolute;top:1px;right:1px;width:13px;height:13px;border-radius:50%;
  background:#ff5b7f;border:2px solid #eafff0;box-shadow:0 1px 4px rgba(0,0,0,.3);
  animation:dotpulse 1.2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* daily shell game badge on the quests nav tab */
.nav-tab{position:relative}
.nav-tab .dot{position:absolute;top:2px;right:calc(50% - 22px);width:12px;height:12px;border-radius:50%;
  background:#ff5b7f;border:2px solid #eafff0;box-shadow:0 1px 4px rgba(0,0,0,.3);
  animation:dotpulse 1.2s ease-in-out infinite}
.empty{padding:26px 10px;text-align:center;color:var(--ink-soft);font-size:14px}
@media (min-width:560px){ .grid2{grid-template-columns:repeat(3,1fr)} }

/* ---------- promo popup ---------- */
#promo-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(25,12,4,.55);padding:20px}
#promo-overlay[hidden]{display:none}
#promo-card{position:relative;width:min(92vw,430px);animation:promo-pop .28s ease-out}
@keyframes promo-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
#promo-card img{display:block;width:100%;height:auto;border-radius:18px;cursor:pointer;
  box-shadow:0 14px 44px rgba(0,0,0,.5);border:3px solid rgba(169,223,182,.9)}
#promo-x{position:absolute;top:-15px;right:-15px;width:40px;height:40px;border-radius:50%;
  background:#f2fdf5;color:#2f6b42;font-size:19px;font-weight:900;border:3px solid var(--green-d);
  box-shadow:0 4px 12px rgba(0,0,0,.35);cursor:pointer;line-height:1}
#promo-x:active{transform:scale(.9)}

/* ---------- install-as-app promo ---------- */
#install-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(25,12,4,.55);padding:20px}
#install-overlay[hidden]{display:none}
.install-card{position:relative;width:min(92vw,360px);text-align:center;
  background:rgba(222,255,232,.96);border-radius:24px;padding:28px 22px 18px;
  border:2px solid var(--green-border);box-shadow:0 18px 50px rgba(0,40,60,.35);
  animation:promo-pop .28s ease-out}
.install-card h2{margin:10px 0 6px;font-size:21px;color:#1e5b34;
  font-family:ui-rounded,'SF Pro Rounded','Nunito','Trechet MS',sans-serif}
.install-card p{margin:0 0 14px;font-size:13.5px;color:#2f6b42;line-height:1.45}
.install-icon{width:84px;height:84px;border-radius:22px;
  box-shadow:0 6px 18px rgba(0,40,60,.25);border:2px solid rgba(255,255,255,.7)}
.install-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:#f2fdf5;color:#2f6b42;font-size:15px;font-weight:900;border:2px solid var(--green-d);cursor:pointer;line-height:1}
.install-cta{font-size:16px;padding:12px 26px;margin-bottom:10px}
.install-cta:disabled{opacity:.45;filter:grayscale(.4)}
.install-steps{font-size:13px;background:rgba(255,255,255,.6);border-radius:12px;padding:10px}
.install-later{display:block;margin:2px auto 0;background:none;border:none;color:#5b8a68;
  font-size:13px;text-decoration:underline;cursor:pointer;padding:6px}

/* ---------- fish market ---------- */
.mk-price{font-size:17px;font-weight:800;color:#2f7a45;margin-bottom:6px;white-space:nowrap}
.fm-note{padding:8px 12px;font-size:13px;color:var(--ink-soft);text-align:center}

/* ---------- public chat ---------- */
.screen-body.chat-screen{display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(10px + var(--safe-b))}
.chat-screen{display:flex;flex-direction:column;overflow:hidden;min-height:0}
#comm-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.comm-tabs{margin-bottom:10px;flex-shrink:0}
.comm-tabs .pill-btn img{width:40px;height:40px;object-fit:contain;vertical-align:-12px;margin-right:6px;pointer-events:none}
.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;-webkit-overflow-scrolling:touch;min-height:30vh}
.chat-msg{display:flex;justify-content:flex-start}
.chat-msg.mine{justify-content:flex-end}
.chat-bubble{max-width:82%;background:#e2f4e7;border-radius:14px;padding:7px 11px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chat-msg.mine .chat-bubble{background:#c9ecd2}
.chat-name{font-size:11px;font-weight:800;color:#2f7a45;margin-bottom:1px}
.chat-text{font-size:14px;color:#2b2b3a;word-break:break-word;white-space:pre-wrap}
.chat-time{font-size:10px;color:#999;text-align:right;margin-top:2px}
.chat-input-row{display:flex;gap:8px;padding-top:8px}
.chat-input-row input{flex:1;min-width:0;padding:12px 14px;border-radius:16px;border:2px solid var(--green-border);background:#f2fdf5;font-size:15px;color:#2b2b3a}
.chat-input-row input:focus{outline:none;border-color:var(--green-d)}
#chat-send{flex:none;width:52px;border-radius:16px;font-size:18px}

/* ---------- grab machine ---------- */
#grab-overlay{z-index:350}
.grab-box{background:linear-gradient(180deg,#0e6b78,#0a4a55);border-radius:20px;border:2px solid #c9a227;
  max-width:430px;width:calc(100vw - 24px);max-height:92vh;overflow-y:auto;padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.35)}
.grab-head{display:flex;align-items:center;gap:8px;color:#ffe9a8;font-size:18px;margin-bottom:8px}
.grab-head b{flex:1}
.grab-tag{font-size:10px;background:rgba(255,255,255,.16);color:#dff3ff;border-radius:10px;padding:3px 8px}
.grab-x{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:50%;width:30px;height:30px;font-size:14px}
.grab-help{background:#2e9e5b;font-weight:900}
#grab-canvas{display:block;margin:0 auto;border-radius:12px;touch-action:none;cursor:pointer}
.grab-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0}
.grab-cost{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.25);border-radius:14px;
  padding:8px 14px;color:#fff;font-size:17px}
.grab-cost img{width:22px;height:22px}
.grab-btn{background:radial-gradient(circle at 35% 30%,#7de08a,#2e9e5b 70%);border:3px solid #c9a227;color:#fff;
  font-weight:900;font-size:18px;border-radius:50%;width:92px;height:92px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.grab-btn:active{transform:scale(.93)}
.grab-btn:disabled{filter:grayscale(.6);opacity:.6}
.grab-prizes{background:rgba(0,0,0,.22);border-radius:14px;padding:10px}
.grab-prize-title{color:#ffe9a8;font-weight:800;margin-bottom:6px;font-size:14px}
.grab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:300px;overflow-y:auto}
.grab-cell{background:rgba(255,255,255,.92);border-radius:12px;padding:8px 4px;text-align:center;min-height:86px}
.grab-cell img{width:44px;height:44px;object-fit:contain}
.grab-eggdot{width:34px;height:42px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;margin:0 auto}
.grab-cell-name{font-size:10px;margin-top:4px;color:#2b2b3a;line-height:1.2}
.grab-won{text-align:center;min-width:260px}
.grab-won-title{font-size:20px;font-weight:900;margin-bottom:10px}
.grab-won img{width:90px;height:90px;object-fit:contain}
.grab-won-egg{width:70px;height:88px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;margin:0 auto 8px;
  background:radial-gradient(circle at 35% 30%,#fff,#ffb84d 55%,#e08a2d)}
.grab-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#0e6b78,#0a4a55);
  border:2px solid #c9a227;border-radius:16px;padding:12px;margin-bottom:10px;color:#ffe9a8}
.grab-card .grow{flex:1}
.grab-card .sub{color:#bfe3ea}

/* ============ LOADING SCREEN ============ */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #04070f;
  transition: opacity .5s ease;
  padding: 24px;
  box-sizing: border-box;
}
.loading-screen.hidden { opacity: 0; pointer-events: none; }
.loading-art {
  width: min(78vw, 340px); height: auto; border-radius: 18px;
  margin-bottom: 22px;
  animation: loading-float 3s ease-in-out infinite;
}
@keyframes loading-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.loading-bar {
  width: min(70vw, 280px); height: 14px; border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  overflow: hidden; margin-bottom: 18px;
}
.loading-bar-fill {
  height: 100%; width: 30%; border-radius: 8px;
  background: linear-gradient(90deg, #29b6f6, #7ef9ff, #29b6f6);
  background-size: 200% 100%;
  animation: loading-slide 1.6s ease-in-out infinite, loading-shimmer 1.2s linear infinite;
}
@keyframes loading-slide {
  0% { margin-left: -30%; }
  100% { margin-left: 100%; }
}
@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loading-text { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 8px; text-align: center; }
.loading-sub { color: rgba(255,255,255,.6); font-size: 14px; text-align: center; opacity: 0; transition: opacity .5s; }
.loading-sub.show { opacity: 1; }
.loading-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.loading-bubbles span {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.1));
  animation: bubble-rise linear infinite;
}
.loading-bubbles span:nth-child(1) { left: 8%; width: 12px; height: 12px; animation-duration: 3.2s; animation-delay: 0s; }
.loading-bubbles span:nth-child(2) { left: 22%; width: 8px; height: 8px; animation-duration: 2.6s; animation-delay: .8s; }
.loading-bubbles span:nth-child(3) { left: 38%; width: 16px; height: 16px; animation-duration: 3.8s; animation-delay: .3s; }
.loading-bubbles span:nth-child(4) { left: 55%; width: 10px; height: 10px; animation-duration: 2.9s; animation-delay: 1.2s; }
.loading-bubbles span:nth-child(5) { left: 68%; width: 14px; height: 14px; animation-duration: 3.5s; animation-delay: .5s; }
.loading-bubbles span:nth-child(6) { left: 78%; width: 7px; height: 7px; animation-duration: 2.4s; animation-delay: 1.5s; }
.loading-bubbles span:nth-child(7) { left: 88%; width: 11px; height: 11px; animation-duration: 3.1s; animation-delay: .9s; }
.loading-bubbles span:nth-child(8) { left: 15%; width: 9px; height: 9px; animation-duration: 2.8s; animation-delay: 1.8s; }
.loading-bubbles span:nth-child(9) { left: 48%; width: 13px; height: 13px; animation-duration: 3.4s; animation-delay: 2s; }
.loading-bubbles span:nth-child(10) { left: 82%; width: 6px; height: 6px; animation-duration: 2.2s; animation-delay: 2.3s; }
@keyframes bubble-rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .7; }
  100% { transform: translateY(-105vh); opacity: 0; }
}