/* styles.css */
/* System font, ALL CAPS, mobile no-wiggle */
html,body{height:100%; max-width:100vw; overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y;}
body{ margin:0; background:#fff; color:#1f2937;
  font-family:"Press Start 2P", system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
.ALLCAPS *{ text-transform:uppercase; letter-spacing:.03em; }

/* Layout */
.container{ max-width:860px; margin:0 auto; padding:24px; }
.grid{ display:grid; gap:24px; }
.center{ text-align:center; }

/* Zebra stripe UNDERLAY wrapper */
.frame{ position:relative; z-index:0; }
.frame::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:.75rem; left:.75rem; width:100%; height:100%; border-radius:14px;
  background-image:linear-gradient(45deg,#fff 33.33%,rgba(0,0,0,.95) 33.33%,rgba(0,0,0,.95) 50%,#fff 50%,#fff 83.33%,rgba(0,0,0,.95) 83.33%,rgba(0,0,0,.95) 100%);
  background-size:.38rem .38rem;
}
.frame.inline-block{ display:inline-block; }
/* Radios: zebra should fit exactly same size as button (no offset) */
.radio-fit::after{ top:0; left:0; width:100%; height:100%; border-radius:14px; background-size:.38rem .38rem; }

/* Boxes + buttons */
.box{ padding:2rem; border:1px solid #000; background:#fff; border-radius:14px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.6rem; border:1px solid #000; background:#fff; border-radius:14px; font-weight:900; cursor:pointer; transition:transform .12s ease; }
.btn:hover{ transform:scale(1.02); }
.btn:active{ transform:scale(.99); }

/* Headline stripes */
.headline{ letter-spacing:.04em; line-height:1.05; margin:.25rem 0; font-size:clamp(2.2rem, 6vw, 5.2rem); display:flex; align-items:baseline; justify-content:center; gap:.35rem; }
.headline.small{ font-size:clamp(1.6rem, 5vw, 3rem); }
.stripe-text{
  --stripe-size:20px;
  background: linear-gradient(-45deg, var(--c1) 25%, var(--c2) 25%, var(--c2) 50%, var(--c1) 50%, var(--c1) 75%, var(--c2) 75%, var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  background-size:var(--stripe-size) var(--stripe-size); background-position:0 0; animation: stripes 1s linear infinite;
  font-family: "Bungee Shade","Press Start 2P", Impact, Haettenschweiler, "Arial Black", Arial, Helvetica, sans-serif; font-weight:400;
}
.emoji{ margin-left:.2rem; color:inherit; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
@keyframes stripes { 100% { background-position: var(--stripe-size) 0; } }

/* Tooltips */
.tip{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-left:.4rem; cursor:help; }
.tip-q{ color:#dc2626; }
.tip .tip-box{
  position:absolute; top:100%; left:50%; transform:translate(-50%, .4rem);
  background:#fee2e2; color:#991b1b; border:1px solid #fecaca; border-radius:10px;
  padding:.4rem .55rem; font-size:.75rem; font-weight:800; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:10;
}
.tip:hover .tip-box, .tip:focus .tip-box, .tip:active .tip-box{ opacity:1; transform:translate(-50%, .2rem); }

/* Sliders */
.field{ margin-top:18px; }
.label-row{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.35rem; }
.slider-wrap{ position:relative; display:block; width:100%; margin-top:.35rem; }
.value-bubble{
  position:absolute; top:-2.8em; transform:translateX(-50%);
  background:#111; color:#fff; font-weight:900; font-size:.9rem;
  padding:.35rem .6rem; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.15); white-space:nowrap;
}
.value-bubble::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-6px; border:6px solid transparent; border-top-color:#111;
}
[type="range"].kawaii {
  --base: #fe8ce4;
  --light: color-mix(in sRGB, var(--base) 60%, #fff);
  --lighter: color-mix(in sRGB, var(--base) 30%, #fff);
  --dark: color-mix(in sRGB, var(--base) 95%, #000);;
  --transparent: color-mix(in sRGB, var(--base) 0%, #0000);
  appearance: none;
  font-size: 1em;
  width: 100%;
  height: 2em;
  border: 0.5em solid #fff;
  border-radius: 2em;
  box-shadow: 0 0 1em #0001, 0 0.25em 0.5em #0001;
  overflow: hidden;
}
[type="range"].kawaii::-webkit-slider-runnable-track {
  background: 
    radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
    radial-gradient(circle at 1.25em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
    radial-gradient(circle at 5em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
    linear-gradient(var(--light) 0 0) 1.25em 0.4em / 3.75em calc(0.4em - 0.5px) no-repeat,
    linear-gradient(90deg, var(--base), var(--transparent) 1em),
    linear-gradient(#0000 70%, var(--dark) 80%),
    var(--base);
  border-radius: 2em; height: 100%; overflow: hidden;
}
[type="range"].kawaii::-webkit-slider-thumb {
  appearance: none; height: 2em; width: 2em; color: var(--lighter);
  background:
    radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
    linear-gradient(90deg, #0000 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;
  border-radius: 50%; 0 50% 50% 0;
  box-shadow: inset -0.5em 0 0.5em -0.25em var(--base),
    1em 0 0 0.25em, 2em 0 0 0.25em, 3em 0 0 0.25em, 4em 0 0 0.25em,
    5em 0 0 0.25em, 6em 0 0 0.25em, 7em 0 0 0.25em, 8em 0 0 0.25em, 9em 0 0 0.25em,
    10em 0 0 0.25em, 11em 0 0 0.25em, 12em 0 0 0.25em, 13em 0 0 0.25em, 14em 0 0 0.25em,
    15em 0 0 0.25em, 16em 0 0 0.25em, 17em 0 0 0.25em, 18em 0 0 0.25em, 19em 0 0 0.25em;
}
[type="range"].kawaii::-moz-range-track {
  background: 
    radial-gradient(circle at 0.75em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
    radial-gradient(circle at 1.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
    radial-gradient(circle at 5.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
    linear-gradient(var(--light) 0 0) 1.5em calc(15% + 0.18em) / 4em calc(0.4em - 0.5px) no-repeat,
    linear-gradient(90deg, var(--base), var(--transparent) 1em),
    linear-gradient(var(--transparent) 70%, var(--dark) 80%),
    var(--base);
  border-radius: 2em; height: 100%; overflow: hidden;
}
[type="range"].kawaii::-moz-range-thumb {
  appearance: none; height: 2em; width: 2em; border:0; color: var(--lighter);
  background:
    radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
    linear-gradient(90deg, var(--transparent) 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;
  border-radius: 50%; 0 50% 50% 0;
  box-shadow: inset -0.5em 0 0.5em -0.25em var(--base),
    1em 0 0 0.25em, 2em 0 0 0.25em, 3em 0 0 0.25em, 4em 0 0 0.25em,
    5em 0 0 0.25em, 6em 0 0 0.25em, 7em 0 0 0.25em, 8em 0 0 0.25em, 9em 0 0 0.25em,
    10em 0 0 0.25em, 11em 0 0 0.25em, 12em 0 0 0.25em, 13em 0 0 0.25em, 14em 0 0 0.25em,
    15em 0 0 0.25em, 16em 0 0 0.25em, 17em 0 0 0.25em, 18em 0 0 0.25em, 19em 0 0 0.25em;
}

/* Modals */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50; }
.modal.open{ display:flex; }
.modal-card{ width:min(92vw,620px); }
.modal-card-wide{ width:min(92vw,720px); }
.sponsored{ color:#475569; font-size:.85rem; margin-bottom:12px; }
.ad-embed{ border:1px solid #e5e7eb; border-radius:14px; min-height:250px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ad-ph{ opacity:.7; }
.ad-box{ min-height:120px; display:flex; align-items:center; justify-content:center; color:#475569; font-size:.85rem; }

/* Pills + helpers */
.pill.warn{ display:inline-block; background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; border-radius:10px; padding:.5rem .7rem; font-weight:800; font-size:.9rem; }
.dim{ opacity:.8; }
.welcome-copy{ font-size:.9rem; color:#334155; line-height:1.5; max-width:60ch; margin:0 auto 6px; }
.welcome-list{ text-align:left; display:inline-block; margin:.5rem auto 1rem; padding-left:1.2rem; }
.first-time-block{ text-align:center; margin-top:24px; margin-bottom:48px; }
.first-label{ font-size:clamp(.9rem, 2.5vw, 1rem); font-weight:600; color:#334155; margin-bottom:.75rem; }
.radio-row{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1.75rem; margin-bottom:1.75rem; }
.radio-card{ padding:1.15rem 1.9rem; border:1px solid rgba(0,0,0,.35); background:#fff; border-radius:14px; font-weight:900; font-size:1rem; letter-spacing:.02em; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.radio-card::after{ display:none; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sr:checked + .radio-card{ outline:2px solid #111; transform:scale(1.02); }
.sr:focus + .radio-card{ box-shadow:0 0 0 3px rgba(0,0,0,.15) inset; }

/* Animations */
.anim-pop{ animation: popIn .28s cubic-bezier(.2,.7,.2,1) both; }
@keyframes popIn{ 0%{ opacity:0; transform: translateY(8px) scale(.96); } 100%{ opacity:1; transform: translateY(0) scale(1); } }
.anim-slide-in{ animation: slideIn .24s cubic-bezier(.2,.7,.2,1) both; }
.anim-slide-out{ animation: slideOut .24s cubic-bezier(.2,.7,.2,1) both; }
@keyframes slideIn{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform:none;} }
@keyframes slideOut{ from{ opacity:1; transform:none;} to{ opacity:0; transform: translateY(-8px);} }

/* === Welcome modal: mobile fit & scroll (added) === */
#welcome{
  align-items: flex-start;       /* avoid vertical cropping on phones */
  justify-content: center;
  padding: 6vh 3vw;              /* space around the card */
  overflow-y: auto;              /* overlay can scroll if needed */
}

#welcome .modal-card-wide{
  width: min(620px, 96vw);       /* responsive width */
  max-height: 88vh;              /* never exceed viewport height */
  border-radius: 14px;
}

#welcome .box{
  max-height: 88vh;              /* scroll content inside if overflowing */
  overflow: auto;
  padding: clamp(12px, 2.5vh, 20px) clamp(12px, 4vw, 24px);
}

@media (max-width: 480px){
  .headline.small .stripe-text{  /* WELCOME title */
    font-size: clamp(18px, 6.2vw, 24px);
  }
  #welcome .welcome-copy{
    font-size: 12px;
    line-height: 1.45;
  }
  #welcome .welcome-list{
    margin: 8px 0 0;
    padding-left: 1.1em;
  }
  #welcome .btn{
    width: 100%;
  }
}