/* ==========================================================================
   Cancun100 Quiz – Mobile-First Responsive
   ========================================================================== */
:root {
    --q-bg: #0a0e27;
    --q-card: #121638;
    --q-soft: #1a1f4a;
    --q-teal: #00e5c7;
    --q-teal-dk: #00b89c;
    --q-coral: #ff6b6b;
    --q-yellow: #ffd93d;
    --q-purple: #a855f7;
    --q-blue: #38bdf8;
    --q-white: #ffffff;
    --q-t1: rgba(255,255,255,0.92);
    --q-t2: rgba(255,255,255,0.6);
    --q-t3: rgba(255,255,255,0.35);
    --q-border: rgba(255,255,255,0.08);
    --q-radius: 16px;
    --q-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.c100q { font-family: var(--q-font); max-width: 520px; margin: 0 auto; -webkit-font-smoothing: antialiased; line-height: 1.5; }
.c100q *, .c100q *::before, .c100q *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* HEADER */
.c100q-head { background: linear-gradient(135deg, var(--q-bg) 0%, #1a0f3e 40%, #0f2847 100%); border-radius: var(--q-radius) var(--q-radius) 0 0; padding: 28px 20px; text-align: center; position: relative; overflow: hidden; border-top: 3px solid var(--q-teal); }
.c100q-head::before { content:''; position:absolute; top:-50px; right:-30px; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(168,85,247,0.2), transparent); pointer-events:none; }
.c100q-head::after { content:''; position:absolute; bottom:-40px; left:-20px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(0,229,199,0.12), transparent); pointer-events:none; }
.c100q-head-tag { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--q-teal); font-weight: 600; }
.c100q-head-title { font-size: 20px; font-weight: 700; color: var(--q-white); margin-top: 6px; line-height: 1.2; }
.c100q-head-sub { font-size: 12px; color: var(--q-t2); margin-top: 4px; }

/* BODY */
.c100q-body { background: var(--q-card); border-radius: 0 0 var(--q-radius) var(--q-radius); border: 1px solid var(--q-border); border-top: none; padding: 20px 16px; }

/* INTRO */
.c100q-intro { text-align: center; }
.c100q-intro-emoji { font-size: 48px; line-height: 1; margin-bottom: 10px; }
.c100q-intro h3 { font-size: 17px; font-weight: 700; color: var(--q-t1); margin-bottom: 8px; }
.c100q-intro p { font-size: 13px; color: var(--q-t2); line-height: 1.6; margin-bottom: 20px; }
.c100q-profile-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.c100q-profile-dot { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.c100q-btn-start { display: block; width: 100%; padding: 14px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--q-teal), var(--q-teal-dk)); color: var(--q-bg); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--q-font); letter-spacing: 0.3px; transition: transform 0.15s; }
.c100q-btn-start:active { transform: scale(0.97); }
.c100q-intro-hint { font-size: 10px; color: var(--q-t3); text-align: center; margin-top: 10px; }

/* PROGRESS */
.c100q-progress { display: flex; gap: 4px; margin-bottom: 16px; }
.c100q-progress-seg { flex: 1; height: 4px; border-radius: 4px; transition: background 0.4s; }
.c100q-progress-seg.done { background: linear-gradient(90deg, var(--q-teal), var(--q-blue)); }
.c100q-progress-seg.todo { background: rgba(255,255,255,0.06); }
.c100q-step-num { font-size: 11px; color: var(--q-teal); text-align: center; margin-bottom: 12px; font-weight: 600; letter-spacing: 1px; }

/* QUESTION */
.c100q-question { font-size: 17px; font-weight: 700; color: var(--q-t1); text-align: center; margin-bottom: 4px; line-height: 1.3; }
.c100q-question-sub { font-size: 12px; color: var(--q-t2); text-align: center; margin-bottom: 18px; }

