:root{
  --ink: #0a0b0a;
  --ink-2: #101210;
  --card: #131513;
  --card-line: #23261f;
  --paper: #f6f5f1;
  --green: #5eeb78;
  --green-dim: #2c5c37;
  --gold: #ffc94d;
  --red: #ff5a5a;
  --ash: #8d938c;
  --ash-dim: #565b56;
  --white: #f4f4f0;

  --display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: 'Inter', ui-sans-serif, sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    linear-gradient(rgba(35,38,31,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,38,31,0.55) 1px, transparent 1px),
    var(--ink);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--white);
  font-family: var(--body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow-x:hidden;
  padding: 24px 16px 64px;
  user-select:none;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.rings{ position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ring{ position:absolute; border-radius:50%; border:1px solid rgba(94,235,120,0.07); }
.r1{ width:360px; height:360px; animation: breathe 7s ease-in-out infinite; }
.r2{ width:620px; height:620px; animation: breathe 7s ease-in-out infinite 0.6s; }
.r3{ width:900px; height:900px; animation: breathe 7s ease-in-out infinite 1.2s; }
.r4{ width:1220px; height:1220px; animation: breathe 7s ease-in-out infinite 1.8s; }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.02); } }

.foot{ position:relative; z-index:1; margin-top:22px; font-family: var(--mono); font-size:11px; letter-spacing:.03em; color: var(--ash-dim); display:flex; gap:8px; align-items:center; }
.foot a{ color:var(--ash); text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .dot{ color:var(--ash-dim); }

.app{ position:relative; z-index:1; width:100%; max-width:480px; }

.card{
  background: var(--card); border:1px solid var(--card-line); border-radius:20px;
  padding:24px 22px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  animation: rise .4s cubic-bezier(.16,1,.3,1);
  transition: box-shadow .2s ease;
}
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
.card.flash-green{ box-shadow: 0 0 0 3px rgba(94,235,120,.55), 0 30px 80px -30px rgba(0,0,0,.7); }
.card.flash-red{ box-shadow: 0 0 0 3px rgba(255,90,90,.55), 0 30px 80px -30px rgba(0,0,0,.7); }

.head-row{ display:flex; justify-content:space-between; align-items:center; font-family: var(--mono); font-size:11px; color: var(--ash); letter-spacing:.04em; margin-bottom:14px; }
.head-row .live{ display:inline-flex; align-items:center; gap:6px; color: var(--green); }
.pulse{ width:6px; height:6px; border-radius:50%; background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(94,235,120,.55); } 70%{ box-shadow:0 0 0 8px rgba(94,235,120,0); } 100%{ box-shadow:0 0 0 0 rgba(94,235,120,0); } }

/* ---- intro ---- */
.intro-logo{ display:block; max-width:170px; margin: 0 auto 16px; border-radius:10px; }
.title{ font-family: var(--display); font-weight:700; text-align:center; font-size:23px; margin: 0 0 8px; }
.sub{ text-align:center; color: var(--ash); font-size:13.5px; line-height:1.6; margin: 0 0 20px; }
.sub b{ color: var(--white); font-weight:600; }

.rules-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.rule-item{ display:flex; gap:10px; align-items:flex-start; background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:11px 13px; font-size:12.5px; color:var(--ash); line-height:1.5; }
.rule-item .ri{ font-size:16px; flex-shrink:0; }
.rule-item b{ color:var(--white); }

.best-badge{
  text-align:center; font-family:var(--mono); font-size:11.5px; color: var(--gold);
  background: rgba(255,201,77,0.08); border:1px solid rgba(255,201,77,0.25);
  border-radius:10px; padding:8px; margin-bottom:10px;
}
.best-badge.gold{ color: var(--green); background: rgba(94,235,120,0.08); border-color: rgba(94,235,120,0.25); }

.attempts-row{
  text-align:center; font-family:var(--mono); font-size:11.5px; color:var(--ash);
  margin-bottom:14px;
}
.attempts-row b{ color: var(--white); }

.locked-note{
  text-align:center; font-size:12px; color:var(--ash); line-height:1.6;
  background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px;
  padding:14px; margin-bottom:10px;
}

