/* Corner Café: house style held sideways. White top bar and icon sidebar frame the street; decisions sit in floating white panels.
   One deliberate light look (sunny Brisbane afternoon), so there is no dark theme. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("assets/fonts/bricolage-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("assets/fonts/bricolage-800.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("assets/fonts/figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("assets/fonts/figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("assets/fonts/figtree-700.woff2") format("woff2"); }
@font-face { font-family: "Limelight"; font-weight: 400; font-display: block; src: url("assets/fonts/limelight-400.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --ink: #2a2620;
  --muted: #6f675b;
  --line: #e7e0d2;
  --wash: #f4f0e7;
  --green: #2f5d46;
  --green-dk: #24493a;
  --green-soft: #dfe9e2;
  --room-bg: #efe4cc;
  --sky-top: #a7d3ea;
  --sky-low: #f4e8cf;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --split: 36%;
  color-scheme: light;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--room-bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.app { height: 100%; display: flex; flex-direction: column; }

/* top bar */
.bar {
  flex: none; height: 40px; display: flex; align-items: center; gap: 12px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  position: relative; z-index: 3; white-space: nowrap;
}
.brand { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--green); }
.date { font-size: 12px; color: var(--muted); }
.chip { font-size: 12px; font-weight: 600; background: var(--wash); padding: 4px 8px; border-radius: 6px; }
.spacer { flex: 1; }
.money { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep { font-size: 12px; color: var(--muted); }
.rep b { color: var(--green); font-size: 13px; }
.speed { display: flex; gap: 2px; background: var(--wash); border-radius: 8px; padding: 2px; }
.speed button { height: 28px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.speed button svg { width: 14px; height: 14px; }
.speed button.on { background: var(--paper); color: var(--green); box-shadow: 0 1px 2px rgba(60,45,20,.18); }

/* body */
.main { flex: 1; display: flex; min-height: 0; }
.side {
  flex: none; width: 52px; background: var(--paper); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-block: 6px; padding-left: env(safe-area-inset-left, 0px);
  box-sizing: content-box; z-index: 2;
}
.side button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; }
.side button:active { background: var(--wash); }
.side svg { width: 22px; height: 22px; }

.stage { flex: 1; position: relative; min-width: 0; overflow: hidden; touch-action: none; background: var(--room-bg); }
canvas#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pane { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.pane > * { pointer-events: auto; }
.pane-out { left: 0; width: var(--split); border-right: 2px solid var(--paper); box-sizing: border-box; }
.pane-room { left: var(--split); right: 0; padding-right: env(safe-area-inset-right, 0px); }

.card { background: var(--paper); border-radius: 8px; box-shadow: 0 2px 8px rgba(60,45,20,.16); }
.room-label { position: absolute; left: 10px; top: 10px; padding: 6px 9px; display: flex; flex-direction: column; gap: 1px; }
.room-label .eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.room-label .title { font-family: var(--display); font-weight: 700; font-size: 14px; }
.room-label.pulse { animation: pulse .9s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242,193,78,.9); } 100% { box-shadow: 0 0 0 12px rgba(242,193,78,0); } }

.add-room {
  position: absolute; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); height: 44px;
  border: 1.5px dashed var(--green); background: rgba(255,255,255,.88); color: var(--green);
  border-radius: 10px; font-size: 12px; font-weight: 700;
}
.chips { position: absolute; left: 10px; top: 10px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.chip-card { padding: 5px 9px; font-size: 12px; font-weight: 600; }

.cam { position: absolute; display: flex; flex-direction: column; gap: 6px; }
.pane-out .cam { right: 8px; top: 10px; }
.pane-room .cam { right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
.cam button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: 0 2px 8px rgba(60,45,20,.18); display: grid; place-items: center; }
.cam button:active { background: var(--wash); }
.cam svg { width: 20px; height: 20px; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--green); background: var(--room-bg); }
.toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: 80%;
  background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); text-align: center;
}

