:root {
  /* colour roles */
  --ink: #1a0d1f;
  --cream: #f3e4c8;
  --cream-dim: #d8c4a4;
  --muted: #c9b599;
  --mustard: #e9b44c;
  --mustard-soft: #f3cf7f;
  --needle: #ee6a3a;
  --cabinet: #7c2a1a;
  --plank: #24110c;

  /* the song's colours; js/field.js morphs these */
  --c0: #171033;
  --c1: #3a1753;
  --c2: #8e2c1c;
  --c3: #c8541a;
  --c4: #a96078;

  --display: 'Rozha One', 'Tiro Devanagari Hindi', Georgia, serif;
  --voice: 'Tiro Devanagari Hindi', Georgia, serif;
  --plain: 'Mukta', system-ui, sans-serif;

  /* one design pixel of the 1440 x 900 stage */
  --u: min(100vw / 1440, 100vh / 900);
  --win: max(200px, calc(var(--u) * 200));
  --sway: cubic-bezier(.3, .7, .2, 1);
}
@supports (height: 100dvh) {
  :root { --u: min(100vw / 1440, 100dvh / 900); }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(60% 70% at 20% 70%, var(--c2), transparent),
    radial-gradient(50% 60% at 62% 62%, var(--c3), transparent),
    radial-gradient(50% 50% at 85% 5%, var(--c4), transparent),
    var(--c0);
  color: var(--cream);
  font-family: var(--plain);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
svg { display: block; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); border-radius: 4px; }

.sr { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: fixed; inset: auto 0 0; margin: 0; padding: 16px; background: var(--ink); text-align: center; z-index: 20; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 1; transition: opacity 1.4s; }
.is-arriving #field { opacity: .25; }

.grain {
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-size: 220px 220px;
}

