/* What lies over the room (src/view/overlays.js): bubbles over people, the
   patience and work rings, and the badges on pieces. None of them takes a
   finger: a tap goes to the room, which asks overlays.js what it was over. */

.room-overlay .ro-item {
  position: absolute; left: 0; top: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 800 calc(12px * var(--ts-scale))/1.1 var(--font); color: var(--ts-ink);
  will-change: transform;
}
.room-overlay .ro-bubble {
  position: relative; display: flex; align-items: center; gap: 0.3em;
  min-height: 2em; padding: 0.25em 0.75em 0.25em 0.25em; border-radius: 999px;
  background: var(--ts-pill, #FFF8EC); color: var(--ts-tab-ink, #7A5236);
  box-shadow: 0 3px 8px rgba(92, 52, 22, 0.28), 0 0 0 1px rgba(92, 52, 22, 0.08); white-space: nowrap;
}
.room-overlay .ro-bubble.ro-only { padding: 0.28em; }
/* words running left of the ring, so the ring stays over the head */
.room-overlay .ro-flip .ro-bubble { flex-direction: row-reverse; padding: 0.2em 0.2em 0.2em 0.65em; }
/* the tail pointing down at whoever speaks */
.room-overlay .ro-person .ro-bubble::after {
  content: ''; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--ts-pill, #FFF8EC); border-radius: 0 0 3px 0; transform: rotate(45deg);
  box-shadow: 2px 2px 3px rgba(92, 52, 22, 0.18);
}
.room-overlay .ro-words { padding-right: 0.1em; }
.room-overlay .ro-icon { width: 1.5em; height: 1.5em; flex: none; }
.room-overlay .ro-think .ro-bubble { border-style: dashed; }
/* further back in the queue: a smaller ring */
.room-overlay .ro-small { font-size: calc(12px * var(--ts-scale) * 0.72); }

/* rings: patience draining, and a staffer's task filling (the serving
   close-up's face carries the patience ring too: css/closeups-shop.css) */
.ro-ringbox { position: relative; width: 2.7em; height: 2.7em; flex: none; display: grid; place-items: center; }
.ro-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-overlay .ro-ringbox .ro-icon { position: relative; width: 1.5em; height: 1.5em; }
.ro-track { fill: #FFFFFF; stroke: none; }
.ro-arc { fill: none; stroke: var(--ts-green, #6FA05A); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
[data-patience="low"] .ro-arc { stroke: var(--sunset); }
[data-patience="out"] .ro-arc { stroke: var(--chile); }
[data-patience="out"] .ro-ringbox { animation: ro-hurry 0.9s ease-in-out infinite; }
@keyframes ro-hurry { 50% { transform: scale(1.12); } }
.room-overlay .ro-work .ro-arc { stroke: var(--ts-ink); }

/* who someone is: a regular, the tea writer */
.room-overlay .ro-chip {
  padding: 0.1em 0.5em; border-radius: 999px; background: var(--ts-ink); color: var(--ts-cream);
  font-size: max(11px, 0.9em); white-space: nowrap;
}
.room-overlay .ro-said .ro-bubble { animation: ro-pop 0.25s ease-out; }
@keyframes ro-pop { from { transform: scale(0.6); opacity: 0; } }
.room-overlay .ro-said .cue { display: inline-flex; align-items: center; gap: 0.3em; }
.room-overlay .ro-said .cue-icon { width: 1.5em; height: 1.5em; }
.room-overlay .ro-stars { display: flex; gap: 1px; padding-left: 0.3em; color: var(--sunset); }
.room-overlay .ro-star { width: 1.2em; height: 1.2em; }
.room-overlay .ro-star.off { color: rgba(46, 42, 38, 0.25); }
.room-overlay .ro-like .ro-icon { color: var(--chile); }
/* a result's note: what they said as they went, and what it came to */
.room-overlay .ro-note .ro-bubble {
  flex-direction: column; align-items: center; gap: 0.15em; max-width: 15em; padding: 0.35em 0.8em;
  border-radius: 14px; white-space: normal; text-align: center;
}
.room-overlay .ro-tally { display: flex; align-items: center; gap: 0.2em; color: var(--text); }
.room-overlay .ro-earned { display: flex; align-items: center; gap: 0.2em; color: var(--text); }
.room-overlay .ro-earned .ro-icon { width: 1.2em; height: 1.2em; color: var(--turquoise); }
/* a bubble a tap was waiting on */
.room-overlay .ro-pulse .ro-bubble { animation: ro-nudge 0.4s ease-in-out 3; }
@keyframes ro-nudge { 50% { transform: scale(1.18); } }

/* badges on pieces: a picture and a number, standing on the piece */
.room-overlay .ro-badge .ro-bubble {
  background: var(--ts-badge); color: #FFFFFF; box-shadow: 0 0 0 2px var(--ts-pill, #FFF8EC), 0 3px 6px rgba(92, 52, 22, 0.3);
  min-height: 1.8em; padding: 0.15em 0.6em 0.15em 0.3em;
}
.room-overlay .ro-badge .ro-icon { width: 1.3em; height: 1.3em; }

:root.ts-still .room-overlay .ro-ringbox, :root.ts-still .room-overlay .ro-bubble { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .room-overlay .ro-ringbox, .room-overlay .ro-bubble { animation: none; }
}

/* Re-center (src/ui/recenter.js), in the bottom corner of the room's space
   once the player has moved the room; placed by its right and bottom. */
.room-recenter { position: absolute; z-index: 3; }

/* The coach (src/ui/coach.js): training's lines and the first-time hints, one
   card at a time, below the top bar or at the foot of the screen, over the room
   rather than a close-up beside it (js sets its edges), and a ring over what
   to tap, or, for a line that only tells, a still outline in its own
   turquoise round what it is about. It is head office talking, in head
   office's own frame, so it never reads as part of the screen under it. A tap
   on its words is a tap on its button; the ring takes no tap. Over a phone's
   close-up it is compact: its note runs on after its words. */
.ts-coach {
  position: absolute; z-index: 10; bottom: max(var(--coach-bottom, 8px), calc(var(--sab) + 8px));
  left: calc(var(--coach-left, 0px) + 12px + var(--sal)); right: calc(var(--coach-right, 0px) + 12px + var(--sar));
  max-width: 440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px 10px 10px;
  background: var(--ts-cream, #FFF8EC); color: var(--ts-ink); border: 3px solid var(--turquoise); border-radius: 18px;
  box-shadow: 0 0 0 3px var(--ts-cream, #FFF8EC), 0 8px 20px rgba(46, 42, 38, 0.32); font-size: var(--ts-font); animation: coach-in 0.25s ease both;
  cursor: pointer;
}
.ts-coach.up { bottom: auto; top: max(var(--coach-top, 8px), calc(var(--sat) + 8px)); }
.ts-coach-from {
  flex: none; align-self: flex-start; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--turquoise); color: #FFFFFF;
}
.ts-coach-from .cue-icon { width: 20px; height: 20px; }
.ts-coach-words { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-coach p { margin: 0; line-height: 1.3; }
.ts-coach-text { font-weight: 900; }
.ts-coach-note { font-weight: 700; font-size: var(--ts-small); color: var(--ts-ink); opacity: 0.8; }
.ts-coach-acts { flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; }
.ts-coach.over { padding: 6px 8px; gap: 4px 8px; }
.ts-coach.over .ts-coach-from { width: 26px; height: 26px; }
.ts-coach.over .ts-coach-from .cue-icon { width: 16px; height: 16px; }
.ts-coach.over .ts-coach-words { display: block; }
.ts-coach.over .ts-coach-words p { display: inline; }
.ts-coach.over .ts-coach-note::before { content: ' '; }
.ts-coach-ring {
  position: absolute; z-index: 10; pointer-events: none; box-sizing: border-box;
  border: 4px solid var(--sunset); border-radius: 16px; box-shadow: 0 0 0 3px var(--surface);
  animation: coach-ring 1.1s ease-in-out infinite alternate;
}
.ts-coach-ring.round { border-radius: 50%; }
.ts-coach-ring.tells { border: 3px solid var(--turquoise); box-shadow: 0 0 0 3px var(--surface), 0 0 14px 4px rgba(39, 166, 154, 0.5); animation: none; }
/* a tap went somewhere else: what the card waits on pulses */
.ts-coach-ring.nudge, .ts-coach .btn.nudge { animation: coach-nudge 0.4s ease-in-out 3; }
@keyframes coach-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes coach-ring { from { transform: scale(1); } to { transform: scale(var(--ring-breathe, 1.06)); } }
@keyframes coach-nudge { 50% { transform: scale(var(--ring-nudge, 1.2)); } }
:root.ts-still .ts-coach, :root.ts-still .ts-coach-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .ts-coach, .ts-coach-ring { animation: none; } }

/* The room's warm edges: a soft vignette over the picture, under the
   bubbles, as the owner's mockup has it. */
.room-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 62% at 50% 48%, rgba(110, 56, 20, 0) 50%, rgba(110, 56, 20, 0.2) 78%, rgba(80, 38, 12, 0.46) 100%),
    linear-gradient(rgba(255, 190, 110, 0.06), rgba(255, 170, 90, 0.08));
}