/* ============================================================
   STUDY BEANS CAFÉ ☕ — style.css
   ------------------------------------------------------------
   This file is the LOOKS. Colors, shapes, and all the little
   animations. Nothing here "does" anything — it just makes the
   page pretty.
   ============================================================ */

/* -- the warm pixel-game palette -- */
:root {
  --cream: #fffaf0;
  --cream-deep: #ffefd9;
  --wood: #4a2b17;      /* dark outline used everywhere */
  --wood-light: #cf9152;
  --wood-dark: #a96c38;
  --orange: #f0864f;
  --orange-light: #ffb37e;
  --pink: #ff8fb3;
  --mint: #7ec8b8;
  --coffee: #6f452b;
  --ink: #5a3a2b;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Baloo 2', 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
  color: var(--ink);
  background-color: #f6e3c8;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.7) 2px, transparent 2px),
    linear-gradient(180deg, #fdf3e2 0%, #f6e3c8 100%);
  background-size: 24px 24px, 100% 100%;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

/* the chunky "game panel" card that every big box shares */
.card {
  background: linear-gradient(#ffffff, #fff6fb);
  border: 4px solid var(--wood);
  border-radius: 26px;
  box-shadow: 0 6px 0 rgba(74, 43, 23, 0.3), 0 16px 34px rgba(120, 80, 60, 0.16);
}

/* ============================================================
   THE CAFÉ SCENE — pixel art drawn by sprites.js
   ============================================================ */
.cafe {
  position: relative;
  aspect-ratio: 480 / 340;  /* keeps the art proportional on any screen */
  overflow: hidden;
  background: #e8cba0;
}

.scene {
  display: block;
  width: 100%;
  height: 100%;
}

/* -- Puff's speech bubble (HTML overlay, so JS can change the text) -- */
.cat-bubble {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: 14.5%;
  max-width: 68%;
  background: #fffdf6;
  border: 3px solid var(--wood);
  border-radius: 14px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: #b3622e;
  text-align: center;
  box-shadow: 0 3px 0 rgba(74, 43, 23, 0.2);
}
.cat-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 9px solid var(--wood);
}

/* ============================================================
   SCENE ANIMATIONS (frame-by-frame, like a real game sprite)
   ============================================================ */
/* Puff bobs gently while idle */
.cat-idle {
  animation: bob 3.2s ease-in-out infinite;
}
/* ...and does a little bounce when you earn beans */
.barista.bounce {
  animation: bounce 0.6s ease;
}

/* The wave: two frames of the arm stacked on top of each other.
   "frame-by-frame" — sprites.js swaps which one is visible with
   SMIL (instant, like flipping a sprite sheet). It plays once
   when the page opens. */
.arm-down { opacity: 1; }
.arm-up   { opacity: 0; }

/* your laptop wobbles while a focus session runs */
.laptop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.cafe.studying .laptop {
  animation: wobble 1.1s ease-in-out infinite;
}

/* steam over your cup — only while studying */
.steam-group {
  opacity: 0;
}
.cafe.studying .steam-group {
  opacity: 1;
}
.steam-p {
  transform-box: fill-box;
  opacity: 0;
  animation: steamRise 1.8s ease-out infinite;
}
.steam-p:nth-child(2) { animation-delay: 0.6s; }
.steam-p:nth-child(3) { animation-delay: 1.2s; }

/* the twinkly pixel stars */
.sparkle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: floaty 3.5s ease-in-out infinite alternate;
}

/* ============================================================
   THE TIMER PANEL
   ============================================================ */
.panel {
  position: relative;   /* needed so celebration emojis can float over it */
  background: linear-gradient(var(--cream), var(--cream-deep));
  margin-top: 26px;
}

.mode-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 12px 6px;
}
.tab {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: #8a5a33;
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 43, 23, 0.28);
  transition: transform 0.1s;
}
.tab:hover { transform: translateY(-1px); }
.tab:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74, 43, 23, 0.28); }
.tab.active {
  background: linear-gradient(var(--orange-light), var(--orange));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* -- the focus LENGTH chips (15m / 25m / 50m) -- */
.length-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
}
.length-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #a97a4f;
  letter-spacing: 1px;
}
.length-chips {
  display: flex;
  gap: 6px;
}
.length-chip {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #8a5a33;
  background: var(--cream);
  border: 2px solid var(--wood);
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(74, 43, 23, 0.28);
  transition: transform 0.1s;
}
.length-chip:hover { transform: translateY(-1px); }
.length-chip:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(74, 43, 23, 0.28); }
.length-chip.active {
  background: linear-gradient(var(--orange-light), var(--orange));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.length-input {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #8a5a33;
  background: #fffaf0;
  border: 2px solid var(--wood);
  border-radius: 999px;
  width: 48px;
  padding: 6px 8px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(74, 43, 23, 0.28);
  outline: none;
  transition: border-color 0.1s;
}
.length-input::placeholder { color: #c9a67e; }
.length-input:focus { border-color: var(--orange); }
/* hide the up/down arrows so it reads as a game input */
.length-input::-webkit-inner-spin-button,
.length-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.length-input { -moz-appearance: textfield; appearance: textfield; }

.mode-label {
  text-align: center;
  margin: 12px 0 2px;
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}
.mode-focus .mode-label { color: #e07a4f; }
.mode-short .mode-label { color: #4fa88b; }
.mode-long  .mode-label { color: var(--pink); }

/* -- the big pixel coffee cup timer -- */
.cup-wrap {
  position: relative;
  width: 240px;
  margin: 26px auto 30px;
}
.cup-wrap::after {
  /* the saucer under the cup */
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 268px;
  height: 26px;
  z-index: 0;
  background: #ffe9d2;
  border: 4px solid var(--wood);
  box-shadow: 0 5px 0 rgba(74, 43, 23, 0.3);
}

.cup {
  position: relative;
  z-index: 2;
  width: 240px;
  height: 210px;
  background: #fff3e0;
  border: 4px solid var(--wood);
  box-shadow: 0 5px 0 rgba(74, 43, 23, 0.3);
  overflow: hidden;
}

.cup-handle {
  position: absolute;
  z-index: 1;
  right: -30px;
  top: 48px;
  width: 34px;
  height: 72px;
  border: 5px solid var(--wood);
  border-left: none;
  filter: drop-shadow(4px 3px 0 rgba(74, 43, 23, 0.25));
}

/* the coffee level — app.js sets --fill as a percentage */
.liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill, 0%);
  background: #8a5a3b;
  transition: height 0.25s linear;
}
.liquid::after {
  /* a foam cap on top of the coffee */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: #f6e3c9;
}

.time {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 1.65rem;
  color: #fff;
  text-shadow:
    2px 2px 0 var(--coffee), -2px 2px 0 var(--coffee),
    2px -2px 0 var(--coffee), -2px -2px 0 var(--coffee),
    0 4px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* steam — only visible while the timer runs */
.steam {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: 214px;
  width: 80px;
  height: 30px;
  display: none;
}
.cup-wrap.running .steam { display: block; }
.steam span {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 26px;
  background: rgba(255, 255, 255, 0.85);
  animation: rise 2s ease-out infinite;
}
.steam span:nth-child(1) { left: 10px; }
.steam span:nth-child(2) { left: 36px; animation-delay: 0.4s; }
.steam span:nth-child(3) { left: 62px; animation-delay: 0.8s; }

/* -- buttons -- */
.controls {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 4px 0 18px;
}
.big-btn {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  padding: 14px 26px;
  border: 4px solid var(--wood);
  border-radius: 999px;
  background: linear-gradient(var(--orange-light), var(--orange));
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 0 #a35a2e, 0 10px 18px rgba(240, 134, 79, 0.35);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #a35a2e, 0 4px 8px rgba(240, 134, 79, 0.3);
}
.big-btn.ghost {
  background: linear-gradient(var(--cream), #ffe8d0);
  color: #8a5a33;
  text-shadow: none;
  box-shadow: 0 4px 0 #d8b48a, 0 10px 18px rgba(216, 180, 138, 0.3);
}
.big-btn.ghost:active { box-shadow: 0 0 0 #d8b48a; }

/* -- the scoreboard -- */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 18px 20px;
}
.beans-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 800;
  color: #8a5a33;
  box-shadow: 0 3px 0 rgba(74, 43, 23, 0.25);
}
.beans-pill b {
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  color: #e07a4f;
}

.cycle {
  font-weight: 700;
  color: #a06a34;
  font-size: 0.9rem;
}
.dots { display: inline-flex; gap: 5px; margin-left: 6px; vertical-align: middle; }
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f0e0c8;
  border: 2px solid #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.dot.on { background: linear-gradient(#8a5a3b, #6f452b); }

.foot {
  text-align: center;
  margin-top: 22px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b08a5a;
}
.sound-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  vertical-align: middle;
}

/* -- the little pixel icons (buttons, bubble, label, celebration) -- */
.btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
  image-rendering: pixelated;
}
.cat-bubble .btn-icon { width: 15px; height: 15px; vertical-align: -3px; }
.mode-label .btn-icon { width: 13px; height: 13px; vertical-align: -3px; }
.pop .btn-icon, .gain .btn-icon { width: 16px; height: 16px; }
.tab, .big-btn, .style-btn, .buy-btn, .beans-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sound-btn .btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* -- the style customizer (skin / hair / shirt) -- */
.style-box {
  text-align: center;
  margin: 0 0 18px;
}
.style-btn {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  background: var(--cream);
  border: 3px solid var(--wood);
  border-radius: 999px;
  color: #8a5a33;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74, 43, 23, 0.25);
  transition: transform 0.1s;
}
.style-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74, 43, 23, 0.25); }
.style-panel {
  background: #fff6e8;
  border: 3px solid var(--wood);
  border-radius: 16px;
  padding: 12px 16px;
  margin: 12px auto 0;
  max-width: 330px;
}
.style-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.style-label {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: #a06a34;
  width: 54px;
  text-align: left;
}
.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--wood), 0 2px 0 rgba(74, 43, 23, 0.3);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.swatch:hover { transform: translateY(-1px); }
.swatch.selected {
  box-shadow: 0 0 0 3px var(--orange), 0 0 0 5px #fff, 0 0 0 7px var(--wood);
}

