.start-screen{
  --start-bg:none;
  --play-w:min(286px, 39vw);
  --ranking-w:min(222px, 34vw);
  --map-w:min(210px, 32vw);
  --restart-w:min(78px, 12vw);
  --icon-w:min(70px, 11vw);
  --sound-w:min(170px, 27vw);
  --main-x:73vw;
  --side-x:27vw;
  --settings-x:73vw;
  --play-y:34vh;
  --ranking-y:50vh;    --map-y:66vh;
  --trophies-y:28vh;
  --wave-y:18vh;
  --facebook-y:38vh;
  --social-y:48vh;
  --challenge-y:59vh;
  --settings-y:70vh;
  --restart-y:79vh;
  --sound-y:70vh;

  position:fixed;
  inset:0;
  isolation:isolate;
  overflow:hidden;
  background-color:#090305;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.start-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(2,12,20,0.14), rgba(2,8,16,0.44)),
    url("../assets/img/start/start-bg.webp"),
    radial-gradient(circle at 50% 36%, rgba(94,14,18,0.42), rgba(10,3,5,0.22) 34%, rgba(4,1,2,0.94) 78%),
    linear-gradient(180deg, #160508, #050102);
  transform:scale(1.01);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  animation:startWaterDrift 8.5s ease-in-out infinite alternate;
  will-change:transform, background-position;
}

@keyframes startWaterDrift{
  0%{
    transform:scale(1.035) translate3d(-1.2%, -.4%, 0);
    background-position:48% 50%;
  }

  50%{
    transform:scale(1.055) translate3d(.8%, .35%, 0);
    background-position:52% 49%;
  }

  100%{
    transform:scale(1.04) translate3d(1.4%, -.2%, 0);
    background-position:54% 51%;
  }
}

.start-curtain{
  display:none;
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  width:55%;
  pointer-events:none;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:
    drop-shadow(0 0 18px rgba(0,0,0,0.42))
    saturate(1.08);
  transition:
    transform 720ms cubic-bezier(.58, .02, .17, 1),
    filter 720ms ease;
  will-change:transform;
}

.start-curtain-left{
  left:-2%;
  transform-origin:left center;
  background-image:url("../assets/img/start/telon/curtain-left.png");
}

.start-curtain-right{
  right:-2%;
  transform-origin:right center;
  background-image:url("../assets/img/start/telon/curtain-right.png");
}

.start-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, rgba(8,24,32,0.10), rgba(8,24,32,0.18) 58%, rgba(8,24,32,0.34));
}

.start-brand{
  position:absolute;
  left:50%;
  top:calc(34px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#fff7c8;
  text-align:center;
  text-shadow:
    0 3px 4px rgba(55,24,10,0.72),
    0 0 18px rgba(255,230,120,0.28);
}

.start-brand span{
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
}

.start-brand strong{
  font-size:42px;
  line-height:0.92;
}

.start-box{
  position:absolute;
  inset:0;
  z-index:4;
}

.panel-btn,
.restart-btn,
.icon-btn{
  position:absolute;
  border:0;
  background:none;
  padding:0;
  margin:0;
  cursor:pointer;
  overflow:visible;
  transform:translate(-50%, -50%);
  transition:
    transform 160ms ease,
    filter 160ms ease,
    opacity 160ms 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 10px 16px rgba(20,30,34,0.40))
    saturate(1.06);
}

.panel-btn:active,
.restart-btn:active,
.icon-btn:active{
  transform:translate(-50%, -50%) scale(0.96);
}

.icon-btn.is-audio-off{
  opacity:0.58;
  filter:grayscale(0.55);
}

.start-play-btn{
  left:var(--main-x);
  top:var(--play-y);
  width:var(--play-w);
  z-index:5;
}

.start-ranking-btn{
  left:var(--main-x);
  top:var(--ranking-y);
  width:var(--ranking-w);
  z-index:5;
}

.start-map-btn{
  left:calc(var(--main-x) + min(34px, 5vw));
  top:var(--map-y);
  width:var(--map-w);
  z-index:5;
}

