/* Online play (ARCHITECTURE 14): the lobby, the code pad, the seats, the emote button, picker and bubbles, and the
   online status line of the game screen. Tokens come from style.css. No inline styles anywhere (the CSP). */

/* --- The lobby ------------------------------------------------------------------------------------------------- */
.lobby { display: flex; flex-direction: column; gap: 1rem; }
.lobby-intro { margin: 0; font-size: 1.0625rem; }
.lobby-sub { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--muted); }
.lobby-start-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lobby-start-row > button { flex: 1 1 12rem; }
.lobby-problem { margin: 0; padding: 0.625rem 0.75rem; border-radius: 12px; background: rgb(255 107 74 / 0.16); color: #ffcbbf; font-weight: 700; }
.lobby-status { margin: 0; font-weight: 700; }
.lobby-offline { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lobby-offline > p { margin: 0; }
.lobby-footer { flex-wrap: wrap; }
.lobby-footer > button { flex: 1 1 10rem; }
.lobby-start { font-size: 1.125rem; }

/* The code pad: only the code's own letters, no text field. */
.lobby-pad { padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.code-slots { display: flex; justify-content: center; gap: 0.375rem; margin: 0.75rem 0; }
.code-slot {
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 3.25rem; border-radius: 10px;
  border: 2px solid var(--line); font-family: var(--font-display); font-size: 1.5rem; background: rgb(4 24 36 / 0.6);
}
.code-slot.next { border-color: var(--fin); }
.code-pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: 0.375rem; }
.pad-key { min-inline-size: var(--target); padding: 0; font-family: var(--font-display); font-size: 1.25rem; }
.pad-delete { grid-column: span 2; font-family: var(--font-body); font-size: 1rem; }
.pad-actions { display: flex; margin-block-start: 0.75rem; }
.pad-go { flex: 1; font-size: 1.125rem; }

/* The room code and its link. */
.room-code-box { padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.room-code { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 11vw, 3rem); letter-spacing: 0.2em; color: var(--foam); }
.room-link { margin: 0.25rem 0 0.5rem; font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.875rem; overflow-wrap: anywhere; color: var(--muted); }
.room-copy { inline-size: 100%; }

/* The seats. */
.seat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.lobby-seat {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.625rem; border-radius: 12px;
  border: 2px solid var(--line); background: var(--panel);
}
.lobby-seat.mine { border-color: var(--foam); }
.lobby-seat.seat-open, .lobby-seat.seat-closed { border-style: dashed; }
.lobby-seat.seat-closed { opacity: 0.7; }
.lobby-seat p { margin: 0; }
.seat-head { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--muted); }
.seat-n { font-weight: 700; }
.seat-tag { padding: 0 0.375rem; border-radius: 999px; background: rgb(242 247 250 / 0.12); color: var(--foam); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.seat-tag.you { background: var(--foam); color: var(--ocean-deep); }
.seat-name { font-family: var(--font-display); font-size: 1.125rem; overflow-wrap: anywhere; }
.seat-what { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.seat-what img { filter: invert(1); }
.seat-kind, .name-select {
  min-block-size: var(--target); inline-size: 100%; padding: 0 0.5rem; border-radius: 10px; border: 2px solid var(--line);
  background: var(--ocean-deep); color: var(--foam); font: inherit;
}
.seat-kind:focus-visible, .name-select:focus-visible { outline: 3px solid var(--fin); outline-offset: 2px; }
.seat-sit { inline-size: 100%; }

/* The player's own shark and name. */
.lobby-shark-pick .shark-choice { grid-template-areas: 'swatch name' 'swatch ability'; }
.shark-choice.taken { opacity: 0.5; }
.shark-choice.taken input { cursor: not-allowed; }
.lobby-name-now { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.25rem; }
.name-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; }
.name-field { display: flex; flex-direction: column; gap: 0.25rem; }
.name-label { font-size: 0.875rem; color: var(--muted); }
.name-shuffle { margin-block-start: 0.5rem; inline-size: 100%; }
.lobby-timer-now { margin: 0; font-weight: 700; }

/* --- The game screen: emotes ----------------------------------------------------------------------------------- */
.emote-open { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; padding-inline: 0.625rem; }
.emote-open img { filter: invert(1); }
.emote-picker {
  position: fixed; inset-inline: var(--gutter); inset-block-end: max(1rem, env(safe-area-inset-bottom)); z-index: 30;
  max-inline-size: 28rem; margin-inline: auto; padding: 0.75rem; border-radius: 16px; border: 2px solid var(--foam);
  background: var(--ocean-deep); box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); display: flex; flex-direction: column; gap: 0.5rem;
  max-block-size: calc(100dvh - 2rem); overflow-y: auto;
}
.emote-title { margin: 0; font-weight: 800; }
.emote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.375rem; }
.emote-choice { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding-inline: 0.5rem; }
.emote-choice img, .emote-bubble img { filter: invert(1); }
.emote-mutes { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.emote-mute[aria-pressed='false'] { text-decoration: line-through; opacity: 0.7; }
.emote-note { margin: 0; min-height: 1.2em; color: var(--muted); font-size: 0.875rem; }
.emote-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shark-card { position: relative; }
.emote-bubble {
  position: absolute; inset-block-start: -0.625rem; inset-inline-end: 0.375rem; z-index: 2; display: inline-flex; align-items: center;
  gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--foam); color: var(--ocean-deep);
  font-weight: 800; font-size: 0.875rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.4); pointer-events: none;
  animation: emote-pop 2.6s ease-out both;
}
.emote-bubble img { filter: none; }
.emote-choice img.emote-art { filter: none; }
@keyframes emote-pop {
  0% { transform: scale(0.6); opacity: 0; }
  10% { transform: scale(1.08); opacity: 1; }
  20%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
html[data-motion='reduce'] .emote-bubble { animation: none; }

/* --- The game screen: the online status line ------------------------------------------------------------------- */
.online-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.375rem 0.75rem;
  border-radius: 12px; background: rgb(242 247 250 / 0.12); font-weight: 700;
}
.online-status.beat { background: rgb(159 195 214 / 0.18); }
.online-status.problem { background: rgb(255 107 74 / 0.2); color: #ffcbbf; }
.online-status-text { flex: 1 1 10rem; }