/* ====================================================================
   H&H's Snackomat — Materials & Layout (compact)
   ==================================================================== */

/* ---------- Stage (centered, full viewport) ---------- */
.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 24px;
}
.stage-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 24px;
}

/* ---------- Prompt above machine ---------- */
.prompt{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:16px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align:center;
  line-height:1;
}
.prompt-text{
  background: linear-gradient(180deg, var(--lava) 0%, var(--lava-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(214,51,0,0.15));
}
.prompt-arrow{
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: var(--lava);
  opacity: 0.7;
  animation: promptBounce 1.8s ease-in-out infinite;
  transform-origin: center;
}
.prompt-arrow:last-child{ animation-delay: 0.9s; }
@keyframes promptBounce{
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ====================================================================
   THE MACHINE
   ==================================================================== */
.automat{
  --w: 420px;
  width: var(--w);
  position:relative;
  filter: drop-shadow(0 50px 50px rgba(20,12,4,0.4)) drop-shadow(0 6px 12px rgba(20,12,4,0.25));
  transition: transform 0.4s;
}
@keyframes rumble{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-1.5px,1px) rotate(-0.2deg)}
  25%{transform:translate(2px,-1px) rotate(0.25deg)}
  40%{transform:translate(-1px,2px) rotate(-0.18deg)}
  55%{transform:translate(2px,0) rotate(0.18deg)}
  70%{transform:translate(-2px,-1px) rotate(-0.22deg)}
  85%{transform:translate(1px,1px) rotate(0.1deg)}
}
.automat.rumble{ animation: rumble 0.5s linear; }

.shadow-pool{
  position:absolute; left:6%; right:6%; bottom:-26px; height:30px;
  background:radial-gradient(ellipse at center, rgba(15,12,10,0.55), transparent 70%);
  filter:blur(10px);
  z-index:-1;
}

/* ---------- basalt body ---------- */
.body{
  position:relative;
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 12px),
    linear-gradient(90deg, var(--basalt-1) 0%, var(--basalt-2) 18%, var(--basalt-3) 50%, var(--basalt-2) 82%, var(--basalt-1) 100%),
    var(--basalt-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    inset 2px 0 0 rgba(255,255,255,0.025),
    inset -2px 0 0 rgba(0,0,0,0.45),
    0 0 0 1px var(--basalt-edge);
  padding: 10px;
}
.body::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  opacity:0.7;
  border-radius:inherit;
}

/* ====================================================================
   MACHINE ROW — snacks left, controls right (dispenser below as own row)
   ==================================================================== */
.machine-row{
  display:grid;
  grid-template-columns: 1fr 130px;
  gap:8px;
  align-items:stretch;
}

/* ---------- WINDOW (snack glass) ---------- */
.window{ position:relative; min-width:0; }
.window-frame{
  position:relative;
  height:100%;
  border-radius:4px;
  background: var(--ink-deep);
  padding:10px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.9),
    inset 0 2px 0 rgba(255,255,255,0.04),
    inset 0 -2px 6px rgba(0,0,0,0.7),
    0 6px 18px rgba(0,0,0,0.45);
}
.magma-glow{
  position:absolute; left:8%; right:8%; bottom:6%; height:60%;
  background: radial-gradient(ellipse at center bottom, rgba(255,74,18,0.55) 0%, rgba(255,74,18,0.22) 30%, transparent 65%);
  filter: blur(14px);
  pointer-events:none;
  animation: magmaBreathe 5.5s ease-in-out infinite;
  z-index:1;
}
@keyframes magmaBreathe{
  0%,100%{ opacity:0.75; transform:scaleY(1); }
  50%   { opacity:1;    transform:scaleY(1.08); }
}
.automat.rumble .magma-glow{ opacity:1; filter:blur(8px); }

.window-glass{
  position:relative;
  height:100%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,74,18,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0a0805 0%, #120c08 40%, #1a0e05 90%);
  border-radius:2px;
  padding:8px;
  z-index:2;
  overflow:hidden;
}
.grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(96px, 1fr);
  gap:6px;
  height:100%;
}
.glass-reflection{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 18%, transparent 36%, transparent 100%),
    linear-gradient(290deg, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 90%, rgba(255,255,255,0.08) 100%);
  mix-blend-mode:screen;
}