.start-avatar-badge{
  position:absolute;
  left:calc(var(--main-x) + min(88px, 10vw));
  top:calc(var(--play-y) + min(58px, 7vh));
  width:min(78px, 10vw);
  height:min(78px, 10vw);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%, -50%);
  border-radius:50%;
  overflow:hidden;
  z-index:7;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,246,178,0.96), rgba(255,205,72,0.78) 46%, rgba(125,59,12,0.96) 100%);
  border:4px solid rgba(255,224,94,0.96);
  box-shadow:
    0 4px 0 rgba(93,42,8,0.86),
    0 10px 16px rgba(20,30,34,0.30),
    0 0 18px rgba(255,218,96,0.34),
    inset 0 0 0 3px rgba(92,39,8,0.62),
    inset 0 2px 0 rgba(255,255,255,0.50);
}

.start-avatar-badge img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:
    brightness(1.08)
    saturate(1.12);
}

.restart-btn{
  left:var(--side-x);
  top:var(--restart-y);
  width:var(--restart-w);
  z-index:6;
}

.start-avatar-btn{
  left:var(--side-x) !important;
  top:var(--settings-y) !important;
  width:var(--icon-w) !important;
  max-width:68px;
  z-index:6;
}

.start-avatar-btn img{
  display:block;
  width:100%;
  height:auto;
  max-width:68px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

.start-settings-btn{
  left:var(--settings-x) !important;
  top:var(--sound-y) !important;
  width:var(--sound-w) !important;
  min-width:150px;
  z-index:6;
}

.start-facebook-btn{
  left:var(--side-x);
  top:var(--facebook-y);
  width:var(--icon-w);
  z-index:6;
}

.start-social-btn{
  left:var(--side-x);
  top:var(--social-y);
  width:var(--icon-w);
  z-index:6;
}

.start-challenge-btn{
  left:var(--side-x);
  top:var(--challenge-y);
  width:var(--icon-w);
  z-index:6;
}

.start-trophies-btn{
  left:var(--side-x);
  top:var(--trophies-y);
  width:var(--icon-w);
  z-index:6;
  animation:startTrophyPulse 2.6s ease-in-out infinite;
}

.start-wave-btn{
  left:var(--side-x);
  top:var(--wave-y);
  width:var(--icon-w);
  z-index:6;
  border-radius:22%;
}

.start-wave-btn img{
  aspect-ratio:1;
  border-radius:22%;
  object-fit:cover;
  border:2px solid rgba(255,214,74,0.92);
  box-shadow:
    0 4px 0 rgba(83,26,3,0.86),
    0 0 16px rgba(255,114,20,0.48),
    inset 0 0 0 2px rgba(91,21,2,0.62);
}

.start-trophies-alert{
  position:absolute;
  right:-2px;
  top:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #fff7c7, #ff3b20 62%, #9d0900);
  border:2px solid rgba(255,246,180,0.95);
  box-shadow:
    0 0 10px rgba(255,57,28,0.8),
    0 2px 0 rgba(87,20,0,0.72);
}

.start-trophies-alert.hidden{
  display:none;
}

.start-level-number{
  position:absolute;
  right:12%;
  top:58%;
  width:29%;
  height:46%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%) rotate(-4deg);
  border-radius:50%;
  background:
    radial-gradient(
      circle at 34% 24%,
      #ff9b82 0%,
      #f24837 34%,
      #bd171c 64%,
      #72060b 100%
    );
  border:3px solid #ffd35a;
  color:#fff4a0;
  font-size:clamp(18px, 4.4vw, 40px);
  font-weight:900;
  line-height:1;
  text-shadow:
    0 2px 0 #5a2506,
    0 0 8px rgba(255,255,120,0.92),
    0 0 14px rgba(255,120,60,0.48);
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,0.34),
    inset 0 -9px 14px rgba(83,0,0,0.30),
    0 3px 0 #541008,
    0 0 12px rgba(255,210,80,0.58);
  pointer-events:none;
}

