:root {
  --ink: #3b2a20;
  --ink-soft: #6b5446;
  --paper: #fdf6e7;
  --cream: #f3e6cf;
  --card: #fffaf0;
  --wood: #8a5a3c;
  --accent: #c4553c;
  --new: #c2452d;
  --frame: #fff6e6;
  --sky-ink: var(--ink);
  --bar-bg: linear-gradient(90deg, #a8d8f0, #d9eef6);
  --bar-h: 64px;
  --tabs-h: 62px;
  --news-h: 40px;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  background: var(--cream);
}

/* the bar's sky follows the visitor's own clock */
body.light-dawn {
  --bar-bg: linear-gradient(90deg, #f3a98e, #f9d3bd);
}

body.light-dusk {
  --sky-ink: var(--frame);
  --bar-bg: linear-gradient(90deg, #4c4466, #b9816c);
}

body.light-night {
  --sky-ink: var(--frame);
  --bar-bg: linear-gradient(90deg, #1c2340, #3d3a5f);
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

button {
  font: inherit;
  cursor: pointer;
}

.compose button,
button.soft {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

.compose button {
  justify-self: end;
  background: var(--accent);
  color: var(--frame);
}

.compose button:hover,
.compose button:focus-visible {
  filter: brightness(1.08);
}

button.soft {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(40, 20, 10, 0.18), inset 0 0 0 2px var(--accent);
}

button.soft:hover,
button.soft:focus-visible {
  background: #fff;
}

:focus-visible {
  outline: 3px solid #e09a2c;
  outline-offset: 3px;
}

.clock {
  white-space: nowrap;
}

/* the bar and the tabs */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px 20px;
  min-height: var(--bar-h);
  padding: 10px 20px;
  background: var(--bar-bg);
  color: var(--sky-ink);
  box-shadow: 0 2px 12px rgba(40, 20, 10, 0.18);
}

.brand {
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hello {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px 20px;
  min-width: 0;
}

.greeting {
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
}

/* your own sticker: back to the door, to come in as someone else */
.switch {
  margin: 0;
}

.switch button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.85);
  color: var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
}

.switch button:hover,
.switch button:focus-visible {
  background: #fff;
}

.switch img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
  background: #f6e3c4;
}

.tabs {
  display: flex;
  gap: 6px;
}

.tabs a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  text-decoration: none;
}

.tabs a:hover {
  background: rgba(255, 255, 255, 0.35);
}

.tabs a[aria-current="page"] {
  background: rgba(255, 250, 240, 0.92);
  color: var(--ink);
}

.tabs svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dot {
  position: absolute;
  top: 5px;
  left: 28px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--new);
  box-shadow: 0 0 0 2px var(--card);
}

/* The bar keeps to one line. A long name ("Not Amirdhavarshini?") leaves
   little room, so the greeting trails off, and on a tablet it goes, with the
   switch down to just your sticker. */
@media (min-width: 700px) {
  .bar .greeting {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  .bar {
    gap: 4px 10px;
  }

  .bar .greeting {
    display: none;
  }

  .tabs {
    gap: 2px;
  }

  .tabs a {
    padding: 7px 10px;
  }

  .switch button {
    padding: 3px;
  }

  .switch span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* "while you were away" in one line, for screens with no room beside the house */
.news {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--news-h);
  padding: 0 16px;
  background: #fff1d6;
  border-bottom: 1px solid rgba(138, 90, 60, 0.18);
  font-size: 0.88rem;
  text-decoration: none;
}

.news span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.news svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: #e0a33a;
}

/* the way to the widget, until you've made one: under the news on a phone,
   at the foot of the side column on a laptop (not .side or .top: .side is
   that column itself) */
.to-widget {
  display: block;
  font-size: 0.85rem;
  text-decoration: none;
}

.to-widget.in-news {
  display: none;
}

.to-widget.in-side {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(40, 20, 10, 0.12);
  font-weight: 600;
}

@media (max-width: 699px) {
  :root {
    --bar-h: 54px;
  }

  body:not(.page-door, .page-plain) {
    padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  }

  .bar {
    gap: 10px;
    height: var(--bar-h);
    padding: 6px 12px 6px 16px;
  }

  .hello {
    display: block;
  }

  .brand {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .switch button {
    padding-right: 10px;
    font-size: 0.75rem;
  }

  .switch img {
    width: 30px;
    height: 30px;
  }

  .bar .greeting {
    overflow: hidden;
    font-size: 0.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .bar .greeting .when {
    display: none;
  }

  .tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    justify-content: space-around;
    height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 -6px 18px rgba(40, 20, 10, 0.16);
  }

  .tabs a {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 72px;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 0.72rem;
  }

  .tabs a[aria-current="page"] {
    background: #f6e3c4;
  }

  .dot {
    top: 4px;
    left: calc(50% + 6px);
  }
}

/* the house */

.map {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #b9c98f;
  box-shadow: 0 10px 30px rgba(20, 16, 30, 0.28);
}

.house-svg {
  display: block;
  width: 100%;
  height: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.home-grid {
  display: grid;
  gap: 18px;
  align-items: start;
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 20px 28px;
}

.side {
  display: grid;
  gap: 18px;
}

@media (max-width: 699px) {
  .page-home .home-grid {
    padding: 0;
  }

  .page-home .side {
    display: none;
  }

  /* the way to the widget: a slim line under the news, until it's made */
  .to-widget.in-news {
    display: flex;
    align-items: center;
    height: var(--to-widget-h);
    padding: 0 16px;
    overflow: hidden;
    background: #fff8ea;
    border-bottom: 1px solid rgba(138, 90, 60, 0.14);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .page-home main:has(> .to-widget.in-news) {
    --to-widget-h: 32px;
  }

  /* on a phone the house fills the screen, and you pan it sideways */
  .page-home .map {
    height: calc(100svh - var(--bar-h) - var(--news-h) - var(--to-widget-h, 0px) - var(--turn-hint-h, 0px) - var(--tabs-h) - env(safe-area-inset-bottom));
    min-height: 320px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border-radius: 0;
    box-shadow: none;
  }

  .page-home .house-svg {
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: 1376 / 768;
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  .side {
    grid-template-columns: 1fr 1fr;
  }

  .side .foot {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .page-home .news {
    display: none;
  }

  .page-home .house-svg {
    max-height: calc(100vh - var(--bar-h) - 46px);
  }
}

/* inside the drawing */

.room-link polygon {
  fill: transparent;
  stroke: transparent;
  stroke-width: 5;
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}

.room-link:hover polygon {
  fill: rgba(255, 246, 224, 0.16);
  stroke: rgba(255, 246, 224, 0.85);
}

.room-link:focus {
  outline: none;
}

.room-link:focus-visible polygon {
  stroke: #e09a2c;
  stroke-width: 8;
}

.room-link[aria-current="page"] polygon {
  stroke: rgba(255, 246, 224, 0.9);
  stroke-dasharray: 14 10;
}

/* Only the SVG groups: the door's list of windows is also .people, and its
   buttons must take taps. */
g.light,
g.things,
g.acts,
g.laddoo,
g.people,
g.nametags,
g.pops {
  pointer-events: none;
}

/* a little emoji where you just did something (src/art.ts pop()): it pops up,
   floats and fades; water falls instead. */
text.pop {
  text-anchor: middle;
  dominant-baseline: central;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 3s ease-out both;
}

text.pop.fall {
  animation: fall 1.4s ease-in 2 both;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.3);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.25);
  }
  22% {
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: translateY(-26px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(-36px) scale(0.7);
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(1.1, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  text.pop {
    animation: none;
  }
}

/* things you can do something with light up when you walk up to them
   (public/house.js) */
g.act polygon,
g.laddoo .halo {
  fill: none;
  stroke: none;
}

g.act.near .halo {
  fill: rgba(255, 230, 150, 0.38);
  stroke: rgba(255, 196, 70, 0.75);
  stroke-width: 18px;
  stroke-linejoin: round;
}

g.act.near .edge {
  stroke: #fffbe6;
  stroke-width: 4px;
  stroke-linejoin: round;
}

g.laddoo.near .halo {
  fill: rgba(255, 226, 140, 0.4);
  stroke: #fff4c8;
  stroke-width: 4px;
}

g.act.near,
g.laddoo.near .halo {
  animation: beckon 0.9s ease-in-out infinite alternate;
}

/* you, sitting down or asleep in a bed, until you walk */
.walker .pose {
  display: none;
}

.walker.resting .pose {
  display: inline;
}

.walker.resting > .shadow,
.walker.resting > .bob {
  display: none;
}

.nametag {
  filter: drop-shadow(0 2px 3px rgba(40, 20, 10, 0.3));
}

.tag-bg {
  fill: #fff8ea;
  fill-opacity: 0.94;
}

.tag-edge {
  fill: var(--accent);
}

.tag-title {
  font: italic 500 22px var(--serif);
  fill: var(--ink);
}

.tag-sub {
  font: 15px var(--serif);
  fill: var(--ink-soft);
}

.sparkle {
  fill: #f2b233;
  stroke: #fff;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 1.6s ease-in-out infinite alternate;
}

.walker .shadow {
  fill: rgba(40, 25, 15, 0.28);
}

.walker.here:not(.me) .shadow {
  fill: var(--accent);
  animation: glow 1.8s ease-in-out infinite alternate;
}

/* Only someone who's actually here so much as breathes; everyone else stands
   still. You walk when you walk yourself (public/house.js). */
.walker.here .bob {
  animation: bob 1.6s ease-in-out infinite alternate;
}

.walker.walking .bob {
  animation-duration: 0.18s;
}

.who {
  font: 600 16px var(--serif);
  fill: var(--frame);
  stroke: rgba(59, 42, 32, 0.85);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
}

.walker.me .who {
  fill: #ffe08a;
}

.zz {
  font: 700 22px var(--hand);
  fill: #fff;
  stroke: #2b2f55;
  stroke-width: 3px;
  paint-order: stroke;
  animation: drift 3s ease-in-out infinite;
}

.zz.small {
  font-size: 16px;
  animation-delay: -1.5s;
}

.left.fresh {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 1.2s ease-in-out infinite alternate;
}

/* His only picture lies on the blanket, so awake has to be in how he moves:
   two happy hops and a wiggle, then a breather. */
.laddoo.awake image {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: hop 2.2s ease-in-out infinite;
}

/* coming after you (public/house.js): quick little bounds */
.laddoo.trotting image {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: trot 0.26s ease-in-out infinite alternate;
}

@keyframes trot {
  from {
    transform: translateY(0) rotate(-3deg);
  }
  to {
    transform: translateY(-9px) rotate(3deg);
  }
}

@keyframes bob {
  to {
    transform: translateY(-3px);
  }
}

@keyframes glow {
  from {
    fill-opacity: 0.35;
  }
  to {
    fill-opacity: 0.75;
  }
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes twinkle {
  from {
    transform: scale(0.75);
  }
  to {
    transform: scale(1.15) rotate(20deg);
  }
}

@keyframes pulse {
  to {
    transform: scale(1.25);
  }
}

@keyframes hop {
  0%,
  45%,
  100% {
    transform: none;
  }
  8% {
    transform: translateY(-12px) rotate(-4deg);
  }
  16% {
    transform: none;
  }
  24% {
    transform: translateY(-8px) rotate(4deg);
  }
  32% {
    transform: rotate(-3deg);
  }
  38% {
    transform: rotate(3deg);
  }
}

@keyframes beckon {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .house-svg * {
    animation: none !important;
  }
}

/* windows onto each friend's sky */

.pane {
  position: relative;
  display: block;
  border: 5px solid var(--frame);
  border-radius: 40px 40px 6px 6px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.pane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

.pane.asleep img {
  filter: brightness(0.8) saturate(0.8);
}

.pane.asleep::after {
  content: "z z";
  position: absolute;
  top: 8%;
  right: 12%;
  color: #fff;
  font: 700 1rem var(--hand);
  text-shadow: 0 0 3px #2b2f55;
}

.pane.light-day {
  background: linear-gradient(#8fcbec, #d8eff9);
}

.pane.light-dawn {
  background: linear-gradient(#f2a587, #fde3cf);
}

.pane.light-dusk {
  background: linear-gradient(#e9845a, #f8c38c);
}

.pane.light-night {
  background:
    radial-gradient(circle at 22% 22%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 74% 34%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 14%, #fff 0 1px, transparent 1.5px),
    linear-gradient(#1f2747, #3b4774);
}

/* the door */

/* --house is the picture's fingerprinted address (src/assets.ts), set in each
   page's head */
.page-door {
  --sky-ink: var(--frame);
  background:
    linear-gradient(rgba(36, 28, 52, 0.62), rgba(36, 28, 52, 0.78)),
    var(--house) center / cover;
}

main.door {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.top {
  padding: 28px 0 12px;
  text-align: center;
  color: var(--sky-ink);
}

.top h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 600;
}

.top .greeting {
  max-width: 36em;
  margin: 6px auto 0;
  font-size: 1rem;
}

.door form {
  margin-top: 12px;
  padding: 22px 14px 18px;
  background: #e8c79f;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(20, 16, 30, 0.45);
}

.ask {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.2rem;
}

/* A window each, in one row: five in Rithika's house, two to seven in a made
   one (--n, set on the list). On a phone, rows of three, the last row
   centred. */
ul.people {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 140px));
  justify-content: center;
  gap: 18px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 600px) {
  ul.people {
    display: flex;
    flex-wrap: wrap;
  }

  ul.people > li {
    flex: 0 0 calc((100% - 20px) / 3);
  }
}

/* How many of you, on the form that makes a house */
.size-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
}

.size-pick a,
.size-pick strong {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 20px;
  border: 2px solid var(--wood);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.size-pick strong {
  background: var(--wood);
  color: #fff;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: center;
}

.person .pane {
  width: 100%;
  max-width: 104px;
  aspect-ratio: 4 / 5;
  padding: 8px 6px 0;
  transition: transform 0.15s ease;
}

.person:hover .pane,
.person:focus-visible .pane {
  transform: translateY(-3px);
}

.person .name {
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.15;
}

.person .where,
.person .when {
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.8;
}

.hint {
  margin-top: 22px;
  text-align: center;
  color: var(--sky-ink);
  font-size: 0.95rem;
}

/* updates and everyone */

main.list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 32px;
}

.card,
.away,
.clocks {
  padding: 16px 18px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(40, 20, 10, 0.16);
}

.card h2,
.away h2,
.clocks h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.away p {
  margin: 0;
}

.happenings {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.happenings li {
  padding: 6px 10px;
  border-radius: 8px;
  background: #f6ecd9;
  /* a long word (a link, a name typed without spaces) wraps, not the page */
  overflow-wrap: anywhere;
  min-width: 0;
}

.happenings li.for-you {
  background: #ffe9c7;
  box-shadow: inset 4px 0 0 var(--accent);
  font-weight: 600;
}

.happenings a {
  text-decoration: none;
}

.happenings a:hover {
  text-decoration: underline;
}

.ago {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
}

.more {
  margin-top: 8px !important;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

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

.clocks a {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  text-decoration: none;
}

.clocks a:hover {
  background: #f6ecd9;
}

.clocks .pane {
  width: 44px;
  height: 54px;
  padding: 4px 2px 0;
  border-width: 3px;
  border-radius: 20px 20px 4px 4px;
}

.clocks.full a {
  grid-template-columns: 76px 1fr;
  gap: 14px;
  padding: 8px;
}

.clocks.full .pane {
  width: 76px;
  height: 92px;
  border-width: 4px;
  border-radius: 34px 34px 5px 5px;
}

.clocks .who {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.clocks .name {
  font-weight: 600;
}

.clocks .where {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.clocks .status {
  justify-self: start;
  margin-top: 2px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, white);
  font-size: 0.75rem;
}

.clocks .about {
  margin-top: 4px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

.foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.foot form {
  margin: 0;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
}

/* a room: the house zoomed in, and what you can do there */

.room-grid {
  display: grid;
  gap: 18px;
  align-items: start;
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 20px 32px;
}

.map.zoom .house-svg {
  max-height: 60svh;
}

.room-side > * + * {
  margin-top: 16px;
}

@media (max-width: 699px) {
  .room-grid {
    padding: 0 16px 24px;
  }

  .room-grid .map {
    margin: 0 -16px;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 1000px) {
  .room-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }

  .room-grid .map {
    position: sticky;
    top: calc(var(--bar-h) + 18px);
  }

  .map.zoom .house-svg {
    max-height: calc(100vh - var(--bar-h) - 46px);
  }
}

.back {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.room-head h1 {
  display: inline-block;
  margin: 4px 0 0;
  padding-bottom: 2px;
  border-bottom: 4px solid var(--accent);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
}

.room-head .local {
  margin: 10px 0 0;
}

.room-head .about {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--ink-soft);
}

.done {
  padding: 10px 14px;
  border-radius: 10px;
  background: #e3f2dc;
  box-shadow: inset 4px 0 0 #5a9e48;
}

.close {
  margin: 4px 0 14px;
}

.patches-svg {
  display: block;
  width: 100%;
  height: auto;
}

.plot-name {
  font: 600 17px var(--serif);
  fill: var(--ink);
}

.room-side > .status {
  margin-bottom: 0;
}

.room-side > form.inline {
  margin-top: 10px;
}

.card form.inline {
  margin-top: 10px;
}

/* a row of things to do in a room: tidy, sleep, sit down, pet Shinzo */
.doings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.doings form.inline {
  margin: 0;
}

.compose {
  display: grid;
  gap: 10px;
}

.compose h2 {
  margin: 0;
}

.compose label {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.compose textarea {
  width: 100%;
  resize: vertical;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dashed rgba(59, 42, 32, 0.35);
  background: transparent;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.25;
}

.compose textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.compose .check {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--ink);
}

.small {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.picker legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.picker label {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  background: #f6ecd9;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.picker label:has(input:checked) {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--accent);
}

.picker label:has(input:focus-visible) {
  outline: 3px solid #e09a2c;
  outline-offset: 2px;
}

.icon {
  width: 34px;
  height: 34px;
}

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

.desk-list > li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.desk-list > li.desk-thing {
  background: var(--paper);
  background-color: color-mix(in srgb, var(--paper) 70%, white);
}

.desk-list .icons {
  display: flex;
  gap: 2px;
}

.desk-list p {
  margin: 0;
}

.body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hand {
  font-family: var(--hand);
  font-size: 1.4rem;
  line-height: 1.2;
}

.with {
  font-size: 0.9rem;
  font-style: italic;
}

.by {
  margin-top: 6px !important;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.tag {
  position: absolute;
  top: -9px;
  right: -6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--new);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  transform: rotate(6deg);
}

.empty {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

.drawer {
  margin-top: 14px;
}

.drawer summary {
  cursor: pointer;
  color: var(--ink-soft);
}

.drawer > ul {
  margin-top: 12px;
}

/* the wall */

.wall {
  margin-top: 22px;
  padding: 18px 16px 24px;
  border-radius: 10px;
  background-color: #c99a62;
  background-image: radial-gradient(#b3854f 1px, transparent 1.5px), radial-gradient(#dcb07a 1px, transparent 1.5px);
  background-size: 14px 14px, 22px 22px;
  background-position: 0 0, 7px 9px;
  box-shadow: inset 0 0 0 6px var(--wood), 0 8px 24px rgba(40, 20, 10, 0.25);
}

.wall h2,
.wall h3 {
  margin: 0 0 12px;
  color: var(--frame);
}

.wall h3.pinned {
  font-size: 1rem;
}

.wall .empty {
  color: var(--frame);
}

.wall .drawer summary {
  color: var(--frame);
}

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.note {
  position: relative;
  padding: 14px 14px 10px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  transform: rotate(-1.4deg);
}

.note::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #c4553c;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.note:nth-child(3n + 2) {
  transform: rotate(1.1deg);
}

.note:nth-child(3n) {
  transform: rotate(-0.4deg);
}

.note.big {
  grid-column: 1 / -1;
  border-top: 6px solid #f2c14e;
}

.note p {
  margin: 0;
}

/* stickers friends stuck on a note: each with her name and colour, never a
   count */
.note .stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.note .sticker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 4px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transform: rotate(-3deg);
}

.note .sticker:nth-child(even) {
  transform: rotate(2.5deg);
}

.note .sticker .emoji {
  font-size: 1.05rem;
}

/* what the sticker means, for screen readers; the emoji says it on screen */
.note .sticker-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* On her own note, whether it shows on friends' widgets (ADR 0029); on a
   friend's, a quiet word that it does. Not .widget-ask or .widget-way. */
.note .widget-say {
  margin-top: 6px;
}

.note .widget-say button {
  border: 1px dashed rgba(122, 97, 80, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  padding: 3px 10px;
  cursor: pointer;
}

.note .widget-say button[aria-pressed="true"] {
  border-style: solid;
  background: rgba(255, 255, 255, 0.55);
}

.note .widget-said {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* not .stick: that's the thumb stick */
.note .sticker-pick {
  margin-top: 6px;
  font-size: 0.85rem;
}

.note .sticker-pick summary {
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

.note .sticker-pick summary::-webkit-details-marker {
  display: none;
}

/* all eight in a row on a phone */
.note .sticker-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.note .sticker-picker button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.note .sticker-picker button:hover,
.note .sticker-picker button:focus-visible {
  transform: scale(1.15);
}

.note .sticker-picker button[aria-pressed="true"] {
  border: 2px solid #f2b233;
  background: #fff4d6;
}

/* the garden */

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

.patches li {
  padding-left: 10px;
  border-left: 4px solid var(--accent);
}

.patches .name {
  font-weight: 600;
}

/* paper pages: the README and messages */

main.plain {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.crumbs {
  padding: 20px 0 0;
}

.paper {
  margin-top: 20px;
  padding: 24px 22px;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(20, 16, 30, 0.3);
}

.message {
  margin-top: 96px;
  text-align: center;
}

.readme h1 {
  margin-top: 0;
}

.readme code {
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(59, 42, 32, 0.08);
  font-size: 0.9em;
}

.readme pre {
  overflow-x: auto;
  padding: 12px;
  border-radius: 4px;
  background: rgba(59, 42, 32, 0.08);
}

.readme pre code {
  padding: 0;
  background: none;
}

.readme blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid #e8c79f;
  font-style: italic;
}

.readme img {
  max-width: 100%;
}

/* inside the drawing: the kettle's steam and the KitKat box */

.steam path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.8;
  animation: steam 2.4s ease-in-out infinite;
}

.steam path + path {
  animation-delay: -1.2s;
}

.kitkat-word {
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  fill: #d62828;
  text-anchor: middle;
}

@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam path {
    animation: none;
  }
}

/* stepping in as a friend, from the Everyone tab */

.clocks li {
  display: grid;
  gap: 4px;
}

.be {
  margin: 0 0 6px 98px;
}

.be button {
  padding: 5px 14px;
  font-size: 0.82rem;
}

/* Someone's in the house as her (RICE K): shut, like her window at the door. */
.be button:disabled {
  border-style: dashed;
  background: transparent;
  opacity: 0.6;
  cursor: default;
}

/* face masks and kettle Maggi */

.mask-on,
.kettle-out {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #e6f3dc;
}

.kettle-out {
  background: #fff1d6;
}

.small-head {
  margin: 14px 0 4px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.plain-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.sofa {
  margin: 0;
  font-size: 0.92rem;
}

/* movies */

.movies input,
.movies select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(59, 42, 32, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

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

.movie {
  position: relative;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f6ecd9;
}

.movie p {
  margin: 0;
}

.movie .title {
  font-weight: 600;
  font-size: 1.05rem;
}

.movie .watched {
  margin-top: 4px;
  font-size: 0.88rem;
}

.movie form.inline {
  margin-top: 8px;
}

.pick {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: #e9e2fb;
  color: #5b4a99;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.times {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.times li {
  padding-left: 10px;
  border-left: 4px solid var(--accent);
}

.times .name {
  font-weight: 600;
}

/* walking yourself around (public/house.js): a thumb stick on touch screens,
   the arrow keys on a keyboard, and a button into the room you're in */

.pad {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.pad > * {
  pointer-events: auto;
}

/* On a touch screen the two bottom corners are only for walking: a thumb
   down anywhere in one brings the stick up under it. Each corner shows as a
   soft quarter-glow with a little ring where a thumb would rest, which comes
   up from the bottom once the house is in. */
.walk-corner {
  display: none;
  position: absolute;
  bottom: -14px;
  width: var(--corner-w, 160px);
  height: var(--corner-h, 128px);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.walk-corner.left {
  left: -14px;
  border-top-right-radius: 100% 100%;
  background: radial-gradient(farthest-side at 0 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
}

.walk-corner.right {
  right: -14px;
  border-top-left-radius: 100% 100%;
  background: radial-gradient(farthest-side at 100% 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
}

/* where a thumb would rest: a faint ring with the knob's dot in it */
.walk-corner::after {
  content: "";
  position: absolute;
  bottom: 32px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 248, 234, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 234, 0.9) 0 9px, rgba(59, 42, 32, 0.18) 10px);
  box-shadow: 0 2px 10px rgba(40, 20, 10, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.walk-corner.left::after {
  left: 32px;
}

.walk-corner.right::after {
  right: 32px;
}

/* the thumb's down: the resting ring steps aside for the stick */
.walk-corner.held::after {
  opacity: 0;
  transform: scale(0.6);
}

.walk-corner.held {
  background-color: transparent;
}

.pad.touch .walk-corner {
  display: block;
  animation: corner-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.pad.touch .walk-corner.right {
  animation-delay: 0.08s;
}

@keyframes corner-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
}

/* the stick, under the thumb while it's down, placed on the screen */
.stick {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 26;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border: 2px solid rgba(255, 248, 234, 0.9);
  border-radius: 50%;
  background: rgba(59, 42, 32, 0.28);
  box-shadow: 0 4px 18px rgba(40, 20, 10, 0.3);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  pointer-events: none !important;
}

.stick.on {
  opacity: 1;
  transform: scale(1);
}

.knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--frame);
  box-shadow: 0 3px 8px rgba(40, 20, 10, 0.35);
}

.keys-hint {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 2px 8px rgba(40, 20, 10, 0.2);
  font-size: 0.85rem;
}

.keys-hint .by-thumb,
.pad.touch .keys-hint .by-keys {
  display: none;
}

.pad.touch .keys-hint .by-thumb {
  display: inline;
}

/* on a touch screen the hint floats between the corners, until you walk */
.pad.touch .keys-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: max-content;
  margin: 0 auto;
  white-space: nowrap;
  font-size: 0.8rem;
  pointer-events: none;
  animation: corner-in 0.5s 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* on a touch screen the buttons stand just above the right-hand corner,
   never in it: the corner is only for walking */
.pad.touch .moves {
  margin-bottom: calc(var(--corner-h, 128px) - 8px);
}

@media (prefers-reduced-motion: reduce) {
  .pad.touch .walk-corner,
  .pad.touch .keys-hint {
    animation: none;
  }

  .stick {
    transition: none;
  }
}

/* the Go in button, and above it a button for each thing you can do with
   whatever's lit up */
.moves {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  pointer-events: none;
}

.moves > * {
  pointer-events: auto;
}

.go,
.do {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--frame);
  font-weight: 600;
  text-align: right;
  box-shadow: 0 4px 14px rgba(40, 20, 10, 0.3);
}

.do {
  background: #ffe7a0;
  color: var(--ink);
  outline: 2px solid #f2b233;
  outline-offset: -2px;
}

/* the little emoji on every button for something you can do */
button .emoji,
.done .emoji {
  display: inline-block;
  margin-right: 2px;
  font-style: normal;
  line-height: 1;
  transform: scale(1.15);
}

.go[hidden] {
  display: none;
}

.go:hover,
.go:focus-visible,
.do:hover,
.do:focus-visible {
  filter: brightness(1.08);
}

.go kbd,
.do kbd {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 246, 230, 0.6);
  border-radius: 5px;
  font: 0.75rem var(--serif);
}

.do kbd {
  border-color: rgba(59, 42, 32, 0.4);
}

.pad.touch .go,
.pad.touch .do {
  min-height: 48px;
  padding: 8px 18px;
}

.pad.touch .go kbd,
.pad.touch .do kbd {
  display: none;
}

/* on a phone the house scrolls sideways under the controls, so they stay put
   just above the tabs */
@media (max-width: 699px) {
  .page-home .pad {
    position: fixed;
    bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 8px);
  }

  .page-home .stick {
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
  }

  /* the walking corners are the screen's own, like a game's: fixed just
     above the tabs on a room's page as well as the house. Each takes a
     thumb across its whole box, which reaches further in than its glow. */
  .pad.touch {
    --corner-w: 46vw;
    --corner-h: 150px;
  }

  .pad.touch .walk-corner {
    position: fixed;
    z-index: 25;
    bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
    border-radius: 0;
    background: none;
  }

  .pad.touch .walk-corner.left {
    left: 0;
  }

  .pad.touch .walk-corner.right {
    right: 0;
  }

  /* the glow, a quarter circle in the corner, smaller than the box */
  .pad.touch .walk-corner::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 120px;
    pointer-events: none;
  }

  .pad.touch .walk-corner.left::before {
    left: 0;
    border-top-right-radius: 100% 100%;
    background: radial-gradient(farthest-side at 0 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
  }

  .pad.touch .walk-corner.right::before {
    right: 0;
    border-top-left-radius: 100% 100%;
    background: radial-gradient(farthest-side at 100% 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
  }

  .pad.touch .walk-corner::after {
    bottom: 28px;
  }

  .pad.touch .walk-corner.left::after {
    left: 28px;
  }

  .pad.touch .walk-corner.right::after {
    right: 28px;
  }

  .pad.touch .walk-corner.held::before {
    opacity: 0.55;
  }

  /* scrolled away from the house, they step aside for the page */
  .pad.touch.away .walk-corner {
    visibility: hidden;
    animation: none;
  }

  .pad.touch.away .keys-hint {
    visibility: hidden;
  }

  /* the hint floats between them, over their glow (a thumb goes through
     it to the corner) */
  .pad.touch .keys-hint {
    z-index: 26;
  }

  .page-room .pad.touch .keys-hint {
    position: fixed;
    bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 14px);
  }

  /* in a room the buttons stay in the picture's corner, as on a laptop:
     the walking corners are down at the screen's edge, out of their way */
  .page-room .pad.touch .moves {
    margin-bottom: 0;
  }

  .page-room .stick {
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
  }

  .page-room .knob {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
  }

  .page-room .pad.touch .go,
  .page-room .pad.touch .do {
    min-height: 44px;
    font-size: 0.9rem;
  }
}

/* ---------- one of us at a time (ADR 0011) ---------- */

/* the door: a friend who's in the house right now can't be picked until she
   leaves, so her window stays lit but doesn't lift */
.person.taken {
  cursor: default;
}

.person.taken .pane {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--accent), 0 0 18px var(--accent);
}

.person.taken:hover .pane {
  transform: none;
}

.person.taken .when {
  opacity: 1;
  font-weight: 600;
}

/* ---------- UNO on the mat (/uno, and the card in Amirdhavarshini's room) ---------- */

.uno {
  --uno-r: #d8321e;
  --uno-y: #f2c418;
  --uno-g: #3c9a3a;
  --uno-b: #1f63c4;
  --uno-w: #232020;
}

.uno-card,
.uno-back {
  position: relative;
  display: inline-block;
  flex: none;
  width: 64px;
  height: 96px;
  border-radius: 10px;
  background: var(--face, var(--uno-w));
  box-shadow: inset 0 0 0 4px #fff, 0 2px 6px rgba(40, 20, 10, 0.3);
  color: #fff;
  font: 700 15px/1 var(--serif);
  overflow: hidden;
  vertical-align: top;
}

.uno-card.big {
  width: 84px;
  height: 126px;
  border-radius: 12px;
}

.c-r { --face: var(--uno-r); }
.c-y { --face: var(--uno-y); }
.c-g { --face: var(--uno-g); }
.c-b { --face: var(--uno-b); }
.c-w { --face: var(--uno-w); }

.uno-card .oval,
.uno-back .oval {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 58%;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) rotate(-30deg);
  display: grid;
  place-items: center;
}

.uno-card .mark {
  transform: rotate(30deg);
  color: var(--face);
  font-size: 30px;
  letter-spacing: -1px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.uno-card.big .mark {
  font-size: 40px;
}

.uno-card .corner {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.uno-card .corner.end {
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
  transform: rotate(180deg);
}

/* a wild's oval has all four colours */
.uno-card.c-w .oval {
  background: conic-gradient(var(--uno-r) 0 25%, var(--uno-b) 0 50%, var(--uno-y) 0 75%, var(--uno-g) 0);
}

.uno-card.c-w .mark {
  color: #fff;
  text-shadow: 0 0 3px #000, 1px 1px 0 #000;
}

.uno-back {
  background: var(--uno-w);
}

.uno-back .oval {
  background: var(--uno-r);
}

.uno-back .mark {
  transform: rotate(30deg) skewX(-8deg);
  color: var(--uno-y);
  font: 700 17px/1 var(--serif);
  text-shadow: 1px 1px 0 #000;
}

/* the table */

.uno-piles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  margin: 6px 0 10px;
}

.uno-pile,
.uno-discard {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.uno-pile .uno-back {
  width: 70px;
  height: 105px;
  box-shadow: inset 0 0 0 4px #fff, 3px 3px 0 #fff, 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(40, 20, 10, 0.3);
}

.uno-pile .count {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.in-play {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--face);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.uno-turn {
  margin: 4px 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.uno-turn.yours,
.uno-now.yours {
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff1d6;
}

/* twenty seconds a turn (ADR 0016), counted down by public/live.js */
.uno-turn .countdown {
  display: inline-block;
  min-width: 2.4em;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f3e3c4;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.uno-turn .countdown.low {
  background: #d8321e;
  color: #fff;
}

.uno-player.left {
  opacity: 0.6;
}

.uno-table > .small {
  text-align: center;
}

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

.uno-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6ecd9;
  border-left: 5px solid var(--accent);
}

.uno-player.turn {
  background: #fff1d6;
  box-shadow: 0 0 0 2px #e09a2c;
}

.uno-player .name {
  min-width: 72px;
  font-weight: 600;
}

.uno-player .backs {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 2px 0 2px 16px;
}

.uno-player .uno-back {
  width: 26px;
  height: 39px;
  margin-left: -14px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.uno-player .uno-back .mark {
  display: none;
}

.uno-player .count {
  margin-left: auto;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--ink-soft);
}

.uno-player.me .count {
  margin-left: 0;
}

.uno-call {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--uno-r, #d8321e);
  color: var(--uno-y, #f2c418);
  font-size: 0.78rem;
  font-weight: 700;
  transform: rotate(-6deg);
}

/* your hand */

.uno-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.in-hand {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.uno-play {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  transition: transform 0.15s ease;
}

.uno-play:not(:disabled):hover,
.uno-play:not(:disabled):focus-visible {
  transform: translateY(-6px);
}

.uno-play:not(:disabled) .uno-card {
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px #f2b233, 0 4px 10px rgba(40, 20, 10, 0.35);
}

.uno-play:disabled {
  cursor: default;
}

/* on your turn, the cards that won't go are dimmed */
.uno-hand:not(.waiting) .uno-play:disabled .uno-card,
.uno-hand:not(.waiting) .in-hand.wild.off .uno-card {
  filter: saturate(0.55) brightness(0.92);
  opacity: 0.7;
}

.in-hand.drawn .uno-card {
  outline: 3px dashed #e09a2c;
  outline-offset: 3px;
}

/* the game swaps in live (public/live.js) without breaking the page's grid */
.uno-game {
  display: contents;
}

/* a card on its way down: it lifts, and the rest of the hand waits */
.uno-hand-card.sending .in-hand.playing .uno-card {
  filter: none;
  opacity: 1;
  transform: translateY(-14px);
  transition: transform 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .uno-hand-card.sending .in-hand.playing .uno-card {
    transition: none;
  }
}

.swatches {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 4px;
}

.swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.35);
}

.swatch.s-r { background: var(--uno-r); }
.swatch.s-y { background: var(--uno-y); }
.swatch.s-g { background: var(--uno-g); }
.swatch.s-b { background: var(--uno-b); }

.swatch:disabled {
  opacity: 0.4;
  cursor: default;
}

.uno-hand-card .doings {
  margin-top: 14px;
}

.uno-again {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .uno-play {
    transition: none;
  }
}

.uno-card.turnable .mark,
.uno-card.turnable .corner {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.in-hand .tag {
  z-index: 2;
  top: -12px;
  right: auto;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-4deg);
}

/* ---------- Shinzo, up and about ---------- */

/* He's his picture, curled up on his blanket, only while he's napping.
   Otherwise he's up (src/art.ts DOG_STANDING), and his blanket stays under
   the tree. */
g.laddoo .lying,
g.laddoo.napping .standing,
g.blanket.covered {
  display: none;
}

g.laddoo.napping .lying {
  display: inline;
}

.dog-shadow {
  fill: rgba(40, 25, 15, 0.25);
}

g.laddoo .leg,
g.laddoo .tail,
g.laddoo .dog-head {
  transform-box: fill-box;
}

g.laddoo .leg {
  transform-origin: 50% 0;
}

g.laddoo .tail {
  transform-origin: 0 100%;
}

/* a slow wag whenever he's up */
g.laddoo.awake .tail {
  animation: wag 0.9s ease-in-out infinite alternate;
}

/* walking (or trotting after you): legs in diagonal pairs, a quick wag and a
   little nod */
g.laddoo.walking .leg,
g.laddoo.trotting .leg {
  animation: dog-step 0.34s ease-in-out infinite alternate;
}

g.laddoo.walking .leg.b,
g.laddoo.trotting .leg.b {
  animation-direction: alternate-reverse;
}

g.laddoo.walking .tail,
g.laddoo.trotting .tail {
  animation-duration: 0.3s;
}

g.laddoo.walking .dog-head,
g.laddoo.trotting .dog-head {
  animation: dog-nod 0.34s ease-in-out infinite alternate;
}

@keyframes dog-step {
  from {
    transform: rotate(-18deg);
  }
  to {
    transform: rotate(18deg);
  }
}

@keyframes wag {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(16deg);
  }
}

@keyframes dog-nod {
  to {
    transform: translateY(-2px);
  }
}

/* ---------- hugs and birthdays ---------- */

/* In a hug, everyone leans in toward its middle, with hearts rising over
   them and their names together underneath (src/scene.ts figures()). */
.walker.hugging .lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(var(--lean, 0deg));
}

.walker.hugging .who {
  display: none;
}

g.hug .hug-names {
  font-size: 14px;
}

g.hug .heart {
  fill: #ff6f91;
  stroke: #fff;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: hug-heart 2.6s ease-in-out infinite;
}

@keyframes hug-heart {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

/* Her birthday month: bunting, balloons, and on the day a cake. */
.banner-words {
  font: 700 13px var(--hand);
  fill: #8a3c2c;
  text-anchor: middle;
}

g.party .balloon {
  animation: sway 3.2s ease-in-out infinite alternate;
}

@keyframes sway {
  from {
    transform: translate(-1.5px, 0);
  }
  to {
    transform: translate(1.5px, -3px);
  }
}

g.party .flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 0.5s ease-in-out infinite alternate;
}

@keyframes flicker {
  to {
    transform: scale(0.8, 1.15);
  }
}

/* Her crown in her window at the door and on Everyone. */
.pane .crown {
  position: absolute;
  left: 50%;
  top: 1%;
  width: 36%;
  transform: translateX(-50%);
  pointer-events: none;
}

.birthday-card {
  border-left: 5px solid var(--accent);
}

.birthday-card h2 .emoji {
  margin-right: 0.15em;
}

/* Birthday cards (ADR 0030): folded paper in the writer's colour, sealed
   ones with a wax seal. Not .card (every panel) or .birthday-card. */
.birthday-cards {
  border-left: 5px solid var(--accent);
}

.birthday-cards ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: grid;
  gap: 12px;
}

.bday-card {
  position: relative;
  padding: 14px 16px 10px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  border-top: 3px dashed rgba(122, 97, 80, 0.25);
}

.bday-card .body {
  margin: 0 0 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bday-card .by {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.bday-card.sealed-card::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e46a6a, #a83232);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.birthday-cards .sealed {
  font-weight: 600;
}

.birthday-cards .cards-kept summary {
  cursor: pointer;
  color: var(--ink-soft);
}

/* ---------- a friend close enough to hug (public/house.js) ---------- */

/* Her shadow lights up warm, like the things you walk up to. */
g.walker.near:not(.me) > .shadow {
  fill: #ffd56b;
  stroke: #fff4c8;
  stroke-width: 3px;
  animation: beckon 0.9s ease-in-out infinite alternate;
}

/* ---------- making a house for any five friends (src/maker.ts, ADR 0017) ---------- */

.make-link {
  margin-top: 18px;
  text-align: center;
}

a.make-door {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: #e8c79f;
  color: #3a2618;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(20, 16, 30, 0.4);
}

a.make-door:hover,
a.make-door:focus-visible {
  background: #f3dab8;
}

main.make {
  max-width: 640px;
}

.make .room-head {
  margin-top: 16px;
}

.make-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.make-form fieldset {
  margin: 0;
  border: 0;
  min-width: 0;
}

.make-form legend {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font-weight: 600;
  font-size: 1.1rem;
}

.make-form input,
.make-form select {
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px dashed rgba(59, 42, 32, 0.35);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
}

/* "You are / They are": the three choices on one line, each radio beside its
   words (the full-width inputs above stretched them away from their labels). */
.make-form .gender-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 0;
}

.make-form .gender-pick label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.make-form .gender-pick input {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--accent);
}

.make-form input:focus,
.make-form select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.make-form .compose textarea {
  font-size: 1.25rem;
}

.make-form .birthday-pick {
  display: grid;
  grid-template-columns: 1fr 5.5em;
  gap: 4px 10px;
  align-items: end;
}

.make-form .birthday-pick label {
  grid-column: 1 / -1;
}

.make .problem {
  margin-top: 16px;
  background: #fbe3dc;
  box-shadow: inset 4px 0 0 var(--new);
}

.made .made-url code {
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(59, 42, 32, 0.08);
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  user-select: all;
}

.made .go-in {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--frame);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- a made house's own rooms and memories (src/houses.ts) ---------- */

/* what a friend said is in her room, on little paper tags pinned up in it
   (src/scene.ts roomThings); SVG only, so scoped to the group */
g.room-things {
  pointer-events: none;
}

g.room-things .pin-paper {
  fill: var(--paper);
  stroke: rgba(80, 55, 40, 0.35);
  stroke-width: 1;
  filter: drop-shadow(0 2px 2px rgba(40, 20, 10, 0.3));
}

g.room-things .pin {
  fill: var(--accent);
  stroke: rgba(40, 20, 10, 0.4);
  stroke-width: 0.8;
}

g.room-things .pin-text {
  font: 700 15px var(--hand);
  fill: var(--ink);
}

.room-things-card {
  border-left: 5px solid var(--accent);
}

.room-things-card .plain-list li {
  font-family: var(--hand);
  font-size: 1.2rem;
}

/* the pictures picked for her room (src/belongings.ts), in the room; SVG only */
image.room-belonging {
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(40, 20, 10, 0.35));
}

.room-things-card img.belonging {
  flex: none;
  width: 44px;
  height: 44px;
}

/* the maker's picture picker: several ticked, so checkboxes, with room for
   longer labels than the gift picker's */
.make-form .belongings-pick {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.make-form .belongings-pick label {
  padding: 6px 2px 5px;
  font-size: 0.72rem;
}

.make-form .belongings-pick legend {
  float: none;
  grid-column: 1 / -1;
  font-size: 0.95rem;
}

.make-form .belongings-pick input {
  width: auto;
}

.make-form details.more-belongings {
  grid-column: 1 / -1;
}

.make-form details.more-belongings summary {
  padding: 4px 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  cursor: pointer;
}

.make-form details.more-belongings .belongings-pick {
  margin-top: 6px;
}

.make-form .belongings-pick img {
  width: 44px;
  height: 44px;
}

/* what Claude drew of her things, in the room (src/drawings.ts); SVG only */
g.room-drawing {
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(40, 20, 10, 0.35));
}

g.room-drawing :is(circle, ellipse, rect, polygon, line) {
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.room-things-card li.drawn-thing {
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-things-card svg.drawing {
  flex: none;
  width: 44px;
  height: 44px;
}

.room-things-card svg.drawing :is(circle, ellipse, rect, polygon, line) {
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* the memories a made house moved in with, pinned at the top of the wall */
.notes.memories .note {
  border-top: 6px solid #f2c14e;
}

.notes.memories .note .by {
  font-style: italic;
}

/* the inside joke a made house was made with, framed by the living room door */
figure.inside-joke {
  margin: 16px 6px 22px;
  padding: 18px 20px 14px;
  border: 8px solid var(--wood);
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px #d9b98a, 0 6px 14px rgba(40, 20, 10, 0.25);
  text-align: center;
  transform: rotate(-0.8deg);
}

figure.inside-joke blockquote {
  margin: 0;
  font-size: 1.6rem;
}

figure.inside-joke figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* framed at the door too, so it's the first thing anyone reads coming home */
.top figure.inside-joke {
  max-width: 26em;
  margin: 16px auto 4px;
  padding: 12px 16px 10px;
  border-width: 6px;
  color: var(--ink);
  transform: rotate(1deg);
}

.top figure.inside-joke blockquote {
  font-size: 1.35rem;
}

/* in the picture: a little frame on the living room wall (src/scene.ts) */
g.joke-frame {
  pointer-events: none;
}

.make-form .inside-joke-ask h2 {
  font-size: 1.1rem;
}

/* a plate saved for a friend (ADR 0022): covered on the counter, with her
   name on its tag; your own saved plates come first */
.desk-list > li.dish.saved {
  background-color: #fff7e8;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.saved-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

#counter .small-head:first-of-type {
  margin-top: 0;
}

/* who's it for, when you cook: everyone, or one friend */
.compose fieldset.for-who {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.compose fieldset.for-who legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.compose fieldset.for-who label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f6ecd9;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}

.compose fieldset.for-who label:has(input:checked) {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.compose fieldset.for-who input {
  margin: 0;
  accent-color: var(--accent);
}

/* writing back to a note on your desk: it goes on her desk */
.desk-thing .reply-to {
  margin-bottom: 4px !important;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}

.desk-list > li.desk-thing.reply {
  border-left: 4px solid color-mix(in srgb, var(--paper) 40%, var(--wood));
}

.desk-thing details.write-back {
  margin-top: 8px;
}

.desk-thing details.write-back summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.desk-thing details.write-back summary::-webkit-details-marker {
  display: none;
}

.desk-thing details.write-back[open] summary {
  margin-bottom: 8px;
}

.desk-thing details.write-back .compose {
  display: grid;
  gap: 8px;
}

.desk-thing .wrote-back {
  margin-top: 6px !important;
}

/* the inside joke, framed among the memories on the wall */
.wall figure.inside-joke {
  max-width: 30em;
  margin: 4px auto 22px;
  color: var(--ink);
}

/* picking a time for all of you: a clock each, moving together */
.plan-night fieldset.when-picker {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.plan-night fieldset.when-picker legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.plan-night .when-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-night .when-row {
  display: grid;
  grid-template-columns: minmax(8.5em, 1fr) minmax(0, 15em);
  grid-template-areas: "who when" "note note";
  gap: 2px 12px;
  align-items: center;
  padding: 8px 10px 8px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #fbf3e4;
}

.plan-night .when-row.you {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 32, 0.12);
}

.plan-night .when-row label {
  grid-area: who;
  color: var(--ink);
  font-size: 0.95rem;
}

.plan-night .when-row .name {
  font-weight: 600;
}

.plan-night .when-row .where {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.plan-night .when-row input {
  grid-area: when;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.92rem;
}

.plan-night .when-row .sleep-note {
  grid-area: note;
  font-size: 0.8rem;
  color: #8a4a2a;
}

.plan-night .when-row .sleep-note:empty {
  display: none;
}

.plan-night .when-row.late {
  background: #f4ebf6;
}

.plan-night .when-row.late .sleep-note::before {
  content: "😴 ";
}

.plan-night .when-help {
  margin-top: 8px !important;
}

@media (max-width: 520px) {
  .plan-night .when-row {
    grid-template-columns: 1fr;
    grid-template-areas: "who" "when" "note";
  }
}

/* the planner, for a video call or movie night: what it's for */
.plan-night fieldset.plan-what {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.plan-night fieldset.plan-what legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.plan-night label.what {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f6ecd9;
  color: var(--ink);
  font-size: 0.98rem;
  cursor: pointer;
}

.plan-night label.what:has(input:checked) {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.plan-night label.what input {
  margin: 0;
  accent-color: var(--accent);
}

.plan-night label.sub {
  margin: 0 0 -4px 12px;
}

.plan-night .plan-what > input,
.plan-night .plan-what > select {
  width: calc(100% - 12px);
  margin-left: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(59, 42, 32, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.plan-night button.back-to-now {
  justify-self: start;
  padding: 6px 14px;
  font-size: 0.88rem;
}

.card.call {
  --accent: #5b8fd6;
}

/* in a room, a look at the whole house without leaving it (Esc) */
.map > .look-out {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 2px 8px rgba(40, 20, 10, 0.2);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.map > .look-out[aria-pressed="true"] {
  background: #c4553c;
  color: #fff;
}

.map > .look-out kbd {
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: inherit;
  font-size: 0.72rem;
  opacity: 0.7;
}

.pad.touch ~ .look-out kbd {
  display: none;
}

/* the planner's time strip: everyone's day and night, dragged under a needle
   (public/live.js); and a little clock on each row */
.when-strip {
  position: relative;
  margin: 2px 0 12px;
  padding: 8px 0 24px;
  overflow: hidden;
  border-radius: 12px;
  background: #2f2740;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.when-strip.dragging {
  cursor: grabbing;
}

.when-strip:focus-visible {
  outline: 3px solid #f4c36a;
  outline-offset: 2px;
}

.when-lanes {
  display: grid;
  gap: 5px;
  width: max-content;
  will-change: transform;
}

.when-lane {
  position: relative;
}

.when-lane .who {
  display: none;
}

.when-initials {
  position: absolute;
  top: 0;
  bottom: 18px;
  left: 0;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px 14px 0 6px;
  background: linear-gradient(to right, #2f2740 calc(100% - 10px), transparent);
  pointer-events: none;
}

.when-initials span {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  background: #f6e3c4;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.when-initials img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
}

.when-initials span.you b {
  position: absolute;
  bottom: -3px;
  left: 50%;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.56rem;
  line-height: 1.35;
  transform: translateX(-50%);
}

.when-lane .band {
  display: flex;
  height: 34px;
  border-left: 0;
}

.when-lane .band > span {
  position: relative;
  flex: 0 0 46px;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.when-lane .band > .day {
  background: color-mix(in srgb, var(--accent) 22%, #fff3cf);
}

.when-lane .band > .dusk {
  background: color-mix(in srgb, var(--accent) 35%, #8d7aa8);
}

.when-lane .band > .night {
  background: color-mix(in srgb, var(--accent) 18%, #1d1830);
}

.when-lane .band > .midnight {
  border-left: 2px solid rgba(255, 255, 255, 0.55);
}

.when-lane .band i {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  color: rgba(40, 28, 20, 0.55);
}

.when-lane .band > .night i,
.when-lane .band > .dusk i {
  color: rgba(255, 255, 255, 0.7);
}

.when-needle {
  position: absolute;
  top: 0;
  bottom: 18px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #f4c36a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(244, 195, 106, 0.7);
  pointer-events: none;
}

.when-needle::before {
  position: absolute;
  top: -2px;
  left: 50%;
  border: 7px solid transparent;
  border-top-color: #f4c36a;
  transform: translateX(-50%);
  content: "";
}

.when-drag {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.plan-night .when-row {
  grid-template-columns: minmax(8.5em, 1fr) auto minmax(0, 15em);
  grid-template-areas: "who clock when" "note note note";
}

.when-clock {
  grid-area: clock;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.when-face {
  width: 40px;
  height: 40px;
  flex: none;
}

.when-face .rim {
  fill: #fffaf0;
  stroke: var(--accent);
  stroke-width: 2.5;
  transition: fill 0.3s;
}

.when-face .tick {
  stroke: rgba(59, 42, 32, 0.35);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.when-face .hand {
  stroke: var(--ink);
  stroke-linecap: round;
}

.when-face .hand.hour {
  stroke-width: 2.6;
}

.when-face .hand.minute {
  stroke-width: 1.6;
}

.when-face .pin {
  fill: var(--accent);
}

.when-face.dark .rim {
  fill: #2f2740;
}

.when-face.dark .tick {
  stroke: rgba(255, 255, 255, 0.4);
}

.when-face.dark .hand {
  stroke: #fffaf0;
}

.when-readout {
  display: grid;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.when-readout .t {
  font-size: 1.15rem;
}

.when-readout .h,
.when-readout .d {
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.when-readout .h {
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .plan-night .when-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "who clock" "when when" "note note";
  }

  .when-readout {
    grid-template-columns: auto auto;
    column-gap: 4px;
    align-items: baseline;
  }

  .when-readout .d {
    grid-column: 1 / -1;
  }
}

.when-chips {
  position: absolute;
  top: 8px;
  left: calc(50% + 7px);
  z-index: 2;
  display: grid;
  gap: 5px;
  pointer-events: none;
}

.when-chips span {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 7px;
  border-radius: 6px;
  background: #3a3150;
  color: #fffaf0;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.when-chips span.late {
  color: #f7c9a0;
}

/* a photo on the memory wall (ADR 0024): pinned up like a polaroid, with
   what reminded her written underneath */
.note.photo {
  justify-self: center;
  width: min(100%, 170px);
  padding: 8px 8px 10px;
  background: #fffdf8;
}

.note.photo .snap {
  display: block;
  margin-bottom: 8px;
  background: #e9dcc6;
  aspect-ratio: 1;
  overflow: hidden;
}

.note.photo .snap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note.photo .body {
  font-size: 1.1rem;
  line-height: 1.15;
}

.note.photo .by {
  font-size: 0.78rem;
}

.pin-photo input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}

.pin-photo input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border: 2px solid var(--accent, #c4553c);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pin-photo input[name="body"] {
  width: 100%;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dashed rgba(59, 42, 32, 0.35);
  background: transparent;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.35rem;
}

.pin-photo input[name="body"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.pin-photo .preview {
  display: block;
  width: min(220px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid #fffdf8;
  border-bottom-width: 22px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.4deg);
}

/* Home's question (ADR 0027): the house on your home screen? A card above the
   house on a laptop or iPad, a slim band under the news on a phone. */
.widget-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  max-width: 1560px;
  margin: 14px auto 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff8ea;
  box-shadow: 0 2px 8px rgba(40, 20, 10, 0.12);
}

.widget-ask p {
  margin: 0;
  flex: 1 1 320px;
}

.widget-ask-why {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.widget-ask-answers {
  display: flex;
  gap: 8px;
}

.widget-ask button,
.home-widget button.widget-yes,
.app-actions button.widget-yes {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}

.widget-ask button.widget-yes,
.home-widget button.widget-yes,
.app-actions button.widget-yes {
  border: 0;
  background: var(--accent);
  color: #fff;
}

@media (min-width: 700px) {
  .widget-ask {
    margin: 14px 20px 0;
  }
}

/* On a phone, a band under the news, the question and its two answers on one
   line each; the house below is that much shorter, so it still fits the
   screen with the tabs */
@media (max-width: 699px) {
  .widget-ask {
    height: var(--to-widget-h);
    margin: 0;
    padding: 6px 12px;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(138, 90, 60, 0.14);
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
  }

  .widget-ask p {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.25;
  }

  .widget-ask-why,
  .widget-ask-more {
    display: none;
  }

  .widget-ask-answers {
    flex: none;
    gap: 6px;
  }

  .widget-ask button {
    min-height: 34px;
    padding: 4px 12px;
    font-size: 0.85rem;
  }

  .page-home main:has(> .widget-ask) {
    --to-widget-h: 56px;
  }

  /* The tabs sit just under the walking corners. A thumb held a little low
     lands on them, and holding a link makes iPhone Safari offer to download
     it (that saved Home as a file, 4 November), so a held tab offers
     nothing; a tap still goes */
  .tabs a {
    -webkit-touch-callout: none;
  }
}

@media (min-width: 1600px) {
  .widget-ask {
    margin: 14px auto 0;
  }
}

/* the widget's page: whose widget it is, is it working yet, and the steps
   for each device */
.widget-whose {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.widget-whose img {
  flex: none;
  width: 36px;
  height: 48px;
  object-fit: contain;
}

.widget-status {
  padding: 10px 14px;
  border-radius: 10px;
}

.widget-status.working {
  background: #e3f2dc;
  box-shadow: inset 4px 0 0 #5a9e48;
}

.widget-status.waiting {
  background: #fdf1dc;
  box-shadow: inset 4px 0 0 #d9a25b;
}

.home-widget details.widget-way {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(138, 90, 60, 0.16);
}

.home-widget details.widget-way[open] summary {
  margin-bottom: 4px;
}

.home-widget ol.widget-steps li {
  margin: 8px 0;
}

/* the house on your home screen (ADR 0025): your widget's link, and how to
   use it */
.home-widget input.widget-link {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(59, 42, 32, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 0.82rem/1.3 ui-monospace, Menlo, monospace;
}

.home-widget details {
  margin: 8px 0;
}

.home-widget summary {
  font-weight: 600;
  cursor: pointer;
}

.home-widget ol {
  margin: 8px 0;
  padding-left: 1.3em;
}

.home-widget li {
  margin: 4px 0;
}

.home-widget code {
  font-size: 0.78rem;
  word-break: break-all;
}

/* "Put it on my home screen", the card's one big button */
.home-widget form.inline button:not(.soft) {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* the iPhone script, to copy into Scriptable, and the buttons beside it */
.home-widget textarea.widget-script {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(59, 42, 32, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--soft-ink, #7a6150);
  font: 0.7rem/1.3 ui-monospace, Menlo, monospace;
  resize: vertical;
}

.home-widget a.button {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(59, 42, 32, 0.08);
  font-weight: 600;
  text-decoration: none;
}

.home-widget .small input.widget-link {
  margin-top: 4px;
  font-size: 0.72rem;
}

/* a photo from the wall, small, beside its line in Updates (ADR 0024) */
.happenings li.with-photo {
  display: flex;
  gap: 10px;
  align-items: center;
}

.happenings .photo-thumb {
  flex: none;
  line-height: 0;
}

.happenings .photo-thumb img {
  width: 44px;
  height: 44px;
  border: 3px solid #fffdf8;
  border-bottom-width: 7px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transform: rotate(-3deg);
}

/* On a phone the wall fits one note across, so a small photo would sit alone
   in its row: photos go two side by side instead, and notes stay full width. */
@media (max-width: 600px) {
  .wall .notes {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 14px;
  }

  .wall .notes > .note:not(.photo) {
    grid-column: 1 / -1;
  }
}

.note.photo .sticker-pick {
  font-size: 0.78rem;
}

/* ---------- the wall's months (ADR 0026) ---------- */

/* a month's recap, waiting for a friend who comes back after the 1st: like a
   letter from the wall, the month's photos fanned out on it */
.card.recap {
  position: relative;
  border-top: 5px solid var(--accent);
  background:
    linear-gradient(135deg, rgba(255, 233, 199, 0.65), rgba(255, 248, 236, 0) 60%),
    var(--card);
}

.recap .happenings .tag {
  position: static;
  display: inline-block;
  margin-left: 4px;
  vertical-align: 1px;
  transform: none;
}

.recap-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 14px 0 4px;
  padding: 0 4px;
  list-style: none;
}

.recap-photos li {
  transform: rotate(var(--tilt, 0deg));
}

.recap-photos a {
  display: block;
  line-height: 0;
}

.recap-photos img {
  width: 66px;
  height: 66px;
  border: 4px solid #fffdf8;
  border-bottom-width: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.recap .more {
  margin-top: 10px;
}

.recap-done {
  margin-top: 14px;
}

.recap-done button {
  padding: 9px 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--frame);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.recap-done button:hover,
.recap-done button:focus-visible {
  background: #ffe9c7;
}

/* the memory box: an envelope for each month the wall has had */
.envelope {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f3e3c3;
  box-shadow: 0 3px 10px rgba(40, 20, 10, 0.2);
}

/* (.wall .drawer summary would make it the wall's cream, on cream) */
.wall .envelope > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  cursor: pointer;
  color: var(--ink);
}

.envelope-month {
  font-weight: 700;
}

.envelope-who {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.envelope > .notes {
  margin: 14px 0 6px;
}

/* an anchor (#memory-box, #recap, #widget) lands below the top bar, not
   under it */
#memory-box,
#recap,
.envelope,
#widget {
  scroll-margin-top: 70px;
}

/* ---------- ADR 0031: the light left on, on this day, a line under a photo, tell them ---------- */

/* A light a friend left on glows softly, breathing, in her window. */
g.light circle.left-on {
  animation: left-on 3.2s ease-in-out infinite alternate;
}

@keyframes left-on {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  g.light circle.left-on { animation: none; }
}

.left-on-line:empty {
  display: none;
}

.left-on-line {
  margin: 4px 0 10px;
  color: var(--ink-soft);
}

.on-this-day .otd-photo img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transform: rotate(-1.2deg);
  margin: 6px 0 10px;
}

/* Inside main.list's grid a textarea's own width would stretch the column. */
.tell-them {
  min-width: 0;
}

.tell-them .tell-message {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(122, 97, 80, 0.3);
  background: rgba(255, 255, 255, 0.6);
  resize: none;
}

.tell-them .tell-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Lines under a photo, like the back of a print. Not .caption anywhere. */
.note .photo-lines {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px dashed rgba(122, 97, 80, 0.3);
  font-size: 0.9rem;
}

.note .photo-lines li + li {
  margin-top: 3px;
}

.note .photo-lines .line-by {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.note .photo-line {
  margin-top: 6px;
  font-size: 0.85rem;
}

.note .photo-line summary {
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

.note .photo-line summary::-webkit-details-marker {
  display: none;
}

.note .photo-line-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.note .photo-line-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(122, 97, 80, 0.35);
}

.note .photo-line-form button {
  font: inherit;
  font-size: 0.8rem;
}

/* ---------- a phone on its side (ADR 0032) ----------
   A phone held sideways is wide enough for the laptop's layout but only
   about 400px tall, so the house was a card half off the screen and the
   walking corners, on the picture, out of sight. Held sideways, a phone
   gets the house filling the screen under a slim bar, and the walking
   corners on the screen's own bottom corners, wherever you are. Held
   upright, Home and rooms say it's all there sideways (`.turn-hint`, ADR 0035). */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --bar-h: 44px;
  }

  .bar {
    min-height: var(--bar-h);
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
    gap: 8px;
  }

  .brand {
    font-size: 1rem;
  }

  .bar .greeting {
    display: none;
  }

  .tabs {
    gap: 2px;
    margin-left: auto;
  }

  .tabs a {
    padding: 4px 10px;
    font-size: 0.82rem;
  }

  .tabs svg {
    width: 18px;
    height: 18px;
  }

  .switch img {
    width: 30px;
    height: 30px;
  }

  /* Home: the house is the page. What's around it sits below, a scroll
     away; only the widget's question stays above it, one slim line, until
     this phone answers it (ADR 0032). */
  .page-home .news,
  .page-home .to-widget.in-news {
    display: none;
  }

  .page-home .widget-ask {
    height: 40px;
    margin: 0;
    padding: 4px max(12px, env(safe-area-inset-left));
    border-radius: 0;
    box-shadow: none;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
  }

  .page-home .widget-ask p {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-home .widget-ask-why,
  .page-home .widget-ask-more {
    display: none;
  }

  .page-home .widget-ask button {
    min-height: 32px;
    padding: 2px 12px;
    font-size: 0.82rem;
  }

  .page-home main:has(> .widget-ask) .map {
    height: calc(100svh - var(--bar-h) - 40px);
  }

  .page-home .home-grid {
    display: block;
    max-width: none;
    padding: 0;
  }

  .page-home .side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 14px max(14px, env(safe-area-inset-left)) 24px;
  }

  .page-home .map,
  .room-grid .map {
    height: calc(100svh - var(--bar-h));
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .page-home .house-svg {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* A room: its picture fills the screen too, the cards a scroll below. */
  .room-grid {
    display: block;
    max-width: none;
    padding: 0;
  }

  .room-grid .map {
    position: relative;
    top: 0;
  }

  .map.zoom .house-svg {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .room-side {
    padding: 14px max(16px, env(safe-area-inset-left)) 24px;
  }

  /* The walking corners are the screen's, like a game's, on every page with
     the house, and never step aside: you can walk from anywhere. */
  .pad.touch {
    --corner-w: 30vw;
    --corner-h: 46svh;
  }

  .pad.touch .walk-corner {
    position: fixed;
    z-index: 25;
    bottom: 0;
    border-radius: 0;
    background: none;
  }

  .pad.touch.away .walk-corner {
    visibility: visible;
  }

  .pad.touch .walk-corner.left {
    left: 0;
  }

  .pad.touch .walk-corner.right {
    right: 0;
  }

  .pad.touch .walk-corner::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 120px;
    pointer-events: none;
  }

  .pad.touch .walk-corner.left::before {
    left: 0;
    border-top-right-radius: 100% 100%;
    background: radial-gradient(farthest-side at 0 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
  }

  .pad.touch .walk-corner.right::before {
    right: 0;
    border-top-left-radius: 100% 100%;
    background: radial-gradient(farthest-side at 100% 100%, rgba(59, 42, 32, 0.34), rgba(59, 42, 32, 0.16) 70%, rgba(59, 42, 32, 0));
  }

  .pad.touch .walk-corner::after {
    bottom: max(24px, env(safe-area-inset-bottom));
  }

  .pad.touch .walk-corner.left::after {
    left: max(24px, env(safe-area-inset-left));
  }

  .pad.touch .walk-corner.right::after {
    right: max(24px, env(safe-area-inset-right));
  }

  .pad.touch .walk-corner.held::before {
    opacity: 0.55;
  }

  /* The buttons: on the screen too, at the bottom between the corners. */
  .page-home .pad,
  .page-room .pad {
    position: fixed;
    right: 30vw;
    bottom: 10px;
    left: 30vw;
    z-index: 26;
    justify-content: center;
  }

  /* above the hint, which sits at the very bottom until you've walked */
  .pad.touch .moves {
    margin: 0 auto 46px;
    align-items: center;
  }

  .pad.touch .go,
  .pad.touch .do {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 0.85rem;
  }

  .pad.touch .keys-hint {
    position: fixed;
    bottom: 12px;
    z-index: 26;
  }

  .stick {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
  }

  /* With garden green either side of the house wide enough for them
     (public/house.js measures it, `--side-w`), the buttons stand in the
     right-hand green, above its walking corner, so the house stays clear.
     Rithika, 8 Nov: they were covering the middle of the house. Go in is
     at the bottom, nearest the thumb. */
  .page-home .pad.sides {
    right: max(6px, env(safe-area-inset-right));
    left: max(6px, env(safe-area-inset-left));
    bottom: 132px;
    justify-content: space-between;
  }

  .pad.touch.sides .moves {
    width: var(--side-w);
    margin: 0;
    align-items: stretch;
    gap: 6px;
  }

  /* what doesn't fit on the right stands in the left-hand green */
  .pad.touch.sides .moves.spill {
    order: -1;
    margin-right: auto;
  }

  .pad.touch.sides .go,
  .pad.touch.sides .do {
    min-height: 40px;
    padding: 5px 8px;
    font-size: 0.82rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 8px rgba(40, 20, 10, 0.25);
  }
}

/* the spill column only stands anywhere in the green either side */
.moves.spill:empty,
.pad:not(.sides) .moves.spill {
  display: none;
}

/* On a phone, either way up, each button is its emoji and one word ("🛏️
   Sleep", "🪔 Light", "🚪 Neha's"), so they cover as little of the house
   as they can. Rithika, 8 Nov: "maybe make the messages smaller on phone,
   could be j an emoji or a single word". The whole sentence is still the
   button's name (house.js puts it in `title` and the hidden label is read
   out). An iPad or a laptop keeps the sentence. */
.pad .short {
  display: none;
}

@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .pad.touch .label,
  .pad.touch .go-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pad.touch .short {
    display: inline;
  }

  .pad.touch .go,
  .pad.touch .do {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.85rem;
    text-align: center;
  }

  .pad.touch .go .emoji,
  .pad.touch .do .emoji {
    margin: 0;
    font-size: 1.05rem;
  }

  /* not the side columns' stretch: in the middle, each as small as its word */
  .pad.touch:not(.sides) .moves {
    align-items: center;
  }
}

/* Held upright, a phone gets the house as it always did, with one slim
   line under the bar saying it's all there sideways (ADR 0035, superseding
   0032's cover, which hid the house from every upright phone). Only on an
   upright touch screen; sideways, on an iPad or a laptop it's gone. */
.turn-hint {
  display: none;
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  body.page-home,
  body.page-room {
    --turn-hint-h: 28px;
  }

  .turn-hint {
    display: flex;
    height: var(--turn-hint-h, 28px);
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 16px;
    background: var(--card, #fff8ec);
    border-bottom: 1px solid rgba(60, 40, 20, 0.12);
    color: var(--ink, #3b2a20);
    font-size: 0.85rem;
    line-height: 1.3;
  }
}

/* On Windows: the widget lives on a phone (ADR 0032). */
.widget-on-phone {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff1d6;
  border-left: 4px solid var(--accent);
}

/* ---------- the house as an app (ADR 0033) ---------- */

.app-card {
  max-width: 640px;
}

.app-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.app-icon {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(40, 20, 10, 0.25);
}

.app-head h1 {
  margin: 0 0 4px;
}

.app-who {
  margin: 0;
  color: var(--ink-soft);
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.app-actions:not(:has(button:not([hidden]))) {
  display: none;
}

.app-installed {
  padding: 10px 14px;
  border-radius: 10px;
  background: #e5f3df;
}

.app-scan {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 14px;
  background: #fff8ea;
  border: 1px solid rgba(138, 90, 60, 0.16);
}

.app-scan h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.app-scan p {
  margin: 0 0 6px;
}

svg.qr {
  flex: none;
  width: 156px;
  height: 156px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(40, 20, 10, 0.15);
}

.app-link code {
  overflow-wrap: anywhere;
}

details.app-way {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fffdf7;
  border: 1px solid rgba(138, 90, 60, 0.16);
}

details.app-way summary {
  cursor: pointer;
  font-weight: 600;
}

details.app-way ol {
  margin: 8px 0;
  padding-left: 1.3em;
}

.app-glyph {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: #eef3fb;
}

/* A phone has no laptop to scan from; the code is for laptops. */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .app-page .app-scan {
    display: none;
  }
}

@media (max-width: 520px) {
  .app-scan {
    flex-direction: column;
    text-align: center;
  }
}

/* Opened from the home screen, the house is an app: the bar reaches under
   the notch, there's no long-press menu on its buttons, and pulling down
   doesn't bounce the page. */
html.as-app body {
  overscroll-behavior-y: none;
}

html.as-app .bar {
  padding-top: max(4px, env(safe-area-inset-top));
}

html.as-app button,
html.as-app .tabs a,
html.as-app .house-svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: none;
  }

  .bar {
    padding-top: max(4px, env(safe-area-inset-top));
  }
}

/* ---------- who you are, on coming in (ADR 0034) ---------- */
/* A card over the top of the house with your sticker: "Hi Rithika 👋".
   It drops in, stays a few seconds, and goes (public/live.js). Tapping it
   sends it away sooner. Not .hello (the bar) or .who (the name labels). */
.hi-there {
  position: fixed;
  top: calc(var(--bar-h) + 12px);
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  border: 3px solid var(--accent);
  background: #fffaf0;
  box-shadow: 0 10px 28px rgba(40, 20, 10, 0.28);
  transform: translateX(-50%);
  animation: hi-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
  cursor: pointer;
}

.hi-there img {
  flex: none;
  width: 44px;
  height: 58px;
  object-fit: contain;
}

.hi-words {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.hi-words b {
  font-size: 1.2rem;
}

.hi-not {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.hi-not form.inline,
.hi-not button.link {
  display: inline;
  font-size: inherit;
}

.hi-there.going {
  animation: hi-out 0.4s ease-in both;
}

@keyframes hi-in {
  from {
    opacity: 0;
    transform: translate(-50%, -24px) scale(0.9);
  }
}

@keyframes hi-out {
  to {
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-there,
  .hi-there.going {
    animation: none;
  }
}

/* A phone held upright has no bar over the house; on its side, a slim one. */
@media (max-width: 699px) {
  .hi-there {
    top: calc(var(--bar-h) + 8px);
  }
}

/* ---------- drawings and voice notes (ADR 0037) ---------- */

.draw-card > summary,
.voice-card > summary {
  cursor: pointer;
  list-style: none;
}

.draw-card > summary::-webkit-details-marker,
.voice-card > summary::-webkit-details-marker {
  display: none;
}

.draw-card > summary h2,
.voice-card > summary h2 {
  display: inline;
  margin: 0;
}

.draw-card > summary::after,
.voice-card > summary::after {
  content: " ›";
  color: var(--ink-soft);
}

.draw-card[open] > summary::after,
.voice-card[open] > summary::after {
  content: " ⌄";
}

.draw-form,
.voice-form {
  margin-top: 10px;
}

/* with the script, the paper or the recorder stands in for the file field */
.drawing-on .draw-fallback,
.recording-on .voice-fallback {
  display: none;
}

.sketch-paper canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.18), 0 2px 8px rgba(40, 20, 10, 0.12);
  touch-action: none;
  cursor: crosshair;
}

.sketch-paper canvas.empty {
  box-shadow: inset 0 0 0 2px #d0663f;
}

.sketch-pens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}

.sketch-pens .pen {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #fffdf6;
  border-radius: 50%;
  background: var(--ink, #3b2a20);
  box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.25);
}

.sketch-pens .pen[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--accent, #c4553b);
}

.sketch-pens .rubber {
  background: #fff;
  font-size: 1rem;
}

/* the pad's own buttons aren't the form's send button (.compose button) */
.compose .sketch-pens button {
  justify-self: auto;
  font-weight: 400;
}

.compose .sketch-pens .pen {
  padding: 0;
}

.compose .sketch-pens .undo,
.compose .sketch-pens .wipe {
  min-height: 32px;
  padding: 2px 14px;
  border: 1px solid rgba(60, 40, 20, 0.3);
  border-radius: 999px;
  background: var(--card, #fffaf0);
  color: var(--ink);
  font-size: 0.85rem;
}

/* the line with it, like the photo form's */
.draw-form input[name="body"],
.voice-form input[name="body"] {
  width: 100%;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dashed rgba(59, 42, 32, 0.35);
  background: transparent;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.35rem;
}

.draw-form input[name="body"]:focus,
.voice-form input[name="body"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.draw-form input[type="file"],
.voice-form input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}

.recorder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.compose .recorder .rec {
  justify-self: auto;
  min-height: 44px;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: #ffe7a0;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  outline: 2px solid #f2b233;
  outline-offset: -2px;
}

.compose .recorder .rec.on {
  background: #d0663f;
  color: #fff;
  outline-color: #b04a28;
  animation: rec-on 1.2s ease-in-out infinite;
}

@keyframes rec-on {
  50% { filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .recorder .rec.on { animation: none; }
}

.recorder audio {
  width: 100%;
  max-width: 320px;
}

.recorder .rec-time {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* on a desk */
.desk-thing .desk-drawing {
  display: block;
  max-width: 220px;
  margin: 2px 0 6px;
  padding: 6px;
  background: #fffdf6;
  box-shadow: 0 2px 6px rgba(40, 20, 10, 0.18);
  transform: rotate(-1.5deg);
}

.desk-thing .desk-drawing img {
  display: block;
  width: 100%;
  height: auto;
}

.desk-thing audio {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 4px 0 6px;
}

.desk-thing .voice-note {
  margin: 0;
  font-weight: 600;
}

/* on the wall: a drawing is on paper, not a print, so it's shown whole */
.note.photo.sketched .snap {
  background: #fffdf6;
  aspect-ratio: 4 / 3;
}

.note.photo.sketched .snap img {
  object-fit: contain;
}