/* CookCredit Live — mobile-first. Palette + type matched to the cookcredit.com
   (mise) product: Inter, warm "espresso on cream/bone" with forest-green +
   terracotta + amber accents. Warm-dark variant here (this is a camera app). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Matched to the cookcredit.com (mise) Browse/Skill screens: cream/espresso,
     editorial SERIF headings + Inter body, forest-green + gold accents, sharp cards. */
  --serif:     'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --bg:        #F4F1EA;   /* cream */
  --bg-2:      #FEFDFB;   /* near-white surface (headers) */
  --fg:        #1A1A1A;   /* espresso */
  --dim:       #8a8a8a;   /* muted gray */
  --line:      #E6E2D9;   /* hairline */
  --accent:    #2D6A4F;   /* forest green -- cookcredit brand */
  --accent-2:  #C8A04A;   /* gold -- tier / stars */
  --plasma:    #C8A04A;   /* gold (play energy, restrained) */
  --hot:       #C4561F;   /* terracotta deep (sparingly) */
  --gold:      #C8A04A;
  --warn:      #B87800;
  --danger:    #D32F2F;
  --card:      #FFFFFF;
  --card-2:    #F4F1EA;
  --green:     #2E7D32;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100vw; height: 100vh; height: 100dvh;  /* dvh tracks the mobile address bar so nothing hides below the fold */
  background: var(--bg); color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}