.start-toast{
  position:absolute;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  z-index:8;
  min-width:180px;
  padding:12px 18px;
  border-radius:999px;
  text-align:center;
  color:#fff7c8;
  font-weight:900;
  opacity:0;
  transform:translate(-50%, 12px);
  background:rgba(14,28,36,0.76);
  border:1px solid rgba(255,238,160,0.32);
  box-shadow:0 12px 24px rgba(14,28,36,0.30);
  pointer-events:none;
}

.start-toast.is-visible{
  animation:startToast 1500ms ease forwards;
}

.start-settings-overlay.hidden{
  display:none;
}

.start-ranking-overlay.hidden{
  display:none;
}

.start-social-overlay.hidden{
  display:none;
}

.start-challenge-overlay.hidden{
  display:none;
}

.start-avatar-overlay.hidden{
  display:none;
}

.start-reset-overlay.hidden{
  display:none;
}

.start-trophies-overlay.hidden{
  display:none;
}

.start-legal-overlay.hidden{
  display:none;
}

.start-social-overlay,
.start-ranking-overlay,
.start-challenge-overlay,
.start-trophies-overlay,
.start-legal-overlay,
.start-avatar-overlay,
.start-reset-overlay,
.start-settings-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(5,12,18,0.58);
  backdrop-filter:blur(4px);
}

.start-social-box,
.start-ranking-box,
.start-challenge-box,
.start-trophies-box,
.start-legal-box,
.start-avatar-box,
.start-reset-box,
.start-settings-box{
  position:relative;
  width:min(360px, 88vw);
  padding:22px 22px 24px;
  border-radius:18px;
  color:#fff2b8;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,224,126,0.30), rgba(255,224,126,0) 38%),
    linear-gradient(180deg, rgba(125,70,22,0.94), rgba(45,23,11,0.96));
  border:2px solid rgba(255,213,92,0.78);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.start-ranking-box{
  width:min(520px, 92vw);
  max-height:82vh;
  overflow:hidden;
}

.start-social-box{
  width:min(470px, 90vw);
}

.start-challenge-box{
  width:min(500px, 90vw);
  padding:24px 24px 26px;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,252,190,0.42), rgba(255,226,116,0.10) 38%, rgba(255,226,116,0) 60%),
    linear-gradient(145deg, rgba(118,70,22,0.96), rgba(36,18,8,0.98) 58%, rgba(12,22,28,0.96));
  border-color:rgba(255,230,130,0.92);
  box-shadow:
    0 22px 44px rgba(0,0,0,0.42),
    0 0 28px rgba(255,198,62,0.20),
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 0 24px rgba(255,184,52,0.12);
}

.start-avatar-box{
  width:min(500px, 90vw);
}

.start-trophies-box{
  width:min(760px, 94vw);
  max-height:86vh;
  overflow:hidden;
  padding:24px 24px 26px;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,252,190,0.42), rgba(255,226,116,0.10) 38%, rgba(255,226,116,0) 60%),
    linear-gradient(145deg, rgba(118,70,22,0.96), rgba(36,18,8,0.98) 58%, rgba(12,22,28,0.96));
  border-color:rgba(255,230,130,0.92);
  box-shadow:
    0 22px 44px rgba(0,0,0,0.42),
    0 0 28px rgba(255,198,62,0.20),
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 0 24px rgba(255,184,52,0.12);
}

.start-legal-box{
  width:min(720px, 94vw);
  max-height:86vh;
  overflow:hidden;
  padding:22px 22px 24px;
}

.start-reset-box{
  width:min(390px, 88vw);
}

.start-social-box h2,
.start-ranking-box h2,
.start-challenge-box h2,
.start-trophies-box h2,
.start-legal-box h2,
.start-avatar-box h2,
.start-reset-box h2,
.start-settings-box h2{
  margin:0 0 18px;
  font-size:28px;
  line-height:1;
  text-align:center;
  text-shadow:
    0 2px 0 #542506,
    0 0 12px rgba(255,222,92,0.46);
}