.turn-prompt {
  display: none; position: fixed; inset: 0; z-index: 20; background: var(--green); color: #f3e6c4;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
}
.turn-prompt svg { width: 64px; height: 64px; }
.turn-prompt b { font-family: var(--display); font-size: 22px; color: #fff; }
.turn-prompt span { max-width: 28ch; line-height: 1.4; }
@media (orientation: portrait) and (max-width: 700px) { .turn-prompt { display: flex; } }

/* narrow landscape phones (iPhone SE and mini) */
@media (max-width: 700px) {
  .date { display: none; }
  .rep { display: none; }
}
@media (prefers-reduced-motion: reduce) { .room-label.pulse { animation: none; } }

/* ---------- milestone 2: screens, alerts, day bar ---------- */
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; }
.btn-primary, .btn-quiet, .btn-outline {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font-size: 13px; font-weight: 700;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:active { background: var(--green-dk); }
.btn-quiet { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 4px 14px rgba(60,45,20,.16); }
.btn-outline { background: var(--paper); color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.big { flex: 1; }

/* modes: what the stage shows */
.mode-title .bar, .mode-title .side { display: none; }
.mode-title .pane, .mode-setup .pane, .mode-summary .pane { display: none; }
.mode-trading .pane { display: block; }

/* title */
.screen { position: absolute; z-index: 4; }
.title-screen { inset: 0; pointer-events: none; }
.title-screen > * { pointer-events: auto; }
.title-card {
  position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); top: max(20px, env(safe-area-inset-top, 0px));
  background: var(--paper); border-radius: 14px; padding: 14px 18px 12px; box-shadow: 0 6px 20px rgba(60,45,20,.18);
  display: flex; flex-direction: column; gap: 2px;
}
.game-name { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--green); }
.tagline { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.title-actions {
  position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: 280px; display: flex; flex-direction: column; gap: 8px;
}
.continue {
  text-align: left; border: 0; background: var(--paper); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(60,45,20,.2); display: flex; flex-direction: column; gap: 3px;
}
.eyebrow-green { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--green); font-weight: 700; }
.continue-name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.continue-meta { font-size: 12px; color: var(--muted); }
.confirm { background: var(--paper); border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(60,45,20,.2); display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
.confirm .row > * { flex: 1; }

/* floating white panels */
.panel {
  background: var(--paper); border-radius: 14px; box-shadow: 0 8px 26px rgba(60,45,20,.22);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px 8px; border-bottom: 1px solid #efe9dc; flex-wrap: wrap; }
.panel-title { font-family: var(--display); font-weight: 700; font-size: 18px; }
.panel-sub { font-size: 12px; color: var(--muted); }

/* morning set-up */
.setup { left: 12px; top: 10px; bottom: 10px; width: min(600px, calc(100% - 24px)); }
.setup-cols { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
.setup-cols .col { padding: 8px 14px 8px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-y: auto; }
.setup-cols .col + .col { border-left: 1px solid #efe9dc; padding: 8px 16px 8px 14px; }
.rows { display: flex; flex-direction: column; gap: 2px; }
.item-row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.tick {
  width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1.5px solid #b9b0a0; background: var(--paper);
  display: grid; place-items: center; padding: 0;
}
.tick svg { width: 16px; height: 16px; opacity: 0; }
.tick[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.tick[aria-pressed="true"] svg { opacity: 1; }
.item-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.item-row.off .item-name { color: var(--muted); font-weight: 400; }
.step { width: 32px; height: 32px; border: 1px solid #e0d8c8; background: var(--paper); border-radius: 8px; font-size: 16px; line-height: 1; padding: 0; }
.step:disabled { opacity: .35; }
.price { width: 48px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price.dear { color: #8a4a22; }
.price.cheap { color: #2c6d8e; }
.staff-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: #f6f2ea; min-height: 44px; }
.staff-row.off { background: transparent; box-shadow: inset 0 0 0 1.5px #d8cfbe; }
.staff-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.staff-who b { font-size: 13px; }
.staff-who span { font-size: 11px; color: var(--muted); }
.shift {
  min-width: 52px; height: 30px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--green-soft); color: var(--green);
}
.shift[aria-pressed="false"] { background: #efe9dc; color: var(--muted); }
.shift:disabled { cursor: default; }
.foot { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.open-doors { flex: none; min-height: 46px; margin-top: 6px; font-size: 14px; box-shadow: 0 4px 14px rgba(47,93,70,.28); }

/* end of day */
.summary { left: 16px; top: 14px; max-height: calc(100% - 28px); width: min(470px, calc(100% - 32px)); padding-bottom: 12px; }
.summary .panel-head { border-bottom: 0; padding-bottom: 2px; }
.sum-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 6px 18px 10px; min-height: 0; }
.ledger { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 0; }
.line { display: flex; justify-content: space-between; gap: 8px; }
.line.muted { color: var(--muted); }
.line.small { font-size: 12px; }
.line.total { border-top: 1.5px solid var(--ink); padding-top: 4px; margin-top: 2px; }
.line .pos { color: var(--green); }
.line .neg, .warn { color: #8a4a22; }
.note { margin: 0 18px 8px; font-size: 12px; line-height: 1.4; background: #f6f2ea; border-radius: 10px; padding: 8px 10px; }
.summary > .row { padding: 0 18px; }

/* trading: alert and the day bar */
.alert {
  position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); top: 48px; width: 186px;
  border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 20px rgba(60,45,20,.2); border-top: 4px solid #c0632f; z-index: 2;
}
.alert-title { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #8a4a22; font-weight: 700; }
.alert-text { font-size: 12px; line-height: 1.35; }
.alert .btn-primary { min-height: 36px; border-radius: 8px; font-size: 12px; padding: 0 10px; }
.phases {
  position: absolute; left: 10px; right: 64px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); height: 26px; border-radius: 13px;
  display: flex; align-items: center; gap: 3px; padding: 0 4px; font-size: 11px; font-weight: 600; overflow: hidden;
}
.phases span { height: 18px; border-radius: 9px; display: grid; place-items: center; white-space: nowrap; overflow: hidden; background: var(--wash); color: var(--muted); padding: 0 6px; min-width: 0; }
.phases span.done { background: var(--green-soft); color: var(--green); }
.phases span.now { background: var(--green); color: #fff; }
.pane-room .cam { bottom: 42px; }
.pane-room .cam button[data-reset] { display: none; }
.speed button:disabled { opacity: .45; cursor: default; }
@media (max-height: 400px) {
  .pane-room .cam { flex-direction: row; bottom: auto; top: 10px; right: max(10px, env(safe-area-inset-right, 0px)); }
  .pane-room .chips { right: 110px; }
  .alert { top: 62px; }
}
@media (max-width: 760px) { .phases { font-size: 10px; gap: 2px; } .phases span { padding: 0 3px; } }
@media (max-width: 700px) {
  .setup-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .item-row { gap: 5px; }
  .step { width: 30px; }
}