/* NAME ENTRY SCREEN — cloned from Swipe Catch, scaled for 1080×1920 canvas */
#sName{
  --yellow:#EEFF41;
  --white:#FFFFFF;
  --black:#111111;
  background:var(--black);
  justify-content:flex-start;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}

/* ── Title / input ── */
.name-input-wrap{
  position:absolute;
  top:26%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  width:880px;
  pointer-events:none;
}

.name-input{
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-weight:600;
  font-size:96px;
  letter-spacing:.04em;
  line-height:1.25;
  color:#FFFFFF;
  text-align:center;
  min-height:1.25em;
  white-space:nowrap;
  max-width:100%;
  padding:.06em .04em;
}

.name-input:empty::before{
  content:attr(data-placeholder);
  color:#A3AEAE;
  letter-spacing:-.03em;
}

.name-input.shake{
  animation:nameShake .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes nameShake{
  10%,90%{transform:translateX(-4px);}
  20%,80%{transform:translateX(8px);}
  30%,50%,70%{transform:translateX(-14px);}
  40%,60%{transform:translateX(14px);}
}

.name-input.has-cursor::after{
  content:'';
  display:inline-block;
  width:.06em;
  height:.85em;
  margin-left:.05em;
  background:var(--yellow);
  vertical-align:middle;
  animation:nameCaret 1s steps(1) infinite;
}

@keyframes nameCaret{50%{opacity:0;}}

.name-underline{
  margin-top:18px;
  width:760px;
  max-width:100%;
  height:6px;
  background:var(--yellow);
  border-radius:3px;
}

/* Native text input — hidden on desktop, used on touch devices */
.name-native{
  position:absolute;
  left:-19998px;
  top:-19998px;
  width:2px;
  height:2px;
  opacity:0;
  border:0;
  padding:0;
  pointer-events:none;
}

@media (pointer: coarse){
  .name-keyboard{ display:none !important; }
  .name-native{
    left:50%;
    top:0;
    width:760px;
    height:1.4em;
    transform:translateX(-50%);
    opacity:0;
    pointer-events:auto;
    color:transparent;
    background:transparent;
    caret-color:transparent;
    font-size:96px;
    text-align:center;
    z-index:3;
  }
}

/* ── Keyboard ── */
.name-keyboard{
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%,-50%);
  width:920px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.kb-row{
  display:flex;
  gap:12px;
  justify-content:center;
}

.kb-row-mid{padding:0 36px;}

.kb-key{
  flex:1 1 0;
  min-width:0;
  height:108px;
  border:none;
  border-radius:18px;
  background:var(--white);
  color:var(--black);
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  font-size:38px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:transform .08s ease, background .12s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.kb-key:active{
  transform:scale(.94);
  background:#f0f0f0;
}

.kb-mod{font-size:42px;}
.kb-space{flex:4 1 0;font-size:32px;}
.kb-return{flex:1.4 1 0;font-size:32px;}
.kb-dash{flex:.7 1 0;}
.kb-dot{flex:.7 1 0;}
.kb-row-bot{padding:0;}

/* Shift state — uppercase letter caps */
.name-keyboard.shift-on .kb-key[data-k]{
  text-transform:uppercase;
}

/* ── Tap to play ── */
.name-tap{
  position:absolute;
  left:50%;
  bottom:11%;
  transform:translateX(-50%);
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-weight:700;
  font-size:34px;
  letter-spacing:.01em;
  color:#878F8E;
  white-space:nowrap;
  animation:nameTapPulse 2.4s ease-in-out infinite;
  will-change:opacity;
}

@keyframes nameTapPulse{
  0%,100%{opacity:.6;}
  50%{opacity:1;}
}

/* ── Intro animations — fire when screen is .on ── */
#sName.on .name-input-wrap{
  animation:nameTitleIn .55s cubic-bezier(.2,.8,.2,1) both;
}

#sName.on .name-underline{
  animation:nameUnderlineIn .5s .35s cubic-bezier(.4,0,.2,1) both;
  transform-origin:50% 50%;
}

#sName.on .kb-row{
  animation:nameRowIn .5s cubic-bezier(.2,.8,.2,1) both;
}
#sName.on .kb-row:nth-child(1){animation-delay:.30s;}
#sName.on .kb-row:nth-child(2){animation-delay:.40s;}
#sName.on .kb-row:nth-child(3){animation-delay:.50s;}
#sName.on .kb-row:nth-child(4){animation-delay:.60s;}

#sName.on .kb-key{
  animation:nameKeyIn .4s cubic-bezier(.2,.8,.2,1) both;
}

#sName.on .kb-row:nth-child(1) .kb-key:nth-child(1){animation-delay:.30s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(2){animation-delay:.32s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(3){animation-delay:.34s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(4){animation-delay:.36s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(5){animation-delay:.38s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(6){animation-delay:.40s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(7){animation-delay:.42s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(8){animation-delay:.44s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(9){animation-delay:.46s;}
#sName.on .kb-row:nth-child(1) .kb-key:nth-child(10){animation-delay:.48s;}

#sName.on .kb-row:nth-child(2) .kb-key:nth-child(1){animation-delay:.42s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(2){animation-delay:.44s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(3){animation-delay:.46s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(4){animation-delay:.48s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(5){animation-delay:.50s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(6){animation-delay:.52s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(7){animation-delay:.54s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(8){animation-delay:.56s;}
#sName.on .kb-row:nth-child(2) .kb-key:nth-child(9){animation-delay:.58s;}

#sName.on .kb-row:nth-child(3) .kb-key:nth-child(1){animation-delay:.54s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(2){animation-delay:.56s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(3){animation-delay:.58s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(4){animation-delay:.60s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(5){animation-delay:.62s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(6){animation-delay:.64s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(7){animation-delay:.66s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(8){animation-delay:.68s;}
#sName.on .kb-row:nth-child(3) .kb-key:nth-child(9){animation-delay:.70s;}

#sName.on .kb-row:nth-child(4) .kb-key:nth-child(1){animation-delay:.68s;}
#sName.on .kb-row:nth-child(4) .kb-key:nth-child(2){animation-delay:.72s;}
#sName.on .kb-row:nth-child(4) .kb-key:nth-child(3){animation-delay:.76s;}
#sName.on .kb-row:nth-child(4) .kb-key:nth-child(4){animation-delay:.80s;}

#sName.on .name-tap{
  animation:nameTapIn .5s .95s cubic-bezier(.4,0,.2,1) both,
            nameTapPulse 2.4s 1.45s ease-in-out infinite;
}

@keyframes nameTitleIn{
  from{transform:translate(-50%,calc(-50% - 24px));opacity:0;}
  to  {transform:translate(-50%,-50%);opacity:1;}
}

@keyframes nameUnderlineIn{
  from{transform:scaleX(0);opacity:0;}
  to  {transform:scaleX(1);opacity:1;}
}

@keyframes nameRowIn{
  from{transform:translateY(14px);opacity:0;}
  to  {transform:translateY(0);opacity:1;}
}

@keyframes nameKeyIn{
  from{transform:translateY(10px) scale(.92);opacity:0;}
  to  {transform:translateY(0) scale(1);opacity:1;}
}

@keyframes nameTapIn{
  from{transform:translateX(-50%) translateY(8px);opacity:0;}
  to  {transform:translateX(-50%) translateY(0);opacity:.8;}
}

@media (prefers-reduced-motion: reduce){
  #sName.on .name-input-wrap,
  #sName.on .name-underline,
  #sName.on .kb-row,
  #sName.on .kb-key,
  #sName.on .name-tap{
    animation:none;
  }
}