/* TeenStar Igre — Emoji igra Apple News Emoji Game stil: čist beli card, mek shadow, dosta vazduha, zaobljene "pill" opcije, native iOS emoji rendering. Font: nasleđuje pravi font stranice (body), ne nameće svoj. Boje: pripadaju brendu preko --ts-* varijabli (default neutralan). */ /* FONT NASLEĐIVANJE — uzima font sa (gde WP/tema postavljaju osnovni font) i nameće ga svuda u igri. font: inherit ne radi jer Elementor ne postavlja font na roditelja; zato vučemo direktno sa body preko 'font' kaskade: postavljamo na .ts-emoji-game = inherit od body, pa propagiramo. */ /* FONT — vučemo iz Elementor/WP globalnih varijabli (isto što tema koristi), sa !important da NIŠTA ne pregazi. Fallback lanac na kraju. */ .ts-emoji-game, .ts-emoji-game h1, .ts-emoji-game h2, .ts-emoji-game h3, .ts-emoji-game h4, .ts-emoji-game p, .ts-emoji-game span, .ts-emoji-game div, .ts-emoji-game button, .ts-emoji-game input { font-family: var(--e-global-typography-text-font-family, var(--e-global-typography-primary-font-family, var(--wp--preset--font-family--body, var(--g1-body-font, inherit)))) !important; } /* Naslovi vuku primarni (heading) globalni font */ .ts-emoji-game .ts-emoji-title, .ts-emoji-game .ts-emoji-nl-title, .ts-emoji-game h3, .ts-emoji-game h4 { font-family: var(--e-global-typography-primary-font-family, var(--wp--preset--font-family--heading, var(--g1-heading-font, inherit))) !important; } .ts-emoji-game { /* Brend boje — neutralan default, override u Style tabu */ --ts-accent: #111111; --ts-good: #34c759; --ts-bad: #ff3b30; --ts-text: #1d1d1f; --ts-muted: #6e6e73; --ts-card: #ffffff; --ts-surface: #f5f5f7; --ts-border: #e3e3e6; --ts-radius: 20px; max-width: 460px; margin: 0 auto; color: var(--ts-text); font-family: inherit; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .ts-emoji-game *, .ts-emoji-game *::before, .ts-emoji-game *::after { box-sizing: border-box; } /* ---- Header ---- */ .ts-emoji-head { text-align: center; margin-bottom: 20px; } .ts-emoji-kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 4px; } .ts-emoji-title { margin: 0; font-size: 1.9em; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ts-text); } /* ---- Card: čist beli, mek shadow ---- */ .ts-emoji-card { background: var(--ts-card); border-radius: var(--ts-radius); padding: 28px 22px 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px -12px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.04); } /* ---- Kategorija: suptilan pill ---- */ .ts-emoji-cat { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ts-muted); background: var(--ts-surface); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; } /* ---- Emoji: NATIVE iOS/sistem color emoji, veliko ---- */ .ts-emoji-display { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 28px; min-height: 90px; font-size: clamp(54px, 16vw, 76px); line-height: 1.1; text-align: center; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", sans-serif !important; } /* Noto emoji kao slike — isti prikaz na svim uređajima (i Apple) */ .ts-emoji-img { display: inline-block; width: clamp(54px, 16vw, 76px); height: clamp(54px, 16vw, 76px); vertical-align: middle; object-fit: contain; } .ts-emoji-fallback { font-size: clamp(54px, 16vw, 76px); line-height: 1.1; } /* Mali Noto emoji u statistici */ .ts-emoji-img-sm { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; } /* Rezultat ikona (✅/❌) kao Noto slika */ .ts-emoji-result-icon .ts-emoji-img { width: 40px; height: 40px; } /* ---- Opcije: 2×2 grid zaobljenih pill-ova ---- */ .ts-emoji-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ts-emoji-opt { appearance: none; -webkit-appearance: none; width: 100%; text-align: center; padding: 16px 18px; font-size: 1.02em; font-weight: 600; color: var(--ts-text); background: var(--ts-card); border: 1.5px solid var(--ts-border); border-radius: 14px; cursor: pointer; line-height: 1.25; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .ts-emoji-opt:hover:not(:disabled) { border-color: var(--ts-accent); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.2); } .ts-emoji-opt:active:not(:disabled) { transform: translateY(0) scale(0.99); } .ts-emoji-opt:disabled { cursor: default; } .ts-emoji-opt.is-correct { background: rgba(52, 199, 89, 0.12); border-color: var(--ts-good); color: #1a7f37; } .ts-emoji-opt.is-wrong { background: rgba(255, 59, 48, 0.1); border-color: var(--ts-bad); color: #c4271f; } /* ---- Rezultat ---- */ .ts-emoji-result { margin-top: 26px; text-align: center; animation: ts-rise 0.35s ease; } @keyframes ts-rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ts-emoji-result-icon { font-size: 34px; margin-bottom: 6px; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important; } .ts-emoji-result-text { margin: 0 0 18px; font-size: 1.05em; font-weight: 600; color: var(--ts-text); } .ts-emoji-streak { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-bottom: 22px; } .ts-emoji-stat { font-size: 0.9em; color: var(--ts-muted); } .ts-emoji-stat strong { color: var(--ts-text); font-weight: 700; } /* ---- Dugmad: prava pill dugmad ---- */ .ts-emoji-share, .ts-emoji-nl-btn { appearance: none; -webkit-appearance: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 1em; color: #fff; padding: 14px 28px; border-radius: 980px; background: var(--ts-accent); transition: transform 0.15s ease, opacity 0.15s ease; } .ts-emoji-share:hover, .ts-emoji-nl-btn:hover:not(:disabled) { transform: translateY(-1px); opacity: 0.9; } .ts-emoji-share:active, .ts-emoji-nl-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); } .ts-emoji-nl-btn:disabled { opacity: 0.5; cursor: default; } .ts-emoji-next { margin: 16px 0 0; font-size: 0.85em; color: var(--ts-muted); font-variant-numeric: tabular-nums; } .ts-emoji-finish { margin: 14px 0 0; font-size: 0.98em; font-weight: 600; color: var(--ts-text); } /* ---- Newsletter ---- */ .ts-emoji-newsletter { margin-top: 16px; background: var(--ts-surface); border-radius: var(--ts-radius); padding: 24px 22px; text-align: center; animation: ts-rise 0.35s ease; } .ts-emoji-nl-title { margin: 0 0 6px; font-size: 1.2em; font-weight: 700; letter-spacing: -0.01em; color: var(--ts-text); } .ts-emoji-nl-note { margin: 0 0 16px; font-size: 0.9em; color: var(--ts-muted); } .ts-emoji-nl-row { display: flex; gap: 8px; max-width: 380px; margin: 0 auto; } .ts-emoji-nl-input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--ts-border); background: var(--ts-card); color: var(--ts-text); font-size: 0.95em; font-family: inherit; padding: 13px 16px; border-radius: 12px; } .ts-emoji-nl-input::placeholder { color: var(--ts-muted); } .ts-emoji-nl-input:focus { outline: none; border-color: var(--ts-accent); } .ts-emoji-nl-input:disabled { opacity: 0.6; } .ts-emoji-nl-msg { margin: 14px 0 0; font-size: 0.9em; font-weight: 600; } .ts-emoji-nl-msg.is-ok { color: var(--ts-good); } .ts-emoji-nl-msg.is-err { color: var(--ts-bad); } /* ---- Reklama ---- */ .ts-emoji-ad { margin-top: 24px; text-align: center; min-height: 90px; } .ts-emoji-ad img { max-width: 100%; height: auto; border-radius: 12px; } .ts-emoji-foot { text-align: center; margin-top: 14px; font-size: 0.78em; color: var(--ts-muted); } .ts-emoji-empty { text-align: center; padding: 30px; color: var(--ts-muted); } @media (max-width: 380px) { .ts-emoji-options { grid-template-columns: 1fr; } }