/* Kukutana by Pendaneni: re-themes the comic prototype to the Ribbon brand.
   Orchid halftone and rays, plum outlines, the logo inside a white burst,
   yellow action bursts and a white conversation area. */
:root { --cyan: #e27ac9; --dark-cyan: #c752a8; --ink: #4a0d33; --plum: #6b1442; --orchid: #d65db1; }

body {
  background: repeating-conic-gradient(from 6deg at 50% 12%, #e07bc8 0deg 12deg, #cf5db3 12deg 23deg, #e07bc8 23deg 34deg, #fff 34deg 35deg) fixed;
  color: var(--ink);
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
}
.page-dots { background-image: radial-gradient(#6b1442 2.2px, transparent 2.6px); opacity: .35; }

/* Masthead: logo in a white comic burst, flanked by the two faces. */
.masthead .brand {
  position: relative; width: auto; height: auto; padding: 34px 64px; background: none;
  filter: drop-shadow(5px 6px 0 var(--ink)); transform: rotate(-2deg);
}
.masthead .brand::before {
  display: block; content: ''; position: absolute; inset: 0; background: #fff;
  clip-path: polygon(0 35%, 9% 24%, 10% 4%, 25% 12%, 30% 0, 45% 10%, 55% 0, 65% 10%, 82% 3%, 88% 20%, 100% 25%, 94% 45%, 100% 62%, 90% 73%, 92% 94%, 73% 88%, 64% 100%, 48% 90%, 35% 100%, 25% 90%, 9% 95%, 10% 73%, 0 65%, 5% 50%);
}
.masthead .brand img { position: relative; display: block; width: clamp(220px, 30vw, 400px); height: auto; }
.masthead > .mascot { display: block; font-size: 76px; top: 58px; }
.masthead > .laugh { left: calc(50% - 330px); }
.masthead > .surprise { right: calc(50% - 330px); }
.header-sticker, .age-sticker { color: var(--ink); }

/* Nav and panels: plum outlines instead of near-black. */
.nav-bar, .preferences, .chat-panel, .login-card, .site-footer { border-color: var(--ink) !important; }
.site-footer { background: var(--ink); }
.site-footer a { color: inherit; }
.profile-form { margin-left: auto; }
.profile-form .profile-button { margin-left: 0; }

/* Live chat additions */
.status-dot[data-state="searching"] { background: #f5b800; animation: pulse 1s infinite alternate; }
.status-dot[data-state="idle"] { background: #b9a0b0; }
@keyframes pulse { to { opacity: .35; } }
.system-note { text-align: center; color: #7a5a6c; font-size: .85rem; font-weight: 700; margin: 10px auto; max-width: 80%; }
.chat-panel button:disabled, .chat-footer button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.call-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: #fff3a8; border-top: 3px solid var(--ink); font-weight: 800; }
.call-buttons { display: flex; gap: 8px; }
.call-buttons button { border: 3px solid var(--ink); border-radius: 999px; padding: 6px 16px; background: #fff; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.call-buttons .call-accept { background: #3fd07a; }
#call-end { background: #ff6b5e; }

/* Join form */
.join-error { background: #ffe1df; border: 3px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-weight: 800; margin: 0 0 12px; }
.login-card input[type="date"] { border: 0; background: transparent; font: inherit; width: 100%; min-height: 40px; }
.check-label { margin-top: 8px; }
.demo-note a { color: inherit; }

/* Report dialog */
#report-dialog { border: 4px solid var(--ink); border-radius: 22px; padding: 26px; max-width: min(92vw, 440px); box-shadow: 8px 9px 0 var(--ink); text-align: center; }
#report-dialog::backdrop { background: rgba(74, 13, 51, .45); }
#report-dialog h2 { font-family: var(--comic); font-size: 2rem; letter-spacing: 1px; margin: 4px 0; }
.report-reasons { display: grid; gap: 8px; text-align: left; margin: 16px 0; }
.report-reasons label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 2.5px solid var(--ink); border-radius: 12px; font-weight: 700; cursor: pointer; }
.report-reasons label:has(input:checked) { background: #fff3a8; }
.dialog-actions { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.plain-button { border: 0; background: none; font-weight: 800; text-decoration: underline; }

@media (max-width: 800px) {
  .masthead > .mascot { display: none; }
  .masthead .brand { padding: 22px 40px; }
}

/* Remaining teal from the prototype */
.login-story > p { background: rgba(255, 255, 255, .88); color: var(--ink); padding: 6px 12px; }
.preference-list input { accent-color: var(--plum); }
.preference-list label:has(input:checked) { background: #ffe9f6 !important; }
.login-card label[for] { display: block; margin-top: 14px; }
.site-footer { background: var(--ink) !important; color: #fff !important; font-size: 11px !important; padding: 12px 24px !important; }
.site-footer span:first-child { background: none !important; color: #ffe500 !important; }
@media (max-width: 800px) { .site-footer span:first-child { display: none; } }