.start-social-summary{
  margin:-6px 0 16px;
  color:#fff0b8;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-challenge-summary{
  width:max-content;
  margin:-8px auto 18px;
  padding:6px 18px;
  border-radius:999px;
  color:#4b2204;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  background:
    linear-gradient(180deg, #fff4a8, #f7b22d);
  border:1px solid rgba(255,249,190,0.88);
  box-shadow:
    0 4px 0 rgba(108,52,8,0.72),
    0 0 14px rgba(255,218,96,0.28);
  text-shadow:0 1px 0 rgba(255,255,255,0.42);
}

.start-trophies-summary{
  width:max-content;
  max-width:100%;
  margin:-8px auto 18px;
  padding:6px 18px;
  border-radius:999px;
  color:#4b2204;
  font-weight:900;
  text-align:center;
  background:
    linear-gradient(180deg, #fff4a8, #f7b22d);
  border:1px solid rgba(255,249,190,0.88);
  box-shadow:
    0 4px 0 rgba(108,52,8,0.72),
    0 0 14px rgba(255,218,96,0.28);
  text-shadow:0 1px 0 rgba(255,255,255,0.42);
}

.start-avatar-summary{
  margin:-6px 0 16px;
  color:#fff0b8;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-reset-summary{
  margin:-6px 0 18px;
  color:#fff0b8;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-trophies-grid{
  max-height:58vh;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 6px;
}

.start-trophy-card{
  position:relative;
  min-height:156px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  padding:12px 8px 10px;
  border-radius:16px;
  border:2px solid rgba(255,226,132,0.30);
  color:#ffeeb9;
  text-align:center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,246,178,0.16), rgba(255,246,178,0) 46%),
    linear-gradient(180deg, rgba(54,34,22,0.80), rgba(18,14,13,0.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 16px rgba(0,0,0,0.25);
}

.start-trophy-image{
  width:min(92px, 18vw);
  height:min(92px, 18vw);
  display:flex;
  align-items:center;
  justify-content:center;
}

.start-trophy-image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:
    grayscale(0.86)
    brightness(0.42)
    saturate(0.45)
    drop-shadow(0 7px 8px rgba(0,0,0,0.42));
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.start-trophy-card strong{
  font-size:13px;
  line-height:1.05;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-trophy-card span{
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d4c2a0;
  font-size:10px;
  font-weight:900;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,0.72);
}

.start-trophy-lock{
  position:absolute;
  right:8px;
  top:7px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 26%, #fff4b6, #d3952e 58%, #5c2a08);
  border:2px solid rgba(255,237,150,0.92);
  box-shadow:
    0 3px 0 rgba(76,31,5,0.78),
    0 0 12px rgba(255,200,70,0.24);
}

.start-trophy-lock::before{
  content:"";
  position:absolute;
  left:8px;
  top:5px;
  width:10px;
  height:9px;
  border:3px solid #5b2605;
  border-bottom:0;
  border-radius:8px 8px 0 0;
}

.start-trophy-lock::after{
  content:"";
  position:absolute;
  left:9px;
  top:14px;
  width:12px;
  height:9px;
  border-radius:2px;
  background:#5b2605;
}

.start-trophy-card.unlocked{
  border-color:rgba(255,246,170,0.94);
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,212,0.56), rgba(255,224,80,0.18) 45%, rgba(255,224,80,0) 66%),
    linear-gradient(180deg, rgba(175,98,28,0.86), rgba(62,29,10,0.86));
  box-shadow:
    0 0 18px rgba(255,221,88,0.38),
    0 8px 0 rgba(105,48,9,0.72),
    inset 0 1px 0 rgba(255,255,255,0.30);
  animation:startTrophyGlow 2.2s ease-in-out infinite;
}

.start-trophy-card.unlocked .start-trophy-image img{
  filter:
    brightness(1.12)
    saturate(1.18)
    drop-shadow(0 7px 8px rgba(56,22,5,0.34))
    drop-shadow(0 0 16px rgba(255,221,88,0.32));
  transform:scale(1.04);
}

