:root {
  --progress-bg: #e0e0e0;
  --domain-basics: #4CAF50;
  --domain-growth: #FF9800;
  --domain-ambition: #9C27B0;
  --domain-vitality: #2196F3;
  --domain-beauty: #E91E63;
  --footer-h: 64px;
  /* Active state colors */
  --btn-active-pink: #c2185b;  /* darker brand pink */
  --btn-active-green: #16a34a; /* green-600 */
  --btn-active-red: #dc2626;   /* red-600 */
}
body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
/* Domain bar fill: height 100% so width animations are visible */
.bar-fill { height: 100%; border-radius: 999px; transition: width 1.5s ease-out; position: relative; }
#globalFooter { height: var(--footer-h); }
/* Active feedback for Yes/No buttons */
#yesBtn, #noBtn { opacity: 0.8; transition: opacity 120ms ease, transform 60ms ease; }
#yesBtn:active, #noBtn:active { opacity: 1; }
/* Practice mode buttons same behavior */
#practiceYesBtn, #practiceNoBtn { opacity: 0.8; transition: opacity 120ms ease, transform 60ms ease; }
#practiceYesBtn:active, #practiceNoBtn:active { opacity: 1; }

/* Universal button active states */
button, .share-button, .link-like { -webkit-tap-highlight-color: transparent; }
button, .share-button { transition: background-color 120ms ease, transform 60ms ease; }

/* Start and Share buttons use brand pink by default; darken on press */
#startBtn:active, .share-button:active { background-color: var(--btn-active-pink); transform: translateY(1px); }

/* Let's go button active state uses green */
#letsGoBtn:active { background-color: var(--btn-active-green); transform: translateY(1px); }

/* Icon buttons get colored fill on press */
#yesBtn:active { transform: translateY(1px); }
#noBtn:active { transform: translateY(1px); }
#yesBtn img, #noBtn img { pointer-events: none; }

/* Text link button subtle active color */
.link-like:active { color: var(--btn-active-pink); }

/* Prevent scroll globally and use dynamic viewport height */
html, body { height: calc(var(--vh, 1vh) * 100); overflow: hidden; overscroll-behavior: none; }
body.no-scroll { overflow: hidden; height: calc(var(--vh, 1vh) * 100); }
/* Ensure each app section cannot create its own scrollbars */
.section { overflow: hidden; }
  /* Ensure intro fills viewport minus footer so flex centering works on large screens */
  #intro { height: calc(var(--vh, 1vh) * 100 - var(--footer-h)); }
/* Remove double-tap-to-zoom on interactive elements */
button, .share-button, .link-like { touch-action: manipulation; }

  /* Practice typography sizes */
  #practiceIntroText { font-size: 20px; }
  #practice-heading { font-size: 24px; margin-bottom: 10px; }
  /* Intro title */
  #introTitle { font-size: 24px; margin-bottom: 10px; }
  /* Intro buttons spacing (default) */
  #introButtons { margin-top: 12px; }
  /* Game prompt size */
  #gamePrompt { font-size: 24px; }