/* ---------- Slot ---------- */
.slot{
  position:relative;
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(255,160,40,0.05) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,200,120,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  cursor:pointer;
  transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
  overflow:hidden;
  min-height:96px;
}
.slot-stratum{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(255,180,80,0.025) 0 1px, transparent 1px 6px);
  border-radius:inherit;
  opacity:0.6;
}
.slot-code{
  font-family: 'JetBrains Mono', monospace;
  font-size:9px; font-weight:700; letter-spacing:0.06em;
  color:#fff;
}
.slot-price{
  font-family: 'JetBrains Mono', monospace;
  font-size:9px; font-weight:700; letter-spacing:0.04em;
  color:#fff;
  font-variant-numeric: tabular-nums;
}
.slot-label{
  position:absolute; left:0; right:0; bottom:0;
  height:14px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 5px;
  background:#000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,1);
  z-index:5;
}
.slot-product{
  position:absolute;
  left:0; right:0; top:4px; bottom:16px;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.5));
}
.slot-shelf{ display:none; }
.slot-spiral{
  position:absolute; left:5px; right:5px; bottom:15px; height:5px;
  opacity:0.4;
  pointer-events:none;
  z-index:3;
}

/* ---- image-slot inside snack fach ---- */
.slot-product image-slot{
  display:block;
  width:100%;
  height:100%;
  color: rgba(255,209,58,0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.slot-product image-slot::part(frame){ background: transparent; }
.slot-product image-slot::part(ring){
  border: 1px dashed rgba(255,160,40,0.16);
  border-radius: 2px;
}
.slot-product image-slot[data-over]::part(frame){
  background: rgba(255,160,40,0.12);
  outline: 1px solid rgba(255,209,58,0.7);
  outline-offset: -1px;
}

/* ---- hover / selected / dispensing states ---- */
.slot:hover, .slot.hov{
  background:
    linear-gradient(180deg, rgba(255,160,40,0.22) 0%, rgba(0,0,0,0.55) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,160,40,0.55),
    inset 0 1px 0 rgba(255,200,120,0.18),
    0 0 14px rgba(255,160,40,0.22);
  transform: translateY(-1px);
}
.slot.selected{
  box-shadow:
    inset 0 0 0 1.5px rgba(255,209,58,0.9),
    inset 0 0 22px rgba(255,160,40,0.4);
}
.slot.active{
  background:
    linear-gradient(180deg, rgba(255,74,18,0.4) 0%, rgba(0,0,0,0.5) 100%);
}
.slot.dispensing .slot-spiral{
  opacity:1;
  animation: spiralRotate 0.18s linear infinite;
}
@keyframes spiralRotate{
  from{ transform: translateX(0); }
  to  { transform: translateX(-12px); }
}
.slot.dispensing .slot-product{
  animation: candyDrop 1.4s ease-in 0.6s forwards;
}
@keyframes candyDrop{
  0% { transform: translate(0,0) rotate(0); opacity:1; }
  60%{ transform: translate(0,30px) rotate(8deg); opacity:1; }
  100%{ transform: translate(0,80px) rotate(15deg); opacity:0; }
}

/* ====================================================================
   CONTROLS COLUMN — display + keypad + logo plate
   ==================================================================== */
.controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Display */
.display{ position:relative; }
.display-frame{
  position:relative;
  border-radius:3px;
  padding:5px 7px;
  background: linear-gradient(180deg, #050402 0%, #0a0604 60%, #0a0604 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 2px rgba(201,150,98,0.35),
    0 4px 10px rgba(0,0,0,0.4);
}
.display-screen{
  position:relative;
  background: var(--display-bg);
  border-radius:2px;
  padding:6px 7px 5px;
  min-height:46px;
  overflow:hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0,0,0,0.95);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  z-index:3;
}
.crt-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.crt-glare{
  position:absolute; left:0; right:0; top:0; height:40%; pointer-events:none; z-index:5;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.phosphor{ position:relative; z-index:2; display:flex; align-items:center; min-height:24px; white-space:nowrap; overflow:hidden; }
.display-text{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 10px; letter-spacing: 0;
  color: var(--display-phos);
  text-shadow: 0 0 4px rgba(255,179,71,0.7), 0 0 12px rgba(255,140,30,0.55);
  animation: phosphorFlicker 4.2s steps(1) infinite;
  white-space:nowrap;
}
@keyframes phosphorFlicker{
  0%,100%{ opacity:1 } 50%   { opacity:1 } 50.5% { opacity:0.85 } 51%   { opacity:1 }
  72%   { opacity:1 } 72.4% { opacity:0.92 } 72.8% { opacity:1 }
}
.display.ruckel .display-text{ animation: phosphorShake 0.4s ease-in-out; }
@keyframes phosphorShake{
  0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-2px); }
  40%{ transform: translateX(3px); } 60%{ transform: translateX(-2px); } 80%{ transform: translateX(2px); }
}
.display-sub{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  margin-top:3px;
  font-size:7px; letter-spacing:0.18em;
  color: rgba(255,179,71,0.55);
  text-transform:uppercase;
}
.display-rivets{ position:absolute; inset:0; pointer-events:none; }
.display-rivets i{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff4d4 0%, var(--brass) 45%, #4a2e10 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.display-rivets i:nth-child(1){ top:3px; left:3px; }
.display-rivets i:nth-child(2){ top:3px; right:3px; }
.display-rivets i:nth-child(3){ bottom:3px; left:3px; }
.display-rivets i:nth-child(4){ bottom:3px; right:3px; }

/* ---------- Keypad ---------- */
.keypad{
  position:relative;
  padding:8px;
  border-radius:3px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.4) 0%, transparent 60%),
    linear-gradient(180deg, #1c1814 0%, #0e0c0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(0,0,0,0.8),
    inset 0 0 24px rgba(0,0,0,0.6);
}
.slate{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  opacity:0.8;
  border-radius:inherit;
}
.keys{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:5px;
}
.key{
  appearance:none; border:none; cursor:pointer;
  position:relative;
  height:32px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #2a241e 0%, #110d0a 70%, #0a0805 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.key .display-font{
  font-size:15px;
  color: #d6c5a8;
  text-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.85);
}
.key:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,160,40,0.45),
    inset 0 1px 0 rgba(255,200,120,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.85),
    0 0 14px rgba(255,160,40,0.25);
  background: radial-gradient(circle at 35% 30%, #3a2e22 0%, #150e08 70%, #0a0805 100%);
}
.key:hover .display-font{ color: #f7e2bc; }
.key:active, .key.press{
  transform: translateY(1px);
  background: radial-gradient(circle at 50% 50%, #0a0805 0%, #1a120c 100%);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(255,160,40,0.4),
    inset 0 0 14px rgba(255,160,40,0.3);
}
.key.k-clear .display-font{ font-size:12px; color:#c97a5a; }
.key.k-back  .display-font{ font-size:12px; color:#c8b790; }
.keypad.easter{ animation: rumble 0.5s linear; }

/* ---------- Brand logo plate (under keypad — grows to fill remaining column) ---------- */
.brand-plate{
  position:relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius:6px;
  padding:14px 10px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.55) 0%, transparent 70%),
    linear-gradient(180deg, #faf3e2 0%, #ead7b3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px rgba(201,150,98,0.45),
    0 4px 12px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.brand-plate-img{
  display:block;
  width:100%;
  max-width:135px;
  max-height:100%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* ====================================================================
   DISPENSER (own row under machine-row, narrow + centered)
   ==================================================================== */
.dispenser{
  position:relative;
  perspective: 800px;
  perspective-origin: 50% 0%;
  width: 100%;
  margin: 10px 0 0;
}
.dispenser-cavity{
  position:relative;
  height:54px;
  border-radius:3px;
  background:
    radial-gradient(ellipse at center top, rgba(255,74,18,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #050301 0%, #0a0604 100%);
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,0.95),
    inset 0 -2px 0 rgba(255,255,255,0.03),
    inset 0 0 0 1px rgba(0,0,0,0.9);
  overflow:hidden;
}
.cavity-glow{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center 110%, rgba(255,74,18,0.45) 0%, transparent 55%);
  filter: blur(8px);
  animation: magmaBreathe 5.5s ease-in-out infinite;
}
.dropped-product{
  position:absolute; left:50%; bottom:3px;
  transform: translateX(-50%);
  width:60px; height:54px;
  display:flex; align-items:center; justify-content:center;
  animation: candyArrive 0.6s cubic-bezier(.4,1.6,.6,1);
  filter: drop-shadow(0 8px 8px rgba(0,0,0,0.6));
  z-index:2;
}
.dropped-product image-slot{
  display:block;
  width:100%;
  height:100%;
  color: rgba(255,209,58,0.75);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
}
.dropped-product image-slot::part(frame){ background: transparent; }
.dropped-product image-slot::part(ring){ display:none; }
@keyframes candyArrive{
  0%{ transform: translate(-50%,-50px) rotate(-12deg); opacity:0; }
  60%{ transform: translate(-50%,4px) rotate(6deg); opacity:1; }
  100%{ transform: translate(-50%,0) rotate(0deg); opacity:1; }
}
.dispenser-flap{
  position:relative;
  margin-top:-50px;
  height:50px;
  border-radius:3px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #2a201a 0%, #18120e 60%, #0e0a07 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(0,0,0,0.85),
    0 4px 8px rgba(0,0,0,0.4);
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(.5,0,.2,1), opacity 0.5s ease-out;
  z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  padding:4px;
}
.dispenser.open .dispenser-flap{
  transform: translateY(50px);
  opacity: 0;
  pointer-events:none;
}
.flap-handle{
  width:60%; height:7px; border-radius:4px;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 3px rgba(0,0,0,0.5);
}
.flap-label{
  font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase;
  color: rgba(255,209,58,0.5);
}
.flap-window{
  width:50%; height:8px;
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(255,74,18,0.4) 0%, rgba(0,0,0,0.8) 100%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(0,0,0,0.8);
  opacity:0.7;
}

/* ====================================================================
   PHOTO-DROP HINT
   ==================================================================== */
.photo-hint{
  position:fixed;
  left:24px; bottom:24px;
  z-index:50;
  display:flex; align-items:center; gap:12px;
  max-width:340px;
  padding:12px 14px 12px 12px;
  border-radius:10px;
  background: linear-gradient(180deg, #1c1814 0%, #0e0c0a 100%);
  color: #f0ddb6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(201,150,98,0.35),
    0 14px 28px rgba(0,0,0,0.35);
  animation: hintIn 0.5s cubic-bezier(.4,1.6,.6,1) 0.6s both;
}
@keyframes hintIn{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
.photo-hint-icon{
  flex:none;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 25%, #fff4d4 0%, var(--brass) 50%, #5a3818 100%);
  color: #2a1808;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 2px 2px rgba(0,0,0,0.4);
}
.photo-hint-text{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.photo-hint-text strong{
  font-family:'Familjen Grotesk',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:#f7e2bc;
}
.photo-hint-text span{
  font-family:'Familjen Grotesk',sans-serif;
  font-size:11.5px; color: rgba(214,197,168,0.78);
}
.photo-hint-close{
  appearance:none; border:0; cursor:pointer;
  width:24px; height:24px; border-radius:50%;
  background: rgba(255,255,255,0.04);
  color: rgba(214,197,168,0.6);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s, color 0.15s;
  align-self:flex-start;
  margin-left:4px;
}
.photo-hint-close:hover{ background: rgba(255,255,255,0.1); color:#f7e2bc; }

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 640px){
  .automat{ --w: 94vw; }
  .machine-row{ grid-template-columns: 1fr 140px; }
}
@media (max-width: 480px){
  .machine-row{ grid-template-columns: 1fr; }
  .controls{ flex-direction:row; flex-wrap:wrap; }
  .controls > *{ flex: 1 1 140px; }
}