.start-trophy-card.unlocked .start-trophy-lock{
  background:
    radial-gradient(circle at 35% 26%, #ffffff, #9cff83 48%, #247a2e);
  border-color:rgba(223,255,196,0.92);
}

.start-trophy-card.unlocked .start-trophy-lock::before{
  transform:translate(5px, -2px) rotate(28deg);
  transform-origin:left bottom;
  border-color:#185a1e;
}

.start-trophy-card.unlocked .start-trophy-lock::after{
  background:#185a1e;
}

.start-trophy-card.unlocked span{
  color:#fff7b6;
}

.start-reset-actions{
  display:flex;
  justify-content:center;
  gap:12px;
}

.start-reset-confirm,
.start-reset-cancel{
  min-width:118px;
  height:44px;
  border:2px solid rgba(255,245,170,0.88);
  border-radius:999px;
  font-weight:900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 0 rgba(90,38,3,0.82);
}

.start-reset-confirm{
  color:#4b2300;
  background:linear-gradient(180deg, #fff06a, #ff9d1f);
}

.start-reset-cancel{
  color:#fff6cc;
  background:linear-gradient(180deg, #76675b, #34211a);
}

.start-avatar-current{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  margin:-6px auto 14px;
  padding:8px 14px 8px 8px;
  border-radius:999px;
  color:#fff4c4;
  font-weight:900;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,0.34), rgba(255,255,255,0) 48%),
    rgba(28,13,7,0.36);
  border:1px solid rgba(255,226,132,0.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-avatar-current img{
  width:50px;
  height:50px;
  object-fit:contain;
  border-radius:50%;
  background:
    linear-gradient(145deg, rgba(255,206,74,0.62), rgba(86,39,10,0.40));
  border:2px solid rgba(255,240,164,0.78);
  filter:
    brightness(1.08)
    saturate(1.14)
    drop-shadow(0 4px 5px rgba(42,18,5,0.30));
}

.start-avatar-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  max-height:44vh;
  overflow-y:auto;
  padding:2px 4px 2px 0;
}

.start-avatar-option{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:14px;
  border:2px solid rgba(255,226,132,0.40);
  background:
    radial-gradient(circle at 32% 18%, rgba(255,255,255,0.46), rgba(255,239,170,0) 54%),
    linear-gradient(145deg, rgba(255,205,72,0.34), rgba(44,22,8,0.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 10px rgba(28,13,7,0.20);
}

.start-avatar-option img{
  width:96%;
  height:96%;
  object-fit:contain;
  filter:
    brightness(1.08)
    saturate(1.12)
    drop-shadow(0 4px 5px rgba(30,12,4,0.34));
}

.start-avatar-option.selected{
  border-color:rgba(255,248,174,0.95);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,210,0.72), rgba(255,220,72,0.24) 48%, rgba(255,220,72,0) 68%),
    linear-gradient(145deg, rgba(255,190,40,0.82), rgba(112,54,12,0.72));
  box-shadow:
    0 0 18px rgba(255,218,96,0.44),
    0 6px 0 rgba(103,48,12,0.72),
    inset 0 1px 0 rgba(255,255,255,0.32);
}

.start-challenge-list{
  display:grid;
  gap:12px;
}

.start-challenge-card{
  min-height:84px;
  display:grid;
  grid-template-columns:86px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  padding:13px 14px;
  border:1px solid rgba(255,226,132,0.58);
  border-radius:16px;
  color:#fff5c8;
  text-align:left;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,246,178,0.28), rgba(255,246,178,0) 48%),
    linear-gradient(180deg, rgba(148,82,24,0.68), rgba(62,28,10,0.62) 58%, rgba(20,31,36,0.54));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 15px rgba(28,13,7,0.22),
    0 0 14px rgba(255,205,66,0.10);
}

