.arg-app {
  --arg-ink: #2d241f;
  --arg-brown: #75462d;
  --arg-brown-dark: #4e2d1d;
  --arg-cream: #f6efe5;
  --arg-line: rgba(75, 50, 36, .14);
  max-width: 620px;
  margin: 24px auto;
  color: var(--arg-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.arg-app * { box-sizing: border-box; }
.arg-card {
  background: #fff;
  border: 1px solid var(--arg-line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(44, 30, 20, .08);
  overflow: hidden;
}
.arg-header { text-align: center; }
.arg-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; opacity: .55; }
.arg-header h2 { margin: 5px 0 4px; font-size: clamp(22px, 5vw, 30px); line-height: 1.25; }
.arg-header p { margin: 0 0 14px; font-size: 14px; opacity: .72; }
.arg-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.arg-stat { background: var(--arg-cream); padding: 10px 6px; border-radius: 12px; text-align: center; }
.arg-stat span { display: block; font-size: 11px; opacity: .62; }
.arg-stat strong { display: block; margin-top: 2px; font-size: 18px; line-height: 1.2; }
.arg-roaster {
  --heat-level: 0;
  position: relative;
  width: min(92vw, 470px);
  aspect-ratio: 1.52 / 1;
  margin: 12px auto 8px;
  perspective: 820px;
  overflow: visible;
}
.arg-burner {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 56%;
  height: 35%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #111 0 35%, #282828 36% 50%, #0e0e0e 51% 59%, transparent 60%),
    radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 68%);
  box-shadow: 0 16px 20px rgba(0,0,0,.24);
  z-index: 0;
}
.arg-burner::before,
.arg-burner::after {
  content:"";
  position:absolute;
  left:50%; top:46%;
  width:128%; height:13%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#171717;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.08);
}
.arg-burner::after { transform:translate(-50%,-50%) rotate(60deg); }
.arg-flame-ring {
  position:absolute;
  left:50%; top:49%;
  width:74%; height:47%;
  transform:translate(-50%,-50%) scale(.72);
  border-radius:50%;
  opacity:0;
  filter: drop-shadow(0 0 7px rgba(38,124,255,.72));
  background:
    radial-gradient(ellipse at center, transparent 0 47%, rgba(25,100,255,.94) 50% 57%, rgba(50,190,255,.86) 58% 62%, transparent 66%),
    repeating-conic-gradient(from 0deg, rgba(72,183,255,.95) 0deg 6deg, transparent 7deg 15deg);
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  z-index:3;
}
.arg-roaster[data-heat="1"] .arg-flame-ring { opacity:.55; transform:translate(-50%,-50%) scale(.74); filter:drop-shadow(0 0 4px rgba(35,120,255,.58)); }
.arg-roaster[data-heat="2"] .arg-flame-ring { opacity:.72; transform:translate(-50%,-50%) scale(.86); filter:drop-shadow(0 0 7px rgba(35,120,255,.68)); }
.arg-roaster[data-heat="3"] .arg-flame-ring { opacity:.88; transform:translate(-50%,-50%) scale(1.00); filter:drop-shadow(0 0 10px rgba(35,120,255,.76)); }
.arg-roaster[data-heat="4"] .arg-flame-ring { opacity:1; transform:translate(-50%,-50%) scale(1.13); filter:drop-shadow(0 0 14px rgba(35,120,255,.90)); }
.arg-pan {
  position:absolute;
  left:8%;
  top:3%;
  width:75%;
  height:74%;
  transform: rotateX(52deg) rotateZ(-2deg);
  transform-origin:50% 84%;
  transform-style:preserve-3d;
  z-index:5;
}
.arg-pan-wall {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 48% 36%, #f4f4f4 0 49%, #c8c8c8 50% 56%, #7e7e7e 57% 63%, #3c3c3c 64% 100%);
  box-shadow:
    inset 0 -18px 24px rgba(0,0,0,.37),
    inset 0 5px 8px rgba(255,255,255,.88),
    0 18px 18px rgba(0,0,0,.24);
}
.arg-pan-wall::after {
  content:"";
  position:absolute;
  left:4%; right:4%; bottom:-10%; height:32%;
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#8f8f8f 0,#c8c8c8 28%,#6d6d6d 74%,#393939 100%);
  box-shadow:0 8px 12px rgba(0,0,0,.22);
  z-index:-1;
}
.arg-pan-bed {
  position:absolute;
  inset:11% 8% 12%;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, #49423b 0 72%, #292622 100%);
  box-shadow: inset 0 5px 12px rgba(0,0,0,.50), 0 0 0 3px rgba(230,230,230,.78);
  z-index:2;
}
.arg-mesh {
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:.38;
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(225,225,225,.75) 47% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 46%, rgba(225,225,225,.70) 47% 51%, transparent 52%);
  background-size:9px 9px;
  pointer-events:none;
  z-index:4;
  box-shadow:inset 0 0 0 2px rgba(230,230,230,.6);
}
.arg-beans { position:absolute; inset:6% 7% 8%; z-index:3; }
.arg-beans i {
  position:absolute;
  left:var(--x); top:var(--y);
  width:19px; height:13px;
  margin:-6px -9px;
  border-radius:55% 45% 52% 48%;
  background:hsl(92 28% 56%);
  box-shadow:inset -3px -3px 4px rgba(0,0,0,.32), inset 2px 2px 2px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.30);
  transform:rotate(var(--r));
  transition:background-color .42s linear;
}
.arg-beans i::after { content:""; position:absolute; left:47%; top:12%; width:1px; height:76%; background:rgba(35,20,10,.40); transform:rotate(8deg); }
.arg-handle {
  position:absolute;
  left:88%;
  top:48%;
  width:58%;
  height:18%;
  transform:translateY(-50%) rotateX(-4deg);
  transform-origin:left center;
  z-index:7;
  pointer-events:none;
}
.arg-handle::before {
  content:"";
  position:absolute;
  left:-9%; top:28%; width:24%; height:44%;
  border-radius:5px;
  background:linear-gradient(180deg,#efefef,#8b8b8b 55%,#545454);
  box-shadow:0 2px 4px rgba(0,0,0,.28);
}
.arg-handle span {
  position:absolute;
  left:12%; top:5%; width:88%; height:90%;
  border-radius:8px 22px 22px 8px;
  background:
    repeating-linear-gradient(7deg, rgba(255,255,255,.06) 0 2px, rgba(50,20,5,.08) 3px 5px),
    linear-gradient(90deg,#5a2f17,#8c532d 38%,#62351d 72%,#3f2112);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22), inset 0 -3px 4px rgba(0,0,0,.30), 0 4px 8px rgba(0,0,0,.28);
}
.arg-handle span::after {
  content:"";
  position:absolute;
  right:10%; top:50%; width:7px; height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#c7b29c;
  box-shadow:0 0 0 2px rgba(65,35,20,.35);
}
.arg-pan.is-shaking { animation:arg-shake .42s ease-in-out; }
.arg-pan.is-shaking .arg-beans i { animation:arg-bean-jump .34s ease-in-out var(--delay); }
@keyframes arg-shake {
  0%,100%{transform:rotateX(52deg) rotateZ(-2deg) translateX(0)}
  20%{transform:rotateX(52deg) rotateZ(-7deg) translateX(-8px)}
  48%{transform:rotateX(52deg) rotateZ(5deg) translateX(10px)}
  72%{transform:rotateX(52deg) rotateZ(-5deg) translateX(-5px)}
}
@keyframes arg-bean-jump { 0%,100%{margin-top:-6px} 45%{margin-top:-19px} }
.arg-pan-label { position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); font-size:11px; opacity:.52; white-space:nowrap; }
.arg-meter-group { margin-top: 35px; display:grid; gap:8px; }
.arg-meter-row { display:grid; grid-template-columns: 76px 1fr; align-items:center; gap:8px; font-size:12px; }
.arg-meter { height:10px; border-radius:999px; background:#eee7df; overflow:hidden; }
.arg-meter i { display:block; width:0%; height:100%; border-radius:inherit; background:currentColor; transition:width .2s linear; }
.arg-meter-row:nth-child(1) i { color:#98633f; }
.arg-meter-row:nth-child(2) i { color:#b1823d; }
.arg-meter-row:nth-child(3) i { color:#9a3e32; }
.arg-message { min-height:58px; margin:14px 0 12px; padding:11px 12px; border-radius:13px; background:#f5f3ef; border:1px solid rgba(0,0,0,.05); font-size:14px; line-height:1.55; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:650; }
.arg-message[data-kind="danger"] { background:#fff0ed; }
.arg-message[data-kind="warn"] { background:#fff7e8; }
.arg-message[data-kind="good"] { background:#edf7ee; }
.arg-message[data-kind="crack"] { background:#f3ebff; }
.arg-controls { border-top:1px solid var(--arg-line); padding-top:13px; }
.arg-control-title { text-align:center; font-size:13px; font-weight:800; margin-bottom:8px; }
.arg-heat-buttons { display:grid; grid-template-columns: repeat(5, 1fr); gap:5px; }
.arg-app button { appearance:none; border:0; border-radius:12px; font:inherit; font-weight:800; cursor:pointer; touch-action:manipulation; transition:transform .08s ease, opacity .15s ease, background .15s ease; }
.arg-app button:active:not(:disabled) { transform:scale(.97); }
.arg-app button:disabled { opacity:.38; cursor:not-allowed; }
.arg-heat-buttons button { min-width:0; padding:10px 2px; background:#eee9e4; color:#5b4a40; font-size:12px; }
.arg-heat-buttons button.is-active { background:var(--arg-brown-dark); color:#fff; }
.arg-start { width:100%; margin-top:10px; padding:14px 10px; background:#2e6f46; color:#fff; font-size:16px; }
.arg-action-row { display:grid; grid-template-columns: 1.25fr .75fr; gap:8px; margin-top:8px; }
.arg-shake { padding:18px 8px; background:var(--arg-brown); color:#fff; font-size:18px; }
.arg-finish { padding:18px 8px; background:#262626; color:#fff; font-size:15px; }
.arg-events { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.arg-events div { border:1px solid var(--arg-line); border-radius:11px; padding:8px 10px; display:flex; justify-content:space-between; font-size:12px; }
.arg-events strong { font-size:14px; }
.arg-result { margin-top:16px; padding:18px; border-radius:18px; background:var(--arg-cream); text-align:center; }
.arg-result-title { font-size:12px; letter-spacing:.16em; font-weight:900; opacity:.55; }
.arg-score { margin:4px 0 -3px; font-weight:900; line-height:1; }
.arg-score span { font-size:64px; }
.arg-score small { font-size:16px; }
.arg-grade { display:inline-block; margin:8px 0; padding:4px 13px; border-radius:999px; background:var(--arg-brown-dark); color:#fff; font-weight:900; }
.arg-result p { font-size:14px; line-height:1.6; margin:9px 0 13px; }
.arg-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.arg-result-grid div { background:#fff; border-radius:11px; padding:9px; }
.arg-result-grid span { display:block; font-size:10px; opacity:.58; }
.arg-result-grid strong { display:block; margin-top:2px; font-size:14px; }
.arg-retry { width:100%; margin-top:12px; padding:13px; background:var(--arg-brown); color:#fff; }
@media (max-width: 420px) {
  .arg-card { padding:13px; border-radius:18px; }
  .arg-hud { gap:5px; }
  .arg-stat strong { font-size:16px; }
  .arg-stat span { font-size:10px; }
  .arg-roaster { width:88vw; max-width:370px; }
  .arg-beans i { width:16px; height:11px; }
  .arg-message { font-size:13px; min-height:54px; }
}

/* Ver.0.5: simple roaster scene + larger finished beans with no plate */
.arg-burner { left:50%; bottom:7%; width:58%; height:24%; background:transparent; box-shadow:none; }
.arg-burner::before,.arg-burner::after { display:none; }
.arg-flame-ring { top:54%; width:84%; height:68%; }
.arg-pan { top:0%; }
.arg-beans { inset:4% 5% 6%; }
.arg-beans i { width:17px; height:12px; margin:-6px -8px; }
.arg-pan-label { display:none; }

.arg-finished-display {
  position:absolute; inset:5% 4% 8%; display:none; z-index:8;
  background:transparent; box-shadow:none; border:0;
}
.arg-finished-beans { position:absolute; inset:5% 4% 8%; }
.arg-finished-beans i {
  position:absolute; left:var(--px); top:var(--py);
  width:25px; height:17px; margin:-8px -12px;
  border-radius:55% 45% 52% 48%; transform:rotate(var(--pr));
  box-shadow:inset -4px -4px 5px rgba(0,0,0,.34), inset 3px 3px 3px rgba(255,255,255,.12), 0 3px 5px rgba(0,0,0,.18);
}
.arg-finished-beans i::after {
  content:""; position:absolute; left:47%; top:10%; width:1.5px; height:80%;
  background:rgba(35,20,10,.48); transform:rotate(8deg);
}
.arg-roaster.is-finished .arg-pan,
.arg-roaster.is-finished .arg-burner { display:none; }
.arg-roaster.is-finished .arg-finished-display { display:block; animation:arg-beans-in .32s ease-out both; }
@keyframes arg-beans-in { from{opacity:0; transform:scale(.88)} to{opacity:1; transform:scale(1)} }

@media (max-width:420px) {
  .arg-beans i { width:14px; height:10px; margin:-5px -7px; }
  .arg-finished-beans i { width:21px; height:15px; margin:-7px -10px; }
}


/* Ver.0.6: simplified roasting pan and individual flames */
.arg-roaster { perspective:none; }
.arg-burner { left:50%; bottom:3%; width:48%; height:22%; transform:translateX(-50%); z-index:1; }
.arg-flame-ring {
  left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%); border-radius:0;
  background:none; filter:none; opacity:0; display:flex; align-items:flex-end; justify-content:space-evenly;
}
.arg-flame-ring::before {
  content:"🔥  🔥  🔥  🔥"; white-space:pre; font-size:32px; line-height:1;
  color:#238cff; filter:hue-rotate(165deg) saturate(1.7) drop-shadow(0 3px 5px rgba(20,120,255,.28));
  transform:scaleY(.7); transform-origin:center bottom;
}
.arg-roaster[data-heat="1"] .arg-flame-ring { opacity:.58; transform:translate(-50%,-50%); filter:none; }
.arg-roaster[data-heat="2"] .arg-flame-ring { opacity:.72; transform:translate(-50%,-50%); filter:none; }
.arg-roaster[data-heat="3"] .arg-flame-ring { opacity:.88; transform:translate(-50%,-50%); filter:none; }
.arg-roaster[data-heat="4"] .arg-flame-ring { opacity:1; transform:translate(-50%,-50%); filter:none; }
.arg-roaster[data-heat="1"] .arg-flame-ring::before { transform:scale(.72,.62); }
.arg-roaster[data-heat="2"] .arg-flame-ring::before { transform:scale(.84,.78); }
.arg-roaster[data-heat="3"] .arg-flame-ring::before { transform:scale(.94,.94); }
.arg-roaster[data-heat="4"] .arg-flame-ring::before { transform:scale(1.05,1.12); }
.arg-pan { left:7%; top:8%; width:76%; height:62%; transform:none; transform-origin:50% 50%; }
.arg-pan-wall {
  inset:0; border-radius:50% / 34%;
  background:linear-gradient(180deg,#dedede 0 12%,#f8f8f8 13% 50%,#d6d6d6 100%);
  border:2px solid #777; box-shadow:0 7px 10px rgba(0,0,0,.12);
}
.arg-pan-wall::after {
  left:0; right:0; bottom:-23%; height:55%; border-radius:0 0 48% 48% / 0 0 45% 45%;
  background:linear-gradient(180deg,#fafafa,#e9e9e9); border:2px solid #888; border-top:0;
  box-shadow:none;
}
.arg-pan-bed { inset:4% 3% 20%; border-radius:50%; background:#70665d; box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 2px #666; overflow:hidden; }
.arg-mesh { opacity:.58; background-size:8px 8px; }
.arg-handle { left:96%; top:38%; width:50%; height:19%; transform:none; }
.arg-handle::before { left:-12%; top:30%; width:25%; height:40%; }
.arg-pan.is-shaking { animation:arg-simple-shake .42s ease-in-out; }
@keyframes arg-simple-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px) rotate(-2deg)} 50%{transform:translateX(12px) rotate(2deg)} 75%{transform:translateX(-5px) rotate(-1deg)} }
@media(max-width:420px){ .arg-flame-ring::before{font-size:26px} }

/* Ver.0.7: clean silver pan interior and regular fine mesh */
.arg-pan-bed {
  inset: 4% 3% 20%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 48% 36%, #f2f3f3 0 56%, #d9dcde 76%, #bcc1c4 100%);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(70,75,78,.16),
    0 0 0 2px #85898c;
  overflow: hidden;
}
.arg-mesh {
  opacity: .72;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 6px,
      rgba(78,84,88,.38) 6px 7px),
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(78,84,88,.38) 6px 7px);
  background-size: auto;
  box-shadow: inset 0 0 0 1px rgba(90,95,98,.35);
}
/* Keep beans visually above the metal base but below the mesh lid. */
.arg-beans { z-index: 3; }
.arg-mesh { z-index: 4; }


/* Ver.0.8: retro Famicom-inspired roaster visual */
.arg-roaster {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Chunkier, game-like metal body with hard edges instead of photoreal gradients. */
.arg-pan {
  left: 7%;
  top: 8%;
  width: 76%;
  height: 62%;
}
.arg-pan-wall {
  border-radius: 48% / 31%;
  background: #d8d8d8;
  border: 4px solid #292929;
  box-shadow:
    inset 0 7px 0 #f7f7f7,
    inset 0 -7px 0 #9e9e9e,
    7px 8px 0 rgba(70,49,35,.15);
}
.arg-pan-wall::after {
  left: -4px;
  right: -4px;
  bottom: -24%;
  height: 57%;
  border-radius: 0 0 46% 46% / 0 0 38% 38%;
  background: #ececec;
  border: 4px solid #292929;
  border-top: 0;
  box-shadow: inset 0 -8px 0 #b8b8b8;
}
.arg-pan-bed {
  inset: 5% 4% 20%;
  border-radius: 50%;
  background: #c7c9c8;
  border: 3px solid #242424;
  box-shadow: inset 0 -4px 0 #8d9190;
}

/* Simple regular pixel-like wire mesh. */
.arg-mesh {
  opacity: .85;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 7px,
      #555 7px 9px),
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      #555 7px 9px);
  background-size: auto;
  box-shadow: none;
}

/* Beans get a thick outline and a stepped shadow, closer to sprite art. */
.arg-beans i {
  width: 18px;
  height: 13px;
  margin: -6px -9px;
  border: 2px solid #292116;
  border-radius: 45% 55% 44% 56%;
  box-shadow:
    inset -3px -2px 0 rgba(35,25,12,.26),
    2px 2px 0 rgba(31,22,13,.22);
}
.arg-beans i::after {
  left: 45%;
  top: 16%;
  width: 2px;
  height: 68%;
  background: rgba(38,28,14,.55);
}

/* Rectangular wooden sprite-style handle. */
.arg-handle {
  left: 96%;
  top: 38%;
  width: 50%;
  height: 19%;
}
.arg-handle::before {
  left: -12%;
  top: 28%;
  width: 26%;
  height: 44%;
  border: 3px solid #292929;
  border-radius: 0;
  background: #9d9d9d;
  box-shadow: inset 0 3px 0 #e5e5e5;
}
.arg-handle span {
  left: 11%;
  top: 5%;
  width: 89%;
  height: 90%;
  border: 4px solid #2d1b10;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 6px,
      rgba(55,25,8,.18) 6px 8px),
    #8b4b20;
  box-shadow:
    inset 0 5px 0 #b96d34,
    inset 0 -5px 0 #5a2e16,
    5px 5px 0 rgba(55,35,20,.14);
}
.arg-handle span::after {
  width: 8px;
  height: 8px;
  border: 2px solid #2d1b10;
  background: #f1e8d8;
  box-shadow: none;
}

/* Four discrete pixel flames. Heat changes height and brightness. */
.arg-burner {
  left: 46%;
  bottom: 1%;
  width: 45%;
  height: 24%;
}
.arg-flame-ring {
  display: block;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%);
  opacity: 0;
  filter: none !important;
  background: none;
}
.arg-flame-ring::before,
.arg-flame-ring::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 11%;
  width: 20px;
  height: 28px;
  transform: none;
  transform-origin: center bottom;
  clip-path: polygon(40% 0, 70% 24%, 100% 54%, 92% 82%, 70% 100%, 28% 100%, 8% 80%, 0 55%, 18% 31%);
}
.arg-flame-ring::before {
  background: #0877ff;
  box-shadow:
    49px 0 0 #0877ff,
    98px 0 0 #0877ff,
    147px 0 0 #0877ff;
}
.arg-flame-ring::after {
  left: 16%;
  bottom: 12%;
  width: 10px;
  height: 15px;
  background: #bdf5ff;
  box-shadow:
    49px 0 0 #bdf5ff,
    98px 0 0 #bdf5ff,
    147px 0 0 #bdf5ff;
}
.arg-roaster[data-heat="1"] .arg-flame-ring { opacity: .64; }
.arg-roaster[data-heat="2"] .arg-flame-ring { opacity: .78; }
.arg-roaster[data-heat="3"] .arg-flame-ring { opacity: .92; }
.arg-roaster[data-heat="4"] .arg-flame-ring { opacity: 1; }
.arg-roaster[data-heat="1"] .arg-flame-ring::before { transform: scaleY(.55); }
.arg-roaster[data-heat="1"] .arg-flame-ring::after  { transform: scaleY(.48); }
.arg-roaster[data-heat="2"] .arg-flame-ring::before { transform: scaleY(.75); }
.arg-roaster[data-heat="2"] .arg-flame-ring::after  { transform: scaleY(.68); }
.arg-roaster[data-heat="3"] .arg-flame-ring::before { transform: scaleY(.95); }
.arg-roaster[data-heat="3"] .arg-flame-ring::after  { transform: scaleY(.88); }
.arg-roaster[data-heat="4"] .arg-flame-ring::before { transform: scaleY(1.18); }
.arg-roaster[data-heat="4"] .arg-flame-ring::after  { transform: scaleY(1.08); }

/* Slight retro treatment for the HUD without sacrificing smartphone readability. */
.arg-stat,
.arg-message,
.arg-events div,
.arg-result-grid div {
  border-radius: 3px;
  border: 2px solid rgba(73,49,32,.34);
  box-shadow: 3px 3px 0 rgba(74,49,32,.08);
}
.arg-heat-buttons button,
.arg-start,
.arg-shake,
.arg-finish,
.arg-retry {
  border-radius: 3px;
  border: 2px solid rgba(39,28,22,.48);
  box-shadow: 3px 3px 0 rgba(45,29,20,.18);
}
.arg-app button:active:not(:disabled) {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 rgba(45,29,20,.18);
}

/* Finished beans also use the same sprite-like treatment. */
.arg-finished-beans i {
  border: 2px solid #2b1d13;
  border-radius: 45% 55% 44% 56%;
  box-shadow:
    inset -4px -3px 0 rgba(35,20,10,.28),
    3px 3px 0 rgba(31,20,12,.18);
}
.arg-finished-beans i::after {
  width: 2px;
  background: rgba(35,20,10,.62);
}

@media (max-width: 420px) {
  .arg-pan-wall,
  .arg-pan-wall::after { border-width: 3px; }
  .arg-pan-bed { border-width: 2px; }
  .arg-mesh {
    background-image:
      repeating-linear-gradient(0deg, transparent 0 6px, #555 6px 8px),
      repeating-linear-gradient(90deg, transparent 0 6px, #555 6px 8px);
  }
  .arg-beans i { width: 15px; height: 11px; margin: -5px -7px; border-width: 1.5px; }
  .arg-flame-ring::before { width: 16px; height: 23px; box-shadow: 40px 0 0 #0877ff, 80px 0 0 #0877ff, 120px 0 0 #0877ff; }
  .arg-flame-ring::after { width: 8px; height: 12px; box-shadow: 40px 0 0 #bdf5ff, 80px 0 0 #bdf5ff, 120px 0 0 #bdf5ff; }
}


/* Ver.0.9: stronger Famicom-style roaster, upright beans and four real flame sprites */
.arg-card{
  border:3px solid #2a2018;
  border-radius:4px;
  box-shadow:6px 6px 0 rgba(70,45,24,.16);
}
.arg-header h2{
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Noto Sans Mono CJK JP", monospace;
  letter-spacing:.02em;
  text-shadow:2px 2px 0 rgba(72,37,14,.15);
}
.arg-stat strong,.arg-control-title,.arg-events strong{
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Make the roasting vessel a chunky octagonal game sprite instead of the previous oval pan. */
.arg-pan{
  left:8%; top:9%; width:75%; height:58%;
  image-rendering:pixelated;
  filter:none;
}
.arg-pan-wall{
  inset:10% 0 5%;
  border-radius:0;
  clip-path:polygon(10% 0,90% 0,100% 22%,100% 78%,90% 100%,10% 100%,0 78%,0 22%);
  background:#b9bdbe;
  border:0;
  box-shadow:none;
  outline:none;
}
.arg-pan-wall::before{
  content:"";
  position:absolute;
  inset:5px;
  clip-path:inherit;
  background:#e7e8e8;
  box-shadow:inset 0 -10px 0 #8b9092,inset 0 6px 0 #fff;
}
.arg-pan-wall::after{
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  left:0;right:0;bottom:0;
  border:0;
  border-radius:0;
  background:
    linear-gradient(#262626,#262626) 12% 35%/5px 5px no-repeat,
    linear-gradient(#262626,#262626) 22% 68%/5px 5px no-repeat,
    linear-gradient(#262626,#262626) 35% 46%/5px 5px no-repeat,
    linear-gradient(#262626,#262626) 64% 67%/5px 5px no-repeat,
    linear-gradient(#262626,#262626) 78% 42%/5px 5px no-repeat,
    linear-gradient(#262626,#262626) 89% 64%/5px 5px no-repeat;
  box-shadow:inset 0 0 0 4px #242424;
  pointer-events:none;
}
.arg-pan-bed{
  inset:0 3% 24%;
  border-radius:0;
  clip-path:polygon(9% 0,91% 0,100% 25%,91% 100%,9% 100%,0 25%);
  border:4px solid #222;
  background:#4b4d4d;
  box-shadow:inset 0 0 0 5px #979b9c;
  overflow:hidden;
}
.arg-mesh{
  opacity:.98;
  background-color:#303232;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 8px,#bfc4c5 8px 10px),
    repeating-linear-gradient(90deg,transparent 0 8px,#bfc4c5 8px 10px);
  box-shadow:inset 0 0 0 4px #dedede;
}

/* Upright pixel beans: vertical groove, only a small amount of random tilt. */
.arg-beans{inset:8% 8% 10%;}
.arg-beans i{
  width:15px;height:20px;margin:-10px -7px;
  border:2px solid #242014;
  border-radius:45% 45% 42% 42%;
  box-shadow:inset -3px -2px 0 rgba(30,23,9,.28),inset 2px 2px 0 rgba(255,255,210,.18),2px 2px 0 rgba(25,18,9,.30);
  transform:rotate(var(--r));
}
.arg-beans i::after{
  left:46%;top:14%;width:2px;height:72%;
  transform:none;
  background:#332716;
  box-shadow:1px 0 0 rgba(255,255,210,.10);
}

/* New handle: short steel neck + blocky wooden grip. */
.arg-handle{left:94%;top:36%;width:51%;height:22%;transform:none;}
.arg-handle::before{
  left:-12%;top:31%;width:26%;height:38%;
  border:3px solid #252525;border-radius:0;
  background:#969a9b;box-shadow:inset 0 3px 0 #e6e7e7,inset 0 -3px 0 #555;
}
.arg-handle span{
  left:10%;top:4%;width:90%;height:92%;
  border:4px solid #28180e;border-radius:2px;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(55,27,8,.28) 5px 7px),
    repeating-linear-gradient(90deg,#a45d2b 0 12px,#87451f 12px 24px);
  box-shadow:inset 0 5px 0 #c57639,inset 0 -5px 0 #562b16,4px 4px 0 rgba(50,30,15,.20);
}
.arg-handle span::after{width:8px;height:8px;border:2px solid #24160e;background:#efe5cd;box-shadow:none;}

/* Four independent flame sprites. */
.arg-burner{left:44%;bottom:0;width:48%;height:25%;transform:translateX(-50%);}
.arg-flame-ring{
  left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);
  display:flex;justify-content:space-around;align-items:flex-end;gap:8px;
  opacity:0;background:none;filter:none!important;
}
.arg-flame-ring::before,.arg-flame-ring::after{display:none!important;content:none!important;}
.arg-pixel-flame{
  position:relative;display:block;width:22px;height:30px;
  background:#0c65dc;
  clip-path:polygon(45% 0,65% 22%,82% 35%,100% 57%,90% 82%,70% 100%,30% 100%,10% 82%,0 57%,20% 34%);
  box-shadow:none;
  transform-origin:center bottom;
}
.arg-pixel-flame::before{
  content:"";position:absolute;left:5px;right:5px;bottom:3px;height:17px;
  background:#35b9ff;
  clip-path:polygon(50% 0,72% 28%,100% 58%,82% 100%,18% 100%,0 58%,30% 30%);
}
.arg-pixel-flame::after{
  content:"";position:absolute;left:8px;right:8px;bottom:3px;height:9px;
  background:#fff1a8;
  clip-path:polygon(50% 0,100% 60%,75% 100%,25% 100%,0 60%);
}
.arg-roaster[data-heat="1"] .arg-flame-ring{opacity:.68}.arg-roaster[data-heat="1"] .arg-pixel-flame{transform:scaleY(.52)}
.arg-roaster[data-heat="2"] .arg-flame-ring{opacity:.82}.arg-roaster[data-heat="2"] .arg-pixel-flame{transform:scaleY(.72)}
.arg-roaster[data-heat="3"] .arg-flame-ring{opacity:.94}.arg-roaster[data-heat="3"] .arg-pixel-flame{transform:scaleY(.94)}
.arg-roaster[data-heat="4"] .arg-flame-ring{opacity:1}.arg-roaster[data-heat="4"] .arg-pixel-flame{transform:scaleY(1.18)}

/* Finished beans keep the vertical center groove too. */
.arg-finished-beans i{
  width:22px;height:29px;margin:-14px -11px;
  border-radius:45% 45% 42% 42%;
}
.arg-finished-beans i::after{
  left:46%;top:12%;width:2px;height:76%;transform:none;
}

@media(max-width:420px){
  .arg-pan{left:8%;width:73%;top:10%;}
  .arg-pan-bed{border-width:3px;}
  .arg-beans i{width:13px;height:17px;margin:-8px -6px;border-width:1.5px;}
  .arg-burner{width:51%;}
  .arg-pixel-flame{width:18px;height:25px;}
  .arg-pixel-flame::before{left:4px;right:4px;height:14px;}
  .arg-pixel-flame::after{left:7px;right:7px;height:8px;}
  .arg-finished-beans i{width:19px;height:25px;margin:-12px -9px;}
}


/* Ver.1.0: stronger classic JRPG / Famicom pixel look + visible roasting beans */
.arg-app{
  --arg-ink:#15110d;
  --arg-paper:#f6ecd8;
  --arg-brown:#6f3510;
  --arg-gold:#c2791e;
  --arg-blue:#1e66a8;
  --arg-red:#b9231d;
  font-family: ui-monospace, "MS Gothic", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace;
}
.arg-card{
  background:#fbf4e6;
  border:4px solid var(--arg-ink);
  border-radius:0;
  box-shadow:
    0 0 0 3px #e4d1aa,
    7px 7px 0 rgba(44,29,17,.18);
}
.arg-header{
  margin:-10px -10px 12px;
  padding:12px 12px 10px;
  background:#111;
  border-bottom:4px solid #5a3215;
  color:#fff;
  text-align:center;
}
.arg-header .arg-kicker{
  color:#ded2bd;
  letter-spacing:.22em;
  font-size:10px;
  font-weight:800;
}
.arg-header h2{
  margin:2px 0 4px;
  font-family:inherit;
  color:#fff;
  text-shadow:3px 3px 0 #5d3517;
  letter-spacing:.01em;
}
.arg-header p{ color:#2a2118; background:#f6ecd8; margin:10px -12px -10px; padding:9px 6px; border-top:3px solid #1b1510; }
.arg-hud{ gap:7px; }
.arg-stat{
  background:#f8eedb;
  border:3px solid #17130f;
  border-radius:0;
  box-shadow:3px 3px 0 #c7b58f;
}
.arg-stat span{font-weight:800;color:#4b2d17}
.arg-stat strong{font-family:inherit;font-weight:900;letter-spacing:.02em;color:#080808}

/* Roaster sprite: squared, chunky, and intentionally low-resolution. */
.arg-roaster{
  height:275px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.arg-pan{
  left:7%; top:8%; width:77%; height:60%;
  image-rendering:pixelated;
}
.arg-pan-wall{
  inset:11% 0 3%;
  clip-path:polygon(10% 0,90% 0,100% 20%,100% 80%,90% 100%,10% 100%,0 80%,0 20%);
  background:#85898b;
  box-shadow:inset 0 0 0 4px #222, inset 0 8px 0 #d8dadb, inset 0 -9px 0 #555a5c;
}
.arg-pan-wall::before{
  inset:8px;
  background:#b9bdbe;
  box-shadow:inset 0 5px 0 #e8e9e9,inset 0 -7px 0 #74797b;
}
.arg-pan-wall::after{
  box-shadow:inset 0 0 0 4px #171717;
  background:
    linear-gradient(#252525,#252525) 10% 43%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 20% 68%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 31% 47%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 42% 71%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 58% 51%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 70% 70%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 83% 45%/5px 5px no-repeat,
    linear-gradient(#252525,#252525) 91% 66%/5px 5px no-repeat;
}
.arg-pan-bed{
  inset:0 3% 26%;
  clip-path:polygon(9% 0,91% 0,100% 22%,92% 100%,8% 100%,0 22%);
  border:4px solid #191919;
  border-radius:0;
  background:#343737;
  box-shadow:inset 0 0 0 5px #8b9092;
  overflow:hidden;
}
/* Critical fix: old mesh had an almost opaque background, which covered every bean. */
.arg-mesh{
  z-index:7;
  opacity:.48;
  background-color:transparent!important;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 7px,#cfd2d2 7px 9px),
    repeating-linear-gradient(90deg,transparent 0 7px,#cfd2d2 7px 9px);
  box-shadow:inset 0 0 0 3px #d9dada;
  pointer-events:none;
}
.arg-beans{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:6!important;
  inset:7% 7% 9%;
}
.arg-beans i{
  display:block!important;
  opacity:1!important;
  width:14px;height:20px;margin:-10px -7px;
  border:2px solid #17140a;
  border-radius:42% 42% 45% 45%;
  box-shadow:
    inset -3px -3px 0 rgba(20,15,4,.34),
    inset 3px 2px 0 rgba(255,255,205,.16),
    2px 2px 0 #1f190d;
  image-rendering:pixelated;
}
.arg-beans i::after{
  left:44%;top:13%;width:3px;height:74%;
  background:#2e2413;
  box-shadow:1px 0 0 rgba(255,240,178,.14);
}
.arg-handle{left:95%;top:34%;width:52%;height:24%}
.arg-handle::before{border:3px solid #171717;background:#818687;box-shadow:inset 0 4px 0 #d7d9da,inset 0 -4px 0 #4b4e50}
.arg-handle span{
  border:4px solid #211209;
  border-radius:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(62,29,7,.38) 5px 7px),
    repeating-linear-gradient(90deg,#9d5425 0 10px,#773a17 10px 20px);
  box-shadow:inset 0 5px 0 #c27639,inset 0 -5px 0 #4d240f,4px 4px 0 rgba(34,20,10,.3);
}

/* Four independent chunky flames; all four always exist and scale with heat. */
.arg-burner{left:44%;bottom:-1%;width:50%;height:27%;}
.arg-flame-ring{
  display:grid!important;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:end;
  justify-items:center;
  opacity:0;
  width:100%;height:100%;
}
.arg-pixel-flame{
  display:block!important;
  position:relative;
  width:24px;height:34px;
  background:#064fc5;
  clip-path:polygon(42% 0,58% 0,58% 17%,75% 17%,75% 33%,91% 33%,91% 50%,100% 50%,100% 75%,83% 75%,83% 92%,67% 92%,67% 100%,33% 100%,33% 92%,17% 92%,17% 75%,0 75%,0 50%,9% 50%,9% 33%,25% 33%,25% 17%,42% 17%);
  transform-origin:center bottom;
  image-rendering:pixelated;
}
.arg-pixel-flame::before{
  left:5px;right:5px;bottom:3px;height:20px;
  background:#1fc6ff;
  clip-path:polygon(40% 0,60% 0,60% 20%,80% 20%,80% 40%,100% 40%,100% 70%,80% 70%,80% 100%,20% 100%,20% 70%,0 70%,0 40%,20% 40%,20% 20%,40% 20%);
}
.arg-pixel-flame::after{
  left:9px;right:9px;bottom:3px;height:10px;
  background:#ffe178;
  clip-path:polygon(33% 0,67% 0,67% 30%,100% 30%,100% 80%,67% 80%,67% 100%,33% 100%,33% 80%,0 80%,0 30%,33% 30%);
}
.arg-roaster[data-heat="1"] .arg-flame-ring{opacity:.62}.arg-roaster[data-heat="1"] .arg-pixel-flame{transform:scaleY(.48)}
.arg-roaster[data-heat="2"] .arg-flame-ring{opacity:.80}.arg-roaster[data-heat="2"] .arg-pixel-flame{transform:scaleY(.68)}
.arg-roaster[data-heat="3"] .arg-flame-ring{opacity:.95}.arg-roaster[data-heat="3"] .arg-pixel-flame{transform:scaleY(.92)}
.arg-roaster[data-heat="4"] .arg-flame-ring{opacity:1}.arg-roaster[data-heat="4"] .arg-pixel-flame{transform:scaleY(1.16)}

/* Classic RPG-like square meters, messages and buttons. */
.arg-meter-group{gap:7px;margin-top:28px}
.arg-meter-row{font-weight:900}
.arg-meter{height:12px;border:3px solid #17130f;border-radius:0;background:#f7eedc}
.arg-meter i{border-radius:0;transition:width .12s steps(8,end)}
.arg-message{
  border:3px solid #17130f;
  border-radius:0;
  background:#fff9ea;
  box-shadow:3px 3px 0 #c7b58f;
  font-weight:900;
}
.arg-controls{border-top:3px solid #17130f;padding-top:10px}
.arg-heat-buttons button,
.arg-start,.arg-shake,.arg-finish,.arg-retry{
  border:3px solid #17130f!important;
  border-radius:0!important;
  box-shadow:3px 3px 0 #6b5a44!important;
  font-family:inherit!important;
  font-weight:900!important;
  text-shadow:none!important;
}
.arg-heat-buttons button.is-active{outline:3px solid #fff4ca;outline-offset:-6px}
.arg-events>div,.arg-result{
  border:3px solid #17130f;
  border-radius:0;
  box-shadow:3px 3px 0 #c7b58f;
}
.arg-result-title,.arg-grade{font-family:inherit;font-weight:900;letter-spacing:.08em}

/* Finished beans: same vertical groove and chunkier sprite. */
.arg-finished-beans i{
  width:23px;height:30px;margin:-15px -11px;
  border:2px solid #17120b;
  border-radius:42% 42% 45% 45%;
  box-shadow:inset -4px -3px 0 rgba(20,10,4,.35),2px 2px 0 #21140c;
}
.arg-finished-beans i::after{left:44%;top:12%;width:3px;height:76%;background:#2a170d}

@media(max-width:420px){
  .arg-card{border-width:3px;box-shadow:4px 4px 0 rgba(44,29,17,.16)}
  .arg-header{margin:-10px -10px 10px}
  .arg-roaster{height:250px}
  .arg-pan{left:7%;top:9%;width:75%}
  .arg-pan-bed{border-width:3px}
  .arg-mesh{background-image:repeating-linear-gradient(0deg,transparent 0 6px,#d2d5d5 6px 8px),repeating-linear-gradient(90deg,transparent 0 6px,#d2d5d5 6px 8px)}
  .arg-beans i{width:12px;height:17px;margin:-8px -6px;border-width:1px}
  .arg-burner{width:51%}
  .arg-flame-ring{gap:10px}
  .arg-pixel-flame{width:19px;height:28px}
  .arg-meter{height:10px;border-width:2px}
}


/* Ver.1.1 — round roaster, larger/closer flames, randomly oriented beans */
.arg-roaster{
  height:270px;
}
.arg-pan{
  left:5%;
  top:5%;
  width:80%;
  height:66%;
  transform:rotateX(50deg) rotateZ(0deg);
  transform-origin:50% 82%;
}
.arg-pan-wall{
  inset:0;
  clip-path:none;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#e9e9e6 0 48%,#b9b9b5 49% 57%,#70716f 58% 67%,#30312f 68% 100%);
  box-shadow:inset 0 0 0 4px #181818,inset 0 7px 0 rgba(255,255,255,.7),inset 0 -15px 0 rgba(48,48,46,.58),0 8px 0 #4b4c49;
}
.arg-pan-wall::before{
  content:"";
  position:absolute;
  left:5%;right:5%;top:7%;bottom:18%;
  border-radius:50%;
  border:4px solid #d8d8d3;
  box-shadow:0 0 0 3px #222;
  background:transparent;
}
.arg-pan-wall::after{
  content:"";
  position:absolute;
  left:5%;right:5%;bottom:-8%;height:34%;
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#999a96 0,#c9c9c5 28%,#71726e 70%,#373835 100%);
  box-shadow:inset 0 -4px 0 #20211f,0 5px 0 rgba(0,0,0,.18);
  z-index:-1;
}
.arg-pan-bed{
  inset:8% 6% 19%;
  clip-path:none;
  border-radius:50%;
  border:4px solid #171717;
  background:#303330;
  box-shadow:inset 0 0 0 4px #8b8e89;
}
.arg-mesh{
  border-radius:50%;
  opacity:.52;
  background-color:transparent!important;
  background-image:repeating-linear-gradient(0deg,transparent 0 7px,#cfd2d2 7px 9px),repeating-linear-gradient(90deg,transparent 0 7px,#cfd2d2 7px 9px);
}
.arg-beans{inset:8% 8% 10%;}
.arg-beans i{
  width:15px;height:20px;margin:-10px -7px;
  transform:rotate(var(--r));
}
.arg-handle{left:92%;top:43%;width:55%;height:21%;}

/* Bring the four flames right under the pan and make them much larger. */
.arg-burner{
  left:45%;
  bottom:8%;
  width:62%;
  height:35%;
  background:none!important;
  box-shadow:none!important;
}
.arg-burner::before,.arg-burner::after{display:none!important;}
.arg-flame-ring{
  top:50%;
  width:100%;height:100%;
  gap:10px;
  align-items:start;
}
.arg-pixel-flame{width:38px;height:55px;}
.arg-pixel-flame::before{left:7px;right:7px;bottom:4px;height:34px;}
.arg-pixel-flame::after{left:14px;right:14px;bottom:4px;height:18px;}
.arg-roaster[data-heat="1"] .arg-pixel-flame{transform:scaleY(.48) scaleX(.82)}
.arg-roaster[data-heat="2"] .arg-pixel-flame{transform:scaleY(.68) scaleX(.90)}
.arg-roaster[data-heat="3"] .arg-pixel-flame{transform:scaleY(.90) scaleX(1)}
.arg-roaster[data-heat="4"] .arg-pixel-flame{transform:scaleY(1.08) scaleX(1.08)}

@keyframes arg-shake{
  0%,100%{transform:rotateX(50deg) rotateZ(0deg) translateX(0)}
  20%{transform:rotateX(50deg) rotateZ(-6deg) translateX(-8px)}
  48%{transform:rotateX(50deg) rotateZ(5deg) translateX(10px)}
  72%{transform:rotateX(50deg) rotateZ(-4deg) translateX(-5px)}
}
@media(max-width:420px){
  .arg-roaster{height:250px}
  .arg-pan{left:4%;top:6%;width:81%;height:64%}
  .arg-handle{left:91%;top:43%;width:53%}
  .arg-burner{left:44%;bottom:8%;width:64%;height:34%}
  .arg-flame-ring{gap:7px}
  .arg-pixel-flame{width:31px;height:46px}
  .arg-pixel-flame::before{left:6px;right:6px;height:28px}
  .arg-pixel-flame::after{left:11px;right:11px;height:15px}
}


/* Ver.1.2 — deeper round pan, clean rear edge, non-penetrating handle, 4-level controls */
/* Keep the Famicom/RPG look, but make the roaster read as a real round pan with depth. */
.arg-pan{
  left:5%;
  top:3%;
  width:80%;
  height:68%;
  transform:rotateX(50deg) rotateZ(0deg);
  transform-origin:50% 78%;
}
/* The wall is now mainly the lower cylinder. This removes the unwanted iron band behind the upper rim. */
.arg-pan-wall{
  left:0; right:0; top:31%; bottom:-7%;
  border-radius:0 0 48% 48% / 0 0 34% 34%;
  background:
    linear-gradient(90deg,#4b4a47 0%,#777773 11%,#bab9b3 30%,#e1e0da 50%,#aaa9a4 72%,#656561 90%,#3d3c39 100%);
  border:4px solid #171717;
  border-top:0;
  box-shadow:
    inset 0 -9px 0 #3a3a37,
    inset 0 7px 0 rgba(255,255,255,.18),
    0 8px 0 #1b1b1a;
  z-index:2;
}
.arg-pan-wall::before{display:none!important;content:none!important;}
.arg-pan-wall::after{
  content:"";
  position:absolute;
  left:4%;right:4%;bottom:-11%;height:25%;
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#7c7c78 0,#aaa9a4 35%,#51514e 72%,#252524 100%);
  box-shadow:inset 0 -4px 0 #151515;
  z-index:-1;
}
/* Mesh/beans form the top ellipse; no metal strip is drawn behind it. */
.arg-pan-bed{
  left:3%;right:3%;top:2%;bottom:31%;
  border-radius:50%;
  border:4px solid #171717;
  background:#171915;
  box-shadow:
    0 0 0 3px #deddd7,
    0 0 0 6px #555550,
    inset 0 0 0 3px #73736e;
  z-index:4;
}
.arg-mesh{z-index:5;opacity:.62;}
.arg-beans{z-index:6;}
/* Handle is behind the pan at the joint, so the steel neck cannot appear through the bean area. */
.arg-handle{
  left:98%;
  top:42%;
  width:53%;
  height:22%;
  z-index:1;
}
.arg-handle::before{
  left:-10%;
  top:31%;
  width:17%;
  height:38%;
  border:3px solid #171717;
  background:linear-gradient(180deg,#d8d8d4,#777874 48%,#41423f 100%);
  box-shadow:inset 0 3px 0 #f1f1ec;
}
.arg-handle span{
  left:4%;
  top:5%;
  width:96%;
  height:90%;
}
/* Remove the old weak-fire slot: OFF / 中弱 / 中強 / 強. */
.arg-heat-buttons{grid-template-columns:repeat(4,1fr)!important;}
/* Temperature number and ℃ use exactly the same size/baseline. */
.arg-stat strong:has([data-temp]){
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  font-size:18px;
  line-height:1.2;
}
.arg-stat strong:has([data-temp]) > span,
.arg-stat strong:has([data-temp]){
  font-size:18px!important;
}
/* Three event times on the final row. */
.arg-events{grid-template-columns:repeat(3,1fr)!important;}
.arg-events>div{min-width:0;}

@media(max-width:420px){
  .arg-pan{left:4%;top:4%;width:81%;height:66%;}
  .arg-pan-wall{top:31%;bottom:-8%;}
  .arg-pan-bed{left:3%;right:3%;top:2%;bottom:31%;}
  .arg-handle{left:98%;top:42%;width:50%;height:21%;}
  .arg-events{gap:4px;}
  .arg-events span{font-size:10px;}
  .arg-events strong{font-size:12px;}
}


/* Ver.1.3 — pan geometry cleanup, beans below mesh, flames slightly lower */
.arg-pan-wall{
  left:3%;right:3%;top:31%;bottom:-5%;
  border-radius:0 0 50% 50% / 0 0 38% 38%;
  background:linear-gradient(90deg,#4b4a47 0%,#777773 11%,#bab9b3 30%,#e1e0da 50%,#aaa9a4 72%,#656561 90%,#3d3c39 100%);
  border:4px solid #171717;border-top:0;
  box-shadow:inset 0 -8px 0 #343431,inset 0 6px 0 rgba(255,255,255,.16),0 6px 0 #1b1b1a;
  overflow:hidden;
}
.arg-pan-wall::after{display:none!important;content:none!important;}
.arg-pan-bed{left:3%;right:3%;top:2%;bottom:31%;border-radius:50%;}
/* Beans sit beneath the wire mesh, visually inside the roaster. */
.arg-beans{z-index:5!important;inset:10% 10% 13%;}
.arg-mesh{z-index:7!important;opacity:.66;pointer-events:none;}
/* Handle joint remains behind the pan and cannot penetrate the bean area. */
.arg-handle{left:98%;top:42%;z-index:1;}
.arg-pan-wall,.arg-pan-bed{z-index:4;}
/* Lower flames slightly while retaining their current size. */
.arg-burner{bottom:2%!important;}
@media(max-width:420px){
  .arg-pan-wall{left:3%;right:3%;top:31%;bottom:-5%;}
  .arg-pan-bed{left:3%;right:3%;top:2%;bottom:31%;}
  .arg-beans{inset:10% 10% 13%;}
  .arg-burner{bottom:1%!important;}
}


/* Ver.1.4 — stable shake geometry, lower in-pan beans */
@keyframes arg-shake-v14{
  0%,100%{transform:rotateX(50deg) rotateZ(0deg) translate3d(0,0,0)}
  18%{transform:rotateX(50deg) rotateZ(-3deg) translate3d(-9px,1px,0)}
  38%{transform:rotateX(50deg) rotateZ(3deg) translate3d(9px,-1px,0)}
  58%{transform:rotateX(50deg) rotateZ(-2deg) translate3d(-7px,1px,0)}
  78%{transform:rotateX(50deg) rotateZ(2deg) translate3d(6px,0,0)}
}
.arg-pan.is-shaking{
  animation:arg-shake-v14 .42s steps(5,end)!important;
  transform-origin:50% 78%!important;
}
/* Move beans deeper/lower inside the mesh opening. */
.arg-beans{
  z-index:5!important;
  inset:15% 10% 7%!important;
}
.arg-mesh{z-index:7!important;}
@media(max-width:420px){
  .arg-beans{inset:15% 10% 7%!important;}
}

.arg-finished-beans i{
  transform:rotate(var(--pr)) scale(var(--ps,1))!important;
}


/* Ver.1.5 — beans lower inside pan + diagonal mesh */
.arg-beans{
  z-index:5!important;
  inset:22% 10% 3%!important;
}

/* Replace vertical/horizontal grid with diagonal diamond mesh. */
.arg-mesh{
  z-index:7!important;
  opacity:.72!important;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 8px,
      rgba(225,225,225,.78) 8px 10px,
      transparent 10px 18px),
    repeating-linear-gradient(-45deg,
      transparent 0 8px,
      rgba(225,225,225,.78) 8px 10px,
      transparent 10px 18px)!important;
  background-color:transparent!important;
  pointer-events:none;
}

/* Keep the mesh constrained to the same oval opening. */
.arg-pan-bed{
  overflow:hidden!important;
}

@media(max-width:420px){
  .arg-beans{inset:22% 10% 3%!important;}
  .arg-mesh{
    background:
      repeating-linear-gradient(45deg,
        transparent 0 7px,
        rgba(225,225,225,.78) 7px 9px,
        transparent 9px 16px),
      repeating-linear-gradient(-45deg,
        transparent 0 7px,
        rgba(225,225,225,.78) 7px 9px,
        transparent 9px 16px)!important;
  }
}


/* Ver.2.0 — beans ignite at 250°C */
.arg-roaster.is-burning .arg-beans{
  filter:brightness(.55) saturate(.65);
}
.arg-roaster.is-burning .arg-beans::before,
.arg-roaster.is-burning .arg-beans::after{
  content:"";
  position:absolute;
  z-index:20;
  pointer-events:none;
  left:14%;
  right:14%;
  bottom:18%;
  height:58%;
  background:
    radial-gradient(ellipse at 12% 100%, #ffdd43 0 10%, #ff7a00 11% 23%, #d82b00 24% 34%, transparent 35%),
    radial-gradient(ellipse at 34% 100%, #fff06a 0 11%, #ff8a00 12% 26%, #d72a00 27% 38%, transparent 39%),
    radial-gradient(ellipse at 57% 100%, #ffe24f 0 10%, #ff7300 11% 24%, #c92100 25% 36%, transparent 37%),
    radial-gradient(ellipse at 80% 100%, #fff06a 0 10%, #ff8500 11% 25%, #d42b00 26% 37%, transparent 38%);
  transform-origin:50% 100%;
  animation:arg-bean-fire .22s steps(2,end) infinite alternate;
  filter:drop-shadow(0 0 5px rgba(255,72,0,.8));
}
.arg-roaster.is-burning .arg-beans::after{
  left:24%;
  right:24%;
  bottom:30%;
  height:42%;
  opacity:.85;
  transform:scaleX(.88);
  animation-delay:-.11s;
}
@keyframes arg-bean-fire{
  0%{transform:translateY(1px) scaleY(.88) skewX(-2deg)}
  100%{transform:translateY(-4px) scaleY(1.08) skewX(2deg)}
}
.arg-roaster.is-burning .arg-mesh{
  opacity:.55!important;
}


/* Ver.2.1 — burning beans use the same simple flame language as the gas burner */
.arg-roaster.is-burning .arg-beans::before,
.arg-roaster.is-burning .arg-beans::after{
  content:""!important;
  position:absolute!important;
  z-index:20!important;
  pointer-events:none!important;
  left:12%!important;
  right:12%!important;
  bottom:13%!important;
  height:64%!important;
  opacity:1!important;
  background:
    radial-gradient(ellipse 12% 58% at 12% 100%, #ffd24a 0 22%, #ff8a00 23% 58%, #e84b00 59% 76%, transparent 77%),
    radial-gradient(ellipse 12% 62% at 37% 100%, #ffd24a 0 22%, #ff8a00 23% 58%, #e84b00 59% 76%, transparent 77%),
    radial-gradient(ellipse 12% 60% at 63% 100%, #ffd24a 0 22%, #ff8a00 23% 58%, #e84b00 59% 76%, transparent 77%),
    radial-gradient(ellipse 12% 56% at 88% 100%, #ffd24a 0 22%, #ff8a00 23% 58%, #e84b00 59% 76%, transparent 77%)!important;
  transform-origin:50% 100%!important;
  filter:drop-shadow(0 0 4px rgba(255,110,0,.75))!important;
  animation:arg-bean-gas-fire .20s steps(2,end) infinite alternate!important;
}
.arg-roaster.is-burning .arg-beans::after{
  display:none!important;
}
@keyframes arg-bean-gas-fire{
  0%{transform:translateY(1px) scaleY(.90)}
  100%{transform:translateY(-3px) scaleY(1.08)}
}


/* Ver.2.2 — seven randomized tall bean flames */
.arg-roaster.is-burning .arg-beans::before,
.arg-roaster.is-burning .arg-beans::after{
  display:none!important;
  content:none!important;
}

.arg-bean-fire-layer{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  display:none;
  overflow:visible;
}
.arg-roaster.is-burning .arg-bean-fire-layer{
  display:block;
}

.arg-bean-fire{
  --fx:50%;
  --fy:50%;
  --fs:1;
  --fd:0s;
  position:absolute;
  left:var(--fx);
  top:var(--fy);
  width:28px;
  height:92px;
  transform:translate(-50%,-100%) scale(var(--fs));
  transform-origin:50% 100%;
  animation:arg-tall-bean-fire .22s steps(2,end) infinite alternate;
  animation-delay:var(--fd);
  filter:drop-shadow(0 0 5px rgba(255,110,0,.9));
}
.arg-bean-fire::before,
.arg-bean-fire::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path:polygon(
    50% 0%,
    67% 19%,
    60% 33%,
    79% 51%,
    71% 73%,
    85% 100%,
    15% 100%,
    29% 73%,
    21% 51%,
    40% 33%,
    33% 19%
  );
}
.arg-bean-fire::before{
  background:
    linear-gradient(to top,
      #d93a00 0 16%,
      #ff6a00 17% 48%,
      #ff9a00 49% 74%,
      #ffd24a 75% 100%);
}
.arg-bean-fire::after{
  inset:28% 28% 5%;
  background:linear-gradient(to top,#ff7a00 0 38%,#ffd24a 39% 74%,#fff3a1 75% 100%);
  opacity:.95;
}

@keyframes arg-tall-bean-fire{
  0%{
    transform:translate(-50%,-100%) scale(var(--fs)) scaleY(.88) skewX(-2deg);
  }
  100%{
    transform:translate(-50%,-104%) scale(var(--fs)) scaleY(1.15) skewX(2deg);
  }
}

@media(max-width:420px){
  .arg-bean-fire{
    width:22px;
    height:76px;
  }
}


/* Ver.2.3 — fire constrained to bean area, wider/lower flames, brighter pan interior */

/* Brighter interior so the inside of the roaster is not almost black. */
.arg-pan-bed{
  background:
    radial-gradient(ellipse at 50% 52%, #8f9293 0%, #7b7e80 52%, #66696b 76%, #5b5e60 100%)!important;
}

/* Fire must originate only from the bean-filled oval area. */
.arg-bean-fire-layer{
  left:9%!important;
  right:9%!important;
  top:9%!important;
  bottom:18%!important;
  overflow:hidden!important;
  border-radius:50%!important;
}

/* Wider flames, slightly shorter than Ver.2.2. */
.arg-bean-fire{
  width:42px!important;
  height:68px!important;
  transform:translate(-50%,-100%) scale(var(--fs))!important;
}

/* Broader flame silhouette. */
.arg-bean-fire::before,
.arg-bean-fire::after{
  clip-path:polygon(
    50% 0%,
    69% 16%,
    64% 31%,
    84% 48%,
    76% 69%,
    92% 100%,
    8% 100%,
    24% 69%,
    16% 48%,
    36% 31%,
    31% 16%
  )!important;
}

@keyframes arg-tall-bean-fire{
  0%{
    transform:translate(-50%,-100%) scale(var(--fs)) scaleY(.92) skewX(-2deg);
  }
  100%{
    transform:translate(-50%,-102%) scale(var(--fs)) scaleY(1.05) skewX(2deg);
  }
}

@media(max-width:420px){
  .arg-bean-fire{
    width:34px!important;
    height:58px!important;
  }
  .arg-bean-fire-layer{
    left:10%!important;
    right:10%!important;
    top:10%!important;
    bottom:19%!important;
  }
}


/* Ver.2.4 — red burner-style bean fire, metallic inner gradient, black temperature text */

/* Inner pan: metallic gradient similar to the outer side wall. */
.arg-pan-bed{
  background:
    radial-gradient(ellipse at 50% 42%,
      #e0e0dc 0%,
      #c8c9c6 28%,
      #a6a8a6 52%,
      #858886 72%,
      #676a69 88%,
      #555857 100%)!important;
}

/* Bean-fire remains confined to the bean area. */
.arg-bean-fire-layer{
  left:9%!important;
  right:9%!important;
  top:9%!important;
  bottom:18%!important;
  overflow:hidden!important;
  border-radius:50%!important;
}

/* Match the simple gas-burner flame style, but use red/orange. */
.arg-bean-fire{
  width:38px!important;
  height:62px!important;
  filter:drop-shadow(0 0 4px rgba(220,25,0,.75))!important;
}
.arg-bean-fire::before{
  background:
    linear-gradient(to top,
      #8f0000 0 16%,
      #d41400 17% 48%,
      #f02a00 49% 76%,
      #ff5a18 77% 100%)!important;
}
.arg-bean-fire::after{
  inset:30% 29% 5%!important;
  background:
    linear-gradient(to top,
      #c50000 0 38%,
      #ff2b00 39% 72%,
      #ff7a28 73% 100%)!important;
  opacity:1!important;
}

/* Bean-temperature value, including the number, must be black like the °C mark. */
.arg-temp,
.arg-temp-value,
.arg-temperature,
.arg-temperature-value,
[data-temp],
[data-temperature],
#arg-temp,
#arg-temperature{
  color:#111!important;
}


/* Ver.2.5 — exact bean temperature color */
.arg-stat-value,
.arg-stat-value *,
.arg-temp,
.arg-temp *,
.arg-temp-value,
.arg-temp-value *,
.arg-temperature,
.arg-temperature *,
.arg-temperature-value,
.arg-temperature-value *{
  color:#111!important;
}

/* Bean fire: same simple teardrop language as burner flames, red palette.
   Fire layer is tightly clipped to the central bean/mesh oval. */
.arg-bean-fire-layer{
  left:18%!important;
  right:18%!important;
  top:18%!important;
  bottom:24%!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
.arg-bean-fire{
  width:34px!important;
  height:52px!important;
  filter:drop-shadow(0 0 3px rgba(220,20,0,.65))!important;
}
.arg-bean-fire::before{
  clip-path:polygon(50% 0,68% 27%,82% 51%,78% 73%,66% 91%,50% 100%,34% 91%,22% 73%,18% 51%,32% 27%)!important;
  background:linear-gradient(to top,#9d0000 0 18%,#d71900 19% 56%,#f23a16 57% 100%)!important;
}
.arg-bean-fire::after{
  clip-path:polygon(50% 0,68% 31%,76% 57%,68% 82%,50% 100%,32% 82%,24% 57%,32% 31%)!important;
  inset:31% 28% 6%!important;
  background:linear-gradient(to top,#d20b00 0 30%,#ff3a14 31% 70%,#ff7b39 71% 100%)!important;
}

/* Metallic inner-pan gradient. */
.arg-pan-bed{
  background:radial-gradient(ellipse at 50% 38%,
    #e4e4e0 0%,#c9cac7 30%,#a8aaa8 54%,#858886 74%,#626564 100%)!important;
}

/* Ver.2.5 exact temperature number selector */
.arg-stat [data-temp],
.arg-stat strong [data-temp]{
  color:#111!important;
}


/* Ver.2.6 */

/* Exact temperature number + °C: black. */
.arg-stat strong,
.arg-stat strong [data-temp],
.arg-stat [data-temp]{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
}

/* Burning beans: simple burner-flame silhouette, matching the gas flame language. */
.arg-bean-fire-layer{
  left:20%!important;
  right:20%!important;
  top:22%!important;
  bottom:26%!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
.arg-bean-fire{
  width:30px!important;
  height:48px!important;
  filter:drop-shadow(0 0 3px rgba(210,20,0,.65))!important;
}
.arg-bean-fire::before{
  inset:0!important;
  clip-path:polygon(
    50% 0%,
    64% 24%,
    72% 44%,
    70% 65%,
    61% 84%,
    50% 100%,
    39% 84%,
    30% 65%,
    28% 44%,
    36% 24%
  )!important;
  background:linear-gradient(to top,#8f0000 0 22%,#cf1200 23% 62%,#f04420 63% 100%)!important;
}
.arg-bean-fire::after{
  inset:35% 31% 7%!important;
  clip-path:polygon(
    50% 0%,
    67% 31%,
    72% 58%,
    62% 82%,
    50% 100%,
    38% 82%,
    28% 58%,
    33% 31%
  )!important;
  background:linear-gradient(to top,#d20b00 0 38%,#ff3c16 39% 75%,#ff8b46 76% 100%)!important;
}


/* Ver.2.7 — exact temperature black + red pixel burner-style bean flames */

/* Actual markup is: .arg-stat > strong > span[data-temp] + "℃".
   Force both the number and unit to true black. */
.arg-game .arg-stat:nth-child(2) strong,
.arg-game .arg-stat:nth-child(2) strong span[data-temp],
.arg-game span[data-temp]{
  color:#000!important;
  -webkit-text-fill-color:#000!important;
  text-shadow:none!important;
  opacity:1!important;
}

/* Keep ignition effects inside the bean field. */
.arg-bean-fire-layer{
  left:15%!important;
  right:15%!important;
  top:14%!important;
  bottom:20%!important;
  overflow:hidden!important;
  border-radius:48%!important;
}

/* Pixel-art red version of the gas-burner flame. */
.arg-bean-fire{
  width:24px!important;
  height:38px!important;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 2px rgba(190,0,0,.55))!important;
}
.arg-bean-fire::before{
  inset:0!important;
  clip-path:polygon(
    38% 0%,62% 0%,
    62% 10%,75% 10%,
    75% 22%,87% 22%,
    87% 48%,100% 48%,
    100% 76%,87% 76%,
    87% 90%,75% 90%,
    75% 100%,25% 100%,
    25% 90%,13% 90%,
    13% 76%,0% 76%,
    0% 48%,13% 48%,
    13% 22%,25% 22%,
    25% 10%,38% 10%
  )!important;
  background:#d71900!important;
}
.arg-bean-fire::after{
  inset:34% 29% 8%!important;
  clip-path:polygon(
    36% 0%,64% 0%,
    64% 15%,78% 15%,
    78% 42%,92% 42%,
    92% 72%,78% 72%,
    78% 100%,22% 100%,
    22% 72%,8% 72%,
    8% 42%,22% 42%,
    22% 15%,36% 15%
  )!important;
  background:#ff9a20!important;
}


/* Ver.2.9 — definitive red version of the existing blue pixel burner flame */
.arg-bean-fire-layer{
  left:14%!important;
  right:14%!important;
  top:6%!important;
  bottom:28%!important;
  overflow:visible!important;
  border-radius:0!important;
}
.arg-bean-fire{
  width:22px!important;
  height:31px!important;
  filter:none!important;
  image-rendering:pixelated!important;
  transform:translate(-50%,-100%) scale(var(--fs))!important;
}

/* Outer silhouette: preserve the stepped/pixel gas-flame shape. */
.arg-bean-fire::before{
  inset:0!important;
  clip-path:polygon(
    36% 0%,64% 0%,
    64% 12%,76% 12%,
    76% 25%,88% 25%,
    88% 40%,100% 40%,
    100% 72%,88% 72%,
    88% 88%,76% 88%,
    76% 100%,24% 100%,
    24% 88%,12% 88%,
    12% 72%,0% 72%,
    0% 40%,12% 40%,
    12% 25%,24% 25%,
    24% 12%,36% 12%
  )!important;
  background:#e51b00!important;
}

/* Inner core: same blocky inner-flame placement, red/orange version. */
.arg-bean-fire::after{
  inset:38% 28% 10%!important;
  clip-path:polygon(
    34% 0%,66% 0%,
    66% 18%,82% 18%,
    82% 46%,100% 46%,
    100% 78%,82% 78%,
    82% 100%,18% 100%,
    18% 78%,0% 78%,
    0% 46%,18% 46%,
    18% 18%,34% 18%
  )!important;
  background:#ffd447!important;
}

/* Keep movement tiny so the pixel silhouette itself remains recognizable. */
@keyframes arg-tall-bean-fire{
  0%{transform:translate(-50%,-100%) scale(var(--fs)) translateY(0)}
  100%{transform:translate(-50%,-100%) scale(var(--fs)) translateY(-2px)}
}


/* Ver.3.1 — compact mobile layout so timer and shake button fit closer together */
@media (max-width: 600px){
  .arg-game{
    padding-top:4px!important;
    padding-bottom:6px!important;
  }

  .arg-header{
    margin-bottom:5px!important;
  }

  .arg-subtitle{
    padding-top:4px!important;
    padding-bottom:4px!important;
    margin-bottom:6px!important;
    line-height:1.2!important;
  }

  .arg-stats{
    gap:5px!important;
    margin-bottom:5px!important;
  }

  .arg-stat{
    min-height:46px!important;
    padding:5px 3px!important;
  }

  .arg-visual,
  .arg-roaster-wrap{
    min-height:205px!important;
    height:205px!important;
    margin-top:0!important;
    margin-bottom:2px!important;
  }

  .arg-roaster{
    transform:scale(.88)!important;
    transform-origin:50% 48%!important;
  }

  .arg-meters{
    margin-top:0!important;
    margin-bottom:5px!important;
    gap:4px!important;
  }

  .arg-meter-row{
    min-height:17px!important;
  }

  .arg-message{
    min-height:42px!important;
    padding:7px 8px!important;
    margin:5px 0!important;
  }

  .arg-controls{
    margin-top:5px!important;
    padding-top:5px!important;
  }

  .arg-heat-title{
    margin:0 0 4px!important;
  }

  .arg-heat-buttons{
    gap:4px!important;
    margin-bottom:5px!important;
  }

  .arg-heat-buttons button{
    min-height:38px!important;
    padding:5px 2px!important;
  }

  .arg-start{
    min-height:45px!important;
    margin-bottom:5px!important;
  }

  .arg-actions{
    gap:5px!important;
  }

  .arg-actions button{
    min-height:48px!important;
    padding:7px 4px!important;
  }

  .arg-times{
    margin-top:5px!important;
    gap:4px!important;
  }

  .arg-time-box{
    min-height:34px!important;
    padding:4px!important;
  }
}
\n\n/* Ver.3.2 — compact meter layout */\n.arg-meter-group{\n  margin-top:10px!important;\n  display:grid!important;\n  grid-template-columns:1fr 1fr!important;\n  gap:10px!important;\n}\n.arg-meter-group .arg-meter-row:first-child{display:none!important;}\n.arg-meter-group .arg-meter-row{\n  display:grid!important;\n  grid-template-columns:auto 1fr!important;\n  align-items:center!important;\n  gap:6px!important;\n  margin:0!important;\n}\n.arg-meter-group .arg-meter-row span{white-space:nowrap!important;}\n@media(max-width:600px){\n  .arg-visual{min-height:180px!important;height:180px!important;margin-bottom:0!important;}\n  .arg-meter-group{margin-top:2px!important;gap:6px!important;}\n  .arg-meter-group .arg-meter-row{grid-template-columns:auto 1fr!important;gap:4px!important;font-size:10px!important;}\n  .arg-meter-group .arg-meter{height:8px!important;}\n  .arg-message{margin-top:4px!important;margin-bottom:4px!important;}\n}\n

/* Ver.3.3 — force the two remaining meters onto one row */
.arg-meters{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
}
.arg-meters .arg-meter-row:first-child{
  display:none!important;
}
.arg-meters .arg-meter-row:nth-child(2),
.arg-meters .arg-meter-row:nth-child(3){
  display:flex!important;
  flex:1 1 0!important;
  width:50%!important;
  min-width:0!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
}
.arg-meters .arg-meter-row:nth-child(2) label,
.arg-meters .arg-meter-row:nth-child(3) label,
.arg-meters .arg-meter-row:nth-child(2) .arg-meter-label,
.arg-meters .arg-meter-row:nth-child(3) .arg-meter-label{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  margin:0!important;
}
.arg-meters .arg-meter-row:nth-child(2) > *:last-child,
.arg-meters .arg-meter-row:nth-child(3) > *:last-child{
  flex:1 1 auto!important;
  min-width:0!important;
}

/* Hide only the standalone "火力" heading above the heat buttons. */
.arg-heat-title{
  display:none!important;
}
.arg-controls{
  padding-top:3px!important;
}
.arg-heat-buttons{
  margin-top:0!important;
}

@media(max-width:600px){
  .arg-meters{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
  }
  .arg-meters .arg-meter-row:nth-child(2),
  .arg-meters .arg-meter-row:nth-child(3){
    display:flex!important;
    width:50%!important;
    flex:1 1 0!important;
    gap:3px!important;
  }
  .arg-meters .arg-meter-row:nth-child(2) label,
  .arg-meters .arg-meter-row:nth-child(3) label,
  .arg-meters .arg-meter-row:nth-child(2) .arg-meter-label,
  .arg-meters .arg-meter-row:nth-child(3) .arg-meter-label{
    font-size:9px!important;
  }
}


/* Ver.3.4 — target the ACTUAL markup classes */

/* Actual container is .arg-meter-group */
.arg-meter-group{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
}

/* Hide roast progress entirely; keep only unevenness + scorch risk */
.arg-meter-group .arg-meter-row:first-child{
  display:none!important;
}

/* Force the remaining two rows to share one line 50/50 */
.arg-meter-group .arg-meter-row:nth-child(2),
.arg-meter-group .arg-meter-row:nth-child(3){
  display:flex!important;
  flex:1 1 0!important;
  width:50%!important;
  min-width:0!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
}

.arg-meter-group .arg-meter-row:nth-child(2) > span:first-child,
.arg-meter-group .arg-meter-row:nth-child(3) > span:first-child,
.arg-meter-group .arg-meter-row:nth-child(2) > label:first-child,
.arg-meter-group .arg-meter-row:nth-child(3) > label:first-child{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  margin:0!important;
}

.arg-meter-group .arg-meter-row:nth-child(2) .arg-meter,
.arg-meter-group .arg-meter-row:nth-child(3) .arg-meter,
.arg-meter-group .arg-meter-row:nth-child(2) > *:last-child,
.arg-meter-group .arg-meter-row:nth-child(3) > *:last-child{
  flex:1 1 auto!important;
  min-width:0!important;
}

/* Actual heat heading is .arg-control-title */
.arg-control-title{
  display:none!important;
}

/* Tighten spacing created by the removed heat title */
.arg-controls{
  padding-top:2px!important;
  margin-top:2px!important;
}
.arg-heat-buttons{
  margin-top:0!important;
}

/* Mobile: keep the same horizontal 2-column meter layout */
@media(max-width:600px){
  .arg-meter-group{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
  }

  .arg-meter-group .arg-meter-row:nth-child(2),
  .arg-meter-group .arg-meter-row:nth-child(3){
    display:flex!important;
    flex:1 1 0!important;
    width:50%!important;
    min-width:0!important;
    gap:3px!important;
  }

  .arg-meter-group .arg-meter-row:nth-child(2) > span:first-child,
  .arg-meter-group .arg-meter-row:nth-child(3) > span:first-child,
  .arg-meter-group .arg-meter-row:nth-child(2) > label:first-child,
  .arg-meter-group .arg-meter-row:nth-child(3) > label:first-child{
    font-size:9px!important;
  }
}


/* Ver.3.5 — requested visual adjustments */

/* Top stat LABELS only are red. Values/numbers keep their original colors. */
.arg-stat > span:first-child,
.arg-stat > small:first-child,
.arg-stat .arg-stat-label{
  color:#c51b12!important;
}

/* Heat button TEXT is red when not selected. */
.arg-heat-buttons button{
  color:#b31a12!important;
}

/* Selected heat button: red background + white text. */
.arg-heat-buttons button.is-active,
.arg-heat-buttons button.active,
.arg-heat-buttons button[aria-pressed="true"]{
  background:#c91d14!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* The game also uses data-active/state classes in some builds. */
.arg-heat-buttons button[data-active="true"],
.arg-heat-buttons .selected{
  background:#c91d14!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Thin the heavy black lower pan/bottom curve without changing other outlines.
   This overrides the lower decorative shadow/edge where present. */
.arg-pan-body::after,
.arg-pan-side::after,
.arg-roaster-pan::after{
  border-bottom-width:2px!important;
  box-shadow:none!important;
}


/* Ver.3.6 — definitive pan-bottom line fix
   The thick black lower curve was produced by .arg-pan-wall box-shadow,
   not by a separate border/pseudo-element. */
.arg-pan-wall{
  box-shadow:
    inset 0 -3px 0 #4a4a47,
    inset 0 3px 0 rgba(255,255,255,.16),
    0 2px 0 #1b1b1a!important;
}

/* Keep the outer border consistent with the other pan outlines. */
.arg-pan-wall{
  border-width:2px!important;
  border-top-width:0!important;
}


/* Ver.3.7 — darker red for the three top labels only */
.arg-stat > span:first-child,
.arg-stat > small:first-child,
.arg-stat .arg-stat-label{
  color:#a40000!important;
  -webkit-text-fill-color:#a40000!important;
  opacity:1!important;
}


/* Ver.3.8 — target roast selector */
.arg-target-select{
  margin:5px 0 3px;
  padding:5px 0 4px;
  border-top:1px solid #3c2a1d;
  border-bottom:1px solid #3c2a1d;
}
.arg-target-title{
  display:block;
  margin-bottom:4px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:#5b3425;
}
.arg-target-buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}
.arg-target-buttons button{
  min-height:32px;
  padding:4px 2px;
  border:2px solid #20150f;
  background:#f1ece5;
  color:#a40000;
  font-size:11px;
  font-weight:700;
}
.arg-target-buttons button.is-active{
  background:#8b4513;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
.arg-target-select[hidden]{
  display:none!important;
}
.arg-roast-stat small[data-target-display]{
  display:block;
  margin-top:1px;
  font-size:8px;
  line-height:1.05;
  color:#6b5647;
  font-weight:700;
}
@media(max-width:600px){
  .arg-target-select{
    margin:3px 0 2px;
    padding:3px 0;
  }
  .arg-target-title{
    margin-bottom:2px;
    font-size:9px;
  }
  .arg-target-buttons{
    gap:3px;
  }
  .arg-target-buttons button{
    min-height:28px;
    padding:3px 1px;
    font-size:9px;
  }
  .arg-roast-stat small[data-target-display]{
    font-size:7px;
  }
}


/* Ver.3.16 — roasting-tool selector and frying-pan mode */
.arg-tool-select{
  margin:5px 0 3px;
  padding:5px 0 4px;
  border-top:1px solid #3c2a1d;
}
.arg-tool-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
.arg-tool-buttons button{
  min-height:32px;
  padding:4px 3px;
  border:2px solid #20150f;
  background:#f1ece5;
  color:#a40000;
  font-size:11px;
  font-weight:700;
}
.arg-tool-buttons button.is-active{
  background:#3f3f3f;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
.arg-tool-select[hidden]{display:none!important;}

/* Frying pan: shallow, near-black dark gray, no mesh lid. */
.arg-roaster[data-tool="fryingpan"] .arg-mesh{
  display:none!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan{
  height:48%!important;
  top:27%!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:4%!important;
  right:4%!important;
  top:34%!important;
  bottom:2%!important;
  border-radius:0 0 50% 50% / 0 0 24% 24%!important;
  background:linear-gradient(90deg,#17191a 0%,#292c2e 18%,#45494b 50%,#292c2e 82%,#151718 100%)!important;
  border:2px solid #111!important;
  border-top:0!important;
  box-shadow:inset 0 -3px 0 #0b0c0c,inset 0 2px 0 rgba(255,255,255,.08),0 2px 0 #111!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:4%!important;
  right:4%!important;
  top:8%!important;
  bottom:24%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 38%,#4e5254 0%,#373a3c 48%,#242627 76%,#171819 100%)!important;
  box-shadow:inset 0 0 0 2px #111,inset 0 6px 8px rgba(255,255,255,.06)!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-handle{
  background:#202223!important;
  border-color:#111!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-handle span{
  background:linear-gradient(90deg,#242627,#3a3d3f,#202223)!important;
}

/* Spatula appears only while stirring in frying-pan mode. */


/* Beans visibly shuffle when the spatula button is pressed. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i{
  animation:arg-bean-stir .50s steps(4,end);
}
@keyframes arg-bean-stir{
  0%{margin-left:0;margin-top:0}
  25%{margin-left:5px;margin-top:-3px}
  50%{margin-left:-4px;margin-top:4px}
  75%{margin-left:3px;margin-top:3px}
  100%{margin-left:0;margin-top:0}
}

/* Over-stirred beans jump out and disappear. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i.is-spilling{
  z-index:40!important;
  animation:arg-bean-spill .46s ease-out forwards!important;
}
@keyframes arg-bean-spill{
  0%{opacity:1;translate:0 0;scale:1}
  45%{opacity:1;translate:18px -46px;scale:1.08}
  100%{opacity:0;translate:42px -88px;scale:.7}
}

@media(max-width:600px){
  .arg-tool-select{margin:3px 0 2px;padding:3px 0;}
  .arg-tool-buttons{gap:3px;}
  .arg-tool-buttons button{min-height:28px;font-size:9px;padding:3px 1px;}
}


/* Ver.3.17 — refined frying-pan visual */

/* Keep the frying pan's silhouette close to the curved mesh-roaster body,
   but make it shallower and dark gray. */
.arg-roaster[data-tool="fryingpan"] .arg-pan{
  height:52%!important;
  top:25%!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:4%!important;
  right:4%!important;
  top:31%!important;
  bottom:1%!important;
  border-radius:0 0 50% 50% / 0 0 30% 30%!important;
  background:linear-gradient(90deg,#17191a 0%,#303335 18%,#505456 50%,#303335 82%,#151718 100%)!important;
  border:2px solid #151515!important;
  border-top:0!important;
  box-shadow:
    inset 0 -2px 0 #111,
    inset 0 2px 0 rgba(255,255,255,.10),
    0 2px 0 #181818!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:4%!important;
  right:4%!important;
  top:7%!important;
  bottom:25%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 36%,#55595b 0%,#3c3f41 46%,#282a2b 73%,#18191a 100%)!important;
  box-shadow:
    inset 0 0 0 2px #151515,
    inset 0 5px 8px rgba(255,255,255,.07)!important;
}

/* Iron handle rather than wood. */
.arg-roaster[data-tool="fryingpan"] .arg-handle{
  background:linear-gradient(180deg,#4b4e50,#202223)!important;
  border:2px solid #111!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-handle span{
  background:linear-gradient(90deg,#171819 0%,#44484a 30%,#292c2e 65%,#151617 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* Wooden spatula, held at roughly 45 degrees into the pan. */
/* Stir with the wooden spatula around a 45-degree base angle. */
/* Each bean gets its own random movement values from JS. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-stir-v317 .54s ease-in-out!important;
}
@keyframes arg-bean-stir-v317{
  0%   {transform:translate(0,0) rotate(0)}
  35%  {transform:translate(var(--stir-x,5px),var(--stir-y,-3px)) rotate(var(--stir-r,10deg))}
  70%  {transform:translate(calc(var(--stir-x,5px) * -.55),calc(var(--stir-y,-3px) * -.55)) rotate(calc(var(--stir-r,10deg) * -.45))}
  100% {transform:translate(0,0) rotate(0)}
}

/* Exaggerated "pop!" when over-stirring throws beans out of the shallow pan. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i.is-spilling{
  z-index:50!important;
  animation:arg-bean-spill-v317 .68s cubic-bezier(.18,.75,.28,1) forwards!important;
}
@keyframes arg-bean-spill-v317{
  0%{
    opacity:1;
    transform:translate(0,0) rotate(0) scale(1);
  }
  42%{
    opacity:1;
    transform:translate(calc(var(--spill-x,80px) * .45),var(--spill-y,-110px)) rotate(calc(var(--spill-r,360deg) * .45)) scale(1.35);
  }
  70%{
    opacity:1;
    transform:translate(calc(var(--spill-x,80px) * .78),calc(var(--spill-y,-110px) * .72)) rotate(calc(var(--spill-r,360deg) * .8)) scale(1.15);
  }
  100%{
    opacity:0;
    transform:translate(var(--spill-x,80px),calc(var(--spill-y,-110px) * .35)) rotate(var(--spill-r,360deg)) scale(.75);
  }
}


/* Ver.3.18 — frying-pan shape/position and visible bean ejection */

/* Allow beans to travel beyond the pan and roaster illustration. */
.arg-roaster,
.arg-roaster[data-tool="fryingpan"],
.arg-roaster[data-tool="fryingpan"] .arg-pan,
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed,
.arg-roaster[data-tool="fryingpan"] .arg-beans{
  overflow:visible!important;
}

/* Move frying pan upward to closely match the mesh-roaster's visual position. */
.arg-roaster[data-tool="fryingpan"] .arg-pan{
  top:17%!important;
  height:59%!important;
}

/* More pronounced lower curve. The sides taper inward instead of dropping vertically. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:3%!important;
  right:3%!important;
  top:27%!important;
  bottom:-2%!important;
  border-radius:0 0 50% 50% / 0 0 42% 42%!important;
  clip-path:polygon(
    0% 0%,
    100% 0%,
    97% 22%,
    92% 55%,
    84% 76%,
    72% 91%,
    58% 98%,
    42% 98%,
    28% 91%,
    16% 76%,
    8% 55%,
    3% 22%
  )!important;
  background:linear-gradient(90deg,#151718 0%,#292c2e 16%,#505456 50%,#292c2e 84%,#151718 100%)!important;
  border:2px solid #111!important;
  border-top:0!important;
  box-shadow:
    inset 0 -2px 0 #0c0d0d,
    inset 0 2px 0 rgba(255,255,255,.10),
    0 2px 0 #111!important;
}

/* Top opening follows the same broad curved silhouette. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:3%!important;
  right:3%!important;
  top:3%!important;
  bottom:31%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 35%,#535759 0%,#3b3e40 46%,#27292a 73%,#171819 100%)!important;
  box-shadow:
    inset 0 0 0 2px #111,
    inset 0 5px 8px rgba(255,255,255,.07)!important;
}

/* Iron handle follows the raised pan. */
.arg-roaster[data-tool="fryingpan"] .arg-handle{
  top:34%!important;
}

/* Keep beans over the inner bed and above the pan wall. */
.arg-roaster[data-tool="fryingpan"] .arg-beans{
  z-index:16!important;
}

/* Ejected beans visibly clear the rim, arc high, then fall outside the pan. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i.is-spilling{
  position:relative!important;
  z-index:100!important;
  animation:arg-bean-spill-v318 .95s cubic-bezier(.16,.72,.22,1) forwards!important;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}
@keyframes arg-bean-spill-v318{
  0%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
  32%{
    opacity:1;
    transform:translate(calc(var(--spill-x,180px) * .32),var(--spill-y,-130px))
              rotate(calc(var(--spill-r,540deg) * .32)) scale(1.32);
  }
  62%{
    opacity:1;
    transform:translate(calc(var(--spill-x,180px) * .68),calc(var(--spill-y,-130px) * .82))
              rotate(calc(var(--spill-r,540deg) * .68)) scale(1.18);
  }
  86%{
    opacity:1;
    transform:translate(var(--spill-x,180px),var(--spill-drop,70px))
              rotate(var(--spill-r,540deg)) scale(.95);
  }
  100%{
    opacity:0;
    transform:translate(calc(var(--spill-x,180px) * 1.08),calc(var(--spill-drop,70px) + 35px))
              rotate(var(--spill-r,540deg)) scale(.72);
  }
}

/* Keep the 45-degree wooden spatula from the previous version aligned with raised pan. */
/* Ver.3.19 — smooth frying-pan body and mesh-roaster-like bean motion */

/* Remove the polygon clipping that caused pointed burr-like projections
   at the left and right edges. Use a pure rounded silhouette instead. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:3%!important;
  right:3%!important;
  top:25%!important;
  bottom:-3%!important;
  clip-path:none!important;
  border:2px solid #111!important;
  border-top:0!important;
  border-radius:8% 8% 50% 50% / 18% 18% 48% 48%!important;
  background:linear-gradient(90deg,#151718 0%,#292c2e 16%,#505456 50%,#292c2e 84%,#151718 100%)!important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(0,0,0,.18)!important;
}

/* Smooth black rim line, same visual weight as the other pan outlines. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:3%!important;
  right:3%!important;
  top:2%!important;
  bottom:30%!important;
  border:2px solid #111!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 35%,#535759 0%,#3b3e40 46%,#27292a 73%,#171819 100%)!important;
  box-shadow:inset 0 4px 7px rgba(255,255,255,.06)!important;
}

/* Do not apply the separate Ver.3.17 per-bean stir animation.
   animateShake() now supplies the same movement used by the mesh roaster. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:none!important;
}

/* Keep the wooden spatula visible/moving independently while the pan/beans
   use the mesh-roaster shake motion. */
/* Make ejected beans unmistakably travel outside the pan. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i.is-spilling{
  z-index:120!important;
  animation:arg-bean-spill-v319 .95s cubic-bezier(.16,.72,.22,1) forwards!important;
}
@keyframes arg-bean-spill-v319{
  0%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
  30%{
    opacity:1;
    transform:translate(calc(var(--spill-x,190px) * .30),var(--spill-y,-135px))
              rotate(calc(var(--spill-r,540deg) * .30)) scale(1.35);
  }
  58%{
    opacity:1;
    transform:translate(calc(var(--spill-x,190px) * .64),calc(var(--spill-y,-135px) * .88))
              rotate(calc(var(--spill-r,540deg) * .64)) scale(1.18);
  }
  82%{
    opacity:1;
    transform:translate(var(--spill-x,190px),var(--spill-drop,70px))
              rotate(var(--spill-r,540deg)) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(calc(var(--spill-x,190px) * 1.12),calc(var(--spill-drop,70px) + 45px))
              rotate(var(--spill-r,540deg)) scale(.72);
  }
}


/* Ver.3.20 — stronger frying-pan contour and rounded 45-degree shoulders */

/* Outer body: slightly thicker black contour for a clearer silhouette.
   Large elliptical lower radius keeps the bottom smooth, while the upper
   side corners slope inward visually instead of appearing vertical. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:3.5%!important;
  right:3.5%!important;
  top:24%!important;
  bottom:-4%!important;
  clip-path:none!important;
  border:3px solid #101010!important;
  border-top:0!important;
  border-radius:18% 18% 50% 50% / 34% 34% 52% 52%!important;
  background:linear-gradient(90deg,#151718 0%,#292c2e 15%,#505456 50%,#292c2e 85%,#151718 100%)!important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(0,0,0,.16)!important;
}

/* Pan opening/rim: stronger outline to match the body and emphasize
   the rounded shoulders at both sides. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:3.5%!important;
  right:3.5%!important;
  top:1%!important;
  bottom:29%!important;
  border:3px solid #101010!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 35%,#535759 0%,#3b3e40 46%,#27292a 73%,#171819 100%)!important;
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.10)!important;
}

/* Subtle side shading reinforces the approximately 45-degree rounded
   transition from the wide rim toward the narrower curved base. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::before,
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::after{
  content:"";
  position:absolute;
  top:4%;
  width:15%;
  height:58%;
  pointer-events:none;
  opacity:.34;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::before{
  left:1%;
  border-radius:65% 0 0 70%;
  background:linear-gradient(135deg,rgba(0,0,0,.42),rgba(0,0,0,0) 68%);
}
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::after{
  right:1%;
  border-radius:0 65% 70% 0;
  background:linear-gradient(225deg,rgba(0,0,0,.42),rgba(0,0,0,0) 68%);
}


/* Ver.3.22 — larger/angular wooden spatula, positioned higher */
/* Long wooden handle */
/* Bigger, squarer spatula blade */
/* Stir around the higher 45-degree resting position. */
/* Ver.3.23 — stationary frying pan / large shamoji-style wooden paddle */

/* Frying pan must never use the mesh-pan shake transform while stirring. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring{
  transform:none!important;
}

/* Much larger, higher shamoji-style wooden paddle. */
/* Wooden handle */
/* Large rice-paddle / shamoji-shaped head */
/* Paddle moves, pan does not. */
/* Only beans shake/stir. Each bean already receives randomized movement values
   from JS, so this gives a lively irregular agitation without moving the pan. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-only-stir-v323 .60s ease-in-out!important;
}
@keyframes arg-bean-only-stir-v323{
  0%   {transform:translate(0,0) rotate(0deg)}
  22%  {transform:translate(var(--stir-x,6px),var(--stir-y,-4px)) rotate(var(--stir-r,12deg))}
  45%  {transform:translate(calc(var(--stir-x,6px) * -.75),calc(var(--stir-y,-4px) * -.65)) rotate(calc(var(--stir-r,12deg) * -.65))}
  68%  {transform:translate(calc(var(--stir-x,6px) * .55),calc(var(--stir-y,-4px) * .8)) rotate(calc(var(--stir-r,12deg) * .5))}
  84%  {transform:translate(calc(var(--stir-x,6px) * -.35),calc(var(--stir-y,-4px) * -.3)) rotate(calc(var(--stir-r,12deg) * -.35))}
  100% {transform:translate(0,0) rotate(0deg)}
}


/* Ver.3.24 — fixed pan, randomized beans, rounder/high paddle, sloped sides */

/* Absolutely prevent the frying-pan assembly from inheriting shake movement. */
.arg-roaster[data-tool="fryingpan"] .arg-pan,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-shaking,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring,
.arg-roaster[data-tool="fryingpan"].is-shaking .arg-pan{
  animation:none!important;
  transform:none!important;
}

/* Pan body: no vertical side walls. The upper corners curve immediately
   inward/downward toward the base to give sloped rounded sides. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:3.5%!important;
  right:3.5%!important;
  top:23%!important;
  bottom:-5%!important;
  clip-path:none!important;
  border:3px solid #101010!important;
  border-top:0!important;
  border-radius:22% 22% 50% 50% / 52% 52% 48% 48%!important;
  background:linear-gradient(90deg,#151718 0%,#292c2e 15%,#505456 50%,#292c2e 85%,#151718 100%)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.16)!important;
}

/* Remove old pseudo side shading so it cannot look like vertical walls/burrs. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::before,
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::after{
  content:none!important;
  display:none!important;
}

/* Keep the top ellipse clean while the lower body slopes away underneath it. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:3.5%!important;
  right:3.5%!important;
  top:1%!important;
  bottom:28%!important;
  border:3px solid #101010!important;
  border-radius:50%!important;
}

/* Larger, rounder wooden paddle placed clearly higher above the beans. */
/* Beans move independently in two different random directions.
   Negative random delay keeps them from moving in sync. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-random-roll-v324 .62s ease-in-out!important;
  animation-delay:var(--stir-delay,0s)!important;
}
@keyframes arg-bean-random-roll-v324{
  0%   {transform:translate(0,0) rotate(0deg)}
  27%  {transform:translate(var(--stir-x,8px),var(--stir-y,-5px)) rotate(var(--stir-r,18deg))}
  58%  {transform:translate(var(--stir-x2,-7px),var(--stir-y2,5px)) rotate(calc(var(--stir-r,18deg) * -.8))}
  82%  {transform:translate(calc(var(--stir-x,8px) * -.35),calc(var(--stir-y2,5px) * .45)) rotate(calc(var(--stir-r,18deg) * .35))}
  100% {transform:translate(0,0) rotate(0deg)}
}

/* Paddle alone performs the stirring sweep; pan remains fixed. */
/* Ver.3.25 — frying pan follows user's red-line silhouette */

/* Keep pan absolutely fixed during spatula stirring. */
.arg-roaster[data-tool="fryingpan"] .arg-pan,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-shaking,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring,
.arg-roaster[data-tool="fryingpan"].is-shaking .arg-pan{
  animation:none!important;
  transform:none!important;
}

/*
 * Pan side/bottom silhouette:
 * - starts curving immediately below the left/right rim
 * - no vertical side-wall section
 * - smoothly narrows into one broad rounded bottom arc
 * This intentionally avoids clip-path so no pointed burrs appear.
 */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall{
  left:4%!important;
  right:4%!important;
  top:18%!important;
  bottom:-3%!important;
  clip-path:none!important;
  border:3px solid #101010!important;
  border-top:0!important;
  border-radius:
    14% 14% 48% 48%
    / 38% 38% 62% 62%!important;
  background:
    radial-gradient(ellipse at 50% -8%,
      #4c5052 0%,
      #383b3d 38%,
      #292c2e 67%,
      #17191a 100%)!important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(0,0,0,.18)!important;
}

/* Eliminate all legacy side pseudo-elements that could create spikes/walls. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::before,
.arg-roaster[data-tool="fryingpan"] .arg-pan-wall::after{
  content:none!important;
  display:none!important;
}

/* Wide, shallow oval opening matching the upper red line. */
.arg-roaster[data-tool="fryingpan"] .arg-pan-bed{
  left:4%!important;
  right:4%!important;
  top:0!important;
  bottom:30%!important;
  border:3px solid #101010!important;
  border-radius:50%!important;
  background:radial-gradient(
    ellipse at 50% 34%,
    #515557 0%,
    #393c3e 48%,
    #262829 76%,
    #171819 100%
  )!important;
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.055),
    0 1px 0 rgba(0,0,0,.10)!important;
}

/* Wider, rounded shamoji-like wooden spatula, still positioned high. */
/* Slightly shorter handle makes the paddle head look wider. */
/* Broad rounded paddle head. */
/* Ver.3.26 — wooden spatula only
   Simple paddle matching the user's red-circle reference. */

/* Put the whole spatula in the requested upper-middle pan area. */
/* Simple narrow straight wooden handle. */
/* Simple broad paddle head:
   rounded lower end, gently narrowed neck, no decorative complexity. */
/* Keep same stirring behavior, but centered on the new requested position. */
/* Ver.3.27 — spatula enters from upper-right toward lower-left.
   Motion is intentionally very small. */
/* Keep the simple Ver.3.26 wooden-spatula shape. */
/* Small push/pull motion along the upper-right -> lower-left axis.
   Pan remains fixed; only spatula and randomized beans animate. */
/* Ver.3.28
   Restore Ver.3.26 wooden-spatula shape exactly.
   Use a stronger final selector so the stirring animation cannot be
   overridden by older !important animation declarations. */

/* Small upper-right -> lower-left stirring stroke.
   Higher specificity + !important fixes the animation collision. */
/* Frying pan itself remains completely stationary. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring{
  transform:none!important;
}


/* Ver.3.29 — definitive spatula restoration + animation fix
   The spatula geometry below is the Ver.3.26 shape. */

/* Exact Ver.3.26 geometry */
/* Show spatula when stirring. */
/* Directly animate the spatula element itself.
   This bypasses the old competing descendant animation rules. */
/* The frying pan itself is fixed during stirring. */
.arg-roaster[data-tool="fryingpan"] .arg-pan,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-shaking{
  animation:none!important;
  transform:none!important;
}


/* Ver.3.30 — CLEAN spatula implementation
   All older spatula rules/keyframes were removed. */

/* Frying pan itself stays fixed while stirring. */
.arg-roaster[data-tool="fryingpan"] .arg-pan,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring,
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-shaking{
  animation:none!important;
  transform:none!important;
}

/* Ver.3.26 simple wooden spatula geometry. */
.arg-roaster[data-tool="fryingpan"] .arg-spatula{
  display:none;
  position:absolute;
  width:43%!important;
  height:36%!important;
  left:39%!important;
  top:-14%!important;
  transform-origin:74% 46%!important;
  transform:rotate(-48deg);
  z-index:28!important;
  pointer-events:none;
}

/* Narrow straight handle. */
.arg-roaster[data-tool="fryingpan"] .arg-spatula::before{
  content:"";
  position:absolute;
  right:0;
  top:35%;
  width:50%;
  height:30%;
  background:#c99558;
  border:2px solid #70431f;
  border-radius:5px;
  box-sizing:border-box;
  box-shadow:none;
}

/* Simple broad paddle head, matching Ver.3.26. */
.arg-roaster[data-tool="fryingpan"] .arg-spatula::after{
  content:"";
  position:absolute;
  left:0;
  top:10.35%;
  width:50%;
  height:79.3%;
  background:#c99558;
  border:2px solid #70431f;
  box-sizing:border-box;
  clip-path:polygon(
    0% 10%,
    77% 10%,
    100% 34%,
    100% 66%,
    77% 90%,
    0% 90%
  );
  border-radius:5px 12px 12px 5px;
  box-shadow:none;
}

/* Single authoritative spatula animation.
   Small upper-right -> lower-left push and return. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  display:block;
  animation:arg-spatula-clean-v330 .68s ease-in-out 1;
}

@keyframes arg-spatula-clean-v330{
  0%   {transform:translate(4px,-4px) rotate(-48deg);}
  30%  {transform:translate(-2px,2px) rotate(-47deg);}
  58%  {transform:translate(-9px,9px) rotate(-46deg);}
  82%  {transform:translate(-2px,2px) rotate(-47deg);}
  100% {transform:translate(4px,-4px) rotate(-48deg);}
}

/* Beans move independently; pan does not move. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-random-roll-v330 .62s ease-in-out;
  animation-delay:var(--stir-delay,0s);
}
@keyframes arg-bean-random-roll-v330{
  0%   {transform:translate(0,0) rotate(0deg);}
  27%  {transform:translate(var(--stir-x,8px),var(--stir-y,-5px)) rotate(var(--stir-r,18deg));}
  58%  {transform:translate(var(--stir-x2,-7px),var(--stir-y2,5px)) rotate(calc(var(--stir-r,18deg) * -.8));}
  82%  {transform:translate(calc(var(--stir-x,8px) * -.35),calc(var(--stir-y2,5px) * .45)) rotate(calc(var(--stir-r,18deg) * .35));}
  100% {transform:translate(0,0) rotate(0deg);}
}


/* =========================================================
   Ver.3.34.2 — CLEAN drum implementation
   This is the ONLY drum CSS block.
   Existing mesh-pan and frying-pan CSS above is untouched.
   ========================================================= */

.arg-drum-roaster{display:none}

/* Three tool buttons */
.arg-tool-buttons{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Hide legacy pan visuals only while drum tool is selected */
.arg-roaster[data-tool="drum"] .arg-pan-wall,
.arg-roaster[data-tool="drum"] .arg-pan-bed,
.arg-roaster[data-tool="drum"] .arg-handle,
.arg-roaster[data-tool="drum"] .arg-spatula{
  display:none;
}

/* The normal pan element is retained only as the shared bean DOM host,
   but visually hidden in drum mode. */
.arg-roaster[data-tool="drum"] .arg-pan{
  position:absolute;
  inset:0;
  transform:none;
  overflow:visible;
}
.arg-roaster[data-tool="drum"] .arg-pan > .arg-beans{
  display:none;
}

/* Main drum stage — centered over the four existing flames */
.arg-roaster[data-tool="drum"] .arg-drum-roaster{
  display:block;
  position:absolute;
  left:50%;
  top:9%;
  width:84%;
  height:68%;
  transform:translateX(-50%);
  overflow:visible;
  z-index:8;
}

/* TRUE CYLINDER BODY:
   straight top/bottom + equal rounded left/right silhouette.
   No ellipse clip-path, no almond shape. */
.arg-roaster[data-tool="drum"] .arg-drum-shell{
  position:absolute;
  left:6%;
  top:7%;
  width:73%;
  height:66%;
  box-sizing:border-box;
  overflow:hidden;
  border:4px solid #444;
  border-radius:42px;
  background:#8a8a85;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}

/* Left side has NO solid end-cap. Mesh continues into the curved silhouette. */
.arg-roaster[data-tool="drum"] .arg-drum-rim-left,
.arg-roaster[data-tool="drum"] .arg-drum-endcap-left{
  display:none;
}

/* Right side only: visible circular/elliptical end plate */
.arg-roaster[data-tool="drum"] .arg-drum-rim-right{
  position:absolute;
  right:-2px;
  top:-3%;
  width:12%;
  height:106%;
  z-index:6;
  border:3px solid #333;
  border-radius:50%;
  background:linear-gradient(90deg,#646464,#d0d0cb 48%,#666);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.arg-roaster[data-tool="drum"] .arg-drum-endcap-right{
  position:absolute;
  right:1%;
  top:8%;
  width:8%;
  height:84%;
  z-index:7;
  border:2px solid #444;
  border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#a4a49e,#5d5d59 70%,#40403e);
}

/* Mesh fills the body.  X never changes.
   JS changes --drum-mesh-y only, producing straight bottom->top scrolling. */
.arg-roaster[data-tool="drum"] .arg-drum-mesh{
  position:absolute;
  left:0;
  right:7%;
  top:0;
  bottom:0;
  z-index:4;
  border-radius:38px 0 0 38px;
  background:
    repeating-linear-gradient(31deg,transparent 0 8px,rgba(38,38,38,.88) 8px 10px),
    repeating-linear-gradient(-31deg,transparent 0 8px,rgba(38,38,38,.88) 8px 10px);
  background-size:28px 24px,28px 24px;
  background-position:0 var(--drum-mesh-y,0px),0 var(--drum-mesh-y,0px);
  pointer-events:none;
}

/* Larger beans inside drum */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed{
  position:absolute;
  left:8%;
  right:12%;
  top:33%;
  height:55%;
  z-index:3;
  overflow:hidden;
}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  position:absolute;
  width:17px;
  height:11px;
  box-sizing:border-box;
  border:2px solid hsl(var(--drum-h,88),45%,16%);
  border-radius:55% 45% 52% 48%;
  background:hsl(var(--drum-h,88),var(--drum-s,42%),var(--drum-l,48%));
  transform:rotate(var(--bean-r,0deg));
}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  content:"";
  position:absolute;
  left:47%;
  top:9%;
  width:1px;
  height:80%;
  background:rgba(35,20,8,.55);
  transform:rotate(7deg);
}

/* Bean positions: deliberately spread vertically, not one line */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(1){left:3%;top:51%;--bean-r:12deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(2){left:9%;top:29%;--bean-r:-18deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(3){left:14%;top:67%;--bean-r:25deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(4){left:20%;top:40%;--bean-r:-12deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(5){left:25%;top:73%;--bean-r:18deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(6){left:30%;top:22%;--bean-r:8deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(7){left:35%;top:57%;--bean-r:-24deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(8){left:40%;top:35%;--bean-r:17deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(9){left:45%;top:77%;--bean-r:-9deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(10){left:50%;top:19%;--bean-r:22deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(11){left:55%;top:54%;--bean-r:-16deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(12){left:60%;top:31%;--bean-r:14deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(13){left:65%;top:69%;--bean-r:-20deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(14){left:70%;top:25%;--bean-r:11deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(15){left:75%;top:58%;--bean-r:28deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(16){left:80%;top:38%;--bean-r:-13deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(17){left:84%;top:74%;--bean-r:9deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(18){left:88%;top:27%;--bean-r:-22deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(19){left:7%;top:79%;--bean-r:19deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(20){left:18%;top:82%;--bean-r:-7deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(21){left:33%;top:84%;--bean-r:16deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(22){left:48%;top:83%;--bean-r:-14deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(23){left:63%;top:81%;--bean-r:23deg}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(24){left:78%;top:82%;--bean-r:-10deg}

/* Random-looking independent bean movement while drum is turning */
.arg-roaster[data-tool="drum"]:not([data-drum-spin="stopped"]) .arg-drum-bean-bed i{
  animation:arg-drum-bean-jitter var(--drum-bean-speed,1s) ease-in-out infinite alternate;
}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(3n+1){animation-delay:-.17s}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(3n+2){animation-delay:-.43s}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i:nth-child(4n){animation-delay:-.71s}
@keyframes arg-drum-bean-jitter{
  0%{margin-left:-3px;margin-top:2px}
  34%{margin-left:4px;margin-top:-7px}
  67%{margin-left:-1px;margin-top:-3px}
  100%{margin-left:5px;margin-top:1px}
}

/* No support legs */
.arg-roaster[data-tool="drum"] .arg-drum-support{display:none}

/* Right axle */
.arg-roaster[data-tool="drum"] .arg-drum-axle{
  position:absolute;
  right:-12%;
  top:44%;
  width:15%;
  height:12%;
  z-index:9;
  box-sizing:border-box;
  border:3px solid #292929;
  border-radius:4px;
  background:linear-gradient(#bdbdb8,#666);
}

/* ---------------------------------------------------------
   THREE-COMPLETE-FRAME CRANK
   No transforms or interpolation. One complete frame is visible.
   --------------------------------------------------------- */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  position:absolute;
  left:76%;
  top:13%;
  width:27%;
  height:52%;
  z-index:12;
  overflow:visible;
}

/* Fixed shaft and pivot */
.arg-roaster[data-tool="drum"] .arg-drum-crank-shaft{
  position:absolute;
  left:0;
  top:48%;
  width:28%;
  height:7%;
  box-sizing:border-box;
  border:3px solid #333;
  border-radius:4px;
  background:linear-gradient(#bdbdb8,#696969);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-pivot{
  position:absolute;
  left:25%;
  top:44%;
  width:13px;
  height:13px;
  z-index:8;
  box-sizing:border-box;
  border:3px solid #6b1f13;
  border-radius:50%;
  background:#aaa;
}

/* Complete frames are static drawings; JS only switches display */
.arg-roaster[data-tool="drum"] .arg-drum-crank-frame{
  display:none;
  position:absolute;
  left:27%;
  top:50%;
  width:72%;
  height:1px;
  overflow:visible;
}
.arg-roaster[data-tool="drum"][data-crank-frame="top"] .arg-drum-crank-top{display:block}
.arg-roaster[data-tool="drum"][data-crank-frame="mid"] .arg-drum-crank-mid{display:block}
.arg-roaster[data-tool="drum"][data-crank-frame="bottom"] .arg-drum-crank-bottom{display:block}

/* Metal arm segments */
.arg-roaster[data-tool="drum"] .arg-drum-crank-arm-a,
.arg-roaster[data-tool="drum"] .arg-drum-crank-arm-b{
  position:absolute;
  display:block;
  height:5px;
  border-radius:3px;
  background:#5e5e5e;
  transform-origin:0 50%;
}

/* ① TOP */
.arg-roaster[data-tool="drum"] .arg-drum-crank-top .arg-drum-crank-arm-a{
  left:0;top:0;width:54%;transform:rotate(-57deg);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-top .arg-drum-crank-arm-b{
  left:29%;top:-38px;width:31%;transform:rotate(0deg);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-top .arg-drum-crank-grip{
  left:55%;top:-47px;
}

/* ② MIDDLE */
.arg-roaster[data-tool="drum"] .arg-drum-crank-mid .arg-drum-crank-arm-a{
  left:0;top:0;width:55%;transform:rotate(0deg);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-mid .arg-drum-crank-arm-b{display:none}
.arg-roaster[data-tool="drum"] .arg-drum-crank-mid .arg-drum-crank-grip{
  left:51%;top:-9px;
}

/* ③ BOTTOM */
.arg-roaster[data-tool="drum"] .arg-drum-crank-bottom .arg-drum-crank-arm-a{
  left:0;top:0;width:54%;transform:rotate(57deg);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-bottom .arg-drum-crank-arm-b{
  left:29%;top:34px;width:31%;transform:rotate(0deg);
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-bottom .arg-drum-crank-grip{
  left:55%;top:26px;
}

/* Brown wood grip in every frame */
.arg-roaster[data-tool="drum"] .arg-drum-crank-grip{
  position:absolute;
  display:block;
  width:43%;
  height:17px;
  box-sizing:border-box;
  border:3px solid #4b2915;
  border-radius:5px 11px 11px 5px;
  background:
    repeating-linear-gradient(90deg,rgba(75,37,13,.20) 0 5px,rgba(255,255,255,.06) 5px 10px),
    linear-gradient(#b67639,#784018);
}

/* Existing flame artwork stays untouched */
.arg-roaster[data-tool="drum"] .arg-burner{display:block}

/* Finished: drum disappears completely, leaving existing finished-beans display */
.arg-roaster[data-tool="drum"][data-finished="1"] .arg-drum-roaster{display:none}

@media (max-width:640px){
  .arg-tool-buttons button{font-size:10px;padding-left:3px;padding-right:3px}
  .arg-roaster[data-tool="drum"] .arg-drum-roaster{
    width:90%;
    height:66%;
  }
}


/* =========================================================
   Ver.3.34.4 — roasting visual placement / drum scale
   ========================================================= */

/* Move the roasting illustration area downward equally for all tools.
   Only the visual objects move; meters/message remain in their current place. */
.arg-roaster .arg-pan{
  top:8%!important;
}

/* Drum: larger overall display and slightly lower stage position.
   Width/height increase includes crank because crank lives inside this stage. */
.arg-roaster[data-tool="drum"] .arg-drum-roaster{
  left:50%;
  top:15%;
  width:94%;
  height:74%;
  transform:translateX(-50%);
}

/* Keep the enlarged drum centered over the four burners. */
.arg-roaster[data-tool="drum"] .arg-drum-shell{
  left:3%;
  top:4%;
  width:76%;
  height:68%;
}

/* Move existing four flames down with the roasting vessel,
   equally for mesh-lid, frying-pan and drum modes. */
.arg-roaster .arg-burner{
  transform:translateY(22px);
}

/* Drum crank: a little higher relative to the enlarged drum,
   so its shaft/pivot aligns more closely with drum height center. */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  top:9%;
}

/* Preserve mesh scroll and discrete crank motion exactly as in v3.34.3. */


/* =========================================================
   Ver.3.34.5 — drum position / height / burner centering
   ========================================================= */

/* Drum stage: shift slightly right and make the drum taller.
   Horizontal scale is essentially retained. */
.arg-roaster[data-tool="drum"] .arg-drum-roaster{
  left:53%!important;
  top:15%!important;
  width:94%!important;
  height:78%!important;
  transform:translateX(-50%)!important;
}

.arg-roaster[data-tool="drum"] .arg-drum-shell{
  left:3%!important;
  top:2%!important;
  width:76%!important;
  height:74%!important;
}

/* Keep crank aligned with the enlarged drum. */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  top:8%!important;
}

/* In drum mode only, counter the inherited right-shifted burner layout.
   The four flames are centered beneath the visible drum body. */
.arg-roaster[data-tool="drum"] .arg-burner{
  left:8%!important;
  width:70%!important;
  transform:translateY(22px)!important;
  justify-content:space-around!important;
}

/* Give the larger drum a little more vertical bean room. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed{
  top:30%!important;
  height:60%!important;
}


/* =========================================================
   Ver.3.34.6 — unified burner position + drum clearance
   ========================================================= */

/* All three roasting methods use the same four-flame position.
   This replaces the prior drum-only burner correction. */
.arg-roaster .arg-burner{
  left:8%!important;
  width:70%!important;
  transform:translateY(22px)!important;
  justify-content:space-around!important;
}

/* Drum only: raise the whole roaster assembly to create a clear
   air gap even when the flame graphic grows at high heat. */
.arg-roaster[data-tool="drum"] .arg-drum-roaster{
  top:9%!important;
}

/* Keep crank aligned with the raised drum. */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  top:8%!important;
}


/* =========================================================
   Ver.3.34.7 — crank alignment/thickness + drum ignition fix
   ========================================================= */

/* Move complete crank assembly slightly downward so the shaft aligns
   with the vertical center of the drum. */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  top:11%!important;
}

/* Approximately double the visual thickness of the drum axle/shaft. */
.arg-roaster[data-tool="drum"] .arg-drum-axle{
  height:18%!important;
  border-width:4px!important;
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-shaft{
  height:13%!important;
  border-width:4px!important;
}

/* Approximately double the crank arm thickness. */
.arg-roaster[data-tool="drum"] .arg-drum-crank-arm-a,
.arg-roaster[data-tool="drum"] .arg-drum-crank-arm-b{
  height:10px!important;
}

/* Pivot: dark gray rim instead of the previous reddish rim. */
.arg-roaster[data-tool="drum"] .arg-drum-crank-pivot{
  border-color:#3f4142!important;
  border-width:3px!important;
  background:#aaa!important;
}

/* During ignition/failure the drum must remain visible.
   Override the normal finished-state rule that hides the drum. */
.arg-roaster[data-tool="drum"].is-burning[data-finished="1"] .arg-drum-roaster,
.arg-roaster[data-tool="drum"].is-burning .arg-drum-roaster{
  display:block!important;
}

/* Keep drum beans visible during ignition. */
.arg-roaster[data-tool="drum"].is-burning .arg-drum-bean-bed{
  display:block!important;
  filter:brightness(.55) saturate(.65);
}

/* Put the existing ignition flame layer over the drum/beans rather than
   leaving only the flame after automatic failure. */
.arg-roaster[data-tool="drum"].is-burning .arg-bean-fire-layer{
  display:block!important;
  left:9%!important;
  right:16%!important;
  top:7%!important;
  bottom:24%!important;
  z-index:40!important;
  overflow:hidden!important;
  border-radius:38px!important;
}


/* =========================================================
   Ver.3.34.8 — crank pivot / wooden grip balance
   ========================================================= */

/* Pivot circle: about 1.5x larger and slightly lower. */
.arg-roaster[data-tool="drum"] .arg-drum-crank-pivot{
  width:20px!important;
  height:20px!important;
  left:23%!important;
  top:47%!important;
  border:3px solid #3f4142!important;
  border-radius:50%!important;
  background:#aaa!important;
}

/* Move only the wooden grip slightly downward in all three completed frames.
   Metal-arm motion/shape remains unchanged. */
.arg-roaster[data-tool="drum"] .arg-drum-crank-top .arg-drum-crank-grip{
  top:-43px!important;
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-mid .arg-drum-crank-grip{
  top:-5px!important;
}
.arg-roaster[data-tool="drum"] .arg-drum-crank-bottom .arg-drum-crank-grip{
  top:30px!important;
}


/* =========================================================
   Ver.3.34.9 — crank fine balance + larger tumbling beans
   ========================================================= */

/* Whole crank assembly: tiny downward adjustment. */
.arg-roaster[data-tool="drum"] .arg-drum-crank{
  top:12.5%!important;
}

/* Pivot circle: move slightly UP inside the crank assembly.
   Size remains the enlarged v3.34.8 size. */
.arg-roaster[data-tool="drum"] .arg-drum-crank-pivot{
  width:20px!important;
  height:20px!important;
  left:23%!important;
  top:43%!important;
}

/* Drum beans: about 1.5x larger than v3.34.8. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  width:25px!important;
  height:16px!important;
}

/* Wider vertical travel area for bold lift-and-drop motion. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed{
  top:13%!important;
  height:80%!important;
}

/* Stop the old small jitter animation. Motion is now driven by JS variables. */
.arg-roaster[data-tool="drum"]:not([data-drum-spin="stopped"]) .arg-drum-bean-bed i{
  animation:none!important;
}

/* Each bean receives a JS-driven X/Y offset.
   This lets beans rise from the lower drum, crest high, then fall randomly. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  margin:0!important;
  transform:
    translate(var(--bean-dx,0px),var(--bean-dy,0px))
    rotate(var(--bean-r,0deg))!important;
  will-change:transform;
}


/* =========================================================
   Ver.3.35.0 — drum beans: same visual language as mesh-lid
   ========================================================= */

/* Drum beans now use the same bean-like oval, outline and center seam
   proportions as the normal roaster beans, while retaining drum-only motion. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  width:22px!important;
  height:14px!important;
  border:2px solid hsl(var(--drum-h,88),48%,16%)!important;
  border-radius:58% 42% 56% 44%!important;
  background:
    radial-gradient(ellipse at 34% 30%,rgba(255,255,255,.20) 0 10%,transparent 11%),
    hsl(var(--drum-h,88),var(--drum-s,42%),var(--drum-l,48%))!important;
  box-shadow:
    inset -2px -2px 0 rgba(40,20,5,.18),
    inset 1px 1px 0 rgba(255,255,255,.10)!important;
}
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  content:""!important;
  position:absolute!important;
  left:48%!important;
  top:8%!important;
  width:2px!important;
  height:82%!important;
  border-radius:50%!important;
  background:rgba(43,24,8,.58)!important;
  transform:rotate(8deg)!important;
}

/* Use more of the lower drum as the resting bed. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed{
  top:12%!important;
  height:82%!important;
}

/* Ver.3.35.1 — drum bean center seam only */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  left:47%!important;
  top:10%!important;
  width:2px!important;
  height:80%!important;
  transform:none!important;
}





/* =========================================================
   Ver.3.35.4 — drum bean aspect ratio + long-axis seam fix
   ========================================================= */

/* Drum beans become vertically elongated, closer to the mesh-lid bean silhouette. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  width:16px!important;
  height:22px!important;
  border-radius:48% 52% 46% 54%!important;
}

/* Center seam follows the bean's long axis.
   It rotates naturally together with the bean body. */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  content:""!important;
  position:absolute!important;
  left:46%!important;
  top:12%!important;
  width:2px!important;
  height:76%!important;
  border-radius:50%!important;
  background:rgba(43,24,8,.58)!important;
  transform:none!important;
  transform-origin:center center!important;
}


/* =========================================================
   Ver.3.36.0 — fourth roasting tool visual prototype:
   glass-lidded hammered yukihira pan
   Smoke game logic is intentionally NOT implemented yet.
   ========================================================= */

.arg-tool-buttons{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.arg-yuki-roaster{display:none}

.arg-roaster[data-tool="yukihira"] .arg-pan,
.arg-roaster[data-tool="yukihira"] .arg-drum-roaster{
  display:none!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  display:block;
  position:absolute;
  left:50%;
  top:11%;
  width:86%;
  height:68%;
  transform:translateX(-50%);
  z-index:10;
  overflow:visible;
}

/* slightly top-down view, matching the current game perspective */
.arg-yuki-pot{
  position:absolute;
  left:10%;
  top:10%;
  width:66%;
  height:64%;
  border:4px solid #5e6060;
  border-radius:18% 18% 28% 28% / 21% 21% 32% 32%;
  background:
    linear-gradient(90deg,#c8c9c6 0%,#f2f2ef 18%,#bfc0be 48%,#ececea 70%,#aaa 100%);
  box-shadow:
    inset 0 -8px 0 rgba(80,80,80,.12),
    0 3px 0 rgba(0,0,0,.12);
  transform:perspective(600px) rotateX(8deg);
  transform-origin:center bottom;
  overflow:visible;
}

/* hammered aluminum: enlarged/deformed dimples for small-screen readability */
.arg-yuki-hammered{
  position:absolute;
  inset:13% 3% 3%;
  border-radius:10% 10% 25% 25% / 10% 10% 30% 30%;
  opacity:.42;
  background:
    radial-gradient(circle at 8px 8px,rgba(255,255,255,.75) 0 3px,rgba(100,100,100,.22) 4px,transparent 6px);
  background-size:22px 18px;
  pointer-events:none;
}

.arg-yuki-inner{
  position:absolute;
  left:4%;
  right:4%;
  top:8%;
  height:66%;
  border:4px solid #606262;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 34%,#717272 0 18%,#4d4e4e 38%,#303131 68%,#202121 100%);
  z-index:3;
}

/* pour spout */
.arg-yuki-pour-spout{
  position:absolute;
  left:-5%;
  top:17%;
  width:13%;
  height:16%;
  background:#d0d1cf;
  border:3px solid #5e6060;
  border-right:0;
  clip-path:polygon(0 48%,100% 0,100% 100%);
  z-index:1;
}

/* wooden side handle */
.arg-yuki-handle{
  position:absolute;
  right:-43%;
  top:27%;
  width:49%;
  height:18%;
  transform:rotate(-13deg);
  transform-origin:left center;
  z-index:2;
}
.arg-yuki-handle::before{
  content:"";
  position:absolute;
  left:0;
  top:34%;
  width:20%;
  height:32%;
  background:#666;
  border:3px solid #363636;
  border-radius:3px;
}
.arg-yuki-handle span{
  position:absolute;
  left:16%;
  top:8%;
  width:84%;
  height:84%;
  border:3px solid #56351d;
  border-radius:9px 18px 18px 9px;
  background:
    repeating-linear-gradient(90deg,rgba(80,38,12,.12) 0 8px,rgba(255,255,255,.08) 8px 15px),
    linear-gradient(#c88a4b,#8b572c);
}

/* beans inside the pan */
.arg-yuki-beans{
  position:absolute;
  left:10%;
  right:10%;
  top:41%;
  height:48%;
  z-index:2;
}
.arg-yuki-beans i{
  position:absolute;
  width:15px;
  height:20px;
  border:2px solid rgba(36,22,8,.85);
  border-radius:48% 52% 46% 54%;
  background:#8b9252;
  transform:rotate(var(--yr,0deg));
  box-shadow:inset -2px -2px 0 rgba(30,15,5,.16);
}
.arg-yuki-beans i::after{
  content:"";
  position:absolute;
  left:46%;
  top:13%;
  width:2px;
  height:73%;
  background:rgba(45,27,9,.55);
  border-radius:50%;
}
/* 32 bean positions */
.arg-yuki-beans i:nth-child(1){left:3%;top:50%;--yr:12deg}.arg-yuki-beans i:nth-child(2){left:10%;top:30%;--yr:-15deg}
.arg-yuki-beans i:nth-child(3){left:16%;top:60%;--yr:24deg}.arg-yuki-beans i:nth-child(4){left:23%;top:39%;--yr:-8deg}
.arg-yuki-beans i:nth-child(5){left:29%;top:68%;--yr:15deg}.arg-yuki-beans i:nth-child(6){left:35%;top:28%;--yr:7deg}
.arg-yuki-beans i:nth-child(7){left:41%;top:55%;--yr:-20deg}.arg-yuki-beans i:nth-child(8){left:47%;top:34%;--yr:19deg}
.arg-yuki-beans i:nth-child(9){left:53%;top:67%;--yr:-10deg}.arg-yuki-beans i:nth-child(10){left:59%;top:25%;--yr:20deg}
.arg-yuki-beans i:nth-child(11){left:65%;top:52%;--yr:-14deg}.arg-yuki-beans i:nth-child(12){left:71%;top:32%;--yr:12deg}
.arg-yuki-beans i:nth-child(13){left:77%;top:65%;--yr:-18deg}.arg-yuki-beans i:nth-child(14){left:83%;top:27%;--yr:9deg}
.arg-yuki-beans i:nth-child(15){left:88%;top:55%;--yr:22deg}.arg-yuki-beans i:nth-child(16){left:7%;top:72%;--yr:-9deg}
.arg-yuki-beans i:nth-child(17){left:14%;top:76%;--yr:15deg}.arg-yuki-beans i:nth-child(18){left:21%;top:72%;--yr:-12deg}
.arg-yuki-beans i:nth-child(19){left:28%;top:78%;--yr:8deg}.arg-yuki-beans i:nth-child(20){left:35%;top:74%;--yr:-17deg}
.arg-yuki-beans i:nth-child(21){left:42%;top:79%;--yr:13deg}.arg-yuki-beans i:nth-child(22){left:49%;top:73%;--yr:-11deg}
.arg-yuki-beans i:nth-child(23){left:56%;top:79%;--yr:18deg}.arg-yuki-beans i:nth-child(24){left:63%;top:74%;--yr:-7deg}
.arg-yuki-beans i:nth-child(25){left:70%;top:78%;--yr:14deg}.arg-yuki-beans i:nth-child(26){left:77%;top:72%;--yr:-16deg}
.arg-yuki-beans i:nth-child(27){left:84%;top:77%;--yr:10deg}.arg-yuki-beans i:nth-child(28){left:90%;top:69%;--yr:-9deg}
.arg-yuki-beans i:nth-child(29){left:18%;top:48%;--yr:7deg}.arg-yuki-beans i:nth-child(30){left:38%;top:43%;--yr:-13deg}
.arg-yuki-beans i:nth-child(31){left:61%;top:43%;--yr:16deg}.arg-yuki-beans i:nth-child(32){left:80%;top:46%;--yr:-10deg}

/* glass lid – closed by default */
.arg-yuki-lid{
  position:absolute;
  left:2%;
  top:-1%;
  width:96%;
  height:58%;
  z-index:8;
  transform-origin:12% 80%;
  transition:transform .15s ease, left .15s ease, top .15s ease;
  pointer-events:none;
}
.arg-yuki-glass{
  position:absolute;
  inset:0;
  border:4px solid rgba(55,55,55,.88);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 48% 42%,rgba(255,255,255,.27),rgba(210,225,225,.13) 55%,rgba(160,175,175,.10) 72%,rgba(255,255,255,.18));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.arg-yuki-lid-rim{
  position:absolute;
  inset:3%;
  border:2px solid rgba(75,75,75,.55);
  border-radius:50%;
}
.arg-yuki-lid-knob{
  position:absolute;
  left:43%;
  top:-18%;
  width:15%;
  height:31%;
  border:3px solid #5d4633;
  border-radius:9px 9px 13px 13px;
  background:linear-gradient(#d3aa75,#a67443);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
}

/* Hold button opens lid from the left hinge side. */
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  transform:translate(7%,-24%) rotate(17deg);
}

/* Smoke is only a visual preview in v3.36.0. */
.arg-yuki-smoke{
  position:absolute;
  inset:5% 10% auto 10%;
  height:48%;
  z-index:4;
  opacity:.34;
}
.arg-yuki-smoke b{
  position:absolute;
  width:24%;
  height:52%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(230,230,230,.72),rgba(220,220,220,.16) 65%,transparent 72%);
}
.arg-yuki-smoke b:nth-child(1){left:8%;top:21%}
.arg-yuki-smoke b:nth-child(2){left:39%;top:4%;width:29%}
.arg-yuki-smoke b:nth-child(3){right:5%;top:25%}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-smoke{
  opacity:.65;
  transform:translateY(-15px);
}

/* Same four flame position as other tools. */
.arg-roaster[data-tool="yukihira"] .arg-burner{
  display:block!important;
  left:8%!important;
  width:70%!important;
  transform:translateY(22px)!important;
  justify-content:space-around!important;
}

/* Yukihira shake preview */
.arg-roaster[data-tool="yukihira"].is-shaking .arg-yuki-pot{
  animation:arg-yuki-shake .28s ease-in-out;
}
@keyframes arg-yuki-shake{
  0%,100%{translate:0 0}
  35%{translate:-8px -3px}
  70%{translate:7px 2px}
}

/* lid button */
.arg-lid-hold{
  display:none;
  flex:1 1 0;
  min-height:56px;
  border:3px solid #1b3e65;
  background:#4277ad;
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  touch-action:none;
}
.arg-lid-hold small{font-size:11px}
.arg-lid-hold[hidden]{display:none!important}
[data-arg-game]:has(.arg-roaster[data-tool="yukihira"]) .arg-lid-hold:not([hidden]){
  display:block;
}

/* with three action buttons, keep them equal width */
.arg-roaster[data-tool="yukihira"] ~ * .arg-action-row{gap:6px}

/* In yukihira mode the ordinary finished-state bean plate is not changed yet;
   this version is for visual/layout confirmation. */


/* =========================================================
   Ver.3.36.1 — Yukihira visual correction
   ========================================================= */

/* Make the entire pot/lid assembly substantially larger. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  left:50%!important;
  top:3%!important;
  width:98%!important;
  height:82%!important;
  transform:translateX(-50%)!important;
}

/* More natural yukihira proportions: wider mouth, deeper round body. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:5%!important;
  top:8%!important;
  width:72%!important;
  height:70%!important;
  border-radius:18% 18% 30% 30% / 18% 18% 35% 35%!important;
}

/* Keep handle attached cleanly to the enlarged pot. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-handle{
  right:-39%!important;
  top:29%!important;
  width:45%!important;
}

/* Inner mouth follows the larger pot. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:3%!important;
  right:3%!important;
  top:6%!important;
  height:66%!important;
}

/* Lid now hinges from the RIGHT side of the pot.
   Closed state covers the mouth; open state pivots upward from right edge. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid{
  left:1%!important;
  top:-2%!important;
  width:98%!important;
  height:59%!important;
  transform-origin:94% 72%!important;
  transition:transform .14s ease-out, left .14s ease-out, top .14s ease-out!important;
}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  left:1%!important;
  top:-2%!important;
  transform:rotate(-42deg) translate(-3%,-10%)!important;
}

/* Beans stay clearly visible in the larger pot. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:37%!important;
  height:53%!important;
}

/* Finished roast: hide pot, lid and burner; retain finished beans handled by common UI. */
.arg-roaster[data-tool="yukihira"][data-finished="1"] .arg-yuki-roaster{
  display:none!important;
}
.arg-roaster[data-tool="yukihira"][data-finished="1"] .arg-burner{
  display:none!important;
}


/* =========================================================
   Ver.3.36.2 — Yukihira structural visual repair
   1) lid opens UPWARD from right hinge
   2) pot side/body is clipped into one coherent silhouette
   ========================================================= */

/* Give the Yukihira assembly enough vertical room for the lid to open upward. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  top:2%!important;
  height:84%!important;
  overflow:visible!important;
}

/* Rebuild visible pot body as a single contained silhouette.
   The mouth is allowed to sit over it, but hammered side decoration cannot escape. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  overflow:visible!important;
  background:linear-gradient(90deg,#bfc1bf 0%,#f0f0ed 18%,#c4c5c2 48%,#ececea 72%,#a9aaa8 100%)!important;
  border-radius:20% 20% 31% 31% / 18% 18% 38% 38%!important;
}

/* Hammered aluminum must remain completely inside the pot wall. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3%!important;
  right:3%!important;
  top:42%!important;
  bottom:4%!important;
  border-radius:0 0 28% 28% / 0 0 42% 42%!important;
  overflow:hidden!important;
  clip-path:inset(0 0 0 0 round 0 0 28% 28%)!important;
  z-index:2!important;
}

/* The dark inner mouth sits cleanly inside the upper rim. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:4%!important;
  right:4%!important;
  top:7%!important;
  height:61%!important;
  border-radius:50%!important;
  z-index:4!important;
}

/* Pour spout remains behind the rim/body, preventing the stray side protrusion look. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pour-spout{
  left:-2%!important;
  top:18%!important;
  width:8%!important;
  height:12%!important;
  z-index:1!important;
}

/* Lid: RIGHT edge is the hinge.
   Closed state stays over the mouth. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid{
  left:2%!important;
  top:-1%!important;
  width:96%!important;
  height:58%!important;
  transform-origin:96% 76%!important;
  transform:rotate(0deg)!important;
  z-index:9!important;
  transition:transform .16s ease-out, top .16s ease-out!important;
}

/* Open UP, not downward. Negative rotation around the right hinge raises
   the left side of the lid above the pot. */
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  left:2%!important;
  top:-5%!important;
  transform-origin:96% 76%!important;
  transform:rotate(48deg)!important;
}

/* Keep lid knob visually attached while opening. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid-knob{
  z-index:3!important;
}

/* Finished roast remains beans-only: pot/lid and flames stay hidden. */
.arg-roaster[data-tool="yukihira"][data-finished="1"] .arg-yuki-roaster,
.arg-roaster[data-tool="yukihira"][data-finished="1"] .arg-burner{
  display:none!important;
}


/* =========================================================
   Ver.3.36.3 — Yukihira curved body + stronger toss motion
   ========================================================= */

/* Rebuild the body with a smooth lid-like curve instead of straight-looking sides.
   The wider top and generous lower radii produce one continuous aluminum silhouette. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:4%!important;
  top:7%!important;
  width:74%!important;
  height:70%!important;
  border:3px solid #6b6d6d!important;
  border-radius:48% 48% 43% 43% / 28% 28% 46% 46%!important;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.85) 0 8%,transparent 28%),
    linear-gradient(90deg,#b9bcba 0%,#f5f5f1 20%,#c8cac7 48%,#f2f2ee 73%,#acafac 100%)!important;
  box-shadow:
    inset 0 -7px 10px rgba(85,85,85,.12),
    inset 0 3px 5px rgba(255,255,255,.6),
    0 4px 5px rgba(0,0,0,.14)!important;
}

/* Keep the hammered texture inside the newly curved side wall. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3.5%!important;
  right:3.5%!important;
  top:39%!important;
  bottom:4%!important;
  border-radius:14% 14% 43% 43% / 12% 12% 55% 55%!important;
  clip-path:ellipse(50% 65% at 50% 38%)!important;
  opacity:.34!important;
}

/* Mouth/rim follows the same clean elliptical language as the lid. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:3%!important;
  right:3%!important;
  top:5%!important;
  height:61%!important;
  border:3px solid #5d6060!important;
  border-radius:50% / 43%!important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.42),
    0 2px 0 rgba(255,255,255,.66)!important;
}

/* Beans are slightly wider and less upright-looking. Their actual angle is randomized in JS. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i{
  width:18px!important;
  height:13px!important;
  margin:-6px -9px!important;
  border-radius:55% 45% 52% 48%!important;
  transform:translate(var(--yjx,0px),var(--yjy,0px)) rotate(var(--yr,0deg));
  transform-origin:center center!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i::after{
  left:13%!important;
  top:46%!important;
  width:74%!important;
  height:2px!important;
  border-radius:50%!important;
}

/* Much larger pan toss. This moves the entire pot/lid/handle assembly as one object. */
.arg-roaster[data-tool="yukihira"].is-shaking .arg-yuki-pot{
  animation:arg-yuki-shake-v3363 .50s cubic-bezier(.20,.72,.22,1)!important;
}
@keyframes arg-yuki-shake-v3363{
  0%   {transform:translate(0,0) rotate(0deg)}
  18%  {transform:translate(-18px,3px) rotate(-5deg)}
  42%  {transform:translate(22px,-14px) rotate(8deg)}
  62%  {transform:translate(9px,-7px) rotate(4deg)}
  82%  {transform:translate(-10px,2px) rotate(-3deg)}
  100% {transform:translate(0,0) rotate(0deg)}
}

@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-beans i{
    width:16px!important;
    height:11px!important;
    margin:-5px -8px!important;
  }
}

/* =========================================================
   Ver.3.36.5 — 1.5x-deeper Yukihira + matching metal interior
                + handle-pivot wok toss
   ========================================================= */

.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  left:50%!important;
  top:-2%!important;
  width:98%!important;
  height:96%!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:4%!important;
  top:0%!important;
  width:74%!important;
  height:102%!important;
  border:3px solid #676a69!important;
  border-radius:47% 47% 42% 42% / 17% 17% 36% 36%!important;
  background:
    radial-gradient(ellipse at 49% 5%,rgba(255,255,255,.78) 0 7%,transparent 23%),
    linear-gradient(90deg,#b9bcba 0%,#f4f4f1 20%,#c7cac7 48%,#eeeeeb 73%,#aaadaa 100%)!important;
  box-shadow:
    inset 0 -8px 12px rgba(78,80,79,.13),
    inset 0 3px 5px rgba(255,255,255,.60),
    0 5px 7px rgba(0,0,0,.15)!important;
  transform-origin:98% 34%!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:3%!important;
  right:3%!important;
  top:3%!important;
  height:55%!important;
  border:3px solid #666968!important;
  border-radius:50% / 40%!important;
  background:
    radial-gradient(ellipse at 48% 20%,rgba(255,255,255,.42) 0 7%,transparent 28%),
    linear-gradient(90deg,#aeb1af 0%,#dedfdb 20%,#b8bbb8 48%,#d9dad7 73%,#a4a7a4 100%)!important;
  box-shadow:
    inset 0 5px 10px rgba(55,58,57,.16),
    inset 0 -3px 6px rgba(70,72,71,.10),
    0 2px 0 rgba(255,255,255,.62)!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3.5%!important;
  right:3.5%!important;
  top:29%!important;
  bottom:2%!important;
  border-radius:12% 12% 42% 42% / 8% 8% 46% 46%!important;
  clip-path:ellipse(50% 71% at 50% 31%)!important;
  opacity:.32!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:39%!important;
  height:48%!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i{
  transform:translate(var(--yjx,0px),var(--yjy,0px)) rotate(var(--yr,0deg));
  will-change:transform;
}

.arg-roaster[data-tool="yukihira"].is-shaking .arg-yuki-pot{
  animation:arg-yuki-handle-pivot-toss-v3365 .72s cubic-bezier(.18,.68,.20,1)!important;
}

@keyframes arg-yuki-handle-pivot-toss-v3365{
  0%   {transform:rotate(0deg) translate(0,0)}
  18%  {transform:rotate(-3deg) translate(1px,2px)}
  42%  {transform:rotate(8deg) translate(-1px,-2px)}
  60%  {transform:rotate(15deg) translate(-2px,-4px)}
  76%  {transform:rotate(8deg) translate(-1px,-2px)}
  90%  {transform:rotate(2deg) translate(0,-1px)}
  100% {transform:rotate(0deg) translate(0,0)}
}

.arg-roaster[data-tool="yukihira"] .arg-burner{
  transform:translateY(48px)!important;
}

@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
    top:-1%!important;
    height:94%!important;
  }
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
    height:99%!important;
  }
  .arg-roaster[data-tool="yukihira"] .arg-burner{
    transform:translateY(42px)!important;
  }
}
\n\n/* =========================================================
   Ver.3.36.6 — compact Yukihira, straighter lower body,
                delayed beans, burning pot + beans + flames
   ========================================================= */

/* Slightly smaller overall drawing than 3.36.5. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  left:50%!important;
  top:3%!important;
  width:91%!important;
  height:88%!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}

/* Keep useful depth but remove the swollen/bulbous lower silhouette.
   Sides are nearly straight and the bottom closes with a shallow ellipse. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:6%!important;
  top:3%!important;
  width:70%!important;
  height:86%!important;
  border:3px solid #676a69!important;
  border-radius:45% 45% 27% 27% / 16% 16% 19% 19%!important;
  background:
    radial-gradient(ellipse at 49% 5%,rgba(255,255,255,.76) 0 7%,transparent 23%),
    linear-gradient(90deg,#b9bcba 0%,#f4f4f1 20%,#c7cac7 48%,#eeeeeb 73%,#aaadaa 100%)!important;
  box-shadow:
    inset 0 -5px 9px rgba(78,80,79,.11),
    inset 0 3px 5px rgba(255,255,255,.60),
    0 4px 6px rgba(0,0,0,.14)!important;
  transform-origin:98% 34%!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:3%!important;
  right:3%!important;
  top:3%!important;
  height:55%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3.5%!important;
  right:3.5%!important;
  top:30%!important;
  bottom:3%!important;
  border-radius:10% 10% 25% 25% / 7% 7% 20% 20%!important;
  clip-path:ellipse(51% 68% at 50% 29%)!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:38%!important;
  height:49%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-burner{
  transform:translateY(31px)!important;
}

/* At ignition the failed-roast view must keep the Yukihira and its beans.
   Only the glass lid disappears; the common red bean-fire layer stays visible. */
.arg-roaster[data-tool="yukihira"].is-burning[data-finished="1"] .arg-yuki-roaster,
.arg-roaster[data-tool="yukihira"].is-burning .arg-yuki-roaster{
  display:block!important;
}
.arg-roaster[data-tool="yukihira"].is-burning .arg-yuki-lid{
  display:none!important;
}
.arg-roaster[data-tool="yukihira"].is-burning .arg-yuki-beans{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
.arg-roaster[data-tool="yukihira"].is-burning .arg-bean-fire-layer{
  display:block!important;
  left:20%!important;
  right:29%!important;
  top:20%!important;
  bottom:28%!important;
  z-index:50!important;
}

@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{width:90%!important;height:86%!important;top:4%!important}
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{width:69%!important;height:84%!important}
  .arg-roaster[data-tool="yukihira"] .arg-burner{transform:translateY(27px)!important}
}


/* =========================================================
   Ver.3.36.7 — lid-matched Yukihira curve + 20% shallower body
   ========================================================= */
/* Keep overall width/position from 3.36.6, but reduce only the pot depth.
   The upper contour uses the same elliptical language as the glass lid. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  height:68.8%!important; /* 80% of the 3.36.6 86% body height */
  border-radius:50% 50% 34% 34% / 20% 20% 24% 24%!important;
  box-shadow:
    inset 0 -4px 8px rgba(78,80,79,.10),
    inset 0 3px 5px rgba(255,255,255,.60),
    0 4px 6px rgba(0,0,0,.14)!important;
}
/* Match the mouth to the lid ellipse and keep the metal interior shallow. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:2%!important;
  right:2%!important;
  top:3%!important;
  height:59%!important;
  border-radius:50% / 42%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3.5%!important;
  right:3.5%!important;
  top:34%!important;
  bottom:3%!important;
  border-radius:12% 12% 34% 34% / 8% 8% 28% 28%!important;
  clip-path:ellipse(51% 69% at 50% 28%)!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:35%!important;
  height:50%!important;
}
/* Bring the burner back up beneath the shallower vessel. */
.arg-roaster[data-tool="yukihira"] .arg-burner{
  transform:translateY(18px)!important;
}
@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{height:67.2%!important}
  .arg-roaster[data-tool="yukihira"] .arg-burner{transform:translateY(16px)!important}
}


/* =========================================================
   Ver.3.36.8 — unified lid/mouth ellipse + corrected side silhouette
                + softer delayed bean toss
   ========================================================= */

/* The body no longer balloons toward the lower corners.
   Keep almost-straight sides and only a gentle, symmetrical bottom curve. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:6%!important;
  top:3%!important;
  width:70%!important;
  height:68.8%!important;
  border:3px solid #676a69!important;
  border-radius:48% 48% 13% 13% / 15% 15% 14% 14%!important;
  overflow:visible!important;
  background:
    radial-gradient(ellipse at 49% 5%,rgba(255,255,255,.76) 0 7%,transparent 23%),
    linear-gradient(90deg,#b9bcba 0%,#f4f4f1 20%,#c7cac7 48%,#eeeeeb 73%,#aaadaa 100%)!important;
  box-shadow:
    inset 0 -4px 8px rgba(78,80,79,.10),
    inset 0 3px 5px rgba(255,255,255,.60),
    0 4px 6px rgba(0,0,0,.14)!important;
}

/* Draw one explicit mouth ellipse. The glass lid uses exactly the same
   left/right geometry so the two rims meet instead of crossing each other. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot::before{
  content:"";
  position:absolute;
  left:2%!important;
  right:2%!important;
  top:0%!important;
  height:47%!important;
  border:3px solid #666968!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
  z-index:5!important;
  background:transparent!important;
  box-shadow:0 2px 0 rgba(255,255,255,.52)!important;
}

/* Interior shares the mouth ellipse, but sits just underneath its rim. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:2%!important;
  right:2%!important;
  top:0%!important;
  height:47%!important;
  border:3px solid #666968!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(ellipse at 48% 20%,rgba(255,255,255,.38) 0 7%,transparent 28%),
    linear-gradient(90deg,#aeb1af 0%,#dedfdb 20%,#b8bbb8 48%,#d9dad7 73%,#a4a7a4 100%)!important;
  box-shadow:
    inset 0 4px 8px rgba(55,58,57,.13),
    inset 0 -2px 5px rgba(70,72,71,.08)!important;
  z-index:4!important;
}

/* Closed lid: identical ellipse footprint to the pot mouth, lifted only enough
   for its lower metal rim to rest on (not inside) the mouth rim. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid{
  left:2%!important;
  top:-7%!important;
  width:96%!important;
  height:47%!important;
  transform-origin:96% 82%!important;
  z-index:9!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-glass{
  inset:0!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid-rim{
  inset:3%!important;
  border-radius:50%!important;
}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  left:2%!important;
  top:-7%!important;
  transform-origin:96% 82%!important;
  transform:rotate(48deg)!important;
}

/* Keep hammered decoration inside the corrected, non-bulging wall. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:3.5%!important;
  right:3.5%!important;
  top:32%!important;
  bottom:4%!important;
  border-radius:6% 6% 12% 12% / 5% 5% 14% 14%!important;
  clip-path:inset(0 round 6% 6% 12% 12%)!important;
  opacity:.30!important;
}

/* Beans remain low in the vessel after the shallower interior correction. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:34%!important;
  height:48%!important;
}

@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{height:67.2%!important}
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot::before,
  .arg-roaster[data-tool="yukihira"] .arg-yuki-inner,
  .arg-roaster[data-tool="yukihira"] .arg-yuki-lid{height:47%!important}
}

/* =========================================================
   Ver.3.36.9 — pot geometry rebuilt from the lid ellipse
                + straight side walls + softer bean toss
   ========================================================= */

/* Use the pot element as a geometry container only.  The visible metal body
   is drawn by ::after, while ::before is the exact mouth ellipse.  This avoids
   the old rounded-rectangle body creating a second, mismatched top curve. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:6%!important;
  top:3%!important;
  width:70%!important;
  height:68.8%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform-origin:98% 23.5%!important;
}

/* The single mouth ellipse.  Closed lid uses the exact same footprint. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot::before{
  content:"";
  position:absolute;
  left:2%!important;
  right:2%!important;
  top:0!important;
  height:47%!important;
  box-sizing:border-box!important;
  border:3px solid #666968!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:0 1px 0 rgba(255,255,255,.58)!important;
  pointer-events:none!important;
  z-index:7!important;
}

/* Front wall begins at the horizontal centreline of the mouth ellipse.
   Sides stay straight; only the bottom corners/edge receive a gentle curve. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot::after{
  content:"";
  position:absolute;
  left:2%!important;
  right:2%!important;
  top:23.5%!important;
  bottom:0!important;
  box-sizing:border-box!important;
  border-left:3px solid #676a69!important;
  border-right:3px solid #676a69!important;
  border-bottom:3px solid #676a69!important;
  border-top:0!important;
  border-radius:0 0 10% 10% / 0 0 13% 13%!important;
  background:
    linear-gradient(90deg,#b9bcba 0%,#f4f4f1 20%,#c7cac7 48%,#eeeeeb 73%,#aaadaa 100%)!important;
  box-shadow:
    inset 0 -3px 7px rgba(78,80,79,.10),
    inset 0 2px 4px rgba(255,255,255,.48),
    0 4px 6px rgba(0,0,0,.14)!important;
  pointer-events:none!important;
  z-index:1!important;
}

/* Interior is the same ellipse as the mouth. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:2%!important;
  right:2%!important;
  top:0!important;
  height:47%!important;
  border:3px solid #666968!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(ellipse at 48% 20%,rgba(255,255,255,.32) 0 7%,transparent 27%),
    linear-gradient(90deg,#aeb1af 0%,#dedfdb 20%,#b8bbb8 48%,#d9dad7 73%,#a4a7a4 100%)!important;
  box-shadow:
    inset 0 4px 8px rgba(55,58,57,.12),
    inset 0 -2px 5px rgba(70,72,71,.08)!important;
  overflow:hidden!important;
  z-index:4!important;
}

/* Closed lid exactly overlays the mouth ellipse instead of sitting lower and
   visually cutting into the wall. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid{
  left:2%!important;
  top:0!important;
  width:96%!important;
  height:47%!important;
  transform-origin:96% 82%!important;
  z-index:9!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-glass{
  inset:0!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid-rim{
  inset:3%!important;
  border-radius:50%!important;
}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  left:2%!important;
  top:0!important;
  transform-origin:96% 82%!important;
  transform:rotate(48deg)!important;
}

/* Hammered marks are clipped to the new straight-sided front wall. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:4%!important;
  right:4%!important;
  top:27%!important;
  bottom:4%!important;
  border-radius:0 0 8% 8% / 0 0 12% 12%!important;
  clip-path:inset(0 round 0 0 8% 8%)!important;
  opacity:.30!important;
  z-index:2!important;
}

.arg-roaster[data-tool="yukihira"] .arg-yuki-handle{
  z-index:6!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;
  right:8%!important;
  top:34%!important;
  height:48%!important;
}

@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{height:67.2%!important}
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot::before,
  .arg-roaster[data-tool="yukihira"] .arg-yuki-inner,
  .arg-roaster[data-tool="yukihira"] .arg-yuki-lid{height:47%!important}
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot::after{top:23.5%!important}
}


/* =========================================================
   Ver.3.36.10 — authoritative Yukihira geometry rebuild
   One SVG owns the body silhouette + mouth ellipse.  This block intentionally
   overrides the accumulated experimental geometry from earlier versions.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  left:6%!important; top:3%!important; width:70%!important; height:68.8%!important;
  border:0!important; border-radius:0!important; background:transparent!important;
  box-shadow:none!important; overflow:visible!important; transform-origin:98% 24%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot::before,
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot::after{content:none!important;display:none!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-svg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-svg svg{display:block;width:100%;height:100%;overflow:visible}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-body{
  fill:url(#argYukiMetal); stroke:#676a69; stroke-width:10; vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-mouth{
  fill:none; stroke:#666968; stroke-width:10; vector-effect:non-scaling-stroke;
}
/* The inner bowl and closed lid use the SAME 93% x 41.7% ellipse footprint as
   SVG mouth (x 3.5..96.5%, centre y 24.2%). */
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  left:3.5%!important; right:3.5%!important; top:3.3%!important; height:41.7%!important;
  box-sizing:border-box!important; border:3px solid #666968!important; border-radius:50%!important;
  background:radial-gradient(ellipse at 48% 20%,rgba(255,255,255,.30) 0 7%,transparent 28%),linear-gradient(90deg,#b0b3b1 0%,#dedfdb 20%,#babdba 48%,#d9dad7 73%,#a6a9a6 100%)!important;
  box-shadow:inset 0 4px 8px rgba(55,58,57,.12)!important; overflow:hidden!important; z-index:4!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid{
  left:3.5%!important; top:3.3%!important; width:93%!important; height:41.7%!important;
  transform-origin:98% 78%!important; z-index:9!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-glass{inset:0!important;border-radius:50%!important;box-sizing:border-box!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid-rim{inset:3%!important;border-radius:50%!important}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-lid{
  left:3.5%!important;top:3.3%!important;transform-origin:98% 78%!important;transform:rotate(48deg)!important
}
/* Decoration stays on the front wall and cannot create silhouette artifacts. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-hammered{
  left:4.5%!important;right:4.5%!important;top:28%!important;bottom:5%!important;
  border-radius:0 0 8% 8% / 0 0 10% 10%!important;clip-path:inset(0 round 0 0 8% 8%)!important;
  opacity:.28!important;z-index:2!important
}
/* Lower resting beans into the bowl. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans{
  left:8%!important;right:8%!important;top:47%!important;height:43%!important;z-index:5!important
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-handle{z-index:6!important}
@media(max-width:420px){
  .arg-roaster[data-tool="yukihira"] .arg-yuki-pot{height:67.2%!important}
  .arg-roaster[data-tool="yukihira"] .arg-yuki-inner,
  .arg-roaster[data-tool="yukihira"] .arg-yuki-lid{top:3.3%!important;height:41.7%!important}
}


/* =========================================================
   Ver.3.36.11 — clean Yukihira silhouette / lighter rim
   Keep bean geometry and toss from 3.36.10 unchanged.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-body{
  stroke:#777b79!important;
  stroke-width:4!important;
  stroke-linejoin:round!important;
  stroke-linecap:round!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-mouth{
  stroke:#747876!important;
  stroke-width:4!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-inner{
  border:1.5px solid #747876!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-glass{
  border-width:1.5px!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-lid-rim{
  border-width:1.5px!important;
}


/* =========================================================
   Ver.3.36.12 — remove left pour-spout artifact / mirror sides
   Only the Yukihira shell silhouette is changed. Bean placement,
   bean toss, lid motion and game logic remain untouched.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pour-spout{
  display:none!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-body{
  stroke:#777b79!important;
  stroke-width:4!important;
  stroke-linejoin:round!important;
  stroke-linecap:round!important;
}


/* =========================================================
   Ver.3.36.13 — exact mirrored Yukihira side geometry
   Body endpoints now share the mouth ellipse x-extents (35/965).
   Left and right wall coordinates are exact mirrors around x=500.
   Beans, toss, lid, rim and game logic are intentionally untouched.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-shell-body{
  stroke:#777b79!important;
  stroke-width:4!important;
  stroke-linejoin:round!important;
  stroke-linecap:round!important;
}


/* =========================================================
   Ver.3.36.14 — static/shaking silhouette unification
   Root cause: the legacy static Yukihira pot still inherited
   perspective(600px) rotateX(8deg), while the shake animation
   replaced transform entirely.  This made the resting left wall
   look more swollen than the same pot while shaking.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  transform:none;
  transform-origin:98% 24%!important;
}
/* Keep the shake using the same unwarped geometry. */
.arg-roaster[data-tool="yukihira"].is-shaking .arg-yuki-pot{
  animation:arg-yuki-handle-pivot-toss-v3365 .72s cubic-bezier(.18,.68,.20,1)!important;
}


/* =========================================================
   Ver.3.36.16 — deeper lid-like bottom / exact flame centering
   Keep straight sides, beans and roast logic unchanged.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  left:53%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-pot{
  transform:none;
  transform-origin:98% 24%!important;
}
.arg-roaster[data-tool="yukihira"].is-shaking .arg-yuki-pot{
  animation:arg-yuki-handle-pivot-toss-v33616 .72s cubic-bezier(.18,.68,.20,1)!important;
}
@keyframes arg-yuki-handle-pivot-toss-v33616{
  0%   {transform:rotate(0deg) translate(0,0)}
  18%  {transform:rotate(-3deg) translate(1px,2px)}
  42%  {transform:rotate(8deg) translate(-1px,-2px)}
  60%  {transform:rotate(15deg) translate(-2px,-4px)}
  76%  {transform:rotate(8deg) translate(-1px,-2px)}
  90%  {transform:rotate(2deg) translate(0,-1px)}
  100% {transform:rotate(0deg) translate(0,0)}
}


/* =========================================================
   Ver.3.36.17 — smooth continuous bottom corners
   Body path uses symmetric cubic Bezier transitions from the
   straight walls into the existing shallow bottom arc.
   Position, beans, toss, lid, flames and roast logic unchanged.
   ========================================================= */

/* =========================================================
   Ver.3.36.18 — lower Yukihira assembly toward burners
   Move the complete pot/beans/lid/handle group down 9px only.
   Shape, horizontal centering, burner position and toss motion unchanged.
   ========================================================= */
.arg-roaster[data-tool="yukihira"] .arg-yuki-roaster{
  transform:translate(-50%, 9px)!important;
}

/* =========================================================
   Ver.3.36.19 — raise Yukihira ignition flames to bean bed
   Only the red/orange bean-fire overlay moves upward.
   Pot, beans, lid, burner flames, toss and roast logic unchanged.
   ========================================================= */
.arg-roaster[data-tool="yukihira"].is-burning .arg-bean-fire-layer{
  transform:translateY(-12px)!important;
}

/* ============================================================
   Ver.3.36.20 — raise Yukihira ignition flames further
   Only the red/orange bean-fire overlay moves 10px further up.
   ============================================================ */
.arg-roaster[data-tool="yukihira"].is-burning .arg-bean-fire-layer{
  transform:translateY(-22px)!important;
}

/* ============================================================
   Ver.3.36.21 — fill the front/lower bean bed + raise ignition flames
   Add a second foreground bean row so the visible bowl floor no longer
   reads as an empty strip. Existing bean positions, toss logic and colour
   progression are preserved. Ignition flames move upward only.
   ============================================================ */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(33){left:5%;top:88%;--yr:-18deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(34){left:11%;top:92%;--yr:11deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(35){left:17%;top:86%;--yr:-7deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(36){left:23%;top:93%;--yr:16deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(37){left:29%;top:87%;--yr:-13deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(38){left:35%;top:94%;--yr:8deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(39){left:41%;top:88%;--yr:-20deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(40){left:47%;top:93%;--yr:14deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(41){left:53%;top:87%;--yr:-9deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(42){left:59%;top:94%;--yr:18deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(43){left:65%;top:88%;--yr:-15deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(44){left:71%;top:93%;--yr:6deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(45){left:77%;top:87%;--yr:-11deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(46){left:83%;top:92%;--yr:17deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(47){left:89%;top:86%;--yr:-6deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(48){left:94%;top:91%;--yr:12deg}

/* Keep the new foreground row visually inside the bowl while allowing the
   same per-bean shake/toss animation to act on it. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(n+33){
  z-index:7;
}

/* Move only the red/orange ignition overlay farther above the bean bed. */
.arg-roaster[data-tool="yukihira"].is-burning .arg-bean-fire-layer{
  transform:translateY(-34px)!important;
}


/* ==========================================================
   Ver.3.36.22 — raise Yukihira ignition flames slightly more
   Only the red/orange ignition overlay moves 5px upward.
   Bean bed, pot, burner flames, toss and roast logic unchanged.
   ========================================================== */
.arg-roaster[data-tool="yukihira"].is-burning .arg-bean-fire-layer{
  transform:translateY(-39px)!important;
}

/* ==========================================================
   Ver.3.36.24 — foreground beans join the real Yukihira toss
   Remove the Ver.3.36.23 !important transform that pinned the added
   foreground beans in place and prevented Web Animations from moving them.
   Beans 41–48 rest just below the clipped bowl area, then jump naturally
   into the visible front region during a toss via animateYukihiraBeans().
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(41){top:104%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(42){top:108%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(43){top:103%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(44){top:109%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(45){top:104%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(46){top:107%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(47){top:103%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(48){top:108%!important}


/* ==========================================================
   Ver.3.36.25 — larger hidden bean reserve under the front bowl
   Beans 49–60 remain below the clipped bowl at rest. During a pan toss
   they participate in animateYukihiraBeans(), briefly appearing in the
   front/lower region. Existing visible bean density is unchanged.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(49){left:8%;top:110%;--yr:-24deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(50){left:16%;top:105%;--yr:13deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(51){left:24%;top:112%;--yr:-8deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(52){left:32%;top:106%;--yr:21deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(53){left:40%;top:111%;--yr:-16deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(54){left:48%;top:105%;--yr:7deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(55){left:56%;top:113%;--yr:-19deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(56){left:64%;top:107%;--yr:15deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(57){left:72%;top:111%;--yr:-10deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(58){left:80%;top:106%;--yr:23deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(59){left:88%;top:112%;--yr:-14deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(60){left:94%;top:108%;--yr:9deg}


/* ==========================================================
   Ver.3.36.26 — dense low/front toss reserve
   Add 24 more beans (61–84) below the visible bowl. They stay hidden
   at rest, but the JS toss lifts them through the low/front band across
   the full pan width, eliminating the sparse strip during a shake.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(61){left:4%;top:116%;--yr:-21deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(62){left:12%;top:121%;--yr:12deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(63){left:20%;top:113%;--yr:-9deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(64){left:28%;top:124%;--yr:18deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(65){left:36%;top:117%;--yr:-15deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(66){left:44%;top:122%;--yr:7deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(67){left:52%;top:114%;--yr:-19deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(68){left:60%;top:125%;--yr:14deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(69){left:68%;top:118%;--yr:-11deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(70){left:76%;top:123%;--yr:22deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(71){left:84%;top:115%;--yr:-6deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(72){left:92%;top:120%;--yr:10deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(73){left:4%;top:128%;--yr:16deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(74){left:12%;top:119%;--yr:-13deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(75){left:20%;top:126%;--yr:8deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(76){left:28%;top:121%;--yr:-20deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(77){left:36%;top:129%;--yr:11deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(78){left:44%;top:118%;--yr:-7deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(79){left:52%;top:127%;--yr:19deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(80){left:60%;top:120%;--yr:-16deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(81){left:68%;top:130%;--yr:6deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(82){left:76%;top:119%;--yr:-23deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(83){left:84%;top:126%;--yr:14deg}
.arg-roaster[data-tool="yukihira"] .arg-yuki-beans i:nth-child(84){left:92%;top:122%;--yr:-10deg}

/* ==========================================================
   Ver.3.36.27 — frying-pan bean coverage at both ends/front
   Frying-pan only: redistribute the last 18 visual beans into the
   previously empty left edge, right edge and lower/front centre.
   Other roasting tools and all roast logic remain unchanged.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(49){left:5%!important;top:49%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(50){left:8%!important;top:57%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(51){left:11%!important;top:64%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(52){left:14%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(53){left:95%!important;top:49%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(54){left:92%!important;top:57%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(55){left:89%!important;top:64%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(56){left:86%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(57){left:30%!important;top:76%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(58){left:35%!important;top:80%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(59){left:40%!important;top:77%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(60){left:45%!important;top:82%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(61){left:50%!important;top:78%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(62){left:55%!important;top:82%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(63){left:60%!important;top:77%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(64){left:65%!important;top:80%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(65){left:70%!important;top:76%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(66){left:50%!important;top:86%!important}

/* ==========================================================
   Ver.3.36.35 — root frying-pan spatula position + angle-safe bean hopping
   Root cause fix:
   - Earlier 3.36.28+ overrides were accidentally stored as literal "\\n" text,
     so the browser ignored them.
   - The older authoritative stir keyframes forced rotate(0deg), making beans
     look upright during stirring.
   This block is valid CSS and is the final authority for frying-pan stirring.
   ========================================================== */

/* Keep decorative reserve beans inert unless a future version explicitly uses them. */
.arg-fry-hidden-beans{display:none!important;}

/* Move the actual spatula element clearly farther upper-right.
   Its stir animation only translates from this new fixed anchor. */
.arg-roaster[data-tool="fryingpan"] .arg-spatula{
  left:58%!important;
  top:-42%!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  display:block!important;
  animation:arg-spatula-v33635 .72s ease-in-out 1!important;
}
@keyframes arg-spatula-v33635{
  0%   {transform:translate(3px,-3px) rotate(-48deg);}
  28%  {transform:translate(-2px,2px) rotate(-47deg);}
  58%  {transform:translate(-10px,9px) rotate(-46deg);}
  82%  {transform:translate(-2px,2px) rotate(-47deg);}
  100% {transform:translate(3px,-3px) rotate(-48deg);}
}

/* Preserve each bean's original random resting angle throughout the hop.
   Only X/Y change; rotation never resets to 0deg. */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-angle-safe-hop-v33635 .82s cubic-bezier(.18,.72,.24,1)!important;
  animation-delay:var(--stir-delay,0s)!important;
}
@keyframes arg-bean-angle-safe-hop-v33635{
  0%   {transform:translate(0,0) rotate(var(--r,0deg));}
  22%  {transform:translate(var(--stir-x,18px),var(--stir-y,-14px)) rotate(var(--r,0deg));}
  46%  {transform:translate(var(--stir-x2,-12px),1px) rotate(var(--r,0deg));}
  68%  {transform:translate(calc(var(--stir-x,18px) * .48),var(--stir-y2,-7px)) rotate(var(--r,0deg));}
  86%  {transform:translate(calc(var(--stir-x2,-12px) * .22),-2px) rotate(var(--r,0deg));}
  100% {transform:translate(0,0) rotate(var(--r,0deg));}
}


/* ==========================================================
   Ver.3.36.36 — larger spatula stroke + 0.3s bean delay
   Keep the approved resting spatula anchor from 3.36.35.
   Only the stirring stroke is enlarged. Bean hop timing is supplied
   by JS with a minimum 0.30s delay after the stir button press.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  animation:arg-spatula-v33636 .92s cubic-bezier(.36,.02,.24,1) 1!important;
}
@keyframes arg-spatula-v33636{
  0%   {transform:translate(4px,-5px) rotate(-49deg);}
  18%  {transform:translate(-8px,5px) rotate(-47deg);}
  48%  {transform:translate(-34px,25px) rotate(-43deg);}
  72%  {transform:translate(-15px,11px) rotate(-46deg);}
  100% {transform:translate(4px,-5px) rotate(-49deg);}
}
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-beans i:not(.is-spilling){
  animation:arg-bean-angle-safe-hop-v33635 .82s cubic-bezier(.18,.72,.24,1)!important;
  animation-delay:var(--stir-delay,.30s)!important;
}


/* ==========================================================
   Ver.3.36.37 — faster spatula, slightly lower-left anchor,
   and slightly lower bean-fire position.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-spatula{
  left:55%!important;
  top:-36%!important;
}
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  animation:arg-spatula-v33637 .68s cubic-bezier(.30,.02,.22,1) 1!important;
}
@keyframes arg-spatula-v33637{
  0%   {transform:translate(4px,-5px) rotate(-49deg);}
  18%  {transform:translate(-8px,5px) rotate(-47deg);}
  48%  {transform:translate(-34px,25px) rotate(-43deg);}
  72%  {transform:translate(-15px,11px) rotate(-46deg);}
  100% {transform:translate(4px,-5px) rotate(-49deg);}
}
/* Only the ignition flames over the beans move down; burner flames are untouched. */
.arg-roaster[data-tool="fryingpan"].is-burning .arg-bean-fire-layer{
  top:10%!important;
}

/* ==========================================================
   Ver.3.36.38 — two rapid spatula round trips + bean fire left/down
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  animation:arg-spatula-v33638 .82s linear 1!important;
}
@keyframes arg-spatula-v33638{
  0%   {transform:translate(4px,-5px) rotate(-49deg);}
  12%  {transform:translate(-36px,25px) rotate(-43deg);}
  25%  {transform:translate(8px,-7px) rotate(-50deg);}
  38%  {transform:translate(-38px,27px) rotate(-42deg);}
  52%  {transform:translate(6px,-6px) rotate(-49deg);}
  68%  {transform:translate(-37px,26px) rotate(-43deg);}
  82%  {transform:translate(7px,-7px) rotate(-50deg);}
  100% {transform:translate(4px,-5px) rotate(-49deg);}
}
/* Move only the bean-fire layer left and down; burner flames remain unchanged. */
.arg-roaster[data-tool="fryingpan"].is-burning .arg-bean-fire-layer{
  left:-5%!important;
  top:14%!important;
}

/* ==========================================================
   Ver.3.36.39 — exactly two spatula round trips + bean fire right/down
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-pan.is-stirring .arg-spatula{
  animation:arg-spatula-v33639 .68s linear 1!important;
}
@keyframes arg-spatula-v33639{
  0%   {transform:translate(4px,-5px) rotate(-49deg);}
  25%  {transform:translate(-38px,27px) rotate(-42deg);}
  50%  {transform:translate(4px,-5px) rotate(-49deg);}
  75%  {transform:translate(-38px,27px) rotate(-42deg);}
  100% {transform:translate(4px,-5px) rotate(-49deg);}
}
/* Move only the ignition flames over the frying-pan beans right/down. */
.arg-roaster[data-tool="fryingpan"].is-burning .arg-bean-fire-layer{
  left:1%!important;
  top:18%!important;
}


/* ==========================================================
   Ver.3.36.40 — mesh-lid roaster: larger shake/toss + deeper beans
   Frying-pan and other roaster visuals remain unchanged.
   ========================================================== */
.arg-roaster:not([data-tool="meshpan"]) .arg-mesh-reserve-bean{
  display:none!important;
}
.arg-roaster[data-tool="meshpan"] .arg-mesh-reserve-bean{
  display:block;
}
/* Lower the complete visible bean bed slightly. The pan-bed clipping keeps
   the lowest beans naturally hidden behind the front/side body. */
.arg-roaster[data-tool="meshpan"] .arg-beans{
  transform:translateY(6px);
}
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking{
  animation:arg-meshpan-shake-v33640 .56s cubic-bezier(.28,.05,.25,1) 1!important;
}
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation:arg-meshpan-bean-toss-v33640 .48s cubic-bezier(.18,.70,.22,1) var(--delay) 1!important;
}
@keyframes arg-meshpan-shake-v33640{
  0%,100%{transform:rotateX(50deg) rotateZ(0deg) translateX(0) translateY(0)}
  18%{transform:rotateX(50deg) rotateZ(-9deg) translateX(-17px) translateY(-3px)}
  45%{transform:rotateX(50deg) rotateZ(8deg) translateX(19px) translateY(-6px)}
  72%{transform:rotateX(50deg) rotateZ(-7deg) translateX(-14px) translateY(-3px)}
}
@keyframes arg-meshpan-bean-toss-v33640{
  0%,100%{margin-top:-6px;transform:rotate(var(--r)) translate(0,0)}
  24%{margin-top:-14px;transform:rotate(var(--r)) translate(-5px,-4px)}
  52%{margin-top:-34px;transform:rotate(var(--r)) translate(8px,-10px)}
  78%{margin-top:-18px;transform:rotate(var(--r)) translate(-3px,-5px)}
}


/* ==========================================================
   Ver.3.36.41 — mesh-lid roaster ignition flames aligned lower
   Only the red/orange bean-fire overlay for meshpan is moved.
   Shake motion, bean toss/depth, frying pan and burner flames stay unchanged.
   ========================================================== */
.arg-roaster[data-tool="meshpan"].is-burning .arg-bean-fire-layer{
  top:18%!important;
}

/* ==========================================================
   Ver.3.36.42 — mesh-lid ignition flames slightly left/lower
   Only the red/orange bean-fire overlay for meshpan is moved.
   All Ver.3.36.41 shake/bean/frying-pan behavior is preserved.
   ========================================================== */
.arg-roaster[data-tool="meshpan"].is-burning .arg-bean-fire-layer{
  left:-4%!important;
  top:22%!important;
}

/* ==========================================================
   Ver.3.36.43 — frying-pan bean positions kept inside the rim
   Position-only correction. Pan layers, bean count/design, spatula,
   stirring animation and all other roasters remain unchanged.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(49){left:12%!important;top:48%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(50){left:15%!important;top:55%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(51){left:18%!important;top:61%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(52){left:21%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(53){left:88%!important;top:48%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(54){left:85%!important;top:55%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(55){left:82%!important;top:61%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(56){left:79%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(57){left:31%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(58){left:36%!important;top:72%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(59){left:41%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(60){left:46%!important;top:73%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(61){left:50%!important;top:71%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(62){left:54%!important;top:73%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(63){left:59%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(64){left:64%!important;top:72%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(65){left:69%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(66){left:50%!important;top:74%!important}

/* ==========================================================
   Ver.3.36.44 — frying-pan beans lower and clear of the rim
   Position-only correction: keep the bean field below the upper inner-wall
   line and concentrate the front/lower beans without changing bean art,
   count, spatula or stirring behavior.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:not(.is-spilling){
  left:clamp(14%,var(--x),86%)!important;
  top:clamp(40%,var(--y),68%)!important;
}
/* Keep the extra front/lower beans dense, but safely inside the visible rim. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(49){left:16%!important;top:52%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(50){left:19%!important;top:58%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(51){left:22%!important;top:63%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(52){left:25%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(53){left:84%!important;top:52%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(54){left:81%!important;top:58%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(55){left:78%!important;top:63%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(56){left:75%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(57){left:30%!important;top:64%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(58){left:35%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(59){left:40%!important;top:65%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(60){left:45%!important;top:68%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(61){left:50%!important;top:65%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(62){left:55%!important;top:68%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(63){left:60%!important;top:65%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(64){left:65%!important;top:67%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(65){left:70%!important;top:64%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(66){left:50%!important;top:68%!important}


/* ==========================================================
   Ver.3.36.45 — frying-pan bean bed wider and fuller toward front
   Keep the Ver.3.36.44 upper limit, while spreading beans farther
   left/right and toward the lower/front area. Position-only change.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:not(.is-spilling){
  left:clamp(10%,var(--x),90%)!important;
  top:clamp(40%,calc(var(--y) + 7%),72%)!important;
}
/* Fill the lower/front arc more densely while staying clear of the rim. */
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(49){left:12%!important;top:55%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(50){left:15%!important;top:61%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(51){left:18%!important;top:66%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(52){left:22%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(53){left:88%!important;top:55%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(54){left:85%!important;top:61%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(55){left:82%!important;top:66%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(56){left:78%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(57){left:27%!important;top:68%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(58){left:32%!important;top:71%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(59){left:37%!important;top:69%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(60){left:42%!important;top:72%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(61){left:47%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(62){left:53%!important;top:72%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(63){left:58%!important;top:70%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(64){left:63%!important;top:71%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(65){left:68%!important;top:69%!important}
.arg-roaster[data-tool="fryingpan"] .arg-beans i:nth-child(66){left:73%!important;top:71%!important}


/* ==========================================================
   Ver.3.36.47 — true elliptical frying-pan bean bed
   High-specificity position-only override. This intentionally wins over
   legacy nth-child placement rules from 3.36.43–45, which were the reason
   beans still formed a horizontal strip even after JS generated ellipse
   coordinates. Other roasters and stirring behavior are unchanged.
   ========================================================== */
.arg-roaster[data-tool="fryingpan"] .arg-pan .arg-pan-bed .arg-beans > i:not(.is-spilling):not(.arg-mesh-reserve-bean){
  left:var(--fp-x)!important;
  top:var(--fp-y)!important;
}

/* ==========================================================
   Ver.3.36.48 — frying-pan three-zone ellipse distribution
   JS now guarantees rear/middle/front bean populations. The existing
   high-specificity --fp-x/--fp-y position rule remains the sole final
   authority, so no legacy nth-child rule can flatten the distribution.
   ========================================================== */
/* ==========================================================
   Ver.3.36.51 — mesh-lid roaster only: bean bed farther down
   Main/resting coordinates are generated lower in JS. During shake,
   retain the approved lateral movement while preventing the beans from
   climbing back toward the rear-wall guide line. Other tools untouched.
   ========================================================== */
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation:arg-meshpan-bean-toss-v33651 .48s cubic-bezier(.18,.70,.22,1) var(--delay) 1!important;
}
@keyframes arg-meshpan-bean-toss-v33651{
  0%,100%{margin-top:3px;transform:rotate(var(--r)) translate(0,0)}
  24%{margin-top:1px;transform:rotate(var(--r)) translate(-10px,0)}
  52%{margin-top:-2px;transform:rotate(var(--r)) translate(15px,-1px)}
  78%{margin-top:0;transform:rotate(var(--r)) translate(-8px,0)}
}


/* ==========================================================
   Ver.3.36.52 — mesh-lid roaster only
   Keep upper-left/right beans lower while preserving a wide, filled bean bed.
   Shake remains strongly lateral; other roasters and ignition flames untouched.
   ========================================================== */
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation:arg-meshpan-bean-toss-v33652 .48s cubic-bezier(.18,.70,.22,1) var(--delay) 1!important;
}
@keyframes arg-meshpan-bean-toss-v33652{
  0%,100%{margin-top:5px;transform:rotate(var(--r)) translate(0,0)}
  24%{margin-top:4px;transform:rotate(var(--r)) translate(-12px,0)}
  52%{margin-top:1px;transform:rotate(var(--r)) translate(17px,-1px)}
  78%{margin-top:3px;transform:rotate(var(--r)) translate(-10px,0)}
}


/* ==========================================================
   Ver.3.36.53 — mesh-lid roaster only
   1) Resting bean bed is generated substantially lower in JS.
   2) Replace the stepped multi-stop toss with one smooth arc.
      Start/end positions remain low; lateral spread stays strong.
   Other roasting tools and flame positions are untouched.
   ========================================================== */
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation:arg-meshpan-bean-toss-v33653 .62s cubic-bezier(.25,.72,.32,1) var(--delay) 1 both!important;
  will-change:transform,margin-top;
}
@keyframes arg-meshpan-bean-toss-v33653{
  0%{margin-top:7px;transform:rotate(var(--r)) translate3d(0,0,0)}
  50%{margin-top:1px;transform:rotate(var(--r)) translate3d(var(--mesh-hop-x,18px),-3px,0)}
  100%{margin-top:7px;transform:rotate(var(--r)) translate3d(0,0,0)}
}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(2n){--mesh-hop-x:-18px;}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(3n){--mesh-hop-x:22px;}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(5n){--mesh-hop-x:-22px;}


/* ==========================================================
   Ver.3.36.54 — mesh-lid roaster only / authoritative cleanup
   - Repair the old malformed literal-\n CSS block so --mesh-x/--mesh-y
     are actually applied to resting beans.
   - Keep the complete bean bed decisively low and wide.
   - Use one smooth, non-truncated shake arc (no per-bean delay cutoff).
   Other roasting tools and ignition-flame positions are untouched.
   ========================================================== */
.arg-roaster[data-tool="meshpan"] .arg-pan .arg-pan-bed .arg-beans > i:not(.arg-mesh-reserve-bean):not(.is-spilling){
  left:var(--mesh-x)!important;
  top:var(--mesh-y)!important;
}
.arg-roaster[data-tool="meshpan"] .arg-pan .arg-pan-bed .arg-beans > i.arg-mesh-reserve-bean{
  left:var(--x)!important;
  top:var(--y)!important;
}
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation-name:arg-meshpan-bean-toss-v33654!important;
  animation-duration:.54s!important;
  animation-timing-function:cubic-bezier(.30,.02,.26,1)!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  animation-fill-mode:both!important;
  will-change:transform;
}
@keyframes arg-meshpan-bean-toss-v33654{
  0%{transform:rotate(var(--r)) translate3d(0,0,0)}
  50%{transform:rotate(var(--r)) translate3d(var(--mesh-hop-x,18px),-9px,0)}
  100%{transform:rotate(var(--r)) translate3d(0,0,0)}
}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(2n){--mesh-hop-x:-18px;}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(3n){--mesh-hop-x:23px;}
.arg-roaster[data-tool="meshpan"] .arg-beans i:nth-child(5n){--mesh-hop-x:-23px;}


/* Ver.3.36.56 — mesh-lid roaster only.
   Resting positions come from the JS ellipse.  Individual bean tosses use the
   Web Animations API, so disable legacy CSS bean keyframes for this tool only. */
.arg-roaster[data-tool="meshpan"] .arg-pan.is-shaking .arg-beans i{
  animation:none!important;
}


/* ==========================================================
   Ver.3.36.57 — mesh-lid roaster only
   Move only the red/orange ignition flame overlay right/down.
   Burner flames and all other roasting tools are untouched.
   ========================================================== */
.arg-roaster[data-tool="meshpan"].is-burning .arg-bean-fire-layer{
  left:0%!important;
  top:27%!important;
}

/* ==========================================================
   Ver.3.36.58 — mesh-lid roaster only
   Keep Ver.3.36.57 bean layout/toss unchanged.
   Move only the ignition flame overlay farther down and soften
   the mesh-lid opening/rim outline from black to dark gray.
   ========================================================== */
.arg-roaster[data-tool="meshpan"].is-burning .arg-bean-fire-layer{
  left:0%!important;
  top:34%!important;
}
.arg-roaster[data-tool="meshpan"] .arg-pan-bed{
  border-color:#555!important;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(70,75,78,.16),
    0 0 0 2px #555!important;
}
.arg-roaster[data-tool="meshpan"] .arg-mesh{
  box-shadow:inset 0 0 0 1px #5a5a5a!important;
}

/* ==========================================================
   Ver.3.36.64 — drum ignition flame clipping fix
   Drum only: keep the Ver.3.36.63 bean-position-based fire origin,
   but allow each flame tip to render outside the dynamically sized
   fire layer instead of being cut at the layer's upper boundary.
   Other roasting tools retain their existing clipping behavior.
   ========================================================== */
.arg-roaster[data-tool="drum"].is-burning .arg-bean-fire-layer{
  overflow:visible!important;
  border-radius:0!important;
}


/* ==========================================================
   Ver.3.36.66 — Yukihira-only smoke/exhaust visual repair.
   Pot/lid/beans/agitation geometry is intentionally untouched.
   The actual opacity/transform is driven directly by game.js so
   smoke accumulation is visible even on browsers without calc()
   multiplication support.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke{
  display:block!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform-origin:50% 100%!important;
  opacity:.04;
  filter:blur(.4px) grayscale(.15);
  transition:opacity .16s linear,transform .20s ease-out,filter .18s linear;
  will-change:opacity,transform,filter;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b{
  opacity:.82;
  transform-origin:50% 85%;
  transition:opacity .18s linear,filter .18s linear;
  will-change:transform,opacity;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-heavy-smoke b{
  filter:grayscale(.82) brightness(.94);
}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-smoke{
  z-index:20!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b:nth-child(1){animation:arg-yuki-vent-puff-a .72s ease-out both}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b:nth-child(2){animation:arg-yuki-vent-puff-b .82s ease-out both}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b:nth-child(3){animation:arg-yuki-vent-puff-c .76s ease-out both}
@keyframes arg-yuki-vent-puff-a{
  0%{transform:translate(0,6px) scale(.82);opacity:.25}
  35%{transform:translate(-5px,-24px) scale(1.18);opacity:.95}
  100%{transform:translate(-12px,-58px) scale(1.55);opacity:0}
}
@keyframes arg-yuki-vent-puff-b{
  0%{transform:translate(0,5px) scale(.78);opacity:.28}
  32%{transform:translate(3px,-30px) scale(1.22);opacity:1}
  100%{transform:translate(9px,-68px) scale(1.65);opacity:0}
}
@keyframes arg-yuki-vent-puff-c{
  0%{transform:translate(0,7px) scale(.80);opacity:.22}
  38%{transform:translate(7px,-22px) scale(1.15);opacity:.90}
  100%{transform:translate(15px,-55px) scale(1.48);opacity:0}
}


/* ==========================================================
   Ver.3.36.67 — Yukihira smoke layer moved OUTSIDE the clipped
   inner bowl.  This is intentionally visual-only: pot/lid/beans
   geometry and agitation remain unchanged.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke{
  position:absolute!important;
  left:19%!important;
  top:14%!important;
  width:62%!important;
  height:34%!important;
  inset:auto!important;
  z-index:8!important;
  overflow:visible!important;
  pointer-events:none!important;
  opacity:0;
  transform-origin:50% 100%!important;
  mix-blend-mode:normal!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b{
  position:absolute!important;
  display:block!important;
  width:24%!important;
  height:56%!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 50% 58%,rgba(238,238,236,.92) 0 24%,rgba(190,190,187,.64) 45%,rgba(150,150,148,.26) 64%,transparent 76%)!important;
  box-shadow:0 0 12px rgba(210,210,205,.24)!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(1){left:2%!important;top:30%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(2){left:20%!important;top:8%!important;width:27%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(3){left:40%!important;top:23%!important;width:25%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(4){left:59%!important;top:5%!important;width:27%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(5){right:0!important;top:31%!important;width:23%!important}
/* Closed: smoke sits beneath the glass lid. Open: it is allowed to rise well above the pot. */
.arg-roaster[data-tool="yukihira"]:not(.is-yuki-lid-open) .arg-yuki-smoke{z-index:8!important}
.arg-roaster[data-tool="yukihira"].is-yuki-lid-open .arg-yuki-smoke{z-index:14!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-heavy-smoke b{
  background:radial-gradient(circle at 50% 58%,rgba(218,218,215,.95) 0 24%,rgba(145,145,143,.72) 46%,rgba(105,105,103,.34) 66%,transparent 77%)!important;
}


/* ==========================================================
   Ver.3.36.68 — Yukihira smoke staging / distribution / colour
   Smoke only. Pot, lid, beans and agitation are untouched.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke{
  left:15%!important; top:12%!important; width:70%!important; height:38%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b{
  display:none!important; width:20%!important; height:52%!important;
}
/* 2 -> 4 -> 6 visible puffs. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="2"] b:nth-child(-n+2),
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="4"] b:nth-child(-n+4),
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="6"] b:nth-child(-n+6){display:block!important}
/* Spread across the full mouth; deliberately uneven to avoid a row. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(1){left:2%!important;top:35%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(2){left:19%!important;top:9%!important;width:23%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(3){left:35%!important;top:30%!important;width:19%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(4){left:51%!important;top:4%!important;width:23%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(5){left:68%!important;top:27%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(6){left:82%!important;top:12%!important;width:18%!important}
/* Roast-stage colour progression: steam-white -> pale gray -> gray -> dark gray -> charcoal. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.smoke-stage-early b{background:radial-gradient(circle at 50% 58%,rgba(252,252,250,.90) 0 24%,rgba(235,235,231,.58) 46%,rgba(220,220,216,.18) 66%,transparent 78%)!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.smoke-stage-yellow b{background:radial-gradient(circle at 50% 58%,rgba(240,239,234,.92) 0 24%,rgba(205,204,198,.64) 46%,rgba(170,170,164,.24) 66%,transparent 78%)!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.smoke-stage-first b{background:radial-gradient(circle at 50% 58%,rgba(218,218,214,.94) 0 24%,rgba(170,170,166,.70) 46%,rgba(125,125,122,.30) 66%,transparent 78%)!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.smoke-stage-second b{background:radial-gradient(circle at 50% 58%,rgba(190,190,187,.95) 0 24%,rgba(125,125,122,.76) 46%,rgba(82,82,80,.38) 66%,transparent 78%)!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.smoke-stage-dark b{background:radial-gradient(circle at 50% 58%,rgba(150,150,147,.96) 0 22%,rgba(88,88,85,.82) 46%,rgba(45,45,43,.48) 67%,transparent 79%)!important}
/* Vent puff works for every currently visible puff. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b{animation:arg-yuki-vent-puff-v33668 .95s ease-out both!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b:nth-child(2n){animation-delay:.05s!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke.is-vent-puff b:nth-child(3n){animation-delay:.10s!important}
@keyframes arg-yuki-vent-puff-v33668{
  0%{transform:translate(0,5px) scale(.82);opacity:.35}
  35%{transform:translate(var(--vent-x,4px),-28px) scale(1.20);opacity:.95}
  100%{transform:translate(var(--vent-x,8px),-70px) scale(1.62);opacity:0}
}

/* ==========================================================
   Ver.3.36.70 — Yukihira smoke centering only.
   Keep pot/lid/beans/agitation geometry untouched.
   Six puffs are arranged as three mirrored pairs around the
   horizontal centre of the pot so 2/4/6 stages stay centered.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke{
  left:18%!important;
  width:58%!important;
  top:12%!important;
  height:38%!important;
}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b{width:20%!important;height:52%!important}
/* Pair 1 (shown at 2): centre pair */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(1){left:29%!important;top:28%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(2){left:51%!important;top:8%!important;width:20%!important}
/* Pair 2 (shown at 4): middle left/right */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(3){left:12%!important;top:12%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(4){left:68%!important;top:30%!important;width:20%!important}
/* Pair 3 (shown at 6): outer left/right */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(5){left:0%!important;top:34%!important;width:18%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(6){left:82%!important;top:10%!important;width:18%!important}


/* ==========================================================
   Ver.3.36.71 — Yukihira smoke final centering + stage visibility.
   Smoke only; pot/lid/beans/agitation geometry is untouched.
   ========================================================== */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke{
  left:21%!important;
  width:58%!important;
  top:12%!important;
  height:38%!important;
}
/* Explicitly keep non-selected puffs hidden, then reveal 2/4/6 symmetrically. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b{display:none!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="2"] b:nth-child(-n+2),
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="4"] b:nth-child(-n+4),
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke[data-puffs="6"] b:nth-child(-n+6){display:block!important}
/* Mirrored pairs around the true horizontal centre of the pot. */
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(1){left:29%!important;top:28%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(2){left:51%!important;top:8%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(3){left:12%!important;top:12%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(4){left:68%!important;top:30%!important;width:20%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(5){left:0%!important;top:34%!important;width:18%!important}
.arg-roaster[data-tool="yukihira"] .arg-yuki-smoke b:nth-child(6){left:82%!important;top:10%!important;width:18%!important}

/* Ver.3.37.0 — shared historical rankings */
.arg-ranking{margin:18px 0 12px;padding:14px;border:2px solid #4a382d;border-radius:12px;background:#fffaf0;color:#2f241e}
.arg-ranking-register>strong{display:block;margin-bottom:8px;font-size:15px}
.arg-ranking-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.arg-ranking-form input{width:180px;max-width:100%;padding:9px 10px;border:1px solid #9a8778;border-radius:7px;font-size:16px;background:#fff}
.arg-ranking-form button{padding:9px 16px;border:0;border-radius:7px;background:#5d7b45;color:#fff;font-weight:800;cursor:pointer}
.arg-ranking-form button:disabled{opacity:.5;cursor:default}
.arg-ranking-register small{display:block;margin-top:6px;min-height:1.4em}
.arg-ranking-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;text-align:left}
.arg-ranking-lists>div{border:1px solid #d8c8b8;border-radius:9px;padding:10px;background:#fff}
.arg-ranking-lists h4{margin:0 0 7px;text-align:center;font-size:14px}
.arg-ranking-lists ol{margin:0;padding-left:28px}
.arg-ranking-lists li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px;align-items:center;padding:4px 0;border-bottom:1px dashed #e2d7cb;font-size:12px}
.arg-ranking-lists li.has-beans{grid-template-columns:auto minmax(0,1fr) auto auto}.arg-ranking-lists li:last-child{border-bottom:0}.arg-ranking-lists li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arg-ranking-lists li strong{font-size:13px;white-space:nowrap}.arg-ranking-lists li time{color:#76675d;font-size:11px;white-space:nowrap}.arg-ranking-lists li.is-empty{display:list-item;color:#88796f}
@media(max-width:560px){.arg-ranking-lists{grid-template-columns:1fr}.arg-ranking-lists li{font-size:12px}}

/* Ver.3.37.1 — frying-pan bean remainder in shared rankings */
.arg-ranking-lists li .arg-rank-beans{
  font-style:normal;
  font-size:.82em;
  opacity:.82;
  white-space:nowrap;
}
\n\n/* ==========================================================
   Ver.3.37.3 — compact smartphone play UI
   UI spacing only. Roaster / beans / flames geometry untouched.
   ========================================================== */
@media (max-width:600px){
  [data-arg-game].is-playing .arg-hud{
    margin:5px 0 4px!important;
    gap:4px!important;
  }
  [data-arg-game].is-playing .arg-stat{
    min-height:43px!important;
    padding:3px 2px!important;
    box-shadow:2px 2px 0 #c7b58f!important;
  }
  [data-arg-game].is-playing .arg-stat>span:first-child{font-size:8px!important;line-height:1!important}
  [data-arg-game].is-playing .arg-stat strong{margin-top:1px!important;font-size:14px!important;line-height:1.05!important}
  [data-arg-game].is-playing .arg-roast-stat small[data-target-display]{font-size:7px!important;line-height:1!important;margin-top:1px!important}

  /* Do not scale or reposition .arg-roaster, pans, beans or flames. */
  [data-arg-game].is-playing .arg-meter-group{
    margin-top:8px!important;
    gap:3px!important;
  }
  [data-arg-game].is-playing .arg-meter-row{
    grid-template-columns:58px 1fr!important;
    gap:4px!important;
    min-height:14px!important;
    font-size:9px!important;
    line-height:1!important;
  }
  [data-arg-game].is-playing .arg-meter{height:7px!important;border-width:2px!important}
  [data-arg-game].is-playing .arg-message{
    min-height:36px!important;
    margin:4px 0!important;
    padding:4px 6px!important;
    font-size:10px!important;
    line-height:1.25!important;
    box-shadow:2px 2px 0 #c7b58f!important;
  }
  [data-arg-game].is-playing .arg-tool-select,
  [data-arg-game].is-playing .arg-target-select,
  [data-arg-game].is-playing .arg-start{display:none!important}
  [data-arg-game].is-playing .arg-controls{
    margin-top:3px!important;
    padding-top:3px!important;
  }
  [data-arg-game].is-playing .arg-control-title{margin:0 0 2px!important;font-size:9px!important;line-height:1!important}
  [data-arg-game].is-playing .arg-heat-buttons{gap:3px!important;margin-bottom:3px!important}
  [data-arg-game].is-playing .arg-heat-buttons button{
    min-height:29px!important;
    padding:2px 1px!important;
    font-size:9px!important;
    box-shadow:2px 2px 0 #6b5a44!important;
  }
  [data-arg-game].is-playing .arg-action-row{
    margin-top:4px!important;
    gap:4px!important;
    grid-template-columns:1fr 1fr!important;
  }
  [data-arg-game].is-playing .arg-action-row button{
    min-height:40px!important;
    padding:4px 2px!important;
    font-size:10px!important;
    line-height:1.15!important;
    box-shadow:2px 2px 0 #6b5a44!important;
  }
  [data-arg-game].is-playing:has(.arg-roaster[data-tool="yukihira"]) .arg-action-row{
    grid-template-columns:1fr 1fr 1fr!important;
  }
  [data-arg-game].is-playing .arg-lid-hold{min-height:40px!important;font-size:10px!important}
  [data-arg-game].is-playing .arg-lid-hold small{font-size:7px!important}
}

/* ==========================================================
   Ver.3.37.4 — compact play UI on all viewport sizes
   UI spacing only. Roaster / beans / flames geometry untouched.
   ========================================================== */
[data-arg-game] .arg-hud{
  margin:5px 0 4px!important;
  gap:4px!important;
}
[data-arg-game] .arg-stat{
  min-height:43px!important;
  padding:3px 2px!important;
  box-shadow:2px 2px 0 #c7b58f!important;
}
[data-arg-game] .arg-stat>span:first-child{font-size:8px!important;line-height:1!important}
[data-arg-game] .arg-stat strong{margin-top:1px!important;font-size:14px!important;line-height:1.05!important}
[data-arg-game] .arg-roast-stat small[data-target-display]{font-size:7px!important;line-height:1!important;margin-top:1px!important}

/* Keep the roaster, bean and flame geometry exactly as-is. */
[data-arg-game] .arg-meter-group{
  margin-top:6px!important;
  margin-bottom:3px!important;
  gap:3px!important;
}
[data-arg-game] .arg-meter-row{
  grid-template-columns:58px 1fr!important;
  gap:4px!important;
  min-height:14px!important;
  font-size:9px!important;
  line-height:1!important;
}
[data-arg-game] .arg-meter{height:7px!important;border-width:2px!important}
[data-arg-game] .arg-message{
  min-height:34px!important;
  margin:3px 0!important;
  padding:4px 6px!important;
  font-size:10px!important;
  line-height:1.2!important;
  box-shadow:2px 2px 0 #c7b58f!important;
}
[data-arg-game] .arg-controls{
  margin-top:3px!important;
  padding-top:3px!important;
}
[data-arg-game] .arg-control-title{margin:0 0 2px!important;font-size:9px!important;line-height:1!important}
[data-arg-game] .arg-heat-buttons{gap:3px!important;margin-bottom:3px!important}
[data-arg-game] .arg-heat-buttons button{
  min-height:29px!important;
  padding:2px 1px!important;
  font-size:9px!important;
  box-shadow:2px 2px 0 #6b5a44!important;
}
[data-arg-game] .arg-action-row{
  margin-top:4px!important;
  gap:4px!important;
}
[data-arg-game] .arg-action-row button{
  min-height:40px!important;
  padding:4px 2px!important;
  font-size:10px!important;
  line-height:1.15!important;
  box-shadow:2px 2px 0 #6b5a44!important;
}
[data-arg-game] .arg-lid-hold{min-height:40px!important;font-size:10px!important}
[data-arg-game] .arg-lid-hold small{font-size:7px!important}

/* Once roasting starts, remove setup-only controls on every viewport size. */
[data-arg-game].is-playing .arg-tool-select,
[data-arg-game].is-playing .arg-target-select,
[data-arg-game].is-playing .arg-start{display:none!important}

/* Keep all active controls on one row while playing where possible. */
[data-arg-game].is-playing .arg-action-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* ==========================================================
   Ver.3.37.5 — readable compact UI + Yukihira pre-start 3-button row
   UI only. Roaster / beans / flames / game logic untouched.
   ========================================================== */
/* Keep the three top stats compact, but restore readable text sizes. */
[data-arg-game] .arg-stat>span:first-child{
  font-size:10px!important;
  line-height:1.05!important;
}
[data-arg-game] .arg-stat strong{
  font-size:16px!important;
  line-height:1.08!important;
}
[data-arg-game] .arg-roast-stat small[data-target-display]{
  font-size:9px!important;
  line-height:1.05!important;
}

/* Make unevenness / scorch-risk labels and bars easier to read without
   changing the roaster artwork or its vertical geometry. */
[data-arg-game] .arg-meter-row{
  min-height:17px!important;
  font-size:10px!important;
  line-height:1.05!important;
}
[data-arg-game] .arg-meter{
  height:10px!important;
  border-width:2px!important;
}

/* When Yukihira is selected, keep Shake / Lid / Finish in one row even
   before roasting starts.  Other tools retain their existing layout. */
[data-arg-game]:has(.arg-roaster[data-tool="yukihira"]) .arg-action-row{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}


/* ==========================================================
   Ver.3.37.7 — large centered FINISH / GAME OVER banner
   End-state presentation only; roaster/beans/flames are untouched.
   ========================================================== */
[data-arg-game] .arg-end-overlay{
  position:absolute;
  z-index:80;
  left:50%;
  top:77%;
  transform:translate(-50%,-50%);
  width:96%;
  text-align:center;
  pointer-events:none;
  white-space:nowrap;
}
[data-arg-game] .arg-end-overlay[hidden]{display:none!important;}
[data-arg-game] .arg-end-overlay strong{
  display:block;
  margin:0 auto;
  font-size:clamp(44px,13vw,72px);
  line-height:.92;
  font-weight:1000;
  letter-spacing:.035em;
  font-family:Impact,"Arial Black",sans-serif;
}
[data-arg-game] .arg-end-overlay small{
  display:block;
  margin-top:7px;
  font-size:clamp(11px,3.2vw,15px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.06em;
  white-space:normal;
}
[data-arg-game] .arg-end-overlay.is-game-over strong{
  color:#cf1712;
  -webkit-text-stroke:2px #fff7e8;
  text-shadow:0 4px 0 #7e0d0a,0 7px 8px rgba(126,13,10,.30);
}
[data-arg-game] .arg-end-overlay.is-game-over small{
  color:#a51612;
  text-shadow:1px 1px 0 #fff7e8;
}
[data-arg-game] .arg-end-overlay.is-finish strong{
  color:#d87808;
  -webkit-text-stroke:2px #fff7e8;
  text-shadow:0 4px 0 #7a3d05,0 7px 8px rgba(90,45,5,.25);
}
[data-arg-game] .arg-end-overlay.is-finish small{
  color:#6d3b0b;
}
@media(max-width:420px){
  [data-arg-game] .arg-end-overlay{top:78%;width:98%;}
  [data-arg-game] .arg-end-overlay strong{font-size:clamp(42px,14vw,58px);}
}

/* ==========================================================
   Ver.3.37.8 — stronger end-banner outline + compact results
   Presentation only; roasting logic/artwork is unchanged.
   ========================================================== */
[data-arg-game] .arg-end-overlay.is-game-over strong{
  -webkit-text-stroke:3px #24130d!important;
  paint-order:stroke fill;
  text-shadow:0 4px 0 #7e0d0a,0 7px 8px rgba(126,13,10,.30)!important;
}
[data-arg-game] .arg-end-overlay.is-finish strong{
  -webkit-text-stroke:3px #24130d!important;
  paint-order:stroke fill;
  text-shadow:0 4px 0 #7a3d05,0 7px 8px rgba(90,45,5,.25)!important;
}

/* Keep the four result cards short while preserving their labels. */
[data-arg-game] .arg-result-grid{
  gap:5px!important;
}
[data-arg-game] .arg-result-grid > div{
  padding:5px 6px!important;
  min-height:0!important;
  border-radius:7px!important;
}
[data-arg-game] .arg-result-grid > div > span{
  display:block!important;
  font-size:10px!important;
  line-height:1.05!important;
  margin:0!important;
}
[data-arg-game] .arg-result-grid > div > strong{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:1px!important;
  margin-top:2px!important;
  font-size:14px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
/* Numeric span + unit (℃ / %) must stay on one line. */
[data-arg-game] .arg-result-grid > div > strong > span{
  display:inline!important;
  margin:0!important;
  font-size:inherit!important;
  line-height:inherit!important;
  opacity:1!important;
}


/* Ver.3.37.11 — ranking column order + slower result transition */
.arg-ranking-lists li strong{order:1}
.arg-ranking-lists li span{order:2}
.arg-ranking-lists li .arg-rank-beans{order:3}
.arg-ranking-lists li time{order:4}


/* Ver.3.37.12 — four status blocks + ranking positions / frying-pan two-line rows */
[data-arg-game] .arg-stats{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
[data-arg-game] .arg-stat small{display:none!important;}
[data-arg-game] .arg-target-stat strong{font-size:inherit;}
.arg-ranking-lists li{
  grid-template-columns:auto auto minmax(0,1fr) auto!important;
}
.arg-ranking-lists li.has-beans{
  grid-template-columns:auto auto minmax(0,1fr) auto!important;
  grid-template-rows:auto auto;
}
.arg-ranking-lists li .arg-rank-position{
  order:0;
  font-size:12px;
  white-space:nowrap;
}
.arg-ranking-lists li strong{order:1}
.arg-ranking-lists li span{order:2;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
.arg-ranking-lists li .arg-rank-beans{order:3}
.arg-ranking-lists li time{order:4}
/* Frying pan: keep score/name/bean remainder on first row; put date on row two. */
.arg-ranking-lists li.has-beans time{
  grid-column:1 / -1;
  grid-row:2;
  justify-self:end;
  margin-top:1px;
}
@media(max-width:420px){
  [data-arg-game] .arg-stat{padding-left:1px!important;padding-right:1px!important;}
  [data-arg-game] .arg-stat>span{font-size:9px!important;}
  [data-arg-game] .arg-stat>strong{font-size:13px!important;}
  .arg-ranking-lists li{gap:4px!important;}
}

/* Ver.3.37.13 — force all four HUD status cards onto one row */
[data-arg-game] .arg-hud{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
  width:100%!important;
  gap:4px!important;
}
[data-arg-game] .arg-hud > .arg-stat{
  min-width:0!important;
  width:auto!important;
  box-sizing:border-box!important;
}
@media(max-width:420px){
  [data-arg-game] .arg-hud{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
  }
  [data-arg-game] .arg-hud > .arg-stat{
    padding-left:1px!important;
    padding-right:1px!important;
  }
}

/* ==========================================================
   Ver.3.37.15 — mobile readability / spacing polish
   UI only. Roaster / beans / flames / game logic untouched.
   ========================================================== */
/* Unify the value line in all four HUD cards. */
[data-arg-game] .arg-hud > .arg-stat > strong{
  font-size:16px!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
[data-arg-game] .arg-target-stat > strong{font-size:16px!important;}

/* Slightly improve unevenness / scorch-risk readability. */
[data-arg-game] .arg-meter-row{
  min-height:19px!important;
  font-size:11px!important;
  font-weight:800!important;
}
[data-arg-game] .arg-meter{height:12px!important;}

/* Compact result summary cards without reducing readability. */
[data-arg-game] .arg-result-grid{gap:4px!important;}
[data-arg-game] .arg-result-grid > div{
  padding:4px 5px!important;
  min-height:48px!important;
}
[data-arg-game] .arg-result-grid > div > span{font-size:10px!important;line-height:1!important;}
[data-arg-game] .arg-result-grid > div > strong{margin-top:1px!important;font-size:14px!important;line-height:1!important;}

/* Ranking registration is secondary: keep it compact. */
[data-arg-game] .arg-ranking{margin-top:12px!important;padding:10px!important;}
[data-arg-game] .arg-ranking-register>strong{margin-bottom:5px!important;font-size:14px!important;}
[data-arg-game] .arg-ranking-form{gap:6px!important;}
[data-arg-game] .arg-ranking-form input{padding:7px 8px!important;font-size:14px!important;}
[data-arg-game] .arg-ranking-form button{padding:7px 13px!important;font-size:14px!important;}
[data-arg-game] .arg-ranking-register small{margin-top:4px!important;min-height:1.15em!important;}
[data-arg-game] .arg-ranking-lists{margin-top:10px!important;}

@media(max-width:600px){
  /* Preserve the artwork size; reclaim only surrounding UI whitespace. */
  [data-arg-game] .arg-hud{margin-top:4px!important;margin-bottom:2px!important;}
  [data-arg-game] .arg-meter-group{margin-top:3px!important;margin-bottom:2px!important;}
  [data-arg-game] .arg-message{margin-top:2px!important;margin-bottom:2px!important;}
  [data-arg-game] .arg-controls{margin-top:2px!important;padding-top:2px!important;}
}
@media(max-width:420px){
  [data-arg-game] .arg-hud > .arg-stat > strong,
  [data-arg-game] .arg-target-stat > strong{
    font-size:14px!important;
  }
  [data-arg-game] .arg-meter-row{font-size:10.5px!important;}
}

/* ==========================================================
   Ver.3.37.16 — strict four-HUD value alignment
   Force time / temperature / state / target to identical
   typography and vertical centering, overriding legacy rules.
   ========================================================== */
[data-arg-game] .arg-hud > .arg-stat{
  display:grid!important;
  grid-template-rows:14px 24px!important;
  align-content:center!important;
  align-items:center!important;
  justify-items:center!important;
  min-height:48px!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
}
[data-arg-game] .arg-hud > .arg-stat > span:first-child{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:14px!important;
  margin:0!important;
  padding:0!important;
  font-size:10px!important;
  line-height:14px!important;
  font-weight:800!important;
}
[data-arg-game] .arg-hud > .arg-stat > strong,
[data-arg-game] .arg-hud > .arg-stat.arg-target-stat > strong,
[data-arg-game] .arg-hud > .arg-stat.arg-roast-stat > strong{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:24px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
  font-size:15px!important;
  line-height:24px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
[data-arg-game] .arg-hud > .arg-stat > strong > span[data-temp]{
  font:inherit!important;
  line-height:inherit!important;
}
@media(max-width:420px){
  [data-arg-game] .arg-hud > .arg-stat > strong,
  [data-arg-game] .arg-hud > .arg-stat.arg-target-stat > strong,
  [data-arg-game] .arg-hud > .arg-stat.arg-roast-stat > strong{
    font-size:15px!important;
    line-height:24px!important;
  }
}


/* ==========================================================
   Ver.3.37.17 — unified lower-control button typography
   Enlarge and standardize all interactive button labels from
   tool selection through roast finish. Layout / logic unchanged.
   ========================================================== */
[data-arg-game] .arg-tool-buttons button,
[data-arg-game] .arg-target-buttons button,
[data-arg-game] .arg-heat-buttons button,
[data-arg-game] .arg-start,
[data-arg-game] .arg-action-row button,
[data-arg-game] .arg-shake,
[data-arg-game] .arg-lid-hold,
[data-arg-game] .arg-finish{
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
@media(max-width:600px){
  [data-arg-game] .arg-tool-buttons button,
  [data-arg-game] .arg-target-buttons button,
  [data-arg-game] .arg-heat-buttons button,
  [data-arg-game] .arg-start,
  [data-arg-game] .arg-action-row button,
  [data-arg-game] .arg-shake,
  [data-arg-game] .arg-lid-hold,
  [data-arg-game] .arg-finish{
    font-size:14px!important;
    line-height:1.15!important;
  }
}

/* ==========================================================
   Ver.3.37.31 — natural flame flicker (visual only)
   Keep all flame base positions/geometry unchanged. Each gas flame
   flickers independently; heat level controls the base flame scale.
   Existing bean-fire (ignition) flicker remains active.
   ========================================================== */
[data-arg-game] .arg-roaster[data-heat="1"] .arg-pixel-flame{--arg-flame-sy:.48;--arg-flame-sx:.82;--arg-flicker-speed:.82s;}
[data-arg-game] .arg-roaster[data-heat="2"] .arg-pixel-flame{--arg-flame-sy:.68;--arg-flame-sx:.90;--arg-flicker-speed:.70s;}
[data-arg-game] .arg-roaster[data-heat="3"] .arg-pixel-flame{--arg-flame-sy:.90;--arg-flame-sx:1;--arg-flicker-speed:.58s;}
[data-arg-game] .arg-roaster[data-heat="4"] .arg-pixel-flame{--arg-flame-sy:1.08;--arg-flame-sx:1.08;--arg-flicker-speed:.46s;}
[data-arg-game] .arg-roaster[data-heat]:not([data-heat="0"]) .arg-pixel-flame{
  animation:arg-gas-flame-flicker-v33731 var(--arg-flicker-speed,.62s) ease-in-out infinite!important;
  will-change:transform;
}
[data-arg-game] .arg-pixel-flame:nth-child(1){animation-delay:-.07s!important;animation-duration:calc(var(--arg-flicker-speed,.62s) * .91)!important;}
[data-arg-game] .arg-pixel-flame:nth-child(2){animation-delay:-.29s!important;animation-duration:calc(var(--arg-flicker-speed,.62s) * 1.08)!important;}
[data-arg-game] .arg-pixel-flame:nth-child(3){animation-delay:-.43s!important;animation-duration:calc(var(--arg-flicker-speed,.62s) * .96)!important;}
[data-arg-game] .arg-pixel-flame:nth-child(4){animation-delay:-.18s!important;animation-duration:calc(var(--arg-flicker-speed,.62s) * 1.13)!important;}
@keyframes arg-gas-flame-flicker-v33731{
  0%   {transform:translateX(-1px) scaleX(calc(var(--arg-flame-sx,1) * .96)) scaleY(calc(var(--arg-flame-sy,1) * .92)) skewX(-1.5deg);}
  28%  {transform:translateX(.5px) scaleX(calc(var(--arg-flame-sx,1) * 1.02)) scaleY(calc(var(--arg-flame-sy,1) * 1.05)) skewX(1deg);}
  57%  {transform:translateX(1px) scaleX(calc(var(--arg-flame-sx,1) * .98)) scaleY(calc(var(--arg-flame-sy,1) * .97)) skewX(1.5deg);}
  79%  {transform:translateX(-.5px) scaleX(calc(var(--arg-flame-sx,1) * 1.03)) scaleY(calc(var(--arg-flame-sy,1) * 1.08)) skewX(-.5deg);}
  100% {transform:translateX(-1px) scaleX(calc(var(--arg-flame-sx,1) * .96)) scaleY(calc(var(--arg-flame-sy,1) * .92)) skewX(-1.5deg);}
}

/* Give ignition flames a slightly less synchronized shimmer without moving their anchors. */
[data-arg-game] .arg-roaster.is-burning .arg-bean-fire:nth-child(2n){animation-delay:-.08s!important;animation-duration:.26s!important;}
[data-arg-game] .arg-roaster.is-burning .arg-bean-fire:nth-child(3n){animation-delay:-.15s!important;animation-duration:.31s!important;}
[data-arg-game] .arg-roaster.is-burning .arg-bean-fire:nth-child(4n){animation-delay:-.04s!important;animation-duration:.24s!important;}

@media (prefers-reduced-motion:reduce){
  [data-arg-game] .arg-pixel-flame{animation:none!important;}
}

/* =========================================================
   Ver.3.37.32 — unified bean appearance
   Use the Yukihira bean silhouette/seam on the other three tools.
   IMPORTANT: motion transforms, positions, counts and game logic are untouched.
   ========================================================= */
.arg-roaster[data-tool="meshpan"] .arg-beans i,
.arg-roaster[data-tool="fryingpan"] .arg-beans i,
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  width:18px!important;
  height:13px!important;
  border:2px solid rgba(36,22,8,.85)!important;
  border-radius:55% 45% 52% 48%!important;
  box-shadow:inset -2px -2px 0 rgba(30,15,5,.16)!important;
}
.arg-roaster[data-tool="meshpan"] .arg-beans i::after,
.arg-roaster[data-tool="fryingpan"] .arg-beans i::after,
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  content:""!important;
  position:absolute!important;
  left:13%!important;
  top:46%!important;
  width:74%!important;
  height:2px!important;
  border-radius:50%!important;
  background:rgba(45,27,9,.55)!important;
  transform:none!important;
  clip-path:ellipse(50% 71% at 50% 31%)!important;
  opacity:.32!important;
}


/* =========================================================
   Ver.3.37.33 — bean visual/detail tuning
   - darker common center seam
   - mesh-lid beans +10% visual size only
   - drum bean population is increased in markup (48 -> 72)
   ========================================================= */
.arg-roaster[data-tool="meshpan"] .arg-beans i::after,
.arg-roaster[data-tool="fryingpan"] .arg-beans i::after,
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i::after{
  background:rgba(38,34,30,.82)!important;
  opacity:.62!important;
}
.arg-roaster[data-tool="meshpan"] .arg-beans i{
  width:19.8px!important;
  height:14.3px!important;
}


/* ==========================================================
   Ver.3.37.34 — mobile long-press protection for game buttons
   Prevent text selection / callout / drag UI while preserving
   normal taps and the Yukihira press-and-hold lid control.
   ========================================================== */
[data-arg-game] button,
[data-arg-game] button * {
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-drag:none!important;
}
[data-arg-game] button {
  -webkit-tap-highlight-color:transparent;
}


/* ==========================================================
   Ver.3.37.36 — drum mobile performance optimization
   JS samples drum-bean transforms at 30 fps; the browser compositor
   interpolates those samples so the visible trajectory remains smooth.
   ========================================================== */
.arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{
  transition:transform 34ms linear!important;
}
.arg-roaster[data-tool="drum"][data-drum-spin="stopped"] .arg-drum-bean-bed i{
  transition-duration:45ms!important;
}
@media (prefers-reduced-motion:reduce){
  .arg-roaster[data-tool="drum"] .arg-drum-bean-bed i{transition:none!important;}
}