.tapri {
  position: relative; z-index: 1;
  height: 100vh; height: var(--vvh, 100dvh);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- the street ---------- */
.street { position: relative; flex: 1; min-height: 0; }
.scene { position: absolute; inset: 0; margin-inline: auto; width: min(100%, calc(var(--u) * 1560)); }

.sign {
  position: absolute; left: 50%; bottom: calc(var(--u) * 126);
  transform: translateX(-50%);
  margin: 0;
  font: 400 calc(var(--u) * 432) / 1 var(--display);
  letter-spacing: -.014em;
  white-space: nowrap;
  color: var(--cream);
  transition: color 1.1s;
  user-select: none;
}
.is-arriving .sign { color: #5b4a3e; }
.lights-out .sign { color: #6e5a48; }

.wires { position: absolute; left: 0; top: 0; width: 100%; height: 13%; overflow: visible; pointer-events: none; }
.wires path { stroke: var(--ink); stroke-width: 2; }
.crow { position: absolute; left: 40%; top: calc(8.1% - 26px); width: 40px; height: 28px; fill: var(--ink); pointer-events: none; transform-origin: 40% 90%; animation: crow 14s steps(1) infinite; }
@keyframes crow { 0%, 62%, 66%, 100% { transform: none; } 63%, 65% { transform: scaleX(-1); } }

.obj { display: block; position: relative; transition: transform .35s var(--sway); }
.obj svg { width: 100%; height: auto; overflow: visible; }
.ink, .ink * { fill: var(--ink); }
@media (hover: hover) {
  .obj:hover { transform: translateY(-3px); }
  .kettle:hover { transform: translateY(-2px) rotate(-1.5deg); }
}

/* bulb */
.bulb {
  position: absolute; z-index: 4;
  left: 62.5%; bottom: calc(var(--u) * 198);
  width: max(44px, calc(var(--u) * 56));
  padding-inline: 2px;
}
.bulb::before {
  content: ''; position: absolute; left: 50%; bottom: 100%;
  width: 2.5px; height: 100vh; margin-left: -1.25px;
  background: var(--ink);
}
.bulb .glow { fill: #ffe2a0; transition: fill .15s; }
.bulb .ink { fill: var(--ink); }
.is-arriving .bulb .glow, .lights-out .bulb .glow { fill: #5a4a34; }
.halo {
  position: absolute; z-index: 2; pointer-events: none;
  left: 62.5%; bottom: calc(var(--u) * 90);
  width: calc(var(--u) * 460); height: calc(var(--u) * 460);
  margin-left: calc(var(--u) * -202);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 92, .55), rgba(240, 150, 50, .16) 55%, transparent);
  mix-blend-mode: screen;
  transition: opacity .9s;
}
.is-arriving .halo, .lights-out .halo { opacity: 0; }
[data-music='playing'] .halo { animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.07); opacity: .82; } }
.flicker .bulb .glow, .flicker .halo { animation: flick .8s steps(1) both; }
@keyframes flick { 0% { opacity: 1; } 14% { opacity: .15; } 30% { opacity: 1; } 62% { opacity: .2; } 78%, 100% { opacity: 1; } }
.flicker-soft .bulb .glow, .flicker-soft .halo { animation: flickSoft .75s linear both; }
@keyframes flickSoft { 0% { opacity: 1; } 16% { opacity: .42; } 28% { opacity: .95; } 44% { opacity: .58; } 62%, 100% { opacity: 1; } }

/* the shelf: everything stands on one line */
.shelf {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end;
  gap: calc(var(--u) * 26);
  padding-inline: calc(var(--u) * 72);
}

/* radio */
.radio {
  position: relative; flex: none;
  padding: 12px 12px 0;
  background: var(--cabinet);
  border-radius: 14px 14px 5px 5px;
  box-shadow: inset 0 2px 0 rgba(255, 210, 160, .25), 0 -2px 30px rgba(20, 8, 30, .35);
}
.antenna { position: absolute; right: 10px; bottom: calc(100% - 4px); width: 100px; height: 90px; transform-origin: 4% 98%; }
.antenna svg { width: 100%; height: 100%; overflow: visible; }
.antenna line { stroke: var(--ink); stroke-width: 3; transition: stroke .3s; }
.antenna circle { fill: var(--ink); transition: fill .3s; }
.antenna.poked { animation: poke .85s var(--sway); }
@keyframes poke { 14% { transform: rotate(-16deg); } 34% { transform: rotate(11deg); } 54% { transform: rotate(-6deg); } 74% { transform: rotate(3deg); } }
[data-music='error'] .antenna line { stroke: var(--mustard); }
[data-music='error'] .antenna circle { fill: var(--mustard); }
[data-music='error'] .antenna:not(.poked) { animation: tease 3.2s ease-in-out infinite; }
@keyframes tease { 0%, 76%, 100% { transform: none; } 82% { transform: rotate(-5deg); } 90% { transform: rotate(4deg); } }
@media (hover: hover) { .antenna:hover { transform: rotate(-4deg); } }
.window { position: relative; width: var(--win); height: var(--win); background: #120a18; border-radius: 6px; overflow: hidden; }
.window #yt { position: absolute; inset: 0; }
.window iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-cover { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .5s; }
.asleep { background: radial-gradient(70% 60% at 28% 22%, #2c2436, #0b0710 62%); }
.asleep::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: #fff4ea; opacity: 0;
}
[data-tv='off'] .asleep { opacity: 1; pointer-events: auto; transition-duration: .18s; }
[data-tv='off'] .asleep::after { animation: tvOff .42s ease-in both; }
@keyframes tvOff { 0% { opacity: 1; transform: scaleX(1); } 70% { opacity: 1; transform: scaleX(.06); } 100% { opacity: 0; transform: scaleX(0); } }
.tv-knob { position: absolute; z-index: 3; right: 2px; bottom: -8px; width: 44px; height: 44px; display: grid; place-items: center; }
.tv-knob::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mustard); border: 2px solid var(--ink);
  transition: background-color .2s, transform .2s;
}
.tv-knob[aria-pressed='false']::before { background: #4a3d58; transform: rotate(90deg); }
@media (hover: hover) { .tv-knob:hover::before { transform: scale(1.15); } }
.static {
  display: grid; place-items: center;
  background: repeating-linear-gradient(0deg, #2a2038 0 2px, #4a3d58 2px 4px);
  background-size: 100% 8px;
}
.static span { display: none; padding: 2px 10px; background: var(--ink); color: var(--cream); font: 500 15px / 1.4 var(--plain); }
[data-music='error'] .static span, [data-signal='lost'] .static span { display: block; }
/* a lost signal sits above everything, and cuts in with no fade */
[data-signal='lost'] .static { opacity: 1; z-index: 3; transition: none; animation: snow .24s steps(3) infinite; }
@keyframes snow { to { background-position: 0 24px; } }
[data-music='error'] .static, [data-music='loading'] .static { opacity: 1; }
[data-music='error'] .window iframe { visibility: hidden; }
.grill { height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.grill i { width: 4px; height: 13px; background: var(--ink); border-radius: 1px; transform-origin: 50% 50%; }
[data-music='playing'] .grill i { animation: vu 1.25s ease-in-out infinite alternate; }
.grill i:nth-child(2n) { animation-delay: -.4s !important; animation-duration: .95s !important; }
.grill i:nth-child(3n) { animation-delay: -.75s !important; animation-duration: 1.6s !important; }
@keyframes vu { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }

/* charcha */
.charcha {
  flex: 0 1 auto; min-width: 0; align-self: flex-end;
  display: block; text-align: left;
  padding: 0 0 calc(var(--u) * 26);
  font-family: var(--voice);
  text-shadow: 0 0 22px rgba(18, 8, 28, .75), 0 1px 3px rgba(18, 8, 28, .55);
  transition: opacity .22s, transform .22s;
}
.charcha { position: relative; isolation: isolate; }
.charcha::before {
  content: ''; position: absolute; z-index: -1; inset: -14% -8% -8% -8%;
  background: radial-gradient(closest-side, rgba(18, 8, 28, .36), rgba(18, 8, 28, .22) 62%, transparent);
  pointer-events: none;
}
.charcha.swap { opacity: 0; transform: translateY(5px); }
.q, .a { display: block; }
.q { font-size: clamp(20px, calc(var(--u) * 36), 46px); line-height: 1.16; color: var(--cream); }
.a { font-size: clamp(24px, calc(var(--u) * 46), 58px); line-height: 1.12; font-style: italic; color: var(--mustard-soft); margin-top: .1em; }
.q:empty { display: none; }
.charcha.long .q { font-size: clamp(17px, calc(var(--u) * 27), 34px); }
.charcha.long .a { font-size: clamp(20px, calc(var(--u) * 33), 42px); }
.q, .a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding-bottom: .06em; }
.q:empty { display: none; }

/* props */
.props { flex: none; margin-left: auto; display: flex; align-items: flex-end; gap: calc(var(--u) * 22); }
.kettle-wrap, .glass-wrap { position: relative; }
.kettle { width: calc(var(--u) * 190); }
.ember { fill: #e8742a; opacity: .85; }
.handle { stroke: var(--ink); stroke-width: 9; }
.rim { stroke: #e8742a; stroke-width: 3; stroke-linecap: round; }
.lid { transform-box: fill-box; transform-origin: 50% 100%; }
.ringing .kettle { animation: ring 1.7s linear; transform-origin: 50% 96%; }
.ringing .lid { animation: lid 1.55s linear; }
/* boiling hard, then settling: the shake shrinks as the whistle fades */
@keyframes ring {
  4% { transform: rotate(-4deg); } 10% { transform: rotate(4deg) translateY(-3px); } 16% { transform: rotate(-3.6deg); }
  22% { transform: rotate(3.6deg) translateY(-3px); } 28% { transform: rotate(-3.2deg); } 34% { transform: rotate(3deg) translateY(-2px); }
  40% { transform: rotate(-2.8deg); } 46% { transform: rotate(2.6deg) translateY(-2px); } 52% { transform: rotate(-2.3deg); }
  58% { transform: rotate(2deg) translateY(-1px); } 66% { transform: rotate(-1.5deg); } 74% { transform: rotate(1.1deg); }
  84% { transform: rotate(-.6deg); } 100% { transform: none; }
}
/* the lid jumps on its rim and lands: each landing is a clank in sound.js */
@keyframes lid {
  0% { transform: none; }
  5% { transform: translateY(-17px) rotate(-7deg); } 10% { transform: none; }
  15% { transform: translateY(-20px) rotate(6deg); } 20% { transform: none; }
  25% { transform: translateY(-16px) rotate(-6deg); } 30% { transform: none; }
  35% { transform: translateY(-18px) rotate(5deg); } 40% { transform: none; }
  46% { transform: translateY(-13px) rotate(-4deg); } 52% { transform: none; }
  58% { transform: translateY(-10px) rotate(3deg); } 64% { transform: none; }
  71% { transform: translateY(-6px) rotate(-2deg); } 78% { transform: none; }
  85% { transform: translateY(-3px); } 92%, 100% { transform: none; }
}
.shiver .kettle { animation: shiver .6s linear; }
@keyframes shiver { 20%, 60% { transform: translateX(-1.5px); } 40%, 80% { transform: translateX(1.5px); } }

.steam { position: absolute; left: 4%; bottom: 60%; width: 30%; height: 150%; pointer-events: none; }
.steam i {
  position: absolute; bottom: 0; left: 25%;
  width: 46%; height: 42%;
  border-radius: 50%;
  background: #f5d2c8;
  filter: blur(calc(var(--u) * 13));
  opacity: 0;
  animation: steam 6.4s ease-out infinite;
}
.steam i:nth-child(2) { animation-delay: -2.1s; left: 2%; }
.steam i:nth-child(3) { animation-delay: -4.2s; left: 44%; }
@keyframes steam {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  18% { opacity: .62; }
  100% { transform: translate(-14%, -180%) scale(1.45); opacity: 0; }
}
.steam i.more { display: none; }
.steam-lid { left: 34%; bottom: 72%; width: 34%; }
.steam-lid i { animation: none; }
.ringing .steam i { display: block; width: 110%; height: 52%; left: -10%; background: #fff4ea; animation: gush 1.25s ease-out infinite; }
.ringing .steam i:nth-child(2) { animation-delay: -.25s; }
.ringing .steam i:nth-child(3) { animation-delay: -.5s; }
.ringing .steam i:nth-child(2) { left: -30%; }
.ringing .steam i:nth-child(3) { left: 8%; }
.ringing .steam i:nth-child(4) { animation-delay: -.75s; left: 20%; }
.ringing .steam i:nth-child(5) { animation-delay: -1s; left: -20%; }
@keyframes gush {
  0% { transform: translate(0, 0) scale(.65); opacity: 0; }
  14% { opacity: .95; }
  100% { transform: translate(-10%, -260%) scale(2.1); opacity: 0; }
}
.lights-out .steam i { background: #cdb8c6; }

.burst {
  position: absolute; z-index: 5; pointer-events: none;
  left: 50%; bottom: 74%;
  font: 400 clamp(38px, calc(var(--u) * 86), 110px) / 1 var(--display);
  color: var(--mustard);
  text-shadow: 0 2px 10px rgba(18, 8, 28, .7);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) rotate(-6deg) scale(.6);
}
.burst.on { animation: burst .95s var(--sway) both; }
@keyframes burst {
  0% { opacity: 0; transform: translateX(-50%) rotate(-11deg) scale(.5); }
  16% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1.06); }
  70% { opacity: 1; transform: translateX(-50%) rotate(-5deg) translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) rotate(-3deg) translateY(-22px) scale(1); }
}
#whistle { left: 2%; bottom: 74%; font-size: clamp(26px, calc(var(--u) * 50), 66px); color: var(--mustard-soft); }
#whistle.on { animation-duration: 1.45s; }
.burst-gaya { font-size: clamp(30px, calc(var(--u) * 58), 74px); color: var(--cream); bottom: 104%; }

.glass-wrap { width: calc(var(--u) * 74); }
.glass { width: 92%; margin-inline: auto; z-index: 1; }
.paper { position: absolute; left: -14%; bottom: -3%; width: 150%; height: auto; }
.steam-glass { display: none; left: 22%; bottom: 80%; width: 56%; height: 110%; }
.chai-pulse .steam-glass { display: block; }
.chai-pulse .steam-glass i { width: 80%; height: 46%; left: 10%; animation-duration: 1.5s; filter: blur(7px); }
.chai-pulse .glass { animation: sip .6s var(--sway); }
@keyframes sip { 30% { transform: translateY(-5px) rotate(-3deg); } 65% { transform: translateY(0) rotate(2deg); } }

.biscuit {
  position: absolute; z-index: 2;
  left: 50%; bottom: 96%;
  width: max(44px, calc(var(--u) * 58)); margin-left: calc(max(44px, calc(var(--u) * 58)) / -2);
  transition: transform .5s var(--sway), opacity .3s;
  animation: biscuitIn .55s var(--sway);
}
.biscuit[hidden] { display: none; }
@keyframes biscuitIn { from { transform: translate(90%, 30%) rotate(30deg); opacity: 0; } }
.biscuit .wet { fill: #6e3f12; opacity: 0; transition: opacity .3s; }
.biscuit.wet .wet { opacity: .85; }
.biscuit.dunk { transform: translateY(68%); }
.biscuit.drop { transform: translateY(170%) rotate(40deg); opacity: 0; transition: transform .55s cubic-bezier(.5, 0, .9, .5), opacity .55s; animation: none; }

.jar { width: calc(var(--u) * 108); }
.jar-lid { fill: var(--ink); transform-box: fill-box; transform-origin: 90% 100%; transition: transform .3s var(--sway); }
.jar-body { fill: rgba(243, 228, 200, .15); stroke: var(--ink); stroke-width: 4; }
.jar.open .jar-lid { transform: rotate(14deg) translateY(-6px); }

.chair { width: calc(var(--u) * 118); transform-origin: 50% 100%; }
.chair.sat { animation: sit .7s var(--sway); }
@keyframes sit { 30% { transform: scaleY(.96) scaleX(1.02); } 60% { transform: scaleY(1.01); } }

/* ---------- the counter ---------- */
.counter {
  position: relative; z-index: 4; flex: none;
  background-color: color-mix(in srgb, var(--plank) 90%, var(--c2));
  border-top: 3px solid #a8581a;
  box-shadow: 0 -10px 40px rgba(10, 4, 16, .45);
  transition: background-color 3.5s;
}
.counter-in {
  width: min(100%, calc(var(--u) * 1560));
  margin-inline: auto;
  min-height: clamp(186px, calc(var(--u) * 250), 330px);
  padding: calc(var(--u) * 24) calc(var(--u) * 72) 8px;
  display: grid;
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 3fr) minmax(0, 3.6fr);
  grid-template-rows: 1fr auto;
  column-gap: calc(var(--u) * 44);
}

/* player */
.player { display: flex; align-items: center; gap: calc(var(--u) * 22); min-width: 0; }
.knobs { flex: none; display: flex; align-items: center; gap: clamp(6px, calc(var(--u) * 10), 14px); }
.knob {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--cream-dim);
  transition: transform .2s var(--sway), background-color .2s, color .2s;
}
.knob svg { width: 15px; height: 15px; fill: currentColor; }
.knob-play {
  width: clamp(58px, calc(var(--u) * 72), 84px); height: clamp(58px, calc(var(--u) * 72), 84px);
  border: 0;
  background: var(--mustard); color: var(--plank);
}
.knob-play svg { width: 24px; height: 24px; }
.knob-play .i-pause, .knob-play .i-retry { display: none; }
[data-music='playing'] .i-play, [data-music='error'] .i-play { display: none; }
[data-music='playing'] .i-pause { display: block; }
[data-music='error'] .i-retry { display: block; }
.knob:active { transform: scale(.93); }
[data-music='changing'] .knob-play svg, [data-music='loading'] .knob-play svg { animation: wait 1.2s ease-in-out infinite; }
@keyframes wait { 50% { opacity: .35; } }
@media (hover: hover) { .knob:not(.knob-play):hover { background: var(--cream); color: var(--plank); } }

.tuner { flex: 1; min-width: 0; }
.label { font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); }
.title {
  font-family: var(--voice);
  font-size: clamp(19px, calc(var(--u) * 27), 34px); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--cream);
}
[data-music='error'] .title { white-space: normal; font-style: italic; color: var(--mustard-soft); font-size: clamp(17px, calc(var(--u) * 22), 28px); line-height: 1.15; }
.dial-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.time { flex: none; min-width: 2.6em; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dial {
  --p: 0%;
  flex: 1; min-width: 0; height: 28px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background:
    repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px 8px) left center / var(--p) 12px no-repeat,
    repeating-linear-gradient(90deg, #9b8570 0 1px, transparent 1px 8px) center / 100% 8px no-repeat;
  cursor: pointer; touch-action: none;
}
.dial:disabled { cursor: default; opacity: .75; }
.dial::-webkit-slider-thumb { -webkit-appearance: none; width: 5px; height: 26px; background: var(--needle); border-radius: 2px; }
.dial::-moz-range-thumb { width: 5px; height: 26px; background: var(--needle); border: 0; border-radius: 2px; }
.dial::-moz-range-track { background: transparent; }

[data-music='error'] .dial, [data-music='error'] .time { display: none; }

/* chat */
.chat { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.chat-label { font: italic clamp(18px, calc(var(--u) * 25), 30px) / 1.2 var(--voice); color: var(--cream); }
.chat-row { display: flex; align-items: center; border-bottom: 2px solid var(--cream-dim); transition: border-color .2s; }
.chat-row:focus-within { border-color: var(--mustard); }
#say {
  flex: 1; min-width: 0; height: 44px;
  background: none; border: 0;
  font: 18px / 1 var(--plain);
  color: var(--cream);
}
#say::placeholder { color: transparent; }
#say:focus-visible { outline: none; box-shadow: none; }
.send { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--cream-dim); }
.send svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) { .send:hover { color: var(--mustard); } }

