@font-face{
  font-family:'Acumin Tutorial';
  src:url('../assets/fonts/acumin-pro-condensed-bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

*{
  margin:0;padding:0;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
html,body{width:100%;height:100%;background:#000;overflow:hidden;touch-action:manipulation}
body{display:flex;align-items:center;justify-content:center}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

#app{
  position:relative;overflow:hidden;background:#0a0a0a;
  font-family:'Barlow Condensed',sans-serif;
  width:min(100vw,calc(100vh * .5625));
  height:100vh;
  max-width:1080px;max-height:1920px;
  contain:strict;
  container-type:size;
}

canvas,img,button{
  -webkit-user-drag:none;
}

.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.screen.active{opacity:1;pointer-events:all}

.btn{
  background:#fff;color:#000;border:none;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(18px,3.8cqi,42px);text-transform:uppercase;letter-spacing:2px;
  padding:clamp(13px,2.8vh,32px) 0;border-radius:6px;
  width:clamp(240px,70%,660px);transition:transform .1s;position:relative;z-index:3;
}
.btn:active{transform:scale(.97)}
.btn.outline{background:transparent;border:3px solid #fff;color:#fff}
.btn-yellow{background:#F4C430;color:#000}

.skip-btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(13px,2.8cqi,30px);color:rgba(255,255,255,.45);
  letter-spacing:2px;text-transform:uppercase;background:none;
  border:none;cursor:pointer;margin-top:clamp(2px,0.8vh,14px);
}

/* ── Splash ── */
#splash{
  background:#000;
  justify-content:flex-start;align-items:stretch;
  padding:clamp(40px,7vh,110px) clamp(22px,6cqi,56px) clamp(40px,7vh,110px);
  cursor:pointer;
}
.splash-canvas{position:absolute;inset:0;z-index:1}
.splash-title{
  position:relative;z-index:2;
  align-self:center;
  display:block;
  width:min(86%,720px);
  height:auto;
  margin:clamp(20px,4vh,60px) auto 0;
  transform-origin:center;
  animation:splash-title-float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes splash-title-float{
  0%   { transform:translateY(0)     scale(1);     }
  50%  { transform:translateY(-10px) scale(1.015); }
  100% { transform:translateY(0)     scale(1);     }
}
.splash-hint{
  position:absolute;left:0;right:0;
  bottom:clamp(60px,11cqh,211px);z-index:2;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(14px,2.6cqi,28px);
  letter-spacing:.2px;
  color:#717877;
  text-align:center;
}

/* ── Tutorial / How To Play ── */
#tutorial{
  background:#fff;
  padding:clamp(80px,15.4cqh,296px) clamp(22px,6cqi,56px) clamp(170px,17.2cqh,331px);
  justify-content:flex-start;align-items:center;cursor:pointer;
}
.htp-header{
  width:100%;text-align:center;flex-shrink:0;
  margin-bottom:clamp(6px,1vh,14px);
}
.htp-title{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:clamp(40px,10.67cqi,115.2px);
  letter-spacing:-.03em;line-height:1;color:#111;
}
.htp-sub{
  margin-top:clamp(4px,.8vh,12px);
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(14px,3.73cqi,40.32px);
  letter-spacing:-.005em;color:#111;
}
.htp-canvas-wrap{
  width:100%;display:flex;align-items:center;justify-content:center;
  min-height:clamp(260px,41cqh,787px);
  margin:clamp(28px,5vh,90px) 0 0;
  flex-shrink:0;
}
#tut-canvas{display:block}

.htp-hint{
  margin-top:1rem;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(14px,3.73cqi,40.32px);
  color:#878F8E;text-align:center;
  white-space:nowrap;
  transition:opacity .25s ease;
  flex-shrink:0;
}
@container (max-height: 1000px){
  #tutorial{
    padding-bottom:clamp(120px,12cqh,200px);
  }
}
.htp-hint.fade{opacity:0}
.htp-brand{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(60px,11cqh,211px);
  width:clamp(120px,21.1cqi,227.81px);
  aspect-ratio:227.81 / 40.32;height:auto;
}

/* ── Name Screen (Memory Match style) ── */
#namescreen{
  background:#111;
  justify-content:flex-start;
  padding:0;
  cursor:pointer;
}
.name-input-wrap{
  position:absolute;top:26%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  width:min(80%,700px);pointer-events:none;
}
.name-input{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(28px,7cqi,64px);
  letter-spacing:.04em;line-height:1.25;
  color:#fff;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.has-cursor::after{
  content:'';display:inline-block;
  width:.06em;height:.85em;margin-left:.05em;
  background:#EEFF41;vertical-align:middle;
  animation:nameCaret 1s steps(1) infinite;
}
@keyframes nameCaret{50%{opacity:0}}
.name-underline{
  margin-top:clamp(8px,1.4cqi,14px);
  width:100%;max-width:min(80%,640px);
  height:4px;background:#EEFF41;border-radius:2px;
}
.name-keyboard{
  position:absolute;top:46%;left:50%;
  transform:translate(-50%,-50%);
  width:min(94%,720px);
  display:flex;flex-direction:column;
  gap:clamp(6px,1.2cqi,12px);
}
.kb-row{display:flex;gap:clamp(4px,1cqi,10px);justify-content:center}
.kb-row-mid{padding:0 clamp(12px,3cqi,28px)}
.kb-key{
  flex:1 1 0;min-width:0;
  height:clamp(38px,8cqi,64px);
  border:none;border-radius:clamp(8px,1.4cqi,12px);
  background:#fff;color:#111;
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:clamp(14px,3.4cqi,22px);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  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:clamp(16px,3.6cqi,22px)}
.kb-space{flex:4 1 0}
.kb-return{flex:1.4 1 0}
.kb-dash{flex:.7 1 0}
.kb-dot{flex:.7 1 0}
.kb-row-bot{padding:0}
.name-keyboard.shift-on .kb-key[data-k]{text-transform:uppercase}
.name-tap{
  position:absolute;left:50%;bottom:clamp(120px,21.9cqh,420px);
  transform:translateX(-50%);
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:clamp(14px,3cqi,22px);
  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}}
