/* ===== TossUp design system ===== */
:root{
  --ink:#1B1029;
  --surface:#241736;
  --surface-2:#2E1D45;
  --text:#F5EFFB;
  --text-muted:#B8ACD1;
  --lime:#C6F135;
  --coral:#FF5D6C;
  --teal:#34D1B0;
  --gold:#FFC857;
  --sky:#5DB1FF;
  --radius:18px;
  --border:1px solid rgba(245,239,251,0.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Work Sans',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
}
a{color:inherit;}
img,svg{max-width:100%;display:block;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* Header */
header.site{
  padding:22px 0;
  border-bottom:var(--border);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.3rem;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo .dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 12px var(--lime);
}
nav.site-links{display:flex;gap:22px;font-size:0.92rem;color:var(--text-muted);}
nav.site-links a{text-decoration:none;transition:color .15s;}
nav.site-links a:hover{color:var(--lime);}

/* Hero */
.hero{padding:64px 0 40px;text-align:center;}
.eyebrow{
  color:var(--lime);
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:14px;
}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;}
.hero p.lede{
  color:var(--text-muted);
  max-width:560px;
  margin:18px auto 0;
  font-size:1.08rem;
}

/* Segmented hero wheel (homepage) */
.hub-wheel-zone{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:36px 0 8px;
  position:relative;
}
#hubWheel{cursor:pointer;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));}
.wheel-pointer{
  position:absolute;
  top:calc(50% - 210px);
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:22px solid var(--lime);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  z-index:5;
}
.hub-hint{
  text-align:center;
  color:var(--text-muted);
  font-size:0.9rem;
  margin-top:6px;
}

/* Tool grid */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  padding:36px 0 70px;
}
.tool-card{
  background:var(--surface);
  border:var(--border);
  border-radius:var(--radius);
  padding:24px;
  text-decoration:none;
  color:var(--text);
  transition:transform .15s, border-color .15s;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tool-card:hover{transform:translateY(-4px);border-color:var(--lime);}
.tool-card .tag{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
  color:var(--ink);
  background:var(--lime);
  padding:3px 9px;
  border-radius:20px;
  width:max-content;
}
.tool-card h3{font-size:1.2rem;}
.tool-card p{color:var(--text-muted);font-size:0.92rem;margin:0;}

/* Tool page layout */
.tool-page{padding:48px 0 80px;}
.tool-header{text-align:center;margin-bottom:36px;}
.tool-header .tag{
  display:inline-block;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
  color:var(--ink);
  background:var(--lime);
  padding:4px 11px;
  border-radius:20px;
  margin-bottom:14px;
}
.tool-header h1{font-size:clamp(1.8rem,4vw,2.6rem);}
.tool-header p{color:var(--text-muted);max-width:520px;margin:12px auto 0;}

.tool-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
}
@media(max-width:800px){
  .tool-layout{grid-template-columns:1fr;}
}

.wheel-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.wheel-shell{position:relative;}
.wheel-shell .wheel-pointer{top:-6px;left:50%;transform:translateX(-50%);}
canvas.wheel-canvas{border-radius:50%;box-shadow:0 20px 50px rgba(0,0,0,.5);}

.spin-btn{
  background:var(--lime);
  color:var(--ink);
  border:none;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  padding:14px 38px;
  border-radius:40px;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
  box-shadow:0 10px 24px rgba(198,241,53,0.25);
}
.spin-btn:hover{transform:translateY(-2px);}
.spin-btn:active{transform:translateY(0px) scale(.98);}
.spin-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.result-banner{
  min-height:34px;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.3rem;
  text-align:center;
  color:var(--gold);
}

.editor-panel{
  background:var(--surface);
  border:var(--border);
  border-radius:var(--radius);
  padding:26px;
}
.editor-panel h3{font-size:1.05rem;margin-bottom:6px;}
.editor-panel p.hint{color:var(--text-muted);font-size:0.85rem;margin:0 0 14px;}
.item-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;margin-bottom:14px;padding-right:4px;}
.item-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-2);
  border-radius:10px;
  padding:9px 12px;
}
.item-row span{flex:1;font-size:0.92rem;}
.item-row button{
  background:none;border:none;color:var(--coral);
  cursor:pointer;font-size:1rem;line-height:1;
  padding:2px 6px;
}
.add-row{display:flex;gap:8px;}
.add-row input{
  flex:1;
  background:var(--surface-2);
  border:var(--border);
  border-radius:10px;
  padding:11px 13px;
  color:var(--text);
  font-family:inherit;
  font-size:0.92rem;
}
.add-row input::placeholder{color:var(--text-muted);}
.add-row button{
  background:var(--teal);
  color:var(--ink);
  border:none;
  border-radius:10px;
  padding:0 18px;
  font-weight:700;
  cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
}
.reset-link{
  display:block;
  text-align:center;
  margin-top:12px;
  color:var(--text-muted);
  font-size:0.82rem;
  cursor:pointer;
  text-decoration:underline;
}

/* Ad slots */
.ad-slot{
  background:var(--surface);
  border:1px dashed rgba(245,239,251,0.18);
  border-radius:var(--radius);
  color:var(--text-muted);
  font-size:0.8rem;
  text-align:center;
  padding:18px;
  margin:34px 0;
}