/* the ask */
.ask { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(8px, calc(var(--u) * 14), 18px); min-width: 0; }
.slogan { margin: 0; font: 400 clamp(19px, calc(var(--u) * 30), 38px) / 1.13 var(--display); color: var(--mustard); }
.painted {
  min-height: 46px; padding: 2px 22px;
  background: var(--mustard); color: var(--plank);
  font: 400 clamp(18px, calc(var(--u) * 21), 26px) / 1 var(--display);
  border-radius: 3px 14px 4px 12px / 12px 3px 14px 4px;
  transition: transform .25s var(--sway), background-color .2s;
}
.painted:active { transform: scale(.97); }
@media (hover: hover) { .painted:hover { transform: rotate(-1.2deg) scale(1.03); background: var(--mustard-soft); } }

.credit {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--muted);
  min-height: 30px;
}
.what { width: 44px; height: 30px; font-size: 17px; color: var(--muted); text-align: right; }
@media (hover: hover) { .what:hover { color: var(--mustard); } }
@media (hover: none) { .what { display: none; } }

/* ---------- keys, off to one side: only for people who have a keyboard ---------- */
.keys { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) and (min-aspect-ratio: 1/1) and (min-height: 481px) {
  .keys {
    display: flex; flex-direction: column; gap: 5px;
    position: absolute; z-index: 3; right: 14px; top: 50px;
    margin: 0; padding: 0; list-style: none;
    font: 500 12.5px / 18px var(--plain);
    color: var(--cream);
    text-shadow: 0 0 8px rgba(18, 8, 28, .9), 0 1px 2px rgba(18, 8, 28, .8);
    pointer-events: none;
  }
  .keys kbd {
    display: inline-block; min-width: 18px; padding: 0 4px; margin-right: 2px;
    font: inherit; text-align: center; text-shadow: none;
    background: rgba(26, 13, 31, .62); border-radius: 3px;
  }
}

