/* Taro's pizza picnic, in a 520 × 268 logical-pixel field. */
.pizza-field { --pizza-wood-light: #dda074; --pizza-wood-shade: #895236; position: absolute; inset: 0; color: var(--ink); font-family: var(--font-read); }
.pizza-badges { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.pizza-total, .pizza-equation { --chip: var(--math); font-family: var(--font-read); font-size: var(--text-field); line-height: 1.2; white-space: nowrap; }
.pizza-total::before, .pizza-equation::before { border: 1px solid var(--ink); clip-path: none; background: var(--math); box-shadow: inset 2px 2px 0 #ffc478, inset -2px -3px 0 #cd6d30; }
.pizza-equation { color: var(--paper); }
.pizza-equation::before { background: var(--finish-shade); box-shadow: inset 3px 3px 0 var(--pizza-wood-light), inset -3px -3px 0 var(--pizza-wood-shade), inset 4px 4px 0 var(--ink), inset -4px -4px 0 var(--ink); }
.pizza-equation::after { content: ''; position: absolute; right: 3px; bottom: -2px; width: 8px; height: 2px; background: var(--paper); box-shadow: -12px 0 0 var(--wood); pointer-events: none; }
.pizza-equation--ready { --chip: var(--finish); color: var(--paper); }
.pizza-equation--ready::before { background: var(--finish); }
.pizza-board { position: absolute; left: 32px; top: 52px; width: 160px; height: 160px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pizza-board svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pizza-board:hover { outline: 1px solid var(--ink); outline-offset: 2px; }
.pizza-plank { position: absolute; left: 24px; top: 230px; width: 176px; height: 14px; border: 1px solid var(--ink); background: var(--wood); box-shadow: inset 0 2px 0 var(--pizza-wood-light), inset 2px 0 0 var(--pizza-wood-light), inset 0 -3px 0 var(--pizza-wood-shade); }
.pizza-plank::before { content: ''; position: absolute; left: 18px; top: 4px; width: 30px; height: 1px; background: var(--pizza-wood-shade); box-shadow: 4px 1px 0 var(--pizza-wood-light), 50px 2px 0 var(--pizza-wood-shade), 98px 0 0 var(--pizza-wood-shade), 104px 1px 0 var(--pizza-wood-light); }
.pizza-plank::after { content: ''; position: absolute; left: 6px; top: 4px; width: 2px; height: 2px; background: var(--ink); box-shadow: 1px -1px 0 var(--paper-shade), 158px 0 0 var(--ink), 159px -1px 0 var(--paper-shade); }
.pizza-wheel { position: absolute; top: 242px; width: 24px; height: 24px; background: var(--ink); clip-path: polygon(6px 0,18px 0,18px 2px,22px 2px,22px 6px,24px 6px,24px 18px,22px 18px,22px 22px,18px 22px,18px 24px,6px 24px,6px 22px,2px 22px,2px 18px,0 18px,0 6px,2px 6px,2px 2px,6px 2px); }
.pizza-wheel::before { content: ''; position: absolute; inset: 1px; background: var(--ink-soft); box-shadow: inset 2px 2px 0 #72769b, inset -4px -4px 0 var(--letterbox); clip-path: polygon(6px 0,16px 0,16px 2px,20px 2px,20px 6px,22px 6px,22px 16px,20px 16px,20px 20px,16px 20px,16px 22px,6px 22px,6px 20px,2px 20px,2px 16px,0 16px,0 6px,2px 6px,2px 2px,6px 2px); }
.pizza-wheel::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--ink); background: var(--wood); box-shadow: inset 2px 2px 0 var(--path), inset -2px -2px 0 var(--pizza-wood-shade); }
.pizza-wheel--left { left: 48px; }
.pizza-wheel--right { left: 152px; }
.pizza-ground { position: absolute; left: 214px; right: 8px; top: 230px; border-top: 2px solid var(--grass-dark); }
.pizza-friends { position: absolute; top: 52px; left: 216px; width: 290px; display: grid; grid-template-columns: repeat(4, 68px); grid-template-rows: 110px 89px; gap: 6px; }
.pizza-give { position: relative; width: 68px; height: 110px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.pizza-name { font-size: var(--text-small); line-height: 22px; font-weight: 700; }
.pizza-idle, .pizza-joy { width: 64px; height: 64px; line-height: 0; }
.pizza-plate { --pizza-plate-face: var(--paper); position: relative; width: 56px; height: 18px; margin-top: 3px; background: transparent; border: 2px solid transparent; }
.pizza-plate > svg { position: absolute; left: -2px; top: -2px; display: block; image-rendering: pixelated; }
.pizza-plate-face { fill: var(--pizza-plate-face); }
.pizza-count { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); padding: 0 2px; border: 1px solid var(--ink); background: var(--paper); box-shadow: inset 1px 1px 0 var(--white), inset -1px -1px 0 var(--paper-shade); font: 700 var(--text-field)/1.2 var(--font-read); }
.pizza-give:hover .pizza-plate { --pizza-plate-face: var(--lantern); }
.pizza-give:hover .pizza-count { background: var(--lantern); }
.pizza-worry { position: absolute; top: 22px; right: 0; padding: 1px 6px; background: var(--paper); border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--white), inset -1px -2px 0 var(--paper-shade); font-weight: 700; line-height: 22px; }
.pizza-pieces { display: grid; grid-template-columns: repeat(3, 20px); grid-auto-rows: 20px; gap: 3px; align-content: start; width: 66px; }
.pizza-piece { width: 20px; height: 20px; padding: 0; border: 0; background: var(--paper-shade); box-shadow: inset 1px 1px 0 var(--paper), inset -1px -1px 0 #d6c39d; cursor: pointer; }
.pizza-piece svg { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
.pizza-piece-half, .pizza-piece--half .pizza-piece-whole { display: none; }
.pizza-piece--half .pizza-piece-half { display: inline; }
.pizza-field [hidden] { display: none !important; }
.pizza-give--got .pizza-plate { animation: pizza-got 360ms steps(2) 1; }
.pizza-give--ready .pizza-joy { animation: pizza-cheer 600ms steps(3) 2; }
@keyframes pizza-got { 50% { --pizza-plate-face: var(--lantern); transform: translateY(-3px); } }
@keyframes pizza-cheer { 50% { transform: translateY(-6px); } }
.large-text .pizza-total { display: none; }
.large-text .pizza-badges { justify-content: flex-end; }
.calm .pizza-field * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pizza-field * { animation: none !important; transition: none !important; } }