/* home.css — SBONK home / picker / settings / account shell (matches live site) */

/* ---------- HOME ---------- */
.home{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  padding:20px 22px 22px; text-align:center; overflow-y:auto; z-index:4; scrollbar-width:none; }
.home::-webkit-scrollbar{ display:none; }
.home-deco{ position:absolute; inset:0; pointer-events:none; }
.home-deco .d-otto{ position:absolute; width:58px; }
.home-deco .d-otto.left{ top:7%; left:5%; transform:rotate(-12deg); animation:floaty 3.4s ease-in-out infinite; }
.home-deco .d-fire{ position:absolute; top:12%; right:7%; font-size:30px; transform:rotate(10deg); animation:floaty 2.8s ease-in-out infinite; }
.home-hero{ margin-top:6px; }
.home-otto{ width:96px; animation:bobby 4s ease-in-out infinite; filter:drop-shadow(0 14px 26px rgba(155,108,255,.35)); }
.home-logo{ font-family:Anton; font-size:46px; line-height:.82; color:#fff; letter-spacing:1px;
  text-shadow:0 5px 0 var(--magenta),0 0 38px rgba(255,46,136,.45); margin-top:6px; }
.home-logo .bang{ color:var(--lime); text-shadow:0 5px 0 #0c0a14; }
.home-tag{ color:var(--muted); font-size:13px; margin:9px 0 0; }

.home-stats{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.stat-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font-weight:700; font-size:13px; color:var(--text); }
.stat-pill .sp-ico{ font-size:15px; display:inline-flex; }
.stat-pill .sp-ico .otto{ width:18px; }
.stat-pill.coins{ color:var(--yellow); }
.stat-pill.rec{ color:var(--text); }
.stat-pill.user{ cursor:pointer; }

.home-fill{ height:16px; flex:0 0 auto; }

.cat-pill{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:300px;
  background:rgba(198,255,60,.06); border:2px solid var(--lime); border-radius:16px; padding:13px;
  font-family:Anton; font-size:18px; letter-spacing:.4px; color:#fff; cursor:pointer; margin-top:4px;
  box-shadow:0 0 26px rgba(198,255,60,.16); transition:transform .12s; flex:0 0 auto; }
.cat-pill:active{ transform:scale(.985); }
.cat-pill .cp-ico{ font-size:18px; }
.cat-pill .cp-arrow{ color:var(--lime); font-size:14px; }

.home-play{ width:100%; max-width:300px; margin-top:12px; border:none; border-radius:20px; background:var(--magenta);
  color:#fff; font-family:Anton; font-size:25px; letter-spacing:.5px; padding:16px; cursor:pointer; flex:0 0 auto;
  box-shadow:0 7px 0 #b51e63, 0 14px 30px rgba(255,46,136,.4); transition:transform .1s; }
.home-play:active{ transform:translateY(4px); box-shadow:0 3px 0 #b51e63, 0 6px 16px rgba(255,46,136,.4); }

.home-menu{ width:100%; max-width:300px; display:flex; flex-direction:column; gap:9px; margin-top:12px; flex:0 0 auto; }
.menu-btn{ position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:13px 16px; cursor:pointer;
  color:var(--text); font-weight:700; font-size:15px; transition:border-color .15s, transform .1s; overflow:hidden; }
.menu-btn:hover{ border-color:rgba(255,255,255,.24); }
.menu-btn:active{ transform:translateY(1px); }
.menu-btn .mb-ico{ font-size:20px; width:26px; display:inline-flex; justify-content:center; }
.menu-btn .mb-ico .otto{ width:24px; }
.menu-btn .mb-deco{ position:absolute; right:14px; font-size:22px; opacity:.5; }
.home-classifica{ margin-top:12px; margin-bottom:4px; display:inline-flex; align-items:center; gap:7px; background:var(--surface2);
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer; color:var(--text); font-weight:700; font-size:14px; flex:0 0 auto; }

/* ---------- generic sheet (picker/settings/account) ---------- */
.sheet-wrap{ position:absolute; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,6,14,.7); backdrop-filter:blur(6px); animation:fadeIn .2s; }
.sheet-card{ width:100%; background:var(--bg2); border:1px solid var(--line); border-bottom:none;
  border-radius:26px 26px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); max-height:88%; overflow-y:auto;
  animation:sheetUp .28s cubic-bezier(.2,.8,.2,1); box-shadow:0 -20px 60px rgba(0,0,0,.5); }
.sheet-grip{ width:42px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 14px; }
.sheet-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-h h2{ font-family:Anton; font-size:24px; margin:0; letter-spacing:.4px; }
.sheet-x{ width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--line); color:var(--text); font-size:17px; cursor:pointer; }
.sheet-sec{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:16px 0 9px; }

/* ---------- picker (modes + categories) ---------- */
.pick-modes{ display:flex; flex-direction:column; gap:9px; }
.pick-mode{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:2px solid var(--line); border-left:5px solid var(--ac); border-radius:15px; padding:13px 15px;
  color:var(--text); transition:border-color .15s, transform .1s; }
