/* ============================================================
   POCKET BREAK — mobile portrait rhythm game prototype
   ============================================================ */

:root {
  --bg-0: #150e28;
  --bg-1: #1d1435;
  --bg-2: #241a42;
  --teal: #2fd8c3;
  --orange: #ff9f2e;
  --yellow: #ffd23f;
  --pink: #ff4f9a;
  --purple: #a55bff;
  --blue: #4fa9ff;
  --red: #ff5252;
  --cream: #fdf3dc;
  --ink: #0d0820;

  /* active character palette (set from JS) */
  --skin: #c98a5b;
  --hair: #2b1c14;
  --shirt: #f6ecd8;
  --pants: #221d2e;
  --shoe: #2fd8c3;
  --accent: #2fd8c3;

  --intensity: 0; /* 0..1 groove intensity, set from JS */
}

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--bg-0);
  font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--cream);
  user-select: none;
  -webkit-user-select: none;
}

button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; touch-action: manipulation; }

#app {
  position: relative;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background:
    radial-gradient(120% 55% at 50% 30%, rgba(120, 60, 200, 0.22), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(40, 20, 80, 0.5), transparent),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, #120b22);
  overflow: hidden;
}

/* faint speckle texture */
#app::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px),
    radial-gradient(rgba(255,180,80,0.05) 1px, transparent 1.5px);
  background-size: 90px 90px, 130px 130px;
  background-position: 0 0, 40px 60px;
  pointer-events: none;
}

/* ============ HUD ============ */
#hud {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: start;
  gap: 8px;
  z-index: 5;
}
.hud-block { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hud-combo { align-items: flex-start; }
.hud-groove { align-items: flex-end; }

.hud-label {
  font-size: 10px; letter-spacing: 2px; font-weight: 700;
  color: #cbb8e8; opacity: 0.85;
}
.lbl-combo { color: var(--yellow); }
.lbl-groove { color: var(--teal); }

.hud-big {
  font-size: 30px; font-weight: 900; line-height: 1;
  text-shadow: 0 0 14px rgba(255, 210, 63, 0.35), 0 2px 0 rgba(0,0,0,0.4);
  font-variant-numeric: tabular-nums;
}
.hud-score .hud-big { font-size: 24px; margin-top: 3px; color: var(--cream); }
.hud-combo .hud-big { color: var(--cream); }

.hud-word {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  color: var(--pink); min-height: 14px;
  text-shadow: 0 0 8px rgba(255, 79, 154, 0.6);
}

#grooveMeter {
  display: flex; gap: 2px; margin-top: 4px;
  padding: 3px; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 6px;
  background: rgba(0,0,0,0.35);
}
#grooveMeter i {
  width: 9px; height: 12px; border-radius: 2px;
  background: rgba(255,255,255,0.08);
  transition: background 0.15s, box-shadow 0.15s;
}
#grooveMeter i.on:nth-child(-n+3) { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
#grooveMeter i.on:nth-child(n+4):nth-child(-n+6) { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
#grooveMeter i.on:nth-child(n+7):nth-child(-n+8) { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
#grooveMeter i.on:nth-child(n+9) { background: var(--red); box-shadow: 0 0 6px var(--red); }

.hud-mult { font-size: 15px; font-weight: 900; color: var(--teal); margin-top: 2px; }

/* ============ BEAT LINE ============ */
#beatline {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 6px 0;
  height: 14px;
  z-index: 5;
}
#beatline .tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  transition: transform 0.1s, background 0.1s, box-shadow 0.1s;
}
#beatline .tick.bar { width: 10px; height: 10px; background: rgba(255,255,255,0.3); transform: rotate(45deg); border-radius: 2px; }
#beatline .tick.now { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); transform: scale(1.6); }
#beatline .tick.bar.now { background: var(--pink); box-shadow: 0 0 10px var(--pink); transform: rotate(45deg) scale(1.5); }

