@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

/* Tick Tock Trap! by HiredAbhi - page styles (scoped to #ttt-root) */
.o_livechat_button, .o-livechat-root, .o_livechat_LivechatButton { display: none !important; }
#wrapwrap, #wrap { background: #F6F7FB; }
#ttt-root { --navy: #0D1330; --ink: #141833; --muted: #5B6180; --paper: #F6F7FB; --line: #E3E5F0; --violet: #7357F6; --magenta: #E23FA3; --cyan: #35D0E0; --amber: #F2A93B; --green: #1FA87A;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; -webkit-font-smoothing: antialiased; transition: background .4s; }
#ttt-root *, #ttt-root *::before, #ttt-root *::after { box-sizing: border-box; }
#ttt-root.is-light { background: var(--paper); }
#ttt-root.is-game { background: radial-gradient(520px 360px at 50% 34%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%), linear-gradient(165deg, #4A2FC9 0%, #3420A3 48%, #22166F 100%); color: #fff; }
#ttt-root button { font-family: inherit; cursor: pointer; }
#ttt-root a { color: inherit; }
.ttt-app { position: relative; width: 100%; max-width: 460px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.ttt-strip { height: 8px; background: linear-gradient(100deg, var(--violet) 0%, var(--magenta) 55%, var(--cyan) 100%); }
.ttt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 0; }
.ttt-logo { height: 38px; width: auto; display: block; }
.ttt-live { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--green); letter-spacing: .4px; }
.ttt-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: tttPulse 1.6s ease-in-out infinite; }
.ttt-pad { padding: 0 20px; }
.ttt-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--violet); text-transform: uppercase; }
.ttt-h1 { margin: 6px 0 0; font-size: 50px; line-height: .98; font-weight: 900; letter-spacing: -1.5px; color: var(--navy); }
.ttt-grad { background: linear-gradient(100deg, var(--violet), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttt-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--muted); }
.ttt-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.ttt-label { display: block; font-size: 12px; font-weight: 800; color: #333; margin-bottom: 8px; letter-spacing: .4px; }
.ttt-input { width: 100%; height: 50px; border: 2px solid #D9DCEA; border-radius: 8px; padding: 0 14px; font: 800 18px 'DM Sans', system-ui, sans-serif; color: var(--navy); outline: none; background: #fff; }
.ttt-input:focus { border-color: var(--violet); }
.ttt-err { min-height: 18px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #C0285F; }
.ttt-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; padding: 0 22px; font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(100deg, var(--violet), var(--magenta)); box-shadow: 0 8px 20px rgba(115,87,246,.28); transition: transform .12s; }
.ttt-btn:active { transform: translateY(2px); }
.ttt-btn.is-ghost { background: transparent; color: var(--violet); border: 2px solid var(--violet); box-shadow: none; }
.ttt-btn.is-small { width: auto; min-height: 46px; font-size: 15px; }
.is-game .ttt-btn.is-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.ttt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ttt-step { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.ttt-step b { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.ttt-step span { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.ttt-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 900; }
.ttt-fine { font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--muted); text-align: center; }
.ttt-fine a { color: var(--violet); font-weight: 800; }
.ttt-played { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #EFEBFF; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--navy); }

/* game */
.ttt-gtop { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; position: relative; z-index: 2; }
.ttt-mark { width: 38px; height: 38px; display: block; }
.ttt-mark.spin { animation: tttCoin 3s ease-in-out infinite; }
.ttt-dots { flex: 1; display: flex; gap: 4px; }
.ttt-dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.ttt-dots i.on { background: #fff; }
.ttt-dots i.now { background: rgba(255,255,255,.7); }
.ttt-icon-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0,0,0,.25); color: #fff; display: flex; align-items: center; justify-content: center; }
.ttt-practice { padding: 4px 8px; border-radius: 999px; background: var(--amber); color: var(--navy); font-size: 10px; font-weight: 900; letter-spacing: .6px; white-space: nowrap; }
.ttt-shape { position: absolute; pointer-events: none; }
.ttt-body { flex: 1; display: flex; flex-direction: column; padding: 12px; gap: 10px; position: relative; z-index: 2; }
.ttt-center { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ttt-partcard { background: rgba(255,255,255,.14); border-radius: 10px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: tttPop .45s ease-out both; }
.ttt-partcard .badge { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; }
.ttt-partcard .ic { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.ttt-partcard h2 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 900; color: #fff; }
.ttt-partcard p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; max-width: 300px; }
.ttt-q { background: #fff; color: #1F1F1F; border-radius: 8px; padding: 14px; box-shadow: 0 3px 6px rgba(0,0,0,.25); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ttt-q small { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--violet); }
.ttt-q h2 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: #1F1F1F; }
.ttt-ring { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.ttt-ring.beat { animation: tttBeat .6s ease-in-out infinite; }
.ttt-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 900; }
.ttt-ring .arc { transition: stroke-dashoffset 1s linear, stroke .3s; }
.ttt-x2 { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--amber); color: var(--navy); font-size: 12px; font-weight: 900; }
.ttt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ttt-tile { position: relative; min-height: 104px; border: 0; border-radius: 6px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); animation: tttTile .35s ease-out both; transition: opacity .25s; }
.ttt-tile:active { transform: translateY(3px); }
.ttt-tile svg { flex: none; }
.ttt-tile b { flex: 1; font-size: 21px; line-height: 1.2; font-weight: 800; }
.ttt-tile.dim { opacity: .35; }
.ttt-tile .mk { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; animation: tttPop .4s ease-out both; }
.ttt-banner { margin: 0 -26px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.2); transform: rotate(-4deg); animation: tttBanner .35s ease-out both; }
.ttt-banner .c { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.ttt-banner b { font-size: 22px; font-weight: 900; }
.ttt-banner em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 15px; font-weight: 900; }
.ttt-explain { background: #fff; color: #1F1F1F; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.ttt-next { align-self: flex-end; }
.ttt-progress { background: rgba(255,255,255,.14); border-radius: 10px; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; animation: tttPop .45s ease-out both; }
.ttt-progress .big { font-size: 56px; line-height: 1; font-weight: 900; }
.ttt-progress p { margin: 0; font-size: 15px; font-weight: 700; }
.ttt-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.ttt-conf i { position: absolute; top: 0; height: 16px; border-radius: 2px; animation: tttFall 2.4s ease-in both; }

/* result */
.ttt-score { font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -2px; color: var(--navy); }
.ttt-title-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #EFEBFF; color: var(--violet); font-size: 13px; font-weight: 900; }
.ttt-copied { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--green); text-align: center; }
.ttt-row { display: flex; gap: 10px; }
.ttt-row > * { flex: 1; }

@keyframes tttPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes tttCoin { 0% { transform: perspective(240px) rotateY(0); } 30% { transform: perspective(240px) rotateY(360deg); } 100% { transform: perspective(240px) rotateY(360deg); } }
@keyframes tttPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tttTile { 0% { transform: translateY(24px) scale(.96); } 100% { transform: none; } }
@keyframes tttBanner { 0% { transform: rotate(-4deg) translateX(-110%); } 100% { transform: rotate(-4deg) translateX(0); } }
@keyframes tttBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tttFall { 0% { transform: translateY(-60px) rotate(0); opacity: 1; } 100% { transform: translateY(900px) rotate(760deg); opacity: .85; } }
@keyframes tttIn { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ttt-in { animation: tttIn .45s ease-out both; }
.ttt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #ttt-root *, #ttt-root *::before, #ttt-root *::after { animation: none !important; transition: none !important; } }
@media (max-width: 360px) { .ttt-h1 { font-size: 42px; } .ttt-tile b { font-size: 18px; } }

/* live leaderboard */
.ttt-lb { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ttt-lb-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #EEF0F6; }
.ttt-lb-h b { font-size: 13px; font-weight: 800; color: var(--navy); }
.ttt-lb-h span { font-size: 12px; font-weight: 600; color: var(--muted); }
.ttt-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #EEF0F6; color: var(--navy); }
.ttt-lb-row:last-child { border-bottom: 0; }
.ttt-lb-row.me { background: #EFEBFF; }
.ttt-lb-rk { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #333; flex: none; }
.ttt-lb-n { flex: 1; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttt-lb-s { font-size: 14px; font-weight: 800; }
.ttt-explain b { font-weight: 800; color: #7357F6; }

#ttt-root .ttt-btn.ttt-li{background:#0A66C2;box-shadow:0 8px 20px rgba(10,102,194,.3)}
#ttt-root .ttt-btn.ttt-li:hover{background:#004182}
/* start page v2 */
#ttt-root .ttt-step span.ttt-dot { color: #fff; font-size: 13px; }
.ttt-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 18px 18px; color: #fff; background: radial-gradient(120% 80% at 50% 0%, #5B3FE0 0%, #3A23B8 55%, #2A1A8E 100%); box-shadow: 0 18px 40px rgba(58,35,184,.28); }
.ttt-hero > *:not(.ttt-shape) { position: relative; }
.ttt-hero-hd { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.ttt-hero-hd .ttt-mark { width: 32px; height: 32px; }
.ttt-h1.is-white { color: #fff; margin-top: 12px; }
.ttt-grad-lt { background: linear-gradient(100deg, #FF6EC7 10%, #FFB547 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttt-hero-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: rgba(255,255,255,.82); }
.ttt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ttt-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 800; }
.ttt-tzq { margin-top: 18px; background: #fff; color: var(--navy); border-radius: 12px; padding: 14px; }
.ttt-tzq small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--violet); }
.ttt-tzq > b { display: block; margin-top: 4px; font-size: 17px; line-height: 1.3; font-weight: 800; }
.ttt-tzg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ttt-tz { position: relative; min-height: 52px; border: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); cursor: pointer; font-family: inherit; transition: opacity .25s, transform .12s; }
.ttt-tz b { font-size: 17px; font-weight: 900; }
.ttt-tz:active { transform: translateY(2px); }
.ttt-tz.dim, .ttt-tz.no { opacity: .35; }
.ttt-tz.ok { outline: 3px solid var(--navy); outline-offset: 2px; }
.ttt-tz.no { outline: 3px dashed var(--navy); outline-offset: 2px; }
.ttt-tzq-hint { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--muted); }
.ttt-tzq-hint.is-ok { color: var(--green); }
.ttt-tzq-hint.is-no { color: var(--magenta); }
.ttt-start { margin-top: 14px; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(13,19,48,.06); }
.ttt-start .ttt-label { text-transform: none; letter-spacing: 0; font-size: 14px; }
.ttt-start-note { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.ttt-how { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ttt-how h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--navy); }
.ttt-how-row { display: flex; gap: 12px; align-items: flex-start; }
.ttt-how-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ttt-how-row b { display: block; font-size: 15px; font-weight: 800; color: var(--navy); }
.ttt-how-row span:not(.ttt-how-ic) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--muted); }
.ttt-how-row a { color: var(--violet); font-weight: 800; }
@media (min-width: 700px) { .ttt-hero { padding: 26px 24px 22px; } }
/* question screen v2 */
.ttt-q { border-radius: 14px; padding: 18px 16px 20px; gap: 8px; box-shadow: 0 10px 24px rgba(10,6,40,.35); }
.ttt-q small { align-self: center; padding: 3px 10px; border-radius: 999px; background: #EFEBFF; }
.ttt-q h2 { font-size: 21px; line-height: 1.32; color: var(--navy); text-wrap: balance; }
.ttt-stat { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.78); }
.ttt-stat .pts { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-variant-numeric: tabular-nums; }
.ttt-ring { width: 170px; height: 170px; filter: drop-shadow(0 0 22px rgba(160,140,255,.35)); }
.ttt-ring span { font-size: 60px; }
.ttt-avail { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.22); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; }
.ttt-avail b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.ttt-avail i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: var(--amber); color: var(--navy); font-weight: 900; font-size: 12px; }
.ttt-tile { min-height: 112px; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 6px 14px rgba(10,6,40,.25); }
.ttt-tile b { font-size: 22px; }
.ttt-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%); pointer-events: none; }
@media (min-width: 700px) { .ttt-q h2 { font-size: 26px; } .ttt-tile { min-height: 130px; } .ttt-tile b { font-size: 26px; } }
/* dark tense theme v3 */
#ttt-root { --pink: #EE2D78; --teal: #14A898; --text: #0D1330; }
#ttt-root.is-game { background: radial-gradient(520px 380px at 50% 42%, rgba(238,45,120,.16), rgba(238,45,120,0) 70%), linear-gradient(170deg, #12262D 0%, #0B171C 50%, #05090C 100%); }
#ttt-root.is-light { --text: #F1F4F8; --muted: #93A1AD; --line: rgba(255,255,255,.10); background: radial-gradient(760px 440px at 50% -120px, rgba(238,45,120,.20), rgba(238,45,120,0) 70%), linear-gradient(180deg, #10232A 0%, #071014 100%); color: var(--text); }
.ttt-strip { background: linear-gradient(100deg, var(--pink) 0%, var(--violet) 50%, var(--teal) 100%); }
.is-light .ttt-eyebrow { color: #FF5C98; }
.is-light .ttt-card, .is-light .ttt-lb, .is-light .ttt-how, .is-light .ttt-step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); box-shadow: none; }
.is-light .ttt-label, .is-light .ttt-how h3, .is-light .ttt-how-row b, .is-light .ttt-lb-h b, .is-light .ttt-lb-row, .is-light .ttt-step b, .is-light .ttt-score { color: var(--text); }
.is-light .ttt-lb-h, .is-light .ttt-lb-row { border-color: rgba(255,255,255,.08); }
.is-light .ttt-lb-row.me { background: rgba(238,45,120,.16); }
.is-light .ttt-lb-rk { color: #0D1330; }
.is-light .ttt-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.is-light .ttt-input::placeholder { color: rgba(255,255,255,.45); }
.is-light .ttt-input:focus { border-color: var(--pink); }
.is-light .ttt-err { color: #FF7AA8; }
.is-light .ttt-played { background: rgba(238,45,120,.14); color: var(--text); }
.is-light .ttt-title-chip { background: rgba(238,45,120,.18); color: #FF7AA8; }
.is-light .ttt-fine a, .is-light .ttt-how-row a { color: #FF7AA8; }
.is-light .ttt-live { color: #2FD3C1; }
.ttt-btn { background: linear-gradient(100deg, var(--pink), #B03BD6 60%, var(--violet)); box-shadow: 0 10px 24px rgba(238,45,120,.30); }
.is-light .ttt-btn.is-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.ttt-hero { background: radial-gradient(120% 70% at 50% 0%, rgba(238,45,120,.30) 0%, rgba(238,45,120,0) 60%), linear-gradient(180deg, #14303A 0%, #0C1C22 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.ttt-grad-lt { background: linear-gradient(100deg, #FF4F93 10%, #2FD3C1 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttt-tzq { background: rgba(0,0,0,.28); color: #fff; border: 1px solid rgba(255,255,255,.08); }
.ttt-tzq small, .ttt-q small { color: #FF5C98; }
.ttt-tzq-hint { color: rgba(255,255,255,.65); }
.ttt-tzq-hint.is-ok { color: #2FD3C1; }
.ttt-tzq-hint.is-no { color: #FF7AA8; }
.ttt-tz.ok, .ttt-tz.no { outline-color: #fff; }
.ttt-q small { background: rgba(238,45,120,.10); }
.ttt-ring { filter: drop-shadow(0 0 24px rgba(238,45,120,.35)); }
.ttt-avail i { background: var(--pink); color: #fff; }
.ttt-partcard, .ttt-progress { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.ttt-explain b, .ttt-explain strong { color: var(--pink); }
/* kahoot purple background v4 */
#ttt-root.is-game { background: radial-gradient(520px 360px at 50% 38%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%), linear-gradient(165deg, #4A2FC9 0%, #3420A3 48%, #22166F 100%); }
#ttt-root.is-light { background: radial-gradient(760px 440px at 50% -120px, rgba(255,255,255,.12), rgba(255,255,255,0) 70%), linear-gradient(180deg, #3D26BE 0%, #2A1A8E 55%, #1C1263 100%); --muted: #B9B3E6; }
.ttt-hero { background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #5B3FE0 0%, #3A23B8 100%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 44px rgba(16,8,60,.45); }
.ttt-ring { filter: drop-shadow(0 0 22px rgba(160,140,255,.35)); }
.is-light .ttt-card, .is-light .ttt-lb, .is-light .ttt-how, .is-light .ttt-step { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.ttt-tzq { background: rgba(20,10,70,.35); }
/* polish v5 */
#ttt-root.is-light { background: radial-gradient(700px 420px at 50% 120px, rgba(140,110,255,.22), rgba(140,110,255,0) 70%), linear-gradient(180deg, #2C1B98 0%, #1E136C 55%, #130B47 100%); }
.ttt-hero { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 24px 60px rgba(6,3,36,.55), 0 0 70px rgba(150,120,255,.28); }
.ttt-grad-lt { background: linear-gradient(100deg, #FF5C9E 5%, #FFC24B 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttt-tzq small { color: #FF8BBE; }
.is-light .ttt-played { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text); }
@media (min-width: 700px) { .is-light .ttt-strip { display: none; } }
/* linkedin link v6 */
.ttt-opt { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 4px; }
.ttt-input-sm { height: 44px; font-size: 15px; font-weight: 700; }
.ttt-hint { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ttt-liform { display: flex; flex-direction: column; gap: 6px; }
.ttt-liform b { font-size: 15px; font-weight: 800; color: var(--text); }
.ttt-liform > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.ttt-liwrap { display: flex; gap: 8px; margin-top: 6px; }
.ttt-liwrap .ttt-input { flex: 1; min-width: 0; }
.ttt-liwrap .ttt-btn { width: auto; flex: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
.ttt-liok { font-size: 14px; font-weight: 700; color: #2FD3C1; }
/* fit all screens v7 */
@media (max-height: 800px) {
  .ttt-ring, .ttt-ring svg { width: 132px; height: 132px; }
  .ttt-ring span { font-size: 46px; }
  .ttt-avail { margin-top: 8px; }
  .ttt-tile { min-height: 84px; }
  .ttt-q { padding: 12px 14px 14px; gap: 6px; }
  .ttt-q h2 { font-size: 18px; }
  .ttt-body { gap: 8px; padding-top: 8px; }
  .ttt-gtop { padding-top: 10px; }
}
@media (max-height: 680px) {
  .ttt-ring, .ttt-ring svg { width: 108px; height: 108px; }
  .ttt-ring span { font-size: 38px; }
  .ttt-tile { min-height: 70px; }
  .ttt-tile b { font-size: 19px; }
  .ttt-q h2 { font-size: 17px; }
}
@media (min-width: 700px) and (max-height: 800px) { .ttt-tile { min-height: 88px; } .ttt-q h2 { font-size: 22px; } }
@media (min-width: 768px) and (min-height: 900px) { .ttt-app { max-width: 600px; } .ttt-tile { min-height: 140px; } .ttt-tile b { font-size: 28px; } .ttt-q h2 { font-size: 28px; } .ttt-ring, .ttt-ring svg { width: 190px; height: 190px; } .ttt-ring span { font-size: 66px; } }
.is-light .ttt-conf { z-index: 0; }
.is-light .ttt-pad, .is-light .ttt-top { position: relative; z-index: 1; }
/* motion v8 */
.ttt-count { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; }
.ttt-count small { font-size: 14px; font-weight: 800; letter-spacing: 2px; opacity: .8; }
.ttt-count b { display: flex; align-items: center; justify-content: center; width: 190px; height: 190px; border-radius: 50%; font-size: 110px; font-weight: 900; line-height: 1; background: rgba(255,255,255,.12); box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 60px rgba(160,140,255,.45); animation: tttCount .65s cubic-bezier(.2,1.4,.4,1) both; }
.ttt-count b[data-n="3"] { color: #FF5C9E; } .ttt-count b[data-n="2"] { color: #FFC24B; } .ttt-count b[data-n="1"] { color: #2FD3C1; }
.ttt-count b.go { width: auto; padding: 0 34px; border-radius: 999px; font-size: 76px; height: 150px; background: linear-gradient(100deg, var(--pink), #B03BD6 60%, var(--violet)); color: #fff; }
@keyframes tttCount { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
.ttt-streak { align-self: center; padding: 6px 14px; border-radius: 999px; background: linear-gradient(100deg, #FF8A3D, #FF3D6E); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 6px 18px rgba(255,80,80,.35); animation: tttPop .45s ease-out both; }
.ttt-tile .kbd { position: absolute; right: 8px; bottom: 8px; display: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.18); font-style: normal; font-size: 12px; font-weight: 900; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .ttt-tile .kbd { display: flex; }
  .ttt-tile { transition: transform .15s, filter .15s, opacity .25s; }
  .ttt-tile:not(.dim):not([aria-disabled]):hover { transform: translateY(-4px); filter: brightness(1.07); }
  .ttt-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
.ttt-tile:not([aria-disabled]):active { transform: translateY(3px) scale(.97); }
.ttt-btn:active { transform: scale(.97); }
.ttt-start .ttt-btn[type=submit] { animation: tttGlow 2.4s ease-in-out infinite; }
@keyframes tttGlow { 0%, 100% { box-shadow: 0 10px 24px rgba(238,45,120,.30); } 50% { box-shadow: 0 10px 34px rgba(238,45,120,.60), 0 0 0 6px rgba(238,45,120,.12); } }
.ttt-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-bottom: 14px; }
.ttt-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; animation: tttRise .6s ease-out both; }
.ttt-pod .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--text); }
.ttt-pod .sc { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ttt-pod .blk { width: 100%; margin-top: 6px; border-radius: 10px 10px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-size: 26px; font-weight: 900; color: #0D1330; }
.ttt-pod.p1 .blk { height: 92px; background: linear-gradient(180deg, #FFD966, #F2B93B); }
.ttt-pod.p2 .blk { height: 66px; background: linear-gradient(180deg, #F1F3F8, #C9CEDA); }
.ttt-pod.p3 .blk { height: 50px; background: linear-gradient(180deg, #F0B27A, #D98A4E); }
.ttt-pod.p1 { animation-delay: .25s; } .ttt-pod.p3 { animation-delay: .12s; }
@keyframes tttRise { 0% { transform: translateY(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ttt-count b, .ttt-pod, .ttt-streak, .ttt-start .ttt-btn[type=submit] { animation: none; } }
.ttt-row .ttt-btn { font-size: 15px; white-space: nowrap; padding: 0 10px; }
@media (max-width: 400px) { .ttt-hero-hd { font-size: 11px; letter-spacing: .6px; gap: 8px; } .ttt-hero-hd .ttt-mark { width: 28px; height: 28px; } }
.ttt-hero-hd span { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; line-height: 1.2; }
@media (max-width: 400px) { .ttt-hero-hd span { font-size: 13.5px; padding: 5px 11px; } }
@keyframes tttFall { 0% { transform: translateY(-60px) rotate(0); opacity: 1; } 75% { opacity: .9; } 100% { transform: translateY(110vh) rotate(760deg); opacity: 0; } }
/* gold accent + premium podium v9 */
#ttt-root { --pink: #FFB23E; --magenta: #E5484D; --gold: #FFC24B; --gold2: #FFA63D; --onGold: #1A1050; }
.ttt-strip { background: linear-gradient(100deg, var(--gold) 0%, var(--violet) 50%, var(--teal) 100%); }
.ttt-btn { background: linear-gradient(100deg, #FFD766, #FFA63D); color: var(--onGold); box-shadow: 0 10px 26px rgba(255,166,61,.35); }
.ttt-btn svg[fill="#fff"], .ttt-btn svg[fill="#FFFFFF"] { fill: var(--onGold); }
.ttt-btn svg[stroke="#fff"], .ttt-btn svg[stroke="#FFFFFF"] { stroke: var(--onGold); }
.ttt-btn.ttt-li { color: #fff; }
.ttt-btn.ttt-li svg[fill="#fff"] { fill: #fff; }
.ttt-btn.is-ghost { background: transparent; box-shadow: none; }
.is-light .ttt-btn.is-ghost svg[stroke="#FFFFFF"] { stroke: #fff; }
.ttt-start .ttt-btn[type=submit] { animation: tttGlowGold 2.4s ease-in-out infinite; }
@keyframes tttGlowGold { 0%, 100% { box-shadow: 0 10px 24px rgba(255,166,61,.30); } 50% { box-shadow: 0 10px 34px rgba(255,166,61,.60), 0 0 0 6px rgba(255,194,75,.14); } }
.is-light .ttt-eyebrow, .ttt-tzq small { color: var(--gold); }
.ttt-q small { color: #5B3FE0; background: #EFEBFF; }
.is-light .ttt-title-chip { background: rgba(255,194,75,.18); color: #FFD36B; }
.is-light .ttt-fine a, .is-light .ttt-how-row a { color: #FFD36B; }
.is-light .ttt-lb-row.me { background: rgba(255,194,75,.16); }
.is-light .ttt-input:focus { border-color: var(--gold); }
.is-light .ttt-err { color: #FF9A8B; }
.ttt-tzq-hint.is-no { color: #FF9A8B; }
.ttt-grad-lt { background: linear-gradient(100deg, #FFD15C 5%, #FF8A3D 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttt-avail i { background: var(--gold); color: var(--onGold); }
.ttt-explain b, .ttt-explain strong { color: #5B3FE0; }
.ttt-ring.beat .arc { stroke: #FF8A3D; }
.ttt-count b[data-n="3"] { color: #FFD15C; } .ttt-count b[data-n="2"] { color: #FF8A3D; }
.ttt-count b.go { background: linear-gradient(100deg, #FFD766, #FFA63D); color: var(--onGold); }
/* premium podium */
.ttt-podwrap { position: relative; margin-bottom: 16px; padding: 18px 14px 0; border-radius: 18px; overflow: hidden; background: radial-gradient(260px 200px at 50% 38%, rgba(255,200,90,.28), rgba(255,200,90,0) 70%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); }
.ttt-pod-h { text-align: center; font-size: 12px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ttt-podium { margin: 0; gap: 10px; }
.ttt-pod { position: relative; }
.ttt-pod .crown { margin-bottom: -6px; filter: drop-shadow(0 4px 10px rgba(255,190,70,.6)); animation: tttCrown 2.6s ease-in-out infinite; }
@keyframes tttCrown { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.ttt-pod .av { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #fff; background: linear-gradient(160deg, #6E52F5, #3A23B8); box-shadow: 0 0 0 3px var(--ring, rgba(255,255,255,.5)), 0 8px 20px rgba(10,5,50,.45); margin-bottom: 6px; }
.ttt-pod.p1 .av { width: 66px; height: 66px; font-size: 22px; --ring: #FFC24B; box-shadow: 0 0 0 4px #FFC24B, 0 0 26px rgba(255,194,75,.65); }
.ttt-pod.p2 .av { --ring: #D9DEEA; }
.ttt-pod.p3 .av { --ring: #E3A06A; }
.ttt-pod .nm { font-size: 14px; }
.ttt-pod .sc { font-size: 12.5px; color: rgba(255,255,255,.75); font-weight: 800; }
.ttt-pod .blk { position: relative; overflow: hidden; margin-top: 8px; border-radius: 14px 14px 0 0; padding-top: 10px; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(0,0,0,.12); }
.ttt-pod .blk b { font-size: 34px; font-weight: 900; color: rgba(26,16,80,.85); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ttt-pod.p1 .blk { height: 112px; background: linear-gradient(180deg, #FFE48A 0%, #FFC24B 45%, #E59A1F 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 0 34px rgba(255,194,75,.45); }
.ttt-pod.p2 .blk { height: 82px; background: linear-gradient(180deg, #FFFFFF 0%, #D9DEEA 50%, #AEB5C7 100%); }
.ttt-pod.p3 .blk { height: 64px; background: linear-gradient(180deg, #F6C79E 0%, #E3A06A 50%, #B9733F 100%); }
.ttt-pod .blk::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0)); transform: skewX(-20deg); animation: tttShine 3.2s ease-in-out infinite; }
.ttt-pod.p2 .blk::after { animation-delay: .5s; } .ttt-pod.p3 .blk::after { animation-delay: 1s; }
@keyframes tttShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ttt-pod .crown, .ttt-pod .blk::after, .ttt-start .ttt-btn[type=submit] { animation: none; } }
.ttt-hiname { margin-top: 6px; }
.ttt-hiname span { display: inline-block; padding: 6px 20px; border-radius: 999px; font-size: 26px; font-weight: 900; line-height: 1.2; color: var(--onGold); background: linear-gradient(100deg, #FFD766, #FFA63D); box-shadow: 0 0 0 4px rgba(255,194,75,.18), 0 10px 30px rgba(255,166,61,.45); animation: tttNameIn .7s cubic-bezier(.2,1.5,.4,1) both, tttNameBeat 2.2s ease-in-out .9s infinite; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes tttNameIn { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tttNameBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .ttt-hiname span { animation: none; } }
.ttt-input[readonly] { opacity: .75; cursor: not-allowed; }

/* reactions v10 */
.ttt-banner { position: relative; overflow: visible; }
.ttt-react { position: absolute; right: 34px; top: -26px; font-size: 52px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); animation: tttReact 1.8s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
@keyframes tttReact { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 18% { transform: scale(1.25) rotate(8deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 75% { transform: translateY(-8px); opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ttt-react { animation: none; opacity: 0; } }

/* result steady v11 */
.ttt-still .ttt-in { animation: none; }
.ttt-still .ttt-hiname span { animation: tttNameBeat 2.2s ease-in-out infinite; }

/* glass bridge + chips + podium spots v12 */
.ttt-journey { inset: 0; width: 100%; height: 100%; }
.is-game .ttt-journey { -webkit-mask-image: radial-gradient(150px 150px at 50% 47%, rgba(0,0,0,.15) 40%, #000 100%), linear-gradient(180deg, #000 55%, transparent 74%); -webkit-mask-composite: source-in; mask-image: radial-gradient(150px 150px at 50% 47%, rgba(0,0,0,.15) 40%, #000 100%), linear-gradient(180deg, #000 55%, transparent 74%); mask-composite: intersect; }
.ttt-hero .ttt-journey { opacity: .7; }
.ttt-hero-hd span { background: #fff; border: none; color: #2C1B98; box-shadow: 0 8px 22px rgba(10,5,50,.30); }
.ttt-chips { gap: 8px; }
.ttt-chips span { color: #fff; padding: 8px 13px; font-size: 13px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(10,5,50,.25); }
.ttt-chips span:nth-child(1) { background: #E5484D; } .ttt-chips span:nth-child(2) { background: #14A898; } .ttt-chips span:nth-child(3) { background: #2D6CDF; }
.ttt-pod.empty .av { background: rgba(255,255,255,.08); box-shadow: none; border: 2px dashed rgba(255,255,255,.45); color: rgba(255,255,255,.85); }
.ttt-pod.p1.empty .av { border-color: #FFC24B; box-shadow: 0 0 22px rgba(255,194,75,.35); }
.ttt-pod.empty .nm { color: rgba(255,255,255,.75); font-size: 12.5px; }

/* part badges v13 */
.ttt-q small.ttt-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 11.5px; letter-spacing: 1.1px; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 10px rgba(20,10,80,.18); }
.ttt-tag.tg0 { background: #14A898; } .ttt-tag.tg1 { background: #F2A93B; color: #1A1050; } .ttt-tag.tg2 { background: linear-gradient(100deg, #FFD766, #FFA63D); color: #1A1050; }
.ttt-tag em { font-style: normal; background: #1A1050; color: #FFD766; border-radius: 999px; padding: 1px 7px; margin-left: 2px; letter-spacing: 0; }

/* game icon on play buttons v14 */
.ttt-gi-b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #120A45; box-shadow: inset 0 0 0 1.5px rgba(255,194,75,.75); flex: none; }
.ttt-btn.is-small .ttt-gi-b { width: 24px; height: 24px; }
.ttt-gi { width: 18px; height: 18px; animation: tttGi 1.8s ease-in-out infinite; }
.ttt-btn.is-small .ttt-gi { width: 15px; height: 15px; }
.ttt-gi > * { transform-box: fill-box; transform-origin: center; animation: tttGiP 1.8s ease-in-out infinite; }
.ttt-gi > *:nth-child(2) { animation-delay: .15s; } .ttt-gi > *:nth-child(3) { animation-delay: .3s; } .ttt-gi > *:nth-child(4) { animation-delay: .45s; }
@keyframes tttGi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-6deg); } }
@keyframes tttGiP { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ttt-gi, .ttt-gi > * { animation: none; } }

/* game icon burst v15 */
.ttt-gi-b, .ttt-gi { overflow: visible; }
.ttt-gi { animation: none; }
.ttt-gi > * { animation: tttGiOut 2.6s cubic-bezier(.3,1.5,.5,1) infinite; }
.ttt-gi > *:nth-child(1) { --dx: -7px; --dy: -7px; animation-delay: 0s; }
.ttt-gi > *:nth-child(2) { --dx: 7px; --dy: -7px; animation-delay: .12s; }
.ttt-gi > *:nth-child(3) { --dx: -7px; --dy: 7px; animation-delay: .24s; }
.ttt-gi > *:nth-child(4) { --dx: 7px; --dy: 7px; animation-delay: .36s; }
@keyframes tttGiOut { 0%, 12%, 80%, 100% { transform: none; } 38%, 58% { transform: translate(var(--dx), var(--dy)) scale(1.4); } }
.ttt-btn:has(.ttt-gi-b) { overflow: visible; }
.ttt-gi-b .ttt-gi > * { stroke: #120A45; stroke-width: 1.6px; paint-order: stroke; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .ttt-gi > * { animation: none; } }

/* premium reel icon v16 */
.ttt-reel { --h: 30px; position: relative; display: inline-block; width: 28px; height: var(--h); border-radius: 8px; background: linear-gradient(180deg, #0A0530, #1E1270 35%, #1E1270 65%, #0A0530); box-shadow: inset 0 0 0 1.5px rgba(255,194,75,.85), 0 2px 8px rgba(10,5,40,.35); overflow: hidden; flex: none; vertical-align: middle; }
.ttt-btn.is-small .ttt-reel { --h: 24px; width: 22px; border-radius: 7px; }
.ttt-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,5,48,.85), transparent 32%, transparent 68%, rgba(10,5,48,.85)); pointer-events: none; }
.ttt-reel-s { position: absolute; left: 0; right: 0; top: 0; animation: tttReel 6s infinite; }
.ttt-reel-s i { display: grid; place-items: center; height: var(--h); }
.ttt-reel-s svg { width: 16px; height: 16px; display: block; }
.ttt-btn.is-small .ttt-reel-s svg { width: 13px; height: 13px; }
@keyframes tttReel {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.85,.35,1.08); }
  10%, 25% { transform: translateY(calc(var(--h) * -5)); animation-timing-function: cubic-bezier(.3,.85,.35,1.08); }
  35%, 50% { transform: translateY(calc(var(--h) * -10)); animation-timing-function: cubic-bezier(.3,.85,.35,1.08); }
  60%, 75% { transform: translateY(calc(var(--h) * -15)); animation-timing-function: cubic-bezier(.3,.85,.35,1.08); }
  85%, 100% { transform: translateY(calc(var(--h) * -20)); } }
@media (prefers-reduced-motion: reduce) { .ttt-reel-s { animation: none; } }

/* live leaderboard v17 */
.ttt-lb2 { position: relative; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #24157A, #1A0F5C); box-shadow: 0 0 0 1px rgba(255,194,75,.35), 0 16px 36px rgba(6,3,36,.4); color: #fff; text-align: left; }
.ttt-lb2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #E5484D, #14A898, #F2A93B, #2D6CDF); }
.ttt-lb2-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 14px 9px; }
.ttt-lb2-h > span:last-child { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); }
.ttt-lb2-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 900; letter-spacing: .14em; color: #FFD15C; }
.ttt-lb2-live i { width: 8px; height: 8px; border-radius: 50%; background: #2EE59D; animation: tttLbPing 1.6s infinite; }
@keyframes tttLbPing { 0% { box-shadow: 0 0 0 0 rgba(46,229,157,.7); } 100% { box-shadow: 0 0 0 9px rgba(46,229,157,0); } }
.ttt-lb2-ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 900; flex: none; background: linear-gradient(160deg, #6E52F5, #3A23B8); color: #fff; }
.ttt-lb2-champ { position: relative; overflow: hidden; margin: 4px 10px 10px; padding: 13px 14px; border-radius: 15px; display: flex; align-items: center; gap: 12px; color: #1A1050; background: radial-gradient(220px 90px at 85% 0%, rgba(255,255,255,.35), transparent 70%), linear-gradient(110deg, #FFE48A, #FFC24B 45%, #E59A1F); box-shadow: 0 10px 26px rgba(255,166,61,.32); }
.ttt-lb2-champ::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); animation: tttLbShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes tttLbShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.ttt-lb2-champ .ttt-lb2-ini { width: 42px; height: 42px; font-size: 15px; background: #1A1050; color: #FFD15C; box-shadow: 0 0 0 3px rgba(26,16,80,.25); }
.ttt-lb2-crown { position: absolute; left: 27px; top: -1px; width: 22px; height: 22px; animation: tttLbBob 2.4s ease-in-out infinite; }
@keyframes tttLbBob { 50% { transform: translateY(-3px) rotate(6deg); } }
.ttt-lb2-who { flex: 1; min-width: 0; }
.ttt-lb2-who small, .ttt-lb2-sc small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; opacity: .75; }
.ttt-lb2-sc small { letter-spacing: .04em; }
.ttt-lb2-who b { display: block; font-size: 18px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttt-lb2-sc { text-align: right; } .ttt-lb2-sc b { font-size: 23px; font-weight: 900; letter-spacing: -.02em; }
.ttt-lb2-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.07); }
.ttt-lb2-rk { width: 20px; text-align: center; font-size: 14px; font-weight: 900; color: rgba(255,255,255,.65); flex: none; }
.ttt-lb2-nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttt-lb2-s { font-size: 15px; font-weight: 900; }
.ttt-lb2-row.m2::before, .ttt-lb2-row.m3::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; }
.ttt-lb2-row.m2::before { background: #D9DEEA; } .ttt-lb2-row.m3::before { background: #E3A06A; }
.ttt-lb2-row.m2 .ttt-lb2-rk { color: #D9DEEA; } .ttt-lb2-row.m3 .ttt-lb2-rk { color: #E3A06A; }
.ttt-lb2-row.me { background: rgba(255,194,75,.14); }
.ttt-lb2-champ.me { box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(255,166,61,.4); }
.ttt-lb2-beat { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; background: rgba(255,194,75,.12); border-top: 1px solid rgba(255,194,75,.25); font-size: 13.5px; font-weight: 800; }
.ttt-lb2-beat b, .ttt-lb2-beat > span:last-child { color: #FFD15C; }
@media (max-width: 360px) { .ttt-lb2-champ .ttt-lb2-ini { display: none; } .ttt-lb2-crown { left: 12px; } .ttt-lb2-sc b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .ttt-lb2-live i, .ttt-lb2-champ::after, .ttt-lb2-crown { animation: none; } }