.pick-mode.active{ border-color:var(--ac); background:color-mix(in srgb, var(--ac) 12%, var(--surface)); }
.pick-mode:active{ transform:translateY(1px); }
.pick-mode .pm-ico{ font-size:24px; width:36px; display:flex; justify-content:center; }
.pick-mode .pm-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pick-mode .pm-t{ font-family:Anton; font-size:17px; letter-spacing:.3px; line-height:1.2; }
.pick-mode .pm-d{ font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:2px; }
.pick-mode .pm-check{ color:var(--ac); font-size:18px; }

.pick-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.pick-cat{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  background:var(--surface); border:2px solid var(--line); border-radius:15px; padding:12px 6px; color:var(--text); transition:border-color .15s, transform .1s; }
.pick-cat.active{ border-color:var(--cc); box-shadow:0 0 18px color-mix(in srgb,var(--cc) 34%, transparent); }
.pick-cat:active{ transform:translateY(1px); }
.pick-cat .pc-ico{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.pick-cat .pc-ico .otto{ width:42px; }
.pick-cat .pc-n{ font-weight:700; font-size:12px; }

/* ---------- settings ---------- */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.set-row .sr-l{ display:flex; align-items:center; gap:11px; }
.set-row .sr-ico{ font-size:19px; width:24px; text-align:center; }
.set-row .sr-t{ font-weight:600; font-size:15px; }
.set-row .sr-s{ font-size:11.5px; color:var(--muted); }
.toggle{ width:50px; height:30px; border-radius:999px; background:var(--surface2); border:1px solid var(--line); position:relative; cursor:pointer; transition:background .2s; flex:0 0 auto; }
.toggle.on{ background:var(--lime); }
.toggle .knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.toggle.on .knob{ transform:translateX(20px); }
.seg{ display:flex; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; }
.seg button{ border:none; background:transparent; color:var(--muted); font-weight:700; font-size:13px; padding:6px 13px; border-radius:7px; cursor:pointer; }
.seg button.on{ background:var(--lime); color:var(--ink, #0c0a14); }
.set-danger{ width:100%; margin-top:18px; background:transparent; border:2px solid var(--magenta); color:var(--magenta);
  border-radius:14px; padding:13px; font-family:Anton; font-size:15px; letter-spacing:.3px; cursor:pointer; }
.set-danger:active{ background:rgba(255,46,136,.12); }
.set-foot{ text-align:center; font-family:'Space Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:16px; }

/* ---------- account ---------- */
.acc-otto{ width:84px; display:block; margin:0 auto 6px; }
.acc-sub{ text-align:center; color:var(--muted); font-size:13px; margin:0 0 18px; }
.acc-field{ width:100%; margin-bottom:11px; }
.acc-field label{ display:block; font-size:11px; color:var(--muted); margin:0 0 5px 2px; letter-spacing:.04em; }
.acc-field input{ width:100%; background:var(--surface); border:2px solid var(--line); border-radius:13px; padding:13px 14px;
  color:var(--text); font-size:15px; font-family:'Space Grotesk',sans-serif; outline:none; transition:border-color .15s; }
.acc-field input:focus{ border-color:var(--cyan); }
.acc-primary{ width:100%; margin-top:6px; border:none; border-radius:14px; background:var(--lime); color:#0c0a14;
  font-family:Anton; font-size:17px; letter-spacing:.3px; padding:14px; cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.35); }
.acc-primary:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.acc-or{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:16px 0; }
.acc-or::before,.acc-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.acc-social{ display:flex; flex-direction:column; gap:9px; }
.acc-soc{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:13px; padding:12px; color:var(--text); font-weight:600; font-size:14px; cursor:pointer; }
.acc-guest{ width:100%; background:transparent; border:none; color:var(--muted); font-size:13px; padding:14px 0 2px; cursor:pointer; text-decoration:underline; }
.acc-tabs{ display:flex; gap:6px; background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; }
.acc-tabs button{ flex:1; border:none; background:transparent; color:var(--muted); font-family:Anton; font-size:14px; letter-spacing:.3px; padding:9px; border-radius:8px; cursor:pointer; }
.acc-tabs button.on{ background:var(--magenta); color:#fff; }

/* small toast */
.toast{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:80; background:var(--surface2);
  border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:13px; font-weight:600; color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.5); animation:toastIn .3s; white-space:nowrap; }
.toast .t-ico{ margin-right:6px; }

@keyframes sheetUp{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes toastIn{ from{ transform:translate(-50%,12px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }

/* reduce motion */
html.reduce-motion *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }

/* nota ospite + onboarding */
.guest-note{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:14px; padding:13px 15px; font-size:13px; line-height:1.5; color:var(--muted); margin:6px 0 14px; }
.guest-note b{ color:var(--text); }
.onb-wrap{ position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(7,4,9,0.93); animation:fadeIn .3s; }
.onb-card{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px 22px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.onb-otto{ width:130px; height:130px; margin:0 auto; }
.onb-t{ font-family:Anton; font-size:26px; letter-spacing:.4px; margin-top:8px; }
.onb-d{ font-size:14.5px; color:var(--muted); line-height:1.55; margin:10px 6px 18px; }
.onb-dots{ display:flex; gap:7px; justify-content:center; margin-bottom:18px; }
.onb-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.2s; }
.onb-dot.on{ background:var(--lime); width:22px; border-radius:5px; }
.onb-actions{ display:flex; flex-direction:column; gap:8px; }