/* ═══════════════════════════════════════════════════════════
   بيتزا روما — وضع محطات البيتزا (نمط Papa's Pizzeria)
   ═══════════════════════════════════════════════════════════ */
.pp {
  --wood:   #8B4A22;
  --wood-2: #6E3617;
  --paper:  #FFFDF6;
  --steel:  #C9CFD6;
  --steel-2:#8B949E;
  --pp-nav-h: 76px;
  background: linear-gradient(#FFE9D2, #FFDCC0 60%, #F7C9A6);
  min-height: 100dvh;
}
.pp::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(140,60,20,.14) 1.3px, transparent 1.6px);
  background-size: 26px 26px;
}
.pp > * { position: relative; z-index: 1; }

/* ── الشريط العلوي ── */
.pp-hud {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .48rem .6rem;
  background: linear-gradient(#8C1D1D, #6B1414);
  border-bottom: 3px solid #F0B429;
  color: #FFF3E0;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 6px 18px rgba(80, 20, 5, .3);
}
.pp-day { display: flex; flex-direction: column; line-height: 1.15; }
.pp-day b { font-family: var(--f-display); font-size: 1.02rem; letter-spacing: .2px; }
.pp-day span { font-size: .7rem; opacity: .82; }
.pp-stat {
  display: inline-flex; align-items: center; gap: .28rem; margin-inline-start: auto;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(251, 191, 36, .3);
  padding: .24rem .58rem; border-radius: 999px; font-weight: 800; font-size: .92rem;
}
.pp-stat svg { color: #FBBF24; }
.pp-hearts { display: flex; gap: .12rem; align-items: center; }
.pp-hearts svg { color: #EF4444; }
.pp-hearts .off { color: rgba(255, 255, 255, .28); }
.pp-hud-actions { display: flex; gap: .28rem; margin-inline-start: .2rem; }

/* ── شريط الزبائن المنتظرين ── */
.pp-queue {
  display: flex; gap: .45rem; padding: .5rem .6rem .1rem;
  overflow-x: auto; scrollbar-width: thin;
}
.pp-q {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  min-width: 74px; padding: .35rem .3rem .3rem;
  background: rgba(255, 255, 255, .72);
  border: 2px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow-sm); transition: transform var(--t), border-color var(--t);
}
.pp-q.is-cur { border-color: var(--gold-l); background: #FFF7E6; transform: translateY(-2px); }
.pp-q.is-out { opacity: .45; filter: grayscale(.7); }
.pp-q .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #FBE4C9; }
.pp-q .av svg, .pp-q .av img { width: 100%; height: 100%; display: block; }
.pp-q .nm { font-size: .66rem; font-weight: 800; color: var(--ink-2); }
.pp-q .pb { width: 52px; height: 5px; border-radius: 99px; background: #EAD3BC; overflow: hidden; }
.pp-q .pb i { display: block; height: 100%; background: var(--green); transition: width .25s linear; }
.pp-q .pb i.warn { background: var(--gold); }
.pp-q .pb i.low { background: var(--red); }
.pp-empty { font-size: .78rem; color: var(--muted); padding: .35rem .3rem; }

/* ── منطقة العمل ── */
.pp-body { padding: 0 .6rem calc(var(--pp-nav-h) + .7rem); }
.pp-work { display: grid; grid-template-columns: 1fr 288px; gap: .6rem; align-items: start; }
.pp-stage {
  background: linear-gradient(#FFF9F0, #FFF1DF);
  border: 2px solid var(--line-2); border-radius: 20px;
  box-shadow: var(--shadow); padding: .7rem; min-height: 420px;
  display: flex; flex-direction: column; gap: .65rem;
}
.pp-st-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pp-st-head h2 {
  font-family: var(--f-display); font-size: 1.14rem; color: var(--ink);
  display: inline-flex; align-items: center; gap: .35rem;
}
.pp-st-head .hint { font-size: .78rem; color: var(--muted); margin-inline-start: auto; }
.pp-badge {
  font-size: .7rem; font-weight: 800; padding: .16rem .5rem; border-radius: 999px;
  background: var(--gold-bg); color: #8A5A06; border: 1px solid #F2D08A;
}
.pp-badge.ok { background: var(--green-l); color: #15803D; border-color: #A7E8BE; }

/* ── الطلبية (ورقة الطلب) ── */
.pp-ticket {
  background: var(--paper); border-radius: 16px; padding: .7rem .7rem .8rem;
  border: 2px solid var(--line-2); box-shadow: var(--shadow);
  position: sticky; top: 62px;
}
.pp-ticket::before {
  content: ''; display: block; height: 6px; margin: -.7rem -.7rem .6rem;
  background: repeating-linear-gradient(90deg, #DC2626 0 14px, #FBBF24 14px 28px);
  border-radius: 14px 14px 0 0;
}
.pp-tk-top { display: flex; align-items: center; gap: .5rem; }
.pp-tk-top .av { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: #FBE4C9; flex: 0 0 auto; }
.pp-tk-top .av svg, .pp-tk-top .av img { width: 100%; height: 100%; display: block; }
.pp-tk-top b { font-family: var(--f-display); font-size: 1.02rem; display: block; }
.pp-tk-top small { color: var(--muted); font-size: .72rem; }
.pp-tk-pat { margin-top: .45rem; }
.pp-tk-pat .bar { height: 8px; border-radius: 99px; background: #EAD3BC; overflow: hidden; }
.pp-tk-pat .bar i { display: block; height: 100%; background: linear-gradient(90deg, #16A34A, #4ADE80); }
.pp-tk-pat .bar i.warn { background: linear-gradient(90deg, #D97706, #FBBF24); }
.pp-tk-pat .bar i.low { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.pp-tk-pat span { font-size: .7rem; color: var(--muted); font-weight: 700; }
.pp-tk-list { margin-top: .55rem; display: flex; flex-direction: column; gap: .4rem; }
.pp-tk-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .4rem; border-radius: 10px; background: #FFF8EA;
  border: 1px solid #F3E2C8;
}
.pp-tk-row.is-done { background: #F0FDF4; border-color: #BBF7D0; }
.pp-tk-row .nm { font-size: .8rem; font-weight: 800; flex: 1; }
.pp-quad { display: grid; grid-template-columns: repeat(2, 15px); gap: 2px; }
.pp-quad i {
  width: 15px; height: 15px; border-radius: 3px; background: #EFE0C8;
  font-size: .58rem; font-weight: 800; color: #8A5A06;
  display: grid; place-items: center; font-style: normal;
}
.pp-quad i.on { background: var(--gold-l); color: #5B3A04; }
.pp-tk-foot {
  margin-top: .6rem; padding-top: .5rem; border-top: 2px dashed var(--line-2);
  display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--ink-2);
}
.pp-tk-foot .row { display: flex; align-items: center; gap: .35rem; }
.pp-tk-foot .row svg { color: var(--gold); }
.pp-tk-foot .price { margin-inline-start: auto; font-weight: 900; color: var(--red-d); }

/* ── شريط المحطات السفلي ── */
.pp-nav {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem;
  padding: .5rem .55rem calc(.5rem + env(safe-area-inset-bottom));
  background: linear-gradient(#7A1C1C, #5E1010);
  border-top: 3px solid #F0B429;
  box-shadow: 0 -8px 22px rgba(80, 20, 5, .32);
}
.pp-nav button {
  display: flex; flex-direction: column; align-items: center; gap: .16rem;
  padding: .4rem .2rem; border-radius: 13px; color: #FFE7C9;
  font-size: .7rem; font-weight: 800; font-family: var(--f-display);
  border: 1.5px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
  transition: transform var(--t), background var(--t), border-color var(--t), color var(--t);
  position: relative;
}
.pp-nav button .n {
  position: absolute; top: -6px; inset-inline-start: 50%; transform: translateX(50%);
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold-l); color: #4A2C04;
  font-size: .66rem; display: grid; place-items: center;
}
.pp-nav button.is-on {
  background: linear-gradient(#FBBF24, #F59E0B); color: #4A2C04;
  border-color: #FFF3CF; transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}
.pp-nav button.is-lock { opacity: .45; }
.pp-nav button.is-ready { animation: ppPulse 1.1s ease-in-out infinite; }
@keyframes ppPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); }
  50% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); }
}

/* ── لوح البيتزا ── */
.pp-board {
  position: relative; display: flex; justify-content: center; align-items: center;
  flex: 1; min-height: 300px;
}
.pp-board canvas {
  width: min(100%, 430px); height: auto; aspect-ratio: 1 / 1;
  touch-action: none; display: block; cursor: crosshair;
  filter: drop-shadow(0 14px 22px rgba(110, 45, 10, .28));
}
.pp-board .cutter-hint {
  position: absolute; inset: auto .5rem .35rem auto;
  font-size: .74rem; color: var(--muted); background: rgba(255, 255, 255, .8);
  padding: .18rem .5rem; border-radius: 99px; font-weight: 700;
}
.pp-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pp-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 999px; font-family: var(--f-display);
  font-weight: 800; font-size: .88rem; border: 2px solid transparent;
  background: #FFF3E0; color: var(--ink-2); box-shadow: var(--shadow-sm);
  transition: transform var(--t), background var(--t), box-shadow var(--t), opacity var(--t);
}
.pp-btn:hover { transform: translateY(-2px); }
.pp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pp-btn.primary { background: linear-gradient(#DC2626, #B91C1C); color: #FFF3E0; }
.pp-btn.gold { background: linear-gradient(#FBBF24, #F59E0B); color: #4A2C04; }
.pp-btn.ghost { background: rgba(255, 255, 255, .8); border-color: var(--line-2); }
.pp-btn.big { padding: .72rem 1.5rem; font-size: 1rem; }
.pp-spacer { flex: 1; }

/* ── رف المكونات ── */
.pp-shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem;
  background: linear-gradient(#9C5528, #7C3D17);
  border: 2px solid #5E2C0E; border-radius: 16px; padding: .5rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), var(--shadow-sm);
}
.pp-top {
  display: flex; flex-direction: column; align-items: center; gap: .22rem;
  padding: .34rem .2rem; border-radius: 11px; background: rgba(255, 245, 230, .92);
  border: 2px solid transparent; transition: transform var(--t), border-color var(--t), background var(--t);
}
.pp-top:hover { transform: translateY(-2px); }
.pp-top.is-on { border-color: var(--gold-l); background: #FFF7E3; transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, .22); }
.pp-top.is-full { opacity: .5; }
.pp-top .ic { width: 30px; height: 30px; }
.pp-top .ic svg { width: 100%; height: 100%; }
.pp-top .nm { font-size: .68rem; font-weight: 800; color: var(--ink-2); text-align: center; }
.pp-top .ct { font-size: .62rem; font-weight: 800; color: var(--muted); }

/* ── شريط تقدّم المكونات ── */
.pp-prog { display: flex; gap: .35rem; flex-wrap: wrap; }
.pp-pill {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800;
  padding: .2rem .55rem; border-radius: 999px; background: #FFF3E0;
  border: 1.5px solid var(--line-2); color: var(--ink-2);
}
.pp-pill.ok { background: var(--green-l); border-color: #A7E8BE; color: #15803D; }

/* ── الفرن ── */
.pp-oven {
  position: relative; border-radius: 20px; padding: 14px;
  background: linear-gradient(#4B5563, #374151 55%, #1F2937);
  border: 3px solid #111827; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .16), var(--shadow);
}
.pp-oven .mouth {
  border-radius: 14px; background: radial-gradient(circle at 50% 120%, #7C2D12, #1C1917 70%);
  border: 3px solid #0B0F14; position: relative; overflow: hidden;
  display: flex; justify-content: center; align-items: center; min-height: 240px;
}
.pp-oven .mouth.hot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 118%, rgba(255, 154, 40, .5), transparent 62%);
  animation: ppHeat 1.6s ease-in-out infinite;
}
@keyframes ppHeat { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
.pp-oven .mouth canvas { position: relative; z-index: 2; width: min(100%, 360px); height: auto; aspect-ratio: 1 / 1; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); }
.pp-oven .mouth::before {
  content: ''; position: absolute; inset-inline: 4%; bottom: 0; height: 32%; z-index: 1;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 170, 60, .5), rgba(249, 115, 22, .2) 52%, transparent 78%);
  filter: blur(3px); animation: ppCoals 2.6s ease-in-out infinite;
}
.pp-oven .flames { position: absolute; inset-inline: 0; bottom: -2px; height: 64%; pointer-events: none; z-index: 1; }
.pp-oven .flames i {
  position: absolute; bottom: 0; width: 15%; height: 74%;
  border-radius: 50% 50% 44% 44% / 68% 68% 32% 32%;
  background: radial-gradient(50% 62% at 50% 80%, #FFF6CE 0%, #FBBF24 30%, #F97316 56%, rgba(220, 38, 38, .5) 76%, transparent 92%);
  filter: blur(5px); opacity: .88; transform-origin: 50% 100%;
  animation: ppLick 1.5s ease-in-out infinite;
}
.pp-oven .flames i:nth-child(1) { left: 3%;  animation-duration: 1.65s; }
.pp-oven .flames i:nth-child(2) { left: 17%; height: 92%; animation-duration: 1.25s; animation-delay: .18s; }
.pp-oven .flames i:nth-child(3) { left: 32%; height: 66%; animation-duration: 1.8s;  animation-delay: .32s; }
.pp-oven .flames i:nth-child(4) { left: 47%; height: 100%; animation-duration: 1.35s; animation-delay: .06s; }
.pp-oven .flames i:nth-child(5) { left: 62%; height: 70%; animation-duration: 1.7s;  animation-delay: .44s; }
.pp-oven .flames i:nth-child(6) { left: 76%; height: 90%; animation-duration: 1.3s;  animation-delay: .22s; }
.pp-oven .flames i:nth-child(7) { left: 88%; animation-duration: 1.55s; animation-delay: .38s; }
.pp-oven .flames.strong i { opacity: 1; }
.pp-oven .mouth.hot .flames i { filter: blur(4px) saturate(1.15); }
@keyframes ppLick {
  0%, 100% { transform: scaleY(1) scaleX(1) translateY(0); opacity: .78; }
  50% { transform: scaleY(1.15) scaleX(.9) translateY(-4%); opacity: 1; }
}
@keyframes ppCoals { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.pp-oven .knobs { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; color: #E5E7EB; font-size: .74rem; font-weight: 700; }
.pp-oven .knobs .lamp { width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 10px #F59E0B; }
.pp-oven .knobs .lamp.idle { background: #D97706; box-shadow: 0 0 6px rgba(217, 119, 6, .75); animation: ppCoals 2.6s ease-in-out infinite; }

.pp-bakebar { display: flex; flex-direction: column; gap: .3rem; }
.pp-bakebar .track {
  position: relative; height: 26px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, #F4E0C4, #E6B77E 45%, #A0522D 78%, #3B1D0C);
  border: 2px solid #5E2C0E;
}
.pp-bakebar .band {
  position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, .38);
  border-inline: 2px solid #16A34A;
}
.pp-bakebar .needle {
  position: absolute; top: -3px; bottom: -3px; width: 5px; border-radius: 3px;
  background: #FFFDF6; box-shadow: 0 0 0 2px #111827; transform: translateX(50%);
}
.pp-bakebar .ticks { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); font-weight: 700; }

/* ── محطة الاستقبال (الصالة) ── */
.pp-hall {
  display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center;
  background: linear-gradient(#FFF6E8, #FDE9CF);
  border: 2px solid var(--line-2); border-radius: 18px; padding: .7rem;
}
.pp-hall .room {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .45rem;
}
.pp-tbl {
  position: relative; border-radius: 14px; padding: .4rem .3rem;
  background: linear-gradient(#FFE9C9, #F7D6AC);
  border: 2px solid #DDAF7A; text-align: center; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
}
.pp-tbl::after {
  content: ''; position: absolute; inset: auto 12% -6px 12%; height: 8px; border-radius: 50%;
  background: rgba(120, 60, 20, .18);
}
.pp-tbl.is-cur { border-color: var(--gold-l); box-shadow: 0 0 0 3px rgba(251, 191, 36, .35); }
.pp-tbl .av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FBE4C9; }
.pp-tbl .av svg, .pp-tbl .av img { width: 100%; height: 100%; display: block; }
.pp-tbl .lb { font-size: .66rem; font-weight: 800; color: var(--ink-2); }
.pp-tbl .st { font-size: .62rem; color: var(--muted); }
.pp-tbl.empty { opacity: .6; border-style: dashed; }
.pp-crew {
  display: flex; flex-direction: column; gap: .35rem; align-items: center;
  min-width: 92px; padding: .5rem .4rem; border-radius: 16px;
  background: rgba(255, 255, 255, .72); border: 2px solid var(--line-2);
}
.pp-crew .cine { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: #FBE4C9; }
.pp-crew .cine svg, .pp-crew .cine img { width: 100%; height: 100%; display: block; }
.pp-crew .line { font-size: .68rem; color: var(--ink-2); text-align: center; font-weight: 700; }

/* ── النوافذ ── */
.pp-overlay {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(60, 20, 6, .55); backdrop-filter: blur(3px);
}
.pp-overlay.is-on { display: flex; animation: ppFade .22s ease; }
@keyframes ppFade { from { opacity: 0; } to { opacity: 1; } }
.pp-card {
  width: min(520px, 100%); max-height: 88dvh; overflow: auto;
  background: var(--paper); border-radius: 22px; padding: 1.1rem;
  border: 3px solid #F0B429; box-shadow: var(--shadow-lg);
  animation: ppPop .28s cubic-bezier(.2, 1.4, .5, 1);
}
@keyframes ppPop { from { transform: scale(.9) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-card h3 { font-family: var(--f-display); font-size: 1.3rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.pp-card .sub { color: var(--muted); font-size: .82rem; margin-bottom: .6rem; }
.pp-stars { display: flex; gap: .2rem; justify-content: center; margin: .5rem 0 .7rem; }
.pp-stars svg { color: #E5E7EB; }
.pp-stars svg.on { color: var(--gold-l); }
.pp-rows { display: flex; flex-direction: column; gap: .4rem; }
.pp-row {
  display: flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; color: var(--ink-2);
  padding: .38rem .55rem; background: #FFF7EA; border-radius: 10px;
}
.pp-row .v { margin-inline-start: auto; font-weight: 900; }
.pp-row.good .v { color: var(--green); }
.pp-row.mid .v { color: var(--gold); }
.pp-row.bad .v { color: var(--red); }
.pp-card .acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.pp-card .acts .pp-btn { flex: 1; justify-content: center; }
.pp-money-big { font-family: var(--f-display); font-size: 1.9rem; color: var(--green); text-align: center; }

/* ── المتجر ── */
.pp-shop { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pp-item {
  display: flex; flex-direction: column; gap: .25rem; text-align: start;
  padding: .55rem; border-radius: 14px; background: #FFF7EA;
  border: 2px solid var(--line-2); transition: transform var(--t), border-color var(--t);
}
.pp-item:hover { transform: translateY(-2px); border-color: var(--gold-l); }
.pp-item.owned { background: var(--green-l); border-color: #A7E8BE; }
.pp-item .ttl { font-size: .84rem; font-weight: 900; color: var(--ink); }
.pp-item .dsc { font-size: .72rem; color: var(--muted); line-height: 1.45; }
.pp-item .buy { display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 900; color: var(--red-d); }
.pp-item.owned .buy { color: #15803D; }

/* ── تأثيرات ── */
.pp-fly {
  position: fixed; z-index: 90; pointer-events: none;
  font-family: var(--f-display); font-weight: 900; font-size: 1.1rem; color: var(--gold);
  text-shadow: 0 2px 0 #7C2D12; animation: ppFly 1.1s ease forwards;
}
@keyframes ppFly { from { transform: translateY(0) scale(.7); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-64px) scale(1.12); opacity: 0; } }
.pp-toastline {
  position: fixed; inset: auto 0 96px 0; display: flex; flex-direction: column; align-items: center;
  gap: .3rem; z-index: 85; pointer-events: none;
}
.pp-toastline div {
  background: rgba(60, 20, 6, .9); color: #FFE9C9; font-size: .82rem; font-weight: 800;
  padding: .38rem .9rem; border-radius: 999px; animation: ppFly2 .3s ease;
}
@keyframes ppFly2 { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── تجاوب ── */
@media (max-width: 860px) {
  .pp-work { grid-template-columns: 1fr; }
  .pp-ticket { position: static; order: -1; }
  .pp-hall { grid-template-columns: 1fr; }
  .pp-crew { flex-direction: row; min-width: 0; justify-content: center; }
  .pp-stage { min-height: 0; padding: .55rem; }
  .pp-board canvas { width: min(100%, 330px); }
}
@media (max-width: 520px) {
  .pp-shop { grid-template-columns: 1fr; }
  .pp-nav button { font-size: .62rem; padding: .34rem .1rem; }
  .pp-shelf { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .pp-body { padding-inline: .45rem; }
  .pp-oven { padding: 10px; }
  .pp-oven .mouth { min-height: 210px; }
  .pp-oven .mouth canvas { width: min(100%, 250px); }
  .pp-oven .flames { height: 74%; }
}