*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061018;color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-user-select:none;user-select:none}
body{touch-action:none}
#app{position:fixed;inset:0;background:
  radial-gradient(circle at 18% 8%, rgba(96,170,255,.22), rgba(96,170,255,0) 30%),
  radial-gradient(circle at 84% 12%, rgba(89,255,176,.14), rgba(89,255,176,0) 28%),
  radial-gradient(circle at 50% 100%, rgba(255,165,70,.08), rgba(255,165,70,0) 30%),
  linear-gradient(180deg,#08111b 0%, #05080d 55%, #04060a 100%)}
#topbar{
  position:absolute;left:12px;right:12px;top:12px;z-index:20;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 14px;border-radius:24px
}
.glass{
  background:linear-gradient(180deg, rgba(16,22,34,.84), rgba(9,13,21,.74));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brandMark{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(180deg, #6ab1ff, #2f6cff);font-weight:1000;letter-spacing:.05em;
  box-shadow:0 14px 28px rgba(47,108,255,.26)
}
.brandName{font-size:17px;font-weight:1000;line-height:1}
.brandSub{font-size:12px;opacity:.72;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.stat{
  min-width:0;padding:8px 10px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)
}
.stat span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;font-weight:900}
.stat strong{display:block;margin-top:4px;font-size:18px;line-height:1.1;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cashoutBtn{
  appearance:none;border:none;cursor:pointer;color:#fff;min-width:160px;
  padding:12px 16px;border-radius:18px;font-weight:900;text-align:left;
  background:linear-gradient(180deg, rgba(88,120,255,.9), rgba(49,86,228,.86));
  box-shadow:0 16px 30px rgba(49,86,228,.22), inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:3px;align-items:flex-start
}
.cashoutBtn:disabled{opacity:.42;cursor:default}
.cashoutBtn span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.cashoutBtn strong{font-size:17px;line-height:1}
#stage{position:absolute;inset:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.overlay{
  position:absolute;inset:0;z-index:25;padding:104px 18px 18px;
  background:linear-gradient(180deg, rgba(4,6,10,.58), rgba(4,6,10,.74))
}
.overlay.hidden{display:none}
.overlayGrid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:start;max-width:1280px;margin:0 auto
}
.panel{
  border-radius:30px;padding:24px;min-width:0
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#dfefff
}
.introPanel h1{
  font-size:clamp(2.1rem,4.4vw,4rem);line-height:.95;margin:16px 0 12px;font-weight:1000;letter-spacing:-.05em;max-width:14ch
}
.introPanel p,.infoCard p,.resultCard p{color:rgba(240,246,255,.76);line-height:1.62;font-size:1rem;margin:0;max-width:68ch}
.controlsBlock{margin-top:18px;padding:16px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.sectionHead{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.chipRow{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  appearance:none;border:none;cursor:pointer;color:#fff;font-weight:900;
  padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease
}
.chip:hover{transform:translateY(-2px)}
.chip.active{
  background:linear-gradient(180deg, rgba(88,120,255,.88), rgba(52,85,224,.78));
  border-color:rgba(125,163,255,.45);box-shadow:0 12px 24px rgba(52,85,224,.2)
}
.faceGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px
}
.faceBtn{
  appearance:none;border:none;cursor:pointer;color:#fff;text-align:left;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease
}
.faceBtn:hover{transform:translateY(-2px)}
.faceBtn.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(124,167,255,.18) inset}
.faceBtn img{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12)}
.faceBtn span{display:block;margin-top:8px;font-size:12px;font-weight:900;opacity:.88}
.actionRow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.primaryBtn,.secondaryBtn{
  appearance:none;border:none;cursor:pointer;color:#fff;font-weight:1000;
  padding:14px 18px;border-radius:18px;transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease
}
.primaryBtn{background:linear-gradient(180deg, #79adff, #2f6cff);box-shadow:0 16px 32px rgba(47,108,255,.26)}
.secondaryBtn{background:rgba(255,255,255,.08)}
.primaryBtn:hover,.secondaryBtn:hover{transform:translateY(-2px)}
.microNote{font-size:12px;color:rgba(240,246,255,.66)}
.statsPanel{display:flex;flex-direction:column;gap:16px;position:sticky;top:104px}
.statsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.statCard{
  padding:16px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)
}
.statCard span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;font-weight:900}
.statCard strong{display:block;margin-top:8px;font-size:24px;line-height:1.05;font-weight:1000}
.infoCard{
  margin-top:auto;padding:16px;border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06)
}
.infoTitle{font-size:14px;font-weight:1000;margin-bottom:8px}
#resultOverlay{
  display:flex;align-items:center;justify-content:center
}
.resultCard{
  width:min(640px,100%);padding:26px;border-radius:32px;text-align:left
}
.resultCard h2{
  margin:16px 0 10px;font-size:clamp(2rem,4vw,3.3rem);line-height:.95;font-weight:1000;letter-spacing:-.05em
}
.resultActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
#toastLayer{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:30;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none
}
.toast{
  padding:12px 16px;border-radius:999px;background:rgba(10,14,22,.68);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 34px rgba(0,0,0,.26);font-weight:900;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
@media (max-width: 1120px){
  #topbar{grid-template-columns:1fr;align-items:stretch}
  .cashoutBtn{width:100%;min-width:0}
  .hud{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 840px){
  .overlay{padding-top:170px}
  .overlayGrid{grid-template-columns:1fr}
  .statsPanel{position:static}
  .faceGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 640px){
  #topbar{padding:10px}
  .brandSub{display:none}
  .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat strong{font-size:16px}
  .overlay{padding-top:188px;padding-left:12px;padding-right:12px}
  .panel{padding:18px;border-radius:24px}
  .faceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statsGrid{grid-template-columns:1fr}
  .resultCard{padding:20px}
}