body {
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen {
  flex: 1; min-height: 0; width: 100%;   /* min-height:0 lets a too-tall screen actually scroll inside the flex column */
  display: flex; flex-direction: column;
  padding: 16px 16px;
  gap: 13px;
  overflow-y: auto;                       /* scroll when content exceeds the viewport (phones) */
  -webkit-overflow-scrolling: touch;
}

/* ---- Splash ---- */
.brand h1 {
  font-family: var(--serif); font-size: 31px; font-weight: 500;
  letter-spacing: 0; color: var(--fg);
}
.brand .tag {
  color: var(--dim); font-size: 11px;
  margin-top: 5px; text-transform: uppercase;
  letter-spacing: 0.22em; font-weight: 600;
}
/* Editorial serif for big display type (titles, score, grade, countdown). */
.score-num, .grade, .countdown-num, .reveal-kicker + * h2 { font-family: var(--serif); font-weight: 500; }
.score-num { font-weight: 600; }
/* Live screen sits over the camera -> light text on the dark glass chrome. */
#screen-live .hud-val, #screen-live .sess-time, #screen-live .countdown-num,
#screen-live .ctrl-btn, #screen-live .face-prompt { color: #FEFDFB; }
#screen-live .hud-label, #screen-live .ct-label, #screen-live .countdown-hint { color: rgba(255,255,255,0.55); }
#screen-live .countdown-label, #screen-live .ct-val,
#screen-live .ctrl-btn span:last-child { color: var(--gold); }
.hand-pick { margin-top: 16px; }
.hand-pick h2 {
  font-size: 18px; font-weight: 500;
  color: var(--fg); margin-bottom: 14px;
}
.hand-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hand-btn {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px 12px;
  color: var(--fg); font-size: 15px;
  cursor: pointer; transition: 0.15s all;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  min-height: 104px;
}
.hand-btn:active { transform: scale(0.97); }
.hand-btn.selected {
  border-color: var(--accent);
  background: rgba(45, 106, 79, 0.08);
}
.hand-emoji { font-size: 34px; line-height: 1; }
.hand-label { font-weight: 600; letter-spacing: 1px; }
.hand-note {
  font-size: 12px; color: var(--dim); margin-top: 10px;
  text-align: center;
}

.splash-actions { margin-top: auto; }
.primary {
  background: var(--accent); color: #FEFDFB;
  border: none; border-radius: 4px;
  padding: 16px 24px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  width: 100%;
  transition: 0.15s all;
}
.primary:disabled { opacity: 0.35; cursor: not-allowed; }
.primary:not(:disabled):active { transform: scale(0.98); }
.primary.big { padding: 22px 24px; font-size: 22px; }
.secondary {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 13px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; width: 100%; cursor: pointer; margin-bottom: 10px;
}
.secondary:active { transform: scale(0.98); }
.splash-status {
  font-size: 13px; color: var(--dim);
  text-align: center; margin-top: 12px;
}

/* ---- Live ---- */
#screen-live { padding: 0; overflow: hidden; }   /* camera fills the viewport, must not scroll */
.video-wrap {
  position: relative;
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
}
#video, #overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#video { transform: scaleX(-1); }    /* mirrored selfie view */
#overlay { transform: scaleX(-1); pointer-events: none; }

.hud {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: space-around;
  pointer-events: none;
}
.hud-top {
  top: max(env(safe-area-inset-top), 12px);
  padding: 0 12px;
  justify-content: flex-end; gap: 8px;   /* stats cluster right; cut-type owns the left */
}

/* Live cut-type chip (top-left). */
.cut-type {
  position: absolute;
  top: max(env(safe-area-inset-top), 12px);
  left: 12px;
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(232,145,122,0.40);
  border-radius: 11px;
  padding: 6px 11px;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
}
.ct-label { font-size: 8px; letter-spacing: 1.4px; color: var(--dim); }
.ct-val   { font-size: 14px; font-weight: 800; letter-spacing: 0.4px; color: var(--accent-2); }

/* 60s assessment: depleting top bar + time remaining */
.sess-bar-wrap {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.10); z-index: 6; pointer-events: none;
}
.sess-bar { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 0.4s linear; }
.sess-time {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
  color: var(--fg); background: rgba(20,16,12,0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 2px 9px; border-radius: 8px;
}

/* Elite 95+ credit reward (results) */
.credit-reward {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: linear-gradient(135deg, rgba(61,154,111,0.16), rgba(232,184,120,0.12));
  border: 1px solid rgba(232,184,120,0.40);
  border-radius: 14px; padding: 13px 15px;
}
.credit-ico { font-size: 24px; color: var(--gold); line-height: 1; }
.credit-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.credit-txt b { font-size: 15px; color: var(--fg); }
.credit-txt span { font-size: 12px; color: var(--dim); }

/* Liveness gate prompt (pre-countdown) */
.face-prompt {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 30; background: rgba(20,16,12,0.86);
  border: 1px solid rgba(232,145,122,0.5); border-radius: 14px;
  padding: 15px 22px; font-size: 16px; font-weight: 700; color: var(--fg);
  text-align: center; letter-spacing: 0.3px; pointer-events: none;
}

/* Beta honesty notice on the results */
.beta-note {
  font-size: 11px; letter-spacing: 0.03em; color: var(--warn);
  background: rgba(200,160,74,0.10); border: 1px solid rgba(200,160,74,0.35);
  border-radius: 4px; padding: 7px 12px; text-align: center; max-width: 360px;
}
.hud-cell {
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 11px; border-radius: 11px;
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  min-width: 60px;
}
.hud-label {
  font-size: 8px; letter-spacing: 1.4px;
  color: var(--dim);
}
.hud-val {
  font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.countdown-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 16, 12, 0.82);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  pointer-events: none;
}
.countdown-label {
  font-size: 28px; letter-spacing: 6px;
  color: var(--accent);
}
.countdown-num {
  font-size: 88px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}
.countdown-hint {
  font-size: 14px; color: var(--dim);
  letter-spacing: 1px;
}
.countdown-hint span {
  color: var(--accent-2); font-weight: 600;
}

.stroke-flash {
  position: absolute;
  top: 40%;
  left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  pointer-events: none;
  animation: strokePop 0.45s ease-out forwards;
}
.stroke-ring {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  color: #0d1117;
  font-size: 56px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 8px rgba(43, 217, 184, 0.25);
}
.stroke-flash-label {
  font-size: 18px; font-weight: 700;
  color: var(--accent-2); letter-spacing: 4px;
}
@keyframes strokePop {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0; }
}

