/* ── PANEL LAYOUT (portrait, all screens) ─────────── */
.left-panel,.right-panel{ display:contents; }
.hdr      { order:0; }
.scene    { order:1; flex:0 0 auto !important; width:100%; max-width:520px; }
.tile-zone{ order:2; flex:1 !important; min-height:0 !important; width:100%; max-width:520px; }
.hdr      { order:0; width:100%; max-width:520px; box-sizing:border-box; }
.bar-sec  { order:3; width:100%; max-width:520px; box-sizing:border-box; }
.ctrl     { order:4; width:100%; max-width:520px; box-sizing:border-box; }

/* ════════════════════════════════════════════════════
   PROFESSIONAL OCEAN THEME — deep sea, rich gradients
   ════════════════════════════════════════════════════ */

/* ── BODY ─────────────────────────────────────────── */
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Nunito',sans-serif;
  background:
    radial-gradient(ellipse 100% 50% at 50% -10%, rgba(0,80,200,.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 10% 90%,  rgba(0,10,80,.7)   0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 90% 70%,  rgba(0,30,100,.5)  0%, transparent 50%),
    linear-gradient(180deg, #020a18 0%, #050f22 35%, #08172e 65%, #030c1c 100%);
  display:flex;flex-direction:column;align-items:center;
  height:100dvh;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}

/* ── HEADER ───────────────────────────────────────── */
.hdr{
  width:100%;max-width:520px;flex-shrink:0;box-sizing:border-box;
  background:linear-gradient(135deg,#0b2545,#132e58,#0b2545);
  padding:0 10px;height:38px;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 2px 10px rgba(0,0,0,.6);
  border-bottom:1.5px solid rgba(64,148,255,.28);
  position:relative;z-index:10;
}
.hdr-icon{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 1px 4px rgba(0,180,255,.5));}
.gtitle{
  font-family:'Fredoka One',sans-serif;font-size:1rem;white-space:nowrap;flex:1;
  background:linear-gradient(135deg,#bae6fd,#38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hdr-brand,.hdr-stats,.hdr-ctrl{display:flex;align-items:center;}
.stat-chip{
  display:flex;align-items:baseline;gap:3px;
  background:rgba(8,25,60,.88);border:1px solid rgba(64,148,255,.32);
  border-radius:7px;padding:2px 7px;flex-shrink:0;
}
.stat-chip span:first-child{font-family:'Fredoka One',sans-serif;font-size:.95rem;color:#fde68a;}
.sl{font-size:.48rem;font-weight:900;letter-spacing:.8px;color:rgba(125,211,252,.6);}
.stat-n,.stat-l,.stat-pill,.stat-divider{display:none;}
.mute-btn{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:50%;width:26px;height:26px;font-size:.82rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mute-btn:hover{background:rgba(255,255,255,.15);}

/* ── POOL ZONE ────────────────────────────────────── */
.pool-zone{
  flex-shrink:0;z-index:4;padding:3px 8px 2px;
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:520px;box-sizing:border-box;
}
.pool-box{
  position:relative;width:100%;box-sizing:border-box;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%),
    linear-gradient(135deg,#0c2a5e 0%,#0f3470 50%,#0c2a5e 100%);
  border-radius:18px 18px 6px 6px;
  padding:5px;
  box-shadow:
    0 0 0 1px rgba(64,148,255,.25),
    0 0 24px rgba(40,120,255,.2),
    0 10px 36px rgba(0,0,120,.6),
    0 2px 0 rgba(80,180,255,.4),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
.pool-box::before{
  content:'';position:absolute;inset:2px;
  border:1px solid rgba(100,180,255,.22);
  border-radius:16px 16px 5px 5px;pointer-events:none;z-index:2;
}
.pool-body{
  width:100%;border-radius:14px 14px 3px 3px;
  overflow:hidden;position:relative;
  background:
    radial-gradient(ellipse 60% 25% at 50% 5%,  rgba(20,100,220,.25) 0%,transparent 55%),
    radial-gradient(ellipse 35% 30% at 12% 80%, rgba(0,15,60,.9) 0%,transparent 45%),
    radial-gradient(ellipse 40% 30% at 88% 75%, rgba(0,10,50,.8) 0%,transparent 45%),
    radial-gradient(ellipse 80% 20% at 50% 100%,rgba(0,5,30,1) 0%,transparent 60%),
    linear-gradient(180deg,
      #09182e 0%,#0b1e3a 28%,#0e2446 55%,#0c1e3e 78%,#07121e 100%);
}
/* Pool badge */
.pool-badge{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-size:.7rem;font-weight:900;
  padding:4px 14px;
  background:linear-gradient(135deg,rgba(0,15,50,.92),rgba(0,25,70,.95));
  border-radius:20px;
  color:#7dd3fc;letter-spacing:.4px;white-space:nowrap;
  text-shadow:0 0 10px rgba(125,211,252,.4);
  border:1px solid rgba(64,148,255,.35);
  box-shadow:0 2px 10px rgba(0,0,0,.5);z-index:5;
}
.tiles-left{
  position:absolute;right:10px;bottom:8px;
  font-size:.62rem;font-weight:900;
  color:rgba(125,211,252,.75);
  background:rgba(0,15,50,.7);
  border-radius:8px;padding:2px 8px;z-index:5;pointer-events:none;
  border:1px solid rgba(64,148,255,.2);
}

/* ── TIDE & WATER ─────────────────────────────────── */
#tideLayer{
  position:absolute;bottom:0;left:0;right:0;
  height:0%;overflow:hidden;
  transition:height .75s cubic-bezier(.4,0,.2,1);
  z-index:2;pointer-events:none;
}
.tide-body{
  position:absolute;inset:0;
  background:linear-gradient(0deg,#001830 0%,#003a70 30%,#0066aa 60%,#00aacc 80%,#22ccee 100%);
}
.tide-shimmer{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70px 12px at 30% 30%,rgba(255,255,255,.22) 0%,transparent 65%),
    radial-gradient(ellipse 45px  8px at 70% 60%,rgba(255,255,255,.14) 0%,transparent 65%);
  animation:tideShim 2.6s ease-in-out infinite alternate;
}
@keyframes tideShim{from{opacity:.55}to{opacity:1}}
.pw-wave{
  position:absolute;top:-1px;left:-10%;width:120%;
  animation:pwW 2.1s linear infinite;z-index:1;
}
@keyframes pwW{from{transform:translateX(0)}to{transform:translateX(-18px)}}
.tide-wave{position:absolute;top:-1px;left:-10%;width:120%;animation:tideWaveScroll 1.8s linear infinite;z-index:3;}
@keyframes tideWaveScroll{from{transform:translateX(0)}to{transform:translateX(-18px)}}
.tide-foam{
  position:absolute;top:2px;left:0;right:0;height:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,transparent 100%);
  z-index:4;animation:foamPulse 1.2s ease-in-out infinite alternate;
}
@keyframes foamPulse{from{opacity:.5}to{opacity:1}}
.tide-rip{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.42);animation:tideRip var(--d,2s) ease-out var(--dl,0s) infinite;}
@keyframes tideRip{0%{transform:scale(.4);opacity:.7;}100%{transform:scale(2.2);opacity:0;}}
.tide-wave-v{display:none;}

/* ── HERO (mermaid / turtle) ──────────────────────── */
.mermaid{
  position:absolute;bottom:8px;left:50%;
  transform:translateX(-50%);
  width:58px;height:88px;
  z-index:3;pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(0,180,255,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition:bottom .5s ease;
}
.mermaid img{width:100%;height:100%;object-fit:contain;}

/* ── BAR SECTION ──────────────────────────────────── */
.bar-sec{
  width:100%;max-width:520px;flex-shrink:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#0a1e3c 0%,#071428 100%);
  padding:3px 8px 2px;
  border-top:1px solid rgba(64,148,255,.2);
  border-bottom:1px solid rgba(0,0,0,.5);
  box-shadow:0 -4px 16px rgba(0,0,0,.3);
}
.bar-lbl{font-size:.6rem;font-weight:900;letter-spacing:.4px;color:rgba(125,211,252,.6);text-align:center;text-transform:uppercase;margin-bottom:3px;}
.bar-row{display:flex;gap:5px;width:100%;}
.bslot{
  flex:1;min-width:0;height:46px;border-radius:10px;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.02) 100%),
    linear-gradient(145deg,#0c2248 0%,#071830 100%);
  border:1.5px solid rgba(64,148,255,.3);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s,transform .15s;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.4);
}
.bcard{
  font-size:1.55rem;display:flex;align-items:center;justify-content:center;
  width:85%;height:85%;
  filter:drop-shadow(0 2px 6px rgba(0,100,255,.4));
}
.bcard img{width:85%;height:85%;object-fit:contain;}

/* ── CONTROLS ─────────────────────────────────────── */
.ctrl{
  width:100%;max-width:520px;flex-shrink:0;
  display:flex;gap:6px;padding:4px 8px 6px;
  background:linear-gradient(180deg,#071428 0%,#030d1e 100%);
  border-top:1px solid rgba(64,148,255,.15);
}
.btn{
  flex:1;padding:7px 4px;border:none;border-radius:10px;
  font-family:'Fredoka One',sans-serif;font-size:.84rem;
  cursor:pointer;font-weight:700;letter-spacing:.5px;
  transition:transform .1s,box-shadow .1s,filter .1s;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.btn:active{transform:translateY(2px);}
.btn-w{
  background:linear-gradient(160deg,#1e88e5 0%,#1565c0 50%,#0d47a1 100%);
  color:#e3f2fd;
  border-top:1px solid rgba(255,255,255,.2);
  box-shadow:0 4px 0 #0a3572,0 6px 14px rgba(21,101,192,.5);
}
.btn-w:hover{filter:brightness(1.12);}
.btn-g{
  background:linear-gradient(160deg,#ffca28 0%,#fb8c00 50%,#e65100 100%);
  color:#3e1500;
  border-top:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 0 #7c2e00,0 6px 14px rgba(230,81,0,.5);
}
.btn-g:hover{filter:brightness(1.1);}

/* ── TILE ZONE ────────────────────────────────────── */
.tile-zone{
  flex:1;min-height:0;position:relative;z-index:3;
  background:#040e1e center/cover no-repeat;
  transition:opacity .6s ease;
}
.tile-zone::before{
  content:'';position:absolute;inset:0;
  background:rgba(0,5,25,.3);z-index:1;pointer-events:none;
}
#board{position:absolute;inset:0;pointer-events:none;z-index:2;}

/* ── TILES ────────────────────────────────────────── */
.tile{position:absolute;pointer-events:auto;}
.tile.locked{pointer-events:none;}
.tile.locked .tf{filter:brightness(.55) saturate(.5);}
.tile.pop{animation:tPop .28s cubic-bezier(.34,1.56,.64,1);}
@keyframes tPop{from{transform:scale(1);}50%{transform:scale(1.3);}to{transform:scale(0);}}
.tf{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:16px;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,.96) 0%,
      rgba(225,242,255,.88) 50%,
      rgba(235,248,255,.90) 100%);
  border:none;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.7),
    0 0 0 3px rgba(100,170,255,.4),
    0 5px 0 rgba(25,75,175,.6),
    0 8px 18px rgba(0,10,60,.55),
    inset 0 2px 4px rgba(255,255,255,.98),
    inset 0 -1px 3px rgba(80,150,255,.25),
    inset 0 1px 0 rgba(255,255,255,1);
  position:relative;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.tf::after{
  content:'';position:absolute;
  top:6%;left:10%;width:50%;height:28%;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));
  border-radius:50%;pointer-events:none;
}
.tf:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 1.5px rgba(255,255,255,.8),0 0 0 3px rgba(100,200,255,.6),0 8px 0 rgba(25,75,175,.6),0 12px 24px rgba(0,10,60,.6),inset 0 2px 4px rgba(255,255,255,.98);filter:brightness(1.06);}
.tf img{width:74%;height:74%;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,100,.25));}

