.room-progress {
  position: relative;
  height: 8px;
  margin: -4px 0 12px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: white;
}

.room-progress span {
  display: block;
  width: var(--progress);
  height: 100%;
  background: var(--teal);
  transition: width 180ms ease;
}

.room-progress.waiting span {
  width: 0;
}

.waiting-room {
  margin: 14px 0 22px;
  padding: 16px 0;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  color: var(--ink-soft);
}

.waiting-room p {
  margin-bottom: 12px;
}

.scene-frame {
  position: relative;
  width: 100%;
  overflow: visible;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--page-blue);
  box-shadow: var(--shadow);
}

.room-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 3px);
}

.scene-hotspots {
  position: absolute;
  inset: 0;
}

.clue-hotspot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: var(--size, 64px);
  min-height: var(--size, 64px);
  padding: 0;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: rgb(165 49 60 / 68%);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 rgb(32 49 73 / 28%);
  transform: translate(-50%, -50%);
}

.clue-hotspot:active:not(:disabled) {
  transform: translate(-50%, calc(-50% + 2px));
}

.clue-hotspot span {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgb(32 49 73 / 55%);
}

.clue-hotspot.inspected {
  color: var(--ink);
  background: rgb(245 198 79 / 72%);
}

.clue-hotspot.inspected span {
  text-shadow: 0 1px 2px rgb(255 255 255 / 65%);
}

.tyler-room-bubble {
  display: flex;
  margin: 12px 0 20px;
  align-items: center;
  gap: 10px;
}

.tyler-room-bubble p {
  position: relative;
  margin: 0;
  padding: 9px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  font-size: 13px;
  line-height: 1.35;
}

.case-room-note {
  margin: 12px 0 20px;
  padding: 10px 12px;
  border-left: 5px solid var(--teal-dark);
  background: #e7f5f2;
  font-size: 13px;
  line-height: 1.35;
}

.case-room-note p {
  margin: 0;
}

.room-section {
  margin: 0 0 22px;
}

.room-section h2,
.interview-section h2 {
  margin-bottom: 10px;
  font-size: 18px;
}

