/* Additive modes; preserve the existing app's colors and typography. */
[hidden] { display: none !important; }
.guest-banner,.guest-invitation,.answer-statistics {
  padding: 20px; margin: 16px 0; border: 1px solid var(--line,#ddd);
  border-radius: 16px; background: var(--surface,#fff);
}
.guest-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.guest-banner p { margin: 0; flex: 1; }
.guest-home-note,.room-note { color: var(--muted,#667085); font-size: 13px; }
.guest-invitation p { line-height: 1.6; }
.guest-mode .app-grid { opacity: 1; pointer-events: auto; }
.answer-stat-row { display: flex; gap: 16px; align-items: center; margin: 12px 0; }
.answer-stat-row span { min-width: 105px; }
.answer-stat-row progress { width: 100%; height: 16px; accent-color: var(--primary,#276e64); }
.room-dialog {
  width: min(680px,calc(100% - 32px)); max-height: 88dvh; overflow: auto;
  border: 1px solid var(--line,#ddd); border-radius: 20px; padding: 24px;
  color: var(--text,#182923); background: var(--surface,#fff); font-family: inherit;
}
.room-dialog::backdrop { background: rgba(17,30,27,.55); }
.room-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.room-dialog header h2 { margin: 0; }
#room-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.room-dialog form { display: grid; gap: 14px; align-content: start; }
.room-dialog label { display: grid; gap: 6px; font-size: 14px; }
.room-dialog input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line,#ddd); border-radius: 10px; font: inherit; }
.room-dialog button { font: inherit; cursor: pointer; }
.room-dialog button:disabled { opacity: .6; cursor: default; }
.room-dialog .room-option:disabled { opacity: 1; }
.room-roster { padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.room-roster li { border: 1px solid var(--line,#ddd); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.room-options { display: grid; gap: 10px; margin: 20px 0; }
.room-options .answer-button { width: 100%; text-align: left; }
#room-content > button { margin: 8px 8px 8px 0; }
.room-code { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
#room-message { color: #9d2f3c; overflow-wrap: anywhere; }
.app-nav button { white-space: nowrap; }
@media(max-width:680px) {
  #room-entry { grid-template-columns: 1fr; }
  .room-dialog { padding: 18px; }
  .hero-actions { flex-wrap: wrap; }
  .guest-banner { display: block; }
  .guest-banner p { margin: 8px 0; }
}

.guest-mode .pc-player-search, .guest-mode [data-ranking="month"] { display: none; }
.room-dialog { margin: auto; }
.room-dialog p { margin: 12px 0; line-height: 1.5; }
.room-dialog h3 { margin: 16px 0 10px; }
.room-roster { margin: 14px 0; }
.hero-content > .guest-home-note { margin-top: 12px; }

/* Quiet question layout: secondary information stays available on demand. */
#guest-banner { border: 0; background: transparent; padding: 0 4px; margin: 8px 0 18px; gap: 8px; color: var(--muted); font-size: 13px; box-shadow: none; }
#guest-banner strong { font-weight: 500; }
#guest-banner strong::after { content: " ·"; }
#guest-banner p { flex: 1; margin: 0; }
#guest-banner .text-button { font-size: 13px; padding: 4px; }
.question-card { padding: 28px; }
#question { font-size: 22px; line-height: 1.5; margin: 16px 0 24px; }
#answers .answer-button { padding: 13px 16px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; font-weight: 500; border-radius: 9px; box-shadow: none; }
#answers .answer-button:disabled:not(.correct):not(.wrong) { opacity: 1; color: var(--muted); background: white; }
#answers .answer-button.correct { background: #edf8f3; color: #21714f; border-color: #c8e4d5; }
#feedback { margin: 22px 0 12px; font-size: 15px; line-height: 1.6; }
#feedback:empty { display: none; }
.quiet-details { border-top: 1px solid var(--line); padding: 16px 0; }
.quiet-details summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.quiet-details p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 14px 0 0; }
#answer-statistics { border: 0; padding: 0; background: transparent; margin: 0; box-shadow: none; }
#answer-statistics .answer-stat-row { font-size: 12px; margin-top: 14px; }
#follow-up-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 0; margin: 8px 0 0; background: transparent; }
#follow-up-card:has(#follow-up-content[hidden]):has(#reveal-follow-up:not([hidden])) { justify-content: flex-start; gap: 10px; }
#follow-up-card h3 { font-size: 15px; font-weight: 500; }
#reveal-follow-up { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--teal); font-size: 14px; font-weight: 700; }
#guest-invitation { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 18px 0 0; box-shadow: none; }
#guest-invitation .text-button { color: var(--teal); padding: 0; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#daily-complete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); margin: 18px 0 0; }
#daily-complete[hidden] { display: none; }
#daily-complete h3 { font-size: 12px; font-weight: 500; margin: 0; }
#daily-complete-result, #daily-complete .daily-timezone { display: none; }
#daily-complete .daily-next { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12px; }
#daily-countdown { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media(max-width:680px) {
  #guest-banner { display: flex; }
  .question-card { padding: 22px 18px; }
  #question { font-size: 20px; }
  #answers .answer-button { padding: 12px 14px; }
}
@media(pointer:coarse) { .quiet-details summary, #guest-invitation .text-button { min-height: 44px; display: flex; align-items: center; } }

#daily-explanation-text { color: #16a34a; }

/* Compact shared-nickname room flow. */
.room-dialog { width: min(496px,calc(100% - 32px)); padding: 28px; }
.room-dialog:has(.room-options) { width: min(680px,calc(100% - 32px)); }
.room-dialog header h2 { font-size: 23px; }
#room-close { font-size: 26px; line-height: 1; padding: 6px 10px; min-width: 40px; box-shadow: none; }
.room-dialog #room-intro { margin: 8px 0 24px; }
#room-entry { display: block; }
#room-form { gap: 20px; }
.room-dialog input { min-height: 48px; background: var(--surface); color: var(--ink); font-size: 16px; }
.room-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--canvas,#f3f6f6); }
.room-tabs button { flex: 1; border: 0; border-radius: 7px; padding: 10px 8px; color: var(--muted); background: transparent; }
.room-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px #00000010; font-weight: 600; }
#room-create-hint { margin: 0; }
#room-entry-submit { width: 100%; margin: 0; }
.room-dialog .room-entry-foot { text-align: center; margin: 18px 0 0; font-size: 12px; }
#room-message:empty { display: none; }
.room-invite { padding: 18px; margin: 0 0 24px; background: var(--canvas,#f3f6f6); border-radius: 12px; }
.room-invite-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.room-code { font-size: 32px; font-weight: 700; letter-spacing: 5px; }
.room-invite .outline-button { padding: 10px 12px; font-size: 13px; box-shadow: none; }
.room-players-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.room-roster { display: grid; gap: 12px; margin: 14px 0 24px; }
.room-roster li { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 0; padding: 0; }
.room-avatar { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--canvas,#f3f6f6); font-weight: 600; }
.room-player-name { overflow-wrap: anywhere; min-width: 0; }
.room-player-role { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
#room-content > .primary-button { display: block; width: 100%; margin: 12px 0; }
.room-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }
.room-footer .room-note { font-size: 12px; }
.room-footer .text-button { padding: 8px 0; font-size: 13px; }
@media(max-width:480px) { .room-dialog { padding: 22px 18px; } }
@media(pointer:coarse) { .room-tabs button, .room-footer button, #room-close { min-height: 44px; } }