/* Tat Yo Grandma: Shop Life — shop-life.css
   All selectors scoped under .sl-. Game modal veils sit ABOVE site chrome
   (nav z-130, bookbar z-120): veils use z-index 200+. */
.sl-root{ --sl-purple:#7c5cff; --sl-orange:#ffa726; --sl-pink:#ff6ad5; --sl-bg:#14101d;
  --sl-text:#F4F1EA; --sl-dim:#b9b2c7; color:var(--sl-text); }
.sl-root p, .sl-root b, .sl-root span, .sl-root div, .sl-root h1, .sl-root h2, .sl-root h3,
.sl-root i, .sl-root label, .sl-root li{ color:inherit; }
.sl-root .sl-muted, #slModalVeil .sl-muted{ color:var(--muted); }
/* ghost buttons: the site has no .btn-ghost, so define it for the game (light on dark) */
.sl-root .btn-ghost, #slModalVeil .btn-ghost{
  background:rgba(255,255,255,.07); color:var(--sl-text,#F4F1EA);
  box-shadow:inset 0 0 0 2px var(--line-light); }
.sl-root .btn-ghost:hover, #slModalVeil .btn-ghost:hover{ box-shadow:inset 0 0 0 2px #fff; transform:translateY(-2px); }
.sl-root .btn-ghost:active, #slModalVeil .btn-ghost:active{ transform:translateY(0) scale(.98); }
.sl-root .btn-ghost:disabled, #slModalVeil .btn-ghost:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.sl-hidden{ display:none !important; }
.sl-muted{ color:var(--muted); }
.sl-h2{ font-family:"Bebas Neue",sans-serif; font-size:1.9rem; letter-spacing:.04em; margin:.4em 0; }
.sl-h3{ font-family:"Bebas Neue",sans-serif; font-size:1.4rem; margin:.8em 0 .3em; }
.sl-empty{ color:var(--muted); padding:14px; text-align:center; }
.sl-big{ min-height:52px; font-size:1.05rem; }
.sl-warn{ color:#f5a524; }

/* menu */
.sl-menu{ text-align:center; padding:26px 14px 40px; }
.sl-logo{ font-size:4rem; }
.sl-title{ font-family:"Bebas Neue",sans-serif; font-size:3rem; line-height:.95; letter-spacing:.03em; margin:.2em 0; }
.sl-title span{ color:var(--sl-orange); }
.sl-sub{ color:var(--muted); margin-bottom:18px; }
.sl-menu-btns{ display:grid; gap:10px; max-width:340px; margin:0 auto; }
.sl-bank{ margin-top:16px; color:var(--muted); }

/* modes */
.sl-modes{ padding:14px; max-width:640px; margin:0 auto; }
.sl-mode-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.sl-mode{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  background:var(--ink-2); border:1px solid var(--line-light); border-radius:14px; padding:14px;
  color:var(--sl-text); min-height:96px; cursor:pointer; }
.sl-mode span{ font-size:1.8rem; }
.sl-mode b{ font-size:1.02rem; }
.sl-mode i{ font-style:normal; color:var(--muted); font-size:.8rem; }
.sl-mode:active{ transform:scale(.98); }

/* HUD */
.sl-hud{ background:var(--ink-2); border:1px solid var(--line-light); border-radius:14px; padding:10px 12px; margin:10px 0; }
.sl-hudrow{ display:flex; justify-content:space-between; padding:2px 0; font-size:.95rem; }
.sl-tier{ color:var(--sl-orange); font-style:normal; font-size:.8rem; }
.sl-repbar{ height:8px; background:#00000055; border-radius:99px; margin-top:6px; overflow:hidden; }
.sl-repbar div{ height:100%; background:linear-gradient(90deg,var(--sl-purple),var(--sl-pink)); border-radius:99px; }
.sl-back{ margin:10px 0 0; }
.sl-career{ padding:0 12px 30px; max-width:640px; margin:0 auto; }

/* tabs */
.sl-tabs{ display:flex; gap:6px; overflow-x:auto; margin:10px 0; }
.sl-tab{ flex:1 0 auto; min-height:48px; padding:8px 12px; border-radius:12px; border:1px solid var(--line-light);
  background:var(--ink-2); color:var(--sl-text); font-weight:600; white-space:nowrap; }
.sl-tab.on{ background:var(--sl-purple); border-color:var(--sl-purple); color:#fff; }

/* cards */
.sl-card{ background:var(--ink-2); border:1px solid var(--line-light); border-radius:14px; padding:14px; margin:10px 0; }
.sl-shop-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-light); }
.sl-shop-row .btn{min-height:48px;}
.sl-owned{ color:#46a758; font-weight:700; }
.sl-log{ font-size:.85rem; color:var(--muted); display:grid; gap:4px; margin-top:8px; max-height:220px; overflow:auto; }
.sl-dayrows div{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line-light); }
.sl-good{ color:#46a758; } .sl-bad{ color:#e5484d; }

/* client consult */
.sl-client-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.sl-face{ font-size:2.6rem; }
.sl-celeb{ color:var(--sl-pink); font-weight:800; }
.sl-idea{ background:var(--ink-2); border-radius:12px; padding:10px; margin:8px 0; }
.sl-qrow{ display:grid; gap:6px; margin:8px 0; font-size:.95rem; }
.sl-lowball{ color:#f5a524; font-weight:700; }
.sl-quirks{ display:grid; gap:8px; margin:10px 0; }
.sl-quirk{ background:#2a2138; border-radius:10px; padding:8px 10px; font-size:.88rem; }
.sl-quirk i{ color:var(--sl-orange); }
.sl-choices{ display:grid; gap:8px; margin-top:12px; }
.sl-choices .btn{ min-height:52px; }
.sl-pickline{ margin-top:10px; color:var(--muted); font-style:italic; }

/* ratings + review */
.sl-ratings{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.sl-ratings div{ background:var(--ink-2); border-radius:10px; padding:8px; text-align:center; }
.sl-ratings span{ display:block; font-size:.75rem; color:var(--muted); }
.sl-stars{ font-size:1.5rem; color:var(--sl-orange); text-align:center; margin:6px 0; }
.sl-review{ background:#211a30; border-left:4px solid var(--sl-pink); border-radius:8px; padding:10px 12px; margin:10px 0; font-size:.92rem; }
.sl-review-head{ margin-bottom:4px; color:var(--sl-orange); }
.sl-pay{ text-align:center; margin:8px 0; }

/* modal + toast — ABOVE site nav (z-130) */
#slModalVeil{ --sl-purple:#7c5cff; --sl-orange:#ffa726; --sl-pink:#ff6ad5; --sl-text:#F4F1EA; --sl-dim:#b9b2c7; }
.sl-modal-veil{ position:fixed; inset:0; background:rgba(5,5,12,.84); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:14px; overflow-y:auto; }
.sl-modal{ background:var(--ink-2); border:1px solid var(--line-light); border-radius:18px;
  padding:18px; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; color:var(--sl-text); }
.sl-toasts{ position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:210;
  display:grid; gap:8px; width:min(92vw,420px); pointer-events:none; }
.sl-toast{ background:#241d33; border:1px solid var(--sl-purple); color:#fff; border-radius:12px;
  padding:10px 14px; font-size:.9rem; text-align:center; box-shadow:0 6px 24px #000a; }
.sl-toast.out{ opacity:0; transition:opacity .4s; }

/* mini-game */
.sl-mg-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.sl-mg-stage{ color:var(--sl-orange); font-weight:700; font-size:.85rem; }
.sl-mg-tip{ background:#2a2138; border-radius:10px; padding:8px 10px; font-size:.85rem; margin-bottom:8px; }
.sl-canvas{ width:100%; border-radius:14px; touch-action:none; display:block; background:#dfa878; cursor:crosshair; }
.sl-mg-controls{ display:grid; gap:8px; margin:10px 0; }
.sl-mg-controls .btn{ min-height:52px; }
.sl-depth{ display:grid; gap:4px; font-size:.9rem; }
.sl-depth input[type=range]{ width:100%; min-height:44px; }
.sl-mg-meters{ display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:.85rem; }
.sl-meter{ height:10px; background:#00000066; border-radius:99px; overflow:hidden; margin-top:4px; }
.sl-meter div{ height:100%; background:var(--sl-purple); border-radius:99px; transition:width .2s; }
#slPain{ background:#46a758; }
#slComf{ background:#46a758; }

/* social */
.sl-postprev{ text-align:center; margin:8px 0; }
.sl-postimg{ background:linear-gradient(135deg,#3a2b5e,#1d1530); border-radius:14px; padding:26px; font-size:2rem; }
.sl-postimg span{ font-size:.9rem; color:var(--muted); display:block; }
.sl-postrow{ margin:10px 0; }
.sl-postrow b{ font-size:.85rem; }
.sl-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sl-chip{ min-height:44px; padding:8px 12px; border-radius:99px; border:1px solid var(--line-light); background:#241d33; color:var(--sl-text); font-size:.82rem; }
.sl-chip.on{ background:var(--sl-purple); border-color:var(--sl-purple); color:#fff; }
.sl-poststats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; text-align:center; margin:10px 0; }
.sl-poststats div{ background:var(--ink-2); border-radius:10px; padding:10px; }
.sl-poststats b{ display:block; font-size:1.2rem; }
.sl-poststats span{ font-size:.75rem; color:var(--muted); }
.sl-viral{ background:linear-gradient(135deg,#5e2b3a,#3a1d2e); border:1px solid var(--sl-pink); border-radius:12px; padding:12px; text-align:center; margin:10px 0; }

/* crazy day */
.sl-crazy{ padding:0 12px 30px; max-width:640px; margin:0 auto; }
.sl-daybar{ height:10px; background:#00000066; border-radius:99px; overflow:hidden; margin:8px 0; }
.sl-daybar div{ height:100%; background:linear-gradient(90deg,var(--sl-orange),var(--sl-pink)); }
.sl-ttlbar{ height:8px; background:#00000066; border-radius:99px; overflow:hidden; margin:8px 0; }
.sl-ttlbar div{ height:100%; background:#e5484d; transition:width 1s linear; }
.sl-crazy-time{ text-align:center; font-family:"Bebas Neue"; font-size:1.6rem; color:var(--sl-orange); }

/* wars */
.sl-wars{ padding:0 12px 30px; max-width:640px; margin:0 auto; }
.sl-wars-live{ background:#241d33; border-radius:12px; padding:10px; margin:8px 0; display:grid; gap:6px; }
.sl-rival{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; font-size:.85rem; }
.sl-lbrow.sl-you{ border:1px solid var(--sl-orange); border-radius:10px; }

/* leaderboard */
.sl-lbhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sl-lbtabs{ display:flex; gap:6px; }
.sl-lbtab{ min-height:44px; }
.sl-lbtab.on{ outline:2px solid var(--sl-purple); }
.sl-lbrow{ display:grid; grid-template-columns:34px 1fr auto 70px; gap:8px; align-items:center; padding:8px 4px; border-top:1px solid var(--line-light); font-size:.9rem; }
.sl-lbrank{ font-weight:800; color:var(--sl-orange); }
.sl-lbgrade{ color:var(--muted); font-size:.8rem; text-align:right; }
.sl-lbform{ display:flex; gap:8px; margin-top:10px; }
.sl-lbform input{ flex:1; min-height:48px; border-radius:12px; border:1px solid var(--line-light); background:#14101d; color:var(--sl-text); padding:0 12px; }
#slLbMsg{ margin-top:8px; font-size:.9rem; }
.sl-boards{ padding:0 12px 30px; max-width:640px; margin:0 auto; }

/* design lab */
.sl-design{ padding:0 12px 30px; max-width:640px; margin:0 auto; }
.sl-drawctl{ display:grid; gap:8px; margin:10px 0; }
.sl-swatches{ display:flex; gap:8px; }
.sl-sw{ width:48px; height:48px; border-radius:50%; border:3px solid transparent; }
.sl-sw.on{ border-color:#fff; }
.sl-sizes{ display:flex; gap:8px; }
.sl-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sl-gitem img{ width:100%; border-radius:12px; display:block; }
.sl-gitem .btn{ margin-top:4px; min-height:44px; width:100%; }

/* studio 3d */
.sl-studio{ padding:0 12px 30px; max-width:640px; margin:0 auto; position:relative; }
.sl-3dwrap{ border-radius:14px; overflow:hidden; background:#0d0a14; min-height:420px; position:relative; }
.sl-3dwrap canvas{ width:100% !important; height:420px !important; display:block; }
.sl-objective{ background:#241d33; border:1px solid var(--sl-orange); border-radius:12px;
  padding:10px 14px; margin:8px 0; font-size:.92rem; color:var(--sl-text); text-align:center; }
.sl-stationbar{ min-height:64px; display:flex; align-items:center; justify-content:center; margin:8px 0; }
.sl-stationbar .sl-sthint{ display:block; font-size:.78rem; color:var(--muted); font-weight:400; margin-top:2px; }
.sl-joystick{ position:fixed; right:16px; bottom:104px; width:132px; height:132px; border-radius:50%;
  background:#ffffff10; border:2px solid var(--line-light); z-index:150; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.sl-joystick.active{ border-color:var(--sl-orange); background:#ffa72622; }
.sl-joystick-nub{ position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:var(--sl-purple); box-shadow:0 2px 10px #000a; pointer-events:none; }
.sl-joystick.active .sl-joystick-nub{ background:var(--sl-orange); transform-origin:center; }
.sl-shopgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:12px; }
.sl-station{ display:flex; flex-direction:column; gap:4px; align-items:center; background:#241d33;
  border:1px solid var(--line-light); border-radius:12px; padding:14px 6px; color:var(--sl-text); min-height:96px; }
.sl-station span{ font-size:1.8rem; }
.sl-station b{ font-size:.78rem; }

@media (min-width:700px){
  .sl-mode-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .sl-toast{ transition:none; }
  .sl-meter div, .sl-ttlbar div{ transition:none; }
  .sl-mode:active{ transform:none; }
}