/* ========================== Socks! — styles ========================== */

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

html, body {
  margin: 0;
  height: 100%;
  /* dvh tracks the *visible* viewport. Plain 100% is the layout viewport, which
     on a phone includes the strip hidden behind the address bar and the bottom
     toolbar — so the floor, the basket and the last stretch of the play area
     were all sitting off-screen, and socks fell into that gap unseen. */
  height: 100dvh;
  overflow: hidden;
  font-family: "Baloo 2", system-ui, "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #eaf4ff 0%, #d6ecff 40%, #a9d3f5 100%);
  transition: background 0.4s ease;
}

/* ----------------------------- HUD ---------------------------------- */

#hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.4vw, 22px);
  padding: calc(clamp(8px, 2vw, 16px) + env(safe-area-inset-top, 0px))
           calc(clamp(8px, 2vw, 16px) + env(safe-area-inset-right, 0px))
           clamp(8px, 2vw, 16px)
           calc(clamp(8px, 2vw, 16px) + env(safe-area-inset-left, 0px));
  /* Still allowed to wrap — the labels are nowrap and genuinely don't fit on one
     row on a small phone, and forcing it would push the palette button off the
     edge. The narrow-screen rule at the bottom of this file shrinks them enough
     to usually avoid it, and the game re-measures the play area either way. */
  flex-wrap: wrap;
}

.hud-item { flex: 0 1 auto; min-width: 0; text-align: center; }

#timer-num {
  font-size: clamp(30px, 7vw, 56px);
  font-weight: 800;
  line-height: 1;
  color: #2f8fe0;
  text-shadow: 0 3px 0 #fff, 0 5px 8px rgba(0, 0, 0, 0.15);
  min-width: 1.4em;
}

#timer-num.low {
  color: #e10046;
  animation: pulse 0.6s ease-in-out infinite;
}

@keyframes pulse { 50% { transform: scale(1.18); } }

.stat { min-width: clamp(96px, 22vw, 150px); }

.stat-label {
  font-size: clamp(13px, 3vw, 18px);
  font-weight: 700;
  color: #3a5a78;
  white-space: nowrap;
}

.stat-label b { color: #1e6fbf; }

.stat #drop-num.warn { color: #e0851f; }
.stat #drop-num.danger { color: #e10046; animation: pulse 0.6s ease-in-out infinite; }

#pairs-num.bump { display: inline-block; animation: bump 0.3s ease; }

@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); color: #1aa84b; }
  100% { transform: scale(1); }
}

