@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/RobotoCondensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --condensed-font: 'Roboto Condensed', 'Inter', system-ui, sans-serif;
  --pink: #EC536D;
  --white: #FFFFFF;
  --black: #111111;
  --yellow: #FFD93D;
  --screen-edge-x: clamp(18px, 5vw, 28px);
  --shell-max-width: 100%;
  --panel-max-width: 100%;
  --cta-max-width: 320px;
  --btn-font-size: clamp(20px, 4vw, 28px);
  --btn-radius: 50px;
  --btn-pad-y: 15px;
  --btn-pad-x: 52px;
  --btn-min-height: 52px;
  --splash-top-pad: clamp(20px, 4.5vh, 32px);
  --splash-title-width: clamp(280px, 86vw, 600px);
  --splash-art-height: 60vh;
  --htp-back-size: clamp(40px, 7vw, 52px);
  --htp-heading-size: clamp(58px, 15.5vw, 92px);
  --htp-sub-size: clamp(16px, 4.4vw, 22px);
  --htp-demo-height: clamp(300px, 42vh, 360px);
  --name-shell-width: 540px;
  --name-input-size: clamp(28px, 8vw, 44px);
  --keyboard-width: 100%;
  --keyboard-key-min-height: clamp(44px, 5vh, 68px);
  --keyboard-key-size: clamp(22px, 4vw, 28px);
  --hud-max-width: 100%;
  --hud-label-size: clamp(24px, 3.8vw, 32px);
  --hud-value-size: clamp(56px, 10.5vw, 88px);
  --bar-width-size: clamp(72px, 18vw, 112px);
  --game-side-offset: clamp(18px, 5vw, 34px);
  --feedback-font-size: clamp(42px, 10.5vw, 76px);
  --feedback-small-size: clamp(32px, 7.5vw, 54px);
  --feedback-max-width: 520px;
  --hold-hint-size: clamp(16px, 3vw, 22px);
  --hold-hint-bottom: clamp(136px, 18vh, 180px);
  --feedback-bottom: clamp(32px, 6vh, 56px);
  --result-max-width: 720px;
  --result-title-size: clamp(48px, 11vw, 60px);
  --result-sub-size: 16px;
  --lb-title-size: 20px;
  --lb-row-size: 16px;
}

@media (min-width: 768px) {
  :root {
    --screen-edge-x: clamp(28px, 4vw, 40px);
    --shell-max-width: 980px;
    --panel-max-width: 820px;
    --cta-max-width: 420px;
    --btn-font-size: clamp(24px, 2.8vw, 34px);
    --btn-pad-y: 18px;
    --btn-pad-x: 60px;
    --btn-min-height: 64px;
    --splash-title-width: clamp(520px, 72vw, 860px);
    --splash-art-height: 64vh;
    --htp-back-size: clamp(46px, 5vw, 60px);
    --htp-heading-size: clamp(96px, 11vw, 148px);
    --htp-sub-size: clamp(22px, 3vw, 30px);
    --htp-demo-height: clamp(340px, 40vh, 460px);
    --name-shell-width: 680px;
    --name-input-size: clamp(44px, 6vw, 68px);
    --keyboard-width: 820px;
    --keyboard-key-min-height: clamp(52px, 5vh, 74px);
    --keyboard-key-size: clamp(24px, 2.6vw, 32px);
    --hud-max-width: 920px;
    --hud-label-size: clamp(30px, 3vw, 40px);
    --hud-value-size: clamp(88px, 8vw, 116px);
    --bar-width-size: clamp(104px, 11vw, 136px);
    --game-side-offset: clamp(24px, 4vw, 48px);
    --feedback-font-size: clamp(72px, 8vw, 100px);
    --feedback-small-size: clamp(54px, 5vw, 72px);
    --feedback-max-width: 700px;
    --hold-hint-size: clamp(18px, 2.2vw, 26px);
    --hold-hint-bottom: clamp(160px, 17vh, 220px);
    --feedback-bottom: clamp(40px, 5vh, 72px);
    --result-max-width: 820px;
    --result-title-size: clamp(72px, 8vw, 88px);
    --result-sub-size: 20px;
    --lb-title-size: 24px;
    --lb-row-size: 18px;
  }
}

@media (min-width: 1200px) {
  :root {
    --screen-edge-x: clamp(36px, 4vw, 52px);
    --shell-max-width: 1240px;
    --panel-max-width: 920px;
    --cta-max-width: 400px;
    --splash-title-width: clamp(680px, 56vw, 980px);
    --splash-art-height: 70vh;
    --htp-heading-size: clamp(120px, 9vw, 176px);
    --htp-sub-size: clamp(26px, 2.3vw, 36px);
    --htp-demo-height: clamp(360px, 38vh, 520px);
    --name-shell-width: 720px;
    --name-input-size: clamp(52px, 5vw, 72px);
    --hud-max-width: 1100px;
    --hud-value-size: clamp(96px, 7vw, 122px);
    --bar-width-size: clamp(114px, 9vw, 142px);
    --feedback-font-size: clamp(78px, 6.5vw, 108px);
    --feedback-small-size: clamp(58px, 4.8vw, 74px);
    --result-max-width: 900px;
  }
}

