:root {
    --sh-primary: var(--accent, #a78bfa);
    --sh-primary-dark: #5b21b6;
    --sh-accent: #f97316;
    --sh-surface: var(--panel, rgba(255,255,255,.92));
    --sh-border: rgba(167,139,250,.28);
    --sh-border: color-mix(in srgb, var(--accent, #a78bfa) 28%, transparent);
    --sh-text: var(--text, #25164a);
    --sh-muted: var(--muted, #6f6682);
    --sh-shadow: var(--shadow, 0 16px 36px rgba(47,22,91,.14));
}
.sh-navbar,.sh-navbar *, .sh-footer,.sh-card,.sh-modal-panel,.sh-scoreboard,.sh-room-code,.sh-connection-banner { font-family: Cinema, Nazanin, Tahoma, sans-serif; }
.sh-navbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; max-width:1180px; margin:0 auto 22px; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); border:0; border-bottom:1px solid var(--sh-border); border-radius:0 0 24px 24px; background:var(--panel, rgba(15,16,37,.82)); background:color-mix(in srgb, var(--bg, #0f1025) 72%, transparent); box-shadow:0 12px 30px rgba(0,0,0,.2); box-shadow:0 12px 30px color-mix(in srgb, var(--bg, #0f1025) 28%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.sh-brand { display:flex; align-items:center; gap:10px; color:var(--sh-text); text-decoration:none; min-width:max-content; }
.sh-brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--sh-primary),var(--sh-accent)); font-size:1.45rem; font-weight:bold; box-shadow:inset 3px 3px 7px rgba(255,255,255,.35),inset -4px -4px 8px rgba(42,12,85,.28); }
.sh-brand strong,.sh-brand small { display:block; line-height:1.1; }.sh-brand strong { font-size:1.25rem; }.sh-brand small { color:var(--sh-muted); font-size:.78rem; margin-top:4px; }
.sh-nav-links { display:flex; align-items:center; gap:6px; flex:1; }.sh-nav-links a { color:var(--sh-muted); text-decoration:none; padding:10px 13px; border-radius:12px; }.sh-nav-links a:hover,.sh-nav-links a.is-active { color:var(--sh-primary); background:rgba(124,58,237,.09); }
.sh-nav-actions { display:flex; align-items:center; gap:8px; }.sh-icon-button { display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:8px; border:0; border-radius:13px; color:var(--sh-primary); background:transparent; cursor:pointer; }.sh-icon-button:hover,.sh-icon-button:focus-visible { background:rgba(124,58,237,.1); }.sh-icon-button:focus-visible,.sh-button:focus-visible { outline:3px solid rgba(249,115,22,.55); outline-offset:3px; }
.sh-connection-dot { display:inline-flex; align-items:center; gap:6px; color:#15803d; font-size:.85rem; }.sh-connection-dot i { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.14); }
.sh-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:11px 18px; border:2px solid transparent; border-radius:14px; font:inherit; font-weight:bold; text-decoration:none; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }.sh-button:active { transform:scale(.96) translateY(1px); }.sh-button--primary { color:#fff; background:linear-gradient(135deg,var(--sh-primary),var(--sh-primary-dark)); box-shadow:0 8px 16px rgba(91,33,182,.2); }.sh-button--secondary { color:var(--sh-primary); background:rgba(124,58,237,.08); border-color:var(--sh-border); }.sh-button--danger { color:#fff; background:#dc2626; }.sh-button--icon-only { width:48px; padding:8px; }.sh-button--small { min-height:42px; padding:8px 14px; font-size:.95rem; }.sh-button--large { min-height:54px; padding-inline:24px; }
.sh-card { border:2px solid var(--sh-border); border-radius:22px; background:var(--sh-surface); box-shadow:var(--sh-shadow); overflow:hidden; }.sh-card-media img,.sh-blog-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }.sh-card-icon { display:grid; place-items:center; width:72px; height:72px; margin:20px 20px 0; border-radius:22px; color:#fff; background:linear-gradient(145deg,var(--sh-primary),var(--sh-accent)); }.sh-card-icon svg { width:38px; height:38px; }.sh-card-content { padding:16px 20px 20px; }.sh-card-content h3 { margin:10px 0 6px; color:var(--sh-text); font-size:1.3rem; }.sh-card-content p { margin:0 0 16px; color:var(--sh-muted); line-height:1.8; }.sh-card-meta { display:flex; flex-wrap:wrap; gap:6px; }.sh-tag,.sh-status { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; color:var(--sh-primary); background:rgba(124,58,237,.1); font-size:.82rem; }.sh-status { color:#15803d; background:rgba(34,197,94,.12); }.sh-game-card--orange .sh-card-icon { background:linear-gradient(145deg,#f97316,#c2410c); }.sh-game-card--cyan .sh-card-icon { background:linear-gradient(145deg,#06b6d4,#0e7490); }.sh-blog-card a { color:inherit; text-decoration:none; }.sh-blog-card time { color:var(--sh-muted); font-size:.9rem; }.sh-tool-card { display:flex; align-items:flex-start; gap:4px; }
.sh-footer { max-width:1180px; margin:32px auto 0; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); color:var(--sh-muted); }.sh-footer-main { display:flex; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid var(--sh-border); }.sh-footer strong { color:var(--sh-text); font-size:1.25rem; }.sh-footer p { margin:8px 0 0; }.sh-footer nav { display:flex; flex-wrap:wrap; gap:14px; }.sh-footer a { color:var(--sh-primary); text-decoration:none; }.sh-footer-bottom { padding-top:14px; font-size:.88rem; }
.sh-modal[hidden],.sh-connection-banner[hidden] { display:none; }.sh-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; }.sh-modal-backdrop { position:absolute; inset:0; background:rgba(22,10,47,.58); }.sh-modal-panel { position:relative; z-index:1; width:min(100%,560px); max-height:min(90vh,720px); overflow:auto; padding:24px; border:2px solid var(--sh-border); border-radius:26px; background:var(--sh-surface); box-shadow:0 28px 80px rgba(0,0,0,.25); }.sh-modal-panel h2 { margin:0 0 16px; color:var(--sh-text); }.sh-modal-close { position:absolute; inset-inline-end:10px; top:10px; font-size:1.5rem; }.sh-modal-body { color:var(--sh-muted); line-height:1.9; }.sh-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.sh-toast-region { position:fixed; z-index:120; inset-inline:16px; display:grid; gap:8px; pointer-events:none; }.sh-toast-region--top { top:16px; }.sh-toast-region--bottom { bottom:calc(16px + env(safe-area-inset-bottom)); }.sh-toast { justify-self:center; max-width:min(100%,420px); padding:12px 16px; border:2px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; background:#31205b; box-shadow:var(--sh-shadow); opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; }.sh-toast.is-visible { opacity:1; transform:none; }.sh-toast--success { background:#15803d; }.sh-toast--danger { background:#b91c1c; }
.sh-room-code { display:flex; align-items:center; gap:12px; padding:12px 16px; border:2px dashed var(--sh-primary); border-radius:18px; background:rgba(124,58,237,.07); }.sh-room-code strong { letter-spacing:.18em; color:var(--sh-primary); font-size:1.4rem; }.sh-room-code-label { color:var(--sh-muted); }.sh-room-code > div { display:flex; margin-inline-start:auto; }.sh-player { position:relative; display:flex; align-items:center; gap:10px; min-height:58px; padding:8px; border-radius:16px; }.sh-player.is-turn { background:rgba(249,115,22,.1); box-shadow:inset 0 0 0 2px rgba(249,115,22,.4); animation:sh-turn-pulse 1.5s infinite; }.sh-avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--sh-primary),var(--sh-accent)); background-size:cover; background-position:center; font-weight:bold; }.sh-player-info { display:grid; gap:2px; }.sh-player-info strong { color:var(--sh-text); }.sh-host-badge,.sh-player-score { color:var(--sh-muted); font-size:.82rem; }.sh-player-state { width:10px; height:10px; margin-inline-start:auto; border-radius:50%; background:#f59e0b; }.sh-player-state.is-online { background:#22c55e; }
.sh-timer { padding:14px; border-radius:18px; background:rgba(124,58,237,.08); }.sh-timer-head { display:flex; justify-content:space-between; color:var(--sh-muted); }.sh-timer-head strong { color:var(--sh-primary); font-size:1.25rem; }.sh-timer-track { height:10px; margin-top:10px; overflow:hidden; border-radius:99px; background:rgba(124,58,237,.14); direction:ltr; }.sh-timer-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sh-accent),var(--sh-primary)); transition:width .4s linear; }.sh-timer.is-warning .sh-timer-head strong { color:#dc2626; }.sh-scoreboard { padding:18px; border:2px solid var(--sh-border); border-radius:20px; background:var(--sh-surface); }.sh-scoreboard h2 { margin:0 0 12px; color:var(--sh-text); }.sh-score-list { display:grid; gap:8px; padding:0; margin:0; list-style:none; }.sh-score-list li { display:flex; justify-content:space-between; padding:10px 12px; border-radius:12px; background:rgba(124,58,237,.06); color:var(--sh-text); }.sh-podium { display:grid; gap:8px; margin-bottom:14px; }.sh-podium-place { display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; padding:10px; border-radius:12px; background:rgba(249,115,22,.1); }.sh-connection-banner { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#7f1d1d; background:#fee2e2; border-bottom:2px solid #fca5a5; }.sh-connection-banner button { margin-inline-start:auto; min-height:40px; padding:6px 12px; border:0; border-radius:10px; color:#fff; background:#b91c1c; font:inherit; cursor:pointer; }.sh-connection-spinner { width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:sh-spin .8s linear infinite; }.sh-sound-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:2px solid var(--sh-border); border-radius:13px; color:var(--sh-primary); background:transparent; font:inherit; cursor:pointer; }.sh-sound-toggle.is-muted { color:var(--sh-muted); opacity:.72; }
@keyframes sh-spin { to { transform:rotate(360deg); } } @keyframes sh-turn-pulse { 50% { transform:translateY(-2px); } }
@media (max-width:720px) { .sh-navbar { margin:8px; border-radius:18px; flex-wrap:nowrap; }.sh-nav-links { display:none; }.sh-nav-actions { margin-inline-start:auto; flex-shrink:0; }.sh-connection-dot span { display:none; }.sh-footer-main { flex-direction:column; } .sh-modal { align-items:end; padding:0; }.sh-modal-panel { width:100%; max-height:88vh; border-radius:26px 26px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion:reduce) { .sh-button,.sh-toast,.sh-timer-track span { transition:none; } .sh-player.is-turn,.sh-connection-spinner { animation:none; } }
.sh-page-header { position:relative; z-index:2; }.sh-home-content { position:relative; z-index:1; }.sh-hero,.sh-section,.sh-component-showcase,.sh-about { max-width:1180px; margin:28px auto; padding:28px 16px; }.sh-hero { text-align:center; }.sh-hero-icon { display:grid; place-items:center; width:78px; height:78px; margin:0 auto 12px; border-radius:26px; color:#fff; background:linear-gradient(145deg,var(--sh-primary),var(--sh-accent)); }.sh-hero-icon svg { width:42px; height:42px; }.sh-eyebrow { margin:0 0 8px; color:var(--sh-accent); font-weight:bold; }.sh-hero h1 { margin:0; color:var(--sh-text); font-size:clamp(2rem,5vw,4rem); }.sh-hero > p:not(.sh-eyebrow) { max-width:620px; margin:12px auto 20px; color:var(--sh-muted); font-size:1.1rem; line-height:1.9; }.sh-hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }.sh-section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; }.sh-section-head h2,.sh-about h2 { margin:0; color:var(--sh-text); }.sh-section-head span,.sh-section-head a { color:var(--sh-muted); text-decoration:none; }.sh-card-grid { display:grid; gap:16px; }.sh-card-grid--games { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }.sh-card-grid--tools { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }.sh-card-grid--blog { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }.sh-component-showcase { border:2px solid var(--sh-border); border-radius:28px; background:rgba(255,255,255,.18); }.sh-about { padding-block:34px; text-align:center; border-radius:26px; background:rgba(124,58,237,.07); }.sh-about p { max-width:680px; margin:10px auto 0; color:var(--sh-muted); line-height:1.9; }.sh-room-layout { max-width:1180px; margin:28px auto; padding:0 16px; }.sh-room-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.sh-room-header h1 { margin:0; color:var(--sh-text); }.sh-room-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; }.sh-room-main,.sh-room-side { display:grid; align-content:start; gap:16px; }.sh-game-stage,.sh-panel { padding:24px; border:2px solid var(--sh-border); border-radius:22px; background:var(--sh-surface); box-shadow:var(--sh-shadow); }.sh-game-stage { min-height:380px; display:grid; place-content:center; justify-items:center; text-align:center; }.sh-game-stage h2,.sh-panel h2 { margin-top:0; color:var(--sh-text); }.sh-game-stage p { color:var(--sh-muted); }.sh-panel > div { display:grid; gap:4px; }
@media (max-width:800px) { .sh-room-grid { grid-template-columns:1fr; }.sh-room-side { grid-template-columns:1fr 1fr; }.sh-room-side .sh-panel { grid-column:1/-1; } }
@media (max-width:520px) { .sh-room-header { align-items:flex-start; flex-direction:column; }.sh-room-side { grid-template-columns:1fr; } }
.sh-brand strong { font-family: Cinema, Nazanin, sans-serif; font-size:1.35rem; }
.sh-brand-home { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--sh-primary),var(--sh-accent)); box-shadow:inset 3px 3px 7px rgba(255,255,255,.35),inset -4px -4px 8px rgba(42,12,85,.28); }
.sh-brand-home svg { display:block; width:22px; height:22px; stroke:#fff; }
.sh-navbar .sh-icon-button { width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; }
.sh-navbar .sh-icon-button svg { display:block; width:20px; height:20px; }
.sh-navbar .sh-button--small { min-width:44px; min-height:44px; padding:8px 14px; }
.sh-navbar #loginBtnTopbar { width:44px; height:44px; min-width:44px; min-height:44px; padding:10px; }
.sh-navbar #loginBtnTopbar svg { display:block; width:20px !important; height:20px !important; }
@media (max-width:720px) { .sh-brand-home { width:38px; height:38px; border-radius:13px; }.sh-navbar .sh-icon-button { width:40px; height:40px; min-width:40px; min-height:40px; padding:9px; }.sh-navbar .sh-button--small { min-width:40px; min-height:40px; } }
.sh-navbar .sh-button--secondary { color:var(--text); background:var(--panel-strong); border-color:color-mix(in srgb, var(--accent) 32%, transparent); }
.sh-navbar .sh-icon-button { color:var(--muted); background:var(--panel); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); box-shadow:inset 2px 2px 5px rgba(255,255,255,.06),inset -2px -2px 7px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12); }
.sh-navbar .sh-icon-button:hover,.sh-navbar .sh-icon-button:focus-visible { color:var(--text); background:var(--panel-strong); }
.sh-navbar .sh-brand strong { background:linear-gradient(135deg,var(--accent),#f97316); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media (max-width:720px) { .sh-navbar { gap:8px; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }.sh-brand { gap:9px; }.sh-brand-mark { width:38px; height:38px; border-radius:13px; }.sh-nav-actions { gap:6px; }.sh-nav-actions .sh-button--small { min-height:40px; }.sh-nav-actions .sh-icon-button { min-width:40px; min-height:40px; } }
@media (max-width:380px) { .sh-brand small { display:none; }.sh-navbar { padding-inline:8px; }.sh-nav-actions { gap:4px; }.sh-nav-actions .sh-icon-button { min-width:36px; min-height:36px; }.sh-nav-actions .sh-button--small { padding-inline:10px; } }