.ctrl-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: max(env(safe-area-inset-bottom), 16px);
  padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.ctrl-btn {
  background: rgba(34, 28, 22, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 2px; align-items: center;
}
.ctrl-btn:active { transform: scale(0.96); }
.ctrl-btn.stop { background: rgba(255, 107, 107, 0.18); border-color: var(--danger); color: var(--danger); }
.ctrl-btn span:last-child {
  font-size: 16px; font-weight: 800;
  color: var(--accent-2);
}
.ctrl-btn.stop span:last-child { color: var(--danger); }

.status-line {
  position: absolute;
  left: 12px; bottom: 90px;
  font-size: 11px; color: rgba(255,255,255,0.45);
  font-family: ui-monospace, monospace;
  pointer-events: none;
  max-width: 80vw;
}

/* ---- Summary ---- */
.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 16px;
}
.summary-cell {
  background: var(--card);
  border: 1px solid var(--card-2);
  border-radius: 14px;
  padding: 20px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.summary-num {
  font-size: 38px; font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.summary-cap {
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--dim);
}
.summary-detail {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
}
.summary-detail > div {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--card-2);
  padding-bottom: 6px;
}
.summary-detail > div:last-child { border-bottom: none; padding-bottom: 0; }
.summary-detail span:first-child { color: var(--dim); }
.summary-detail span:last-child { color: var(--fg); font-weight: 600; }

