:root { --bg:#0b0d10; --card:#111418; --text:#eef2f7; --muted:#b9c0cc; --accent:#4fd1c5; --accent-2:#7c3aed; }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent)}
.wrap{max-width:720px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid #1a202c;border-radius:16px;padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
h1{font-size:28px;margin:0 0 12px}
h2{font-size:20px;margin:0 0 12px}
p{color:var(--muted);line-height:1.55}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.field{flex:1;min-width:140px}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #2d3748;background:#0f1216;color:var(--text)}
textarea{min-height:140px;white-space:pre}
button.primary{padding:14px 18px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;cursor:pointer}
button.primary:active{transform:translateY(1px)}
.result{margin-top:16px;font-size:56px;font-weight:800;letter-spacing:.5px;text-align:center}
.subtle{font-size:12px;color:#8a93a3;margin-top:8px}
.nav{margin:20px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:#0f1216;border:1px solid #222}
footer{margin-top:24px;color:#8891a4;font-size:12px;text-align:center}

/* Dice faces */
.dice-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.die{width:72px;height:72px}
.die svg{width:72px;height:72px;display:block}
@media (max-width:420px){ .die,.die svg{width:56px;height:56px} }

/* --- Coin Flip styles (no images) --- */
.coin-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px}
.coin{width:128px;height:128px;perspective:800px}
.coin .inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.coin.flipping .inner{transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;color:#1a202c;background:radial-gradient(circle at 35% 35%, #ffe9a8, #e7b84e 60%, #bb8c2a);box-shadow:inset 0 2px 6px rgba(255,255,255,.5), inset 0 -8px 16px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);border:2px solid #8b6b20;backface-visibility:hidden}
.face.back{transform:rotateY(180deg);background:radial-gradient(circle at 35% 35%, #d9e6ff, #9ab3dd 60%, #6c85b7);border-color:#4d5f83}
.coin-label{font-size:14px;color:#8a93a3}
.coin-btn[disabled]{opacity:.7;cursor:not-allowed}
@media (max-width:420px){ .coin{width:100px;height:100px} .face{font-size:18px} }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .coin .inner{transition:none}
}

/* --- Yes/No reveal animation --- */
.answer {
  display:inline-block;
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity 180ms ease, transform 180ms ease;
}
.answer.show {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* --- Random Picker reveal animation --- */
.pick-result {
  display:inline-block;
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity 200ms ease, transform 200ms ease;
}
.pick-result.show {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* --- Lottery number "balls" (refined) --- */
.balls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.ball{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 35%, #ffffff, #dbeafe 60%, #bfdbfe);
  border:2px solid #1e293b; box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 -4px 8px rgba(0,0,0,.15);
}
.ball.special{
  background:radial-gradient(circle at 35% 35%, #ffe9a8, #facc15 60%, #d97706);
  border-color:#92400e;
}
.ball .num{
  color:#0b0d10; font-weight:800; font-size:16px; line-height:1;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing:antialiased;
  /* subtle printed look: a tiny light + dark hint */
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.15);
}

.lotto-row{margin-top:8px;padding:8px 10px;border:1px solid #1f2937;border-radius:12px;background:#0f1216}
.lotto-controls .field{min-width:120px}

.disclaimer{
  margin-top:14px; font-size:12px; color:#8a93a3;
  border-top:1px solid #1f2937; padding-top:10px;
}

@media (max-width:420px){
  .ball{width:38px;height:38px}
  .ball .num{font-size:15px}
}