/* ---------- arrival ---------- */
.is-arriving .shelf, .is-arriving .counter { opacity: 0; }
.shelf, .counter { transition: opacity .8s .15s; }

/* ---------- sheets ---------- */
.sheet {
  position: fixed; inset: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; padding: 0;
  color: var(--cream);
  overflow-y: auto;
  background: transparent;
}
.sheet::backdrop { background: transparent; }
.sheet[open] { animation: sheet .35s ease-out; }
@keyframes sheet { from { opacity: 0; } }
.rates { background: rgba(16, 11, 42, .96); }
.sheet-in {
  min-height: 100%;
  width: min(100%, 980px); margin-inline: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 5vh, 44px);
}
.leave[hidden] { display: none; }
.leave { align-self: flex-start; min-height: 44px; font: italic 22px / 1 var(--voice); color: var(--cream-dim); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.leave:hover { color: var(--cream); }

.rates-head { margin: 0; font: italic clamp(34px, 6vw, 72px) / 1.08 var(--voice); color: var(--mustard-soft); }
.rate-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.rate-list div { display: flex; align-items: baseline; gap: 14px; }
.rate-list dt { flex: none; min-width: 84px; }
.rate-list dd { margin: 0; font-size: 19px; }
kbd { display: inline-block; min-width: 1.8em; padding: 1px 7px; font: 500 15px / 1.5 var(--plain); text-align: center; border: 1.5px solid var(--cream-dim); border-radius: 4px; }
.rates-note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--cream-dim); }

