:root {
  --ink: #2b2233; --paper: #fff7ee; --tang: #ff7a1a; --tang2: #ffb36b; --teal: #17b8a6; --red: #e5262b; --green: #2fb673; --yellow: #ffd400;
  --u: clamp(13px, 3.4vh, 17px);
  /* the notch, rounded corners and home bar of a phone held sideways */
  --st: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2036; color: var(--ink); font-size: var(--u);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.chip { display: inline-flex; align-items: center; gap: .4em; background: rgba(43, 34, 51, .86); color: #fff; padding: .35em .75em; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.chip.btn { min-width: 40px; min-height: 40px; justify-content: center; }
#topbar { z-index: 3; position: absolute; top: calc(.5em + var(--st)); left: calc(.6em + var(--sl)); right: calc(.6em + var(--sr)); display: flex; align-items: flex-start; justify-content: space-between; gap: .5em; pointer-events: none; }
#stats, #right { display: flex; flex: none; gap: .35em; align-items: flex-start; pointer-events: auto; }
#stats .chip { min-height: 2.1em; }
#right { justify-content: flex-end; }
#goal { background: var(--yellow); color: var(--ink); max-width: 44vw; min-width: 0; flex: 0 1 auto; white-space: normal; text-align: center; box-shadow: 0 .2em 0 rgba(0, 0, 0, .25); }
#goal.off { visibility: hidden; }
#goal { position: relative; overflow: hidden; }
#goal-bar { position: absolute; left: 0; bottom: 0; height: .28em; background: var(--red); border-radius: 0 99px 99px 0; }
.bar { width: 5.5em; height: .7em; background: rgba(255, 255, 255, .25); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 99px; transition: width .25s, background .25s; }
#viet { flex-direction: column; align-items: stretch; gap: .15em; border-radius: .9em; font-size: .82em; padding: .3em .7em .4em; }
#viet .bar { width: 100%; min-width: 8.5em; }
#viet .bar > i { background: var(--tang2); }
#viet.hot { background: var(--red); animation: pulse .5s infinite alternate; }
#viet.hot .bar > i { background: #fff; }
#btn-mic.on { background: var(--green); box-shadow: 0 0 0 .22em rgba(47, 182, 115, .4); } #btn-mic.wait { background: #8a8494; } #btn-mic.off { background: #6b6475; }
@keyframes pulse { to { transform: scale(1.06); } }

#cust { z-index: 3; position: absolute; left: calc(.6em + var(--sl)); top: calc(3.6em + var(--st)); width: min(17em, 36vw); background: rgba(255, 247, 238, .95); border-radius: 1em; padding: .6em .75em; box-shadow: 0 .3em 0 rgba(43, 34, 51, .25); font-size: .92em; }
#cust-name { font-weight: 800; font-size: 1.1em; }
#cust-trait { font-size: .9em; color: #7a4a2b; min-height: 1.1em; }
#cust-trait b { background: #ffe1c2; padding: .05em .45em; border-radius: .5em; }
.meter { display: flex; align-items: center; gap: .5em; margin-top: .25em; }
.meter label { width: 4.4em; font-size: .82em; font-weight: 700; color: #6b6475; }
.meter .bar { flex: 1; background: #e9dfd3; height: .6em; }
#bar-pat > i { background: var(--tang); }
#cust-order { margin-top: .4em; font-weight: 700; }
#cust-order:empty, #cust-steps:empty, #chips:empty { display: none; }
#cust-steps { margin-top: .35em; display: flex; gap: .3em; flex-wrap: wrap; font-size: .85em; }
#cust-steps span { padding: .1em .5em; border-radius: .6em; background: #e9dfd3; color: #6b6475; font-weight: 700; }
#cust-steps span.now { background: var(--yellow); color: var(--ink); }
#cust-steps span.done { background: #c9efd9; color: #1d7a4c; text-decoration: line-through; }
#chips { margin-top: .45em; display: flex; flex-direction: column; gap: .3em; }
#chips button { background: var(--teal); color: #fff; border-radius: .7em; padding: .35em .6em; font-weight: 700; text-align: left; font-size: .9em; min-height: 36px; }
#receipt { margin-top: .5em; background: #fff; border: 2px dashed #c9b9a6; border-radius: .5em; padding: .4em .6em; font-family: ui-monospace, Menlo, monospace; font-size: .88em; }
#receipt div { display: flex; justify-content: space-between; gap: 1em; }
#receipt .tot { border-top: 2px solid var(--ink); margin-top: .25em; padding-top: .2em; font-weight: 800; }

#lan { z-index: 4; position: absolute; right: calc(.6em + var(--sr)); top: calc(3.7em + var(--st)); display: flex; align-items: flex-start; gap: .5em; max-width: min(24em, 44vw); }
#lan-bubble { background: #fff; border-radius: 1em 1em .2em 1em; padding: .5em .8em; box-shadow: 0 .3em 0 rgba(43, 34, 51, .25); font-weight: 600; line-height: 1.3; }
#lan-bubble b { display: block; color: #d6336c; font-size: .82em; }
#lan-face { width: 4.6em; height: 4.6em; flex: none; border-radius: 50%; overflow: hidden; background: #f7b2d0; border: .25em solid #fff; box-shadow: 0 .3em 0 rgba(43, 34, 51, .25); display: grid; place-items: center; font-size: 1em; }
#lan-face img { width: 100%; height: 100%; object-fit: cover; }
#lan-face span { font-size: 1.1em; font-weight: 900; color: #d6336c; }
#lan.angry #lan-bubble { background: #ffe0dc; color: #8f1118; font-weight: 800; animation: shake .12s infinite; }
#lan.angry #lan-face { border-color: var(--red); animation: shake .1s infinite; }
#lan.vi #lan-bubble { background: #e7f8f5; font-style: italic; }
@keyframes shake { 0% { transform: translate(1px, -1px) rotate(-1deg); } 50% { transform: translate(-2px, 1px) rotate(1.5deg); } 100% { transform: translate(1px, 1px) rotate(-.5deg); } }

.bubble { position: absolute; transform: translate(-50%, -100%); background: #fff; border-radius: 1em; padding: .45em .8em; max-width: min(19em, 46vw); font-weight: 700; line-height: 1.25; box-shadow: 0 .25em 0 rgba(43, 34, 51, .28); text-align: center; pointer-events: none; z-index: 2; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -.5em; width: 1em; height: 1em; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: .15em; z-index: -1; }
.bubble.angry { background: #ffe0dc; color: #8f1118; }
.bubble.fixed::after { display: none; }
.bubble.robber { background: #24222a; color: #fff; }

#toasts { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; z-index: 5; }
.toast { background: var(--ink); color: #fff; font-weight: 800; padding: .3em .9em; border-radius: 99px; animation: rise 1.9s forwards; white-space: nowrap; }
.toast.good { background: var(--green); } .toast.bad { background: var(--red); } .toast.big { font-size: 1.5em; }
@keyframes rise { 0% { opacity: 0; transform: translateY(.8em) scale(.9); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1.6em); } }

#rant { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; z-index: 1; }
#rant-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; background: linear-gradient(rgba(229, 38, 43, .42), rgba(229, 38, 43, .04)); color: rgba(255, 255, 255, .5); font-weight: 900; font-size: 2.2em; line-height: 1.05; letter-spacing: .08em; word-break: break-all; text-shadow: 0 .06em 0 #8f1118; transition: height .3s; padding: 0 .3em; }

#dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: .7em; padding: .7em calc(.7em + var(--sr)) calc(.7em + var(--sb)) calc(.7em + var(--sl)); pointer-events: none !important; }
#dock > * { pointer-events: none; }
#bottom { flex: 1 1 0; min-width: 0; max-width: 44em; margin: 0 auto; display: flex; flex-direction: column; gap: .5em; align-items: stretch; }
#bottom > *, #side > *, #joy { pointer-events: auto; }
#side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .5em; }
#prompt { background: rgba(255, 247, 238, .97); border-radius: 1.1em; padding: .6em .9em .5em; box-shadow: 0 .35em 0 rgba(43, 34, 51, .3); text-align: center; border: .2em solid var(--tang); }
#prompt.listening { border-color: var(--teal); }
#prompt.pick { border-color: var(--yellow); }
#p-head { display: flex; align-items: center; justify-content: center; gap: .6em; }
#p-task { font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tang); }
#p-status { font-size: .78em; font-weight: 800; padding: .1em .7em; border-radius: 99px; }
#p-status:empty { display: none; }
#p-status.listen { background: #c9efd9; color: #0f7a45; animation: pulse .6s infinite alternate; }
#p-status.wait { background: #e9dfd3; color: #6b6475; }
#prompt { border-color: #c9b9a6; }
#p-hint { font-size: 1.35em; font-weight: 800; margin: .1em 0 .15em; line-height: 1.25; }
#p-hint:empty, #p-heard:empty { display: none; }
#p-timer { height: .45em; background: #eadfd2; border-radius: 99px; overflow: hidden; margin: -.1em 0 .35em; }
#p-timer > i { display: block; height: 100%; width: 100%; background: var(--teal); border-radius: 99px; }
#p-timer.low > i { background: var(--red); }
#p-hint .w { display: inline-block; padding: 0 .16em; margin: 0 .02em; border-radius: .35em; transition: background .15s, color .15s; }
#p-hint .w.ok { background: #c9efd9; color: #0f7a45; }
#p-heard .h { font-style: normal; font-weight: 700; padding: 0 .1em; }
#p-heard .h.ok { color: #0f7a45; }
#p-heard .h.bad { color: var(--red); text-decoration: line-through; }
#prompt.done { border-color: var(--green); background: #e9f9ef; }
#prompt.done #p-task::after { content: '  ✓'; color: #0f7a45; }
#p-hint .mic { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-right: .3em; animation: pulse .6s infinite alternate; }
#p-heard { font-size: .88em; color: #6b6475; font-style: italic; }
#p-heard.bad { color: var(--red); } #p-heard.good { color: var(--green); }
#p-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: .5em; margin-top: .45em; }
#p-choices:empty { display: none; }
#p-choices.grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
#p-choices button { background: #fff; border: .16em solid var(--ink); border-radius: .9em; padding: .6em .8em; font-weight: 800; font-size: 1.02em; line-height: 1.2; min-height: 3em; box-shadow: 0 .25em 0 var(--ink); transition: background .12s; }
@media (hover: hover) { #p-choices button:hover { background: #fff0dc; } }
#p-choices button:active { transform: translateY(.15em); box-shadow: 0 .05em 0 var(--ink); }
#p-choices button.no { background: #ffe0dc; animation: shake .12s 3; }
#p-choices.grid button { min-width: 5.2em; display: flex; flex-direction: column; align-items: center; gap: .2em; }
#p-choices .sw { width: 2.2em; height: 2.2em; border-radius: 50%; border: .14em solid var(--ink); }
#p-choices svg { width: 2.4em; height: 2.4em; }
.link { background: none; color: #6b6475; text-decoration: underline; font-size: .9em; padding: .45em 1em; min-height: 32px; }

#charge { position: relative; height: 1.9em; background: #fff; border: .2em solid var(--ink); border-radius: 99px; overflow: hidden; box-shadow: 0 .3em 0 rgba(43, 34, 51, .3); }
#charge-zone { position: absolute; top: 0; bottom: 0; background: var(--green); opacity: .85; }
#charge-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(90deg, #ffd9b3, var(--tang)); mix-blend-mode: multiply; }
#charge-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: .85em; }
#charge.combo { border-color: var(--red); box-shadow: 0 0 0 .2em var(--yellow), 0 .3em 0 rgba(43, 34, 51, .3); }

#joy { position: relative; flex: none; margin: 0 .4em .4em .4em; width: 7.5em; height: 7.5em; border-radius: 50%; background: rgba(255, 255, 255, .22); border: .2em solid rgba(255, 255, 255, .5); display: none; touch-action: none; }
#joy > i { position: absolute; left: 50%; top: 50%; width: 3.2em; height: 3.2em; margin: -1.6em; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 .2em 0 rgba(0, 0, 0, .25); }
.touch #joy { display: block; }
#tools { display: grid; grid-template-columns: repeat(3, auto); gap: .4em; }
#tools.off { display: none; }
#tools.one { display: block; }
#tools.one button:not(.want) { display: none; }
#tools.one button { width: 4.8em; height: 4.8em; }
#tools button { position: relative; width: 4em; height: 4em; border-radius: 1.1em; background: rgba(255, 247, 238, .95); box-shadow: 0 .3em 0 rgba(43, 34, 51, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: none; }
#tools button small { font-size: .68em; font-weight: 800; margin-top: .1em; }
.ic { width: 2em; height: 2em; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mi { width: 1.15em; height: 1.15em; flex: none; }
#tools button b { position: absolute; left: .35em; top: .25em; font-size: .7em; color: #9b8f84; }
#tools button.down { transform: translateY(.2em); box-shadow: 0 .1em 0 rgba(43, 34, 51, .35); background: var(--tang2); }
#tools button.want { background: var(--yellow); animation: pulse .45s infinite alternate; }
#tools button.dim { opacity: .45; }

#screen { position: fixed; inset: 0; background: rgba(42, 32, 54, .78); display: grid; place-items: center; z-index: 20; padding: calc(.6em + var(--st)) calc(1em + var(--sr)) calc(.6em + var(--sb)) calc(1em + var(--sl)); overflow: auto; }
#screen.art { background-size: cover; background-position: center; }
.card { background: var(--paper); border-radius: 1.4em; padding: 1.1em 1.4em 1.2em; width: min(36em, 94vw); max-height: 94vh; max-height: calc(100dvh - 1.2em - var(--st) - var(--sb)); overflow: auto; box-shadow: 0 .5em 0 rgba(0, 0, 0, .3); text-align: center; touch-action: pan-y; }
.card h1 { margin: 0 0 .2em; font-size: 1.9em; color: var(--tang); line-height: 1.1; }
.card h2 { margin: .1em 0 .3em; font-size: 1.3em; }
.card p { margin: .35em 0; line-height: 1.4; }
.card .sub { color: #6b6475; font-size: .9em; }
.card .btns { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; margin-top: .8em; }
.card button.b { background: var(--tang); color: #fff; font-weight: 800; padding: .65em 1.2em; border-radius: .9em; box-shadow: 0 .25em 0 #b84f08; font-size: 1.05em; min-height: 44px; }
.card button.b:active { transform: translateY(.2em); box-shadow: 0 .05em 0 #b84f08; }
.card button.b.alt { background: #fff; color: var(--ink); box-shadow: 0 .25em 0 #c9b9a6; border: .14em solid #c9b9a6; }
.card button.b.ad { background: var(--teal); box-shadow: 0 .25em 0 #0d7f73; }
.card button.b:disabled { opacity: .45; }
.card table { width: 100%; border-collapse: collapse; margin: .4em 0; text-align: left; }
.card td { padding: .22em .3em; border-bottom: 1px solid #eadfd2; }
.card td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.card tr.tot td { border-top: 2px solid var(--ink); border-bottom: 0; font-size: 1.15em; }
.card .neg { color: var(--red); } .card .pos { color: #1d7a4c; }
.bgcard { background: #fff; border: .2em solid var(--tang); border-radius: 1em; padding: .7em 1em; margin: .6em 0; }
.bgcard .ico { font-size: 2.6em; line-height: 1; }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; text-align: left; margin-top: .5em; }
.shop button { background: #fff; border: .14em solid #c9b9a6; border-radius: .8em; padding: .45em .6em; text-align: left; }
.shop button b { display: flex; justify-content: space-between; gap: .6em; }
.shop button small { color: #6b6475; }
.shop button:disabled { opacity: .45; }
.title-card { background: rgba(255, 247, 238, .93); }
.title-card h1 { font-size: 2.8em; }
.stars { color: #f5a623; letter-spacing: .1em; font-size: 1.5em; }

#rotate { display: none; position: fixed; inset: 0; background: #2a2036; color: #fff; z-index: 50; place-items: center; text-align: center; font-size: 1.6em; font-weight: 800; }
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: grid; } }
@media (max-height: 480px) {
  /* phones held sideways: tighter panels so the people stay visible */
  #cust { width: min(15em, 30vw); padding: .45em .6em; }
  #tools button { width: 3.5em; height: 3.5em; }
  #dock { padding: .5em; gap: .5em; }
  #prompt { padding: .4em .7em .4em; }
  #p-hint { font-size: 1.15em; }
  #p-choices button { padding: .4em .5em; font-size: .92em; min-height: 40px; }
  #lan { max-width: min(22em, 40vw); }
  #lan-face { width: 3.8em; height: 3.8em; }
  .card { padding: .7em 1.1em .8em; }
  .card h1 { font-size: 1.5em; } .title-card h1 { font-size: 2.1em; }
  .card p { margin: .25em 0; line-height: 1.3; }
  #joy { width: 6.6em; height: 6.6em; }
}

.card button.b.ad::before { content: '▶'; display: inline-block; margin-right: .5em; font-size: .8em; }
#btn-mic svg { width: 1.2em; height: 1.2em; }

#use { background: var(--yellow); color: var(--ink); font-weight: 800; padding: .6em 1em; min-height: 44px; border-radius: 1em; box-shadow: 0 .3em 0 rgba(43, 34, 51, .35); animation: pulse .5s infinite alternate; }
#use:active { transform: translateY(.2em); }
#call { position: absolute; inset: 0; z-index: 2; background: rgba(42, 32, 54, .86); display: grid; place-items: start center; padding-top: calc(7vh + var(--st)); pointer-events: auto; }
#call .phone { background: #34283f; color: #fff; border-radius: 1.6em; padding: 1.1em 2em 1.2em; text-align: center; min-width: min(20em, 70vw); box-shadow: 0 .5em 0 rgba(0, 0, 0, .35); }
#call .ring { width: 3.6em; height: 3.6em; margin: 0 auto .4em; border-radius: 50%; background: var(--green); display: grid; place-items: center; animation: ringing .5s infinite alternate; }
#call .ring svg { width: 2em; height: 2em; }
#call.talking .ring { animation: none; background: var(--teal); }
#call-who { font-size: 1.5em; font-weight: 800; }
#call-sub { color: #cbbfd8; font-size: .9em; }
#call-say { margin-top: .5em; font-weight: 700; font-size: 1.1em; min-height: 1.3em; }
#call-say:empty { display: none; }
#call-answer { margin-top: .8em; background: var(--green); color: #fff; font-weight: 800; font-size: 1.15em; min-height: 44px; padding: .6em 1.8em; border-radius: 99px; box-shadow: 0 .25em 0 #1d7a4c; }
#call.talking #call-answer { display: none; }
@keyframes ringing { from { transform: rotate(-14deg) scale(1); } to { transform: rotate(14deg) scale(1.12); } }
#hud.incall #tools, #hud.incall #joy, #hud.incall #cust, #hud.incall #use, #hud.incall #bubbles { display: none; }
@media (max-height: 480px) { #call { padding-top: calc(3vh + var(--st)); } #call .phone { padding: .6em 1.6em .7em; } #call .ring { width: 2.6em; height: 2.6em; } }

#hud.incall #goal, #hud.incall #lan { visibility: hidden; }

.micbig { width: 5.2em; height: 5.2em; margin: 0 auto .5em; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .5em rgba(23, 184, 166, .25); animation: pulse .7s infinite alternate; }
.micbig svg { width: 2.8em; height: 2.8em; }
.micbig.ok { background: var(--green); animation: none; }
#mictest { font-size: 1.15em; font-weight: 700; min-height: 1.4em; }

.reel { position: relative; height: 4.8em; overflow: hidden; margin: .7em 0 .4em; background: #fff; border: .2em solid var(--tang); border-radius: 1em; }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 1.2em; z-index: 1; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.reel::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.reel-strip { will-change: transform; }
.reel-item { height: 4.8em; display: flex; align-items: center; justify-content: center; gap: .7em; }
.reel-item .ico { font-size: 2.3em; line-height: 1; }
.reel-item b { font-size: 1.3em; }


#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 56%, rgba(40, 24, 50, .26) 100%); }

/* a paper checklist: the shopping list, tonight's order */
/* on the right: in town nothing important is up there, and the shelf signs on the left stay readable */
#list { z-index: 3; position: absolute; right: calc(.6em + var(--sr)); top: calc(4.2em + var(--st)); width: min(14.5em, 40vw); background: #fffdf3; border-radius: .45em; border-top: .55em solid var(--yellow); padding: .45em .7em .5em; box-shadow: 0 .3em 0 rgba(43, 34, 51, .25); font-size: .92em; transform: rotate(1.2deg); transform-origin: top right; }
#list b { display: block; font-weight: 800; margin-bottom: .2em; }
#list ul { list-style: none; margin: 0; padding: 0; }
#list li { display: flex; align-items: center; gap: .45em; padding: .2em 0; font-weight: 700; line-height: 1.2; border-bottom: 1px dashed #e3d8c8; }
#list li:last-child { border-bottom: 0; }
#list li i { flex: none; width: 1.2em; height: 1.2em; border: 2px solid var(--ink); border-radius: .3em; font-style: normal; font-size: .82em; line-height: 1; display: grid; place-items: center; color: #fff; }
#list li span { flex: 1; }
#list li em { font-style: normal; font-size: .85em; color: #7a6f66; white-space: nowrap; }
#list li.done i { background: var(--green); border-color: var(--green); }
#list li.done span { text-decoration: line-through; color: #8a8178; }

@media (max-width: 560px) { #stats, #right { flex-wrap: wrap; flex: 0 1 auto; } }

/* Android app: the phone shows its clock and a green microphone dot at the top whenever the game starts listening.
   Keep the game's own top row below them. */
html.android-app { --st: 28px; }