/* TELIMINE public app - tokens, page transitions, sheets, toasts. Feature-specific styles live in features/<id>/<id>.css */
:root {
  --c-bg: 6 6 10; --c-card: 16 16 24; --c-input: 26 26 36; --c-text: 248 250 252; --c-muted: 148 163 184; --c-line: 255 255 255;
  --c-primary: 124 58 237; --c-accent: 245 158 11;
  --public-grid-columns: 4; --public-gutter: 16px; --tm-card-radius: 16px;
  --tm-safe-top: env(safe-area-inset-top, 0px); --tm-safe-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme="light"] {
  --c-bg: 244 245 250; --c-card: 255 255 255; --c-input: 238 241 247; --c-text: 17 24 39; --c-muted: 100 116 139; --c-line: 15 23 42;
}
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-theme="light"] { color-scheme: light; }
body { background: rgb(var(--c-bg)); color: rgb(var(--c-text)); -webkit-tap-highlight-color: transparent; overflow-x: hidden; min-height: 100vh; padding-bottom: calc(72px + var(--tm-safe-bottom)); transition: background-color .3s, color .3s; }
body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: var(--tm-safe-top); background: var(--safe-area-surface, rgb(var(--c-bg))); z-index: 80; pointer-events: none; }
::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pb-safe { padding-bottom: var(--tm-safe-bottom); }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Pages */
.page-section { display: none; }
.page-section.active { display: block; animation: tmFade .3s ease-in-out; }
@keyframes tmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Explore + Review Pages: Theme Handling */
#explorePage, #reviewPage, #docPage { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  margin: 0; 
}

/* Light Mode Background */
html[data-theme="light"] #explorePage, 
html[data-theme="light"] #reviewPage, 
html[data-theme="light"] #docPage { 
  background: #f8f9fa; 
  color: #111827; 
}

/* Dark Mode Background */
html[data-theme="dark"] #explorePage, 
html[data-theme="dark"] #reviewPage, 
html[data-theme="dark"] #docPage { 
  background: rgb(var(--c-bg)); 
  color: rgb(var(--c-text)); 
}

/* Skeleton + image fallback */
.tm-skel { background: linear-gradient(90deg, rgb(var(--c-card)) 25%, rgb(var(--c-line) / .08) 37%, rgb(var(--c-card)) 63%); background-size: 400% 100%; animation: tmShimmer 1.4s ease infinite; }
.tm-skel-light { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%); background-size: 400% 100%; animation: tmShimmer 1.4s ease infinite; }
@keyframes tmShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.tm-cover { background: linear-gradient(135deg, rgb(var(--c-primary) / .85), #1e1b4b); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.tm-cover img { width: 100%; height: 100%; object-fit: cover; }
.tm-card-r { border-radius: var(--tm-card-radius); }

/* Bottom sheet (game details, notifications, language, ...) */
.bottom-sheet-overlay { display: none; opacity: 0; transition: opacity .3s; }
.bottom-sheet-overlay.active { display: block; opacity: 1; }
.bottom-sheet { transform: translateY(100%); transition: transform .4s cubic-bezier(.16, 1, .3, 1); visibility: hidden; }
.bottom-sheet.active { transform: translateY(0); visibility: visible; }

/* Generic sheet created by TM.sheet() */
.tm-sheet-bg { position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; animation: tmFadeOnly .2s; }
.tm-sheet { width: 100%; max-width: 32rem; max-height: 82vh; overflow-y: auto; background: rgb(var(--c-card)); color: rgb(var(--c-text)); border-radius: 24px 24px 0 0; padding: 18px 18px calc(22px + var(--tm-safe-bottom)); animation: tmSheetUp .35s cubic-bezier(.16, 1, .3, 1); }
.tm-sheet h3 { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.tm-sheet h3 button { width: 32px; height: 32px; border-radius: 999px; background: rgb(var(--c-line) / .08); color: rgb(var(--c-muted)); }
@keyframes tmSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tmFadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Toasts */
#tm-toast-region { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + var(--tm-safe-bottom)); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 26rem); pointer-events: none; }
.tm-toast { pointer-events: auto; padding: 11px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: #fff; background: #1f2937; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: tmSheetUp .25s; }
.tm-toast[data-kind="success"] { background: #047857; } .tm-toast[data-kind="error"] { background: #b91c1c; }
.tm-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: .2s; }

/* Start-up splash + network pill */
#tmStartupShell { position: fixed; inset: 0; z-index: 300; background: radial-gradient(90% 60% at 50% 38%, rgb(var(--c-primary) / .22), transparent 70%), rgb(var(--c-bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .4s; }
#tmStartupShell.is-hidden { opacity: 0; pointer-events: none; }
.tm-splash-logo { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, rgb(var(--c-primary)), rgb(var(--c-primary) / .55)); display: flex; align-items: center; justify-content: center; color: rgb(var(--c-accent)); font-size: 26px; box-shadow: 0 10px 40px rgb(var(--c-primary) / .45); animation: tmPulse 1.6s ease-in-out infinite; }
.tm-splash-bar { width: 110px; height: 3px; border-radius: 3px; background: rgb(var(--c-line) / .12); overflow: hidden; }
.tm-splash-bar i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-accent))); animation: tmBar 1.1s ease-in-out infinite; }
@keyframes tmPulse { 50% { transform: scale(1.06); } } @keyframes tmBar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
#tmNetworkStatus { position: fixed; top: calc(var(--tm-safe-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 250; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #b45309; color: #fff; }
#tmNetworkStatus[data-online="true"] { background: #047857; }