.mini-bar {
  margin: 5px auto 0;
  width: clamp(70px, 18vw, 130px);
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mini-bar > div {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  border-radius: 99px;
  transition: transform 0.15s linear;
}

#timer-fill { background: linear-gradient(90deg, #7be06a, #ffd23f 60%, #ff5d5d); }
.fill-green { background: linear-gradient(90deg, #9be86f, #35c65a); }
.fill-red   { background: linear-gradient(90deg, #ffd23f, #ff8c2c 55%, #ff3b3b); }

#customize-btn {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #9fd0ff;
  border-radius: 50%;
  width: clamp(42px, 11vw, 56px);
  height: clamp(42px, 11vw, 56px);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(60, 140, 220, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

#customize-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(60, 140, 220, 0.3);
}

/* --------------------------- Playfield ------------------------------ */

#playfield {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Thin ground line at the bottom of the play area. */
#floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, #cfe6ff 0 14px, #b9d9f7 14px 28px);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

/* While the color picker is open, socks hold still and can't be tapped. */
#playfield.frozen .sock {
  animation-play-state: paused;
  pointer-events: none;
}

/* --------------------------- The sock ------------------------------- */

/* Shared silhouette + look for every sock: a leg with a foot pointing right,
   a ribbed cuff at the top, a soft pattern, and a little gloss highlight. */
.sock, .tray-sock, .sock-flier {
  --c: #ff4d63;
  --c2: #c9223a;
  position: relative;
  display: block;
  aspect-ratio: 5 / 6;
  background: var(--c);
  clip-path: polygon(34% 0, 66% 0, 66% 55%, 100% 66%, 100% 90%, 74% 100%, 34% 100%);
  border: 0;
  padding: 0;
  margin: 0;
}

.sock .patt, .tray-sock .patt, .sock-flier .patt,
.sock .cuff, .tray-sock .cuff, .sock-flier .cuff,
.sock .shine, .tray-sock .shine, .sock-flier .shine {
  position: absolute;
  pointer-events: none;
}

/* The ribbed cuff band across the top. */
.sock .cuff, .tray-sock .cuff, .sock-flier .cuff {
  left: 0; right: 0; top: 0;
  height: 20%;
  background:
    repeating-linear-gradient(90deg, var(--c2) 0 5px, rgba(255, 255, 255, 0.28) 5px 9px);
}

/* Soft glossy highlight, top-left. */
.sock .shine, .tray-sock .shine, .sock-flier .shine {
  left: 10%; top: 24%;
  width: 22%; height: 34%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  filter: blur(2px);
}

/* Pattern overlays (clipped to the sock because clip-path clips children). */
.sock .patt, .tray-sock .patt, .sock-flier .patt { inset: 0; }

[data-pattern="stripe"] .patt {
  background: repeating-linear-gradient(50deg,
    transparent 0 12px, rgba(255, 255, 255, 0.5) 12px 20px);
}
[data-pattern="dot"] .patt {
  background: radial-gradient(rgba(255, 255, 255, 0.6) 26%, transparent 28%) 0 0 / 17px 17px;
}

/* Falling socks. */
.sock {
  position: absolute;
  width: clamp(46px, 11vw, 68px);
  cursor: pointer;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.28));
  animation: sway var(--sway, 1.8s) ease-in-out infinite alternate;
  touch-action: manipulation;
}

@keyframes sway {
  from { rotate: -8deg; }
  to   { rotate: 8deg; }
}

/* Falling sock popping in: keep swaying forever, but pop in exactly once. */
.sock.pop-in { animation: sway var(--sway, 1.8s) ease-in-out infinite alternate, popin 0.25s ease 1; }
.tray-sock.pop-in { animation: popin 0.25s ease 1; }

@keyframes popin {
  0% { scale: 0; }
  70% { scale: 1.25; }
  100% { scale: 1; }
}

.pop-out { animation: popout 0.2s ease forwards; }
@keyframes popout { to { scale: 0; opacity: 0; } }

/* A sock squashing as it lands on the floor. */
.sock.plop {
  rotate: 0deg;
  transition: top 0.12s ease-out;
  transform-origin: bottom center;
  animation: plop 0.5s ease forwards;
}
@keyframes plop {
  0% { scale: 1 1; opacity: 1; }
  35% { scale: 1.25 0.6; }
  100% { scale: 1.3 0.55; opacity: 0; }
}

/* The flying copy that zooms into the basket when you catch a sock. */
.sock-flier {
  position: fixed;
  z-index: 80;
  transform: translate(0, 0);
  transition: transform 0.23s cubic-bezier(0.5, -0.1, 0.7, 1), opacity 0.23s ease;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.28));
}

/* --------------------------- The basket ----------------------------- */

#basket-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Keep the basket clear of the home indicator — index.html asks for
     viewport-fit=cover, so the page runs right to the bottom of the glass. */
  padding: clamp(8px, 2vw, 16px)
           calc(clamp(8px, 3vw, 24px) + env(safe-area-inset-right, 0px))
           calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom, 0px))
           calc(clamp(8px, 3vw, 24px) + env(safe-area-inset-left, 0px));
}

#basket {
  --b-light: #f0c98a;
  --b-main: #d9a24e;
  --b-dark: #b07a2e;
  position: relative;
  width: min(560px, 94vw);
  min-height: clamp(64px, 15vw, 96px);
  padding: clamp(10px, 2.4vw, 16px) clamp(12px, 3vw, 20px);
  border-radius: 14px 14px 22px 22px;
  /* Woven wicker look. */
  background:
    repeating-linear-gradient(90deg, var(--b-dark) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, var(--b-light), var(--b-main) 55%, var(--b-dark));
  border: 4px solid var(--b-dark);
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.3), 0 8px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.3s ease;
}

/* A little rim across the top of the basket. */
#basket::before {
  content: "";
  position: absolute;
  left: -4px; right: -4px; top: -9px;
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--b-light), var(--b-dark));
  border: 3px solid var(--b-dark);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#basket.pulse { animation: basketPulse 0.35s ease; }
@keyframes basketPulse {
  40% { transform: scale(1.06) translateY(-3px); }
}

#tray-slots {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 1.6vw, 10px);
  align-items: center;
  justify-content: center;
  min-height: clamp(40px, 10vw, 60px);
}