.start-challenge-card span{
  grid-row:1 / span 2;
  width:76px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#3b1b05;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  background:
    radial-gradient(circle at 32% 20%, #fff8c2, #ffd554 46%, #d17914 100%);
  border:2px solid rgba(255,246,178,0.88);
  box-shadow:
    0 4px 0 #7b3908,
    0 0 16px rgba(255,211,76,0.32),
    inset 0 1px 0 rgba(255,255,255,0.44);
}

.start-challenge-card strong{
  font-size:19px;
  line-height:1.05;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-challenge-card small{
  color:#ffe7a2;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  text-shadow:0 1px 0 rgba(52,22,3,0.72);
}

.start-challenge-card:active{
  transform:translateY(2px);
}

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

.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.36);
  border-radius:12px;
  color:#fff2bd;
  font-weight:900;
  text-align:left;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,238,160,0.20), rgba(255,238,160,0) 56%),
    rgba(28,13,7,0.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
}

.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:12px;
  font-weight:900;
  box-shadow:0 3px 0 rgba(38,14,4,0.55);
}

.start-social-link.share span{
  background:#1f9cf0;
}

.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;
}

.start-social-link.copy span{
  background:#9b6bff;
}

.start-ranking-summary{
  margin:-6px 0 14px;
  color:#fff0b8;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-player-name-row{
  display:flex;
  gap:8px;
  margin:0 0 14px;
}

.start-player-name-input{
  min-width:0;
  flex:1;
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:2px solid rgba(255,232,142,0.72);
  color:#3b1d08;
  font-weight:900;
  background:#fff3bd;
  box-shadow:inset 0 2px 5px rgba(72,34,8,0.18);
}

