* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #FAF9F6;
  --bg-card: #FFFFFF;
  --text: #1a1a1a;
  --text-muted: #666;
  --text-hint: #999;
  --accent: #B91C1C;
  --accent-light: #FEF2F2;
  --success: #2D6A4F;
  --success-bg: #D8F3DC;
  --warning: #9D4B00;
  --warning-bg: #FFE8CC;
  --danger: #9D0208;
  --danger-bg: #FFE5E5;
  --border: #E5E5E5;
  --pro: #7B2CBF;
  --pro-bg: #F3E8FF;
  --mono: 'Space Mono', monospace;
  --serif: 'Instrument Serif', Georgia, serif;
}

body { font-family: var(--mono); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
.container { max-width: min(860px, 100%); margin: 0 auto; padding: 1rem 1.5rem; }

header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; border-bottom: 2px solid var(--text); margin-bottom: 1.25rem; }
.logo-group { display: flex; align-items: baseline; gap: 0.6rem; }
.logo { font-family: var(--serif); font-size: 1.875rem; font-weight: 400; }
.logo span { color: var(--accent); }
.logo-tag { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.header-actions { display: flex; gap: 0.4rem; }
.btn-icon { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.btn-icon:hover { border-color: var(--text); }

.stats-bar { display: flex; justify-content: space-between; padding: 0.6rem 0; margin-bottom: 1.25rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.stat { text-align: center; }
.stat-value { font-size: 1.125rem; font-weight: 700; display: block; color: var(--accent); }
.stat-label { color: var(--text-muted); }

.game-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: 0.4rem; }
.game-tab { flex-shrink: 0; padding: 0.5rem 0.875rem; font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; border: 2px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.game-tab[data-mode="daily"]:hover    { background: #1a1a1a; border-color: #1a1a1a; color: white; }
.game-tab[data-mode="daily"].active   { background: #1a1a1a; border-color: #1a1a1a; color: white; }
.game-tab[data-mode="tagline"]:hover  { background: #B91C1C; border-color: #B91C1C; color: white; }
.game-tab[data-mode="headline"]:hover { background: #C93A3A; border-color: #C93A3A; color: white; }
.game-tab[data-mode="hook"]:hover     { background: #D95A5A; border-color: #D95A5A; color: white; }
.game-tab[data-mode="brandname"]:hover{ background: #E07878; border-color: #E07878; color: white; }
.game-tab.pro:hover { background: #B91C1C; border-color: #B91C1C; color: white; }
.game-tab[data-mode="tagline"].active  { background: #B91C1C; border-color: #B91C1C; color: white; }
.game-tab[data-mode="headline"].active { background: #C93A3A; border-color: #C93A3A; color: white; }
.game-tab[data-mode="hook"].active     { background: #D95A5A; border-color: #D95A5A; color: white; }
.game-tab[data-mode="brandname"].active{ background: #E07878; border-color: #E07878; color: white; }
.game-tab.pro.active { background: #B91C1C; border-color: #B91C1C; color: white; }
.game-tab.pro::after { content: ' ★'; font-size: 0.55rem; }

.mode-label-wrap { display: flex; align-items: center; gap: 0.4rem; }
.help-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0.55rem; border-radius: 50%; background: var(--border); color: var(--text-muted); cursor: pointer; font-weight: 700; border: none; transition: all 0.15s; }
.help-btn:hover { background: var(--text); color: var(--bg); }
.help-popup { position: absolute; top: calc(100% + 8px); left: 0; background: var(--text); color: var(--bg); padding: 0.75rem; font-size: 0.65rem; font-weight: 400; letter-spacing: 0; text-transform: none; width: 260px; line-height: 1.5; border-radius: 4px; opacity: 0; visibility: hidden; transition: all 0.15s; z-index: 100; }
.help-popup.active { opacity: 1; visibility: visible; }
.help-popup::before { content: ''; position: absolute; bottom: 100%; left: 16px; border: 6px solid transparent; border-bottom-color: var(--text); }

.brief-card { background: var(--bg-card); border: 2px solid var(--text); padding: 1.125rem; margin-bottom: 1.125rem; }
.brief-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.brief-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.brief-number { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.brief-product { font-family: var(--serif); font-size: 1.375rem; font-style: italic; line-height: 1.3; margin-bottom: 0.875rem; }
.brief-description { font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 0.875rem; display: none; }
.brief-description.active { display: block; }
.constraints { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.constraint { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.55rem; border: 1px solid currentColor; }
.constraint.audience { color: #0E7490; background: #ECFEFF; }
.constraint.tone { color: #7B2CBF; background: #F3E8FF; }
.constraint.rule { color: var(--danger); background: var(--danger-bg); }

.input-section { margin-bottom: 1.25rem; }
.input-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.35rem; display: block; }
textarea { width: 100%; min-height: 90px; padding: 0.75rem; font-family: var(--serif); font-size: 1.25rem; font-style: italic; border: 2px solid var(--text); background: var(--bg-card); resize: none; outline: none; }
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--text-hint); }
.input-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; }
.char-count { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

button { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.65rem 1.125rem; border: 2px solid var(--text); background: var(--text); color: var(--bg); cursor: pointer; transition: all 0.15s; }
button:hover { background: var(--accent); border-color: var(--accent); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--text); }
button.secondary:hover { background: var(--text); color: var(--bg); }
button.full-width { width: 100%; margin-top: 0.6rem; }

.loading { text-align: center; padding: 2rem 1rem; }
.loading-text { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.loading-dots::after { content: ''; animation: dots 1.5s infinite; }
@keyframes dots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } }

.results-section { display: none; }
.results-section.active { display: block; }
.submitted-tagline { text-align: center; padding: 1rem; background: var(--bg-card); border: 2px solid var(--text); margin-bottom: 1rem; }
.submitted-tagline .label { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.35rem; }
.submitted-tagline .text { font-family: var(--serif); font-size: 1.25rem; font-style: italic; }

.scores-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; margin-bottom: 1rem; }
.score-item { text-align: center; padding: 0.65rem 0.15rem; border: 2px solid var(--text); }
.score-item.high { background: var(--success-bg); border-color: var(--success); }
.score-item.mid { background: var(--warning-bg); border-color: var(--warning); }
.score-item.low { background: var(--danger-bg); border-color: var(--danger); }
.score-value { font-size: 1.375rem; font-weight: 700; display: block; }
.score-item.high .score-value { color: var(--success); }
.score-item.mid .score-value { color: var(--warning); }
.score-item.low .score-value { color: var(--danger); }
.score-label { font-size: 0.45rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-top: 0.15rem; display: block; }

.total-score { text-align: center; padding: 0.6rem; margin-bottom: 1rem; }
.total-value { font-size: 2.25rem; font-weight: 700; }
.total-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }

.feedback-card { background: var(--bg-card); border: 2px solid var(--text); padding: 0.875rem; margin-bottom: 1rem; }
.feedback-label { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.35rem; }
.feedback-text { font-size: 0.75rem; line-height: 1.6; }

.pro-upsell { background: var(--pro-bg); border: 2px solid var(--pro); padding: 0.875rem; margin-bottom: 1rem; text-align: center; }
.pro-upsell h3 { font-size: 0.75rem; color: var(--pro); margin-bottom: 0.4rem; }
.pro-upsell p { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.pro-upsell button { background: var(--pro); border-color: var(--pro); }
.pro-upsell button:hover { background: #6B21A8; border-color: #6B21A8; }

.share-box { background: var(--text); color: var(--bg); padding: 0.875rem; margin-bottom: 0.6rem; font-size: 0.7rem; }
.share-box pre { font-family: var(--mono); white-space: pre-wrap; line-height: 1.45; }
.button-row { display: flex; gap: 0.35rem; }
.button-row button { flex: 1; }

.error-message { background: var(--danger-bg); border: 2px solid var(--danger); color: var(--danger); padding: 0.75rem; margin-bottom: 0.75rem; font-size: 0.65rem; display: none; }
.error-message.active { display: block; }

.ad-slot { background: #f0f0f0; border: 1px dashed #ccc; padding: 1.25rem; text-align: center; margin: 1.25rem 0; font-size: 0.6rem; color: #999; text-transform: uppercase; letter-spacing: 0.08em; }
.ad-slot.hidden { display: none; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.active { display: flex; }
.modal { background: var(--bg-card); border: 2px solid var(--text); max-width: 400px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 0.9rem; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.375rem; cursor: pointer; padding: 0; line-height: 1; }
.modal-body { padding: 1rem; }

.pricing-toggle { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.25rem; }
.pricing-toggle button { padding: 0.4rem 0.875rem; font-size: 0.6rem; }
.pricing-toggle button.active { background: var(--accent); border-color: var(--accent); }

.plan-card { border: 2px solid var(--border); padding: 1rem; margin-bottom: 0.875rem; }
.plan-card.featured { border-color: var(--pro); position: relative; }
.plan-card.featured::before { content: 'Most popular'; position: absolute; top: -0.65rem; left: 0.875rem; background: var(--pro); color: white; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.4rem; }
.plan-name { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.2rem; }
.plan-price { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; }
.plan-price span { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }
.plan-features { list-style: none; margin-bottom: 0.875rem; font-size: 0.65rem; }
.plan-features li { padding: 0.25rem 0; padding-left: 1.125rem; position: relative; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--success); }
.plan-features li.disabled { color: var(--text-hint); }
.plan-features li.disabled::before { content: '—'; color: var(--text-hint); }

footer { text-align: center; padding: 1.25rem 0; margin-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.6rem; color: var(--text-muted); }
footer a { color: var(--accent); text-decoration: none; }

.daily-done-section { display: block; }
.daily-done-section.hidden { display: none !important; }

.countdown-card { background: var(--bg-card); border: 2px solid var(--text); padding: 0.875rem; margin-bottom: 1rem; text-align: center; }
.countdown-time { font-family: var(--mono); font-size: 1.75rem; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; margin-top: 0.25rem; }

.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }

/* ── Responsive ──────────────────────────────── */

/* Fluid type & spacing — scales smoothly between 320px and 640px */
.logo         { font-size: clamp(1.375rem, 5vw,   1.875rem); }
.brief-product { font-size: clamp(1.05rem,  3.5vw, 1.375rem); }
.total-value  { font-size: clamp(1.75rem,   6vw,   2.25rem); }
.score-value  { font-size: clamp(1rem,      3.2vw, 1.375rem); }
.score-label  { font-size: clamp(0.45rem,   1.2vw, 0.5rem); }
.container    { padding: clamp(0.75rem, 3vw, 2rem) clamp(0.875rem, 4vw, 2rem); }

/* Mobile (≤ 600px) — covers all modern phones */
@media (max-width: 600px) {
  header { padding: 1rem 0; margin-bottom: 1rem; }
  .btn-icon { width: 40px; height: 40px; }
  .stats-bar { margin-bottom: 1rem; }
  .stat-value { font-size: 1rem; }
  .game-tabs { margin-bottom: 1rem; gap: 0.3rem; }
  .game-tab { padding: 0.45rem 0.7rem; font-size: 0.6rem; }
  .brief-card { padding: 1rem; margin-bottom: 1rem; }
  .brief-description { font-size: 0.68rem; }
  .help-popup { width: min(240px, calc(100vw - 2rem)); }
  textarea { font-size: 1.125rem; min-height: 100px; }
  .input-section { margin-bottom: 1rem; }
  .score-item { padding: 0.55rem 0.1rem; }
  .button-row { flex-direction: column; gap: 0.4rem; }
  .button-row button { width: 100%; padding: 0.8rem 1rem; }
  .modal-body { padding: 0.875rem; }
  .modal-header { padding: 0.75rem 0.875rem; }
  .feedback-text { font-size: 0.72rem; }
}

/* Very small phones (≤ 360px) */
@media (max-width: 360px) {
  .game-tab { padding: 0.4rem 0.55rem; font-size: 0.58rem; }
  .help-popup { width: min(200px, calc(100vw - 1.75rem)); }
  .constraint { font-size: 0.5rem; padding: 0.25rem 0.45rem; }
}

/* Tablet (≥ 640px) */
@media (min-width: 640px) {
  .container { padding: 1.5rem 2rem; }
  .brief-product { font-size: 1.5rem; }
  textarea { min-height: 110px; font-size: 1.375rem; }
  .score-value { font-size: 1.5rem; }
  .score-label { font-size: 0.5rem; }
  .total-value { font-size: 2.5rem; }
  .feedback-text { font-size: 0.8rem; }
  .modal { max-width: 440px; }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .container { padding: 2rem; }
  header { margin-bottom: 1.5rem; }
  .stats-bar { margin-bottom: 1.5rem; }
  .game-tabs { margin-bottom: 1.5rem; }
  .brief-card { padding: 1.375rem; margin-bottom: 1.375rem; }
  .brief-product { font-size: 1.625rem; }
  textarea { min-height: 130px; }
}