/* Atom Oven (TT.G.oven). The oven fills the left of the cabinet; jars, counter and Bake button sit on the right (under it on tall screens).
   Art: oven-bg (kitchen), oven-stove (the oven; its round window shows the atom), oven-jar-proton / -neutron / -electron, oven-smoke.
   Until a picture is uploaded the oven is drawn by code and the jars and smoke show emoji. */
.ovn .ostage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(8px, 1.2vw, 18px); align-items: stretch; }
main.incab .ovn .ostage { flex: 1 1 0; min-height: 0; }
.ovn .obox { position: relative; border-radius: 22px; overflow: hidden; border: 4px solid #3B2414; min-height: 260px; container-type: size;
  background: linear-gradient(#ffe7c2, #f3c98b 62%, #8b5a2b 62.5%, #6e4421); display: grid; place-items: center; padding: 8px; }
.ovn .obg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ovn .obg.stand { object-fit: contain; opacity: .15; }

/* the oven: a square-ish box sized to fit the cabinet */
.ovn .oven { position: relative; z-index: 1; width: min(100cqw - 16px, (100cqh - 12px) * .9); aspect-ratio: .9; container-type: inline-size; }
.ovn .ostove { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; pointer-events: none; }
.ovn .oven.drawn::before { content: ''; position: absolute; left: 4%; right: 4%; top: 12%; bottom: 3%; border-radius: 9% 9% 5% 5%; z-index: 0;
  background: linear-gradient(#fff6e2, #f1dfba); border: max(4px, 1.4cqw) solid #5a3a14; box-shadow: inset 0 -2.5cqw 0 rgba(90, 58, 20, .18), 0 2cqw 0 rgba(0, 0, 0, .25); }
.ovn .oven.drawn::after { content: ''; position: absolute; left: 10%; right: 10%; top: 25%; height: 2.4cqw; border-radius: 99px; background: #b98b4a; border: 3px solid #5a3a14; z-index: 1; }
.ovn .ochim, .ovn .oknobs { display: none; }
.ovn .oven.drawn .ochim { display: block; position: absolute; left: 66%; top: 0; width: 10%; height: 14%; background: #6b6b6b; border: 3px solid #333; border-bottom: 0; border-radius: 6px 6px 0 0; z-index: 0; }
.ovn .oven.drawn .oknobs { display: flex; position: absolute; left: 0; right: 0; top: 15.5%; justify-content: center; gap: 9%; z-index: 2; }
.ovn .oknobs i { width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c77d2e 60%, #6e3c10); border: 3px solid #5a3a14; }
/* the round oven window: the atom lives here */
.ovn .owin { position: absolute; z-index: 2; left: 50%; top: 60%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff3c8 0%, #ffd27a 55%, #ff9c3a 100%); border: max(5px, 1.8cqw) solid #5a3a14;
  box-shadow: inset 0 0 4cqw rgba(255, 120, 0, .55), 0 0 0 1cqw #c9a26a; overflow: hidden; }
.ovn .owin svg { width: 100%; height: 100%; display: block; }
.ovn .owin.baking { animation: obake 1.1s ease-out; }
.ovn .owin.smoky { animation: oshake .5s; }
.ovn .owin.smoky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(90, 90, 90, .55), rgba(60, 60, 60, .2)); animation: ofade 1.4s forwards; pointer-events: none; }
@keyframes obake { 0% { box-shadow: inset 0 0 4cqw rgba(255, 120, 0, .55), 0 0 0 1cqw #c9a26a } 35% { box-shadow: inset 0 0 12cqw #fff, 0 0 8cqw 4cqw #ffd23f; transform: translate(-50%, -50%) scale(1.06) }
  100% { box-shadow: inset 0 0 4cqw rgba(255, 120, 0, .55), 0 0 0 1cqw #c9a26a; transform: translate(-50%, -50%) } }
@keyframes oshake { 0%, 100% { transform: translate(-50%, -50%) } 20% { transform: translate(calc(-50% - 8px), -50%) rotate(-3deg) } 40% { transform: translate(calc(-50% + 8px), -50%) rotate(3deg) } 60% { transform: translate(calc(-50% - 5px), -50%) } 80% { transform: translate(calc(-50% + 4px), -50%) } }
@keyframes ofade { from { opacity: 1 } to { opacity: 0 } }

/* atom parts */
.ovn .oring { fill: none; stroke: #2d5fa8; stroke-width: 2.4; stroke-dasharray: 6 6; opacity: .85; }
.ovn .onucglow { fill: rgba(255, 90, 60, .18); stroke: rgba(160, 40, 30, .45); stroke-width: 1.5; }
.ovn .op circle { stroke: #3B2414; stroke-width: 1.6; }
.ovn .op text { font: 900 16px/1 system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.ovn .op.p circle { fill: #e53935; } .ovn .op.p text { fill: #fff; }
.ovn .op.n circle { fill: #b9bec7; } .ovn .op.n text { fill: #3B2414; }
.ovn .op.e circle { fill: #2f7de1; } .ovn .op.e text { fill: #fff; font-size: 15px; }
.ovn .op.pop { animation: opop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes opop { from { transform: scale(0) } to { transform: scale(1) } }
.ovn .oelec { transform-origin: 100px 100px; animation: ospin 9s linear infinite; }
.ovn .onuc { transform-origin: 100px 100px; animation: ojig 2.4s ease-in-out infinite; }
@keyframes ospin { to { transform: rotate(360deg) } }
@keyframes ojig { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.035) } }
.ovn .oempty { font: 800 15px system-ui, sans-serif; fill: #7a4a1a; text-anchor: middle; dominant-baseline: middle; opacity: .8; }

.ovn .otag { position: absolute; z-index: 3; left: 50%; top: 96%; transform: translate(-50%, -50%) scale(.6); opacity: 0; padding: 4px 16px; border-radius: 999px;
  font-weight: 900; font-size: clamp(14px, 5cqw, 34px); background: #fffaf0; color: #3B2414; border: 3px solid #3B2414; white-space: nowrap; transition: .25s; }
.ovn .otag.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ovn .otag.good { background: #c9f2c7; color: #1f5f24; }
.ovn .ofx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ovn .oban { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); padding: 10px 22px; border-radius: 14px; font-weight: 900; font-size: clamp(20px, 2.4vw, 40px);
  color: #1f5f24; background: #c9f2c7; border: 4px solid #3B2414; animation: sban 1.3s ease-out forwards; white-space: nowrap; }
.ovn .oban.boss { color: #fff; background: linear-gradient(#ff7a1f, #c0281b); }
.ovn .osmokew { position: absolute; transform: translate(-50%, -30%); animation: osmoke 1.4s ease-out forwards; }
.ovn .osmoke { width: clamp(70px, 9vw, 160px); height: auto; aspect-ratio: 1; object-fit: contain; }
@keyframes osmoke { 0% { transform: translate(-50%, 10%) scale(.4); opacity: 0 } 25% { opacity: 1 } 100% { transform: translate(-50%, -120%) scale(1.3); opacity: 0 } }

/* Tracks the turkey chef cheers beside the oven (only when the box is wide enough) */
.ovn .ochef { position: absolute; z-index: 3; right: 2%; bottom: 3%; width: min(24cqw, 40cqh); display: none; transform-origin: 50% 100%; }
@container (min-aspect-ratio: 13/10) { .ovn .ochef { display: block; } }
.ovn .ocharimg { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.ovn .ochef.yay { animation: oyay .9s cubic-bezier(.3, 1.5, .5, 1); }
.ovn .ochef.oops { animation: ooops .6s; }
@keyframes oyay { 0%, 100% { transform: none } 30% { transform: translateY(-28%) rotate(-8deg) scale(1.08) } 60% { transform: translateY(-10%) rotate(6deg) } }
@keyframes ooops { 0%, 100% { transform: none } 25% { transform: rotate(-10deg) scaleY(.9) } 50% { transform: rotate(8deg) } 75% { transform: rotate(-5deg) } }

/* the flying particle (lives on body) */
.ofly { position: fixed; z-index: 60; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 system-ui, sans-serif; color: #fff;
  border: 2px solid #3B2414; pointer-events: none; transform: translate(-50%, -50%); }
.ofly.p { background: #e53935; } .ofly.n { background: #b9bec7; color: #3B2414; } .ofly.e { background: #2f7de1; width: 22px; height: 22px; font-size: 15px; }

/* side panel */
.ovn .opanel { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); min-height: 0; overflow-y: auto; padding: clamp(10px, 1.2vw, 18px);
  border-radius: 22px; background: #fffaf0; border: 4px solid #3B2414; justify-content: center; }
.ovn .ojars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.ovn .ojarw { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ovn .ojar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 16px; border: 4px solid #5a3a14;
  font: inherit; font-weight: 900; color: #3B2414; cursor: pointer; box-shadow: 0 5px 0 #5a3a14; min-height: 58px; }
.ovn .ojarw.p .ojar { background: linear-gradient(#ffe0dc, #ffb3a8); }
.ovn .ojarw.n .ojar { background: linear-gradient(#f2f3f5, #cfd3da); }
.ovn .ojarw.e .ojar { background: linear-gradient(#dcecff, #a9cdf6); }
.ovn .ojar:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.ovn .ojar:active:not(:disabled) { transform: translateY(3px) rotate(-2deg); box-shadow: 0 2px 0 #5a3a14; }
.ovn .ojar:disabled, .ovn .ominus:disabled { opacity: .55; cursor: default; }
.ovn .ojimg { width: clamp(40px, 4.6vw, 96px); height: clamp(40px, 4.6vw, 96px); object-fit: contain; }
@media (min-aspect-ratio: 1/1) and (max-height: 820px) { .ovn .ojimg { width: 40px; height: 40px; } .ovn .ojar { min-height: 0; padding: 6px 4px 8px; } .ovn .opanel { gap: 7px; padding: 10px; } .ovn .om b { font-size: 20px; } .ovn .ominus { width: 40px; height: 40px; } }
.ovn .oname { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: clamp(15px, 1.35vw, 26px); line-height: 1.1; text-align: center; overflow-wrap: normal; word-break: keep-all; }
.ovn .oname b { display: inline-block; min-width: 1.3em; border-radius: 99px; background: #fffaf0; border: 2px solid #3B2414; }
.ovn .ojar .k { position: absolute; top: 4px; left: 6px; font-size: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fffaf0; border: 2px solid #3B2414; }
.ovn .ocnt { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ovn .ocnt b { font-size: clamp(20px, 1.8vw, 34px); min-width: 1.4em; text-align: center; color: #3B2414; }
.ovn .ominus { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #5a3a14; background: #fff; font: 900 26px/1 system-ui, sans-serif; color: #3B2414; cursor: pointer; }
.ovn .ominus:hover:not(:disabled) { background: #ffe9c9; }
.ovn .ometer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ovn .om { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px; border-radius: 12px; border: 3px solid #5a3a14; background: #fff;
  font-size: clamp(11px, .85vw, 16px); font-weight: 800; color: #3B2414; line-height: 1.1; overflow-wrap: anywhere; }
.ovn .om b { font-size: clamp(18px, 1.6vw, 30px); }
.ovn .om.p { background: #ffe5e1; } .ovn .om.n { background: #eef0f3; } .ovn .om.e { background: #e1eefe; }
.ovn .om.c.zero { background: #c9f2c7; } .ovn .om.c.pos { background: #ffd0c8; } .ovn .om.c.neg { background: #cfe2ff; }
.ovn .obtnrow { gap: 10px; }
.ovn .obake { background: linear-gradient(#ffb347, #ff7a1f); color: #3B2414; min-width: 60%; }
.ovn .owhy { font-size: clamp(15px, 1.2vw, 22px); line-height: 1.35; text-align: center; min-height: 1.35em; }
.ovn .owhy.good { color: #1f5f24; } .ovn .owhy.bad { color: #a3222f; }
.ovn .opts { display: inline-block; font-weight: 900; color: #b25a00; }
.ovn .oqn { margin: 0; text-align: center; font-weight: 900; color: #7a4a1a; font-size: clamp(14px, 1.1vw, 20px); }

/* pick tiles */
.ovn .opicks { display: grid; grid-template-columns: 1fr; gap: clamp(8px, .9vw, 14px); }
.ovn .opick { position: relative; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 4px solid #5a3a14; color: #3B2414;
  background: linear-gradient(#fff3d6, #ffd98a); font: inherit; font-weight: 800; font-size: clamp(17px, 1.5vw, 30px); line-height: 1.15; cursor: pointer; box-shadow: 0 5px 0 #5a3a14; text-align: left; }
.ovn .opick .st { min-width: 0; overflow-wrap: break-word; }
.ovn .opick .k { font-size: .6em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: #fffaf0; border: 2px solid #3B2414; flex: none; }
.ovn .opick:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.ovn .opick.right { background: linear-gradient(#d8f8d2, #8fdc84); border-color: #1f5f24; }
.ovn .opick.burnt { background: linear-gradient(#5b3a22, #2e1c10); color: #d9c3a8; border-color: #2e1c10; animation: oshake2 .45s; cursor: default; }
.ovn .opick.burnt .st { text-decoration: line-through 3px; }
.ovn .opick.burnt::after { content: '💨'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.1em; animation: ofade 1.6s forwards; }
.ovn .opick:disabled:not(.burnt):not(.right) { opacity: .6; cursor: default; }
@keyframes oshake2 { 0%, 100% { transform: none } 25% { transform: translateX(-7px) } 50% { transform: translateX(7px) } 75% { transform: translateX(-4px) } }

/* hot streak chip */
.ovn .ostreak { transition: .2s; }
.ovn .ostreak.hot { background: linear-gradient(#ffd27a, #ff7a1f); color: #3B2414; box-shadow: 0 0 14px #ff9c3a; }
.ovn .ostreak.bump { animation: obump .5s; }
.ovn .ostreak.hot b { color: #3B2414; }
@keyframes obump { 40% { transform: scale(1.25) rotate(-4deg) } }
.ovn .onewbest { color: #b25a00; }

/* tall screens (phones, iPad portrait): oven on top, panel under */
@media (max-aspect-ratio: 1/1) {
  .ovn .ostage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; }
  .ovn .ostage.pick { grid-template-rows: minmax(170px, .6fr) auto; }
  .ovn .ostage.pick .obox { min-height: 170px; }
  main.incab .ovn .ostage { flex: 1 0 auto; }
  .ovn .opanel { overflow: visible; }
}
@media (max-width: 520px) {
  .ovn .ojar { padding: 6px 2px 8px; } .ovn .ojar .k { display: none; } .ovn .oname { font-size: 13px; letter-spacing: -.2px; }
  .ovn .ometer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovn .opick { font-size: 17px; padding: 8px; } .ovn .opick .k { display: none; }
  .ovn .ominus { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ovn .oelec, .ovn .onuc, .ovn .op.pop, .ovn .ochef.yay, .ovn .ochef.oops, .ovn .owin.baking, .ovn .owin.smoky, .ovn .oban, .ovn .osmokew, .ovn .opick.burnt, .ovn .ostreak.bump { animation: none; }
  .ovn .osmokew { opacity: .9; transform: translate(-50%, -60%); }
}