:root{
  --gBg1:#0b1020;
  --gBg2:#0a0f1a;
  --gCard:rgba(255,255,255,.06);
  --gCard2:rgba(255,255,255,.08);
  --gLine:rgba(255,255,255,.12);
  --gText:rgba(255,255,255,.92);
  --gMute:rgba(255,255,255,.65);
  --good:#16a34a;
  --bad:#f97316;
  --accent:#60a5fa;
}

.gameBody{ background: radial-gradient(1200px 800px at 20% 20%, rgba(96,165,250,.15), transparent 60%),
                         radial-gradient(900px 700px at 80% 10%, rgba(34,197,94,.10), transparent 55%),
                         linear-gradient(180deg, var(--gBg1), var(--gBg2)); color:var(--gText); }

.gameWrap{ display:flex; flex-direction:column; gap:16px; }

.hud{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hudLeft{ display:flex; gap:10px; flex-wrap:wrap; }
.hudChip{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 12px; border:1px solid var(--gLine); border-radius:16px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(10px);
}
.hudChip .k{ font-size:12px; color:var(--gMute); }
.hudChip .v{ font-size:18px; font-weight:800; letter-spacing:.2px; }

.gamePanel{ padding:16px; border-radius:18px; border:1px solid var(--gLine); background: rgba(255,255,255,.04); }
.gameTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.progress{ flex:1; height:10px; background: rgba(255,255,255,.07); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.10); }
.bar{ height:100%; width:0%; background: linear-gradient(90deg, rgba(96,165,250,.85), rgba(34,197,94,.75)); transition: width .35s ease; }

.emailCard{ padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.emailCard.pop{ transform: translateY(-2px) scale(1.01); box-shadow: 0 14px 44px rgba(0,0,0,.35); }

.emailHeader{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.emailAvatar{ width:44px; height:44px; border-radius:14px; background: rgba(96,165,250,.18);
  border:1px solid rgba(96,165,250,.25); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.emailMeta{ flex:1; min-width:0; }
.emailFrom{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.fromName{ font-weight:900; letter-spacing:.2px; }
.fromMail{ font-size:12px; color:var(--gMute); word-break:break-all; }
.emailRow{ display:flex; gap:10px; margin-top:6px; font-size:12px; color:var(--gMute); }
.emailRow .label{ opacity:.85; }
.emailRow .value{ color:rgba(255,255,255,.80); word-break:break-all; }

.emailStamp{ text-align:right; flex:0 0 auto; }
.stamp{ display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); }
.emailSubject{ margin-top:12px; font-size:16px; font-weight:900; }
.emailBody{ margin-top:8px; color:rgba(255,255,255,.82); line-height:1.45; white-space:pre-line; }

.emailExtras{ margin-top:12px; display:grid; grid-template-columns:1fr; gap:10px; }
.extraBlock{ border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); border-radius:14px; padding:10px; }
.extraTitle{ font-size:12px; color:var(--gMute); margin-bottom:6px; }
.extraList{ margin:0; padding-left:18px; color:rgba(255,255,255,.84); font-size:13px; }
.extraList li{ margin:4px 0; word-break:break-word; }

.actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.bigBtn{ padding:14px 14px; border-radius:16px; font-weight:900; font-size:15px; }
.bigBtn.good{ background: rgba(22,163,74,.18); border:1px solid rgba(22,163,74,.35); }
.bigBtn.bad{ background: rgba(249,115,22,.16); border:1px solid rgba(249,115,22,.32); }

.reasonBox{ margin-top:14px; display:none; }
.reasonBox.show{ display:block; animation: slideIn .25s ease; }
@keyframes slideIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

.reasonHead{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.reasonTitle{ font-weight:900; font-size:14px; }
.reasonGrid{ margin-top:12px; display:grid; grid-template-columns:1fr; gap:10px; }
.reasonItem{
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  padding:10px; border-radius:14px; display:flex; gap:10px; align-items:flex-start;
}
.reasonItem input{ margin-top:3px; }
.reasonItem .txt{ display:flex; flex-direction:column; gap:2px; }
.reasonItem .t{ font-weight:800; font-size:13px; }
.reasonItem .d{ font-size:12px; color:var(--gMute); }

.reasonFooter{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

.resultBox{ display:none; margin-top:14px; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px;
  background: rgba(255,255,255,.05);
}
.resultBox.show{ display:block; animation: pop .22s ease; }
@keyframes pop{ from{opacity:0; transform:scale(.99)} to{opacity:1; transform:scale(1)} }

.resultTop{ display:flex; gap:12px; align-items:center; }
.resultIcon{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background: rgba(96,165,250,.15); border:1px solid rgba(96,165,250,.25);
}
.resultTitle{ font-weight:900; font-size:15px; }
.resultGrid{ margin-top:12px; display:grid; grid-template-columns:1fr; gap:10px; }
.resultCard{ border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px; background: rgba(0,0,0,.10); }
.resultTag{ display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:900; margin-top:6px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
}
.points{ font-size:22px; font-weight:1000; margin-top:6px; }
.learnList{ margin:6px 0 0 0; padding-left:18px; color:rgba(255,255,255,.84); font-size:13px; }

.tipsPanel{ padding:16px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.h2{ font-size:16px; margin:0 0 10px 0; font-weight:1000; }
.grid2{ display:grid; grid-template-columns:1fr; gap:10px; }

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:50;
  background: rgba(0,0,0,.70); color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:14px; backdrop-filter: blur(10px);
  max-width: 92vw; display:none;
}
.toast.show{ display:block; animation: toastIn .25s ease; }
@keyframes toastIn{ from{opacity:0; transform:translateX(-50%) translateY(6px)} to{opacity:1; transform:translateX(-50%) translateY(0)} }

.tourOverlay{
  position:fixed; inset:0; z-index:60;
  background: rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
.tourOverlay.show{ display:flex; }
.tourCard{
  width:min(560px, 96vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,24,34,.95);
  padding:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.tourTitle{ font-weight:1000; font-size:16px; }
.tourList{ margin:10px 0 0 0; padding-left:18px; color:rgba(255,255,255,.86); line-height:1.45; }
.tourActions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }

@media (min-width: 860px){
  .emailExtras{ grid-template-columns:1fr 1fr; }
  .reasonGrid{ grid-template-columns:1fr 1fr; }
  .resultGrid{ grid-template-columns:1fr 1fr 1fr; }
  .grid2{ grid-template-columns:1fr 1fr; }
}