:root {
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));

  --walnut-0:#090706;
  --walnut-1:#160e0a;
  --walnut-2:#2a160c;
  --brass:#d9a441;
  --brass-hi:#ffd685;
  --brass-lo:#8a5f1e;
  --ivory:#f2e4c7;
  --charcoal:#161311;
  --oxblood:#7a1a05;
  --oxblood-2:#9c2408;
  --ink:#1a1a1a;
  --shadow:0 28px 80px rgba(0,0,0,.58);
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Libre Caslon Condensed', 'Times New Roman', serif;
}

* { box-sizing:border-box; }
html, body {
  margin:0; min-height:100%;
  background:var(--walnut-0);
  color:var(--ivory);
  font-family:var(--sans);
  overflow-x:hidden;
}
body { min-width:320px; }
button { font:inherit; color:inherit; border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
img { -webkit-user-drag:none; user-select:none; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- desk backdrop ---------- */
.app {
  min-height:100svh;
  padding-top:var(--eazo-safe-area-top);
  padding-bottom:var(--eazo-safe-area-bottom);
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(circle at 50% 2%, rgba(216,96,24,.30), transparent 30%),
    radial-gradient(circle at 18% 22%, rgba(255,214,133,.10), transparent 34%),
    linear-gradient(145deg, #080605 0%, #1b0f09 44%, #050403 100%);
}
.app::before {
  content:""; position:absolute; inset:-14%; z-index:-2;
  background:
    linear-gradient(92deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(105deg, rgba(117,65,27,.22) 0 9px, rgba(40,18,8,.26) 9px 20px, rgba(83,38,15,.18) 20px 31px);
  transform:rotate(-3deg) scale(1.08); opacity:.88;
}
.app::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 20%, transparent 0 42%, rgba(0,0,0,.4) 84%),
    linear-gradient(180deg, rgba(255,185,79,.06), rgba(0,0,0,.22));
}

/* ---------- layout ---------- */
.wrap {
  width:min(100%, 440px);
  margin:0 auto;
  padding:6px 16px 14px;
  display:flex; flex-direction:column;
  gap:12px; min-width:0;
  min-height:calc(100svh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom));
}
.wrap[hidden] { display:none; }

.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.brand { min-width:0; }
.kicker {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,228,199,.66); font-weight:800;
}
.title {
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px, 8.5vw, 36px); line-height:.94;
  margin:2px 0 0; color:var(--ivory);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* language toggle — brass switch */