/* ============ STAGE ============ */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ring {
  position: absolute; border-radius: 50%;
  border: 2px dashed rgba(255, 159, 46, 0.35);
}
.ring.r1 { width: min(78vw, 320px); aspect-ratio: 1; animation: spin 26s linear infinite; }
.ring.r2 { width: min(60vw, 245px); aspect-ratio: 1; border-color: rgba(47, 216, 195, 0.3); border-style: dotted; animation: spin 18s linear infinite reverse; }
.ring.r3 {
  width: min(44vw, 180px); aspect-ratio: 1;
  border: none;
  background: radial-gradient(circle, rgba(255, 130, 40, calc(0.20 + var(--intensity) * 0.25)), rgba(255, 79, 154, 0.08) 60%, transparent 72%);
}
.arcs { position: absolute; width: min(88vw, 360px); aspect-ratio: 1; }
.arcs path { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 20; }
.arcset.a1 path { stroke: rgba(255, 79, 154, 0.4); }
.arcset.a2 path { stroke: rgba(255, 210, 63, 0.35); }
.arcset.a1 { animation: spin 14s linear infinite; transform-origin: 150px 150px; }
.arcset.a2 { animation: spin 9s linear infinite reverse; transform-origin: 150px 150px; }
@keyframes spin { to { transform: rotate(360deg); } }