/* OPTIONS */
.c100q-options { display: flex; flex-direction: column; gap: 10px; }
.c100q-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; cursor: pointer; transition: all 0.2s; background: rgba(255,255,255,0.04); border: 1.5px solid var(--q-border); }
.c100q-opt:active { transform: scale(0.97); }
.c100q-opt.selected { border-color: var(--q-teal); background: rgba(0,229,199,0.1); }
.c100q-opt-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
.c100q-opt-label { font-size: 14px; font-weight: 500; color: var(--q-t1); }
.c100q-opt-check { margin-left: auto; color: var(--q-teal); font-size: 16px; font-weight: 700; }

/* RESULT */
.c100q-result { text-align: center; }
.c100q-result-icon-wrap { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.c100q-result-icon-wrap svg { width: 42px; height: 42px; }
.c100q-result-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.c100q-result-desc { font-size: 13px; color: var(--q-t2); line-height: 1.6; margin-bottom: 20px; }
.c100q-cats-label { font-size: 10px; font-weight: 700; color: var(--q-teal); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.c100q-cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.c100q-cat-card { display: block; padding: 14px 10px; border-radius: 12px; text-decoration: none; text-align: center; transition: all 0.2s; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid var(--q-border); }
.c100q-cat-card:hover { border-color: currentColor; background: rgba(255,255,255,0.08); }
.c100q-cat-name { font-size: 12px; font-weight: 600; color: var(--q-t1); }
.c100q-cat-link { font-size: 10px; font-weight: 600; margin-top: 4px; }

/* AI CHAT BUTTON */
.c100q-btn-ai { display: block; width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid var(--q-teal); background: rgba(0,229,199,0.08); color: var(--q-teal); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--q-font); margin-bottom: 10px; transition: background 0.2s; }
.c100q-btn-ai:hover { background: rgba(0,229,199,0.16); }

/* RESTART */
.c100q-btn-restart { display: block; width: 100%; padding: 10px; border-radius: 10px; border: none; background: rgba(255,255,255,0.05); color: var(--q-t2); font-size: 12px; cursor: pointer; font-family: var(--q-font); }

/* AI CHAT */
.c100q-chat { border-top: 1px solid var(--q-border); padding-top: 16px; margin-top: 4px; }
.c100q-chat-label { font-size: 10px; color: var(--q-teal); text-align: center; margin-bottom: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.c100q-chat-msgs { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.c100q-msg { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; max-width: 88%; word-wrap: break-word; }
.c100q-msg-user { align-self: flex-end; background: var(--q-teal); color: var(--q-bg); border-radius: 14px 14px 4px 14px; }
.c100q-msg-ai { align-self: flex-start; background: rgba(255,255,255,0.08); color: var(--q-t1); border-radius: 14px 14px 14px 4px; }
.c100q-msg-ai a { color: var(--q-teal); font-weight: 600; }
.c100q-chat-input { display: flex; gap: 8px; }
.c100q-chat-input input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--q-border); font-size: 13px; font-family: var(--q-font); outline: none; background: rgba(255,255,255,0.06); color: var(--q-t1); min-width: 0; }
.c100q-chat-input input:focus { border-color: var(--q-teal); }
.c100q-chat-input input::placeholder { color: var(--q-t3); }
.c100q-chat-input button { padding: 10px 16px; border-radius: 10px; border: none; background: var(--q-teal); color: var(--q-bg); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--q-font); white-space: nowrap; flex-shrink: 0; }
.c100q-chat-input button:disabled { opacity: 0.5; cursor: default; }

.c100q-footer { font-size: 10px; color: var(--q-t3); text-align: center; margin-top: 12px; }

/* DESKTOP */
@media (min-width: 641px) {
    .c100q-head { padding: 36px 24px; }
    .c100q-head-title { font-size: 23px; }
    .c100q-body { padding: 24px 20px; }
    .c100q-question { font-size: 18px; }
    .c100q-opt { padding: 14px 16px; }
}