/* Smartz Syndicate shared styles v1 (2026-10-12)
   One source for colour tokens, fonts, buttons, header, footer, KP widget and tap targets.
   Classes are prefixed .ss- so they don't collide with page CSS. */
@font-face{font-family:"SS Grotesk";src:url(/assets/fonts/SpaceGrotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"SS Inter";src:url(/assets/fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ss-bg:#07080d;--ss-panel:#0f121c;--ss-panel2:#141827;--ss-line:#232a40;
  --ss-txt:#e7ebf5;--ss-dim:#9aa3bd;
  --ss-koda:#4fc9ff;    /* Koda · Shield · SMRT */
  --ss-tauron:#e04fff;  /* Tauron · Sword · SMF */
  --ss-phoenix:#ff9a3c; /* Zoran · Phoenix · SMC */
  --ss-tunnel:#5ef2c2;--ss-warn:#ffcf5a;--ss-bad:#ff5a6e;--ss-ok:#3ddc84;
  --ss-grad:linear-gradient(90deg,var(--ss-koda),var(--ss-tauron));
  --ss-radius:14px;--ss-radius-sm:10px;--ss-tap:44px;
  --ss-font-body:"SS Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ss-font-head:"SS Grotesk","SS Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ss-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* form controls never fall back to the UA font (Arial) */
button,input,select,textarea{font:inherit}

/* ---------- buttons ---------- */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ss-tap);padding:10px 20px;border-radius:var(--ss-radius);border:1px solid var(--ss-line);background:var(--ss-panel2);color:var(--ss-txt);font:700 15px/1.2 var(--ss-font-body);text-decoration:none;cursor:pointer}
.ss-btn:hover{border-color:var(--ss-koda)}
.ss-btn-primary{background:var(--ss-grad);border-color:transparent;color:#07080d}
.ss-btn-primary:hover{filter:brightness(1.08)}
.ss-btn-secondary{background:transparent;border-color:var(--ss-koda);color:var(--ss-koda)}
.ss-btn:focus-visible,.ss-hdr a:focus-visible,.ss-ftr a:focus-visible,.ss-kp:focus-visible{outline:2px solid var(--ss-koda);outline-offset:2px}

/* ---------- header ---------- */
.ss-hdr{position:relative;z-index:20;background:rgba(7,8,13,.92);border-bottom:1px solid var(--ss-line);font:15px/1.3 var(--ss-font-body);color:var(--ss-txt);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ss-hdr-in{max-width:1080px;margin:0 auto;padding:6px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ss-brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--ss-tap);color:var(--ss-txt);text-decoration:none;font:700 14px/1 var(--ss-font-head);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.ss-brand svg{width:30px;height:30px;flex:none}
.ss-brand b{color:var(--ss-dim);font-weight:600}
.ss-nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ss-nav::-webkit-scrollbar{display:none}
.ss-nav a{display:inline-flex;align-items:center;min-height:var(--ss-tap);padding:0 12px;border-radius:var(--ss-radius-sm);color:var(--ss-dim);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.ss-nav a:hover{color:var(--ss-txt);background:var(--ss-panel2)}
.ss-nav a[aria-current="page"]{color:var(--ss-txt);box-shadow:inset 0 -2px 0 var(--ss-koda)}
@media (max-width:760px){
  .ss-hdr-in{padding:4px 12px;gap:4px 8px}
  .ss-nav{order:3;flex-basis:100%;margin:0 -12px;padding:0 6px}
  .ss-kp{margin-left:auto}
}

/* ---------- KP widget (one component everywhere) ---------- */
.ss-kp{display:inline-flex;align-items:center;gap:8px;min-height:var(--ss-tap);padding:0 14px;border-radius:999px;border:1px solid var(--ss-line);background:var(--ss-panel2);color:var(--ss-txt);font:600 13px/1 var(--ss-font-body);text-decoration:none;cursor:pointer;white-space:nowrap}
.ss-kp::before{content:"";width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:var(--ss-tunnel);box-shadow:0 0 8px var(--ss-tunnel);flex:none}
.ss-kp:hover{border-color:var(--ss-tunnel)}
.ss-kp[data-state="signed"]{cursor:default;color:var(--ss-tunnel)}
.ss-kp[data-state="signing"]{opacity:.7}

/* ---------- footer ---------- */
.ss-ftr{border-top:1px solid var(--ss-line);background:var(--ss-bg);color:var(--ss-dim);font:13px/1.6 var(--ss-font-body);text-align:center;margin-top:32px}
.ss-ftr-in{max-width:1080px;margin:0 auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.ss-ftr p{margin:6px auto;max-width:760px}
.ss-ftr .ss-risk b{color:var(--ss-warn)}
.ss-ftr .ss-note{color:var(--ss-txt);opacity:.85}
.ss-fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin:0 0 6px;padding:0;list-style:none}
.ss-fnav a,.ss-ftr p a{display:inline-flex;align-items:center;min-height:var(--ss-tap);padding:0 10px;color:var(--ss-koda);text-decoration:none}
.ss-ftr p a{padding:0 4px}
.ss-fnav a:hover,.ss-ftr p a:hover{text-decoration:underline}
/* compact footer for the full-screen game */
.ss-ftr--game{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:4;background:rgba(7,8,13,.92);font-size:11px;line-height:1.2}
.ss-ftr--game .ss-ftr-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 10px;padding:0 10px env(safe-area-inset-bottom,0px)}
.ss-ftr--game p{margin:0}
.ss-ftr--game a{min-height:var(--ss-tap);display:inline-flex;align-items:center;padding:0 6px;color:var(--ss-koda);text-decoration:none}

/* ---------- tap targets (mobile, content areas) ---------- */
@media (pointer:coarse),(max-width:760px){
  :where(main,.wrap,.page,#app,.container) :where(button,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),.btn,[role=button]){min-height:var(--ss-tap)}
  :where(main,.wrap,.page) :where(nav,footer,ul.fnav,.links) a{display:inline-flex;align-items:center;min-height:var(--ss-tap)}
}

/* ---------- game page (/city/play/) ---------- */
.ss-game{font-family:var(--ss-font-body)}
.ss-game #bar{bottom:calc(env(safe-area-inset-bottom,0px) + 54px)}
.ss-game #snd{min-width:var(--ss-tap);min-height:var(--ss-tap)}
.ss-game #kp{font-family:var(--ss-font-body)}

/* ---------- polish v2 (2026-10-12): one type scale, button, card and tap-target look on every page ---------- */
html body{font-family:var(--ss-font-body)}
html body h1,html body h2,html body h3{font-family:var(--ss-font-head);letter-spacing:-.01em}
html body h1{font-weight:700}
html body .btn,html body .button{border-radius:var(--ss-radius);font-family:var(--ss-font-body);font-weight:700;min-height:var(--ss-tap)}
html body .card,html body .panel{border-radius:16px}
html body .box{border-radius:var(--ss-radius-sm)}
@media (max-width:719px){html body main li>a:only-child{display:inline-flex;align-items:center;min-height:var(--ss-tap)}}
/* tap targets ≥44px on every page (polish v2) */
.ss-nav a,.ss-fnav a,.ss-ftr--game a{min-width:var(--ss-tap);justify-content:center}
#hud a.brand,.sheet-in button.x{min-height:var(--ss-tap);min-width:var(--ss-tap);display:inline-flex;align-items:center;justify-content:center}
#p-reset,.btn-ghost,.example-btn,#copy-friend-share,button.ib,a.go,.waiting-list-form input[type=email]{min-height:var(--ss-tap)!important;min-width:var(--ss-tap)!important}
footer li a,footer p a,main p a[href$="/os.html"]{display:inline-flex;align-items:center;min-height:var(--ss-tap);min-width:var(--ss-tap);justify-content:center}
a[href^="#l"],p.src>a,a[href="https://t.me/Smrtquickflips"]:not([class]),a[href="https://x.com/Smartzprime"]:not([class]),#friend-share-x,#friend-share-telegram{display:inline-flex;align-items:center;min-height:var(--ss-tap)}
#block-ticker .tick-new,#block-ticker .tick-new>span{color:var(--ss-koda)!important;animation:none!important;opacity:1!important}
a[href="/earn/"],a[href="/os.html"],a[href="https://smartzsyndicate.com/os.html"]{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ss-tap);min-width:var(--ss-tap)}
input[type=email]{min-height:var(--ss-tap)!important}
a.dim[href],li>a[href^="#"]{display:inline-flex;align-items:center;min-height:var(--ss-tap)}
html body:has(#hud) h2{font-family:Bangers,var(--ss-font-head);letter-spacing:.04em}
.news li a{display:inline-flex;align-items:center;min-height:var(--ss-tap)}
