/* Mobile-first, system fonts, tiny footprint */
:root{
  --bg1:#1b0e29; --bg2:#5b1f35; --accent:#ff6a3d; --pill:#3f2a52;
  --txt:#fff; --muted:#ead9ff; --brand:#ffd197; --card:#fff7ea;
}
*{box-sizing:border-box}
/*html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--txt);background:url('../images/bg.jpg') no-repeat center bottom #000; }/*background-color: linear-gradient(180deg,var(--bg1),var(--bg2));*/

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  width:100%;
  /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
  font-family: "Fjalla One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--txt);

  /* top layer: image; bottom layer: gradient */
  background-image: url('../images/bg.jpg'), linear-gradient(to top, #470800 0%, #140115 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center;
  background-attachment: fixed, fixed;
  background-size: auto, cover;       /* keep image natural size; gradient covers page */
  background-color: #140115;          /* solid fallback */
}

a{color:inherit;text-decoration:none}
button{font:inherit; cursor:pointer; font-size: 18px;}


.app{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:24px 16px;
}
.header{width:100%;max-width:420px;margin:0 auto}
.footer{
  width:100%;max-width:420px;margin:8px auto 0; padding:8px 12px;border-radius:12px;
  background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:space-between;
  font-size:12px;
  background-color:#f9e5cc;
}
.logo{display:flex;align-items:center;gap:8px}
.logo-badge{width:40px;height:40px;border-radius:999px;background:#ff9b3d}

.card{
  width:100%!important;/*min-width:380px!important;*/min-width:360px; max-width:420px;margin:12px auto; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.h1{font-size:28px;line-height:1.15;font-weight:800;margin:8px 0 10px}
.p{color:var(--muted);font-size:16px;margin:0 0 18px}

.btn{
  display:block;width:100%;padding:14px 16px;border:0;border-radius:14px;
  background:var(--accent);color:#fff;font-weight:700;font-size:18px;
  box-shadow:0 6px 16px rgba(255,106,61,.35); cursor:pointer;
}
.btn.secondary{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25)}

.result-page .btn.secondary,
.result-page .btn.ghost {
  color: #000; /* force black text */
}

.stack{display:flex;flex-direction:column;gap:12px}
.center{text-align:center}
.spacer{height:12px}

.pills{display:flex;flex-direction:column;gap:12px}
.pill {
  padding:12px 14px;
  border-radius:999px;
  background:var(--pill);
  border:1px solid rgba(255,255,255,.15);
  text-align:center;
  font-weight:700;
  cursor:pointer;
  color:#fff; /* ← add this line */
}

.pill:active{transform:scale(0.995)}

.progress{
  font-size:12px;opacity:.9;margin-bottom:10px;display:flex;justify-content:flex-end
}

.lineup .option{
  background:#fff;color:#1a1325;border-radius:16px;padding:16px 14px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;border:1px solid #eee;
}
.chev{opacity:.5}

.result{
  background:var(--card); color:#1b0e29;border-radius:20px;/*padding:18px;*/border:1px solid #f0e6d7
}
.result h2{margin:0 0 4px;font-size:26px;letter-spacing:.5px}
.kicker{color:#7b6685;font-weight:700;margin-bottom:12px}
.section-title{font-weight:800;margin:14px 0 8px}
.list{margin:6px 0 12px}
.list button
{
  color:#ed7470;
}
.sponsor{
  background:#fff;border:1px dashed #e6d2b6;border-radius:14px;padding:12px;margin-top:8px;
  font-size:14px
}
.actions{display:flex;gap:8px;margin-top:14px}
.actions .btn{flex:1;font-size:16px}

.small{font-size:14px;opacity:.9;color:#000;}
kbd{background:#f3ece2;border-radius:6px;padding:0 6px}

.option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  margin: 10px 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
  border: none;
  text-align: left;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.option .chev { font-size: 24px; opacity: .85; }
.option.active { outline: 3px solid rgba(255,255,255,.35); }

.option{
  min-height:90px!important;
  font-size:1.5em;
}

@font-face {
  font-family: "Fjalla One";
  src: url('../fonts/FjallaOne-Regular.ttf') format('ttf');
  font-weight: 400; font-style: normal; font-display: swap;
}

#shareBtn
{
  background:var(--accent);
  color:#fff;
  font-size:18px;
}

#restartBtn
{
  font-size:18px;
}

.email-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .3s ease;
}
.email-popup.hidden {
  opacity: 0;
  pointer-events: none;
}
.popup-card {
  background: var(--panel, rgba(255,255,255,0.1));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--txt,#fff);
  width: 90%;
  max-width: 360px;
}
.popup-card input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  margin: 10px 0;
  font-size: 16px;
}
.popup-card button {
  width: 100%;
  margin-top: 6px;
}

/* Close button */
.text-cancel{
  background: none;
  border: 0;
  color: var(--txt, #fff);
  opacity: .8;
  font: inherit;
  padding: 8px 0 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.text-cancel:hover{ opacity: 1; text-decoration: underline; }
.popup-card{ position:relative; } /* ensure the close button anchors correctly */