.lang {
  display:inline-flex; flex:none; border-radius:999px; overflow:hidden;
  border:1px solid rgba(217,164,65,.5);
  background:linear-gradient(180deg, rgba(255,214,133,.14), rgba(0,0,0,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.lang-btn {
  padding:8px 12px; font-size:12px; font-weight:800; letter-spacing:.06em;
  color:rgba(242,228,199,.7); min-height:36px;
}
.lang-btn.active {
  color:var(--walnut-0);
  background:linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, var(--brass-lo));
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* meters row: streak + flip counter, card count */
.meters { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.counter { display:flex; align-items:center; gap:9px; }
.counter-label {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,228,199,.6); font-weight:800;
}
.flip {
  font-family:var(--display); font-size:26px; font-weight:700; line-height:1;
  min-width:44px; padding:6px 4px 7px; text-align:center;
  color:var(--ivory); background:linear-gradient(180deg,#211b16 0 50%, #14100c 50% 100%);
  border-radius:6px; border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.5);
  position:relative;
}
.flip::after { /* split-flap hairline */
  content:""; position:absolute; left:6%; right:6%; top:50%; height:1px;
  background:rgba(0,0,0,.7); box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.flip.flip-anim { animation:flipTick .42s cubic-bezier(.4,1.4,.5,1); }
@keyframes flipTick {
  0% { transform:perspective(160px) rotateX(-52deg); }
  60% { transform:perspective(160px) rotateX(8deg); }
  100% { transform:perspective(160px) rotateX(0); }
}
.card-count {
  font-family:var(--display); font-size:19px; letter-spacing:.04em;
  color:var(--brass-hi);
}

/* ---------- desk stage / print ---------- */
.desk-stage {
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:2px 0;
}
.print-frame {
  position:relative;
  height:100%; max-height:100%;
  aspect-ratio:2 / 3;
  max-width:100%;
  border-radius:8px;
  background:#0c0806;
  padding:9px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.6);
}
/* brass corner clips */
.clip {
  position:absolute; width:24px; height:24px; z-index:6;
  background:linear-gradient(135deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.5);
}
.clip.tl { top:-3px; left:-3px; border-radius:8px 0 10px 0; }
.clip.tr { top:-3px; right:-3px; border-radius:0 8px 0 10px; }
.clip.bl { bottom:-3px; left:-3px; border-radius:0 10px 0 8px; }
.clip.br { bottom:-3px; right:-3px; border-radius:10px 0 8px 0; }

.photo {
  position:relative; width:100%; height:100%;
  border-radius:3px; overflow:hidden;
  background:#141210;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 60px rgba(0,0,0,.5);
  touch-action:none;
}
.layer {
  position:absolute; inset:0;
  height:100%; width:100%;
  background-repeat:no-repeat;
  background-size:200% 100%;   /* source is 2 halves side by side; show one half */
  display:block; pointer-events:none;
}
/* base = BEFORE (left half). top = AFTER (right half), revealed left-of-wipe */
.layer.base { z-index:1; background-position:0% 50%; }
.layer.top  { z-index:2; background-position:100% 50%; clip-path:inset(0 calc(100% - var(--wipe)) 0 0); }
.probe { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; z-index:-1; }

/* frosted blur before guessing */
.frost {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(20,16,12,.28);
  transition:opacity .7s ease, backdrop-filter .7s ease;
}
.photo.revealed .frost { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); }

/* centre seam */
.seam {
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:3;
  transform:translateX(-.5px);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
  opacity:.5; pointer-events:none;
}

/* brass slider rail + handle (only after guess) */
.rail {
  position:absolute; left:0; right:0; bottom:9px; height:14px; z-index:7;
  opacity:0; pointer-events:none; transition:opacity .4s ease .2s;
}
.rail::before {
  content:""; position:absolute; left:9px; right:9px; top:50%; height:4px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--brass) 0 3px, var(--brass-lo) 3px 5px);
  border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.6);
}
.photo.revealed .rail { opacity:1; pointer-events:auto; }
.handle {
  position:absolute; top:50%; left:var(--wipe);
  transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  box-shadow:0 0 0 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.6);
  touch-action:none;
}
.handle::before { /* knurl */
  content:""; position:absolute; inset:5px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(0,0,0,.25) 0 6deg, transparent 6deg 12deg);
}
.handle::after { /* hairline glow up the seam */
  content:""; position:absolute; left:50%; top:-9999px; bottom:-9999px; width:1px;
  transform:translateX(-.5px);
  background:linear-gradient(var(--brass-hi), rgba(255,214,133,.15));
  box-shadow:0 0 10px 1px rgba(255,214,133,.65);
  pointer-events:none;
}