#stage.beatPulse .ring.r3 { animation: ringPulse 0.28s ease-out; }
@keyframes ringPulse { 0% { transform: scale(0.94); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

#burstLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.confetto { position: absolute; border-radius: 2px; will-change: transform, opacity; }
.notePop { position: absolute; font-size: 20px; will-change: transform, opacity; }

/* ============ DANCER ============ */
#dancerWrap { position: relative; z-index: 3; }
#dancerSvg { width: min(52vw, 215px); display: block; }
#shadow { fill: rgba(0,0,0,0.45); }

.part { transform-box: fill-box; transition: transform 0.13s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
#head  { transform-origin: 50% 90%; }
#torso { transform-origin: 50% 20%; }
#armL  { transform-origin: 90% 10%; }
#armR  { transform-origin: 10% 10%; }
#legL  { transform-origin: 80% 5%; }
#legR  { transform-origin: 20% 5%; }
#dancer { transform-origin: 100px 160px; }

.pants { fill: var(--pants); }
.shoe path { fill: var(--shoe); }
.sole { fill: var(--cream); }
.shirt { fill: var(--shirt); }
.logo { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.logo-swirl { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.sleeve { fill: var(--shirt); }
.hand { fill: var(--skin); }
.face { fill: var(--skin); }
.hair { fill: var(--hair); }
.band { fill: var(--accent); }
.eye { fill: var(--ink); }
.smile { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

/* --- poses: classes applied to #dancer --- */
.pose-stepL #legL { transform: rotate(-30deg) translate(2px, -8px); }
.pose-stepL #legR { transform: rotate(10deg); }
.pose-stepL #torso { transform: rotate(-6deg); }
.pose-stepL #armR { transform: rotate(-35deg); }
.pose-stepL #head { transform: rotate(-8deg); }

.pose-stepR #legR { transform: rotate(30deg) translate(-2px, -8px); }
.pose-stepR #legL { transform: rotate(-10deg); }
.pose-stepR #torso { transform: rotate(6deg); }
.pose-stepR #armL { transform: rotate(35deg); }
.pose-stepR #head { transform: rotate(8deg); }

.pose-slide #legL { transform: rotate(-42deg) translate(4px, -4px); }
.pose-slide #legR { transform: rotate(18deg) translate(0, 2px); }
.pose-slide #torso { transform: rotate(-10deg) translateY(4px); }
.pose-slide #armL { transform: rotate(50deg); }
.pose-slide #armR { transform: rotate(-60deg); }

.pose-punch #armR { transform: rotate(-95deg) translate(-4px, -6px); }
.pose-punch #armL { transform: rotate(30deg); }
.pose-punch #torso { transform: rotate(8deg); }
.pose-punch #head { transform: rotate(6deg) translateY(-2px); }
.pose-punch #legL { transform: rotate(-8deg); }

.pose-pop #armL { transform: rotate(95deg) translate(4px, -6px); }
.pose-pop #armR { transform: rotate(-95deg) translate(-4px, -6px); }
.pose-pop #torso { transform: translateY(-4px) scale(1.04); }
.pose-pop #head { transform: translateY(-3px); }

.pose-point #armR { transform: rotate(-140deg) translate(-8px, -2px); }
.pose-point #armL { transform: rotate(20deg); }
.pose-point #torso { transform: rotate(-5deg); }
.pose-point #head { transform: rotate(-10deg) translateY(-2px); }
.pose-point #legR { transform: rotate(14deg); }

.pose-roll #torso { transform: rotate(-12deg) translateX(-3px); }
.pose-roll #armL { transform: rotate(70deg) translateY(-4px); }
.pose-roll #armR { transform: rotate(40deg); }
.pose-roll #head { transform: rotate(-14deg) translate(-2px, 2px); }

.pose-wave #armL { transform: rotate(120deg) translate(6px, -8px); }
.pose-wave #armR { transform: rotate(-50deg); }
.pose-wave #torso { transform: rotate(6deg); }
.pose-wave #head { transform: rotate(10deg); }
.pose-wave #legL { transform: rotate(-12deg); }

#dancer.pose-freeze { transform: rotate(-8deg) translateY(2px); }
.pose-freeze #legL { transform: rotate(-55deg) translate(6px, -10px); }
.pose-freeze #legR { transform: rotate(12deg); }
.pose-freeze #armL { transform: rotate(150deg) translate(8px, -10px); }
.pose-freeze #armR { transform: rotate(-20deg) translateY(2px); }
.pose-freeze #torso { transform: rotate(-10deg); }
.pose-freeze #head { transform: rotate(-16deg); }
.pose-freeze .part { transition-duration: 0.07s; }

#dancer.pose-sigfreeze { transform: rotate(10deg) translateY(-4px); }
.pose-sigfreeze #legR { transform: rotate(60deg) translate(-8px, -12px); }
.pose-sigfreeze #armR { transform: rotate(-150deg) translate(-8px, -10px); }
.pose-sigfreeze #armL { transform: rotate(60deg); }
.pose-sigfreeze #head { transform: rotate(14deg); }

#dancer.pose-stumble { transform: rotate(4deg) translateY(3px); }
.pose-stumble #torso { transform: rotate(7deg) translateY(3px); }
.pose-stumble #head { transform: rotate(16deg) translateY(3px); }
.pose-stumble #armL { transform: rotate(-15deg); }
.pose-stumble #armR { transform: rotate(15deg); }
.pose-stumble .smile { d: path("M92 78 q9 -5 18 0"); }

#dancer.pose-break { animation: breakSpin 1.5s cubic-bezier(0.3, 0, 0.2, 1); }
.pose-break #legL { transform: rotate(-70deg) translate(8px, -14px); }
.pose-break #legR { transform: rotate(70deg) translate(-8px, -14px); }
.pose-break #armL { transform: rotate(140deg) translate(8px, -10px); }
.pose-break #armR { transform: rotate(-140deg) translate(-8px, -10px); }
@keyframes breakSpin {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-200deg) scale(0.92) translateY(-14px); }
  60% { transform: rotate(-360deg) scale(1.06) translateY(-6px); }
  78% { transform: rotate(-352deg) scale(1.1); }
  100% { transform: rotate(-360deg) scale(1); }
}

/* judgment popup */
#judgePop {
  position: absolute; left: 50%; top: -6px;
  transform: translateX(-50%);
  font-size: 22px; font-weight: 900; letter-spacing: 1.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 16px currentColor;
  z-index: 6;
}
#judgePop.show { animation: judgeUp 0.55s ease-out; }
@keyframes judgeUp {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.7); }
  25% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.12); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.95); }
}
#judgePop.j-perfect { color: var(--yellow); }
#judgePop.j-good { color: var(--teal); }
#judgePop.j-okay { color: #cbb8e8; }
#judgePop.j-miss { color: var(--red); }
#judgePop.j-bonus { color: var(--pink); font-size: 26px; }