#namescreen.active .name-input-wrap{
  animation:nameTitleIn .55s cubic-bezier(.2,.8,.2,1) both;
}
#namescreen.active .name-underline{
  animation:nameUnderlineIn .5s .35s cubic-bezier(.4,0,.2,1) both;
  transform-origin:50% 50%;
}
#namescreen.active .kb-row{
  animation:nameRowIn .5s cubic-bezier(.2,.8,.2,1) both;
}
#namescreen.active .kb-row:nth-child(1){animation-delay:.30s}
#namescreen.active .kb-row:nth-child(2){animation-delay:.40s}
#namescreen.active .kb-row:nth-child(3){animation-delay:.50s}
#namescreen.active .kb-row:nth-child(4){animation-delay:.60s}
#namescreen.active .kb-key{animation:nameKeyIn .4s cubic-bezier(.2,.8,.2,1) both}
@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}
}
@media (hover:hover) and (pointer:fine) and (orientation:landscape){
  .name-keyboard{display:none}
  .name-input-wrap{top:42%}
  .name-tap{bottom:18%}
}

/* ── Game ── */
#game{background:#000;justify-content:flex-start;padding:clamp(110px,19.6cqh,377px) 7% clamp(80px,11vh,200px)}
.game-hud{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;flex-shrink:0;
  margin-bottom:clamp(14px,2.5vh,42px);
}
.hud-text{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:clamp(22px,5.33cqi,57.6px);
  letter-spacing:-.03em;color:#fff;line-height:1;
  text-transform:uppercase;
}
#game-canvas-wrap{
  width:100%;display:flex;align-items:center;justify-content:center;
  min-height:clamp(280px,47.5cqh,911px);
}
#game-canvas{display:block}
.game-brand{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(60px,11cqh,211px);
  width:clamp(120px,21.1cqi,227.81px);
  aspect-ratio:227.81 / 40.32;height:auto;
  pointer-events:none;
}
#game .game-hud{
  transition:opacity .42s ease, transform .62s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
#game.intro-active .game-hud{opacity:0;transform:translateY(-18px)}
#game.intro-active .game-brand{opacity:0;transition:opacity .35s ease}