/* ── TURTLE MODE ──────────────────────────────────── */
.turtle-mode .pool-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%),
    linear-gradient(135deg,#1a3a1a 0%,#224a22 50%,#1a3a1a 100%) !important;
  box-shadow:0 0 0 1px rgba(80,200,80,.2),0 8px 32px rgba(0,80,0,.4),0 2px 0 rgba(80,200,80,.25),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.turtle-mode .pool-box::before{border-color:rgba(120,220,100,.25) !important;}
.turtle-mode .pool-body{
  background:
    radial-gradient(ellipse 70% 30% at 50% 0%,rgba(0,100,0,.25) 0%,transparent 60%),
    linear-gradient(180deg,#0d1e0d 0%,#122212 40%,#162a16 70%,#0d1a0d 100%) !important;
}
.turtle-mode .bar-lbl{color:rgba(120,220,100,.7) !important;}
.turtle-mode .pool-badge{color:#86efac !important;text-shadow:0 0 10px rgba(134,239,172,.4) !important;border-color:rgba(80,200,80,.35) !important;}
.dam-zone{display:none !important;}

/* ── OVERLAYS ─────────────────────────────────────── */
.ov{
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,rgba(0,20,60,.9) 0%,rgba(0,5,20,.97) 100%);
  display:none;align-items:center;justify-content:center;z-index:200;
}
.ovbox{
  background:
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%),
    linear-gradient(145deg,#0d2550 0%,#0f2d60 50%,#0d2550 100%);
  border:1px solid rgba(80,150,255,.3);
  border-radius:24px;padding:32px 24px;width:88%;max-width:380px;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 60px rgba(0,0,80,.7),
    0 8px 20px rgba(0,0,40,.5),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.ovem{font-size:3.2rem;margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(0,150,255,.4));}
.ovtitle{
  font-family:'Fredoka One',sans-serif;font-size:1.7rem;
  background:linear-gradient(135deg,#7dd3fc,#38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:8px;
}
.ovsub{font-size:.88rem;color:rgba(186,230,253,.75);line-height:1.5;margin-bottom:20px;}
.ovbtn{
  width:100%;padding:14px;
  background:linear-gradient(160deg,#1e88e5 0%,#1565c0 50%,#0d47a1 100%);
  color:#e3f2fd;border:none;border-radius:14px;
  font-family:'Fredoka One',sans-serif;font-size:1.15rem;cursor:pointer;
  box-shadow:0 4px 0 #0a3572,0 6px 16px rgba(21,101,192,.5);
  border-top:1px solid rgba(255,255,255,.2);
  transition:transform .1s,filter .1s;
}
.ovbtn:hover{filter:brightness(1.1);}
.ovbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #0a3572;}

/* ── COMBO BADGE ──────────────────────────────────── */
.combo{
  font-family:'Fredoka One',sans-serif;font-size:.8rem;
  padding:4px 10px;border-radius:20px;align-items:center;gap:2px;
  background:linear-gradient(135deg,#f59e0b,#ef6c00);
  color:#fff;border:1px solid rgba(255,200,0,.4);
  box-shadow:0 0 14px rgba(245,158,11,.5);
  animation:comboPulse .45s ease-in-out infinite alternate;
  flex-shrink:0;
}
@keyframes comboPulse{from{transform:scale(1);}to{transform:scale(1.08);}}
@keyframes cPop{from{transform:scale(.7);}to{transform:scale(1);}}

/* ── SCORE POPUP & EFFECTS ────────────────────────── */
.sPopup{
  position:fixed;font-family:'Fredoka One',sans-serif;
  font-size:1.3rem;font-weight:900;pointer-events:none;z-index:250;
  text-shadow:0 0 12px rgba(255,220,0,.6),0 2px 4px rgba(0,0,0,.5);
  animation:sPopOut .65s ease-out forwards;
  background:linear-gradient(135deg,#ffe57a,#ff9800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
@keyframes sPopOut{0%{opacity:1;transform:translateY(0) scale(1);}60%{opacity:.8;}100%{opacity:0;transform:translateY(-52px) scale(.6);}}
.wdrop{position:fixed;pointer-events:none;z-index:202;border-radius:50%;animation:wdropOut var(--d) ease-out forwards;}
@keyframes wdropOut{0%{opacity:.9;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2);}}
.bubble{position:absolute;border-radius:50%;border:1.5px solid rgba(150,220,255,.5);pointer-events:none;z-index:6;animation:bubRise var(--d,2s) ease-in var(--dl,0s) forwards;}
@keyframes bubRise{0%{opacity:.7;transform:translateX(0) scale(1);}50%{opacity:.5;transform:translateX(var(--sx,4px)) scale(.9);}100%{opacity:0;transform:translateX(0) translateY(var(--ty,-80px)) scale(.4);}}
.bslot.warn{border-color:rgba(255,80,60,.7)!important;animation:warnPulse .5s ease-in-out infinite alternate;}
@keyframes warnPulse{from{box-shadow:0 0 0 0 rgba(255,80,60,0);}to{box-shadow:0 0 10px 3px rgba(255,80,60,.5);}}
.star-row{display:flex;justify-content:center;gap:6px;margin:10px 0;}
.star{font-size:2.2rem;transition:transform .3s,filter .3s;}
.star.lit{animation:starPop .4s cubic-bezier(.34,1.56,.64,1) forwards;}
.star.dim{filter:grayscale(1) opacity(.35);}
@keyframes starPop{from{transform:scale(.3) rotate(-20deg);}to{transform:scale(1) rotate(0deg);}}
.lvl-transition{position:fixed;inset:0;z-index:290;background:radial-gradient(circle at center,rgba(100,200,255,.5),rgba(0,0,80,.8));pointer-events:none;animation:lvlFlash .6s ease-out forwards;}
@keyframes lvlFlash{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
.wave-crash{position:absolute;left:0;right:0;pointer-events:none;z-index:7;animation:waveCrash .6s ease-out forwards;overflow:hidden;}
@keyframes waveCrash{0%{opacity:0;transform:scaleX(.8);}25%{opacity:.8;transform:scaleX(1.05);}60%{opacity:.6;transform:scaleX(1);}100%{opacity:0;transform:scaleX(1);}}
.pw-sh{position:absolute;inset:0;background:radial-gradient(ellipse 80px 14px at 25% 30%,rgba(255,240,180,.35) 0%,transparent 70%),radial-gradient(ellipse 55px 9px at 70% 60%,rgba(255,230,150,.2) 0%,transparent 70%);}

/* ── SPECIAL TILES ────────────────────────────────── */
.tf.special-bomb{
  background:linear-gradient(145deg,rgba(40,10,10,.95),rgba(20,5,5,.98)) !important;
  box-shadow:0 0 0 2px rgba(255,50,50,.5),0 0 0 3.5px rgba(200,0,0,.3),0 5px 0 rgba(100,0,0,.8),0 8px 16px rgba(200,0,0,.4),inset 0 1px 0 rgba(255,100,100,.2) !important;
}
.tf.special-shuffle{
  background:linear-gradient(145deg,rgba(10,20,60,.95),rgba(5,15,50,.98)) !important;
  box-shadow:0 0 0 2px rgba(80,150,255,.5),0 0 0 3.5px rgba(50,100,255,.3),0 5px 0 rgba(20,60,180,.8),0 8px 16px rgba(0,50,255,.4),inset 0 1px 0 rgba(100,170,255,.2) !important;
}
.tf.special-bomb::before,.tf.special-shuffle::before{content:none;}

/* ── SAND / BEACH (turtle mode pool body) ─────────── */
.turtle-mode #tideLayer .tide-body{
  background:linear-gradient(0deg,#003a60 0%,#0070aa 35%,#0099cc 65%,#22b8d8 85%,#55d0e8 100%);
}

/* ── LEVEL BANNER ─────────────────────────────────── */
#lvlBanner{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,rgba(8,25,65,.95),rgba(12,35,85,.98));
  color:#fff;border-radius:16px;
  padding:10px 22px;font-family:'Fredoka One',sans-serif;
  font-size:.9rem;z-index:300;text-align:center;
  border:1.5px solid rgba(80,150,255,.4);max-width:90vw;
  box-shadow:0 8px 24px rgba(0,0,80,.6),0 0 0 1px rgba(255,255,255,.06);
  animation:bannerIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bannerIn{from{opacity:0;transform:translateX(-50%) translateY(-14px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#tideLayer .beach-tide-body,.beachTide{display:none !important;}

/* ── LOCK OVERLAY ─────────────────────────────────── */
.tile.locked .tf::before{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,40,.55);border-radius:16px;z-index:4;
}

/* ── DRAIN (hidden) ───────────────────────────────── */
.drain-hole{display:none;}
.drain-st{display:none;}