@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1700px) {
  :root {
    --screen-edge-x: 56px;
    --shell-max-width: 980px;
    --panel-max-width: 920px;
    --cta-max-width: 560px;
    --btn-font-size: 42px;
    --btn-radius: 72px;
    --btn-pad-y: 24px;
    --btn-pad-x: 74px;
    --btn-min-height: 92px;
    --splash-top-pad: 140px;
    --splash-title-width: 920px;
    --splash-art-height: 74vh;
    --htp-back-size: 78px;
    --htp-heading-size: 188px;
    --htp-sub-size: 42px;
    --htp-demo-height: 520px;
    --name-shell-width: 820px;
    --name-input-size: 108px;
    --keyboard-width: 920px;
    --keyboard-key-min-height: 96px;
    --keyboard-key-size: 38px;
    --hud-max-width: 980px;
    --hud-label-size: 48px;
    --hud-value-size: 156px;
    --bar-width-size: 170px;
    --game-side-offset: 56px;
    --feedback-font-size: 132px;
    --feedback-small-size: 92px;
    --feedback-max-width: 820px;
    --hold-hint-size: 30px;
    --hold-hint-bottom: 260px;
    --feedback-bottom: 72px;
    --result-max-width: 920px;
    --result-title-size: 124px;
    --result-sub-size: 30px;
    --lb-title-size: 32px;
    --lb-row-size: 26px;
  }
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  font-family: var(--display-font);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;   /* iOS long-press callout */
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  background: #000;
}

body {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 10;
  overflow: hidden;
}

.screen.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────
   Desktop landscape: render as a centered portrait phone frame.
   Inside the frame, sizes use vh-based clamps so content scales
   with the narrow column instead of the wider viewport width.
   (Pattern ported from Memory Match.)
   ───────────────────────────────────────────────────────── */
@media (orientation: landscape) and (min-width: 900px) {
  body {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #000 70%);
  }
  #app-shell {
    width: min(56vh, 100vw);
    height: min(100vh, 178vh);
    aspect-ratio: 9 / 16;
    max-height: 100vh;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.04);
    border-radius: 28px;
  }
  .screen { border-radius: 28px; }

  /* Splash */
  #app-shell #splash { padding-top: clamp(40px, 7.3vh, 200px); }
  #app-shell #splash-title { font-size: clamp(72px, 15vh, 195px); }

  /* How To Play */
  #app-shell .htp-stack    { gap: clamp(16px, 3.5vh, 36px); }
  #app-shell .htp-title    { font-size: clamp(32px, 7vh, 64px); }
  #app-shell .htp-sub      { font-size: clamp(13px, 2.4vh, 22px); }
  #app-shell .htp-caption  { font-size: clamp(13px, 2.4vh, 22px); }
  #app-shell .htp-score    { font-size: clamp(18px, 3.6vh, 28px); }
  #app-shell .htp-bar      { height: clamp(240px, 44vh, 420px); max-width: clamp(110px, 16vh, 180px); }
  #app-shell .brand-logo   { height: clamp(14px, 2.4vh, 26px); bottom: clamp(60px, 12vh, 140px); }

  /* Enter Name */
  #app-shell .name-input   { font-size: clamp(24px, 5vh, 44px); }
  #app-shell .name-tap     { font-size: clamp(11px, 1.7vh, 16px); }

  /* Gameplay */
  #app-shell #gameplay-frame { padding-top: clamp(60px, 15vh, 220px); gap: 0; }
  #app-shell #bar-area     { margin-top: clamp(-90px, -7.5vh, -45px); }
  #app-shell .hud-label    { font-size: clamp(11px, 1.9vh, 18px); }
  #app-shell .hud-value    { font-size: clamp(22px, 4.8vh, 42px); }
  #app-shell #gp-caption   { font-size: clamp(11px, 1.9vh, 18px); }
  #app-shell #game-bar-svg { height: clamp(240px, 52vh, 480px); max-width: clamp(50px, 8vh, 80px); }
  #app-shell #game-score-popup { font-size: clamp(20px, 4vh, 36px); }
  #app-shell #hold-hint    { font-size: clamp(10px, 1.6vh, 14px); }

  /* Outro */
  #app-shell .outro-title  { font-size: clamp(40px, 9vh, 80px); }

  /* Result */
  #app-shell #result-title { font-size: clamp(28px, 6vh, 60px); }
  #app-shell #result-sub   { font-size: clamp(11px, 1.9vh, 18px); }
  #app-shell .lb-card-title{ font-size: clamp(16px, 2.8vh, 24px); }
  #app-shell .lb-row       { font-size: clamp(12px, 2vh, 18px); }
  #app-shell #result-btn   { font-size: clamp(15px, 3vh, 24px); }
}

/* ── Mobile: consistent logo position + scale across all screens ── */
/* #app-shell prefix beats the per-screen .brand-logo rules that are
   loaded after base.css in index.html. */
@media (max-width: 600px) {
  #app-shell .brand-logo {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: center;
    margin: auto auto clamp(8px, 1.5vh, 16px);
    height: clamp(16px, 2.4vh, 22px);
  }
  #app-shell #howtoplay:not(.hidden) .brand-logo {
    animation-name: htpIn;
  }
  #app-shell #gameplay-frame {
    padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 20px);
    min-height: 100dvh;
  }
}

/* On real desktops (mouse + landscape), hide the virtual keyboard so
   the user types with their physical keyboard. */
@media (hover: hover) and (pointer: fine) and (orientation: landscape) and (min-width: 900px) {
  .name-keyboard { display: none !important; }
  .name-input-wrap {
    bottom: auto !important;
    top: 30% !important;
    transform: translate(-50%, -50%) !important;
  }
  .name-tap {
    top: auto !important;
    bottom: 18% !important;
  }
}