/* ── 3-2-1-Go countdown ── */
.countdown-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:8;pointer-events:none;
  background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .25s ease;
}
.countdown-overlay.active{opacity:1}
.countdown-num{
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(140px,32cqi,360px);
  color:#fff;line-height:1;letter-spacing:-.04em;
  transform:scale(.6);opacity:0;
}
.countdown-num.tick{
  animation:countdownPop .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes countdownPop{
  0%   { transform:scale(.5);  opacity:0;   }
  20%  { transform:scale(1.06); opacity:1;   }
  60%  { transform:scale(1);    opacity:1;   }
  100% { transform:scale(.92);  opacity:0;   }
}
.level-transition{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .26s ease;z-index:4;
}
.level-transition.active{opacity:1}
.level-transition-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), rgba(255,255,255,0) 32%),
    linear-gradient(180deg, rgba(10,10,10,.22), rgba(10,10,10,.70) 45%, rgba(10,10,10,.86));
}
.level-transition-copy{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vh,16px);
  text-align:center;padding:0 10%;
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.level-transition.active .level-transition-copy{
  transform:translateY(0) scale(1);opacity:1;
}
.level-transition-kicker{
  font-size:clamp(12px,2.2cqi,24px);font-family:'Barlow',sans-serif;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.level-transition-title{
  font-family:'Acumin Tutorial','Barlow Condensed',sans-serif;
  font-size:clamp(52px,14cqi,180px);font-weight:900;line-height:.9;letter-spacing:-2px;
  text-transform:uppercase;color:#fff;text-shadow:0 10px 24px rgba(0,0,0,.28);
}

/* ── Wrong-tap feedback ── */
@keyframes orb-shake {
  0%,100% { transform: translateX(0) rotate(0deg) }
  14%     { transform: translateX(-11px) rotate(-1.6deg) }
  28%     { transform: translateX(11px)  rotate(1.6deg)  }
  42%     { transform: translateX(-8px)  rotate(-1deg)   }
  57%     { transform: translateX(8px)   rotate(1deg)    }
  71%     { transform: translateX(-5px)  rotate(-.5deg)  }
  85%     { transform: translateX(4px)                   }
}
#game-canvas-wrap.shake {
  animation: orb-shake .46s cubic-bezier(.36,.07,.19,.97) both;
}
.wrong-banner {
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:none;z-index:6;
  gap:clamp(4px,1vh,12px);
  opacity:0;
  transition:opacity .16s ease;
  padding:0 clamp(18px,5cqi,56px);
  text-align:center;
}
.wrong-banner::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(230,57,70,.16) 0%, transparent 72%);
}
.wrong-banner.active { opacity:1 }
.wrong-banner-title {
  font-family:'Acumin Tutorial','Barlow Condensed',sans-serif;
  font-size:clamp(68px,17cqi,200px);font-weight:900;
  color:#E63946;text-transform:uppercase;
  line-height:.88;letter-spacing:-2px;position:relative;
  text-shadow:0 0 55px rgba(230,57,70,.75), 0 4px 18px rgba(0,0,0,.55);
  max-width:100%;
}
.wrong-banner-sub {
  font-size:clamp(16px,4cqi,46px);font-weight:700;
  color:rgba(255,255,255,.68);text-transform:uppercase;
  letter-spacing:5px;position:relative;
  max-width:100%;
}

