/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

* {
  box-sizing: border-box;
}

/* Mobile-first: every tap target at least 44px tall (Apple HIG minimum) */
button,
input,
select {
  min-height: 44px;
}

/* iOS system palette (iMessage-like), dark by default with a light
   mode following the device's appearance setting */
:root {
  color-scheme: dark light;

  --bg: #000;
  --card: #1C1C1E;
  --card-elevated: #2C2C2E;
  --border: #3A3A3C;
  --border-strong: #48484A;
  --text: #fff;
  --text-secondary: #8E8E93;
  --blue: #0A84FF;
  --blue-hover: #0870DD;
  --green: #30D158;
  --red: #FF453A;
  --red-hover: #E0392F;
  --bubble-other: #3A3A3C;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff;
    --card: #F2F2F7;
    --card-elevated: #E5E5EA;
    --border: #D1D1D6;
    --border-strong: #C7C7CC;
    --text: #000;
    --text-secondary: #8E8E93;
    --blue: #007AFF;
    --blue-hover: #0066D6;
    --green: #34C759;
    --red: #FF3B30;
    --red-hover: #E0352B;
    --bubble-other: #E9E9EB;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  margin: 0;
  padding: 12px;
}

h1 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
  h1 {
    font-size: 2.5rem;
  }

  body {
    padding: 20px;
  }
}

.subtitle {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
}

/* Buttons */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--blue);
  color: white;
}

.btn-primary:hover {
  background: var(--blue-hover);
}

.btn-danger {
  background: var(--red);
  color: white;
}

.btn-danger:hover {
  background: var(--red-hover);
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.25rem;
}

/* Containers */
.home-container,
.join-container,
.lobby,
.game-active,
.game-complete {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Lobby */
.session-info {
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.share-link {
  display: flex;
  gap: 10px;
  margin: 1rem 0;
}

.share-link input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-elevated);
  color: var(--text);
}

.session-code {
  font-size: 1.25rem;
  color: var(--blue);
}

.players-list {
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.players-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.players-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--card-elevated);
}

.players-list li:last-child {
  border-bottom: none;
}

.setting {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.waiting-message {
  color: var(--text-secondary);
  font-style: italic;
}

/* Active Game */
.message-display {
  background: var(--card);
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
}

.message-display .placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

.message-display.flash {
  animation: flash 0.5s ease-out;
}

@keyframes flash {
  0% { background: var(--blue); }
  100% { background: var(--card); }
}

.timer {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--blue);
  white-space: nowrap;
}