/* ---------- own composition: phones and portrait tablets ---------- */
@media (max-width: 820px) and (orientation: portrait), (max-aspect-ratio: 1/1) {
  :root { --win: max(200px, min(56vw, 30vh)); --sm: 100vw / 390; }
  @supports (height: 100dvh) { :root { --win: max(200px, min(56vw, 30dvh)); } }

  .street { display: flex; }
  .scene { position: relative; inset: auto; flex: 1; width: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); min-height: 0; }

  .sign {
    position: static; transform: none; align-self: center;
    margin-top: 10px; padding-inline: 2vw;
    font-size: 30vw; line-height: .84;
  }
  .wires { height: 12vw; top: env(safe-area-inset-top); }
  .crow { width: 24px; height: 17px; left: 14%; top: calc(env(safe-area-inset-top) + 5.4vw - 14px); }
  .bulb, .halo { left: auto; bottom: auto; }
  .bulb { right: 8vw; top: calc(env(safe-area-inset-top) + 25vw); width: 44px; }
  .bulb svg { width: 30px; margin-inline: auto; }
  .halo { right: calc(8vw - 70px); top: calc(env(safe-area-inset-top) + 25vw - 46px); width: 184px; height: 184px; margin: 0; }

  .shelf {
    position: relative; left: auto; right: auto; bottom: auto;
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 8px;
    padding-inline: 8px;
  }
  .charcha { grid-column: 1 / -1; align-self: center; justify-self: start; max-width: 100%; padding: 4px 10px 6px; }
  .q { font-size: clamp(17px, 5.2vw, 30px); -webkit-line-clamp: 2; }
  .a { font-size: clamp(21px, 6.6vw, 38px); -webkit-line-clamp: 2; }
  .charcha.long .q { font-size: clamp(15px, 4.4vw, 26px); }
  .charcha.long .a { font-size: clamp(18px, 5.2vw, 30px); }

  .radio { grid-row: 2; padding: 8px 8px 0; }
  .grill { height: 20px; }
  .antenna { width: 64px; height: 44px; }

  /* no room for one long line: the jar and glass get a little wooden table */
  .props {
    grid-row: 2; align-self: end;
    margin-left: 0;
    display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto;
    align-items: end; gap: 0 2px;
  }
  .props::before {
    content: ''; grid-column: 1 / -1; grid-row: 2;
    align-self: stretch;
    border: solid var(--ink); border-width: 6px 4px 0;
    border-radius: 2px 2px 0 0;
  }
  .kettle-wrap, .kettle, .chair { width: 100%; }
  .kettle-wrap { grid-column: 1; grid-row: 2; max-width: 170px; justify-self: center; padding: 16px 6px 0; }
  .chair { grid-column: 2; grid-row: 2; max-width: 100px; justify-self: center; padding: 16px 8px 0 2px; }
  .glass-wrap { grid-column: 2; grid-row: 1; width: auto; justify-self: center; }
  .jar { grid-column: 1; grid-row: 1; width: 100%; max-width: 120px; justify-self: center; }
  .glass { width: 74%; max-width: 54px; }
  .paper { width: 110%; left: -5%; }
  .burst { font-size: clamp(34px, 11vw, 64px); }
  #whistle { left: 2%; bottom: 74%; font-size: clamp(26px, calc(var(--u) * 50), 66px); color: var(--mustard-soft); }