#cueBox {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px;
  border: 2px solid var(--pink); border-radius: 20px;
  background: rgba(30, 12, 40, 0.85);
  color: var(--pink); font-weight: 900; font-size: 14px; letter-spacing: 2px;
  animation: cuePulse 0.4s ease-in-out infinite alternate;
  z-index: 6;
}
@keyframes cuePulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 18px rgba(255,79,154,0.6); } }
.hidden { display: none !important; }

#callout {
  position: absolute; bottom: 2px; left: 0; right: 0;
  text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(253, 243, 220, 0.55);
}

#flash {
  position: absolute; inset: -20px; pointer-events: none;
  background: white; opacity: 0; border-radius: 20px;
}
#flash.go { animation: flashOut 0.25s ease-out; }
@keyframes flashOut { 0% { opacity: 0.35; } 100% { opacity: 0; } }

/* ============ BREAK BUTTON ============ */
#breakRow {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 5;
  margin-bottom: 4px;
}
#btnBreak {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #3a2b58, #241a42 70%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 3px 10px rgba(0,0,0,0.5);
  transition: transform 0.1s;
}
#btnBreak .breakGlyph { font-size: 22px; line-height: 1; color: #6a5a8f; transition: color 0.3s, text-shadow 0.3s; }
#btnBreak .breakLbl { font-size: 9px; font-weight: 900; letter-spacing: 2px; color: #8a78ad; }
#btnBreak .chargeRing { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
#btnBreak .chargeRing .track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 5; }
#btnBreak .chargeRing .fill {
  fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
  transition: stroke-dashoffset 0.25s, stroke 0.25s;
}
#btnBreak.ready { animation: breakReady 0.8s ease-in-out infinite alternate; }
#btnBreak.ready .breakGlyph { color: var(--yellow); text-shadow: 0 0 14px var(--yellow); }
#btnBreak.ready .breakLbl { color: var(--cream); }
#btnBreak.ready .chargeRing .fill { stroke: var(--yellow); filter: drop-shadow(0 0 5px var(--yellow)); }
@keyframes breakReady {
  from { transform: scale(1); box-shadow: 0 0 14px rgba(255, 210, 63, 0.5), inset 0 0 12px rgba(255, 160, 40, 0.3); }
  to { transform: scale(1.07); box-shadow: 0 0 26px rgba(255, 120, 150, 0.8), inset 0 0 16px rgba(255, 200, 60, 0.5); }
}
#btnBreak:active { transform: scale(0.93); }
#breakHint { font-size: 10px; letter-spacing: 1px; color: #b8a5d8; font-weight: 600; }
#breakHint b { color: var(--yellow); }

/* ============ CONTROLS ============ */
#controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 5;
  padding: 2px 0 4px;
}