/* ── Result ── */
#result{
  background:#000;
  justify-content:center;align-items:center;
  padding:clamp(20px,4vh,72px) clamp(20px,5cqi,56px);
  cursor:pointer;
}
.result-card{
  width:min(86%,640px);
  background:#fff;color:#111;
  border-radius:6px;
  padding:clamp(24px,4.4vh,56px) clamp(20px,4.4cqi,42px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.6vh,18px);
  animation:resultIn .5s cubic-bezier(.2,1.1,.3,1) both;
}
.result-card.is-win{background:#EEFF41}
.result-title{
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(38px,8.6cqi,72px);
  letter-spacing:-.03em;line-height:1;color:#111;
}
.result-sub{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:clamp(15px,3.4cqi,26px);
  letter-spacing:-.005em;color:#111;line-height:1.2;
  margin-bottom:clamp(8px,1.4vh,16px);
}
.result-rows{
  width:100%;display:flex;flex-direction:column;
  gap:clamp(8px,1.4vh,16px);
}
.result-row{
  display:flex;align-items:center;
  border:2px solid #111;border-radius:4px;
  padding:clamp(10px,1.8vh,18px) clamp(14px,3cqi,22px);
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(15px,3.6cqi,26px);
  color:#111;letter-spacing:-.005em;
  gap:clamp(12px,3cqi,28px);
}
.result-row .rr-rank{flex:0 0 auto;min-width:1.5em}
.result-row .rr-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-row .rr-score{flex:0 0 auto;text-align:right}
.result-row.is-you{background:#111;color:#fff;border-color:#111}
.result-tap{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(60px,9vh,160px);
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(15px,3.4cqi,26px);
  color:#878F8E;text-align:center;white-space:nowrap;
  letter-spacing:.005em;
  animation:nameTapPulse 2.4s ease-in-out infinite;
}
@keyframes resultIn{
  from{transform:scale(.85) translateY(12px);opacity:0}
  to  {transform:scale(1)    translateY(0);  opacity:1}
}

/* ── Leaderboard ── */
#leaderboard{background:#0a0a0a;padding:clamp(26px,4.5vh,80px) 6%;gap:clamp(8px,1.6vh,22px);justify-content:flex-start}
#leaderboard h2{font-family:'Acumin Tutorial','Barlow Condensed',sans-serif;font-size:clamp(42px,11cqi,120px);font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:-1px;width:100%;margin-bottom:clamp(6px,1.2vh,18px)}
.lb-row{display:flex;align-items:center;gap:clamp(12px,2.8cqi,32px);width:100%;padding:clamp(8px,1.4vh,18px) 0;border-bottom:.5px solid rgba(255,255,255,.1)}
.lb-rank{width:clamp(32px,7cqi,70px);height:clamp(32px,7cqi,70px);border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,3.4cqi,38px);font-weight:900;flex-shrink:0}
.lb-name{flex:1;font-size:clamp(18px,4.4cqi,52px);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px}
.lb-pts{font-size:clamp(22px,5.2cqi,62px);font-weight:900;color:#fff}
.lb-new{color:#F4C430}

/* Desktop browser: tone down oversized kiosk typography/layout */
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
  #app{
    width:min(100vw,calc(100vh * .5625),720px);
    height:min(100vh,calc(100vw * 16/9),1280px);
    max-width:720px;max-height:1280px;
  }

  #tutorial h2{
    margin-bottom:18px;
  }

  .tut-info{
    gap:8px;
  }

  .tut-step-title{
    font-size:clamp(18px,3.1cqi,38px);
  }

  .tut-step-desc{
    font-size:clamp(12px,1.9cqi,22px);
    max-width:420px;
    line-height:1.15;
  }

  .tut-canvas-wrap{
    min-height:280px;
    padding:16px 0 12px;
  }

  .tut-btn-row .btn{
    width:min(78%,520px);
    font-size:clamp(20px,3cqi,36px);
    padding:14px 0;
  }

  #namescreen{
    padding:88px 56px 58px;
    justify-content:center;
  }

  .name-panel{
    width:min(100%,520px);
  }

  #nameInput{
    font-size:clamp(24px,4cqi,46px);
  }

  .name-hint{
    font-size:clamp(12px,1.6cqi,18px);
  }

  #namescreen #startBtn{
    margin-top:34px;
    width:min(100%,420px);
    align-self:center;
    font-size:clamp(24px,3cqi,34px);
  }

  #namescreen .skip-btn{
    font-size:clamp(16px,2cqi,22px);
  }

  .wrong-banner-title{
    font-size:clamp(52px,8cqi,108px);
    line-height:.92;
  }

  .wrong-banner-sub{
    font-size:clamp(14px,2.2cqi,24px);
    letter-spacing:3px;
  }

  #result{
    gap:18px;
    padding:40px 42px 56px;
  }

  #result-circle{
    width:clamp(180px,28cqi,300px);
    height:clamp(180px,28cqi,300px);
  }

  #result-title{
    font-size:clamp(22px,3.2cqi,40px);
  }

  #result-score{
    font-size:clamp(54px,8cqi,112px);
  }

  .result-sub{
    font-size:clamp(12px,1.8cqi,18px);
    line-height:1.45;
  }

  #result .btn{
    width:min(100%,420px);
  }

  #leaderboard{
    padding:34px 42px 48px;
    gap:12px;
  }

  #leaderboard h2{
    font-size:clamp(36px,6cqi,72px);
    margin-bottom:8px;
  }

  .lb-row{
    gap:18px;
    padding:12px 0;
  }

  .lb-rank{
    width:clamp(34px,5cqi,52px);
    height:clamp(34px,5cqi,52px);
    font-size:clamp(14px,2cqi,22px);
  }

  .lb-name{
    font-size:clamp(18px,2.8cqi,28px);
  }

  .lb-pts{
    font-size:clamp(22px,3.2cqi,34px);
  }

  #leaderboard .btn{
    width:min(100%,420px);
    align-self:center;
  }
}