#whistle.on { animation-duration: 1.45s; }
.burst-gaya { font-size: 34px; }
  .steam i { filter: blur(8px); }

  .counter-in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    gap: 6px 10px;
    align-items: center;
    min-height: 0;
    padding: 8px 16px max(6px, env(safe-area-inset-bottom));
  }
  .player, .ask { display: contents; }
  .tuner { grid-column: 1 / -1; grid-row: 1; }
  .label { font-size: 13px; }
  .title { font-size: clamp(19px, 5.6vw, 28px); }
  [data-music='error'] .title { font-size: 18px; }
  .knobs { grid-column: 1; grid-row: 2; gap: 6px; }
  .knob-play { width: 54px; height: 54px; }
  .painted { grid-column: 2; grid-row: 2; justify-self: end; padding-inline: 12px; font-size: clamp(16px, 4.6vw, 22px); white-space: nowrap; }
  .chat { grid-column: 1 / -1; grid-row: 3; }
  .chat-label { display: none; }
  #say { height: 44px; font: italic 18px / 1 var(--voice); }
  #say::placeholder { color: var(--cream-dim); opacity: 1; }
  .slogan { display: none; grid-column: 1 / -1; grid-row: 4; font-size: clamp(16px, 4.6vw, 24px); }
  .credit { grid-column: 1 / -1; grid-row: 5; min-height: 20px; font-size: 13px; white-space: nowrap; }
  .what { display: none; }

  .sheet-in { padding-inline: 20px; }
  .tv-knob { bottom: -12px; }
  .rate-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* small phones: every pixel of height is spoken for */