/* Switches (settings) */
.tm-switch { width: 48px; height: 26px; border-radius: 999px; background: rgb(var(--c-muted) / .5); position: relative; transition: background .2s; flex-shrink: 0; }
.tm-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: transform .2s; }
.tm-switch[aria-checked="true"] { background: rgb(var(--c-primary)); }
.tm-switch[aria-checked="true"]::after { transform: translateX(22px); }

/* Controlled by Admin > Appearance > Frontend Control (see features/frontend-control) */
.tm-no-animations *, .tm-no-animations *::before, .tm-no-animations *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
.tm-no-nav-labels #tmBottomBar span { display: none; }
.tm-no-ratings .tm-rating, .tm-no-play-counts .tm-plays, .tm-no-descriptions .tm-desc, .tm-no-game-badges .tm-badge { display: none !important; }
.tm-no-card-shadows .tm-card-shadow { box-shadow: none !important; }
.tm-no-empty-states .tm-empty { display: none; }

/* Disable text selection & copy across the whole site */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow copying ONLY on specific elements (like Promo Codes) */
.allow-copy {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* ===== Shared page UI (Promotions, Daily bonus, Leaderboard, Achievements, Language, Help, About, Notifications) ===== */
.tm-pg { padding: 16px 16px 24px; }
.tm-pg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tm-pg-head h2 { font-size: 20px; font-weight: 900; line-height: 1.15; color: rgb(var(--c-text)); }
.tm-pg-head p { font-size: 12px; color: rgb(var(--c-muted)); margin-top: 2px; }
.tm-page-back { width: 38px; height: 38px; border-radius: 13px; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / .1); color: rgb(var(--c-text)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s; }
.tm-page-back:active { transform: scale(.92); }
.tm-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgb(var(--c-input)); }
.tm-seg button { flex: 1; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgb(var(--c-muted)); transition: all .2s; white-space: nowrap; }
.tm-seg button.is-active { background: rgb(var(--c-card)); color: rgb(var(--c-text)); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.tm-box { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / .08); border-radius: 20px; padding: 16px; }
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, rgb(var(--c-primary)), rgb(var(--c-primary) / .72)); box-shadow: 0 6px 18px rgb(var(--c-primary) / .3); transition: transform .15s, opacity .2s; }
.tm-btn:active { transform: scale(.97); }
.tm-btn[disabled] { opacity: .55; pointer-events: none; box-shadow: none; }
.tm-btn-block { display: flex; width: 100%; }
.tm-btn-ghost { background: rgb(var(--c-input)); color: rgb(var(--c-text)); box-shadow: none; }
.tm-field { display: block; margin-bottom: 12px; }
.tm-field > span { display: block; font-size: 11px; font-weight: 800; color: rgb(var(--c-muted)); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.tm-input { width: 100%; padding: 12px 14px; border-radius: 14px; background: rgb(var(--c-input)); border: 1px solid transparent; color: rgb(var(--c-text)); font-size: 14px; outline: none; transition: border-color .2s; -webkit-user-select: text; user-select: text; }
.tm-input:focus { border-color: rgb(var(--c-primary)); }
textarea.tm-input { min-height: 110px; resize: vertical; }
.tm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; background: rgb(var(--c-primary) / .14); color: rgb(var(--c-primary)); }
.tm-pill.is-green { background: rgb(16 185 129 / .14); color: #10b981; } .tm-pill.is-amber { background: rgb(245 158 11 / .16); color: #f59e0b; } .tm-pill.is-red { background: rgb(239 68 68 / .14); color: #ef4444; }
.tm-bar { height: 8px; border-radius: 99px; background: rgb(var(--c-line) / .1); overflow: hidden; }
.tm-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-accent))); transition: width .6s cubic-bezier(.16,1,.3,1); }
.tm-empty-state { text-align: center; padding: 46px 12px; color: rgb(var(--c-muted)); }
.tm-empty-state i { font-size: 38px; margin-bottom: 12px; opacity: .55; display: block; }
.tm-empty-state p { font-size: 13px; font-weight: 700; }
.tm-empty-state small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: .8; }
.tm-gate { text-align: center; padding: 34px 18px; }
.tm-gate i { font-size: 40px; color: rgb(var(--c-primary)); margin-bottom: 12px; display: block; }
.tm-copy { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed rgb(var(--c-primary) / .55); color: rgb(var(--c-primary)); font-weight: 900; letter-spacing: .08em; font-size: 13px; background: rgb(var(--c-primary) / .06); }
.tm-sk-list > div { height: 84px; border-radius: 20px; margin-bottom: 12px; }
@keyframes tmPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.tm-pop { animation: tmPop .5s cubic-bezier(.16,1,.3,1) both; }

/* No top navigation bar: keep the first content clear of the phone status bar */
#tmMain { padding-top: var(--tm-safe-top); }

/* Pictures can not be saved: no long-press menu, no drag, clicks go to the element behind (card / link / button). */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; pointer-events: none; }

html.tm-safe-blur body::before { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Keyboard fix: the page itself is not selectable (body), but text fields must be - otherwise switching the keyboard language can drop the focus */
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default; }

/* Preferences: text size, calmer motion */
html[data-text="sm"] { font-size: 14.5px; } html[data-text="lg"] { font-size: 17.5px; } html[data-text="xl"] { font-size: 19px; }
html.tm-reduce-motion *, html.tm-reduce-motion *::before, html.tm-reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }