/* Business Smash — a baby's office.
   Real office software, drawn in crayon: pastel, slightly wonky, rounded
   everything. The windows are deliberately tilted a degree or two so the
   desktop looks like it was made out of paper and glue. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #4a3f6b;
  --ink-soft: #7b6ea6;
  --paper: #fffdf7;
  --line: #ded3f0;
  --pink: #ff8fb1;
  --yellow: #ffd166;
  --green: #8ce99a;
  --blue: #74c0fc;
  --purple: #c39bff;
  --orange: #ffa94d;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #bfe3f5;
  color: var(--ink);
  font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
  cursor: default;
}

/* ---------------------------------------------------------------- desktop */

#desktop { position: fixed; inset: 0; overflow: hidden; }

.wallpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 241, 160, .9) 0 8vmin, transparent 8.4vmin),
    linear-gradient(#a8dcf5 0%, #c9ecfa 46%, #ddf4d8 68%, #cdebb4 100%);
}
/* Rolling hills out the office window. */
.wallpaper::after {
  content: "";
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 42%;
  background:
    radial-gradient(ellipse 60% 100% at 20% 100%, #a7d98a 0 60%, transparent 62%),
    radial-gradient(ellipse 55% 90% at 70% 100%, #94ce7a 0 60%, transparent 62%),
    radial-gradient(ellipse 70% 80% at 45% 100%, #b6e09a 0 60%, transparent 62%);
}

#windows { position: absolute; inset: 0; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* ---------------------------------------------------------------- windows */

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  /* Wonky corners rather than a wonky angle. The windows used to be tilted a
     degree or two, which looked lovely and cost half the frame rate: a rotated
     element can't take the fast axis-aligned raster path, so every cell that
     animated inside one forced a re-raster of the rotated geometry. Measured
     50fps with the tilt, 60fps without. Promoting each window to its own
     compositing layer was worse again. Uneven corner radii are free and read
     just as hand-made. */
  border-radius: var(--r, 18px 22px 16px 20px);
  box-shadow: 0 8px 0 rgba(74, 63, 107, .18), 0 12px 22px rgba(60, 50, 90, .22);
  overflow: hidden;
  animation: pop-in .34s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes pop-in {
  from { transform: scale(.6) translateY(24px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.win.closing { animation: pop-out .26s ease forwards; }
@keyframes pop-out {
  to { transform: scale(.75) translateY(18px) rotate(6deg); opacity: 0; }
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(var(--purple), #ad86f0);
  border-bottom: 3px solid var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  flex: none;
}
.win-sheet .titlebar   { background: linear-gradient(var(--green), #63cf7a); }
.win-call .titlebar    { background: linear-gradient(var(--blue), #4aa3ef); }
.win-chart .titlebar   { background: linear-gradient(var(--orange), #f38b2b); }
.win-mail .titlebar    { background: linear-gradient(var(--pink), #f2698f); }
.win-calendar .titlebar{ background: linear-gradient(var(--yellow), #f0b73a); color: #5a4410; text-shadow: none; }
.titlebar .ic { font-size: 16px; }
.titlebar .tt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dots { display: flex; gap: 5px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); background: #fff; }
.dots .cls { background: #ff8f8f; }
.dots .max { background: #ffe08a; }
.dots .min { background: #b6f0c0; }

.body { flex: 1; padding: 10px; overflow: hidden; display: flex; flex-direction: column; }

/* ------------------------------------------------------------ spreadsheet */

.sheet { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.row { display: flex; gap: 2px; flex: 1; min-height: 0; }
.cell, .colhead, .rowhead {
  flex: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 6px;
  font-size: clamp(11px, 1.6vmin, 17px);
  font-weight: 800;
  overflow: hidden;
}
.colhead {
  background: #efe6ff;
  color: var(--ink-soft);
  font-size: clamp(8px, 1.15vmin, 12px);
  letter-spacing: .5px;
}
.rowhead {
  flex: 0 0 26px;
  background: #efe6ff;
  color: var(--ink-soft);
  font-size: 11px;
}
.head { flex: 0 0 26px; }
.cell { background: #fff; }
.cell.filled { background: #fff8dd; color: var(--ink); }
.cell.num { background: #e6f7ff; color: #1c6fa8; }
.cell.cursor { border-color: var(--green); box-shadow: inset 0 0 0 2px #b8f0c4; }
.cell.popA { animation: cell-popA .34s cubic-bezier(.2, 1.6, .4, 1); }
.cell.popB { animation: cell-popB .34s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cell-popA {
  from { transform: scale(.3); }
  60%  { transform: scale(1.22); }
  to   { transform: scale(1); }
}
@keyframes cell-popB {
  from { transform: scale(.3); }
  60%  { transform: scale(1.22); }
  to   { transform: scale(1); }
}

.sheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 800;
}
.sheet-foot .total { color: var(--ink); font-size: 15px; }
.sheet-foot .up { margin-left: auto; color: #2f9e52; }

/* ------------------------------------------------------------- video call */

.call-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Explicit equal rows: with auto rows the top tiles sized to content and
     cropped the babies' chins. */
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 0;
}
.tile {
  position: relative;
  background: linear-gradient(#eaf4ff, #d6e9fb);
  border: 3px solid #cfe0f2;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Size from the height with a locked square ratio. Sizing by width let the
   SVG resolve taller than its tile and the babies' chins were clipped off. */
.tile .face { height: 94%; aspect-ratio: 1 / 1; max-width: 86%; }
.tile .nm {
  position: absolute; left: 6px; bottom: 5px;
  font-size: 10px; font-weight: 800;
  background: rgba(255, 255, 255, .85);
  padding: 1px 6px; border-radius: 8px;
}
.tile .mic { position: absolute; right: 6px; bottom: 5px; font-size: 10px; opacity: .5; }
/* The one who's talking gets the green ring, exactly like the real thing. */
.tile.talking {
  border-color: #46d17a;
  box-shadow: 0 0 0 3px rgba(70, 209, 122, .35);
}
.tile.talking .mouth { animation: yap .18s ease-in-out infinite alternate; }
.tile.talking .face { animation: bob .32s ease-in-out infinite alternate; }
@keyframes yap { from { ry: 3; } to { ry: 8; } }
@keyframes bob { to { transform: translateY(-3px); } }
.tile .eye { animation: blink 4.2s infinite; }
.tile:nth-child(2) .eye { animation-delay: 1.1s; }
.tile:nth-child(3) .eye { animation-delay: 2.3s; }
.tile:nth-child(4) .eye { animation-delay: 3.1s; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(.1); }
}

.call-bar {
  flex: none;
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.pill {
  font-size: 11px; font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  background: #eee6ff;
  color: var(--ink-soft);
}
.pill.red { background: #ffe0e0; color: #c0453f; }
.pill.leave { background: #ff8f8f; color: #fff; }

/* ------------------------------------------------------------------ chart */

.chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 4px;
  border-bottom: 3px solid var(--line);
  min-height: 0;
}
.bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(var(--orange), #f0761e);
  transition: height .28s cubic-bezier(.2, 1.4, .4, 1);
}
.bar:nth-child(even) { background: linear-gradient(var(--yellow), #edb52f); }
.chart-cap { flex: none; margin-top: 6px; font-size: 13px; font-weight: 800; color: #2f9e52; }

/* ------------------------------------------------------------------- mail */

.mail { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.mail-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 8px;
  border-radius: 8px;
  background: #f6f2ff;
  font-size: 12px;
  animation: pop-in .3s ease;
}
.mail-row.unread { background: #fff4d6; }
.mail-row b { flex: 0 0 auto; }
.mail-row span { color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ----------------------------------------------------------------- slides */

.slide {
  flex: 1;
  background: linear-gradient(#fffdf0, #fff3d0);
  border: 3px dashed var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  overflow: hidden;
}
.slide h2 { margin: 0 0 8px; font-size: clamp(14px, 2.2vmin, 22px); color: var(--orange); }
.slide ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* --------------------------------------------------------------- calendar */

.cal { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.ev {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 9px;
  border-radius: 9px;
  background: #fff6df;
  border-left: 5px solid var(--yellow);
  font-size: 12px;
}
.ev i { font-style: normal; color: var(--ink-soft); font-weight: 800; }

/* ---------------------------------------------------------------- taskbar */

#taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(#fff, #f0e9ff);
  border-top: 3px solid var(--ink);
  font-size: 12px;
  z-index: 30;
}
.start {
  font-weight: 800;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 4px 10px;
  flex: none;
}
.tasks { display: flex; gap: 6px; overflow: hidden; flex: 1; }
.task {
  background: #efe6ff;
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 3px 9px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink-soft);
  animation: pop-in .3s ease;
}
.tray { display: flex; gap: 12px; align-items: center; color: var(--ink-soft); flex: none; }
.clock { font-weight: 800; }

/* ----------------------------------------------------------------- toasts */

#toasts {
  position: absolute;
  right: 14px; bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  z-index: 35;
}
.toast {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 6px 0 rgba(74, 63, 107, .18);
  transform: translateX(30px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, 1.5, .4, 1), opacity .28s ease;
}
.toast.go { transform: none; opacity: 1; }

/* ------------------------------------------------------------------- gate */

#gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(40, 30, 70, .55);
  padding: 4vmin;
}
#gate.gone { display: none; }
.gate-card {
  max-width: min(92vw, 660px);
  padding: 5vmin 6vmin;
  border-radius: 4vmin;
  text-align: center;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 0 14px 0 rgba(74, 63, 107, .25), 0 2vmin 6vmin rgba(0, 0, 0, .4);
}
.gate-card h1 { margin: 0; font-size: clamp(26px, 5.6vmin, 50px); color: var(--purple); }
.tag { margin: 1.6vmin 0 3.6vmin; font-size: clamp(15px, 2.5vmin, 23px); color: var(--ink-soft); }
#play {
  font: inherit;
  font-size: clamp(19px, 4.2vmin, 38px);
  font-weight: 800;
  color: #fff;
  padding: 2.2vmin 6vmin;
  border: 3px solid var(--ink);
  border-radius: 99px;
  background: linear-gradient(#b98cf5, #9a63e8);
  box-shadow: 0 1.2vmin 0 #6f42b0;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
#play:hover { transform: translateY(-.3vmin); }
#play:active { transform: translateY(1.1vmin); box-shadow: 0 .2vmin 0 #6f42b0; }
.notes {
  margin: 3.4vmin 0 0; padding: 0; list-style: none;
  font-size: clamp(12px, 2vmin, 16px); line-height: 1.8; color: var(--ink-soft);
}

.mute {
  position: fixed; top: 2.5vmin; right: 2.5vmin;
  width: 8vmin; height: 8vmin; max-width: 54px; max-height: 54px;
  font-size: clamp(18px, 3.6vmin, 26px); line-height: 1;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--yellow);
  cursor: pointer; z-index: 51;
}
.mute.off { filter: grayscale(1); opacity: .6; }

#exit-hint {
  position: fixed; left: 50%; top: 1.6vmin;
  transform: translateX(-50%);
  z-index: 45;
  padding: .8vmin 2.4vmin;
  border-radius: 99px;
  font-size: clamp(10px, 1.7vmin, 14px);
  color: #fff;
  background: rgba(40, 30, 70, .5);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
#exit-hint.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .win, .cell.pop, .tile.talking .face, .tile .eye, .mail-row, .task { animation: none !important; }
}