.start-player-name-save,
.start-ranking-ok{
  height:42px;
  border:2px solid rgba(255,245,170,0.88);
  border-radius:999px;
  color:#4b2300;
  font-weight:900;
  background:linear-gradient(180deg, #fff06a, #ffb51e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 0 #8c4700;
}

.start-player-name-save{
  min-width:92px;
}

.start-ranking-ok{
  display:block;
  min-width:112px;
  margin:14px auto 0;
}

.start-ranking-list{
  max-height:42vh;
  overflow-y:auto;
  padding:2px 4px 2px 0;
}

.start-ranking-row{
  min-height:42px;
  display:grid;
  grid-template-columns:34px 1fr 48px 62px 70px;
  align-items:center;
  gap:7px;
  margin:0 0 7px;
  padding:0 9px;
  border-radius:12px;
  color:#ffeec0;
  font-weight:900;
  background:rgba(28,13,7,0.28);
  border:1px solid rgba(255,226,130,0.22);
  text-shadow:0 2px 0 rgba(36,15,4,0.75);
}

.start-ranking-row.player{
  color:#fff8ca;
  background:
    linear-gradient(180deg, rgba(244,169,45,0.95), rgba(126,59,18,0.98));
  border-color:rgba(255,232,142,0.78);
  box-shadow:0 0 14px rgba(255,211,76,0.22);
}

.rank-pos{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#301507;
  background:linear-gradient(180deg, #fff4a2, #f0a51d);
  box-shadow:0 2px 0 #7e3908;
}

.rank-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rank-level,
.rank-moves{
  color:#ffd974;
  font-size:12px;
}

.rank-score{
  text-align:right;
  color:#fff7bc;
  font-size:17px;
}

.start-settings-close{
  position:absolute;
  right:10px;
  top:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  color:#5a2604;
  font-weight:900;
  background:linear-gradient(180deg, #fff19a, #ffb51e);
  box-shadow:0 3px 0 #8c4700;
}

.start-settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:46px;
  font-weight:900;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-settings-row span{
  font-size:18px;
}

.start-settings-row strong{
  font-size:20px;
}

.start-settings-toggle{
  min-width:82px;
  height:40px;
  border:2px solid rgba(255,245,170,0.88);
  border-radius:999px;
  color:#4b2300;
  font-weight:900;
  background:linear-gradient(180deg, #9cff83, #2db447);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    0 4px 0 #184d18;
}

.start-settings-toggle.is-off{
  color:#fff6cc;
  background:linear-gradient(180deg, #9d9d9d, #464646);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 4px 0 #171717;
}

.start-volume-range{
  width:100%;
  height:42px;
  margin:4px 0 14px;
  accent-color:#ffd128;
}

.start-card-back-section{
  margin:0 0 14px;
}

.start-card-back-title{
  display:block;
  margin:0 0 8px;
  color:#fff2bd;
  font-size:16px;
  font-weight:900;
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-card-back-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.start-card-back-option{
  height:76px;
  padding:4px;
  border:2px solid rgba(255,226,132,0.42);
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,238,160,0.22), rgba(255,238,160,0) 58%),
    linear-gradient(180deg, rgba(89,37,12,0.86), rgba(28,12,7,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 0 rgba(73,30,6,0.76);
}

.start-card-back-option img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  pointer-events:none;
}

.start-card-back-option.is-active{
  border-color:rgba(255,250,186,0.96);
  box-shadow:
    0 4px 0 rgba(108,52,8,0.82),
    0 0 0 3px rgba(255,214,62,0.30),
    0 0 18px rgba(255,221,82,0.42);
}

.start-settings-slot{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:rgba(255,245,190,0.74);
  font-weight:900;
  background:rgba(23,11,6,0.26);
  border:1px dashed rgba(255,226,130,0.34);
}

.start-legal-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-top:8px;
}

.start-legal-open,
.start-legal-tab{
  min-height:38px;
  border:1px solid rgba(255,226,132,0.58);
  border-radius:999px;
  color:#fff3bf;
  font-size:12px;
  font-weight:900;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,238,160,0.22), rgba(255,238,160,0) 56%),
    linear-gradient(180deg, rgba(148,82,24,0.68), rgba(62,28,10,0.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 4px 0 rgba(93,42,8,0.58);
  text-shadow:0 2px 0 rgba(52,22,3,0.82);
}

.start-legal-tabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:-4px 0 14px;
}

.start-legal-tab.active{
  color:#4b2204;
  background:
    linear-gradient(180deg, #fff4a8, #f7b22d);
  border-color:rgba(255,249,190,0.88);
  box-shadow:
    0 4px 0 rgba(108,52,8,0.72),
    0 0 14px rgba(255,218,96,0.28);
  text-shadow:0 1px 0 rgba(255,255,255,0.42);
}

.start-legal-frame{
  width:100%;
  height:min(48vh, 430px);
  display:block;
  border:1px solid rgba(255,226,132,0.36);
  border-radius:14px;
  background:rgba(12,20,24,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 16px rgba(0,0,0,0.24);
}

.start-leaving{
  pointer-events:none;
}

.start-leaving .start-curtain-left{
  transform:translateX(-86%) scaleX(0.78);
  filter:
    drop-shadow(12px 0 20px rgba(0,0,0,0.44))
    saturate(1.14)
    brightness(1.05);
}

.start-leaving .start-curtain-right{
  transform:translateX(86%) scaleX(0.78);
  filter:
    drop-shadow(-12px 0 20px rgba(0,0,0,0.44))
    saturate(1.14)
    brightness(1.05);
}

.start-leaving .start-box,
.start-leaving .start-settings-btn{
  animation:startLeave 260ms ease forwards;
}

.start-game-curtain-transition{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
}

.start-game-curtain-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:55%;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:
    drop-shadow(0 0 18px rgba(0,0,0,0.46))
    saturate(1.08);
  transition:
    transform 760ms cubic-bezier(.58, .02, .17, 1),
    filter 760ms ease;
  will-change:transform;
}

.start-game-curtain-left{
  left:-2%;
  transform-origin:left center;
  background-image:url("../assets/img/start/telon/curtain-left.png");
}

.start-game-curtain-right{
  right:-2%;
  transform-origin:right center;
  background-image:url("../assets/img/start/telon/curtain-right.png");
}

.start-game-curtain-transition.is-opening .start-game-curtain-left{
  transform:translateX(-88%) scaleX(0.76);
  filter:
    drop-shadow(14px 0 20px rgba(0,0,0,0.50))
    saturate(1.16)
    brightness(1.05);
}

.start-game-curtain-transition.is-opening .start-game-curtain-right{
  transform:translateX(88%) scaleX(0.76);
  filter:
    drop-shadow(-14px 0 20px rgba(0,0,0,0.50))
    saturate(1.16)
    brightness(1.05);
}

@keyframes startToast{
  0%{
    opacity:0;
    transform:translate(-50%, 12px);
  }

  14%,
  78%{
    opacity:1;
    transform:translate(-50%, 0);
  }

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

.start-curtain,
.start-game-curtain-transition{
  display:none !important;
}

@keyframes startLeave{
  100%{
    opacity:0;
    transform:scale(1.02);
  }
}

@keyframes startTrophyPulse{
  0%,
  100%{
    filter:drop-shadow(0 10px 16px rgba(20,30,34,0.38));
  }

  50%{
    filter:
      drop-shadow(0 10px 16px rgba(20,30,34,0.38))
      drop-shadow(0 0 12px rgba(255,222,82,0.55));
  }
}

@keyframes startTrophyGlow{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-2px);
  }
}

/* Ajuste exclusivo de escritorio: más aire en la columna principal. */
@media (min-width:1024px) and (orientation:landscape){
  .start-screen{
    --ranking-w:min(190px, 29vw);
    --play-y:29vh;
    --ranking-y:52vh;
    --sound-y:71vh;
    --map-y:87vh;
    --wave-y:14vh;
  }

  .start-level-number{
    top:49%;
  }
}

@media (min-width:1500px) and (orientation:landscape){
  .start-avatar-badge{
    left:calc(var(--main-x) - 168px);
    top:calc(var(--play-y) - 200px);
  }
}

@media (orientation:portrait) and (max-width:600px){
  .start-screen{
    --play-w:min(238px, 62vw);
    --ranking-w:min(190px, 50vw);
    --map-w:min(178px, 46vw);
    --restart-w:min(74px, 20vw);
    --icon-w:min(52px, 14vw);
    --sound-w:min(142px, 36vw);
    --main-x:70vw;
    --side-x:22vw;
    --settings-x:70vw;
    --play-y:32vh;
    --ranking-y:49vh;
    --map-y:66vh;
    --trophies-y:21vh;
    --wave-y:12vh;
    --facebook-y:31vh;
    --social-y:43vh;
    --challenge-y:55vh;
    --settings-y:73vh;
    --restart-y:81vh;
    --sound-y:82vh;
  }

  .start-curtain{
    width:58%;
  }

  .start-brand{
    top:calc(22px + env(safe-area-inset-top));
  }

  .start-brand strong{
    font-size:38px;
  }

  .start-play-btn,
  .start-ranking-btn,
  .start-map-btn,
  .start-avatar-badge,
  .restart-btn,
  .start-avatar-btn,
  .start-settings-btn,
  .start-facebook-btn,
  .start-social-btn,
  .start-challenge-btn,
  .start-trophies-btn{
    max-height:120px;
  }

  .start-wave-btn{
    max-height:120px;
  }

  .start-ranking-box{
    width:94vw;
    padding:20px 14px 18px;
  }

  .start-ranking-row{
    grid-template-columns:30px 1fr 42px 54px;
    gap:5px;
    padding:0 7px;
  }

  .rank-score{
    display:none;
  }

  .start-player-name-row{
    gap:6px;
  }

  .start-player-name-save{
    min-width:78px;
    font-size:12px;
  }

  .start-social-grid{
    grid-template-columns:1fr;
  }

  .start-legal-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .start-trophies-box{
    width:94vw;
    max-height:88vh;
    padding:20px 14px 18px;
  }

  .start-trophies-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:62vh;
    gap:10px;
  }

  .start-trophy-card{
    min-height:132px;
  }

  .start-trophy-image{
    width:70px;
    height:70px;
  }

  .start-avatar-badge{
    left:calc(var(--main-x) + min(-98px, 10vw));
    top:calc(var(--play-y) + min(-100px, 7vh));
    width:min(88px, 15vw);
    height:min(88px, 15vw);
  }
}