.tray-sock {
  width: clamp(26px, 6.5vw, 40px);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* --------------------------- FX canvas ------------------------------ */

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

/* ---------------------------- Overlays ------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 40, 70, 0.45);
  backdrop-filter: blur(3px);
}

.overlay.show { display: flex; }
.overlay.win { background: rgba(255, 220, 120, 0.35); }
.overlay.lose { background: rgba(40, 50, 80, 0.5); }

.card {
  background: #fff;
  border-radius: 28px;
  border: 6px solid #9fd0ff;
  box-shadow: 0 16px 0 rgba(60, 140, 220, 0.25), 0 24px 40px rgba(0, 0, 0, 0.3);
  padding: clamp(20px, 5vw, 40px);
  max-width: 440px;
  width: 100%;
  text-align: center;
  animation: cardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardIn {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
}

.card-emoji {
  font-size: clamp(46px, 12vw, 72px);
  line-height: 1;
  margin-bottom: 6px;
}

.card h1 {
  margin: 6px 0 12px;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  color: #2f8fe0;
}

.overlay.win .card h1 { color: #ff9500; }
.overlay.lose .card h1 { color: #6a7fd0; }

.card p {
  margin: 8px 0;
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight: 500;
  color: #3a4a5a;
}

.card p.small { font-size: clamp(13px, 3vw, 16px); color: #7a8a9a; }

.big-btn {
  margin-top: 18px;
  font-family: inherit;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #5fb0ff, #2f8fe0);
  border: none;
  border-radius: 99px;
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: 0 6px 0 #1e6fbf, 0 10px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #1e6fbf, 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* ---------------------- Color picker (palette) ---------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12px, 4vw, 28px);
  background: rgba(20, 40, 70, 0.28);
  backdrop-filter: blur(2px);
}

.palette.show { display: flex; }

.palette-card {
  background: #fff;
  border-radius: 24px;
  border: 6px solid #9fd0ff;
  box-shadow: 0 14px 0 rgba(60, 140, 220, 0.25), 0 20px 36px rgba(0, 0, 0, 0.3);
  padding: clamp(16px, 4vw, 26px);
  max-width: 460px;
  width: 100%;
  text-align: center;
  animation: cardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.paused-tag {
  display: inline-block;
  background: #e1f0ff;
  color: #1e6fbf;
  font-weight: 800;
  font-size: clamp(13px, 3vw, 16px);
  padding: 4px 14px;
  border-radius: 99px;
  border: 2px solid #9fd0ff;
}

.palette-card h2 {
  margin: 10px 0 14px;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800;
  color: #2f8fe0;
}

.palette-row { margin: 12px 0; }

.palette-label {
  display: block;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 700;
  color: #3a5a78;
  margin-bottom: 8px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2.4vw, 14px);
  justify-content: center;
}

.swatch {
  width: clamp(40px, 10vw, 52px);
  height: clamp(40px, 10vw, 52px);
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px rgba(60, 140, 220, 0.25), 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  touch-action: manipulation;
}

.swatch:active { transform: scale(0.92); }

.swatch.active {
  box-shadow: 0 0 0 4px #2f8fe0, 0 4px 8px rgba(0, 0, 0, 0.25);
  transform: scale(1.08);
}

.resume-btn { margin-top: 16px; }

/* Small phones: zoom the whole thing out a step. Two things were eating the
   play area — the HUD wrapping onto a second row, and the basket and socks
   being sized for a desktop. Shrinking the furniture and the socks together
   keeps everything in proportion while giving the socks a much longer, wider
   run down the screen, so you can see them coming instead of meeting them at
   the floor. The socks stay comfortably above a fingertip in size. */
@media (max-width: 430px) {
  #hud { gap: 6px; }
  .stat { min-width: 0; }
  .stat-label { font-size: 12px; }
  .mini-bar { width: clamp(56px, 16vw, 90px); height: 8px; margin-top: 4px; }
  #timer-num { font-size: clamp(26px, 6.5vw, 40px); }
  #customize-btn { width: 40px; height: 40px; font-size: 20px; border-width: 2px; }

  .sock { width: clamp(38px, 10vw, 52px); }
  .tray-sock { width: clamp(22px, 5.5vw, 32px); }

  #basket { min-height: clamp(48px, 11vw, 72px); padding: 8px 10px; border-width: 3px; }
  #basket-wrap {
    padding: 6px
             calc(10px + env(safe-area-inset-right, 0px))
             calc(8px + env(safe-area-inset-bottom, 0px))
             calc(10px + env(safe-area-inset-left, 0px));
  }
}

/* Short screens too (a phone in landscape): the play area is the whole point,
   so the basket and the HUD give up their height first. */
@media (max-height: 560px) {
  #basket { min-height: 44px; padding: 6px 10px; }
  #basket-wrap { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  #timer-num { font-size: 26px; }
  .mini-bar { height: 8px; margin-top: 3px; }
}