/* ---- Error overlay ---- */
.err-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 17, 23, 0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.err-card {
  background: var(--card);
  border-radius: 16px; padding: 24px;
  max-width: 360px; width: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.err-card h3 {
  font-size: 18px;
  color: var(--danger);
}
.err-card p {
  font-size: 14px; color: var(--fg); line-height: 1.45;
}
.err-card pre {
  font-size: 11px; color: var(--dim);
  background: var(--card-2);
  padding: 8px; border-radius: 8px;
  overflow-x: auto; white-space: pre-wrap;
}

/* ============================================================= */
/* Identity: faint motion-capture "landmark" motif on non-live    */
/* screens (a quiet grid of dots + a brand glow) so it never      */
/* reads as a generic dark template.                              */
/* ============================================================= */
#screen-splash, #screen-summary {
  /* Cream surface + the cookware line-art motif made VISIBLE (forest strokes on cream). */
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%232D6A4F' stroke-width='0.7' opacity='0.09'%3E%3Cpath d='M30 20v30M26 20v12a4 4 0 004 4 4 4 0 004-4V20M34 20v12'/%3E%3Cellipse cx='80' cy='28' rx='8' ry='12'/%3E%3Cpath d='M80 40v20'/%3E%3Cpath d='M130 15v45M130 15c8 0 8 20 0 20'/%3E%3Cpath d='M180 55v15M180 55c-8-20 0-40 0-40M180 55c8-20 0-40 0-40M180 55c-4-20 0-40 0-40M180 55c4-20 0-40 0-40'/%3E%3Crect x='215' y='30' width='30' height='22' rx='3'/%3E%3Cpath d='M210 35h40M225 30v-8M235 30v-8'/%3E%3Crect x='20' y='100' width='40' height='10' rx='5'/%3E%3Crect x='14' y='102' width='8' height='6' rx='2'/%3E%3Crect x='58' y='102' width='8' height='6' rx='2'/%3E%3Crect x='95' y='90' width='14' height='8' rx='2'/%3E%3Cpath d='M102 98v22'/%3E%3Cpath d='M140 110h20v-5a10 10 0 00-20 0z'/%3E%3Ccircle cx='145' cy='98' r='5'/%3E%3Ccircle cx='155' cy='98' r='5'/%3E%3Ccircle cx='150' cy='94' r='5'/%3E%3Crect x='190' y='90' width='16' height='28' rx='2'/%3E%3Cpath d='M194 96h2M200 96h2M194 102h2M200 102h2M194 108h2M200 108h2'/%3E%3Cellipse cx='240' cy='105' rx='18' ry='6'/%3E%3Cellipse cx='240' cy='105' rx='12' ry='4'/%3E%3Cpath d='M25 170c0-8 6-14 12-14s12 6 12 14v20H25z'/%3E%3Cpath d='M25 180h24'/%3E%3Crect x='78' y='165' width='12' height='24' rx='3'/%3E%3Cpath d='M84 165v-8M80 162h8'/%3E%3Crect x='130' y='170' width='18' height='18' rx='2'/%3E%3Cpath d='M148 175a6 6 0 010 8'/%3E%3Crect x='185' y='168' width='28' height='20' rx='4'/%3E%3Cpath d='M190 188v6'/%3E%3Cellipse cx='245' cy='178' rx='8' ry='11' transform='rotate(-15 245 178)'/%3E%3Ccircle cx='30' cy='240' r='12'/%3E%3Ccircle cx='30' cy='240' r='8'/%3E%3Cpath d='M30 240v-6M26 228h8'/%3E%3Ccircle cx='90' cy='235' r='9'/%3E%3Cpath d='M97 229l14-14'/%3E%3Crect x='140' y='225' width='20' height='16' rx='1'/%3E%3Cpath d='M150 241v10'/%3E%3Cellipse cx='210' cy='240' rx='18' ry='5'/%3E%3Cpath d='M228 240h18'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---- Mode segmented control ---- */
.mode-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 5px; padding: 5px;
}
.mode-opt {
  background: transparent; border: none; cursor: pointer;
  border-radius: 3px; padding: 12px 8px; color: var(--dim);
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  transition: 0.15s all;
}
.mode-opt .mode-t { font-size: 14px; font-weight: 800; letter-spacing: 1px; }
.mode-opt .mode-s { font-size: 10px; letter-spacing: 0.5px; opacity: 0.8; }
.mode-opt.selected { background: rgba(200,160,74,0.14); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.mode-opt.selected[data-mode="test"] { background: rgba(45,106,79,0.10); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ============================================================= */
/* Score reveal                                                   */
/* ============================================================= */
#screen-summary.reveal { justify-content: center; align-items: center; overflow-y: auto; }
.reveal-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
}
.reveal-kicker {
  font-size: 12px; letter-spacing: 4px; font-weight: 700; color: var(--accent-2);
  animation: fadeUp 0.4s both;
}
.reveal.test .reveal-kicker { color: var(--accent); }

.score-hero { margin: 4px 0; animation: popIn 0.5s both; }
.score-ring {
  width: 208px; height: 208px; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring-col, var(--accent-2)) calc(var(--p,0) * 1%),
              #E6E2D9 0);
  transition: background 0.1s linear;
}
.score-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 1px 4px rgba(0,0,0,0.05); }
.score-num { position: relative; z-index: 1; font-size: 74px; font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.score-of { position: relative; z-index: 1; font-size: 13px; color: var(--dim);
  letter-spacing: 2px; margin-top: 2px; }

.grade-row { display: flex; align-items: center; gap: 14px; animation: fadeUp 0.5s 0.1s both; }
.grade { font-size: 34px; font-weight: 800; color: var(--gold);
  letter-spacing: 1px; min-width: 48px; }
.stars { font-size: 22px; letter-spacing: 3px; }
.stars .on  { color: var(--gold); }
.stars .off { color: rgba(255,255,255,0.18); }
.reveal.test .grade { color: var(--accent); }

.verdict { font-size: 15px; color: var(--fg); opacity: 0.9; min-height: 20px;
  animation: fadeUp 0.5s 0.15s both; }

.bars { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.bar { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 10px; }
.bar-l { font-size: 10px; letter-spacing: 1.5px; color: var(--dim); text-align: left; }
.bar-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar-track i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.7s cubic-bezier(.2,.8,.2,1); }
.reveal.test .bar-track i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bar-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.earn {
  margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--gold);
  letter-spacing: 0.5px; animation: popIn 0.5s 0.4s both;
}
.reveal-meta { font-size: 12px; color: var(--dim); letter-spacing: 0.5px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn  { 0% { opacity: 0; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }

/* Tablet / desktop scaling */
@media (min-width: 700px) {
  .screen { max-width: 600px; margin: 0 auto; }
  #screen-live { max-width: 100%; }
}