/* inked rubber stamp */
.stamp {
  position:absolute; top:26%; left:50%; z-index:8;
  transform:translate(-50%,-50%) rotate(-11deg) scale(.4);
  font-family:var(--display); font-weight:700; font-size:44px; letter-spacing:.04em;
  color:var(--oxblood); opacity:0;
  padding:6px 20px; border:4px solid var(--oxblood); border-radius:8px;
  text-transform:uppercase; pointer-events:none;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at 30% 40%, #000 92%, transparent 96%);
          mask-image:radial-gradient(circle at 30% 40%, #000 92%, transparent 96%);
}
.stamp.wrong { color:var(--oxblood-2); border-color:var(--oxblood-2); }
.stamp.show { animation:stampThud .45s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes stampThud {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(-11deg) scale(1.7); }
  55% { opacity:.95; transform:translate(-50%,-50%) rotate(-11deg) scale(.94); }
  100% { opacity:.9; transform:translate(-50%,-50%) rotate(-11deg) scale(1); }
}

.caption {
  position:absolute; left:9px; bottom:26px; z-index:5;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:rgba(255,214,133,.9); text-shadow:0 1px 3px rgba(0,0,0,.9);
  opacity:0; transition:opacity .5s ease .2s;
}
.photo.revealed .caption { opacity:1; }

.loading, .img-error {
  position:absolute; inset:0; z-index:9;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:18px; letter-spacing:.05em;
  color:rgba(242,228,199,.7); background:#141210; text-align:center; padding:20px;
}
.img-error { display:none; color:var(--brass-hi); }
.photo.errored .img-error { display:flex; }
.photo.loaded .loading { display:none; }

/* ---------- copy + controls ---------- */
.instruction {
  margin:0; text-align:center; font-size:14px; line-height:1.4;
  color:rgba(242,228,199,.86); max-width:36ch; align-self:center;
}
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.guess {
  min-height:56px; padding:0 12px; border-radius:12px;
  font-weight:800; letter-spacing:.04em; font-size:14px; color:var(--ivory);
  background:linear-gradient(180deg, rgba(255,214,133,.14), rgba(0,0,0,.35));
  border:1px solid rgba(217,164,65,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.4);
  transition:transform .12s ease, background .2s ease;
}
.guess:active { transform:translateY(1px) scale(.99); }

.post {
  display:none; align-items:center; gap:12px;
}
.post.show { display:flex; }
.post-left { display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; }
.transform {
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.transform span {
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,228,199,.6); font-weight:800;
}
.transform strong { font-family:var(--display); font-size:24px; color:var(--brass-hi); }
.fav {
  width:48px; height:48px; flex:none; border-radius:50%;
  border:1px solid rgba(217,164,65,.45);
  background:linear-gradient(180deg, rgba(255,214,133,.1), rgba(0,0,0,.3));
  display:flex; align-items:center; justify-content:center;
}
.heart {
  width:20px; height:20px; display:inline-block;
  background:rgba(242,228,199,.5);
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E");
  transition:background .2s ease, transform .2s ease;
}
.fav.on .heart { background:var(--oxblood-2); transform:scale(1.12); }
.fav.on { border-color:var(--oxblood-2); box-shadow:0 0 12px rgba(156,36,8,.5); }

.primary {
  min-height:56px; padding:0 26px; border-radius:12px; flex:none;
  font-weight:800; letter-spacing:.05em; font-size:15px; color:var(--walnut-0);
  background:linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, var(--brass-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease;
}
.primary:active { transform:translateY(1px); }

.notice {
  min-height:16px; text-align:center; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:800; color:rgba(255,214,133,.85);
}

/* ---------- result view ---------- */
.result-card {
  display:flex; flex-direction:column; gap:14px;
  padding:16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,214,133,.08), rgba(0,0,0,.35));
  border:1px solid rgba(217,164,65,.3);
  box-shadow:var(--shadow);
}
.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat {
  display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:12px 8px; border-radius:10px;
  background:rgba(0,0,0,.28); border:1px solid rgba(217,164,65,.2);
}
.stat small { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,228,199,.6); font-weight:800; }
.stat b { font-family:var(--display); font-size:30px; color:var(--brass-hi); }
.result-actions { display:flex; gap:10px; flex-wrap:wrap; }
.result-actions .primary { flex:1 1 100%; }
.ghost {
  flex:1 1 0; min-height:52px; border-radius:12px;
  font-weight:800; letter-spacing:.04em; font-size:14px; color:var(--ivory);
  background:linear-gradient(180deg, rgba(255,214,133,.12), rgba(0,0,0,.3));
  border:1px solid rgba(217,164,65,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.ghost:active { transform:translateY(1px); }
.reveal-head {
  margin:2px 0 0; font-family:var(--display); font-weight:600;
  font-size:19px; text-align:center; color:var(--ivory);
}
.mini-print {
  position:relative; align-self:center;
  height:min(46svh, 340px); aspect-ratio:2/3; max-width:100%;
  border-radius:6px; overflow:hidden;
  border:1px solid rgba(217,164,65,.4);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.mini-line {
  position:absolute; top:0; bottom:0; left:var(--wipe); width:1px; z-index:5;
  transform:translateX(-.5px);
  background:var(--brass-hi); box-shadow:0 0 10px 1px rgba(255,214,133,.7);
}
.photo.mini .caption { opacity:1; }

/* ---------- toast ---------- */
.toast {
  position:fixed; left:50%; bottom:calc(var(--eazo-safe-area-bottom) + 16px);
  transform:translateX(-50%) translateY(20px);
  z-index:50; max-width:88vw;
  padding:11px 18px; border-radius:999px;
  font-size:13px; font-weight:700; text-align:center;
  color:var(--walnut-0);
  background:linear-gradient(180deg, var(--brass-hi), var(--brass));
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}