.bigBtn {
  position: relative;
  width: min(34vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.08s;
  box-shadow: 0 5px 18px rgba(0,0,0,0.55), inset 0 -6px 14px rgba(0,0,0,0.25), inset 0 4px 10px rgba(255,255,255,0.25);
}
.bigBtn:active { transform: scale(0.94); }
.bigBtn .icon { width: 34%; height: auto; opacity: 0.85; }
.bigBtn .icon path, .bigBtn .icon ellipse { fill: rgba(13, 8, 32, 0.75); }
.bigBtn span { font-size: 17px; font-weight: 900; letter-spacing: 2px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bigBtn span small { font-size: 9px; letter-spacing: 3px; font-weight: 800; opacity: 0.6; margin-top: 3px; }

#btnFeet {
  background: radial-gradient(circle at 35% 28%, #8ff5e6, var(--teal) 45%, #16907f 100%);
  border: 3px solid rgba(200, 255, 246, 0.5);
}
#btnHits {
  background: radial-gradient(circle at 35% 28%, #ffd88f, var(--orange) 45%, #cf6812 100%);
  border: 3px solid rgba(255, 232, 190, 0.5);
}

#midStack { display: flex; flex-direction: column; gap: 8px; }
.smallBtn {
  width: 72px; height: 44px;
  border-radius: 22px;
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
  color: var(--cream);
  transition: transform 0.08s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 6px rgba(255,255,255,0.2);
}
.smallBtn:active { transform: scale(0.92); }
#btnStyle { background: linear-gradient(160deg, #c78bff, var(--purple) 60%, #6e2fc0); border: 2px solid rgba(220, 180, 255, 0.5); }
#btnFreeze { background: linear-gradient(160deg, #8ec9ff, var(--blue) 60%, #1f63b8); border: 2px solid rgba(180, 215, 255, 0.5); }

/* ripple feedback */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.55;
  animation: rippleOut 0.4s ease-out forwards;
}
@keyframes rippleOut { to { transform: scale(3.2); opacity: 0; } }
button.hit { animation: btnFlash 0.18s ease-out; }
@keyframes btnFlash { 0% { filter: brightness(1.7) saturate(1.4); } 100% { filter: brightness(1); } }

#footer {
  text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  color: rgba(253, 243, 220, 0.35);
  padding-top: 4px;
  z-index: 5;
}

/* ============ START OVERLAY ============ */
#startOverlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background:
    radial-gradient(90% 50% at 50% 35%, rgba(140, 70, 220, 0.3), transparent),
    linear-gradient(180deg, rgba(21, 14, 40, 0.96), rgba(15, 9, 30, 0.98));
  text-align: center;
  padding: 30px;
}
.preTitle { font-size: 11px; letter-spacing: 4px; font-weight: 800; color: var(--teal); }
#startOverlay h1 {
  font-size: 58px; font-weight: 900; line-height: 0.95; letter-spacing: 2px;
  margin-top: 8px;
  color: var(--cream);
  text-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
#startOverlay h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--yellow), var(--orange) 40%, var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 130, 90, 0.45));
}
.tagline { font-size: 14px; color: #cbb8e8; line-height: 1.5; margin-top: 14px; }
#btnStart {
  padding: 18px 44px;
  border-radius: 40px;
  font-size: 19px; font-weight: 900; letter-spacing: 2px;
  color: var(--ink);
  background: linear-gradient(90deg, var(--teal), var(--yellow) 55%, var(--pink));
  box-shadow: 0 0 30px rgba(255, 180, 90, 0.45), 0 6px 16px rgba(0,0,0,0.5);
  animation: startPulse 1.1s ease-in-out infinite alternate;
}
@keyframes startPulse { from { transform: scale(1); } to { transform: scale(1.05); } }
#btnStart:active { transform: scale(0.95); }
.startHint { font-size: 11px; letter-spacing: 2px; color: rgba(253,243,220,0.4); }

/* ============ DEBUG ============ */
#debugToggle {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 6px;
  z-index: 30;
  width: 30px; height: 30px;
  font-size: 15px;
  opacity: 0.25;
}
#debugPanel {
  position: absolute; top: 46px; right: 8px; z-index: 30;
  width: 230px;
  background: rgba(15, 9, 30, 0.95);
  border: 1.5px solid var(--purple);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
}
#debugPanel h3 { font-size: 11px; letter-spacing: 2px; color: var(--purple); margin-bottom: 8px; }
.dbgRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.dbgRow button {
  padding: 5px 9px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid rgba(255,255,255,0.2);
  font-size: 11px; font-weight: 700;
}
.dbgRow button.active { border-color: var(--teal); color: var(--teal); }
.dbgRow input[type=range] { width: 100%; }
.dbgKeys { font-size: 10px; color: #8a78ad; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ring, .arcset, #btnBreak.ready, #btnStart { animation: none !important; }
}

/* short screens */
@media (max-height: 640px) {
  #dancerSvg { width: min(44vw, 175px); }
  .bigBtn { width: min(30vw, 120px); }
  #btnBreak { width: 62px; height: 62px; }
  #startOverlay h1 { font-size: 44px; }
}