footer.site{
  border-top:var(--border);
  padding:30px 0;
  text-align:center;
  color:var(--text-muted);
  font-size:0.85rem;
}
footer.site a{color:var(--lime);text-decoration:none;}

/* Page content sections (below the tool) */
.page-content{max-width:720px;margin:48px auto 24px;}
.page-content h2{font-size:1.35rem;margin:36px 0 12px;}
.page-content h3{font-size:1.05rem;margin:24px 0 8px;color:var(--gold);}
.page-content p{color:var(--text-muted);margin:0 0 14px;}
.page-content a{color:var(--sky);}

/* ---- Mobile header: stop the logo and nav from colliding ---- */
@media(max-width:760px){
  header.site{padding:14px 0;}
  header.site .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .logo{font-size:1.15rem;}
  nav.site-links{
    width:100%;
    gap:16px;
    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav.site-links::-webkit-scrollbar{display:none;}
  nav.site-links a{flex:0 0 auto;}
  .page-content h2{font-size:1.2rem;}
}

/* ---- Spin counter ---- */
.spin-counter{
  margin:12px auto 0;
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  color:var(--text-muted);
  letter-spacing:0.02em;
}
.spin-counter .spin-num{color:var(--lime);}
.spin-counter.pop{animation:spinPop .45s ease-out;}
@keyframes spinPop{
  0%{transform:scale(1);}
  35%{transform:scale(1.22);}
  100%{transform:scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .spin-counter.pop{animation:none;}
}

/* ---- Mobile hero: get the wheel into view faster ---- */
@media(max-width:760px){
  .hero{padding:26px 0 16px;}
  .hero p.lede{font-size:1rem;margin-top:12px;}
  .eyebrow{margin-bottom:10px;font-size:0.72rem;}
  .hub-wheel-zone{padding:16px 0 8px;}
  .tool-header{margin-bottom:22px;}
  .tool-header p{font-size:0.95rem;}
}

/* ================= Homepage hub wheel v2 ================= */
.hub-wheel-zone{position:relative;padding:24px 0 8px;}
.hub-glow{
  position:absolute;top:50%;left:50%;
  width:min(560px,105vw);height:min(560px,105vw);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(198,241,53,.16), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(199,125,255,.18), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(93,177,255,.10), transparent 65%);
  filter:blur(38px);
  pointer-events:none;
  animation:hubDrift 14s ease-in-out infinite alternate;
}
@keyframes hubDrift{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  100%{transform:translate(-50%,-50%) scale(1.12) rotate(18deg);}
}
.hub-wheel-shell{
  position:relative;
  width:min(420px,86vw);
  margin:0 auto;
  aspect-ratio:1/1;
}
#hubWheel{
  width:100%;height:100%;display:block;cursor:pointer;
  border-radius:50%;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.5));
  animation:hubBreathe 3.4s ease-in-out infinite;
}
@keyframes hubBreathe{
  0%,100%{filter:drop-shadow(0 18px 44px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(198,241,53,0));}
  50%{filter:drop-shadow(0 18px 44px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(198,241,53,.28));}
}
.hub-wheel-shell.spinning #hubWheel{animation:none;}
.hub-wheel-shell .wheel-pointer{
  position:absolute;
  top:-10px;left:50%;transform:translateX(-50%);
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:24px solid var(--lime);
  z-index:6;
}
.hub-spin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:21%;aspect-ratio:1/1;border-radius:50%;
  background:var(--ink);
  border:3px solid var(--lime);
  color:var(--lime);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(0.72rem,2.6vw,0.95rem);
  letter-spacing:0.06em;
  cursor:pointer;
  z-index:7;
  transition:transform .15s, box-shadow .2s;
  box-shadow:0 0 18px rgba(198,241,53,.35);
}
.hub-spin:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 28px rgba(198,241,53,.6);}
.hub-spin:active{transform:translate(-50%,-50%) scale(.94);}
.hub-hint{text-align:center;color:var(--text-muted);font-size:0.9rem;margin-top:16px;}

/* Color-coded tool cards */
.tool-card{position:relative;overflow:hidden;}
.tool-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent,var(--lime));
}
.tool-card:hover{border-color:var(--accent,var(--lime));}
.tool-card .tag{background:var(--accent,var(--lime));}

@media(prefers-reduced-motion:reduce){
  .hub-glow,#hubWheel{animation:none;}
}

/* Tool-page wheels scale on small screens */
canvas.wheel-canvas{max-width:min(360px,84vw);height:auto;}

/* ---- Contact form ---- */
.contact-form{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:var(--border);border-radius:var(--radius);
  padding:22px;margin:22px 0 8px;
}
.contact-form label{font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-top:10px;}
.contact-form input,.contact-form select,.contact-form textarea{
  background:var(--surface-2);
  border:var(--border);
  border-radius:10px;
  padding:11px 13px;
  color:var(--text);
  font:inherit;
  font-size:0.95rem;
  width:100%;
  box-sizing:border-box;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:2px solid var(--lime);outline-offset:1px;border-color:transparent;
}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form button{margin-top:18px;align-self:flex-start;}
.hidden-field{display:none;}

/* Keep short pages from leaving a dead gap above the footer */
.wrap.page-body{min-height:60vh;}