/* -- the bean shop -- */
.shop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.shop-icon {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
}
.shop-row .btn-icon {
  /* the drink icon at the front of each shop row, a little bigger */
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.shop-name {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: #8a5a33;
  flex: 1;
  text-align: left;
}
.shop-mult {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: #a06a34;
  min-width: 40px;
  text-align: right;
}
.buy-btn {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  background: linear-gradient(var(--orange-light), var(--orange));
  color: #fff;
  border: 3px solid var(--wood);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(74, 43, 23, 0.3);
  transition: transform 0.08s;
}
.buy-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(74, 43, 23, 0.3);
}
.buy-btn:disabled {
  background: #f0e0c8;
  color: #b89a70;
  cursor: default;
  box-shadow: none;
}
.shop-tip {
  margin: 10px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a06a34;
  text-align: center;
}

/* -- the journal (a notebook page Puff keeps) -- */
.journal-panel {
  background:
    repeating-linear-gradient(transparent 0 22px, rgba(176, 138, 90, 0.18) 22px 23px),
    #fffbe9;
}
.journal-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 9px 0;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: #8a5a33;
}
.journal-line b {
  font-size: 0.6rem;
  color: #e07a4f;
}
.journal-list {
  margin-top: 4px;
  border-top: 2px dashed rgba(176, 138, 90, 0.4);
  padding-top: 6px;
}
.journal-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: #a06a34;
  text-align: left;
  margin: 2px 0;
}