@media (max-width: 820px) and (orientation: portrait) and (max-height: 620px) {
  .sign { font-size: 26vw; margin-top: 6px; }
  .bulb { top: calc(env(safe-area-inset-top) + 17vw); }
  .bulb svg { width: 24px; }
  .label { display: none; }
  .grill { height: 12px; }
  .grill i { height: 8px; }
  .antenna { width: 46px; height: 30px; right: 8px; }
  .charcha { padding: 0 10px 2px; }
  .q, .charcha.long .q { font-size: 15px; -webkit-line-clamp: 1; }
  .a, .charcha.long .a { font-size: 17px; -webkit-line-clamp: 1; }
  .counter-in { padding-top: 6px; gap: 2px 8px; }
  .credit { font-size: 12.5px; }
  .knobs { gap: 4px; }
  .knob-play { width: 50px; height: 50px; }
  .painted { padding-inline: 8px; font-size: 15px; white-space: nowrap; }
  .dial { height: 24px; }
}
/* the painted line comes back when a phone has height to spare */
@media (max-width: 820px) and (orientation: portrait) and (min-height: 760px), (max-aspect-ratio: 1/1) and (min-height: 760px) {
  .slogan { display: block; }
}

/* keyboard is up on a phone: the conversation is all that matters */
.kbd .sign, .kbd .wires, .kbd .crow, .kbd .bulb, .kbd .halo, .kbd .props, .kbd .player, .kbd .ask, .kbd .credit, .kbd .antenna, .kbd .tv-knob { display: none !important; }
.kbd .chat { order: 0; }

