/* หน้าเริ่มเกม */
/* หน้าเริ่มเกมแบบใหม่ */
#startOverlay{z-index:250}
.startOverlay{
  padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(0,33,56,.18),rgba(0,15,31,.72)),
    url("../images/start-cover.jpg") center 48% / cover no-repeat;
}
.startOverlay::before,.startOverlay::after{
  content:"";position:absolute;inset:auto;border-radius:50%;
  pointer-events:none;opacity:.42
}
.startOverlay::before{
  width:10px;height:10px;left:9%;bottom:12%;
  box-shadow:
    40px -110px 0 2px rgba(198,245,255,.38),
    120px -30px 0 -1px rgba(198,245,255,.34),
    220px -170px 0 3px rgba(198,245,255,.28),
    330px -70px 0 1px rgba(198,245,255,.34),
    450px -190px 0 2px rgba(198,245,255,.24);
  animation:startBubbleRise 7s linear infinite
}
.startOverlay::after{
  width:6px;height:6px;right:14%;bottom:2%;
  box-shadow:
    -20px -80px 0 1px rgba(198,245,255,.35),
    -100px -210px 0 3px rgba(198,245,255,.24),
    -250px -120px 0 1px rgba(198,245,255,.28),
    -390px -250px 0 2px rgba(198,245,255,.24);
  animation:startBubbleRise 9s linear infinite 1.2s
}
@keyframes startBubbleRise{
  from{transform:translateY(32px);opacity:.08}
  45%{opacity:.5}
  to{transform:translateY(-70px);opacity:0}
}
.startCard{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 24px);
  overflow:auto;scrollbar-width:none;
  padding:18px 16px 15px;border-radius:28px;
  border:1px solid rgba(134,231,255,.42);
  background:
    linear-gradient(180deg,rgba(8,61,96,.84),rgba(3,31,57,.93));
  backdrop-filter:blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 22px 70px rgba(0,0,0,.46);
  text-align:center
}
.startCard::-webkit-scrollbar{display:none}
.startCard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34%;
  pointer-events:none;border-radius:27px 27px 46% 46%;
  background:linear-gradient(180deg,rgba(89,218,255,.18),transparent)
}
.startHero{
  position:relative;display:grid;grid-template-columns:72px 1fr 72px;
  align-items:center;gap:4px;min-height:104px
}
.startBrand{position:relative;z-index:2;min-width:0}
.startBrandMark{
  display:inline-flex;align-items:center;gap:5px;
  margin-bottom:2px;padding:4px 9px;border-radius:999px;
  border:1px solid rgba(255,229,133,.42);
  background:rgba(255,201,73,.10);
  color:#ffe69b;font-size:10px;font-weight:900;letter-spacing:.08em
}
.startTitle{
  margin:0;color:#f5fcff;
  font-size:clamp(27px,7vw,43px);line-height:1.02;letter-spacing:-1px;
  text-shadow:0 5px 14px rgba(0,26,56,.55)
}
.startTitle span{display:block;color:#ffd45f;font-size:.72em;letter-spacing:-1px}
.startTagline{
  margin:7px auto 0;max-width:300px;
  color:#c8edf8;font-size:12px;line-height:1.35
}
.cuteFish{
  width:82px;height:auto;overflow:visible;
  filter:drop-shadow(0 7px 7px rgba(0,20,45,.34));
  animation:menuFishFloat 3.4s ease-in-out infinite
}
.cuteFish.right{animation-delay:-1.4s}
@keyframes menuFishFloat{
  0%,100%{transform:translateY(2px) rotate(-2deg)}
  50%{transform:translateY(-5px) rotate(2deg)}
}
.startAquarium{
  position:relative;height:108px;margin:5px 0 10px;
  overflow:hidden;border-radius:22px;
  border:1px solid rgba(129,231,255,.34);
  background:
    radial-gradient(circle at 50% -30%,rgba(184,248,255,.38),transparent 48%),
    linear-gradient(180deg,#167ead 0%,#07547f 65%,#063e66 100%);
  box-shadow:inset 0 8px 18px rgba(199,250,255,.09)
}
.startAquarium::before{
  content:"";position:absolute;left:-5%;right:-5%;bottom:-13px;height:40px;
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(circle at 12% 15%,#ff8f79 0 5px,transparent 6px),
    radial-gradient(circle at 28% 22%,#c576dc 0 7px,transparent 8px),
    radial-gradient(circle at 74% 18%,#68d8a4 0 6px,transparent 7px),
    radial-gradient(circle at 90% 24%,#ffb95c 0 5px,transparent 6px),
    linear-gradient(180deg,#4e8e83,#295e69);
  opacity:.86
}
.startAquarium::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 28%,rgba(223,253,255,.72) 0 2px,transparent 3px),
    radial-gradient(circle at 85% 36%,rgba(223,253,255,.64) 0 3px,transparent 4px),
    radial-gradient(circle at 67% 16%,rgba(223,253,255,.65) 0 2px,transparent 3px),
    linear-gradient(105deg,transparent 20%,rgba(204,249,255,.08) 35%,transparent 48%)
}
.startSwimFish{
  position:absolute;width:94px;height:auto;z-index:2;
  filter:drop-shadow(0 6px 6px rgba(0,23,48,.32))
}
.startSwimFish.one{left:8%;top:16px;animation:swimBob 3s ease-in-out infinite}
.startSwimFish.two{right:7%;top:21px;animation:swimBob 3.3s ease-in-out infinite -1.2s}
.startPuffer{
  position:absolute;left:50%;top:22px;z-index:3;
  width:72px;transform:translateX(-50%);
  animation:pufferBob 2.8s ease-in-out infinite
}
@keyframes swimBob{
  0%,100%{transform:translateY(2px)}
  50%{transform:translateY(-5px)}
}
@keyframes pufferBob{
  0%,100%{transform:translate(-50%,2px) rotate(-2deg)}
  50%{transform:translate(-50%,-4px) rotate(2deg)}
}
.startStats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 9px
}
.startStat{
  min-width:0;padding:7px 4px;border-radius:13px;
  border:1px solid rgba(132,226,255,.23);
  background:rgba(5,40,68,.67);
  color:#eafaff;font-size:10px;font-weight:900
}
.startStat span{display:block;font-size:18px;margin-bottom:1px}
.startFeatures{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px
}
.startFeature{
  padding:8px;border-radius:14px;text-align:left;
  border:1px solid rgba(132,226,255,.20);
  background:rgba(7,42,70,.64);
  color:#e9faff;font-size:10px;line-height:1.25
}
.startFeature b{display:block;color:#fff;font-size:11px;margin-bottom:2px}
.startSaveStatus{
  min-height:29px;display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;padding:6px 10px;border-radius:12px;
  background:rgba(80,226,177,.10);
  border:1px solid rgba(80,226,177,.28);
  color:#bff8dd;font-size:10px;font-weight:800
}
.startPlayBtn{
  min-height:58px;border-radius:18px;font-size:21px;
  background:linear-gradient(135deg,#ffd45f,#ffb846);
  color:#4a2b08;box-shadow:0 10px 28px rgba(255,187,65,.25)
}
.startPlayBtn:active{transform:translateY(2px)}
.startActions{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px
}
.startActions .secondary{
  margin:0;min-height:43px;font-size:12px;background:rgba(8,45,73,.88)
}
.startInstallBtn{
  min-height:42px;margin-top:8px;font-size:12px;border-radius:13px
}
.startInstallNote{font-size:9px;margin-top:5px}
@media (max-width:420px){
  .startCard{padding:14px 12px 12px;border-radius:24px}
  .startHero{grid-template-columns:58px 1fr 58px;min-height:88px}
  .cuteFish{width:66px}
  .startTagline{font-size:10px}
  .startAquarium{height:96px;margin-top:3px}
  .startSwimFish{width:82px}
  .startPuffer{width:63px}
  .startStats{gap:4px}
  .startStat{font-size:8.5px;padding:6px 2px}
  .startStat span{font-size:16px}
  .startFeature{font-size:8.5px;padding:7px}
  .startFeature b{font-size:10px}
  .startPlayBtn{min-height:53px;font-size:19px}
}
@media (max-height:720px){
  .startCard{max-height:calc(100dvh - 12px);padding-top:11px}
  .startHero{min-height:76px}
  .startAquarium{height:82px;margin:2px 0 7px}
  .startStats{margin-bottom:6px}
  .startFeatures{display:none}
  .startSaveStatus{margin-bottom:6px}
  .startPlayBtn{min-height:50px}
}