/* monitor.css — His Monitörü, the feeling screen in Ben's palace.
   The palace is the one BRIGHT room in the universe, so the screen is the one
   dark thing standing in it: a slab of glass on a marble wall, lit from
   inside, the way a monitor in a very expensive lobby looks. */

.hm-screen {
  position: relative;
  width: min(560px, 92vw);
  margin: 1.2em auto 0;
  padding: 1.1em 1.3em 1.3em;
  border-radius: 14px;
  background: linear-gradient(170deg, #1B1330, #0E0A1E);
  border: 2px solid rgba(184, 138, 74, 0.7);
  box-shadow: 0 14px 34px rgba(60, 30, 50, 0.28), inset 0 0 40px rgba(116, 176, 255, 0.07);
  overflow: hidden;
}
/* The sweep: a screen that is on, not a picture of a screen. */
.hm-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(116, 176, 255, 0.06) 48%, transparent);
  animation: hm-scan 5.5s linear infinite;
  pointer-events: none;
}
@keyframes hm-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

.hm-head {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-align: center;
  color: rgba(116, 176, 255, 0.75);
}

/* Ben himself, as big as his opinion of himself. */
.hm-face {
  font-size: clamp(2.6rem, 9vw, 3.8rem);
  line-height: 1.1;
  text-align: center;
  margin: 0.15em 0 0.3em;
  transition: transform 0.25s ease;
}
.hm-asking ~ .hm-face { transform: scale(1.04); }

.hm-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7em;
}

/* One readout. At rest it is dim and says what it is. */
.hm-cell {
  padding: 0.6em 0.4em 0.5em;
  border-radius: 9px;
  background: rgba(116, 176, 255, 0.06);
  border: 1px solid rgba(116, 176, 255, 0.16);
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.hm-cell-face { font-size: clamp(1.3rem, 4.5vw, 1.8rem); line-height: 1.2; }
.hm-cell-name {
  font-family: var(--serif);
  font-size: clamp(0.7rem, 2.2vw, 0.84rem);
  color: var(--gold);
  margin-top: 0.15em;
}

/* Asking for something: the cell lifts, warms, and the clock appears under it. */
.hm-cell.hm-asking {
  background: rgba(232, 193, 106, 0.13);
  border-color: rgba(232, 193, 106, 0.6);
  transform: translateY(-3px);
  animation: hm-alarm 1.6s ease-in-out infinite;
}
@keyframes hm-alarm {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 193, 106, 0); }
  50%      { box-shadow: 0 0 16px rgba(232, 193, 106, 0.35); }
}

.hm-track {
  height: 4px;
  margin-top: 0.45em;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hm-asking .hm-track { opacity: 1; }
.hm-fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #E8C16A, #E8776A);
}

/* kızgın: the boss's own opinion, along the bottom of his own screen. */
.hm-anger {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(116, 176, 255, 0.14);
}
.hm-anger-face { font-size: 1.1rem; filter: grayscale(0.7); transition: filter 0.3s ease; }
.hm-anger-name { font-family: var(--serif); font-size: 0.8rem; color: var(--gold); }
.hm-anger-bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.hm-anger-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #C88A6A, #D66A6A);
  transition: width 0.35s ease;
}
/* One more strike left: he stops being grey about it. */
.hm-anger.hm-hot .hm-anger-face { filter: none; animation: hm-fume 0.9s ease-in-out infinite; }
@keyframes hm-fume {
  0%, 100% { transform: none; }
  50% { transform: scale(1.18); }
}

/* A strike: the whole screen jolts, the way a screen does when somebody hits
   the desk it stands on. */
.hm-screen.hm-cross { animation: hm-jolt 0.4s ease; }
@keyframes hm-jolt {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  60% { transform: translateX(5px); }
}

/* The shift ends. Served: the glass warms gold. Thrown out: it goes red and
   the sweep stops, because nobody is watching this screen any more. */
.hm-screen.hm-done { border-color: var(--gold); box-shadow: 0 0 30px rgba(232, 193, 106, 0.4); }
.hm-screen.hm-lost { border-color: rgba(214, 106, 106, 0.9); box-shadow: 0 0 30px rgba(214, 106, 106, 0.35); }
.hm-screen.hm-lost::after { animation: none; opacity: 0; }

/* ---- the tray ---- */
.hm-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7em;
  margin-top: 1.2em;
}
.hm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  min-width: 5.2em;
  padding: 0.55em 0.8em;
  border-radius: 10px;
  border: 1px solid rgba(184, 138, 74, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 226, 196, 0.6));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.hm-item:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(90, 60, 40, 0.18); }
.hm-item:active { transform: translateY(0); }
.hm-item-art { font-size: clamp(1.3rem, 4.5vw, 1.7rem); line-height: 1.1; }
.hm-item-name {
  font-family: var(--serif);
  font-size: clamp(0.68rem, 2vw, 0.8rem);
  color: #4A3113;
}

@media (max-width: 420px) {
  .hm-cells { gap: 0.45em; }
  .hm-item { min-width: 4.4em; padding: 0.45em 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-screen::after, .hm-cell.hm-asking, .hm-anger.hm-hot .hm-anger-face,
  .hm-screen.hm-cross { animation: none; }
}

/* ---- the shift clock ----
   The servants are at lunch. This is counting down to the moment they walk
   back in, which is the only thing that ends this room well. It sits in the
   header line beside the screen's name, and the bar under it fills up as the
   duty runs out. */
.hm-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.9em;
}
.hm-clock {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: rgba(232, 193, 106, 0.85);
}
.hm-shift {
  height: 3px;
  margin: 0.55em 0 0.1em;
  border-radius: 2px;
  background: rgba(116, 176, 255, 0.12);
  overflow: hidden;
}
.hm-shift-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(116, 176, 255, 0.7), rgba(232, 193, 106, 0.9));
}
/* The last ten seconds: the clock stops being furniture. */
.hm-late .hm-clock { color: var(--gold); animation: hm-tick 1s steps(2, end) infinite; }
@keyframes hm-tick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-late .hm-clock { animation: none; }
}