/* -- the active boost note -- */
.boost-note {
  text-align: center;
  margin: -6px 12px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #e07a4f;
}

/* ============================================================
   CELEBRATION + ANIMATIONS
   ============================================================ */
.pop {
  position: absolute;
  z-index: 60;
  font-size: 1.5rem;
  pointer-events: none;
  user-select: none;
  animation: pop 1.4s ease-out forwards;
}
.gain {
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 60;
  font-weight: 800;
  font-size: 1rem;
  color: #e07a4f;
  text-shadow: 0 1px 0 #fff;
  pointer-events: none;
  animation: gainFloat 1.4s ease-out forwards;
}

@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}
@keyframes floaty {
  from { transform: translateY(0) rotate(-8deg); }
  to   { transform: translateY(-7px) rotate(10deg); }
}
@keyframes rise {
  0%   { transform: translateY(0) scaleX(1); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: translateY(-44px) translateX(5px) scaleX(1.7); opacity: 0; }
}
@keyframes steamRise {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 0.8; }
  100% { transform: translateY(-12px); opacity: 0; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg) translateY(-1px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-10px); }
  70%      { transform: translateY(-3px); }
}
@keyframes pop {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  70%  { transform: translate(-50%, -130%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, -230%) scale(1); opacity: 0; }
}
@keyframes gainFloat {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-26px); opacity: 0; }
}