:root{
  --gold:#b45309; --gold-d:#92400e; --gold-l:#fef6e7; --gold-b:#f0d9a8;
  --ink:#1f2328; --muted:#6b7280; --line:#e5e7eb;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px;background:#f7f7f5;color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.wrap{width:100%;max-width:440px;text-align:center}
.brand{font-size:26px;font-weight:700;color:var(--gold);margin:0 0 20px;letter-spacing:.01em}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px}
.sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.field{
  width:100%;padding:12px 14px;font-size:16px;border:1px solid #d9dbdf;border-radius:10px;
  text-align:center;letter-spacing:.02em;margin-bottom:12px;
}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(180,83,9,.12)}
.btn-main{
  width:100%;background:var(--gold);color:#fff;border:0;border-radius:10px;
  padding:12px;font-size:15px;font-weight:600;cursor:pointer;
}
.btn-main:hover{background:var(--gold-d)}
.btn-main:disabled{background:#d6bb91;cursor:default}
.gate-msg{font-size:13px;color:#9b2c2c;margin:12px 0 0;min-height:18px}
.cs-link{color:var(--gold);font-weight:600}
.greet{font-size:14px}
.cards{display:flex;gap:12px;justify-content:center;margin:20px 0}
.card{width:96px;height:132px;perspective:800px;cursor:pointer}
.inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.card.open .inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.08);
}
.back{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fde68a}
.back .q{font-size:36px;font-weight:700}
.front{background:#fff;transform:rotateY(180deg);padding:8px;text-align:center}
.front .amt{font-size:16px;font-weight:700;color:var(--gold);line-height:1.15}
.front .lose{font-size:13px;font-weight:600;color:#9ca3af}
.card:not(.dim):hover .inner{transform:translateY(-6px)}
.card:not(.dim):hover.open .inner{transform:rotateY(180deg)}
.card.dim{opacity:.4;cursor:default}
.hint{font-size:13px;color:var(--muted);min-height:20px;margin:0}
.result{margin:16px 0 0;padding:20px;border-radius:16px;background:var(--gold-l);border:1px solid var(--gold-b);display:none}
.result.show{display:block;animation:pop .4s ease}
.result.lose{background:#f3f4f6;border-color:#e0e2e6}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.rlabel{font-size:13px;color:var(--muted);margin:0}
.rprize{font-size:24px;font-weight:700;color:var(--gold);margin:4px 0}
.rprize.lose{color:var(--muted)}
.code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:700;
  letter-spacing:.08em;background:#fff;border:1px dashed var(--gold);border-radius:10px;
  padding:12px;margin:12px 0;color:var(--ink);word-break:break-all;
}
.note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}