.people-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.person-button {
  display: flex;
  min-height: 78px;
  padding: 8px 10px;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.person-button span,
.person-button small {
  display: block;
}

.person-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.person-button small {
  margin-top: 3px;
  color: var(--teal-dark);
}

.scan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scan-item {
  display: grid;
  min-width: 0;
  min-height: 78px;
  padding: 8px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 8px;
  text-align: left;
}

.scan-item > span:nth-child(2) {
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.scan-item small {
  grid-column: 2;
  color: var(--coral-dark);
  font-size: 11px;
  font-weight: 800;
}

.scan-item.inspected {
  border-color: var(--green);
  background: #f2f8ed;
}

.scan-item.inspected small {
  color: var(--green);
}

.clue-symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: white;
  background: var(--blue);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.clue-symbol::before { content: "?"; }
.clue-symbol[data-icon="cake"]::before { content: "CS"; }
.clue-symbol[data-icon="smear"]::before { content: "IC"; }
.clue-symbol[data-icon="candle"]::before { content: "CA"; }
.clue-symbol[data-icon="drinks"]::before { content: "CP"; }
.clue-symbol[data-icon="tools"]::before { content: "TL"; }
.clue-symbol[data-icon="controller"]::before { content: "GM"; }
.clue-symbol[data-icon="napkin"]::before { content: "NP"; }
.clue-symbol[data-icon="battery"]::before { content: "BT"; }
.clue-symbol[data-icon="tape"]::before { content: "TP"; }
.clue-symbol[data-icon="box"]::before { content: "BX"; }
.clue-symbol[data-icon="balloon"]::before { content: "BL"; }
.clue-symbol[data-icon="label"]::before { content: "LB"; }
.clue-symbol[data-icon="outline"]::before { content: "SP"; }
.clue-symbol[data-icon="cardboard"]::before { content: "CB"; }
.clue-symbol[data-icon="shoe"]::before { content: "SH"; }
.clue-symbol[data-icon="window"]::before { content: "VW"; }
.clue-symbol[data-icon="note"]::before { content: "NT"; }
.clue-symbol[data-icon="pen"]::before { content: "PN"; }
.clue-symbol[data-icon="list"]::before { content: "LS"; }
.clue-symbol[data-icon="container"]::before { content: "CT"; }
.clue-symbol[data-icon="cool"]::before { content: "CL"; }
.clue-symbol[data-icon="sound"]::before { content: "HM"; }
.clue-symbol[data-icon="fridge"]::before { content: "FR"; }
.clue-symbol[data-icon="counter"]::before { content: "KT"; }

.clue-symbol.large {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  font-size: 11px;
}

.clue-symbol.extra-large {
  width: 76px;
  height: 76px;
  margin: auto;
  font-size: 17px;
}

.interview-screen {
  position: relative;
}

.interview-screen > .app-header {
  padding-right: 56px;
}

.interview-close {
  position: absolute;
  z-index: 3;
  top: calc(var(--safe-top) + var(--space-4));
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  display: grid;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow);
}

.interview-close span {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}

.interview-hero {
  display: grid;
  margin: 4px -16px 0;
  padding: 20px 16px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: color-mix(in srgb, var(--character-color) 28%, white);
}

.portrait-interview {
  width: 112px;
  height: 112px;
  border-width: 4px;
}

.latest-response {
  min-height: 112px;
  padding: 13px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
}

.latest-dialogue {
  margin: 0;
  line-height: 1.4;
}

.latest-question {
  margin: 0 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.latest-question span {
  display: block;
  margin-bottom: 2px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.trust-meter {
  height: 7px;
  margin: 10px 0 18px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: white;
}

.trust-meter span {
  display: block;
  width: var(--trust);
  height: 100%;
  background: var(--yellow);
}

.conversation-history {
  margin-bottom: 18px;
  padding-top: 4px;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.conversation-history h2 {
  display: flex;
  min-height: 42px;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  color: var(--teal-dark);
  font-size: 15px;
}

.conversation-history h2 span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--teal-dark);
  font-size: 11px;
}

.chat-turn {
  display: grid;
  padding: 10px 0;
  gap: 7px;
  border-top: 1px solid var(--line);
}

.chat-bubble {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.4;
}

.chat-bubble.detective {
  margin-left: auto;
  border-color: var(--teal-dark);
  background: #e7f5f2;
}

.chat-bubble.witness {
  margin-right: auto;
  background: white;
}

.chat-bubble span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.interview-section {
  margin-bottom: 20px;
}

.custom-question {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.custom-question label {
  font-weight: 800;
}

.custom-question textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  background: white;
}

.form-row {
  display: flex;
  min-height: 44px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.form-error {
  color: var(--coral-dark);
  font-size: 13px;
  font-weight: 700;
}

.interview-suggestion-popover {
  position: fixed;
  z-index: 70;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(82px + var(--safe-bottom));
  left: max(12px, env(safe-area-inset-left, 0px));
  display: grid;
  width: min(calc(100% - 24px), 440px);
  margin: 0 auto;
  padding: 10px;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  align-items: start;
  gap: 9px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: #fff8df;
  box-shadow: 0 7px 0 rgb(32 49 73 / 22%);
  animation: hint-in 180ms ease-out both;
}

.interview-suggestion-popover .suggestion-portrait {
  width: 44px;
  height: 44px;
}

.interview-suggestion-popover p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.3;
}

.suggestion-question {
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border-color: var(--teal-dark);
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.suggestion-dismiss {
  width: 44px;
  min-height: 46px;
  padding: 0;
  border-color: transparent;
  color: var(--ink-soft);
  background: transparent;
  font-size: 0;
}

.suggestion-dismiss::before {
  content: "\00d7";
  font-size: 28px;
  line-height: 1;
}

.notebook-screen {
  background:
    linear-gradient(90deg, transparent 42px, #f0a2a8 43px, transparent 44px),
    repeating-linear-gradient(#fff 0, #fff 30px, #dce9f2 31px);
}

.notebook-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notebook-heading .app-header {
  flex: 1;
}

.notebook-cover-thumb {
  width: 54px;
  height: 68px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 3px 4px 0 rgb(32 49 73 / 14%);
}

.notebook-tabs {
  display: grid;
  margin: 0 -10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.notebook-tabs button {
  min-width: 0;
  min-height: 46px;
  padding: 5px 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.notebook-tabs button.active {
  color: var(--ink);
  border-bottom-color: white;
  background: white;
}

.notebook-paper {
  min-height: 440px;
  margin: 0 -10px 16px;
  padding: 18px 14px;
  border: 2px solid var(--ink);
  background: rgb(255 255 255 / 94%);
}

.empty-state {
  padding: 50px 18px;
  color: var(--ink-soft);
  text-align: center;
}

.empty-state h3 {
  color: var(--ink);
}

.evidence-list,
.suspect-list {
  display: grid;
  gap: 0;
}

.evidence-item,
.suspect-item {
  display: flex;
  padding: 13px 0;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.evidence-item h3,
.suspect-item h3 {
  margin-bottom: 4px;
  font-size: 17px;
}

.evidence-item p,
.suspect-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.suspect-item small {
  display: block;
  margin-top: 6px;
  color: var(--teal-dark);
  font-weight: 700;
}

.statement-list {
  margin: 0;
  padding-left: 27px;
}

.statement-list li {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

.statement-list b,
.statement-list span {
  display: block;
}

.statement-list span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
}

.timeline-help {
  color: var(--ink-soft);
  font-size: 13px;
}

.timeline-gap {
  margin: 0 0 14px;
  padding: 11px 12px;
  border-left: 5px solid var(--yellow-dark);
  background: #fff4c9;
}

.timeline-gap p {
  margin: 0 0 9px;
  font-size: 14px;
}

.timeline-gap button {
  width: 100%;
}

.timeline-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.timeline-card {
  display: grid;
  min-height: 92px;
  padding: 8px;
  grid-template-columns: 28px 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 0 rgb(32 49 73 / 12%);
}

.timeline-card.position-correct {
  border-color: var(--green);
  background: #f4f9f0;
}

.timeline-card.incorrect {
  border-color: var(--coral-dark);
  background: #fff0f1;
  box-shadow: 0 3px 0 rgb(164 55 69 / 20%);
}

.timeline-card.position-correct .timeline-number {
  background: var(--green);
}

.timeline-card.incorrect .timeline-number {
  background: var(--coral-dark);
}

.timeline-position-feedback {
  grid-column: 1 / -1;
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.timeline-card.position-correct .timeline-position-feedback {
  color: var(--green-dark);
  background: #e7f3df;
}

.timeline-card.incorrect .timeline-position-feedback {
  color: var(--coral-dark);
  background: white;
}

.timeline-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.timeline-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.timeline-copy {
  min-width: 0;
}

.timeline-time-hint {
  display: block;
  margin-top: 4px;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.timeline-time-hint.unknown {
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 600;
}

.timeline-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.timeline-controls button {
  min-height: 44px;
  padding: 5px;
  border-width: 1px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.timeline-result {
  display: grid;
  margin-top: 14px;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 13px;
}

.deduction-screen {
  background: linear-gradient(#e7f4f3 0 46%, #f8fcfb 46%);
}

.deduction-progress {
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.deduction-progress span {
  height: 8px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: white;
}

.deduction-progress span.current {
  background: var(--yellow);
}

.deduction-progress span.done {
  background: var(--teal);
}

.deduction-copy {
  min-height: 140px;
  text-align: center;
}

.deduction-copy h2 {
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
}

.deduction-copy p:last-child {
  color: var(--ink-soft);
}

.deduction-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deduction-option {
  display: grid;
  min-width: 0;
  min-height: 156px;
  padding: 10px 5px;
  place-items: center;
  align-content: center;
  gap: 10px;
  font-weight: 800;
}

.deduction-option .portrait-large {
  width: min(76px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.deduction-option > span:last-child {
  max-width: 100%;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.deduction-feedback {
  min-height: 48px;
  margin: 16px 0 6px;
  color: var(--coral-dark);
  font-weight: 800;
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);
  place-items: center;
  background: rgb(25 38 55 / 72%);
}

.clue-modal {
  position: relative;
  width: min(100%, 480px);
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 18px 18px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 7px 0 rgb(0 0 0 / 22%);
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 44px;
  padding: 6px 9px;
  border-color: transparent;
  color: var(--teal-dark);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.clue-found-mark {
  width: max-content;
  margin: 0 auto 10px;
  padding: 5px 9px;
  border: 2px solid var(--coral-dark);
  color: var(--coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.clue-modal .extra-large {
  margin-bottom: 12px;
}

.clue-modal h2 {
  margin-bottom: 9px;
  font-size: 26px;
}

.clue-modal > p {
  color: var(--ink-soft);
}

.modal-tyler {
  display: flex;
  margin: 16px 0;
  padding: 9px;
  align-items: center;
  gap: 10px;
  border-left: 5px solid var(--purple);
  background: #f1ebf7;
  text-align: left;
}

.modal-tyler.case-note {
  border-left-color: var(--teal-dark);
  background: #e7f5f2;
}

.modal-tyler p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.hint-popover {
  position: fixed;
  z-index: 85;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(84px + var(--safe-bottom));
  left: max(14px, env(safe-area-inset-left, 0px));
  display: grid;
  width: min(calc(100% - 28px), 560px);
  max-height: calc(100dvh - 120px);
  margin: 0 auto;
  padding: 18px;
  overflow-y: auto;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 7px 0 rgb(32 49 73 / 24%);
}

.hint-popover p:last-child {
  margin: 0;
  font-weight: 700;
}

.hint-popover .modal-close {
  top: 1px;
  right: 1px;
}

.reveal-screen {
  background: #dcebea;
}

.fridge-reveal {
  position: relative;
  display: grid;
  height: 390px;
  margin: 0 auto 20px;
  grid-template-columns: 22% 56% 22%;
  perspective: 800px;
}

.fridge-inside {
  display: grid;
  padding: 65px 12px 25px;
  place-items: center;
  border: 4px solid var(--ink);
  background:
    repeating-linear-gradient(#b9c8ce 0 3px, transparent 3px 64px),
    #f4fbff;
  box-shadow: inset 0 0 24px rgb(62 117 182 / 30%);
}

.fridge-door {
  z-index: 2;
  border: 4px solid var(--ink);
  background: #d9e2e5;
}

.fridge-door.left {
  transform: rotateY(-24deg);
  transform-origin: right;
}

.fridge-door.right {
  transform: rotateY(24deg);
  transform-origin: left;
}

.cake-box {
  width: 100%;
  max-width: 240px;
  padding: 10px;
  border: 4px solid var(--ink);
  background: #c89152;
  box-shadow: 0 5px 0 rgb(32 49 73 / 20%);
  text-align: center;
}

.cake-box > span {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  border: 2px solid var(--ink);
  background: white;
  font-size: 11px;
  font-weight: 900;
}

.cake-art {
  position: relative;
  height: 85px;
  border: 3px solid var(--ink);
  border-radius: 8px 8px 3px 3px;
  background: #ef7e83;
}

.cake-art::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 8px;
  left: 8px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff4d0;
}

.cake-art i,
.cake-art b {
  position: absolute;
  z-index: 2;
  top: -42px;
  width: 8px;
  height: 33px;
  border: 2px solid var(--ink);
  background: var(--yellow);
}

.cake-art i { left: 35%; }
.cake-art b { right: 35%; }

.ending-dialogues {
  display: grid;
  margin-bottom: 18px;
  gap: 10px;
}

.ending-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ending-line p {
  margin: 0;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  font-size: 13px;
}

.party-screen {
  position: relative;
  display: flex;
  min-height: 100dvh;
  padding: 0 0 calc(var(--safe-bottom) + 24px);
  flex-direction: column;
  overflow: hidden;
  background: white;
  text-align: center;
}

.party-art {
  width: 100%;
  height: 48dvh;
  min-height: 330px;
  object-fit: cover;
  border-bottom: 4px solid var(--ink);
}

.party-message {
  z-index: 2;
  padding: 24px 18px 8px;
}

.party-message h1 {
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
}

.party-message p {
  margin-bottom: 10px;
  font-size: 18px;
}

.party-message strong {
  display: block;
  color: var(--teal-dark);
}

.party-screen > button {
  z-index: 2;
  width: calc(100% - 36px);
  margin: 8px auto 0;
}

@media (max-width: 360px) {
  .scene-frame {
    margin-right: -5px;
    margin-left: -5px;
    width: calc(100% + 10px);
  }

  .interview-hero {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .portrait-interview {
    width: 90px;
    height: 90px;
  }

  .latest-response {
    min-height: 104px;
    padding: 10px;
    font-size: 14px;
  }

  .deduction-option {
    min-height: 146px;
  }

  .deduction-option > span:last-child {
    font-size: 12px;
  }

  .fridge-reveal {
    height: 340px;
  }
}

@media (min-width: 560px) {
  .interview-hero {
    margin-right: -28px;
    margin-left: -28px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .scan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notebook-tabs,
  .notebook-paper {
    margin-right: 0;
    margin-left: 0;
  }
}