.start-screen{

  --play-w: 250px;
  --map-w: 210px;
  --ranking-w: 200px;
  --restart-w: 70px;
  

  --icon-w: 82px;
  --sound-w: 200px;

  --play-x: 60vw;
  --play-y: 14vh;

  --map-x: 60vw;
  --map-y: 38vh;

  --ranking-x: 60vw;
  --ranking-y: 79vh;

  --restart-x: 38vw;
  --restart-y: 82vh;

  --facebook-x: 38vw;
  --facebook-y: 22vh;

  --social-x: 38vw;
  --social-y: 40vh;

  --infinite-x: 38vw;
  --infinite-y: 54vh;

  --sound-x: 60vw;
  --sound-y: 54vh;

  --settings-x: 38vw;
  --settings-y: 66vh;

  position:fixed;
  inset:0;

  overflow:hidden;

  background:#120d0b;
}

.start-screen.start-leaving *,
.start-screen.start-leaving *::before,
.start-screen.start-leaving *::after{
  animation:none !important;
  transition:none !important;
  filter:none !important;
}
.start-bg{

  position:absolute;
  inset:0;

  background:
    url("../../assets/img/start/bg.webp")
    center center / cover no-repeat;

  transform:scale(1.02);
}

.start-overlay{

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.08),
      rgba(0,0,0,0.30)
    );

  pointer-events:none;
}

.start-box{

  position:absolute;
  inset:0;

  z-index:2;
}

.panel-btn,
.restart-btn,
.icon-btn{

  position:absolute;

  border:none;
  background:none;

  padding:0;
  margin:0;

  cursor:pointer;
  overflow:visible;

  transform:
    translate(-50%, -50%);

  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.panel-btn img,
.restart-btn img,
.icon-btn img{

  display:block;

  width:100%;
  height:auto;

  object-fit:contain;

  pointer-events:none;

  filter:
    drop-shadow(
      0 8px 16px rgba(0,0,0,0.38)
    );
}

.panel-btn:hover,
.restart-btn:hover,
.icon-btn:hover{

  transform:
    translate(-50%, -50%)
    scale(1.04);

  filter:brightness(1.05);
}

.panel-btn:disabled,
.icon-btn:disabled{

  opacity:0.92;

  filter:none;

  cursor:pointer;
}

/* ===============================
   PANEL PLAY
=============================== */

#btn-start{

  left:var(--play-x);
  top:var(--play-y);

  width:var(--play-w);
  height:90px;

  z-index:4;
}

.start-level-number{

  position:absolute;
right:8.5%;
top:82%;

width:34%;
height:75%;

  display:flex;
  align-items:center;
  justify-content:center;

  transform:
    translateY(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #ff7257 0%,
      #d42222 45%,
      #7f0707 100%
    );

  border:3px solid #ffd35a;

  color:#fff4a0;

  font-family:Arial, sans-serif;
  font-size:clamp(18px, 3.5vw, 42px);
  font-weight:900;
  line-height:1;

  text-shadow:
    0 2px 0 #3a2a00,
    0 0 8px rgba(255,255,120,0.85);

  box-shadow:
    inset 0 2px 8px rgba(255,255,255,0.35),
    0 3px 0 #4a1208,
    0 0 8px rgba(255,210,80,0.75);

  pointer-events:none;
}

/* ===============================
   PANEL MAP
=============================== */

#btn-map{

  left:var(--map-x);
  top:var(--map-y);

  width:var(--map-w);
  height:96px;

  z-index:5;
}

/* ===============================
   PANEL RANKING
=============================== */

#btn-ranking{

  left:var(--ranking-x);
  top:var(--ranking-y);

  width:var(--ranking-w);
  height:110px;
}

/* ===============================
   RESTART
=============================== */

#btn-restart{

  left:var(--restart-x);
  top:var(--restart-y);

  width:var(--restart-w);
}

#btn-restart:hover{

  transform:
    translate(-50%, -50%)
    rotate(-7deg)
    scale(0.9);
}

/* ===============================
   LEFT ICONS
=============================== */

#btn-facebook{

  left:var(--facebook-x);
  top:var(--facebook-y);

  width:var(--icon-w);
}