/* ---------- phones held sideways ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --win: 200px; --u: 100vh / 620; }
  @supports (height: 100dvh) { :root { --u: 100dvh / 620; } }
  .tapri { flex-direction: row; }
  .street { flex: 0 0 auto; width: 54%; }
  .sign { left: max(12px, env(safe-area-inset-left)); top: 2px; bottom: auto; transform: none; font-size: 10vw; line-height: .9; }
  .wires, .crow { display: none; }
  .bulb { left: auto; right: 12px; top: 0; bottom: auto; width: 44px; }
  .bulb svg { width: 24px; margin-inline: auto; }
  .halo { left: auto; right: -40px; top: -50px; bottom: auto; width: 150px; height: 150px; margin: 0; }
  .shelf { z-index: auto; padding-inline: max(8px, env(safe-area-inset-left)) 8px; gap: 8px; justify-content: flex-start; }
  .radio { padding: 6px 6px 0; }
  .grill { height: 12px; }
  .grill i { height: 8px; }
  .antenna { width: 62px; height: 46px; }
  .charcha {
    position: fixed; z-index: 6;
    left: calc(54% + 14px); right: 10px; top: 6px;
    padding: 0;
  }
  .q { font-size: 15px; -webkit-line-clamp: 1; }
  .a, .charcha.long .a { font-size: 19px; -webkit-line-clamp: 1; }
  .charcha.long .q { font-size: 14px; }
  .props { flex: 1; min-width: 0; margin-left: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; align-items: end; gap: 0 4px; }
  .props::before {
    content: ''; grid-column: 1 / -1; grid-row: 2; align-self: stretch;
    border: solid var(--ink); border-width: 5px 3px 0; border-radius: 2px 2px 0 0;
  }
  .kettle-wrap { grid-column: 1; grid-row: 2; padding: 12px 4px 0; width: 100%; max-width: 100px; }
  .kettle { width: 100%; }
  .glass-wrap { grid-column: 2; grid-row: 1; width: auto; justify-self: center; }
  .glass { width: 38px; }
  .paper { width: 64px; left: -13px; }
  .chair { grid-column: 2; grid-row: 2; padding: 12px 4px 0; width: 100%; max-width: 54px; justify-self: center; }
  .jar { grid-column: 1; grid-row: 1; width: 100%; max-width: 62px; justify-self: center; }
  .counter { flex: 1; min-width: 0; border-top: 0; border-left: 3px solid #a8581a; }
  .counter-in {
    width: 100%; height: 100%; min-height: 0;
    padding: 58px max(12px, env(safe-area-inset-right)) 2px 14px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2px;
  }
  .player { gap: 8px; }
  .knob-play { width: 48px; height: 48px; }
  .knobs { gap: 2px; }
  .knob { border-width: 1.5px; }
  .label { display: none; }
  .title { font-size: 16px; }
  [data-music='error'] .title { font-size: 14px; }
  .time { display: none; }
  .chat-label, .slogan, .credit span { display: none; }
  #say::placeholder { color: var(--cream-dim); opacity: 1; }
  #say { font-size: 16px; }
  .credit { display: none; }
  .ask { align-items: flex-end; }
  .painted { min-height: 44px; font-size: 16px; padding-inline: 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .steam-lid { display: none; }
  .ringing .steam i { opacity: .5; }
  .steam i { opacity: .26; animation: none !important; }
  .steam i:nth-child(1) { transform: translateY(-30%); }
  .steam i:nth-child(2) { transform: translate(-6%, -90%) scale(1.2); opacity: .18; }
  .steam i:nth-child(3) { transform: translate(-10%, -150%) scale(1.4); opacity: .1; }
  .burst.on { opacity: 1; transform: translateX(-50%) rotate(-5deg); }
}