/* ============================================================
   HAM PIZZA — the ordering system
   Layers on top of arcade.css: same palette, same CRT, plus the
   builder, the receipt, the tracker and the kitchen screen.
   ============================================================ */

body{
  user-select:auto;
  -webkit-user-select:auto;
  /* arcade.css budgets 52px for the fixed bar, which is right for a game
     canvas that starts lower down. These pages put content hard against the
     top, and the bar is ~64px tall — so give it real clearance. */
  padding-top:calc(78px + env(safe-area-inset-top));
}

/* arcade.css gives .hp-stage `display:flex`, which beats the UA stylesheet's
   [hidden]{display:none} — without this the screens all stack on top of each
   other instead of switching. */
[hidden]{ display:none !important; }

.hp-stage.wide{ max-width:1080px; align-items:stretch; }

/* ---------- passcode gate ---------- */
.gate{
  max-width:420px;
  margin:8vh auto 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.gate .slot{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(13px, 4vw, 18px);
  color:var(--amber);
  text-shadow:0 0 14px color-mix(in srgb, var(--amber) 45%, transparent);
  line-height:1.9;
}
.gate p{ color:var(--ink-dim); font-size:12.5px; line-height:1.8; margin:0; }

input[type="text"], input[type="password"], textarea{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  color:var(--ink);
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:13px 14px;
  width:100%;
  min-height:46px;
}
input:focus, textarea:focus{ outline:none; border-color:var(--amber); }
input::placeholder, textarea::placeholder{ color:#5c6b64; }

.err{
  color:var(--red);
  font-size:12px;
  letter-spacing:0.5px;
  min-height:16px;
  line-height:1.6;
}

/* ---------- section headings ---------- */
.step{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 12px;
}
.step h2{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  color:var(--amber);
  margin:0;
  letter-spacing:1px;
}
.step .sub{ color:var(--ink-dim); font-size:11.5px; }

.block{
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:16px;
  margin-bottom:14px;
}

/* ---------- choice chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:'IBM Plex Mono', monospace;
  text-align:left;
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--ink);
  padding:10px 13px;
  min-height:46px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 150px;
}
.chip .n{ font-size:11.5px; letter-spacing:0.8px; font-weight:600; }
.chip .s{ font-size:10.5px; color:var(--ink-dim); }
.chip .p{ font-size:10.5px; color:var(--amber-dim); }
.chip:hover{ border-color:var(--amber-dim); }
.chip[aria-pressed="true"]{
  border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, var(--bg-raised));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent);
}
.chip[aria-pressed="true"] .p{ color:var(--amber); }

/* ---------- topping grid ---------- */
.toppings{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:8px;
}
.top{
  font-family:'IBM Plex Mono', monospace;
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  padding:10px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  min-height:56px;
}
.top .g{ font-size:20px; line-height:1; flex:none; }
.top .t{ min-width:0; }
.top .t b{ display:block; font-size:11px; letter-spacing:0.6px; font-weight:600; }
.top .t span{ display:block; font-size:10px; color:var(--ink-dim); }
.top:hover{ border-color:var(--amber-dim); }
.top[aria-pressed="true"]{
  border-color:var(--green);
  background:color-mix(in srgb, var(--green) 10%, var(--bg-raised));
}
.top[aria-pressed="true"] .t b{ color:var(--green); }
.top.essential{ border-color:var(--amber-dim); }
.top.essential .t span{ color:var(--amber-dim); }
.top.essential[aria-pressed="true"]{
  border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, var(--bg-raised));
}
.top.essential[aria-pressed="true"] .t b{ color:var(--amber); }
.top.chaos[aria-pressed="true"]{ border-color:var(--purple); }
.top.chaos[aria-pressed="true"] .t b{ color:var(--purple); }
.top:disabled{ opacity:0.35; cursor:not-allowed; }

/* ---------- the pizza itself ---------- */
.builder{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:16px;
  align-items:start;
}
@media (max-width:820px){
  .builder{ grid-template-columns:1fr; }
  .pane{ position:static !important; }
}

.pane{
  position:sticky;
  top:calc(64px + env(safe-area-inset-top));
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pizza-art{ width:100%; max-width:260px; margin:0 auto; display:block; }
.pizza-art .top-glyph{
  font-size:19px;
  animation:plop 260ms cubic-bezier(.2,1.6,.4,1);
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes plop{
  from{ opacity:0; transform:scale(0.2) translateY(-14px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .pizza-art .top-glyph{ animation:none; }
}

.readout{ font-size:11.5px; line-height:1.85; color:var(--ink-dim); }
.readout b{ color:var(--ink); font-weight:600; }
.total{
  font-family:'Press Start 2P', monospace;
  font-size:16px;
  color:var(--amber);
  text-align:center;
  padding:10px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-shadow:0 0 12px color-mix(in srgb, var(--amber) 40%, transparent);
}

.row{ display:flex; gap:8px; flex-wrap:wrap; }
.row .hp-btn{ flex:1 1 auto; }

/* ---------- the three menus ---------- */
.menus{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.menu-tab{
  flex:1 1 150px;
  font-family:'Press Start 2P', monospace;
  font-size:clamp(8px, 2.1vw, 10px);
  letter-spacing:0.5px;
  line-height:1.6;
  color:var(--ink-dim);
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:15px 10px;
  min-height:52px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.menu-tab:hover{ border-color:var(--amber-dim); color:var(--ink); }
.menu-tab[aria-selected="true"]{
  color:var(--amber);
  border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 10%, var(--bg-panel));
  box-shadow:0 0 18px color-mix(in srgb, var(--amber) 14%, transparent);
}
.menu-tab .count{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--bg);
  background:var(--green);
  border-radius:9px;
  min-width:18px;
  padding:2px 5px;
  line-height:1.3;
}

/* ---------- the pizza tabs ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tab{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:1px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--ink-dim);
  padding:9px 13px;
  min-height:40px;
  cursor:pointer;
}
.tab[aria-selected="true"]{ color:var(--amber); border-color:var(--amber); background:var(--bg-raised); }
.tab.add{ color:var(--green); border-style:dashed; }
.tab .x{ color:var(--red); margin-left:6px; }
.tab.note{
  border:none;
  color:var(--ink-dim);
  letter-spacing:0.8px;
  cursor:default;
  padding-left:2px;
}

/* ---------- receipt ---------- */
.receipt{
  max-width:460px;
  margin:0 auto;
  background:#f4efe2;
  color:#1b1b1b;
  padding:22px 20px 26px;
  font-size:12.5px;
  line-height:1.85;
  box-shadow:0 14px 40px rgba(0,0,0,0.55);
  /* torn bottom edge */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
}
.receipt h3{
  font-family:'Press Start 2P', monospace;
  font-size:13px;
  text-align:center;
  margin:0 0 4px;
}
.receipt .rule{ border-top:1px dashed #999; margin:12px 0; }
.receipt .li{ display:flex; justify-content:space-between; gap:12px; }
.receipt .li span:last-child{ white-space:nowrap; }
.receipt .muted{ color:#666; font-size:11px; }
.receipt .code{
  font-family:'Press Start 2P', monospace;
  font-size:15px;
  text-align:center;
  letter-spacing:1px;
  margin:10px 0 2px;
}

/* ---------- tracker ---------- */
.track{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.track .headline{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(12px, 3.4vw, 17px);
  color:var(--green);
  text-align:center;
  line-height:1.8;
  text-shadow:0 0 14px color-mix(in srgb, var(--green) 45%, transparent);
}
.pipeline{ display:flex; flex-direction:column; gap:0; }
.pstep{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-left:2px solid var(--line);
  color:var(--ink-dim);
  font-size:12px;
  letter-spacing:0.6px;
}
.pstep .dot{
  width:11px; height:11px; flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  margin-left:-19px;
  background:var(--bg);
}
.pstep.done{ color:var(--ink); border-left-color:var(--green); }
.pstep.done .dot{ background:var(--green); border-color:var(--green); }
.pstep.now{ color:var(--green); border-left-color:var(--green); }
.pstep.now .dot{
  background:var(--green); border-color:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--green) 8%, transparent); } }
@media (prefers-reduced-motion:reduce){ .pstep.now .dot{ animation:none; } }
.pstep .at{ margin-left:auto; font-size:10.5px; color:var(--ink-dim); }
.pstep.cancelled{ color:var(--red); border-left-color:var(--red); }
.pstep.cancelled .dot{ background:var(--red); border-color:var(--red); }

/* the oven */
.oven{
  width:100%;
  max-width:300px;
  margin:0 auto;
  display:block;
}
.oven .flame{ animation:flick 900ms steps(2,end) infinite; transform-box:fill-box; transform-origin:bottom center; }
@keyframes flick{ 50%{ transform:scaleY(0.82) translateY(2px); opacity:0.75; } }
@media (prefers-reduced-motion:reduce){ .oven .flame{ animation:none; } }

/* ---------- kitchen ---------- */
.queue{ display:grid; grid-template-columns:repeat(auto-fill, minmax(292px,1fr)); gap:12px; }
.ticket{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ticket.s-placed{ --accent:var(--red); }
.ticket.s-accepted{ --accent:var(--amber); }
.ticket.s-in_the_oven{ --accent:var(--purple); }
.ticket.s-out_for_delivery{ --accent:var(--cyan); }
.ticket.s-delivered{ --accent:var(--green); opacity:0.55; }
.ticket.s-cancelled{ --accent:var(--line); opacity:0.4; }
.ticket.fresh{ animation:arrive 500ms ease-out; }
@keyframes arrive{ from{ transform:scale(0.96); box-shadow:0 0 0 3px var(--red); } }

.ticket .thead{ display:flex; align-items:baseline; gap:8px; }
.ticket .tcode{ font-family:'Press Start 2P', monospace; font-size:11px; color:var(--accent); }
.ticket .twho{ font-size:12px; font-weight:600; }
.ticket .tage{ margin-left:auto; font-size:10.5px; color:var(--ink-dim); }
.ticket .tstate{
  font-size:10px; letter-spacing:1.4px; color:var(--accent);
  border:1px solid var(--accent); padding:3px 7px; align-self:flex-start;
}
.ticket ul{ margin:0; padding:0; list-style:none; font-size:11.5px; line-height:1.75; }
.ticket li{ border-bottom:1px dotted var(--line); padding:5px 0; }
.ticket li:last-child{ border-bottom:none; }
.ticket .tops{ color:var(--ink-dim); font-size:10.5px; }
.ticket .tnote{
  font-size:11.5px; color:var(--amber);
  border-left:2px solid var(--amber-dim); padding-left:9px; line-height:1.7;
}
.ticket .ttotal{ font-size:12px; color:var(--ink-dim); }
.ticket .ttotal b{ color:var(--ink); }
.ticket .acts{ display:flex; gap:7px; }
.ticket .acts .hp-btn{ flex:1; font-size:10.5px; padding:9px 6px; letter-spacing:0.6px; }

.kstats{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; font-size:11.5px; color:var(--ink-dim); }
.kstats b{ color:var(--amber); font-family:'Press Start 2P', monospace; font-size:13px; }

.empty{ color:var(--ink-dim); font-size:12.5px; text-align:center; padding:44px 12px; line-height:1.9; }