#btn-social{

  left:var(--social-x);
  top:var(--social-y);

  width:var(--icon-w);
}

#btn-infinite{

  left:var(--infinite-x);
  top:var(--infinite-y);

  width:var(--icon-w);
}

/* ===============================
   SOUND / SETTINGS
=============================== */

.start-sound-btn{

  left:var(--sound-x);
  top:var(--sound-y);

  width:var(--sound-w);

  z-index:5;
}

.start-settings-btn{

  left:var(--settings-x);
  top:var(--settings-y);

  width:var(--icon-w);

  z-index:5;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 900px){

  .start-screen{

    --play-w: 340px;
    --map-w: 340px;
    --ranking-w: 340px;
    --restart-w: 150px;

    --icon-w: 68px;

    --play-x: 68vw;
    --map-x: 68vw;
    --ranking-x: 68vw;
    --restart-x: 68vw;

    --facebook-x: 24vw;
    --social-x: 24vw;
    --infinite-x: 24vw;
  }
}

@media (max-width: 600px){

  .start-screen{

    --play-w: 280px;
    --map-w: 280px;
    --ranking-w: 250px;
    --restart-w: 130px;

    --icon-w: 48px;

    --play-x: 63vw;
    --play-y: 32vh;

    --map-x: 63vw;
    --map-y: 47vh;

    --ranking-x: 63vw;
    --ranking-y: 60vh;

    --restart-x: 63vw;
    --restart-y: 73vh;
  }
}

@media (orientation: portrait) and (max-width: 600px){

  .start-screen{

    --play-w: min(238px, 62vw);
    --map-w: min(238px, 62vw);
    --ranking-w: min(196px, 52vw);
    --restart-w: min(78px, 21vw);

    --icon-w: min(50px, 13vw);
    --sound-w: min(150px, 39vw);

    --play-x: 68vw;
    --play-y: 32vh;

    --map-x: 68vw;
    --map-y: 49vh;

    --ranking-x: 68vw;
    --ranking-y: 80vh;

    --restart-x: 18vw;
    --restart-y: 86vh;

    --facebook-x: 18vw;
    --facebook-y: 31vh;

    --social-x: 18vw;
    --social-y: 45vh;

    --infinite-x: 18vw;
    --infinite-y: 59vh;

    --sound-x: 68vw;
    --sound-y: 59.5vh;

    --settings-x: 18vw;
    --settings-y: 72vh;
  }

  .start-bg{
    background-position:
      center top;
  }

  .start-bg::after{
    right:13vw;
    bottom:15vh;
    width:190px;
    height:190px;
  }

  .start-level-number{
    font-size:
      clamp(15px, 6vw, 24px);
  }

  #btn-restart{
    z-index:7;
  }

  #btn-ranking{
    z-index:6;
  }

  .start-sound-btn,
  .start-settings-btn{
    z-index:8;
  }

  #btn-settings{
    left:18vw !important;
    top:72vh !important;
    width:var(--icon-w) !important;
  }
}
/* =========================================
   IDLE MOTION
========================================= */

@keyframes startFloat{

  0%{
    transform:
      translate(-50%, -50%)
      translateY(0px);
  }

  50%{
    transform:
      translate(-50%, -50%)
      translateY(-6px);
  }

  100%{
    transform:
      translate(-50%, -50%)
      translateY(0px);
  }
}

@keyframes iconFloat{

  0%{
    transform:
      translate(-50%, -50%)
      translateY(0px);
  }

  50%{
    transform:
      translate(-50%, -50%)
      translateY(-4px);
  }

  100%{
    transform:
      translate(-50%, -50%)
      translateY(0px);
  }
}

@keyframes chestGlow{

  0%{
    filter:
      drop-shadow(
        0 0 0 rgba(255,210,80,0)
      );
  }

  50%{
    filter:
      drop-shadow(
        0 0 18px rgba(255,210,80,0.45)
      );
  }

  100%{
    filter:
      drop-shadow(
        0 0 0 rgba(255,210,80,0)
      );
  }
}

/* =========================================
   PANELS
========================================= */

#btn-start{

  animation:none;
}