.timer .urgent {
  color: var(--red);
  animation: pulse 0.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Composer: a vertical stack of the small "Send Message" pill above
   and the input+add-word row below */
.word-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.word-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Small pill above the composer for finishing the current message.
   Sits to the right so it doesn't compete with the primary "add word"
   button below it. */
.btn-send-message {
  align-self: flex-end;
  padding: 8px 18px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-send-message:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}

/* iMessage-style composer: pill-shaped field + round send button */
.word-input input {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
  font-size: 1.0625rem;
  flex: 1;
  min-width: 0;
}

.word-input input:focus {
  outline: none;
  border-color: var(--blue);
}

.btn-send {
  flex: none;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  align-self: center;
}

.submitted-message {
  color: var(--green);
  font-size: 1.0625rem;
}

.btn-end {
  padding: 8px 14px;
  font-size: 0.875rem;
}

/* Complete */
.final-message {
  background: var(--card);
  padding: 40px;
  border-radius: 12px;
  margin: 2rem 0;
  font-size: 1.5rem;
  line-height: 1.8;
}

.actions {
  margin-top: 2rem;
}

/* Flash messages */
.alert {
  background: var(--red);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Group Selection Lobby */
/* Mobile-first: groups stack vertically; side-by-side only on wider screens */
.groups-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 2rem 0;
}

@media (min-width: 640px) {
  .groups-container {
    flex-direction: row;
  }
}

.group-column {
  flex: 1;
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.group-header {
  margin-bottom: 1rem;
}

.group-name {
  margin: 0;
  font-size: 1.25rem;
}

.group-name.empty {
  color: var(--text-secondary);
}

.group-name-input {
  background: var(--card-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.group-name-input:focus {
  outline: none;
  border-color: var(--blue);
}

.group-players {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  min-height: 60px;
}

.group-players li {
  padding: 6px 0;
  color: var(--text);
}

.empty-group {
  color: var(--text-secondary);
  font-style: italic;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-group-label {
  color: var(--green);
  font-weight: bold;
}

.btn-secondary {
  background: var(--card-elevated);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--border);
}

.ungrouped-players {
  background: var(--card);
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.ungrouped-players h4 {
  margin: 0 0 10px 0;
  color: var(--text-secondary);
}

.ungrouped-players ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ungrouped-players li {
  display: inline-block;
  padding: 4px 12px;
  background: var(--card-elevated);
  border-radius: 20px;
  margin: 4px;
}

.host-controls-lobby {
  margin-top: 2rem;
}

/* Active game: full-height chat screen. The page never scrolls; the
   transcript is the only scrolling region and the composer stays pinned
   at the bottom. */
.game-active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 24px); /* body padding: 12px top + bottom */
}

@media (min-width: 640px) {
  .game-active {
    height: calc(100dvh - 40px); /* body padding: 20px top + bottom */
  }
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}

.chat-header .turn-indicator {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.9rem;
  padding: 10px 14px;
  margin-bottom: 0;
}

.turn-indicator {
  background: var(--card);
  padding: 15px 20px;
  border-radius: 10px;
}

/* iMessage-style: messages sit directly on the black background;
   the transcript is just the scrolling region, with messages anchored
   to the bottom like a real chat */
.chat-transcript {
  padding: 8px 2px;
  margin-bottom: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-transcript > :first-child {
  margin-top: auto;
}

.chat-transcript .chat-message.own-group {
  align-self: flex-end;
}

/* Chat bubbles: sized to their content, own messages on the right in
   iMessage blue, the other group's on the left in gray. The sender
   label sits above the bubble (and is hidden for your own group,
   just like iMessage). */
.chat-message {
  margin-bottom: 10px;
  max-width: 80%;
  width: fit-content;
}

.chat-message.own-group {
  margin-left: auto;
}

.chat-message.other-group {
  margin-right: auto;
}

.chat-message .group-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin: 0 12px 3px;
}

.chat-message.own-group .group-label {
  display: none;
}

.chat-message .bubble {
  background: var(--bubble-other);
  padding: 8px 14px;
  border-radius: 18px;
  width: fit-content;
  max-width: 100%;
}

.chat-message.own-group .bubble {
  background: var(--blue);
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.chat-message.other-group .bubble {
  border-bottom-left-radius: 4px;
}

.chat-message .message-text {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.35;
}

/* Own bubbles are blue in both modes, so their text is always white */
.chat-message.own-group .message-text {
  color: #fff;
}

/* The in-progress message renders as a dashed "typing" bubble aligned
   to whichever group is composing */
.current-message-area {
  background: var(--card);
  padding: 10px 16px;
  border-radius: 18px;
  margin-bottom: 0.75rem;
  border: 1.5px dashed var(--border-strong);
  max-width: 80%;
  min-width: 45%;
}

.current-message-area.own-group {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.current-message-area.other-group {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.current-message {
  text-align: left;
}

.current-message .group-label {
  font-weight: bold;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-right: 8px;
}

.current-message .message-text {
  color: var(--text);
  font-size: 1.0625rem;
}

.current-message .message-text.flash {
  animation: text-flash 0.5s ease-out;
}

@keyframes text-flash {
  0% { color: var(--green); }
  100% { color: var(--text); }
}

.waiting-turn {
  color: var(--text-secondary);
  font-style: italic;
  padding: 20px;
}

.hint {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 8px;
}

/* Keep the word field and submit button on one row; hint wraps below */
.word-input .hint {
  flex-basis: 100%;
}

.word-input {
  flex-wrap: wrap;
}

/* Final Conversation */
.final-conversation {
  padding: 8px 2px;
  margin: 2rem 0;
  text-align: left;
  max-height: 400px;
  overflow-y: auto;
}

.empty-conversation {
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

/* Landing page: concept explainer + game list. Text is left-aligned
   and reads at a comfortable measure; the game card is a full-width
   tappable block. */
.landing {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 4px;
}

.landing h1 {
  margin-bottom: 1rem;
}

.landing h2 {
  font-size: 1.125rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2rem 0 0.75rem;
}

.landing .concept p {
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 1rem;
}

.landing .game-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing .game-card {
  display: block;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.landing .game-card:hover,
.landing .game-card:active {
  background: var(--card-elevated);
}

.landing .game-card h3 {
  margin: 0 0 0.5rem;
  color: var(--blue);
  font-size: 1.25rem;
}

.landing .game-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}