/* Mobile typography tweaks */
@media (max-width: 480px) {
  /* Intro */
  #intro h2 { font-size: 1.375rem; line-height: 1.6; }
  #intro p { font-size: 0.95rem; }
  #intro { padding-top: 30px; height: calc(var(--vh, 1vh) * 100 - var(--footer-h)); }
  #intro > div { padding-top: 8px !important; padding-bottom: 8px !important; gap: 10px; }
  /* Keep headline on one line on mobile */
  #introTitle { font-size: 20px; white-space: nowrap; }
  /* More space between GIF and Continue on mobile */
  #introButtons { margin-top: 20px; }
  /* Match practice typography to intro on mobile */
  #practice-heading { font-size: 1.375rem; line-height: 1.6; }
  #practiceIntroText { font-size: 0.95rem; }
  /* Reduce game prompt size on mobile by 4px */
  #game #gamePrompt { font-size: 20px; }

/* Smaller footer on mobile (overridden to 0 in embed) */
:root { --footer-h: 48px; }
  #globalFooter .grid { font-size: 10px; }

  /* Results */
  #results { overflow: hidden; align-items: center; }
  #resultsHeader { margin-top: 4px; margin-bottom: 4px; }
  #resultsHeader h2 { font-size: 0.95rem !important; line-height: 1.35; white-space: nowrap; }
  #insightBlock { margin-top: 6px; font-size: 0.875rem !important; line-height: 1.4; max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important; }
  #colorVisualization { margin-top: 4px; }
  #totalScore { font-size: 2.2rem; }
  #benchmarkMessage { font-size: 0.8rem; }
  #benchmarkStats .benchmark-label,
  #benchmarkStats .benchmark-value { font-size: 0.78rem; }
  .bar-name { font-size: 0.8rem; }
  /* Pull Average/Participants closer together */
  #benchmarkStats { display: grid; grid-template-columns: auto auto; column-gap: 8px; justify-content: center; align-items: center; margin-top: 2px; }
  #resultsContent { 
    padding-top: calc(8px + env(safe-area-inset-top)); 
    padding-left: calc(16px + env(safe-area-inset-left)); 
    padding-right: calc(16px + env(safe-area-inset-right)); 
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); 
    height: calc(var(--vh, 1vh) * 100 - var(--footer-h) - 8px); 
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px; 
  }
  #domainBars { width: 100%; max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important; }
  #domainBars .bar-container { height: 4px; }
  .palette-tagline { margin-top: 4px; font-size: 0.85rem; }
  .share-buttons .share-button { padding: 6px 10px; font-size: 0.9rem; }
  /* Two-row mobile layout: top row = 2 buttons; bottom row = Try again */
  #resultsActions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; min-height: auto !important; height: auto !important; }
  #resultsActions .btn-pill { width: 100%; height: 36px; min-height: 36px; max-height: 36px; padding: 0 12px; font-size: 0.85rem; }
  #fullReportBtn, #nativeShareBtn { width: 100%; }
  #retakeBtn { grid-column: 1 / -1; margin-top: 0; font-size: 0.85rem; width: 100% !important; min-width: 0 !important; }
  #shareSection { margin-top: 8px; }
}
/* Overlay */
.overlay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; height: calc(var(--vh, 1vh) * 100); }
.overlay-card { background: #ffffff; border-radius: 16px; width: 100%; max-width: 560px; box-shadow: 0 10px 28px rgba(0,0,0,0.28); padding: 20px; text-align: left; min-height: 220px; display: flex; flex-direction: column; }
.overlay-card h3 { font-size: 1.1rem; font-weight: 600; color: #2c1f1c; margin: 0 0 8px; }
.overlay-card ul { margin: 0 0 10px 18px; color: #2c1f1c; list-style: disc; }
.overlay-actions { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.overlay-btn { background: #ffffff !important; color: #2c1f1c; border: 1px solid #E8E8EA; border-radius: 12px; height: 40px; min-height: 40px; padding: 0 18px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); }
#retakeOverlayNo.overlay-btn { color: #0ea5a4; }
#retakeOverlayYes.overlay-btn { color: #e11d48; }

/* Pre-interaction pulse for real icons (subtle) */
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: .98; } }
.pulse-icon { animation: pulse 1.8s ease-in-out infinite; }
/* Practice buttons: white pill with border and subtle shadow (100x40) */
#practiceYesBtn, #practiceNoBtn {
  width: 100px; /* button width */
  height: 40px; /* button height */
  background: #ffffff;
  border: 1px solid #E8E8EA; /* light gray border */
  border-radius: 12px; /* pill corners */
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
}
#practiceYesBtn img { filter: none; }
#practiceNoBtn img { filter: none; }
/* Icon stroke colors come from SVGs: x '#DC006B' (pink), heart '#3AB4A0' (teal) */
#practiceYesBtn img, #practiceNoBtn img { width: 26px; height: 26px; }
/* Game buttons styled same as practice (100x40) */
#yesBtn, #noBtn {
  width: 100px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #E8E8EA;
  border-radius: 12px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
}
/* Brief colored focus/selection flash for keyboard arrows */
.flash-yes { outline: 2px solid #3AB4A0; box-shadow: 0 0 0 3px rgba(58,180,160,0.25); transition: outline-color 300ms ease, box-shadow 300ms ease; }
.flash-no { outline: 2px solid #DC006B; box-shadow: 0 0 0 3px rgba(220,0,107,0.20); transition: outline-color 300ms ease, box-shadow 300ms ease; }
#yesBtn img, #noBtn img { width: 26px; height: 26px; }
#practiceYesBtn:active, #practiceNoBtn:active { opacity: 1; transform: translateY(1px); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); }

/* Subtle one-time shake for first practice card */
@keyframes shakeSubtle { 0% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-6px) rotate(-0.4deg); } 30% { transform: translateX(6px) rotate(0.4deg); } 45% { transform: translateX(-4px) rotate(-0.3deg); } 60% { transform: translateX(4px) rotate(0.3deg); } 75% { transform: translateX(-2px) rotate(-0.2deg); } 100% { transform: translateX(0) rotate(0); } }
.practice-shake { animation: shakeSubtle 1200ms ease-in-out 1; }
/* Keyboard hint text (desktop only; JS toggles display) */
.kbd-hint { font-size: 12px; color: rgba(0,0,0,0.45); margin-top: 6px; display: none; }
/* Hover arrow tooltips above practice buttons (desktop-only hover) */
.btn-with-hint { position: relative; }
.arrow-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -8px); background: rgba(0,0,0,0.75); color: #fff; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 120ms ease, transform 120ms ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-with-hint:hover .arrow-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, -10px); }
}
/* practice popup is positioned within the card container */
/* Practice desktop keyboard hint */
/* Move the practice hint to the top-right corner of the page (fixed) */
#practiceKeyboardHint { position: fixed; top: 16px; right: 16px; display: none; z-index: 60; }
#practiceKeyboardHint .hint-box { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #E8E8EA; border-radius: 12px; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); padding: 8px 12px; white-space: nowrap; }
#practiceKeyboardHint .hint-text { font-size: 12px; font-weight: 500; color: var(--brand-pink, #e91e63); }
#practiceKeyboardHint .hint-icon { width: 16px; height: 16px; display: inline-block; filter: brightness(0) saturate(100%) invert(16%) sepia(80%) saturate(4243%) hue-rotate(321deg) brightness(97%) contrast(90%); }
/* Unified button style (opt-in via class): white pill, border, 40px height */
.btn-pill {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  background: #ffffff !important;
  border: 1px solid #E8E8EA;
  border-radius: 12px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
  padding: 0 18px; /* ensure visible horizontal padding without relying on Tailwind */
  white-space: nowrap; /* keep label on one line on mobile */
}
/* Notification pill */
.notif-pill { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #E8E8EA; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); padding: 8px 14px; display: none; align-items: center; gap: 8px; z-index: 60; }
.notif-pill.show { display: inline-flex; animation: fadeInOut 1500ms ease forwards; }
.notif-pill-icon { width: 18px; height: 18px; display: inline-block; }
.notif-pill-text { font-weight: 600; color: #e91e63; font-size: 14px; }
@keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%, -6px); } 10% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
/* Preserve colored intent via text color */
#startBtn { color: var(--brand-pink, #e91e63); }
#letsGoBtn { color: #3AB4A0; }
.share-button { color: var(--brand-pink, #e91e63); background: #ffffff !important; }
#practiceNextBtn, #practicePrevBtn { color: #2c1f1c; }
/* Results: desktop hint pills fixed at top-right */
#resultsTopRow { position: fixed; top: 16px; right: 16px; display: none; align-items: flex-end; justify-content: flex-end; gap: 8px; z-index: 60; flex-direction: column; }
.results-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; background: #ffffff; color: #2c1f1c; border: 1px solid #E8E8EA; border-radius: 12px; padding: 0 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.25); white-space: nowrap; }
/* Pink hint, wrapped to ~4 lines */
#desktopResultsHint { color: var(--brand-pink, #e91e63); width: 210px; white-space: normal; line-height: 1.35; height: auto; min-height: calc(1em * 1.35 * 4 + 16px); text-align: left; }
#desktopResultsHint .hint-icon { width: 18px; height: 18px; display: inline-block; filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(3320%) hue-rotate(314deg) brightness(95%) contrast(93%); }
#desktopLearnMoreBtn { margin-top: 6px; }
#desktopLearnMoreBtn { color: #2c1f1c; text-decoration: none; }
/* Results content block styling */
#resultsContent { background: #F5F5F5; border-radius: 18px; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); }
/* Only color the first sentence 'You're in the top X%!'. We wrap it in a span in JS if needed */
#benchmarkMessage .accent { color: var(--brand-pink, #e91e63); }
/* Benchmark pills: reversed cappuccino (filled) with light text */
#benchmarkStats .benchmark-item { background: #b9aca8; border: none; border-radius: 999px; padding: 4px 10px; color: #ffffff; font-size: 12px; }
#benchmarkStats .benchmark-label, #benchmarkStats .benchmark-value { color: #ffffff; font-size: 12px; }
/* Domain bar titles: 12px and semibold */
.bar-name { font-size: 12px; font-weight: 600; }
/* Tagline below bars: cappuccino and 10px */
.palette-tagline { color: #b9aca8; font-size: 10px; }
/* Results action buttons style (match design: filled center, text-only sides) */
#resultsActions { align-items: center; display: grid !important; grid-template-columns: 1fr auto 1fr; justify-items: center; gap: 12px; }
#fullReportBtn { background: #2c1f1c !important; color: #ffffff !important; border: none; box-shadow: none; padding-left: 28px; padding-right: 28px; border-radius: 10px; }
#fullReportBtn img { display: none; }
#retakeBtn, #nativeShareBtn { background: transparent !important; border: none; box-shadow: none; color: #2c1f1c !important; padding-left: 0; padding-right: 0; height: auto; min-height: 0; max-height: none; }
#retakeBtn span { color: #2c1f1c !important; }
/* Override legacy widths so side labels don't reserve extra space */
#retakeBtn { width: auto !important; min-width: 0 !important; }
#retakeBtn img, #nativeShareBtn img { display: none; }
/* Retake confirmation: separate pill + actions, all matching Try again width */
#retakeBtn { width: 30%; min-width: 220px; }
/* Reserve tallest row height so page doesn't re-center when toggling */
#resultsActions { min-height: 56px; height: 56px; align-items: center; }
/* Nudge results content slightly lower on desktop to clear the hint */
@media (min-width: 641px) { #resultsContent { padding-top: 20px; } }

/* Compress spacing slightly on short screens so all content fits */
@media (max-height: 720px) {
  #resultsHeader { margin-top: 2px; margin-bottom: 2px; }
  #resultsHeader h2 { font-size: 0.95rem; }
  #totalScore { font-size: 2rem; }
  #insightBlock { margin-top: 4px; font-size: 0.82rem; line-height: 1.3; }
  #benchmarkMessage { font-size: 0.75rem; }
  #benchmarkStats .benchmark-label, #benchmarkStats .benchmark-value { font-size: 0.74rem; }
  #domainBars { margin-top: 2px; }
  .palette-tagline { margin-top: 2px; }
}
#retakeConfirmPill { position: absolute; display: none; z-index: 55; background: #ffffff; border: 1px solid #E8E8EA; border-radius: 12px; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25); padding: 12px 16px; }
#retakeConfirmPill .title { font-size: 14px; font-weight: 500; color: #2c1f1c; line-height: 1.3; }
#retakeConfirmButtons { position: absolute; display: none; z-index: 55; }
#retakeConfirmButtons .actions { display: flex; gap: 12px; }
#retakeConfirmButtons .actions > button { flex: 1 1 0; font-size: 14px; }
/* Multi-line pill variant for inline confirm state */
.btn-pill-multi { height: auto; min-height: 56px; max-height: none; white-space: normal; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; text-align: left; }
#retakeConfirmDelete { background: #e11d48; color: #ffffff; }
#retakeConfirmCancel { color: #0ea5a4; background: #ffffff; border: 1px solid #E8E8EA; }
/* Mobile overlay sizing */
@media (max-width: 480px) {
  .overlay-card { max-width: 94vw; padding: 16px; }
  /* Match in-game card ratio on mobile as well */
  #reportOverlay .overlay-card { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
  #reportOverlay #reportEmailInput { font-size: 16px; padding: 14px 12px; }
  #reportOverlay #reportSendBtn { height: 44px; min-height: 44px; max-height: 44px; }
  /* Force results action buttons to one line on small screens */
  #resultsActions { display: flex !important; align-items: center; justify-content: space-between; gap: 8px !important; width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
  #resultsActions .btn-pill { width: auto !important; min-width: 0 !important; height: 36px; min-height: 36px; max-height: 36px; padding: 0 12px; font-size: 0.95rem; }
  #fullReportBtn { order: 2; }
  #retakeBtn { order: 1; }
  #nativeShareBtn { order: 3; }
  #retakeBtn, #nativeShareBtn { white-space: nowrap; }
  #fullReportBtn { justify-self: center; }
  /* Avoid clipped sides: use white background and remove shadow on mobile */
  #resultsContent { background: #ffffff; box-shadow: none; margin-left: 6px; margin-right: 6px; }
  /* Tighten spacing around large score on mobile */
  #totalScore { margin-top: 2px; margin-bottom: 6px; }
}