#btn-map{

  animation:
    startFloat 4.2s ease-in-out infinite;
}

#btn-ranking{

  animation:
    startFloat 4.6s ease-in-out infinite;
}

/* =========================================
   ICONS
========================================= */

#btn-facebook{

  animation:
    iconFloat 3.5s ease-in-out infinite;
}

#btn-social{

  animation:
    iconFloat 4s ease-in-out infinite;
}

#btn-infinite{

  animation:
    iconFloat 4.5s ease-in-out infinite;
}

/* =========================================
   SETTINGS / SOUND
========================================= */

.start-sound-btn{

  animation:
    iconFloat 4.2s ease-in-out infinite;
}

.start-settings-btn{

  animation:
    iconFloat 4.8s ease-in-out infinite;
}

/* =========================================
   TREASURE
========================================= */

.start-bg::after{

  content:"";

  position:absolute;

  right:10vw;
  bottom:7vh;

  width:260px;
  height:260px;

  background:
    radial-gradient(
      circle,
      rgba(255,220,120,0.28),
      rgba(255,220,120,0)
    );

  pointer-events:none;

  animation:
    chestGlow 4s ease-in-out infinite;
}

.start-modal.hidden{

  display:none;
}

.start-modal{

  position:absolute;
  inset:0;

  z-index:30;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(0,0,0,0.48);
}

.start-modal-box{

  position:relative;

  width:min(430px, 88vw);

  padding:28px 28px 24px;

  border:2px solid rgba(255,220,130,0.76);
  border-radius:8px;

  background:
    linear-gradient(
      180deg,
      rgba(72,38,18,0.98),
      rgba(18,12,9,0.98)
    );

  color:#ffe8ab;

  text-align:center;

  box-shadow:
    0 20px 56px rgba(0,0,0,0.58);
}

.start-modal-box h2{

  margin:0 0 18px;

  font-size:28px;
  line-height:1.1;
}

.start-modal-box p{

  margin:0 0 18px;

  color:#fff1c4;

  font-size:16px;
  line-height:1.4;
}

.start-modal-close{

  position:absolute;
  right:10px;
  top:8px;

  width:32px;
  height:32px;

  border:0;
  border-radius:50%;

  background:#2a1710;
  color:#ffe7a8;

  cursor:pointer;
}

.start-modal-status,
.start-modal-row{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin:12px 0;

  color:#fff1c4;

  font-size:16px;
  font-weight:800;
}

.start-modal-action,
.start-modal-toggle{

  display:block;

  width:100%;
  min-height:44px;

  margin-top:10px;
  padding:0 14px;

  border:0;
  border-radius:7px;

  background:#f0bd48;
  color:#27150c;

  font-size:16px;
  font-weight:800;

  cursor:pointer;
}

.start-modal-action.exit{

  background:#3a2117;
  color:#ffe8ab;
}

.start-modal-toggle{

  width:auto;
  min-width:90px;

  margin-top:0;
}

.start-volume-range{

  flex:1;
  min-width:120px;

  accent-color:#f0bd48;
}

.start-ranking-modal{
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,196,80,0.12),
      rgba(0,0,0,0.58) 56%,
      rgba(0,0,0,0.72)
    );
}

.start-ranking-box{
  width:min(560px, 92vw);
  max-height:78vh;
  padding:26px 24px 22px;
  overflow:hidden;
  border-radius:14px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,226,142,0.22),
      rgba(255,226,142,0) 42%
    ),
    linear-gradient(
      180deg,
      rgba(102,58,25,0.98),
      rgba(31,18,11,0.99)
    );
  box-shadow:
    0 22px 58px rgba(0,0,0,0.62),
    inset 0 2px 0 rgba(255,244,190,0.24),
    inset 0 -9px 18px rgba(0,0,0,0.32);
}

.start-ranking-summary{
  margin:-4px 0 14px !important;
  color:#fff0b8 !important;
  font-weight:900;
  text-shadow:
    0 2px 0 rgba(61,28,8,0.86);
}

.start-player-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}

