/* The live picture fills the window and the page never scrolls. The header,
   tools, tray, requests and chat float over the paper at its edges, quiet
   until needed. */
body.app {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f3ebdd;
}

.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--paper); padding: 0.5rem; }
.skip:focus { left: 0.5rem; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.scroll {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
body.mode-place .scroll, body.mode-invite .scroll, body.mode-dew .scroll, body.mode-receive .scroll, body.mode-respond .scroll { cursor: crosshair; }
.scroll image { pointer-events: none; }
.bleed { fill: #efe6d5; }
.edge { fill: none; stroke: #d6c9b1; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the paper settles in on entry, like a sheet being laid down */
body.app:not(.loading) #world { animation: lay 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
@keyframes lay { from { opacity: 0; } to { opacity: 1; } }
body.app:not(.motion) #world { animation: none; }

#art { transition: opacity 1s linear; }

/* ---- floating panels ---- */
.float {
  position: absolute;
  z-index: 10;
  background: rgb(246 239 226 / 90%);
  border: 1px solid rgb(205 191 166 / 85%);
  border-radius: 8px;
  box-shadow: 0 4px 22px rgb(41 43 41 / 8%);
  backdrop-filter: blur(3px);
}

.bar {
  z-index: 25;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.15rem 0.6rem;
  min-width: 0;
}

.brand-h { margin: 0; font-size: inherit; font-weight: normal; }
.bar .brand { display: flex; gap: 0.4rem; align-items: center; color: var(--ink); text-decoration: none; }
.bar .brand img { display: block; }
.bar .title { display: grid; line-height: 1.15; }
.bar .title .zh { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.08em; }
.bar .title .en { font-size: 0.7rem; color: var(--ink-mid); }

.dream { text-align: center; min-width: 0; }
.dream p { margin: 0; }
.prompt .zh { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.06em; }
.prompt .en { color: var(--ink-mid); font-size: 0.82rem; }
.phase-line { font-size: 0.82rem; color: var(--ink-mid); line-height: 1.3; }
.clock { font-variant-numeric: tabular-nums; }

.links { display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end; min-width: 0; }
.links a { color: var(--ink); font-size: 0.85rem; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.3rem; }
.links button { font-size: 0.85rem; padding: 0.2rem 0.6rem; }

.marks { display: flex; gap: 0.15rem; list-style: none; margin: 0 0.2rem 0 0; padding: 0; }
.marks li { opacity: 0.45; }
.marks li.online { opacity: 1; }
.marks li.me .mark { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }

.mark.agent {
  position: relative;
  box-shadow: 0 0 0 1.5px #fbf6ec, 0 0 0 3px var(--mark);
  background: repeating-linear-gradient(135deg, var(--mark) 0 3px, #808a94 3px 5px);
}
.mark .ai-tag {
  position: absolute;
  right: -0.55rem;
  bottom: -0.35rem;
  font-family: var(--sans);
  font-size: 0.55rem;
  line-height: 1;
  padding: 0.08rem 0.18rem;
  border-radius: 3px;
  background: #2f3438;
  color: #fbf6ec;
  letter-spacing: 0.03em;
}

.conn { display: inline-flex; align-items: center; min-width: 20px; min-height: 44px; justify-content: center; }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; background: #b0a58f; }
.conn.ok .dot { background: var(--green); }
.conn.off .dot { background: var(--cinnabar); }

.companion-btn { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.companion-btn.present { background: #eef0f0; border-color: #6d7680; }

.menu { position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid #8d8a7e;
  border-radius: 4px;
  background: #f8f2e6;
  cursor: pointer;
  font-size: 0.9rem;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--ink); color: var(--paper); }
.menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 30;
  display: grid;
  gap: 0.3rem;
  min-width: 13rem;
  padding: 0.5rem;
  background: #f8f2e6;
  border: 1px solid #cdbfa6;
  border-radius: 6px;
  box-shadow: 0 8px 26px rgb(41 43 41 / 14%);
}
.menu-body button, .menu-body a { justify-content: flex-start; text-align: left; width: 100%; }
.menu-body button[aria-pressed="false"]:not(#fullscreen) { color: var(--ink-mid); text-decoration: line-through; }

.rail {
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
}

.tool {
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0.2rem;
  min-width: 52px;
  min-height: 52px;
  line-height: 1.1;
}

.tool .zh { font-family: var(--serif); font-size: 1.15rem; }
.tool .en { font-size: 0.6rem; color: var(--ink-mid); text-align: center; }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tool[aria-pressed="true"] .en { color: #e6dccb; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.overlay > .card {
  pointer-events: auto;
  max-width: min(32rem, 92%);
  background: rgb(246 239 226 / 94%);
  border: 1px solid #cdbfa6;
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 30px rgb(41 43 41 / 10%);
}

.overlay.corner { place-items: start start; padding: 5rem 0 0 4.8rem; }
.overlay.corner > .card { max-width: min(22rem, 80%); padding: 0.5rem 0.8rem; text-align: left; font-size: 0.9rem; }
.overlay.corner > .card p { margin: 0.2rem 0; }
.overlay .card h2 { font-family: var(--serif); margin: 0 0 0.3rem; font-weight: normal; font-size: 1.5rem; }
.overlay .card .en { color: var(--ink-mid); }
.overlay .card .big { font-size: 1.15rem; padding: 0.5rem 1.6rem; background: var(--ink); color: var(--paper); border-color: var(--ink); margin-top: 0.6rem; }
.overlay .card .big:hover { background: #3c3f3b; }
.tour-caption { margin: 0.3rem 0 0; font-size: 0.9rem; }

.modebar {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: calc(var(--tray-h) + 0.6rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(46rem, 94%);
  background: rgb(246 239 226 / 96%);
  border: 1px solid #cdbfa6;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  box-shadow: 0 4px 22px rgb(41 43 41 / 10%);
}

.guide {
  right: 0.8rem;
  top: 5rem;
  max-width: 22rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  z-index: 16;
}

.guide h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 0.3rem; font-weight: normal; }
.guide ol { padding-left: 1.2rem; margin: 0 0 0.5rem; }
.guide span[lang="en"] { color: var(--ink-mid); }

/* ---- the side panel: requests, the inspector, the object list ---- */
.stage { --bar-b: 4rem; --tray-h: 7rem; }
.side {
  right: 0.5rem;
  top: calc(var(--bar-b) + 0.5rem);
  width: 19rem;
  /* leaves room for the chat handle below it */
  max-height: calc(100dvh - var(--bar-b) - var(--tray-h) - 4.6rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  font-size: 0.9rem;
}
.side-handle {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: none;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
}
.side-body {
  overflow-y: auto;
  padding: 0 0.7rem 0.7rem;
  display: grid;
  align-content: start;
  gap: 0.7rem;
}
.side:not(.open) .side-body { display: none; }
.side .requests h2 { display: none; }
.count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 0.65rem;
  background: var(--cinnabar);
  color: #fbf6ec;
  font-family: var(--sans);
  font-size: 0.75rem;
}

.side h2, .side h3 { font-family: var(--serif); font-weight: normal; margin: 0 0 0.3rem; font-size: 1.05rem; }
.side summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.side dl { margin: 0; }
.side dt { font-family: var(--serif); margin-top: 0.4rem; }
.side dd { margin: 0 0 0 0.8rem; color: var(--ink-mid); }
.side [lang="en"] { color: var(--ink-mid); }

.inspector {
  background: #f8f2e6;
  border: 1px solid #cdbfa6;
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
}

.inspector .row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.35rem 0; }
.inspector label { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 0.4rem; margin: 0.15rem 0; }
.inspector input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--ink); }
.inspector select { font: inherit; min-height: 44px; }
.inspector .hint { color: #4b5c4d; background: #edf0e6; border-radius: 4px; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.inspector .reason { color: var(--ink-mid); font-size: 0.82rem; }
.inspector .nudge { display: grid; grid-template-columns: repeat(4, 44px); gap: 0.25rem; }
.inspector .nudge button { padding: 0; }
.inspector .close { float: right; }
.inspector .chat-about-btn { font-size: 0.82rem; padding: 0.1rem 0.5rem; }

.req { border-top: 1px solid #ddd2bf; padding: 0.45rem 0; }
.req:first-child { border-top: none; }
.req p { margin: 0 0 0.3rem; }
.req .buttons { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.req .accept { background: var(--ink); color: var(--paper); }
.req .timer { font-variant-numeric: tabular-nums; color: var(--ink-mid); }

#object-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
#object-list button { width: 100%; text-align: left; display: flex; gap: 0.4rem; align-items: center; }
#object-list button[aria-current="true"] { border-color: var(--ink); background: #fffaf0; }

/* ---- the chat ---- */
.chat {
  right: 0.5rem;
  bottom: calc(var(--tray-h) + 0.5rem);
  width: 19rem;
  max-height: min(30rem, calc(100dvh - var(--bar-b) - var(--tray-h) - 4.5rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  font-size: 0.9rem;
}
.chat.collapsed { max-height: none; }
.chat-toggle {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: none;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
}
.chat.collapsed .chat-body { display: none; }
.chat-body {
  display: grid;
  grid-template-rows: auto auto minmax(4rem, 1fr) auto auto;
  min-height: 0;
  padding: 0 0.6rem 0.5rem;
  gap: 0.3rem;
}
.chat-note { margin: 0; font-size: 0.75rem; color: var(--ink-mid); }
.chat-older { font-size: 0.8rem; min-height: 32px; justify-self: center; }
.chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chat-msg { display: block; overflow-wrap: anywhere; line-height: 1.4; }
.chat-msg .mark { width: 1.35rem; height: 1.35rem; font-size: 0.75rem; vertical-align: -0.2rem; }
.chat-msg time { color: var(--ink-mid); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.chat-msg.mine .text { color: #1f3a2c; }
.about-link { min-height: 28px; padding: 0 0.4rem; font-size: 0.78rem; border-style: dashed; }
.chat-round {
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--ink-mid);
  border-top: 1px solid #ddd2bf;
  padding-top: 0.2rem;
  margin-top: 0.2rem;
}
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem; }
.chat-form input { font: inherit; min-height: 44px; padding: 0 0.5rem; border: 1px solid #8d8a7e; border-radius: 4px; background: #fffaf0; min-width: 0; }
.chat-about { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--cinnabar); cursor: pointer; }
.chat-export { font-size: 0.8rem; }
.chat-export summary { cursor: pointer; color: var(--ink-mid); min-height: 28px; }
.chat-export p { margin: 0.2rem 0; }

/* ---- the tray ---- */
.tray {
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  width: min(62rem, calc(100% - 1rem));
  padding: 0.25rem 0.6rem 0.4rem;
}

.tray-head { display: flex; gap: 0.6rem; align-items: center; }
.tray-head button { min-height: 32px; font-size: 0.82rem; padding: 0.1rem 0.6rem; }
#tray-toggle { border: none; background: none; font-family: var(--serif); font-size: 0.95rem; padding-left: 0; }
#catalogue-open { margin-left: auto; }
.tray.collapsed .tray-body { display: none; }

.palette {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.35rem;
}

.palette li { display: grid; gap: 0.1rem; min-width: 0; }

.motif-btn {
  display: grid;
  grid-template-rows: 40px auto;
  place-items: center;
  gap: 0.05rem;
  padding: 0.15rem;
  width: 100%;
  background: #f3ebdd;
  touch-action: none;
}

.motif-btn img { max-width: 100%; max-height: 40px; pointer-events: none; }
.motif-btn .name { font-size: 0.74rem; line-height: 1.15; text-align: center; }
.motif-btn .name [lang="en"] { display: block; color: var(--ink-mid); font-size: 0.64rem; }
.motif-btn[aria-pressed="true"] { border: 2px solid var(--cinnabar); background: #fbf4e6; }
.reroll { min-height: 26px; font-size: 0.7rem; padding: 0 0.3rem; }
.palette .empty { grid-column: 1 / -1; color: var(--ink-mid); padding: 0.4rem 0; }

dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #a99e88;
  border-radius: 6px;
  max-width: min(46rem, 94vw);
  max-height: 86dvh;
}

dialog::backdrop { background: rgb(41 43 41 / 30%); }
dialog h2 { font-family: var(--serif); font-weight: normal; margin-top: 0; }
dialog input { font: inherit; width: 100%; min-height: 44px; }

.cat-group h3 { font-family: var(--serif); font-weight: normal; margin: 0.6rem 0 0.2rem; font-size: 1rem; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.4rem; }
.cat-list li { border: 1px solid #d8ccb6; border-radius: 4px; padding: 0.3rem; text-align: center; font-size: 0.8rem; }
.cat-list li img { height: 56px; max-width: 100%; }
.cat-list li.unavailable img { opacity: 0.45; filter: grayscale(0.6); }
.cat-list li.mine { border-color: var(--ink); background: #fbf4e6; }
.cat-list .who { display: block; color: var(--ink-mid); font-size: 0.72rem; }

.intent-options { display: grid; gap: 0.4rem; margin-bottom: 0.6rem; }
.intent-options button { text-align: left; }

.toast {
  position: fixed;
  left: 50%;
  top: 4.8rem;
  transform: translateX(-50%);
  max-width: min(36rem, 92vw);
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 40;
}

.toast.show { opacity: 0.95; }
.toast .mark.agent .ai-tag { background: #fbf6ec; color: #2f3438; }

.noscript { position: fixed; inset: auto 1rem 1rem; background: var(--paper); padding: 1rem; border: 1px solid; }

/* ---- scene affordances ---- */
.obj.selected-other .solid, .obj.selected-mine .solid { filter: drop-shadow(0 0 2px rgb(164 77 60 / 60%)); }
.sel-box { fill: none; stroke: var(--cinnabar); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.ghost { opacity: 0.45; }
.ghost-remote { opacity: 0.28; }
.reserved-outline { fill: none; stroke: #8b8f86; stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.invite-mark circle.ring { fill: rgb(243 235 221 / 60%); stroke: var(--cinnabar); stroke-width: 2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.invite-mark text { font-family: var(--serif); font-size: 22px; fill: var(--cinnabar); }
.invite-mark text.en { font-family: var(--sans); font-size: 13px; fill: #6b4a40; }
.invite-mark.acknowledged circle.ring { stroke: var(--mist); }
.invite-mark.acknowledged text { fill: #7d7f76; }
.bubble circle.film { fill: rgb(255 255 255 / 22%); stroke: #62665f; stroke-width: 2; stroke-opacity: 0.55; }
.dew-preview { fill: rgb(119 140 153 / 8%); stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.dew-drop { fill: #dfe6e6; stroke: #778c99; stroke-width: 1.5; }
.wake path { fill: none; stroke: #8d9a9c; stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.highlight-ring { fill: none; stroke: var(--cinnabar); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.motion .highlight-ring { animation: breathe 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: 0.6; } }
.tour-veil { fill: #f3ebdd; opacity: 0.62; pointer-events: none; }

/* ---- other people's pointers ---- */
#cursors { pointer-events: none; }
.cursor { transition: opacity 0.6s; }
.cursor-label { transition: opacity 0.5s; }
.cursor-label text { font-family: var(--sans); font-size: 12px; fill: #fbf6ec; }
.cursor-tag { opacity: 0.92; }
.cursor-tag.agent { stroke: #fbf6ec; stroke-width: 1; stroke-dasharray: 3 2; }

.shadow-ghost { animation: shadow-fade var(--life, 10s) linear both; }
@keyframes shadow-fade { from { opacity: 0.55; } to { opacity: 0; } }
body:not(.motion) .shadow-ghost { animation: none; opacity: 0.3; }
.dew-wet { animation: dew-fade var(--life, 15s) ease-out both; }
@keyframes dew-fade { 0% { opacity: 0; } 8% { opacity: 0.85; } 100% { opacity: 0; } }
body:not(.motion) .dew-wet { animation: none; opacity: 0.5; }

/* lightning: a distant flash over the strong gust public/motion.js draws */
body.motion.storm-cue #art { transition: filter 2s; filter: brightness(0.93) contrast(1.05); }
body.motion.storm-flash #sky { animation: sky 1.4s ease-out; }
@keyframes sky { 0% { opacity: 0; } 15% { opacity: 0.9; } 100% { opacity: 0; } }
body.storm-still #art { filter: brightness(0.95) sepia(0.08); }

/* ---- phases ---- */
body.phase-reveal .tray, body.phase-reveal .inspector, body.phase-reveal .rail,
body.phase-dissolve .tray, body.phase-dissolve .inspector, body.phase-dissolve .rail { display: none; }
body.phase-waiting .rail, body.phase-finished .rail, body.phase-waiting .tray, body.phase-finished .tray { display: none; }
body.offline .rail, body.offline .tray { opacity: 0.5; pointer-events: none; }

/* ---- smaller laptops ---- */
@media (width <= 1180px) {
  .links .companion-btn [lang="en"] { display: none; }
  .side { width: 17rem; }
}

/* ---- phones and narrow windows: everything floats over the picture, the
   requests and chat become drawers from the bottom ---- */
@media (width <= 760px) {
  .bar { top: 0.3rem; left: 0.3rem; right: 0.3rem; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.1rem 0.4rem; }
  .bar .title { display: none; }
  .dream { text-align: left; }
  .prompt .zh { font-size: 0.95rem; }
  .prompt .en { display: none; }
  .phase-line { font-size: 0.75rem; }
  .marks { display: none; }
  .companion-btn { padding: 0.1rem 0.45rem; font-size: 0.8rem; }
  .companion-btn .mark { display: none; }
  .rail { top: auto; bottom: calc(var(--tray-h) + 0.4rem); transform: none; left: 0.3rem; padding: 0.25rem; }
  .tool { min-width: 46px; min-height: 46px; }
  .tool .en { display: none; }
  .tray { bottom: 0.3rem; width: calc(100% - 0.6rem); padding: 0.15rem 0.4rem 0.3rem; }
  .tray-head button { min-height: 44px; }
  #tray-toggle [lang="en"], #reroll-left, #catalogue-open [lang="en"] { display: none; }
  .palette { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; }
  .motif-btn { grid-template-rows: 34px auto; min-height: 44px; }
  .motif-btn img { max-height: 34px; }
  .motif-btn .name [lang="en"] { display: none; }
  .reroll { display: none; }
  body.swapping .motif-btn { border: 2px dashed var(--cinnabar); }
  .side { top: auto; bottom: calc(var(--tray-h) + 0.4rem); right: 0.3rem; width: auto; max-width: calc(100% - 4.2rem); max-height: 52dvh; }
  .side.open { left: 0.3rem; max-width: none; z-index: 21; }
  .chat { right: 0.3rem; bottom: calc(var(--tray-h) + 3.6rem); width: auto; }
  .chat:not(.collapsed) { left: 0.3rem; max-height: 52dvh; z-index: 21; }
  .modebar { bottom: calc(var(--tray-h) + 0.4rem); font-size: 0.85rem; }
  .modebar > span [lang="en"] { display: none; }
  .guide { left: 0.4rem; right: 0.4rem; top: 3.6rem; max-width: none; font-size: 0.82rem; padding: 0.5rem 0.7rem; }
  .guide ol span[lang="en"] { display: none; }
  .overlay.corner { padding: 3.6rem 0.4rem 0; }
  .toast { top: auto; bottom: calc(var(--tray-h) + 4rem); }
}

@media (width > 760px) {
  #swap-mode { display: none; }
}

/* short windows (a landscape phone, a small laptop): a thinner tray */
@media (height <= 560px) {
  .tray-head { display: none; }
  .motif-btn { grid-template-rows: 30px; }
  .motif-btn .name { display: none; }
  .motif-btn img { max-height: 30px; }
  .reroll { display: none; }
  .rail { top: calc(var(--bar-b) + 0.3rem); bottom: auto; transform: none; }
}

/* a phone on its side: a compact bar, and the requests and chat handles
   stacked small at the right edge, opening over the picture */
@media (height <= 500px) and (width > 700px) {
  .bar { top: 0.25rem; padding: 0 0.5rem; }
  .bar .title, .prompt .en, .marks { display: none; }
  .prompt .zh { font-size: 1rem; }
  .side { top: calc(var(--bar-b) + 0.3rem); right: 0.3rem; width: auto; max-height: calc(100dvh - var(--bar-b) - var(--tray-h) - 0.8rem); }
  .chat { top: calc(var(--bar-b) + 3.4rem); bottom: auto; right: 0.3rem; width: auto; max-height: calc(100dvh - var(--bar-b) - var(--tray-h) - 4rem); }
  .side-handle [lang="en"], .chat-toggle [lang="en"] { display: none; }
  .side-handle, .chat-toggle { min-height: 44px; }
  .side.open, .chat:not(.collapsed) { width: min(19rem, 60vw); z-index: 21; }
  .tool { min-width: 44px; min-height: 44px; }
  .tool .en { display: none; }
}

.turn-hint {
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--bar-b) + 0.5rem);
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  width: max-content;
  max-width: calc(100% - 1rem);
  text-align: center;
}

/* fingers need bigger targets than a mouse does */
@media (pointer: coarse) {
  .about-link, .chat-older, .chat-export summary, .tray-head button, .reroll, .inspector .chat-about-btn { min-height: 44px; }
  .chat-export summary { display: flex; align-items: center; }
}

.req .accept [lang="en"], .overlay .card .big [lang="en"] { color: #e6dccb; }