@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --espresso: #130800; --roast: #2c1205; --mahogany: #4a1e09;
  --crema: #c8894a; --copper: #a0622a; --gold: #d4a55c;
  --milk: #f5e6cc; --foam: #fdf4e7; --screen-glow: #00e5a0;
  --btn-base: #3a1a0a; --btn-top: #4e2510; --btn-shadow: #1a0800;
}

/* ── RESET & BODY ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex; justify-content: center; align-items: center;
  font-family: 'DM Mono', monospace;
  background: var(--espresso) radial-gradient(ellipse 80% 60% at 15% 20%, rgba(80,30,5,0.55), transparent 60%);
  background-attachment: fixed;
}

/* ── LAYOUT ── */
.app-container {
  display: flex; align-items: center; justify-content: center;
  gap: 5vw; padding: 40px 24px; width: 100%; max-width: 1100px;
}

h1 {
  font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(3rem, 7vw, 5.2rem); line-height: 0.85;
  color: var(--foam); flex: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 60px rgba(200,137,74,0.2);
}

/* ── MACHINE SHELL ── */
.coffee-machine {
  width: 340px; flex-shrink: 0; padding: 26px 24px 30px;
  border-radius: 32px 32px 24px 24px; position: relative;
  background: linear-gradient(170deg, #3a1a08 0%, #200e04 45%, #130700 100%);
}

.brand-label {
  font-size: 0.58rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--copper); text-align: center; margin-bottom: 18px; opacity: 0.75;
}

/* ── DISPLAY ── */
#display {
  width: 100%; height: 62px; border-radius: 10px;
  border: 2px solid #3a2010; background: #091510;
  color: var(--screen-glow); font-size: 1.6rem; text-align: right;
  padding: 0 16px; margin-bottom: 20px;
  text-shadow: 0 0 8px rgba(0,229,160,0.7);
  box-shadow: inset 0 2px 8px #000;
}

/* ── BUTTONS ── */
.buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }

button {
  height: 62px; border: none; border-radius: 50%;
  cursor: pointer; color: var(--milk); font-family: inherit;
  background: linear-gradient(165deg, var(--btn-top), var(--btn-base));
  transition: all 80ms ease;
  box-shadow: 0 4px 0 var(--btn-shadow), 0 6px 12px rgba(0,0,0,0.45);
}

button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow); }

/* Unified Operator/Control Overrides */
.control { color: #ffb87a; background: linear-gradient(165deg, #5a2e0c, #3d1c08); }
.operator { color: #ffb87a; background: linear-gradient(165deg, #7d4520, #5a2e0e); }

.equals {
  background: linear-gradient(165deg, #e09a5a, #c07030);
  color: var(--espresso); font-weight: 700; font-size: 1.2rem;
  box-shadow: 0 4px 0 #7a3a10, 0 6px 18px rgba(200,137,74,0.4);
}

.zero { grid-column: span 2; border-radius: 31px; text-align: left; padding-left: 26px; }

/* ── BREW STATION & CUP ── */
.brew-station {
  height: 130px; border-radius: 16px; position: relative;
  background: rgba(0,0,0,0.4); display: flex;
  justify-content: center; align-items: flex-end; padding-bottom: 14px;
}

.cup {
  width: 130px; height: 75px; background: #fff;
  border-radius: 0 0 38px 38px; position: relative;
  display: flex; justify-content: center; align-items: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cup-handle {
  position: absolute; right: -22px; top: 8px; width: 22px; height: 32px;
  border: 6px solid #f0e8dc; border-left: none; border-radius: 0 18px 18px 0;
}

#cup-result {
  font-family: 'Playfair Display', serif; font-weight: 700;
  color: #4a2c0a; opacity: 0; transition: 0.5s;
  font-size: 2em;
}

/* Animation triggers */
.brewed #cup-result { opacity: 1; transform: scale(1); }
.brewed .cup { transform: scale(1.08) translateY(-4px); }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .app-container { flex-direction: column; text-align: center; }
  h1 { flex: none; }
}

@media (max-width: 400px) {
  .coffee-machine { width: 300px; }
  button, #display { height: 54px; }
}