.start-player-name-input{
  flex:1;
  min-width:0;
  height:42px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid rgba(255,218,126,0.48);
  background:
    linear-gradient(
      180deg,
      rgba(42,23,13,0.96),
      rgba(22,13,9,0.96)
    );
  color:#fff4bf;
  font-size:16px;
  font-weight:900;
  outline:none;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.36),
    0 0 8px rgba(255,196,74,0.12);
}

.start-player-name-input::placeholder{
  color:rgba(255,232,174,0.58);
}

.start-player-name-save{
  height:32px;
  min-width:104px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  color:#2b1608;
  background:
    linear-gradient(
      180deg,
      #ffe17a,
      #d88a23
    );
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.36),
    0 5px 0 rgba(87,39,10,0.72),
    0 0 12px rgba(255,204,76,0.22);
}

.start-social-box{
  width:min(470px, 90vw);
  border-radius:14px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,226,142,0.22),
      rgba(255,226,142,0) 44%
    ),
    linear-gradient(
      180deg,
      rgba(94,52,23,0.98),
      rgba(24,15,10,0.99)
    );
}

.start-social-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:4px 0 16px;
}

.start-social-link{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:0 14px;
  border:1px solid rgba(255,215,118,0.28);
  border-radius:10px;
  color:#fff0ba;
  background:
    linear-gradient(
      180deg,
      rgba(80,44,20,0.95),
      rgba(35,21,13,0.98)
    );
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 12px rgba(0,0,0,0.28);
}

.start-social-link span{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border-radius:50%;
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.26),
    0 0 10px rgba(255,255,255,0.16);
}

.start-social-link.facebook span{
  background:#1877f2;
}

.start-social-link.instagram span{
  background:
    linear-gradient(
      135deg,
      #feda75,
      #d62976 52%,
      #4f5bd5
    );
}

.start-social-link.tiktok span{
  background:
    linear-gradient(
      135deg,
      #00f2ea,
      #111 48%,
      #ff0050
    );
}

.start-social-link.youtube span{
  background:#ff0033;
}

.start-social-link.whatsapp span{
  background:#25d366;
}

@media (max-width: 520px){
  .start-social-grid{
    grid-template-columns:1fr;
  }
}

.start-ranking-list{
  max-height:52vh;
  overflow-y:auto;
  padding:4px 8px 4px 4px;
}

.start-ranking-row{
  min-height:42px;
  display:grid;
  grid-template-columns:46px 1fr 64px 92px;
  align-items:center;
  gap:8px;
  margin:0 0 7px;
  padding:0 12px;
  border-radius:8px;
  color:#ffe9aa;
  background:
    linear-gradient(
      180deg,
      rgba(92,51,22,0.86),
      rgba(38,21,12,0.9)
    );
  border:1px solid rgba(255,212,118,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 5px 10px rgba(0,0,0,0.24);
}

.start-ranking-row.player{
  color:#fff7c9;
  background:
    linear-gradient(
      180deg,
      rgba(224,151,45,0.95),
      rgba(116,55,18,0.98)
    );
  border-color:rgba(255,232,142,0.72);
  box-shadow:
    0 0 16px rgba(255,204,68,0.36),
    inset 0 2px 0 rgba(255,255,255,0.22);
}

.rank-pos{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#2c1708;
  background:
    radial-gradient(
      circle at 35% 25%,
      #fff4a8,
      #e9a72f 62%,
      #8b4812
    );
  font-weight:900;
  box-shadow:
    0 2px 0 rgba(70,28,8,0.7),
    0 0 8px rgba(255,210,80,0.34);
}

.rank-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
  font-weight:900;
}

.rank-level{
  color:#ffd36f;
  font-size:13px;
  font-weight:900;
}

.rank-score{
  text-align:right;
  color:#fff4b8;
  font-size:18px;
  text-shadow:
    0 2px 0 rgba(58,27,8,0.88),
    0 0 8px rgba(255,220,100,0.28);
}

.legal-back-btn{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);

  min-width:180px;
  height:48px;

  border:none;
  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      #d6a545,
      #9a6521
    );

  color:#ffffff;

  font-size:16px;
  font-weight:700;

  box-shadow:
    0 4px 12px rgba(0,0,0,.35);

  cursor:pointer;

  z-index:9999;
}