/* ---- game ---- */
.top-stats{ display:flex; gap:10px; margin-bottom:14px; }
.stat-box{ flex:1; background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:10px 8px; text-align:center; }
.stat-label{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ash); font-family:var(--mono); margin-bottom:4px; }
.stat-value{ font-family:var(--display); font-weight:700; font-size:18px; }

.lives-row{ display:flex; justify-content:center; gap:8px; margin-bottom:14px; }
.life-icon{ width:30px; height:30px; border-radius:50%; object-fit:cover; transition: opacity .25s ease, filter .25s ease; }
.life-icon.lost{ opacity:.2; filter: grayscale(1); }

.price-box{ text-align:center; margin-bottom:14px; }
.price-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); font-family:var(--mono); margin-bottom:4px; }
.price-value{ font-family:var(--display); font-weight:700; font-size:38px; letter-spacing:-.01em; }
.price-value.up{ color: var(--green); }
.price-value.down{ color: var(--red); }
.price-delta{ font-family:var(--mono); font-size:11.5px; color:var(--ash); margin-top:2px; }

.chart-wrap{ background: var(--ink-2); border:1px solid var(--card-line); border-radius:14px; padding:6px; margin-bottom:16px; overflow:hidden; }
.chart-wrap svg{ display:block; width:100%; height:150px; }

.timer-row{ margin-bottom:16px; }
.timer-track{ height:8px; border-radius:6px; background: var(--ink-2); border:1px solid var(--card-line); overflow:hidden; }
.timer-fill{ height:100%; background: linear-gradient(90deg, var(--green-dim), var(--green)); transition: width 1s linear; }
.timer-fill.urgent{ background: linear-gradient(90deg, #b34a2c, var(--red)); }

.guess-row{ display:flex; gap:10px; margin-bottom:14px; }
.guess-btn{
  flex:1; border:0; border-radius:14px; padding:20px 12px;
  font-family: var(--display); font-weight:700; font-size:17px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition: transform .1s ease, filter .15s ease, opacity .15s ease;
}
.guess-btn:active{ transform: scale(.97); }
.guess-btn:disabled{ opacity:.35; cursor:not-allowed; }
.guess-btn.up{ background: rgba(94,235,120,0.12); border:2px solid var(--green); color: var(--green); }
.guess-btn.down{ background: rgba(255,90,90,0.1); border:2px solid var(--red); color: var(--red); }
.guess-btn.selected.up{ background: var(--green); color:#06210c; }
.guess-btn.selected.down{ background: var(--red); color:#2a0808; }
.guess-btn .arrow{ font-size:22px; }

.status-line{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--ash); min-height:18px; margin-bottom:6px; }
.status-line.win{ color: var(--green); font-weight:700; }
.status-line.lose{ color: var(--red); font-weight:700; }

/* ---- gameover ---- */
.go-title{ text-align:center; font-family:var(--display); font-weight:700; font-size:20px; margin-bottom:4px; }
.go-emoji{ font-size:40px; text-align:center; margin-bottom:6px; }
.streak-result{ text-align:center; margin: 6px 0 18px; }
.streak-num{ font-family: var(--display); font-weight:700; font-size:56px; color: var(--gold); line-height:1; text-shadow: 0 0 30px rgba(255,201,77,.35); }
.streak-caption{ font-family:var(--mono); font-size:11px; color:var(--ash); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }
.new-best{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px; color:#06210c; background:var(--green); padding:4px 10px; border-radius:999px; }

.btn{ width:100%; border:0; border-radius:12px; padding:14px 18px; font-family: var(--display); font-weight:600; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition: transform .12s ease, filter .15s ease; text-decoration:none; }
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--green); color: #06210c; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-dark{ background:#111; color:#fff; }
.btn-row{ display:flex; gap:10px; margin-bottom:10px; }

@media (max-width:380px){
  .card{ padding:20px 16px 18px; }
  .price-value{ font-size:30px; }
  .streak-num{ font-size:46px; }
  .chart-wrap svg{ height:120px; }
}