:root {
  --bg: #f7f8fc; --surface: #ffffff; --surface-soft: #f4f3f9; --ink: #252437; --muted: #7b7a8e;
  --line: #eae9f1; --purple: #7958ed; --purple-dark: #6041cf; --purple-soft: #f0eafa;
  --mint: #e7f6ed; --mint-ink: #3e765e; --peach: #fff0e5; --peach-ink: #996647;
  --shadow: 0 8px 32px #33304b05; --radius: 24px;
  color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] {
  --bg: #171821; --surface: #21222e; --surface-soft: #2c2b3a; --ink: #f2f0f9; --muted: #b2aec3;
  --line: #343241; --purple: #b19af8; --purple-dark: #977beb; --purple-soft: #353044;
  --mint: #243b32; --mint-ink: #a2dfbb; --peach: #3c3029; --peach-ink: #f2c3a0;
  --shadow: 0 8px 32px #0001; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button, input, select, a { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--purple); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(27px, 3vw, 34px); line-height: 1.2; letter-spacing: -1.2px; font-weight: 750; }
h2 { font-size: 21px; letter-spacing: -.6px; line-height: 1.3; }
h3 { font-size: 17px; letter-spacing: -.3px; line-height: 1.35; }
small { font-size: 12px; }
.muted { color: var(--muted); }
.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 12px; padding: 12px; background: var(--surface); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.boot { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 12px; color: var(--muted); }
.boot-symbol { font-size: 60px; color: var(--purple); }
.sidebar { width: 226px; padding: 35px 20px 24px; position: fixed; inset: 0 auto 0 0; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; gap: 10px; align-items: center; font-size: 19px; font-weight: 750; letter-spacing: -.6px; padding: 0 7px; }
.brand img { width: 35px; height: 35px; border-radius: 12px; }
.brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1.9px; font-weight: 600; margin-top: 3px; }
.nav { display: grid; gap: 9px; margin-top: 46px; }
.nav a { padding: 13px 15px; border-radius: 15px; display: flex; align-items: center; gap: 13px; color: var(--muted); font-weight: 600; transition: background .18s; }
.nav a:hover { background: var(--surface-soft); color: var(--ink); }
.nav a.active { color: var(--purple); background: var(--purple-soft); }
.nav a .icon { width: 22px; height: 22px; }
.sidebar-footer { margin-top: auto; }
.sidebar-note { padding: 18px 15px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface-soft); }
.sidebar-note .icon { color: var(--purple); margin-bottom: 9px; }
.sidebar-note strong { display: block; font-size: 13px; margin-bottom: 4px; }
.sidebar-note p { font-size: 12px; color: var(--muted); }
.settings-link { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 19px 15px 0; color: var(--muted); width: 100%; text-align: left; }
.workspace { margin-left: 226px; padding: 0 38px 40px; max-width: 1800px; }
.topbar { min-height: 99px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.topbar-left { font-size: 13px; color: var(--muted); }
.mobile-brand { display: none; }
.topbar-right { display: flex; align-items: center; gap: 13px; }
.stat-pill { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.stat-pill .icon { color: #ce8e43; width: 18px; }
.xp-pill .icon { color: var(--purple); }
.language-pill { border: 1px solid var(--line); border-radius: 50px; padding: 8px 13px; background: var(--surface); font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.profile-dot { width: 37px; height: 37px; border-radius: 50%; border: 0; background: var(--purple-soft); color: var(--purple); font-weight: 700; }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 26px; }
.page-heading p { color: var(--muted); margin-top: 8px; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 1.5px; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 30px; padding: 6px 10px; font-size: 11px; font-weight: 650; background: var(--surface-soft); color: var(--muted); }
.pill.lilac { background: var(--purple-soft); color: var(--purple); }
.pill.mint { background: var(--mint); color: var(--mint-ink); }
.pill.peach { background: var(--peach); color: var(--peach-ink); }
.pill .icon { width: 13px; height: 13px; }
.button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; min-height: 46px; padding: 12px 19px; border-radius: 14px; border: 1px solid transparent; background: var(--purple); color: #fff; font-weight: 650; font-size: 13px; transition: transform .15s, background .15s; }
:root[data-theme="dark"] .button { color: #221a36; }
.button:hover { background: var(--purple-dark); transform: translateY(-1px); }
.button.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.button.secondary:hover { background: var(--surface-soft); }
.button.dark { background: #2d293e; color: #fff; }
.button.dark:hover { background: #443c5d; }
.button.ghost { background: transparent; color: var(--muted); padding: 9px 11px; }
.button.ghost:hover { background: var(--surface-soft); color: var(--ink); }
.button.full { width: 100%; }
.button.small { min-height: 36px; padding: 8px 12px; font-size: 12px; border-radius: 10px; }
.icon-button { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); width: 40px; height: 40px; display: inline-grid; place-items: center; }
.icon-button:hover { background: var(--surface-soft); }
.text-link { border: 0; background: none; color: var(--purple); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 5px; padding: 5px; }
.text-link .icon { width: 15px; height: 15px; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 25px; }
.home-main { min-width: 0; }
.hero { position: relative; overflow: hidden; border-radius: 28px; min-height: 310px; padding: 32px; background: linear-gradient(110deg, #eee7fc, #e8e2fa 70%, #ddd2f5); color: #34294e; }
.hero::after { content: ''; position: absolute; width: 240px; height: 240px; background: #fff3; border-radius: 50%; right: -12px; top: 26px; }
.hero-copy { max-width: 64%; position: relative; z-index: 2; }
.hero h2 { font-size: clamp(30px, 3vw, 41px); letter-spacing: -1.6px; line-height: 1.14; margin: 16px 0 13px; }
.hero p { color: #756989; font-size: 13px; max-width: 300px; margin-bottom: 23px; }
.hero .eyebrow { color: #7a5aba; display: inline-flex; gap: 6px; align-items: center; }
.hero .eyebrow .icon { width: 14px; height: 14px; }
.hero-art { position: absolute; right: 0; bottom: -25px; width: 39%; z-index: 1; color: #9876d9; }
.avatar-svg { width: 100%; height: auto; display: block; }
.hero-art .avatar-svg { animation: float 5s ease-in-out infinite; }
.hero-note { font-size: 10px; color: #817097; margin-top: 10px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 27px 0 16px; }
.section-heading p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .2s; }
.game-card:hover { transform: translateY(-3px); }
.game-art { min-height: 125px; position: relative; overflow: hidden; }
.game-art svg { width: 100%; height: 132px; display: block; }
.lilac-bg { background: #eee6fa; color: #8c6bc3; }
.mint-bg { background: #e0f1e6; color: #73af8c; }
.peach-bg { background: #fcebdc; color: #c58d67; }
.game-art .completed-badge { position: absolute; right: 10px; top: 10px; background: #fff; color: #418865; padding: 5px; border-radius: 50%; }
.completed-badge .icon { width: 15px; height: 15px; display: block; }
.game-body { padding: 17px; display: flex; flex-direction: column; flex: 1; }
.game-body .eyebrow { font-size: 8px; color: var(--muted); letter-spacing: 1px; margin-bottom: 7px; }
.game-body h3 { font-size: 14px; margin-bottom: 7px; }
.game-body p { font-size: 11px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.game-meta { display: flex; gap: 9px; color: var(--muted); font-size: 10px; align-items: center; margin-top: auto; }
.game-meta .icon { width: 12px; height: 12px; }
.game-meta span { display: inline-flex; gap: 4px; align-items: center; }
.game-footer { border-top: 1px solid var(--line); padding: 12px 17px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); }
.game-footer .text-link { padding: 1px; font-size: 11px; }
.panel { border: 1px solid var(--line); border-radius: 23px; padding: 23px; background: var(--surface); box-shadow: var(--shadow); }
.companion-panel { text-align: center; }
.companion-panel .eyebrow { text-align: left; color: var(--muted); }
.companion-art { max-width: 145px; margin: 6px auto -10px; color: var(--purple); }
.companion-panel h3 { font-size: 21px; }
.companion-panel p { font-size: 11px; color: var(--muted); margin: 6px 0 14px; }
.companion-panel .button { font-size: 11px; }
.home-rail { display: grid; gap: 18px; align-content: start; }
.goal-row { display: flex; align-items: center; gap: 15px; margin: 17px 0; }
.goal-ring { width: 69px; height: 69px; flex-shrink: 0; position: relative; display: grid; place-items: center; }
.goal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring strong { font-size: 17px; }
.goal-row p { color: var(--muted); font-size: 11px; margin-top: 4px; }
.week-dots { display: flex; justify-content: space-between; margin-top: 17px; }
.week-day { text-align: center; font-size: 9px; color: var(--muted); }
.week-day span { width: 23px; height: 23px; border-radius: 50%; background: var(--surface-soft); display: grid; place-items: center; margin: 0 auto 5px; }
.week-day.done span { background: var(--mint); color: var(--mint-ink); }
.week-day.today span { outline: 2px solid var(--purple); outline-offset: 2px; }
.week-day .icon { width: 12px; height: 12px; }
.review-banner { margin-top: 22px; padding: 19px 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 19px; display: flex; gap: 15px; align-items: center; }
.review-banner > .icon { color: var(--purple); width: 25px; height: 25px; }
.review-banner h3 { font-size: 13px; }
.review-banner p { font-size: 11px; color: var(--muted); margin-top: 3px; }
.review-banner .text-link { margin-left: auto; flex-shrink: 0; }
.resume-banner { display: flex; align-items: center; gap: 15px; padding: 17px 21px; background: var(--mint); color: var(--mint-ink); border-radius: 18px; margin-bottom: 21px; }
.resume-banner p { font-size: 12px; }
.resume-banner strong { font-size: 13px; }
.resume-banner .button { margin-left: auto; }
.filter-row { display: flex; gap: 9px; margin: 0 0 24px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--line); border-radius: 30px; padding: 8px 15px; background: var(--surface); color: var(--muted); font-size: 12px; }
.filter-chip.active { background: var(--purple-soft); border-color: var(--purple-soft); color: var(--purple); }
.games-page .game-art svg { height: 175px; }
.games-page .game-body { padding: 23px; }
.games-page .game-body h3 { font-size: 18px; }
.games-page .game-body p { font-size: 13px; }
.games-page .game-meta, .games-page .game-footer { font-size: 11px; }
.games-page .game-footer { padding: 17px 23px; }
.conversation-banner { display: flex; align-items: center; gap: 22px; padding: 25px; background: var(--purple-soft); border-radius: 23px; margin-top: 27px; }
.conversation-banner > .icon { width: 34px; height: 34px; color: var(--purple); }
.conversation-banner p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.conversation-banner .button { margin-left: auto; flex-shrink: 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.avatar-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); padding: 22px; text-align: center; }
.avatar-card.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple-soft); }
.avatar-portrait { border-radius: 20px; height: 245px; overflow: hidden; display: grid; place-items: center; margin-bottom: 21px; }
.avatar-portrait .avatar-svg { width: 220px; height: 260px; }
.avatar-card h2 { margin-bottom: 6px; }
.avatar-card .avatar-role { color: var(--purple); font-size: 11px; font-weight: 650; }
.avatar-card p { color: var(--muted); font-size: 12px; margin: 15px 0 22px; min-height: 39px; }
.accessory-banner { margin-top: 23px; display: flex; align-items: center; gap: 16px; }
.accessory-banner .icon { color: #c6a03b; width: 31px; height: 31px; }
.accessory-banner p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 23px; }
.stat-card { padding: 22px; }
.stat-card .stat-label { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.stat-card .stat-label .icon { width: 16px; height: 16px; color: var(--purple); }
.stat-card strong { display: block; font-size: 30px; letter-spacing: -1px; margin: 10px 0 3px; }
.stat-card small { color: var(--muted); font-size: 10px; }
.progress-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 23px; }
.chart { display: flex; gap: 17px; align-items: flex-end; height: 170px; margin-top: 20px; border-bottom: 1px solid var(--line); padding: 0 8px; }
.chart-column { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.chart-column small { color: var(--muted); font-size: 9px; margin-bottom: 6px; }
.chart-bar { width: min(100%, 40px); background: var(--purple-soft); border-radius: 7px 7px 0 0; min-height: 3px; }
.chart-column:last-child .chart-bar { background: var(--purple); }
.chart-labels { display: flex; justify-content: space-around; margin-top: 9px; color: var(--muted); font-size: 10px; }
.skill-list { display: grid; gap: 15px; margin-top: 23px; }
.skill-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.skill-row > .icon { color: var(--purple); width: 17px; height: 17px; }
.skill-row .skill-state { margin-left: auto; color: var(--muted); font-size: 10px; }
.skill-row .skill-state.done { color: var(--mint-ink); }
.history-panel { margin-top: 23px; }
.history-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.history-row:last-child { border: 0; padding-bottom: 0; }
.history-icon { width: 40px; height: 40px; background: var(--purple-soft); color: var(--purple); border-radius: 12px; display: grid; place-items: center; }
.history-row h3 { font-size: 12px; }
.history-row p { color: var(--muted); font-size: 10px; margin-top: 3px; }
.history-row .text-link { margin-left: auto; }
.empty-state { padding: 38px 20px; text-align: center; }
.empty-state > .icon { width: 33px; height: 33px; color: var(--purple); margin-bottom: 15px; }
.empty-state p { color: var(--muted); margin: 10px auto 22px; max-width: 390px; font-size: 13px; }
.session-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 20px; }
.session-heading h1 { font-size: 25px; }
.session-heading p { font-size: 12px; color: var(--muted); margin-top: 5px; }
.session-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; }
.session-companion { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 25px; min-height: 520px; }
.session-companion .avatar-svg { max-width: 240px; margin: 15px auto 0; }
.session-companion .avatar-role { color: var(--muted); font-size: 12px; margin-top: 6px; }
.session-companion .quote { color: var(--muted); font-size: 12px; margin-top: 18px; }
.session-companion .mode-pill { margin-top: auto; padding-top: 25px; }
.lesson-progress { width: 100%; text-align: left; margin-top: 24px; }
.lesson-progress p { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.progress-track { height: 6px; border-radius: 20px; background: var(--surface-soft); overflow: hidden; }
.progress-track span { display: block; height: 100%; background: var(--purple); border-radius: inherit; transition: width .3s; }
.chat-panel { overflow: hidden; display: flex; flex-direction: column; padding: 0; min-height: 540px; }
.chat-toolbar { padding: 15px 20px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.chat-toolbar .toolbar-controls { display: flex; gap: 7px; align-items: center; }
.chat-toolbar .button { min-height: 32px; font-size: 10px; padding: 7px 9px; }
.chat-log { padding: 22px; overflow-y: auto; height: min(46vh, 470px); min-height: 260px; scroll-behavior: smooth; }
.chat-message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.chat-message.user { flex-direction: row-reverse; }
.message-avatar { width: 32px; height: 32px; overflow: hidden; border-radius: 10px; background: var(--purple-soft); flex-shrink: 0; display: grid; place-items: center; }
.message-avatar .avatar-svg { width: 38px; height: 45px; margin-top: 5px; }
.message-avatar.user { font-size: 11px; font-weight: 650; color: var(--purple); }
.message-content { max-width: 85%; min-width: 0; }
.message-name { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.chat-message.user .message-name { text-align: right; }
.message-bubble { border-radius: 0 15px 15px 15px; background: var(--surface-soft); padding: 12px 15px; font-size: 13px; white-space: pre-line; }
.chat-message.user .message-bubble { background: var(--purple); color: #fff; border-radius: 15px 0 15px 15px; }
:root[data-theme="dark"] .chat-message.user .message-bubble { color: #221a36; }
.message-translation { color: var(--muted); font-size: 11px; margin: 7px 0 0; }
.message-actions { display: flex; gap: 9px; margin-top: 5px; }
.message-actions .text-link { font-size: 10px; color: var(--muted); padding: 0; }
.message-actions .icon { width: 12px; height: 12px; }
.hint-box { margin: 0 21px 12px; padding: 12px 15px; border-radius: 13px; background: var(--peach); color: var(--peach-ink); font-size: 12px; }
.hint-box p { margin-top: 7px; }
.hint-box .text-link { margin-top: 6px; color: var(--peach-ink); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 21px 12px; }
.choice-chip { background: var(--purple-soft); color: var(--purple); border: 1px solid transparent; border-radius: 12px; padding: 8px 12px; font-size: 11px; text-align: left; }
.choice-chip:hover { border-color: var(--purple); }
.composer { margin-top: auto; padding: 16px 19px; border-top: 1px solid var(--line); background: var(--surface); }
.composer-row { display: flex; gap: 8px; align-items: center; }
.composer input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); font-size: 12px; }
.composer .icon-button { height: 44px; width: 44px; flex-shrink: 0; }
.composer .send-button { background: var(--purple); color: #fff; border-color: transparent; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 7px; }
.composer-foot small { color: var(--muted); font-size: 9px; }
.composer-foot .text-link { font-size: 10px; }
.listening { background: #ffeced !important; border-color: #e8a0a4 !important; color: #ad4b52 !important; animation: pulse 1.2s ease-in-out infinite; }
.speaking .avatar-mouth { animation: talk .28s ease-in-out infinite alternate; transform-origin: 160px 210px; }
.typing { display: inline-flex; gap: 5px; padding: 5px; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: pulse 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }.typing span:nth-child(3) { animation-delay: .3s; }
.result-card { max-width: 670px; margin: 0 auto; padding: 35px; }
.result-top { text-align: center; }
.result-top .avatar-svg { height: 170px; width: 155px; margin: -10px auto 0; }
.result-top h1 { font-size: 29px; margin: 8px 0; }
.result-top p { font-size: 13px; color: var(--muted); }
.result-stats { display: flex; justify-content: center; gap: 27px; margin: 24px 0; padding: 17px; background: var(--surface-soft); border-radius: 17px; }
.result-stats strong { display: block; font-size: 22px; text-align: center; color: var(--purple); }
.result-stats small { font-size: 10px; color: var(--muted); }
.correction-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; margin-top: 12px; font-size: 12px; }
.correction-card .original { color: var(--muted); margin: 7px 0; }
.correction-card .improved { color: var(--mint-ink); font-weight: 650; }
.correction-card .explanation { color: var(--muted); margin-top: 8px; font-size: 11px; }
.result-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.result-actions .button { flex: 1; }
.confidence { margin-top: 23px; padding-top: 19px; border-top: 1px solid var(--line); }
.confidence p { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.confidence-options { display: flex; gap: 8px; }
.confidence-options button { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 17px; }
.confidence-options button.active { background: var(--purple-soft); border-color: var(--purple); }
.review-card { max-width: 600px; margin: 10px auto; text-align: center; padding: 42px; }
.review-card .review-symbol { width: 60px; height: 60px; border-radius: 19px; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; margin: 0 auto 22px; }
.review-card h2 { font-size: 25px; line-height: 1.5; margin: 18px 0; }
.review-card .review-answer { background: var(--surface-soft); border-radius: 15px; padding: 21px; margin-top: 19px; }
.review-card .review-answer p { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.review-card .button { margin-top: 19px; }
.review-card .result-actions .button { margin-top: 0; }
.vocab-list { display: grid; gap: 12px; margin-top: 20px; }
.vocab-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.vocab-row p { font-size: 11px; color: var(--muted); margin-top: 4px; }
dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 27px; padding: 31px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 100px #18132530; max-height: 90vh; }
dialog::backdrop { background: #25223775; backdrop-filter: blur(7px); }
dialog h2 { font-size: 25px; margin-bottom: 7px; }
dialog .modal-subtitle { color: var(--muted); font-size: 13px; margin-bottom: 23px; }
.modal-close { position: absolute; right: 20px; top: 20px; border: 0; width: 32px; height: 32px; background: var(--surface-soft); border-radius: 10px; display: grid; place-items: center; }
.modal-brand { width: 43px; height: 43px; border-radius: 14px; margin-bottom: 20px; }
.onboard-steps { display: flex; gap: 6px; margin: 0 0 23px; }
.onboard-steps span { width: 27px; height: 4px; border-radius: 6px; background: var(--line); }
.onboard-steps span.active { background: var(--purple); }
.field { display: block; margin-bottom: 17px; }
.field > span, .field-label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; }
.field input, .field select { display: block; width: 100%; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); border-radius: 13px; padding: 12px 14px; min-height: 47px; font-size: 13px; }
.field small { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.language-options, .goal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 20px; }
.option-button { border: 1px solid var(--line); background: var(--surface-soft); border-radius: 14px; padding: 14px; display: flex; gap: 10px; align-items: center; text-align: left; font-size: 12px; }
.option-button.selected { border-color: var(--purple); background: var(--purple-soft); color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.option-button .flag { font-size: 21px; }
.onboard-avatar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.onboard-avatar { border: 1px solid var(--line); border-radius: 17px; padding: 10px; text-align: center; background: var(--surface-soft); font-size: 12px; }
.onboard-avatar .avatar-svg { max-height: 138px; }
.onboard-avatar.selected { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.modal-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 21px; }
.modal-actions .button:last-child { margin-left: auto; }
.onboard-note { color: var(--muted); font-size: 10px; margin-top: 17px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; font-size: 12px; }
.toggle-row small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }
.toggle-row input { appearance: none; width: 37px; height: 22px; border-radius: 20px; background: var(--line); flex-shrink: 0; position: relative; cursor: pointer; }
.toggle-row input::before { content: ''; width: 16px; height: 16px; background: #fff; position: absolute; left: 3px; top: 3px; border-radius: 50%; box-shadow: 0 1px 3px #0002; transition: transform .2s; }
.toggle-row input:checked { background: var(--purple); }
.toggle-row input:checked::before { transform: translateX(15px); }
.settings-data { padding-top: 20px; border-top: 1px solid var(--line); margin-top: 21px; }
.settings-data p { color: var(--muted); font-size: 11px; margin: 8px 0 13px; }
.settings-data .button { margin: 3px 4px 3px 0; }
.danger-text { color: #af5363 !important; }
#toast { position: fixed; left: calc(50% + 113px); transform: translate(-50%, 15px); bottom: 30px; z-index: 30; background: var(--ink); color: var(--surface); border-radius: 15px; padding: 13px 20px; max-width: min(520px, 90vw); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 12px; box-shadow: 0 10px 40px #0002; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
.footer-note { margin-top: 30px; color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 6px; }
.footer-note .icon { width: 12px; height: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes talk { to { transform: scaleY(1.3); } }
@keyframes pulse { 50% { opacity: .55; } }
@media (min-width: 1650px) { .workspace { padding-left: 50px; padding-right: 50px; }.home-layout { grid-template-columns: minmax(0,1fr) 295px; }.hero { min-height: 345px; }.hero-art { width: 33%; }.hero h2 { font-size: 45px; }.game-art svg { height: 160px; } }
@media (max-width: 1250px) {
  .workspace { padding-left: 28px; padding-right: 28px; }
  .home-layout { grid-template-columns: minmax(0,1fr); }
  .home-rail { grid-template-columns: 1fr 1fr; }
  .companion-panel { display: none; }
  .hero-art { width: 32%; bottom: -45px; right: 15px; }
  .hero-copy { max-width: 67%; }
  .hero { min-height: 320px; }
  .session-layout { grid-template-columns: 225px minmax(0, 1fr); }
  .session-companion { padding: 21px; }
}
@media (max-width: 1000px) {
  .sidebar { width: 190px; padding-left: 13px; padding-right: 13px; }
  .brand { font-size: 16px; gap: 8px; }.brand img { width: 30px; height: 30px; }
  .workspace { margin-left: 190px; padding: 0 23px 30px; }
  .topbar { min-height: 85px; }.topbar-left { font-size: 11px; }.topbar-right { gap: 9px; }
  .stat-pill { font-size: 11px; }.language-pill { font-size: 11px; padding: 7px 10px; }
  .hero h2 { font-size: 35px; }.hero { min-height: 305px; padding: 27px; }
  .hero-art { width: 35%; right: -5px; bottom: -12px; }
  .cards-grid { gap: 12px; }.game-body { padding: 14px; }.game-footer { padding: 11px 13px; }
  .games-page .cards-grid { grid-template-columns: 1fr 1fr; }.games-page .game-card:last-child { grid-column: 1 / -1; }
  .avatar-grid { gap: 12px; }.avatar-card { padding: 15px; }.avatar-portrait { height: 185px; }.avatar-portrait .avatar-svg { width: 160px; height: 190px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.progress-layout { grid-template-columns: 1fr; }
  .session-layout { grid-template-columns: 1fr; }.session-companion { min-height: 0; padding: 14px 20px; display: grid; grid-template-columns: 65px 1fr; text-align: left; gap: 0 15px; align-items: center; }
  .session-companion .avatar-svg { height: 82px; width: 70px; margin: 0; grid-column: 1; grid-row: 1 / 4; }.session-companion .quote, .session-companion .mode-pill { display: none; }.session-companion h2 { font-size: 17px; }.session-companion .lesson-progress { margin: 10px 0 0; }
  #toast { left: calc(50% + 95px); }
}
@media (max-width: 720px) {
  .sidebar { inset: auto 0 0; width: 100%; height: 72px; padding: 0 7px; border-right: 0; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar > .brand, .sidebar-footer { display: none; }.nav { display: flex; margin: 0; height: 100%; gap: 3px; align-items: center; }.nav a { flex: 1; padding: 8px 4px; justify-content: center; flex-direction: column; gap: 4px; font-size: 9px; border-radius: 13px; }.nav a .icon { width: 21px; height: 21px; }
  .workspace { margin: 0; padding: 0 18px 96px; }
  .topbar { min-height: 76px; margin-bottom: 24px; }.topbar-left > span { display: none; }.mobile-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.5px; }.mobile-brand img { width: 28px; height: 28px; border-radius: 9px; }.topbar-right { gap: 9px; }.topbar-right .stat-pill { display: none; }.language-pill { padding: 6px 9px; }.profile-dot { width: 30px; height: 30px; font-size: 11px; }
  .page-heading { margin-bottom: 21px; }.page-heading h1 { font-size: 28px; }.page-heading p { font-size: 12px; }.page-heading > .pill { display: none; }
  .hero { min-height: 302px; padding: 25px; border-radius: 24px; }.hero h2 { font-size: 33px; letter-spacing: -1.3px; }.hero-copy { max-width: 70%; }.hero p { font-size: 12px; max-width: 190px; margin-bottom: 21px; }.hero-art { width: 40%; right: -18px; bottom: -5px; }.hero::after { width: 170px; height: 170px; right: -35px; top: 72px; }.hero .eyebrow { font-size: 8px; letter-spacing: 1px; }.hero .button { font-size: 11px; padding: 12px 14px; }.hero-note { font-size: 9px; }
  .section-heading h2 { font-size: 19px; }.cards-grid { grid-template-columns: 1fr; gap: 15px; }.home-main .game-card { display: grid; grid-template-columns: 105px 1fr; grid-template-rows: 1fr auto; border-radius: 19px; }.home-main .game-art { grid-row: 1 / 3; min-height: 120px; display: grid; place-items: center; }.home-main .game-art svg { width: 155px; height: 115px; max-width: none; }.home-main .game-body { padding: 14px 14px 9px; }.home-main .game-body h3 { font-size: 14px; }.home-main .game-body p { display: none; }.home-main .game-body .eyebrow { font-size: 7px; }.home-main .game-footer { padding: 9px 14px; font-size: 9px; }.home-main .game-footer .text-link { font-size: 10px; }
  .home-rail { gap: 12px; }.home-rail .panel { padding: 17px 14px; }.home-rail h3 { font-size: 13px; }.goal-row { gap: 8px; }.goal-ring { width: 48px; height: 48px; }.goal-ring strong { font-size: 14px; }.goal-row strong { font-size: 12px; }.goal-row p { font-size: 9px; }.home-rail .text-link { font-size: 10px; }.week-day span { width: 17px; height: 17px; }.week-day { font-size: 8px; }.week-day .icon { width: 9px; height: 9px; }
  .review-banner { padding: 16px; gap: 11px; }.review-banner .text-link { font-size: 10px; }.review-banner h3 { font-size: 12px; }.review-banner p { font-size: 10px; }
  .games-page .cards-grid { grid-template-columns: 1fr; }.games-page .game-card:last-child { grid-column: auto; }.games-page .game-art svg { height: 150px; }.games-page .game-body { padding: 20px; }.games-page .game-footer { padding: 14px 20px; }
  .conversation-banner { gap: 13px; flex-wrap: wrap; padding: 21px; }.conversation-banner > div { flex: 1; }.conversation-banner h3 { font-size: 16px; }.conversation-banner p { font-size: 11px; }.conversation-banner .button { width: 100%; margin: 7px 0 0; }
  .avatar-grid { grid-template-columns: 1fr; }.avatar-card { padding: 20px; }.avatar-portrait { height: 210px; }.avatar-portrait .avatar-svg { height: 240px; width: 210px; }.avatar-card p { min-height: 0; }.accessory-banner { padding: 19px; }
  .stats-grid { gap: 12px; }.stat-card { padding: 18px; }.stat-card strong { font-size: 27px; }.stat-card .stat-label { font-size: 10px; }.panel { padding: 21px; }.chart { gap: 10px; }
  .session-heading h1 { font-size: 22px; }.session-heading .button { padding: 8px 10px; font-size: 10px; min-height: 36px; }.session-layout { gap: 13px; }.session-companion { padding: 11px 15px; }.chat-panel { min-height: 500px; }.chat-log { height: 38vh; min-height: 240px; padding: 18px 13px; }.chat-toolbar { padding: 12px; }.chat-toolbar .pill { font-size: 9px; padding: 5px 8px; }.message-content { max-width: 84%; }.message-bubble { font-size: 12px; padding: 11px 13px; }.composer { padding: 14px 12px; }.composer input { font-size: 11px; padding: 12px 10px; }.composer .icon-button { width: 39px; height: 41px; }.composer-foot small { max-width: 57%; font-size: 8px; }.composer-foot .text-link { font-size: 9px; }
  .hint-box { margin-left: 13px; margin-right: 13px; }.choices { padding-left: 13px; padding-right: 13px; }.choice-chip { font-size: 10px; }
  .result-card { padding: 25px 21px; }.result-top h1 { font-size: 25px; }.result-stats { gap: 22px; padding: 15px; }.result-stats strong { font-size: 20px; }.result-stats small { font-size: 9px; }
  .review-card { padding: 29px 21px; }.review-card h2 { font-size: 21px; }
  dialog { padding: 26px 23px; border-radius: 23px; }.onboard-avatar .avatar-svg { max-height: 110px; }.onboard-avatar-row { gap: 8px; }.onboard-avatar { padding: 7px; }.field-grid { gap: 11px; }.modal-actions .button { padding: 12px 15px; }
  .resume-banner { padding: 14px; gap: 9px; }.resume-banner .icon { display: none; }.resume-banner p { font-size: 10px; }.resume-banner strong { font-size: 11px; }.resume-banner .button { font-size: 10px; padding: 9px; min-height: 34px; }
  #toast { left: 50%; bottom: 91px; max-width: calc(100vw - 35px); width: max-content; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ============ Xenoglosia 2.0 · capa visual ============ */
:root {
  --bg: #f6f4ff; --surface: #ffffffd9; --surface-solid: #fff; --surface-soft: #f1eefc; --ink: #1d1a33; --muted: #6f6a8a;
  --line: #e6e1f7; --purple: #6d4dff; --purple-dark: #5536f0; --purple-soft: #efe9ff;
  --pink: #ff4fa3; --amber: #ffb03b; --teal: #19c6a7; --sky: #3f9bff;
  --grad: linear-gradient(120deg, #6d4dff, #b44dff 45%, #ff4fa3 75%, #ffb03b);
  --shadow: 0 10px 40px #4a32b114; --shadow-lift: 0 22px 60px #4a32b12a; --radius: 26px;
  font-family: 'Inter', ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] {
  --bg: #0c0a1d; --surface: #17142ccc; --surface-solid: #17142c; --surface-soft: #231f3d; --ink: #f4f1ff; --muted: #a9a3c9;
  --line: #2c274b; --purple: #a993ff; --purple-dark: #8f75ff; --purple-soft: #2a2350;
  --shadow: 0 10px 40px #0006; --shadow-lift: 0 22px 60px #000a;
}
body { background: var(--bg); min-height: 100vh; }
body::before { content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(40vmax 40vmax at 15% 10%, #8b6dff33, transparent 60%), radial-gradient(35vmax 35vmax at 90% 20%, #ff4fa32b, transparent 60%), radial-gradient(40vmax 40vmax at 70% 95%, #19c6a724, transparent 60%);
  animation: aurora 22s ease-in-out infinite alternate; }
:root[data-theme="dark"] body::before { opacity: 1.4; }
@keyframes aurora { to { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.08); } }
html[data-text="large"] body { zoom: 1.12; }
html[data-text="xlarge"] body { zoom: 1.25; }
:root[data-age="seniors"] { --muted: #57527a; }
:root[data-age="seniors"][data-theme="dark"] { --muted: #cdc8ea; }
:root[data-age="kids"] { --radius: 30px; }
:root[data-age="kids"] .button, :root[data-age="kids"] .arcade-option { border-radius: 20px; }

h1 { font-weight: 820; letter-spacing: -1.4px; }
.sidebar, .topbar { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.sidebar { background: var(--surface); }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { -webkit-text-fill-color: var(--muted); }
.nav a.active { background: var(--grad); color: #fff; box-shadow: 0 8px 24px #6d4dff40; }
.nav a { transition: background .2s, transform .2s; }
.nav a:hover { transform: translateX(3px); }
.topbar { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--bg) 70%, transparent); margin-left: -38px; margin-right: -38px; padding: 0 38px; }
.panel, .game-card, .avatar-card { background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); box-shadow: var(--shadow); }
.game-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.game-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lift); }
.button { background: var(--purple); border-radius: 15px; box-shadow: 0 8px 22px #6d4dff38; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px #6d4dff4d; }
.button:active { transform: scale(.97); }
.button.secondary, .button.ghost { box-shadow: none; }
.button.dark { background: #15122b; box-shadow: 0 10px 30px #15122b40; }
.button.glow { background: linear-gradient(120deg, #6d4dff, #b44dff 25%, #ff4fa3 50%, #b44dff 75%, #6d4dff); background-size: 200% 100%; color: #fff; animation: shimmer 6s linear infinite; }
:root[data-theme="dark"] .button.glow, :root[data-theme="dark"] .button.dark { color: #fff; }
.button.glass { background: #ffffff8c; color: #2b2150; border: 1px solid #ffffffb0; backdrop-filter: blur(10px); box-shadow: none; }
@keyframes shimmer { to { background-position: 200% 0; } }

/* Rang */
.rank-card { text-align: left; }
.rank-emoji { font-size: 26px; display: block; margin-bottom: 4px; }
.rank-track { height: 7px; border-radius: 9px; background: var(--line); overflow: hidden; margin: 8px 0; }
.rank-track span { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width .6s; }

/* Hero */
.hero.aurora { background: radial-gradient(120% 140% at 0% 0%, #7b5cff 0%, #a64dff 38%, #ff4fa3 72%, #ffb03b 100%); color: #fff; min-height: 340px; box-shadow: 0 24px 70px #8b4dff40; isolation: isolate; }
.hero.aurora::after { background: #ffffff1f; }
.hero.aurora h2 { font-size: clamp(30px, 3.4vw, 46px); }
.hero.aurora h2 em { font-style: normal; background: linear-gradient(90deg, #fff, #ffe7a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.aurora p, .hero.aurora .hero-note, .hero.aurora .eyebrow { color: #ffffffd9; }
.hero.aurora p { max-width: 380px; font-size: 14px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero.aurora .hero-art { color: #fff; }
.hero-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bubbles span { position: absolute; padding: 7px 13px; border-radius: 16px 16px 16px 4px; background: #ffffff2e; border: 1px solid #ffffff55; color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); animation: bob 7s ease-in-out infinite; }
.hero-bubbles span:nth-child(1) { right: 34%; top: 12%; }
.hero-bubbles span:nth-child(2) { right: 6%; top: 8%; animation-delay: -1.2s; }
.hero-bubbles span:nth-child(3) { right: 30%; bottom: 14%; animation-delay: -2.4s; }
.hero-bubbles span:nth-child(4) { right: 4%; bottom: 40%; animation-delay: -3.1s; }
.hero-bubbles span:nth-child(5) { right: 40%; top: 46%; animation-delay: -4.2s; opacity: .8; }
.hero-bubbles span:nth-child(6) { right: 18%; top: 30%; animation-delay: -5s; opacity: .7; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(-2deg); } }

/* Ments */
.mind-orb { --o1: #7c5cff; --o2: #3f9bff; width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; background: radial-gradient(circle at 30% 25%, #ffffffa0, transparent 40%), linear-gradient(135deg, var(--o1), var(--o2)); box-shadow: 0 10px 30px color-mix(in srgb, var(--o1) 45%, transparent), inset 0 -6px 14px #0002; position: relative; }
.mind-orb span { font-size: 32px; filter: drop-shadow(0 3px 4px #0003); }
.mind-orb::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--o1) 40%, transparent); animation: pulse 3s ease-out infinite; }
.mind-orb.large { width: 120px; height: 120px; margin: 0 auto 12px; }
.mind-orb.large span { font-size: 60px; }
.mind-orb.tiny { width: 34px; height: 34px; } .mind-orb.tiny span { font-size: 17px; } .mind-orb.tiny::after { display: none; }
@keyframes pulse { 0% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.cosmic-orb { --o1: #6d4dff; --o2: #1b2b7a; } .sunset-orb { --o1: #ff7a45; --o2: #ff4fa3; } .ocean-orb { --o1: #19a7c6; --o2: #3f5bff; } .forest-orb { --o1: #2ed39b; --o2: #11a36f; }
.minds-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mind-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.mind-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.mind-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 70px; opacity: .16; background: var(--card-grad); pointer-events: none; }
.cosmic-card { --card-grad: linear-gradient(135deg, #6d4dff, #3f9bff); } .sunset-card { --card-grad: linear-gradient(135deg, #ff7a45, #ff4fa3); } .ocean-card { --card-grad: linear-gradient(135deg, #19a7c6, #3f5bff); } .forest-card { --card-grad: linear-gradient(135deg, #2ed39b, #9be15d); }
.mind-body .eyebrow { color: var(--muted); font-size: 9px; }
.mind-body h3 { margin: 3px 0 5px; }
.mind-body p { font-size: 12px; color: var(--muted); }
.mind-card .button { margin-top: auto; }
.minds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.mind-feature { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mind-feature::before { content: ''; position: absolute; inset: 0; opacity: .1; background: var(--card-grad); pointer-events: none; }
.mind-feature .mind-orb.large { margin: 0; }
.mind-feature .eyebrow { color: var(--muted); }
.mind-feature h2 { margin: 4px 0; }
.mind-topic { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.mind-feature p:not(.mind-topic) { color: var(--muted); font-size: 13px; }
.mind-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; position: relative; }
.minds-note { font-size: 12px; margin-top: 16px; }
.ai-panel { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; }
.ai-panel > .icon { color: var(--purple); width: 28px; height: 28px; }
.ai-panel p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.mind-companion .mind-orb.large { margin: 10px auto 14px; }
.message-avatar .mind-orb.tiny { width: 100%; height: 100%; }

/* Ràfega */
.arcade-banner { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 20px 22px; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #15122b, #3a1f7a 60%, #6d2a8f); box-shadow: 0 18px 50px #2a165a40; transition: transform .25s; }
.arcade-banner:hover { transform: translateY(-3px); }
.arcade-banner > div { flex: 1; } .arcade-banner p { color: #ffffffb3; font-size: 12px; margin-top: 3px; }
.arcade-banner .button { background: var(--amber); color: #2a1a00; box-shadow: none; }
.arcade-bolt { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb03b, #ff4fa3); }
.arcade-bolt .icon { width: 26px; height: 26px; color: #fff; }
.arcade-stage { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto; padding: 34px; border-radius: 32px; text-align: center; color: #fff; background: radial-gradient(120% 120% at 50% 0%, #3a1f7a, #15122b 70%); box-shadow: 0 30px 80px #1b0f4466; isolation: isolate; }
.arcade-glow { position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg, #6d4dff55, #ff4fa355, #ffb03b55, #19c6a755, #6d4dff55); filter: blur(60px); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.arcade-stage p { color: #ffffffbf; }
.arcade-stage .muted { color: #ffffff99; }
.arcade-big-bolt .icon { width: 64px; height: 64px; color: var(--amber); filter: drop-shadow(0 0 18px #ffb03b); }
.arcade-stage h2 { font-size: clamp(24px, 4vw, 34px); margin: 8px 0; }
.arcade-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 16px; }
.arcade-mode { display: grid; gap: 6px; justify-items: center; padding: 24px 16px; border-radius: 22px; border: 1px solid #ffffff30; background: #ffffff14; color: #fff; transition: transform .2s, background .2s; }
.arcade-mode:hover { transform: translateY(-4px); background: #ffffff24; }
.arcade-mode .icon { width: 32px; height: 32px; color: var(--amber); }
.arcade-mode strong { font-size: 18px; } .arcade-mode small { color: #ffffffa6; }
.arcade-tip { font-size: 12px; }
.arcade-hud { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.arcade-time { font-size: 20px; font-variant-numeric: tabular-nums; }
.arcade-score { font-size: 40px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.arcade-combo { padding: 6px 14px; border-radius: 30px; background: #ffffff1f; font-size: 18px; }
.arcade-combo.hot { background: linear-gradient(135deg, #ffb03b, #ff4fa3); animation: pop .35s; box-shadow: 0 0 24px #ff4fa380; }
.arcade-timer { height: 8px; border-radius: 9px; background: #ffffff1f; overflow: hidden; margin: 14px 0 26px; }
.arcade-timer span { display: block; height: 100%; background: linear-gradient(90deg, #19c6a7, #ffb03b, #ff4fa3); transition: width .2s linear; }
.arcade-question { min-height: 120px; display: grid; place-content: center; gap: 8px; }
.arcade-question h2 { font-size: clamp(22px, 3.6vw, 32px); }
.arcade-listen { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 0 40px #ff4fa366; animation: pop .4s; }
.arcade-listen .icon { width: 36px; height: 36px; }
.arcade-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.arcade-option { position: relative; min-height: 74px; padding: 16px 16px 16px 46px; text-align: left; border-radius: 18px; border: 1px solid #ffffff2e; background: #ffffff17; color: #fff; font-weight: 650; font-size: 15px; transition: transform .15s, background .15s; }
.arcade-option:hover { background: #ffffff2b; transform: translateY(-2px); }
.arcade-option:active { transform: scale(.97); }
.arcade-option kbd { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 700 11px/1 inherit; background: #ffffff26; }
.arcade-stage .button.ghost { color: #ffffffb3; }
.flash-good { animation: good .4s; } .flash-bad { animation: shake .4s; }
@keyframes good { 0% { box-shadow: 0 0 0 0 #19c6a7aa; } 100% { box-shadow: 0 0 0 30px #19c6a700; } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.arcade-final { font-size: clamp(70px, 14vw, 120px); font-weight: 900; letter-spacing: -4px; line-height: 1; margin: 18px 0 6px; background: linear-gradient(180deg, #fff, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .6s; }
.arcade-stage .result-stats { background: #ffffff14; border-radius: 20px; margin: 22px 0; }
.arcade-stage .result-stats small { color: #ffffffa6; }

/* Edats, eco, confeti */
.age-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.age-option { display: grid !important; justify-items: center; gap: 2px; padding: 12px 6px !important; text-align: center; }
.age-emoji { font-size: 28px; }
.age-option small { color: var(--muted); font-size: 10px; }
.echo-words { font-size: 22px; font-weight: 700; line-height: 1.6; }
.echo-words .word { padding: 1px 4px; border-radius: 8px; transition: background .3s; }
.echo-words .word.ok { background: #19c6a72e; color: #0c8f78; }
.echo-words .word.miss { background: #ff4fa32a; color: #d02a78; }
:root[data-theme="dark"] .echo-words .word.ok { color: #6ff0d6; } :root[data-theme="dark"] .echo-words .word.miss { color: #ff8cc4; }
.echo-meter { height: 8px; border-radius: 9px; background: var(--line); overflow: hidden; margin: 12px 0 6px; }
.echo-meter span { display: block; height: 100%; background: linear-gradient(90deg, #ff4fa3, #ffb03b, #19c6a7); transition: width .6s; }
.echo-verdict { font-size: 13px; font-weight: 600; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--drift), 105vh, 0) rotate(var(--spin)); opacity: .9; } }
dialog { background: var(--surface-solid); }
.result-card { position: relative; overflow: hidden; }
.result-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 180px; background: var(--grad); opacity: .12; pointer-events: none; }
.chat-message.user .message-bubble { background: var(--grad); color: #fff; }

@media (max-width: 1000px) { .topbar { margin-left: -23px; margin-right: -23px; padding: 0 23px; } }
@media (max-width: 720px) {
  .topbar { margin-left: -18px; margin-right: -18px; padding: 0 18px; }
  .nav a { font-size: 8px; padding: 8px 2px; }
  .nav a:hover { transform: none; }
  .hero-bubbles span:nth-child(n+4) { display: none; }
  .hero.aurora p { max-width: 210px; font-size: 12px; }
  .hero-actions .button { font-size: 11px; padding: 11px 12px; }
  .minds-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mind-card { padding: 14px; } .mind-body p { display: none; } .mind-orb { width: 52px; height: 52px; } .mind-orb span { font-size: 26px; }
  .mind-feature { grid-template-columns: 1fr; text-align: center; } .mind-feature .mind-orb.large { margin: 0 auto; } .mind-actions { justify-content: center; }
  .arcade-stage { padding: 22px 16px; border-radius: 26px; }
  .arcade-options, .arcade-modes { grid-template-columns: 1fr; }
  .arcade-option { min-height: 58px; font-size: 14px; }
  .age-options { grid-template-columns: 1fr 1fr; }
  .arcade-banner { padding: 16px; } .arcade-banner .button { display: none; }
}
/* ajustos 2.0 */
.hero.aurora h2 { font-size: clamp(28px, 2.7vw, 40px); }
.hero.aurora .hero-copy { max-width: 60%; }
.hero-bubbles span:nth-child(1) { right: 30%; top: 10%; }
.hero-bubbles span:nth-child(5) { right: 4%; top: 62%; }
.hero-bubbles span:nth-child(3) { right: 27%; bottom: 10%; }
.minds-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (max-width: 720px) { .hero.aurora .hero-copy { max-width: 72%; } .hero-bubbles span:nth-child(5) { display: none; } }
:root[data-theme="dark"] .button.secondary, :root[data-theme="dark"] .button.ghost { color: var(--ink); }
.hero-bubbles span:nth-child(n+4) { display: none; }
.voice-row { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 6px 0 12px; border-radius: 16px; background: var(--surface-soft); }
.voice-row > .icon { color: var(--purple); }
.voice-row > div { flex: 1; } .voice-row small { display: block; color: var(--muted); margin-top: 2px; }

/* ============ Retrats parlants ============ */
.face { display: block; width: 100%; height: auto; overflow: visible; }
.face .mouth > g { display: none; }
.face[data-v="rest"] .v-rest, .face[data-v="m"] .v-m, .face[data-v="a"] .v-a, .face[data-v="e"] .v-e, .face[data-v="o"] .v-o, .face[data-v="f"] .v-f { display: inline; }
.face .lid { transform: scaleY(0); transform-box: fill-box; transform-origin: center top; animation: blink 5.4s infinite; }
.face[data-face="kai"] .lid { animation-delay: -1.3s; } .face[data-face="atlas"] .lid { animation-delay: -2.7s; animation-duration: 6.1s; }
.face[data-face="nova"] .lid { animation-delay: -3.6s; } .face[data-face="marcel"] .lid { animation-delay: -.6s; animation-duration: 4.8s; }
.face[data-face="clio"] .lid { animation-delay: -2s; animation-duration: 6.4s; } .face[data-face="pip"] .lid { animation-delay: -4.4s; animation-duration: 3.9s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.face .headgrp { transform-box: view-box; transform-origin: 120px 230px; animation: idle 6s ease-in-out infinite; }
@keyframes idle { 50% { transform: rotate(1deg) translateY(-1.5px); } }
.face .pupil { animation: look 9s ease-in-out infinite; }
@keyframes look { 0%, 40%, 100% { transform: translate(0, 0); } 45%, 60% { transform: translate(2.5px, -.5px); } 65%, 80% { transform: translate(-2px, .5px); } }
.face.talking .headgrp { animation: talk 1.25s ease-in-out infinite; }
@keyframes talk { 25% { transform: rotate(-1.6deg) translateY(-1px); } 75% { transform: rotate(1.4deg) translateY(-2px); } }
.face.talking .brows { animation: brows 1.9s ease-in-out infinite; transform-box: fill-box; }
@keyframes brows { 30% { transform: translateY(-2.5px); } 60% { transform: translateY(0); } }
.face .face-bg { transition: filter .3s; }
.face.talking .face-bg { filter: saturate(1.25) brightness(1.03); }
.face.small, .face.still { animation: none; }
.face.still .headgrp, .face.still .pupil { animation: none; }

.hero-art .face { width: 100%; max-width: 330px; margin-left: auto; filter: drop-shadow(0 24px 40px #2a0f5a55); }
.hero.aurora .hero-art { width: 36%; right: 3%; bottom: 50%; transform: translateY(50%); }
.companion-art .face { width: 150px; margin: 6px auto 10px; }
.avatar-portrait { display: grid; place-items: center; background: none !important; height: auto !important; padding: 10px 0; }
.avatar-portrait .face { width: 210px; filter: drop-shadow(0 16px 30px #3a1d7a2e); }
.onboard-avatar .face { width: 100%; max-width: 120px; margin: 0 auto 6px; }
.message-avatar { background: none !important; overflow: visible !important; }
.message-avatar .face { width: 38px; height: 38px; }
.session-companion > .face { width: 190px; margin: 10px auto 14px; filter: drop-shadow(0 14px 30px #3a1d7a33); }
.result-top > .face { width: 150px; margin: 0 auto 12px; }
.mind-face { width: 74px; flex: 0 0 auto; }
.mind-face.large { width: 150px; }
.mind-face .face { filter: drop-shadow(0 10px 20px #3a1d7a2e); }
@media (max-width: 1000px) { .session-companion > .face { width: 70px; margin: 0; grid-column: 1; grid-row: 1 / 4; } }
@media (max-width: 720px) {
  .hero.aurora .hero-art { width: 40%; right: -4%; bottom: 8%; transform: none; }
  .mind-face { width: 58px; } .mind-face.large { width: 120px; margin: 0 auto; }
  .avatar-portrait .face { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .face .lid { animation: none; } }

/* ============ Pla / Premium ============ */
.plan-chip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 11px; border-radius: 14px; font-weight: 750; font-size: 13px; color: #fff; background: var(--grad); box-shadow: 0 10px 26px #b44dff40; }
.plan-chip.premium { background: linear-gradient(120deg, #ffb03b, #ff4fa3); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; max-width: 880px; }
.plan-card { position: relative; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.plan-card .eyebrow { color: var(--muted); }
.plan-card h3 { font-size: 24px; }
.plan-card.pro { border: 2px solid transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, var(--grad) border-box; box-shadow: 0 24px 60px #8b4dff33; }
.plan-badge { position: absolute; top: -12px; right: 22px; padding: 5px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: var(--grad); }
.price { display: flex; align-items: baseline; gap: 8px; } .price strong { font-size: 40px; letter-spacing: -1.5px; } .price span { color: var(--muted); }
.price-alt { color: var(--muted); font-size: 13px; margin-top: -6px; }
.plan-card ul { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 10px; flex: 1; }
.plan-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.plan-card li .icon { color: var(--teal); width: 18px; height: 18px; margin-top: 2px; }
.redeem-panel { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; max-width: 880px; }
.redeem-panel > .icon { color: var(--purple); width: 28px; height: 28px; }
.redeem-panel > div { flex: 1; } .redeem-panel p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.redeem-form { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.redeem-form input { flex: 1; min-width: 220px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-solid); color: var(--ink); font-family: ui-monospace, monospace; letter-spacing: .5px; }
.redeem-message { margin-top: 10px; font-weight: 650; color: var(--ink) !important; }
.faq { max-width: 880px; margin-top: 26px; display: grid; gap: 10px; }
.faq details { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; } .faq details p { color: var(--muted); margin-top: 8px; font-size: 14px; }

/* ============ El Camí ============ */
.path-card { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s; }
.path-card:hover { transform: translateY(-3px); }
.path-card > div { flex: 1; } .path-card .eyebrow { color: var(--muted); } .path-card h3 { margin: 3px 0 8px; }
.path-card-emoji { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; background: var(--purple-soft); }
.path { position: relative; display: grid; gap: 14px; max-width: 640px; margin: 10px auto 26px; }
.path::before { content: ''; position: absolute; left: 50%; top: 30px; bottom: 30px; width: 6px; margin-left: -3px; border-radius: 6px; background: repeating-linear-gradient(var(--line) 0 14px, transparent 14px 24px); z-index: -1; }
.path-node { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(calc(sin(var(--i) * 1.3rad) * 60px)); }
.path-node.locked { opacity: .6; }
.node-button { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface-soft); box-shadow: inset 0 -6px 0 #0000001a; transition: transform .2s; }
.node-button:hover { transform: scale(1.06); }
.node-emoji { font-size: 34px; }
.path-node.current .node-button { background: var(--grad); box-shadow: inset 0 -6px 0 #0003, 0 0 0 6px #b44dff2e, 0 14px 30px #b44dff55; animation: nodePulse 2.4s ease-in-out infinite; }
.path-node.done .node-button { background: linear-gradient(135deg, #2ed3b7, #19a7c6); box-shadow: inset 0 -6px 0 #0002; }
@keyframes nodePulse { 50% { box-shadow: inset 0 -6px 0 #0003, 0 0 0 12px #b44dff14, 0 14px 30px #b44dff55; } }
.node-check { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #11a38a; display: grid; place-items: center; box-shadow: 0 4px 10px #0002; }
.node-check .icon { width: 16px; height: 16px; }
.node-info { flex: 1; } .node-info .eyebrow { color: var(--muted); } .node-info h3 { margin: 2px 0 4px; } .node-info p { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.path-note { display: flex; gap: 14px; max-width: 640px; margin: 0 auto; } .path-note > .icon { color: var(--amber); width: 26px; height: 26px; } .path-note p { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ============ Lliçó ============ */
.lesson-main { min-height: 100vh; display: grid; place-items: start center; padding: 18px 16px 40px; }
.lesson-shell { width: min(720px, 100%); display: flex; flex-direction: column; gap: 18px; min-height: calc(100vh - 60px); }
.lesson-top { display: flex; align-items: center; gap: 14px; }
.lesson-bar { flex: 1; height: 14px; border-radius: 10px; background: var(--line); overflow: hidden; }
.lesson-bar span { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .4s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 -4px 0 #0001; }
.lesson-unit { font-size: 26px; }
.lesson-body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; animation: stepIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } }
.lesson-ask { color: var(--muted); font-weight: 700; font-size: 14px; }
.lesson-prompt { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.8px; }
.gap-line { line-height: 1.6; }
.gap-slot { display: inline-block; min-width: 110px; margin: 0 6px; padding: 0 10px; border-bottom: 3px solid var(--purple); color: var(--purple); text-align: center; }
.lesson-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.lesson-option { padding: 18px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 16px; text-align: left; box-shadow: 0 4px 0 var(--line); transition: transform .12s, border-color .12s; }
.lesson-option:hover { border-color: var(--purple); }
.lesson-option:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.lesson-option.picked { border-color: var(--purple); background: var(--purple-soft); box-shadow: 0 4px 0 var(--purple); }
.lesson-option.right { border-color: var(--teal); background: #19c6a724; box-shadow: 0 4px 0 var(--teal); }
.lesson-option.wrong { border-color: var(--pink); background: #ff4fa31f; box-shadow: 0 4px 0 var(--pink); }
.lesson-option:disabled { opacity: 1; cursor: default; }
.big-listen { width: 120px; height: 120px; margin: 10px auto; border-radius: 34px; border: 0; color: #fff; background: var(--grad); display: grid; place-items: center; box-shadow: 0 8px 0 #6d2abf, 0 20px 40px #b44dff55; }
.big-listen:active { transform: translateY(5px); box-shadow: 0 3px 0 #6d2abf; }
.big-listen .icon { width: 52px; height: 52px; }
.learn-card { margin: auto 0; text-align: center; padding: 34px 20px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.learn-card .eyebrow { color: var(--purple); }
.learn-term { display: inline-flex; align-items: center; gap: 14px; margin: 18px 0 10px; padding: 0; border: 0; background: none; font-size: clamp(32px, 6vw, 52px); font-weight: 850; letter-spacing: -1.5px; color: var(--ink); }
.learn-term .icon { width: 34px; height: 34px; color: #fff; padding: 8px; box-sizing: content-box; border-radius: 16px; background: var(--grad); }
.learn-meaning { font-size: 20px; color: var(--muted); }
.coach { display: flex; gap: 16px; align-items: flex-end; margin: auto 0; }
.coach .face { width: 150px; flex: 0 0 auto; }
.coach-bubble { position: relative; padding: 20px 22px; border-radius: 24px 24px 24px 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.coach-bubble p { margin-top: 8px; font-size: 17px; line-height: 1.55; }
.build-answer { min-height: 66px; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px; border-bottom: 2px solid var(--line); border-top: 2px solid var(--line); align-items: center; }
.build-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 6px; }
.tile { padding: 11px 15px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 16px; box-shadow: 0 3px 0 var(--line); transition: transform .12s; }
.tile:hover { border-color: var(--purple); }
.tile.used { opacity: .25; box-shadow: none; }
.speak-row { display: grid; place-items: center; }
.mic-big { width: 110px; height: 110px; border-radius: 50%; border: 0; color: #fff; background: var(--grad); display: grid; place-items: center; box-shadow: 0 16px 40px #b44dff55; }
.mic-big .icon { width: 46px; height: 46px; }
.mic-big.listening { animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 18px #ff4fa333, 0 16px 40px #b44dff55; } }
.center { text-align: center; } .center-link { align-self: center; }
.lesson-feedback { padding: 16px 20px; border-radius: 20px; animation: stepIn .25s; }
.lesson-feedback strong { font-size: 18px; }
.lesson-feedback.ok { background: #19c6a72a; color: #0b7c69; } .lesson-feedback.ko { background: #ff4fa324; color: #b81f66; }
:root[data-theme="dark"] .lesson-feedback.ok { color: #7cf0d9; } :root[data-theme="dark"] .lesson-feedback.ko { color: #ff9cc9; }
.lesson-feedback p { margin-top: 4px; }
.lesson-actions { position: sticky; bottom: 12px; }
.button.wide { width: 100%; min-height: 56px; font-size: 16px; border-radius: 18px; }
.button.good { background: var(--teal); box-shadow: 0 6px 0 #0d8f78; color: #fff; }
.button.bad { background: var(--pink); box-shadow: 0 6px 0 #c22a73; color: #fff; }
.lesson-end { align-items: center; text-align: center; justify-content: center; gap: 14px; }
.lesson-end > .face { width: 180px; }
.lesson-end .result-stats { width: 100%; }

/* ============ Benvinguda ============ */
.landing { max-width: 1200px; margin: 0 auto; padding: 0 22px 40px; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.landing-nav nav { display: flex; align-items: center; gap: 12px; }
.landing-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; min-height: min(640px, 80vh); }
.landing-copy h1 { font-size: clamp(36px, 5.4vw, 66px); line-height: 1.03; letter-spacing: -2.5px; margin: 18px 0; }
.landing-copy h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-copy p { font-size: 18px; color: var(--muted); max-width: 520px; margin-bottom: 24px; }
.landing-copy small { display: block; margin-top: 14px; }
.landing-stage { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.stage-main { position: absolute; inset: 14%; filter: drop-shadow(0 40px 60px #6d4dff40); }
.stage-orbit { position: absolute; width: 21%; animation: orbitFloat 6s ease-in-out infinite; filter: drop-shadow(0 12px 20px #3a1d7a33); }
.stage-orbit.o0 { left: 0; top: 8%; } .stage-orbit.o1 { right: 2%; top: 2%; animation-delay: -1s; } .stage-orbit.o2 { right: -2%; top: 46%; animation-delay: -2s; }
.stage-orbit.o3 { left: -3%; top: 52%; animation-delay: -3s; } .stage-orbit.o4 { left: 18%; bottom: -2%; animation-delay: -4s; width: 17%; } .stage-orbit.o5 { right: 16%; bottom: -1%; animation-delay: -5s; width: 17%; }
@keyframes orbitFloat { 50% { transform: translateY(-12px) rotate(-3deg); } }
.stage-bubble { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--surface-solid); box-shadow: var(--shadow-lift); font-weight: 650; font-size: 14px; text-align: center; }
.landing-section { padding: 56px 0 10px; }
.landing-section > h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -1.2px; text-align: center; margin-bottom: 26px; }
.landing-section .plans-grid { margin: 0 auto; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feature { padding: 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.feature .icon { width: 40px; height: 40px; padding: 10px; box-sizing: content-box; border-radius: 16px; color: #fff; background: var(--grad); }
.feature h3 { margin: 16px 0 6px; } .feature p { color: var(--muted); font-size: 14px; }
.age-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.age-strip > div { padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.age-strip span { font-size: 40px; } .age-strip strong { display: block; font-size: 18px; margin-top: 6px; } .age-strip small { color: var(--muted); } .age-strip p { color: var(--muted); font-size: 13px; margin-top: 8px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.step > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-weight: 850; color: #fff; background: var(--grad); }
.step h3 { margin: 14px 0 6px; } .step p { color: var(--muted); font-size: 14px; }
.landing-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 40px 0 0; color: var(--muted); font-size: 13px; }
.landing-footer .icon { width: 14px; height: 14px; color: var(--pink); }

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; text-align: center; padding-top: 10px; }
  .landing-copy p { margin-left: auto; margin-right: auto; } .landing-copy .hero-actions { justify-content: center; }
  .landing-stage { max-width: 380px; }
  .age-strip { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .path-node { transform: none; } .path::before { left: 52px; }
  .node-button { width: 64px; height: 64px; } .node-emoji { font-size: 28px; }
  .lesson-options { grid-template-columns: 1fr; }
  .coach { flex-direction: column; align-items: center; } .coach .face { width: 120px; }
  .path-card-emoji { width: 48px; height: 48px; font-size: 24px; }
  .plan-card { padding: 22px; }
}
.path-node { background: var(--surface-solid); }

/* ============ Avatar 3D ============ */
.avatar-3d { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate; }
.avatar-3d > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #f3eeff, #c7b6ff 80%); }
.avatar-3d[data-avatar="luna"] > canvas { background: radial-gradient(circle at 50% 35%, #f3eeff, #c7b6ff 80%); }
.avatar-3d[data-model-state="ready"] > .face { opacity: 0; pointer-events: none; }
.avatar-3d .avatar-award { position: absolute; z-index: 2; top: 6%; right: 10%; font-size: 22px; filter: drop-shadow(0 3px 6px #0003); }
.hero-art .avatar-3d { max-width: 330px; margin-left: auto; filter: drop-shadow(0 24px 40px #2a0f5a55); }
.hero-art .avatar-3d > .face { filter: none; }
.session-companion > .avatar-3d { width: 190px; margin: 10px auto 14px; }
.result-top > .avatar-3d { width: 150px; margin: 0 auto 12px; }
.avatar-portrait .avatar-3d { width: 210px; }
.coach .avatar-3d { width: 150px; flex: 0 0 auto; }
.lesson-end > .avatar-3d { width: 180px; }
@media (max-width: 1000px) { .session-companion > .avatar-3d { width: 70px; margin: 0; grid-column: 1; grid-row: 1 / 4; } }
@media (max-width: 720px) { .avatar-portrait .avatar-3d { width: 180px; } .coach .avatar-3d { width: 120px; } }

/* Botó per sentir parlar l'avatar a la portada */
.hero-art .hero-talk { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 12px; font-weight: 700; color: #2b1d49; background: #fff; box-shadow: 0 8px 22px #2b1d4940; cursor: pointer; }
.hero-art .hero-talk:hover { transform: translateX(-50%) translateY(-2px); }
.hero-art .hero-talk svg { width: 15px; height: 15px; }

/* ============ Trucada ============ */
.call-main { min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 90% at 50% 0%, #4a2a9a 0%, #1a1336 55%, #0d0a1f 100%); color: #fff; }
.call-screen { position: relative; max-width: 620px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 22px; text-align: center; isolation: isolate; }
.call-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .3s; }
.call-screen.flash-good::after { background: radial-gradient(60% 50% at 50% 35%, #2ed3b755, transparent); animation: call-flash 1.2s ease-out; }
.call-screen.flash-bad::after { background: radial-gradient(60% 50% at 50% 35%, #ffb54740, transparent); animation: call-flash 1.2s ease-out; }
@keyframes call-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.call-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #ffffffb3; flex-wrap: wrap; }
.call-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; }
.call-live i { width: 8px; height: 8px; border-radius: 50%; background: #2ed3b7; box-shadow: 0 0 0 0 #2ed3b7; animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px #2ed3b700; } 100% { box-shadow: 0 0 0 0 #2ed3b700; } }
.call-steps { display: inline-flex; gap: 5px; } .call-steps i { width: 22px; height: 5px; border-radius: 3px; background: #ffffff2a; } .call-steps i.done { background: #2ed3b7; } .call-steps i.now { background: #fff; }
.call-person { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin: 26px 0 10px; display: grid; place-items: center; }
.call-avatar { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #ffffff30, #ffffff08 70%); box-shadow: 0 0 0 4px #ffffff22, 0 30px 70px #00000066; display: grid; place-items: center; }
.call-avatar > .avatar-3d, .call-avatar > .face, .call-avatar > svg { width: 100%; height: 100%; }
.call-rings { position: absolute; inset: 0; } .call-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ffffff; opacity: 0; }
[data-phase="speaking"] .call-rings i { border-color: #b69cff; animation: ring 2.2s infinite; }
[data-phase="listening"] .call-rings i { border-color: #2ed3b7; animation: ring 1.4s infinite; }
.call-rings i:nth-child(2) { animation-delay: .5s !important; } .call-rings i:nth-child(3) { animation-delay: 1s !important; }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
[data-phase="thinking"] .call-avatar { animation: think 1.4s ease-in-out infinite; }
@keyframes think { 50% { box-shadow: 0 0 0 4px #ffb54777, 0 30px 70px #00000066; } }
.call-name { margin: 6px 0 2px; font-size: 28px; letter-spacing: -.5px; color: #fff; }
.call-status { margin: 0 0 14px; font-size: 13px; color: #ffffffb3; min-height: 18px; }
[data-phase="listening"] .call-status { color: #2ed3b7; font-weight: 700; }
.call-caption { width: 100%; padding: 16px 18px; border-radius: 22px; background: #ffffff12; border: 1px solid #ffffff1f; backdrop-filter: blur(10px); }
.call-caption p { margin: 0; font-size: 17px; line-height: 1.45; white-space: pre-line; color: #fff; }
.call-caption .call-translation { margin-top: 8px; font-size: 12px; color: #ffffff99; }
.call-you { width: 100%; margin-top: 10px; padding: 12px 16px; border-radius: 18px; background: #2ed3b71a; border: 1px solid #2ed3b74d; text-align: left; }
.call-you-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #2ed3b7; font-weight: 800; }
.call-you p { margin: 4px 0 0; font-size: 16px; color: #fff; }
.call-you .word.ok { color: #2ed3b7; } .call-you .word.miss { color: #ffb547; text-decoration: underline dotted; }
.call-you small { display: block; margin-top: 6px; color: #ffffffb3; font-size: 11px; }
.call-meter { height: 6px; margin-top: 8px; border-radius: 3px; background: #ffffff1f; overflow: hidden; }
.call-meter span { display: block; height: 100%; border-radius: 3px; background: #2ed3b7; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.call-meter[data-level="mid"] span { background: #ffd166; } .call-meter[data-level="low"] span { background: #ff8a5c; }
.call-hint { width: 100%; margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 18px; background: #ffb5471f; border: 1px solid #ffb5474d; text-align: left; }
.call-hint .icon { width: 20px; height: 20px; color: #ffb547; flex: none; }
.call-hint p { margin: 0; font-size: 12px; color: #ffffffb3; } .call-hint strong { font-size: 15px; color: #fff; }
.call-controls { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.call-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; align-content: center; gap: 2px; background: #ffffff1c; color: #fff; cursor: pointer; transition: transform .15s, background .2s; }
.call-btn:hover { transform: translateY(-2px); background: #ffffff2e; } .call-btn .icon { width: 20px; height: 20px; } .call-btn small { font-size: 9px; color: #ffffffb3; }
.call-btn.mic { width: 82px; height: 82px; background: linear-gradient(135deg, #7c5cff, #ff5ca8); box-shadow: 0 12px 30px #7c5cff66; } .call-btn.mic .icon { width: 32px; height: 32px; }
.call-btn.mic.listening { background: #2ed3b7; box-shadow: 0 0 0 0 #2ed3b7aa; animation: mic-pulse 1.2s infinite; }
.call-btn.mic:disabled { opacity: .5; cursor: wait; }
@keyframes mic-pulse { 70% { box-shadow: 0 0 0 18px #2ed3b700; } 100% { box-shadow: 0 0 0 0 #2ed3b700; } }
.call-btn.end { background: #ff4d6d; } .call-btn.end:hover { background: #ff2e55; } .call-btn.end small { color: #fff; }
.call-note { margin: 14px 0 0; font-size: 10px; color: #ffffff73; max-width: 440px; }
.session-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .call-person { width: min(230px, 62vw); margin-top: 16px; } .call-name { font-size: 24px; } .call-caption p { font-size: 15px; } .call-btn { width: 52px; height: 52px; } .call-btn.mic { width: 72px; height: 72px; } .call-title { display: none; } }
@media (prefers-reduced-motion: reduce) { .call-rings i, .call-btn.mic.listening, [data-phase="thinking"] .call-avatar, .call-live i { animation: none !important; } }

/* ============ Ràfega: Digues-ho ============ */
.arcade-modes { grid-template-columns: repeat(3, 1fr); }
.arcade-mode.hot { background: linear-gradient(160deg, #7c5cff55, #ff5ca844); border-color: #ff5ca866; }
.arcade-stage.speak .say-target { font-size: clamp(26px, 5vw, 40px); }
.arcade-mic { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px auto 6px; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.arcade-mic .icon { width: 74px; height: 74px; padding: 20px; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #ff5ca8); box-shadow: 0 12px 30px #7c5cff66; }
.arcade-mic.listening .icon { background: #2ed3b7; animation: mic-pulse 1.2s infinite; }
.arcade-heard { min-height: 26px; font-size: 17px; margin: 6px 0 12px; }
.arcade-heard .word.ok { color: #2ed3b7; } .arcade-heard .word.miss { color: #ffb547; text-decoration: underline dotted; } .arcade-heard b { margin-left: 6px; color: var(--amber); }
.arcade-stage.speak .arcade-question .text-link { display: inline-flex; margin: 4px auto 0; color: #d8c9ff; }

/* ============ Minijocs ============ */
.mini-card.lilac-card, .mini-tile.lilac-card, .lilac-shell { --mg: linear-gradient(135deg, #6d4dff, #b44dff); }
.mini-card.peach-card, .mini-tile.peach-card, .peach-shell { --mg: linear-gradient(135deg, #ff7a45, #ff4fa3); }
.mini-card.mint-card, .mini-tile.mint-card, .mint-shell { --mg: linear-gradient(135deg, #19c6a7, #3f9bff); }
.mini-card.sky-card, .mini-tile.sky-card, .sky-shell { --mg: linear-gradient(135deg, #3f9bff, #6d4dff); }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mini-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.mini-card::before { content: ''; position: absolute; inset: 0; opacity: .1; background: var(--mg); pointer-events: none; }
.mini-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px #6d4dff22; }
.mini-card h2 { margin: 0 0 4px; font-size: 21px; } .mini-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.mini-card > .button { grid-column: 1 / -1; justify-self: start; position: relative; }
.mini-meta { display: flex; gap: 6px; flex-wrap: wrap; } .mini-meta .icon { width: 13px; height: 13px; }
.mini-emoji { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--mg); font-size: 24px; box-shadow: 0 8px 20px #6d4dff33; }
.mini-emoji.big { width: 64px; height: 64px; font-size: 34px; border-radius: 20px; }
.mini-note { margin-top: 18px; font-size: 12px; }
.mini-strip { margin: 26px 0; } .mini-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mini-tile { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; transition: transform .2s; }
.mini-tile::before { content: ''; position: absolute; inset: 0; opacity: .1; background: var(--mg); }
.mini-tile:hover { transform: translateY(-3px) rotate(-1deg); } .mini-tile strong { font-size: 13px; position: relative; } .mini-tile small { color: var(--muted); font-size: 10px; position: relative; }
.mini-result { text-align: center; margin-bottom: 22px; display: grid; justify-items: center; gap: 8px; }
.mini-result .arcade-final { color: var(--purple); }
.mini-result-emoji { font-size: 44px; animation: float 3s ease-in-out infinite; }
.mini-shell { max-width: 820px; margin: 0 auto; padding: 22px; border-radius: 30px; color: #fff; background: radial-gradient(120% 120% at 50% 0%, #3a1f7a, #15122b 70%); box-shadow: 0 30px 80px #1b0f4466; position: relative; overflow: hidden; isolation: isolate; }
.mini-shell::before { content: ''; position: absolute; inset: -30% -30% auto; height: 70%; background: var(--mg); opacity: .35; filter: blur(60px); z-index: -1; }
.mini-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mini-title span { font-size: 28px; } .mini-title h1 { margin: 0; font-size: 24px; color: #fff; }
.mini-hud { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.mini-time { font-size: 18px; min-width: 52px; } .mini-score { flex: 1; text-align: center; font-size: 30px; }
.mini-score.bump { animation: bump .35s; } @keyframes bump { 40% { transform: scale(1.3); color: #ffd166; } }
.mini-combo { padding: 5px 10px; border-radius: 12px; background: #ffffff1f; } .mini-combo.hot { background: linear-gradient(135deg, #ff7a45, #ff4fa3); animation: bump .4s; }
.mini-quit, .mini-skip { border: 0; background: #ffffff1a; color: #ffffffcc; border-radius: 12px; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.mini-timer { height: 7px; margin: 10px 0 4px; border-radius: 4px; background: #ffffff1a; overflow: hidden; } .mini-timer span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #19c6a7, #ffb03b, #ff4fa3); }
.mini-goal { text-align: center; color: #ffffffb3; font-size: 13px; margin: 10px 0; }
.mini-target { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .mini-target small { color: #ffffffb3; } .mini-target strong { font-size: clamp(20px, 4vw, 28px); }
.mini-hear { border: 0; width: 38px; height: 38px; border-radius: 50%; background: #ffffff1f; font-size: 17px; cursor: pointer; }
.mini-board { position: relative; } .mini-board.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.mini-float { position: absolute; z-index: 5; transform: translateX(-50%); font-weight: 900; font-size: 20px; color: #2ed3b7; pointer-events: none; animation: float-up .9s ease-out forwards; text-shadow: 0 2px 10px #0008; }
.mini-float.bad { color: #ff8a5c; } @keyframes float-up { to { transform: translate(-50%, -60px); opacity: 0; } }
/* Parelles */
.pairs-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.pair-card { position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1); font: inherit; }
.pair-card > span { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; border-radius: 16px; backface-visibility: hidden; font-weight: 800; font-size: clamp(12px, 2vw, 16px); text-align: center; line-height: 1.2; }
.pair-back { background: linear-gradient(135deg, #6d4dff, #b44dff); color: #ffffff99; font-size: 28px !important; box-shadow: inset 0 0 0 2px #ffffff26, 0 8px 18px #0005; }
.pair-card:hover:not(.open) { transform: translateY(-3px); }
.pair-front { transform: rotateY(180deg); background: #fff; color: #251d49; box-shadow: 0 8px 18px #0005; }
.pair-card.meaning .pair-front { background: #fff6e8; }
.pair-card.open { transform: rotateY(180deg); }
.pair-card.matched .pair-front { background: #2ed3b7; color: #fff; animation: matched .5s; }
@keyframes matched { 50% { transform: rotateY(180deg) scale(1.08); } }
/* Globus */
.balloon-board { height: min(440px, 58vh); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #ffffff0d, #ffffff03); border: 1px solid #ffffff1a; }
.balloon { position: absolute; top: 0; width: 112px; height: 132px; margin-left: -10px; border: 0; padding: 0 0 22px; cursor: pointer; background: none; color: #fff; font: inherit; will-change: transform; }
.balloon span { display: grid; place-items: center; width: 112px; height: 110px; padding: 10px; border-radius: 50% 50% 46% 46%; background: var(--b); box-shadow: inset -10px -12px 0 #0002, inset 8px 8px 0 #fff3, 0 10px 20px #0004; font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; }
.balloon::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 24px; background: #ffffff80; }
.balloon.c0 { --b: #ff4fa3; } .balloon.c1 { --b: #6d4dff; } .balloon.c2 { --b: #19c6a7; } .balloon.c3 { --b: #ff8a3d; } .balloon.c4 { --b: #3f9bff; }
.balloon.popped span { animation: pop .3s forwards; } @keyframes pop { to { transform: scale(1.6); opacity: 0; } }
.balloon.wrong span { animation: wobble .4s; } @keyframes wobble { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
/* Sí o no */
.swipe-board { display: grid; justify-items: center; gap: 18px; padding: 20px 0 6px; }
.swipe-card { width: min(420px, 100%); min-height: 190px; display: grid; place-content: center; gap: 8px; padding: 24px; border-radius: 26px; background: #fff; color: #251d49; text-align: center; box-shadow: 0 20px 50px #0006; }
.swipe-card strong { font-size: clamp(24px, 5vw, 34px); } .swipe-card span { color: #9b94b8; } .swipe-card em { font-style: normal; font-size: 20px; font-weight: 700; color: #6d4dff; }
.swipe-card.enter { animation: card-in .25s ease-out; } @keyframes card-in { from { transform: translateY(20px) scale(.95); opacity: 0; } }
.swipe-card.leave-right { transform: translateX(120px) rotate(12deg); opacity: 0; transition: .22s; } .swipe-card.leave-left { transform: translateX(-120px) rotate(-12deg); opacity: 0; transition: .22s; }
.swipe-actions { display: flex; gap: 26px; }
.swipe-btn { width: 78px; height: 78px; border-radius: 50%; border: 0; font-size: 32px; font-weight: 900; color: #fff; cursor: pointer; transition: transform .15s; }
.swipe-btn:hover { transform: scale(1.08); } .swipe-btn:active { transform: scale(.94); }
.swipe-btn.no { background: #ff4d6d; box-shadow: 0 10px 26px #ff4d6d66; } .swipe-btn.yes { background: #19c6a7; box-shadow: 0 10px 26px #19c6a766; }
.swipe-feedback { min-height: 22px; margin: 0; font-weight: 800; } .swipe-feedback.good { color: #2ed3b7; } .swipe-feedback.bad { color: #ffb547; }
/* Ordena */
.order-board { display: grid; gap: 16px; padding-top: 6px; }
.order-answer { min-height: 66px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 12px; border-radius: 18px; border: 2px dashed #ffffff33; transition: background .3s, border-color .3s; }
.order-answer.solved { background: #2ed3b733; border-color: #2ed3b7; }
.order-empty { color: #ffffff66; font-size: 13px; }
.order-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 56px; }
.order-tile { border: 0; padding: 11px 16px; border-radius: 14px; background: #fff; color: #251d49; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 5px 0 #c9c2e6; transition: transform .12s; }
.order-tile:hover { transform: translateY(-2px); } .order-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 #c9c2e6; }
.order-tile.used { visibility: hidden; } .order-tile.placed { background: #ffd166; box-shadow: 0 5px 0 #c99a2e; animation: card-in .2s; }
.mini-skip { justify-self: center; }
@media (max-width: 760px) { .mini-grid { grid-template-columns: 1fr; } .mini-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini-shell { padding: 16px; border-radius: 24px; } .pairs-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .balloon, .balloon span { width: 92px; } .balloon span { height: 92px; font-size: 12px; } .balloon { height: 114px; } }
@media (prefers-reduced-motion: reduce) { .pair-card, .swipe-card { transition: none !important; } .mini-score.bump, .mini-combo.hot, .mini-result-emoji { animation: none !important; } }

/* ============ Vestidor ============ */
.avatar-card > .button.ghost { margin-top: 6px; }
.wardrobe-heading h2 { margin: 10px 0 8px; font-size: 29px; letter-spacing: -.8px; }
.wardrobe-heading p, .wardrobe-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.wardrobe-layout { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.2fr); gap: 24px; margin-top: 22px; }
.wardrobe-preview > .avatar-3d, .wardrobe-preview > .face { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.wardrobe-preview > p { color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 10px; text-align: center; }
.wardrobe-options fieldset { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.wardrobe-options legend { margin-bottom: 9px; font-size: 12px; font-weight: 700; }
.wardrobe-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wardrobe-item { position: relative; text-align: left; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); cursor: pointer; font: inherit; transition: border-color .2s, transform .15s; }
.wardrobe-item:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--purple); }
.wardrobe-item strong { display: block; font-size: 12px; font-weight: 700; }
.wardrobe-item small { display: block; font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.wardrobe-swatch { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.wardrobe-item.equipped { border-color: var(--purple); background: var(--purple-soft); }
.wardrobe-item:disabled { opacity: .55; cursor: not-allowed; }
.wardrobe-item:focus-visible { outline: 3px solid #bea3d7; outline-offset: 3px; }
.wardrobe-goal { padding: 15px; border-radius: 15px; background: var(--purple-soft); }
.wardrobe-goal strong { font-size: 12px; }
.wardrobe-goal p { font-size: 11px; line-height: 1.6; margin-top: 8px; color: var(--muted); }
.wardrobe-goal progress { display: block; width: 100%; height: 7px; margin-top: 12px; accent-color: var(--purple); }
.wardrobe-note { margin-top: 18px; font-size: 10px; }
@media (max-width: 620px) { .wardrobe-layout { grid-template-columns: 1fr; } .wardrobe-preview { max-width: 230px; margin: 0 auto; width: 100%; } }
.mini-result .button { white-space: nowrap; }
.plan-buy { display: grid; gap: 8px; }
.plan-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.plan-secure .icon { width: 13px; height: 13px; }

/* ============ Compte, amics i converses de grup ============ */
.account-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 12px; box-shadow: 0 8px 20px #6d4dff33; }
.account-pill .icon { width: 15px; height: 15px; }
.profile-dot.has-face { padding: 0; overflow: hidden; display: grid; place-items: center; }
.profile-dot.has-face svg { width: 100%; height: 100%; }
.user-face { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--purple-soft); flex: none; }
.user-face svg { width: 100%; height: 100%; } .user-face.xs { width: 34px; height: 34px; } .user-face.sm { width: 52px; height: 52px; } .user-face.xl { width: 120px; height: 120px; box-shadow: 0 14px 34px #6d4dff33; }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(120% 90% at 50% 0%, #efe9ff, var(--bg)); }
.auth-card { width: min(460px, 100%); margin: 0 auto; padding: 30px; }
.auth-hero h1 { margin: 8px 0; font-size: 30px; letter-spacing: -1px; } .auth-hero p { color: var(--muted); margin: 0 0 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-soft); margin-bottom: 18px; }
.auth-tabs button { border: 0; padding: 10px; border-radius: 11px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.auth-tabs button.active { background: var(--surface-solid, #fff); color: var(--ink); box-shadow: 0 4px 12px #0000000f; }
.auth-form { display: grid; gap: 12px; } .auth-message { margin: 0; color: #d6336c; font-size: 13px; font-weight: 600; }
.local-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 12px; border-radius: 14px; background: var(--peach); color: var(--peach-ink); font-size: 12px; } .local-note .icon { width: 16px; height: 16px; flex: none; }
.auth-back { text-align: center; margin: 14px 0 0; }
.profile-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.profile-card { text-align: center; display: grid; justify-items: center; gap: 4px; } .profile-card h2 { margin: 10px 0 0; } .profile-card .muted { margin: 0; }
.profile-bio { margin: 8px 0; font-size: 14px; } .sync-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mint-ink); } .sync-note .icon { width: 14px; height: 14px; }
.profile-form { display: grid; gap: 12px; } .profile-form h3 { margin: 0; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; } .avatar-picker legend { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.avatar-option { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; font-size: 11px; }
.avatar-option input { position: absolute; opacity: 0; pointer-events: none; } .avatar-option:has(input:checked) { border-color: var(--purple); background: var(--purple-soft); }
.avatar-option:has(input:focus-visible) { outline: 3px solid #bea3d7; }
.social-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.social-main, .social-side { display: grid; gap: 20px; } .social-side h3, .social-main h2 { margin: 0 0 12px; }
.social-empty { display: flex; gap: 22px; align-items: center; padding: 34px; } .social-empty > .icon { width: 64px; height: 64px; color: var(--purple); flex: none; } .social-empty h1 { margin: 0 0 8px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .user-chip span { display: grid; } .user-chip strong { font-size: 14px; } .user-chip small { color: var(--muted); font-size: 11px; }
.friend-list, .room-list { display: grid; gap: 8px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .friend-row:last-child { border-bottom: 0; }
.friend-row > p { flex-basis: 100%; margin: -4px 0 0 44px; font-size: 12px; } .row-actions { display: flex; gap: 6px; }
.search-row { display: flex; gap: 8px; margin-bottom: 10px; } .search-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.search-row .icon { width: 16px; height: 16px; }
.room-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, border-color .2s; }
.room-row:hover { transform: translateY(-2px); border-color: var(--purple); } .room-row > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.room-row small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-flag { font-size: 26px; } .room-row > .icon { width: 18px; height: 18px; color: var(--muted); }
.room-form { display: grid; gap: 12px; padding: 16px; margin-bottom: 14px; border-radius: 18px; background: var(--surface-soft); }
.friend-picker { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; } .friend-picker legend { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.friend-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--surface); cursor: pointer; }
.empty-line { margin: 6px 0; }
.room-panel { min-height: 60vh; } .room-panel .chat-log { max-height: 60vh; }
.chat-message.teacher .message-bubble { background: linear-gradient(135deg, #f0eaff, #ffeaf4); color: #2b1d49; border: 1px solid #e3d6ff; }
.chat-message.teacher .message-name { display: inline-flex; align-items: center; gap: 5px; color: var(--purple); } .chat-message.teacher .message-name .icon { width: 13px; height: 13px; }
@media (max-width: 900px) { .profile-layout, .social-layout { grid-template-columns: 1fr; } .social-empty { flex-direction: column; text-align: center; } }

/* ============ Jocs arcade (canvas) ============ */
.mini-section { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font-size: 20px; } .mini-section .icon { width: 20px; height: 20px; color: var(--purple); }
.arcade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.arcade-card { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 230px; padding: 20px; border: 0; border-radius: 26px; text-align: left; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #3a1f7a, #15122b 75%); box-shadow: 0 20px 46px #1b0f4433; cursor: pointer; font: inherit; isolation: isolate; transition: transform .2s, box-shadow .2s; }
.arcade-card::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 75%; height: 90%; border-radius: 50%; background: var(--mg); opacity: .55; filter: blur(30px); z-index: -1; transition: opacity .3s; }
.arcade-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 28px 60px #6d4dff44; } .arcade-card:hover::before { opacity: .85; }
.arcade-card-emoji { font-size: 46px; filter: drop-shadow(0 8px 14px #0006); }
.arcade-card-body { display: grid; gap: 6px; align-content: start; } .arcade-card strong { font-size: 22px; } .arcade-card small { color: #ffffffb8; font-size: 12px; line-height: 1.5; }
.arcade-card .pill { background: #ffffff22; color: #fff; } .arcade-card .pill.peach { background: #ffb03b33; color: #ffd28a; }
.arcade-card-play { position: absolute; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mg); box-shadow: 0 8px 20px #0005; } .arcade-card-play .icon { width: 20px; height: 20px; }
.arcade-shell { max-width: 900px; }
.arcade-layout { display: grid; grid-template-columns: auto minmax(180px, 230px); gap: 18px; justify-content: center; align-items: start; }
.canvas-wrap { position: relative; display: grid; place-items: center; min-width: 0; width: min(100%, 520px); }
.canvas-wrap canvas { display: block; border-radius: 16px; box-shadow: 0 0 0 2px #ffffff1f, 0 20px 50px #0008; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #0b0820a6; border-radius: 16px; backdrop-filter: blur(3px); z-index: 2; }
.game-overlay[hidden] { display: none; }
.overlay-card { width: min(330px, 100%); padding: 22px; border-radius: 22px; background: #fff; color: #251d49; text-align: center; box-shadow: 0 20px 50px #0008; animation: card-in .25s ease-out; }
.overlay-card h3 { margin: 6px 0 8px; font-size: 22px; } .overlay-card p { margin: 0 0 6px; color: #5d5680; } .overlay-card.mini { width: auto; padding: 14px 22px; }
.overlay-card.good h3 { color: #13a37f; } .overlay-card.bad h3 { color: #d9822b; }
.quiz-options { display: grid; gap: 8px; margin-top: 12px; }
.quiz-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 2px solid #e6e1f7; background: #faf8ff; color: #251d49; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-align: left; }
.quiz-option:hover { border-color: #6d4dff; transform: translateY(-1px); } .quiz-option kbd { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #6d4dff; color: #fff; font-size: 12px; }
.game-side { display: grid; gap: 10px; }
.side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-box { padding: 12px 14px; border-radius: 16px; background: #ffffff12; border: 1px solid #ffffff1c; } .side-box small { display: block; font-size: 10px; letter-spacing: 1.2px; color: #ffffff99; font-weight: 800; margin-bottom: 4px; }
.side-box strong { font-size: 24px; color: #fff; display: inline-block; } .side-box strong.bump { animation: bump .35s; }
.mini-canvas { display: block; width: 100%; max-width: 160px; height: auto; aspect-ratio: 12 / 7; }
.line-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 40px; }
.line-words li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #ffffff12; } .line-words li span { color: #ffffff99; text-align: right; }
.line-words li.fresh { animation: card-in .3s ease-out; } .line-words li.fresh strong { color: #ffd166; }
.side-help { margin: 0; font-size: 11px; line-height: 1.6; color: #ffffff8c; } .side-help b { color: #ffd166; }
.target-box strong { font-size: 22px; line-height: 1.2; } .target-box .text-link { color: #d8c9ff; margin-top: 6px; }
.spell { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .spell span { display: grid; place-items: center; width: 26px; height: 32px; border-radius: 8px; background: #ffffff14; font-weight: 900; font-size: 17px; color: #fff; }
.spell span.got { background: #2ed3a0; } .spell span.now { box-shadow: inset 0 0 0 2px #ffd166; }
.touch-pad { display: none; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.touch-pad button { min-width: 54px; height: 54px; border: 0; border-radius: 16px; background: #ffffff1f; color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.touch-pad button:active { background: #ffffff40; transform: scale(.95); }
.touch-pad button[data-g="hard"], .touch-pad button[data-g="fire"] { background: linear-gradient(135deg, #7c5cff, #ff5ca8); }
.touch-pad button[data-g="quit"] { background: #ff4d6d66; }
@media (hover: none), (max-width: 760px) { .touch-pad { display: flex; } }
@media (max-width: 760px) {
  .arcade-grid { grid-template-columns: 1fr; } .arcade-card { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; } .arcade-card-play { position: static; }
  .arcade-layout { grid-template-columns: 1fr; } .game-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-side .side-help, .game-side .words-box, .game-side .target-box { grid-column: 1 / -1; } .game-side .side-box:has([data-preview]) { display: none; }
  .side-box strong { font-size: 18px; } .side-help { display: none; }
}
.arcade-layout .canvas-wrap { width: min(520px, 56vw); }
@media (max-width: 760px) { .arcade-layout .canvas-wrap { width: 100%; } .arcade-shell .mini-title { margin-bottom: 6px; } .arcade-shell .mini-title h1 { font-size: 19px; } .arcade-shell .touch-pad { position: sticky; bottom: 76px; z-index: 3; padding: 8px; border-radius: 20px; background: #15122bcc; backdrop-filter: blur(8px); } .arcade-shell .game-side { order: 2; } }

/* ============ Navegació 3.0: barra superior + dock flotant + pestanyes ============ */
.top-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.brand-mark { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 900; font-size: 19px; letter-spacing: -.6px; }
.brand-mark img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 6px 16px #6d4dff40; }
.brand-mark span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions .stat-pill, .rank-pill, .premium-link, .premium-badge, .icon-round { height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.top-actions .stat-pill { padding: 0 12px; } .top-actions .stat-pill .icon { width: 16px; height: 16px; color: #ff7a45; }
.rank-pill { padding: 0 12px 0 4px; } .rank-text { display: grid; line-height: 1.1; } .rank-text small { font-size: 10px; color: var(--muted); font-weight: 700; }
.rank-ring { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#7c5cff calc(var(--p) * 1%), var(--line) 0); }
.rank-ring span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 14px; }
.premium-link { padding: 0 14px; border: 0; color: #fff; background: var(--grad); box-shadow: 0 8px 18px #ff4fa333; } .premium-link .icon { width: 15px; height: 15px; }
.premium-badge { width: 40px; justify-content: center; border: 0; color: #fff; background: var(--grad); } .premium-badge .icon { width: 17px; height: 17px; }
.icon-round { width: 40px; justify-content: center; cursor: pointer; padding: 0; } .icon-round .icon { width: 18px; height: 18px; } .icon-round:hover { border-color: var(--purple); }
.top-actions .language-pill { height: 40px; } .top-actions .profile-dot { width: 40px; height: 40px; }
.page-frame { max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 130px; }
.space-tabs { position: sticky; top: 72px; z-index: 15; display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; margin: 0 auto 22px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px #33304b12; scrollbar-width: none; }
.space-tabs a { padding: 9px 18px; border-radius: 999px; color: var(--muted); font-weight: 800; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
.space-tabs a:hover { color: var(--ink); } .space-tabs a.active { color: #fff; background: var(--grad); box-shadow: 0 6px 16px #6d4dff40; }
.dock { position: fixed; z-index: 30; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 18px 50px #1b0f4433, 0 2px 0 #ffffff80 inset; }
.dock-item { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 70px; padding: 7px 10px 6px; border-radius: 20px; color: var(--muted); transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s, background .2s; }
.dock-icon { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; transition: background .2s; } .dock-icon .icon { width: 23px; height: 23px; }
.dock-label { font-size: 11px; font-weight: 800; }
.dock-item:hover { transform: translateY(-4px); color: var(--ink); }
.dock-item.active { color: var(--purple); } .dock-item.active .dock-icon { background: var(--purple-soft); }
.dock-item.active::after { content: ''; position: absolute; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }
.dock-item.main { margin: 0 6px; } .dock-item.main .dock-icon { width: 60px; height: 60px; margin-top: -26px; border-radius: 22px; color: #fff; background: var(--grad); box-shadow: 0 12px 28px #ff4fa355, 0 0 0 5px color-mix(in srgb, var(--surface) 90%, transparent); }
.dock-item.main .dock-icon .icon { width: 28px; height: 28px; } .dock-item.main.active { color: var(--ink); } .dock-item.main.active::after { background: #ff4fa3; }
.dock-item.main:hover .dock-icon { transform: rotate(-6deg) scale(1.05); }
:root[data-theme="dark"] .dock { box-shadow: 0 18px 50px #0008; }
.page-frame .footer-note { margin-top: 30px; }
@media (max-width: 860px) {
  .brand-mark span { display: none; } .rank-text small, .lang-name, .premium-link span { display: none; } .premium-link { width: 40px; padding: 0; justify-content: center; }
  .top-nav { padding: 10px 14px; } .top-actions { gap: 6px; } .space-tabs { top: 62px; }
}
@media (max-width: 520px) {
  .top-actions .stat-pill, .icon-round { display: none; } .rank-pill { padding-right: 10px; } .account-pill span { display: none; } .account-pill { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .dock { left: 10px; right: 10px; transform: none; justify-content: space-between; padding: 6px 6px; border-radius: 24px; } .dock-item { min-width: 0; flex: 1; padding: 6px 2px 5px; } .dock-icon { width: 34px; height: 34px; } .dock-label { font-size: 10px; }
  .dock-item.main .dock-icon { width: 54px; height: 54px; margin-top: -22px; } .page-frame { padding-bottom: 120px; }
  .space-tabs a { padding: 8px 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .dock-item, .dock-icon { transition: none; } .dock-item:hover { transform: none; } }

/* ============ Introducció «Xenoglosia» ============ */
.intro-main { min-height: 100vh; min-height: 100dvh; }
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 50% 40%, #2a1666 0%, #120a31 45%, #07051a 100%); isolation: isolate; }
.intro-sky i { position: absolute; left: var(--sx); top: var(--sy); width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .2; animation: twinkle 3s ease-in-out var(--sd) infinite; }
@keyframes twinkle { 50% { opacity: .9; transform: scale(1.8); } }
.intro-aurora { position: absolute; inset: -30%; z-index: -1; background: conic-gradient(from 0deg at 50% 50%, #6d4dff55, #ff4fa355, #ffb03b40, #19c6a755, #6d4dff55); filter: blur(70px); opacity: 0; will-change: transform, opacity; animation: aurora-in 2s ease-out 1.6s forwards, spin 40s linear 1.6s infinite; }
@keyframes aurora-in { to { opacity: .9; } } @keyframes spin { to { transform: rotate(360deg); } }
.intro-skip { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px; z-index: 3; border: 1px solid #ffffff33; background: #ffffff14; color: #ffffffcc; padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; animation: fade-in .5s ease .4s forwards; }
.intro-skip:hover { background: #ffffff26; color: #fff; }
.intro-words { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-word { position: absolute; font-weight: 900; font-size: clamp(18px, 3.4vw, 40px); white-space: nowrap; color: #fff; text-shadow: 0 0 24px #b69cff; opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.3); animation: converge 1.55s cubic-bezier(.55, 0, .75, .25) var(--d) forwards; }
.intro-word:nth-child(3n) { color: #ffd166; text-shadow: 0 0 24px #ffb03b; } .intro-word:nth-child(3n+1) { color: #ff9ad0; text-shadow: 0 0 24px #ff4fa3; }
@keyframes converge { 0% { opacity: 0; } 18% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.15); } }
.intro-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-burst i { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 3px solid #fff; opacity: 0; box-shadow: 0 0 40px #b69cff, inset 0 0 30px #ff4fa3; animation: burst 1.2s ease-out 1.65s forwards; }
.intro-burst i:nth-child(2) { animation-delay: 1.8s; border-color: #ffd166; } .intro-burst i:nth-child(3) { animation-delay: 1.95s; border-color: #ff4fa3; }
@keyframes burst { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(9); } }
.intro-center { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; padding: 24px 18px; max-width: 760px; }
.intro-logo { width: clamp(72px, 12vw, 104px); height: auto; border-radius: 30%; box-shadow: 0 0 0 6px #ffffff1f, 0 20px 60px #6d4dffaa; opacity: 0; transform: scale(0) rotate(-200deg); animation: logo-pop .9s cubic-bezier(.2, 1.6, .4, 1) 1.7s forwards, logo-float 4s ease-in-out 3s infinite; }
@keyframes logo-pop { to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes logo-float { 50% { transform: translateY(-8px) rotate(4deg); } }
.intro-title { display: flex; justify-content: center; margin: 22px 0 10px; font-size: clamp(38px, 10.5vw, 104px); line-height: 1; font-weight: 950; letter-spacing: -.03em; }
.intro-title span { display: inline-block; opacity: 0; background: linear-gradient(110deg, #fff 20%, #ffd166 40%, #ff9ad0 55%, #b69cff 70%, #fff 90%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(-90px) rotate(-25deg) scale(.4); animation: letter-drop .7s cubic-bezier(.2, 1.7, .4, 1) calc(2.05s + var(--i) * .065s) forwards, title-shimmer 4s linear 3.4s infinite; filter: drop-shadow(0 6px 22px #6d4dff99); }
@keyframes letter-drop { to { opacity: 1; transform: none; } } @keyframes title-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.intro-def { margin: 4px 0 6px; font-size: clamp(15px, 2.4vw, 20px); color: #ffffffd9; clip-path: inset(0 100% 0 0); animation: reveal 1.1s cubic-bezier(.6, 0, .2, 1) 3s forwards; }
.intro-phon { font-family: ui-serif, Georgia, serif; font-style: italic; color: #ffd166; } .intro-def em { color: #ffffff99; }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
.intro-line { margin: 0; font-size: clamp(15px, 2.4vw, 20px); color: #ffffffb3; opacity: 0; transform: translateY(14px); animation: rise .7s ease 3.9s forwards; } .intro-line strong { color: #fff; }
@keyframes rise { to { opacity: 1; transform: none; } } @keyframes fade-in { to { opacity: 1; } }
.intro-cast { display: flex; justify-content: center; gap: clamp(5px, 1.8vw, 16px); margin: 44px 0 26px; }
.intro-face { position: relative; flex: none; width: clamp(40px, 9vw, 70px); height: clamp(40px, 9vw, 70px); border-radius: 50%; overflow: visible; opacity: 0; transform: scale(0) translateY(30px); animation: pop-in .6s cubic-bezier(.2, 1.7, .4, 1) calc(4.4s + var(--i) * .09s) forwards, bob 2.6s ease-in-out calc(5.2s + var(--i) * .2s) infinite; }
.intro-face svg { width: 100%; height: 100%; border-radius: 50%; background: #ffffff1f; box-shadow: 0 0 0 3px #ffffff33, 0 10px 24px #0007; }
.intro-face b { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%) scale(0); padding: 3px 8px; border-radius: 10px 10px 10px 2px; background: #fff; color: #2b1d49; font-size: 11px; white-space: nowrap; animation: bubble-in .4s cubic-bezier(.2, 1.7, .4, 1) calc(5s + var(--i) * .12s) forwards; }
@keyframes pop-in { to { opacity: 1; transform: none; } } @keyframes bubble-in { to { transform: translateX(-50%) scale(1); } }
@keyframes bob { 50% { transform: translateY(-7px); } }
.intro-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(20px); animation: rise .7s ease 5.4s forwards; }
.intro-go { padding: 17px 30px; font-size: 18px; border-radius: 999px; color: #fff; background: var(--grad); box-shadow: 0 14px 40px #ff4fa366, 0 0 0 0 #ff4fa366; animation: glow 2.2s ease-in-out 6.2s infinite; }
@keyframes glow { 50% { box-shadow: 0 14px 40px #ff4fa366, 0 0 0 14px #ff4fa300; transform: scale(1.03); } }
.intro-more { border: 0; background: none; color: #ffffffcc; font: inherit; font-weight: 700; padding: 17px 18px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .intro-more:hover { color: #fff; }
.intro-proof { margin: 18px 0 0; font-size: 12px; letter-spacing: .4px; color: #ffffff80; opacity: 0; animation: fade-in .8s ease 5.9s forwards; }
@media (prefers-reduced-motion: reduce) {
  .intro *, .intro *::before { animation: none !important; } .intro-word, .intro-burst { display: none; }
  .intro-logo, .intro-title span, .intro-line, .intro-face, .intro-cta, .intro-proof, .intro-skip, .intro-aurora { opacity: 1; transform: none; } .intro-face b { transform: translateX(-50%); } .intro-def { clip-path: none; } .intro-aurora { opacity: .7; }
}

@media (max-width: 520px) { .intro-face b { font-size: 9px; padding: 2px 5px; } .intro-face:nth-child(even) b { bottom: auto; top: calc(100% + 4px); border-radius: 2px 10px 10px 10px; } .intro-cast { margin: 34px 0 34px; } }
.install-pill { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--purple); background: var(--purple-soft); color: var(--purple); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; } .install-pill .icon { width: 15px; height: 15px; }
@media (max-width: 860px) { .install-pill span { display: none; } .install-pill { width: 40px; padding: 0; justify-content: center; } }
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(120% 90% at 50% 40%, #2a1666, #07051a); color: #fff; font-weight: 900; letter-spacing: .3em; font-size: 13px; }
.boot-logo { width: 72px; height: 72px; border-radius: 22px; animation: logo-float 2s ease-in-out infinite; box-shadow: 0 16px 40px #6d4dffaa; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-tap-highlight-color: transparent; }
.top-nav { padding-top: max(12px, env(safe-area-inset-top)); }

/* ============ Mòbil com una app nativa ============ */
html { overscroll-behavior-y: none; }
button, a, .button, [data-action] { touch-action: manipulation; }
@media (max-width: 620px) {
  input, select, textarea { font-size: 16px !important; } /* iOS no fa zoom en escriure */
  dialog#modal { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 28px 28px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); animation: sheet-up .32s cubic-bezier(.2, .9, .3, 1); }
  dialog#modal::before { content: ''; display: block; width: 44px; height: 5px; margin: -8px auto 14px; border-radius: 3px; background: var(--line); }
  #toast { bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (display-mode: standalone) { .install-pill { display: none; } .top-nav { padding-top: max(12px, env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { dialog#modal { animation: none; } }

/* Aventura destacada: El far de les veus */
.story-feature { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 20px 22px; border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #3a2f7a, #131c38 70%); box-shadow: 0 18px 44px #131c3844; isolation: isolate; transition: transform .2s; }
.story-feature::after { content: ''; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(#fff3b055, transparent 70%); z-index: -1; }
.story-feature:hover { transform: translateY(-3px); }
.story-feature-art { font-size: 46px; filter: drop-shadow(0 0 18px #fff3b0aa); }
.story-feature-copy { display: grid; gap: 4px; flex: 1; } .story-feature-copy strong { font-size: 22px; } .story-feature-copy small { color: #ffffffb3; font-size: 13px; line-height: 1.5; }
.story-feature .eyebrow { color: #ffd166; }
@media (max-width: 620px) { .story-feature { flex-wrap: wrap; } .story-feature .button { width: 100%; justify-content: center; } }

/* ============ Perfil i mur (tipus Instagram) ============ */
.user-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-face.xxl { width: clamp(96px, 18vw, 150px); height: clamp(96px, 18vw, 150px); }
.profile-dot.has-face img { width: 100%; height: 100%; object-fit: cover; }
.insta-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 60px); align-items: center; max-width: 940px; margin: 10px auto 26px; }
.photo-ring { position: relative; display: inline-grid; padding: 4px; border: 0; border-radius: 50%; background: conic-gradient(from 210deg, #ffb03b, #ff4fa3, #b44dff, #6d4dff, #ffb03b); cursor: default; }
button.photo-ring { cursor: pointer; } .photo-ring > .user-face { border: 4px solid var(--bg); }
.photo-edit { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; border: 3px solid var(--bg); } .photo-edit .icon { width: 16px; height: 16px; }
button.photo-ring:hover .photo-edit { transform: scale(1.1); }
.insta-name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .insta-name h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.insta-stats { display: flex; gap: 26px; margin: 12px 0; font-size: 15px; flex-wrap: wrap; } .insta-stats strong { font-size: 17px; }
.insta-bio { margin: 0 0 14px; line-height: 1.5; }
.insta-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-form { max-width: 940px; margin: 0 auto 22px; }
.insta-tabs { max-width: 940px; margin: 0 auto; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.insta-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 14px 0; margin-top: -1px; border-top: 2px solid var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .insta-tabs .icon { width: 14px; height: 14px; }
.insta-grid { max-width: 940px; margin: 4px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.grid-post { position: relative; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: var(--surface-soft); cursor: pointer; }
.grid-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .grid-post:hover img { transform: scale(1.04); }
.grid-post.text-only { display: grid; place-items: center; padding: 12px; background: linear-gradient(135deg, #6d4dff, #ff4fa3); color: #fff; font-weight: 800; font-size: clamp(11px, 1.6vw, 15px); line-height: 1.35; text-align: center; }
.grid-meta { position: absolute; inset: auto 0 0; padding: 18px 8px 6px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(transparent, #0008); opacity: 0; transition: opacity .2s; } .grid-post:hover .grid-meta, .grid-post:focus-visible .grid-meta { opacity: 1; }
.grid-public { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 13px; }
.insta-empty { max-width: 940px; margin: 20px auto; }
.feed-layout { display: grid; grid-template-columns: minmax(0, 560px) 280px; gap: 28px; justify-content: center; align-items: start; }
.feed-side { position: sticky; top: 140px; display: grid; gap: 10px; } .feed-side p { font-size: 13px; margin: 0; }
.feed-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.feed-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.feed-tabs button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; } .feed-tabs button.active { background: var(--ink); color: var(--bg); }
.composer-teaser { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; text-align: left; cursor: pointer; } .composer-teaser > span:not(.user-face) { flex: 1; } .composer-teaser .icon { width: 18px; height: 18px; color: var(--purple); }
.post-card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .post-head .user-chip { cursor: pointer; flex: 1; min-width: 0; } .post-time { color: var(--muted); font-size: 12px; }
.post-menu { position: relative; } .post-menu summary { list-style: none; cursor: pointer; padding: 4px 8px; color: var(--muted); font-weight: 900; } .post-menu summary::-webkit-details-marker { display: none; }
.post-menu div { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 140px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px #0002; }
.post-menu div button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; font: inherit; color: #d6336c; cursor: pointer; } .post-menu div button:hover { background: var(--surface-soft); }
.post-image { position: relative; background: #000; user-select: none; } .post-image img { width: 100%; max-height: 680px; object-fit: contain; display: block; }
.big-heart { position: absolute; left: 50%; top: 50%; font-size: 96px; color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(.3); pointer-events: none; text-shadow: 0 6px 30px #0006; }
.post-image.hearted .big-heart { animation: big-heart .9s ease-out; }
@keyframes big-heart { 15% { opacity: .95; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(.95); } 70% { opacity: .95; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.post-actions { display: flex; align-items: center; gap: 4px; padding: 8px 10px 0; } .post-actions button { border: 0; background: none; font-size: 24px; line-height: 1; padding: 6px; cursor: pointer; color: var(--ink); transition: transform .15s; } .post-actions button:active { transform: scale(.85); }
.like-btn.liked { color: #ff3b5c; animation: bump .35s; }
.post-lang { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); }
.post-likes, .post-text, .post-comments p { margin: 0; padding: 2px 16px; font-size: 14px; } .post-likes { padding-top: 4px; }
.post-text { padding-top: 6px; line-height: 1.5; white-space: pre-line; } .post-more { padding: 6px 16px 0; font-size: 13px; }
.post-comments { padding: 6px 0 4px; } .post-comments strong { cursor: pointer; } .post-comments small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.comment-form { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); margin-top: 8px; padding: 8px 14px; } .comment-form input { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); padding: 8px 0; outline: none; }
.post-modal .post-card { margin: 0; border: 0; } .post-modal .post-image img { max-height: 60vh; }
.composer-photo { display: grid; place-items: center; gap: 8px; min-height: 150px; margin: 8px 0 10px; border-radius: 18px; border: 2px dashed var(--line); background: var(--surface-soft); color: var(--muted); cursor: pointer; overflow: hidden; text-align: center; font-weight: 700; }
.composer-photo .icon { width: 28px; height: 28px; color: var(--purple); } .composer-photo.has-image { border-style: solid; padding: 0; } .composer-photo img { width: 100%; max-height: 320px; object-fit: cover; }
#post-form textarea { width: 100%; resize: vertical; }
@media (max-width: 900px) { .feed-layout { grid-template-columns: 1fr; } .feed-side { display: none; } }
@media (max-width: 560px) { .insta-head { grid-template-columns: auto 1fr; gap: 16px; } .insta-name h1 { font-size: 20px; } .insta-stats { gap: 14px; font-size: 13px; } .insta-grid { gap: 2px; } .post-card { border-radius: 16px; } .page-frame:has(.feed-layout) { padding-left: 8px; padding-right: 8px; } }
@media (prefers-reduced-motion: reduce) { .post-image.hearted .big-heart, .like-btn.liked { animation: none; } }

/* ============ Música i karaoke ============ */
.music-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; border-radius: 26px; color: #fff; background: radial-gradient(120% 140% at 90% 0%, #ff4fa3, #6d4dff 55%, #2a1666); box-shadow: 0 20px 50px #6d4dff40; }
.music-hero h2 { margin: 6px 0; font-size: clamp(22px, 3.4vw, 32px); } .music-hero p { margin: 0; color: #ffffffd0; max-width: 560px; } .music-hero .eyebrow { color: #ffd166; }
.music-notes { font-size: 44px; animation: logo-float 3s ease-in-out infinite; white-space: nowrap; }
.song-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.song-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .2s; }
.song-card:hover { transform: translateY(-2px); border-color: var(--purple); } .song-card > span:nth-child(2) { flex: 1; display: grid; } .song-card small { color: var(--muted); font-size: 12px; }
.song-emoji { font-size: 30px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--purple-soft); } .song-best { font-size: 12px; font-weight: 800; color: var(--purple); } .song-best .icon { width: 18px; height: 18px; }
.more-songs { margin: 18px 0; } .more-songs summary { cursor: pointer; font-weight: 800; margin-bottom: 12px; } .music-note { font-size: 12px; margin-top: 18px; }
.spotify-panel { margin-top: 24px; display: grid; gap: 12px; }
.spotify-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .spotify-head > div { flex: 1; min-width: 200px; } .spotify-head h2 { margin: 0; } .spotify-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.spotify-logo { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #1db954; color: #191414; font-size: 28px; line-height: 1; }
.spotify-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.button.spotify-btn { background: #1db954; color: #0b1a10; } .button.spotify-btn:hover { background: #1ed760; }
.spotify-setup { font-size: 12px; margin: 0; } .artists-title { margin: 4px 0 0; font-size: 13px; font-weight: 800; }
.artist-row { display: flex; flex-wrap: wrap; gap: 8px; }
.artist-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .artist-chip:hover { border-color: #1db954; }
.track-list { display: grid; gap: 6px; }
.track-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.track-row:hover, .track-row.active { background: var(--surface-soft); border-color: var(--line); } .track-row img, .track-ph { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--purple-soft); }
.track-row > span:nth-child(2) { flex: 1; display: grid; min-width: 0; } .track-row small { color: var(--muted); } .track-row strong, .track-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row > .icon { width: 16px; height: 16px; color: var(--muted); }
.spotify-player iframe { border: 0; border-radius: 14px; display: block; }
.sing-free { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--surface-soft); } .sing-free p { margin: 2px 0 0; font-size: 12px; }
.button.recording { background: #ff3b5c; color: #fff; animation: mic-pulse 1.2s infinite; }
.assess { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.assess-score { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(#ff8a5c calc(var(--s, 40) * 1%), var(--line) 0); color: var(--ink); }
.assess.good .assess-score { background: #ffd16640; } .assess.great .assess-score { background: #2ed3b740; } .assess:not(.good):not(.great) .assess-score { background: #ff8a5c33; }
.assess-score strong { font-size: 26px; line-height: 1; } .assess-score small { font-size: 10px; color: var(--muted); }
.assess-title { margin: 0 0 4px; font-weight: 900; } .assess p { margin: 0 0 4px; font-size: 14px; } .assess-heard { color: var(--muted); font-style: italic; } .assess ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.karaoke { padding: 22px; border-radius: 26px; color: #fff; background: radial-gradient(120% 120% at 50% 0%, #3a1f7a, #15122b 70%); box-shadow: 0 30px 80px #1b0f4444; }
.karaoke-progress { height: 6px; border-radius: 3px; background: #ffffff1f; overflow: hidden; margin-bottom: 16px; } .karaoke-progress span { display: block; height: 100%; background: linear-gradient(90deg, #2ed3b7, #ffd166, #ff4fa3); transition: width .4s; }
.karaoke-lines { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.karaoke-line { position: relative; display: grid; gap: 2px; text-align: left; padding: 12px 56px 12px 16px; border-radius: 16px; border: 0; background: #ffffff0d; color: #ffffffa0; font: inherit; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.karaoke-line .line-text { font-size: 18px; font-weight: 800; } .karaoke-line small { font-size: 12px; color: #ffffff80; }
.karaoke-line.current { background: #ffffff1f; color: #fff; transform: scale(1.01); box-shadow: inset 4px 0 0 #ffd166; } .karaoke-line.current .line-text { font-size: 22px; }
.karaoke-line b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; } .karaoke-line.good b { color: #2ed3b7; } .karaoke-line.try b { color: #ffd166; }
.karaoke-line .word.ok { color: #2ed3b7; } .karaoke-line .word.miss { color: #ffb547; text-decoration: underline dotted; }
.karaoke-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .karaoke-controls .button.secondary { background: #ffffff1f; color: #fff; border-color: #ffffff33; } .karaoke-controls .button.ghost { color: #ffffffcc; }
.karaoke .assess { background: #ffffff; color: #251d49; } .karaoke-hint { text-align: center; font-size: 12px; color: #ffffffa0; margin: 14px 0 0; }
.karaoke-end { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; padding: 12px; border-radius: 14px; background: #2ed3b733; }
.spotify-search-link { display: inline-block; margin-top: 14px; }
@media (max-width: 560px) { .music-hero { flex-direction: column; align-items: flex-start; } .karaoke { padding: 14px; } .karaoke-line .line-text { font-size: 16px; } .karaoke-line.current .line-text { font-size: 18px; } }
@media (max-width: 760px) { .karaoke-controls { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3; padding: 10px; border-radius: 20px; background: #15122bf0; backdrop-filter: blur(8px); } .karaoke-lines { max-height: none; } }

/* ============ El mètode Xenoglosia ============ */
.method-hero { padding: clamp(24px, 4vw, 44px); border-radius: 30px; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #ff4fa3 0%, #6d4dff 45%, #1b1447 100%); box-shadow: 0 24px 60px #6d4dff44; }
.method-hero .eyebrow { color: #ffd166; } .method-hero h1 { margin: 10px 0 12px; font-size: clamp(30px, 5vw, 54px); line-height: 1.05; letter-spacing: -1.5px; max-width: 760px; } .method-hero p { margin: 0; max-width: 680px; color: #ffffffd9; font-size: 16px; line-height: 1.6; }
.method-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .method-pills span { padding: 7px 12px; border-radius: 999px; background: #ffffff1f; border: 1px solid #ffffff33; font-size: 13px; font-weight: 700; }
.method-title { margin: 34px 0 4px; font-size: 26px; letter-spacing: -.6px; } .method-sub { margin: 0 0 16px; }
.method-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.method-step { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .2s, box-shadow .2s; }
a.method-step:hover { transform: translateY(-4px); box-shadow: 0 16px 36px #6d4dff22; }
.step-n { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 12px; font-weight: 900; }
.step-emoji { font-size: 32px; } .method-step h3 { margin: 0; font-size: 19px; } .method-step p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.method-step small { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--purple); font-weight: 800; font-size: 12px; } .method-step small .icon { width: 13px; height: 13px; }
.method-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; } .method-two h2 { margin: 0 0 12px; font-size: 20px; }
.routine { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.routine li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); } .routine-time { min-width: 52px; font-weight: 900; color: var(--purple); } .routine-emoji { font-size: 22px; }
.routine li > span:last-child { display: grid; } .routine small { color: var(--muted); }
.science { display: grid; gap: 8px; } .science details { padding: 10px 14px; border-radius: 14px; background: var(--surface-soft); } .science summary { cursor: pointer; font-weight: 800; } .science p { margin: 8px 0 2px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.method-honest { margin-top: 16px; } .method-honest h2 { margin: 0 0 8px; font-size: 18px; } .method-honest p { margin: 0; color: var(--muted); }
.method-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 22px 0 6px; }
.plan-table { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); }
.plan-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.plan-row:first-child { border-top: 0; } .plan-row.head { background: var(--surface-soft); font-weight: 900; font-size: 13px; letter-spacing: .3px; }
.plan-row .pro-col { color: var(--purple); font-weight: 700; } .plan-row.head .pro-col { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-row .yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); } .plan-row .yes .icon { width: 14px; height: 14px; }
.plan-row .txt { font-size: 13px; color: var(--muted); } .plan-row .pro-col .txt { color: var(--purple); font-weight: 700; }
.method-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .2s; }
.method-banner:hover { transform: translateY(-2px); } .method-banner-emoji { font-size: 30px; } .method-banner > span:nth-child(2) { flex: 1; display: grid; } .method-banner small { color: var(--muted); } .method-banner > .icon { width: 18px; height: 18px; color: var(--purple); }
.landing-lead { max-width: 640px; color: var(--muted); margin: -6px 0 18px; } .landing-steps .method-step { background: var(--surface); }
@media (max-width: 1100px) { .method-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .method-steps { grid-template-columns: 1fr 1fr; } .method-two { grid-template-columns: 1fr; } .plan-row { grid-template-columns: 1.2fr 1fr 1fr; padding: 10px 12px; font-size: 13px; } }
@media (max-width: 460px) { .method-steps { grid-template-columns: 1fr; } .plan-row { grid-template-columns: 1fr 1fr; } .plan-row > span:first-child { grid-column: 1 / -1; font-weight: 800; } .plan-row.head > span:first-child { display: none; } }
.music-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #ff4fa3, #6d4dff); box-shadow: 0 14px 34px #ff4fa333; transition: transform .2s; }
.music-banner:hover { transform: translateY(-2px); } .music-banner-emoji { font-size: 32px; } .music-banner > span:nth-child(2) { flex: 1; display: grid; } .music-banner strong { font-size: 18px; } .music-banner small { color: #ffffffd9; }
.music-banner .button { background: #fff; color: #6d4dff; }
@media (max-width: 520px) { .music-banner { flex-wrap: wrap; } .music-banner .button { width: 100%; justify-content: center; } }

/* ============ Inici ordenat ============ */
.home-hero { min-height: 280px; } .home-hero h2 em { font-style: normal; color: #ffd166; }
.home-progress { height: 6px; max-width: 320px; margin-top: 16px; border-radius: 3px; background: #ffffff33; overflow: hidden; } .home-progress span { display: block; height: 100%; background: #fff; border-radius: 3px; }
.home-title { margin: 26px 0 12px; font-size: 20px; letter-spacing: -.4px; }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.today-card { position: relative; display: grid; align-content: start; gap: 4px; min-height: 168px; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s; overflow: hidden; }
.today-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--grad); }
.today-card.mint::before { background: linear-gradient(90deg, #19c6a7, #3f9bff); } .today-card.peach::before { background: linear-gradient(90deg, #ff7a45, #ff4fa3); }
.today-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px #6d4dff1f; }
.today-emoji { font-size: 30px; margin-bottom: 4px; } .today-card strong { font-size: 17px; line-height: 1.25; } .today-card small { color: var(--muted); }
.today-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-weight: 800; font-size: 13px; color: var(--purple); } .today-cta .icon { width: 14px; height: 14px; }
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.explore-tile { display: grid; gap: 2px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .15s, border-color .2s; }
.explore-tile:hover { transform: translateY(-2px); border-color: var(--purple); } .explore-tile > span { font-size: 26px; } .explore-tile strong { font-size: 15px; } .explore-tile small { color: var(--muted); font-size: 12px; }
.companion-mini { display: flex; align-items: center; gap: 12px; } .companion-mini .companion-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--purple-soft); } .companion-mini .companion-face svg { width: 100%; height: 100%; }
.companion-mini > div { display: grid; gap: 2px; } .companion-mini strong { font-size: 16px; } .companion-mini .text-link { font-size: 12px; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } .today-card { min-height: 0; grid-template-columns: auto 1fr auto; grid-template-areas: "emoji eyebrow cta" "emoji title cta" "emoji text cta"; align-items: center; column-gap: 14px; } .today-emoji { grid-area: emoji; margin: 0; } .today-card .eyebrow { grid-area: eyebrow; } .today-card strong { grid-area: title; } .today-card small { grid-area: text; } .today-cta { grid-area: cta; margin: 0; padding: 0; } .explore-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .today-cta { font-size: 0; } .today-cta .icon { width: 18px; height: 18px; } .home-hero .hero-copy { max-width: 100%; } }
@media (max-width: 620px) {
  .home-hero { display: flex; flex-direction: column; min-height: 0; padding-bottom: 18px; }
  .home-hero .hero-copy { max-width: 100%; }
  .home-hero .hero-art { position: relative; right: auto; bottom: auto; width: min(240px, 70%); margin: 18px auto 0; }
  .home-hero .hero-actions { flex-wrap: nowrap; } .home-hero .hero-actions .button { flex: 1; justify-content: center; }
  .home-hero .avatar-award { display: none; }
}

/* Icones de línia i codis d'idioma (sense emojis) sobre la paleta d'abans */
.today-emoji { font-size: 30px; margin-bottom: 4px; }
.language-pill span:first-child, .lang-code { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 5px; border-radius: 4px; background: var(--surface-soft); color: var(--muted); }
.today-emoji, .step-emoji, .song-emoji, .mini-emoji, .arcade-card-emoji, .path-card-emoji, .routine-emoji, .method-banner-emoji, .age-emoji, .explore-tile > span:first-child, .node-emoji { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--purple-soft); color: var(--purple-dark); font-size: 0; filter: none; box-shadow: none; }
.today-emoji .icon, .step-emoji .icon, .song-emoji .icon, .mini-emoji .icon, .arcade-card-emoji .icon, .path-card-emoji .icon, .routine-emoji .icon, .method-banner-emoji .icon, .age-emoji .icon, .explore-tile > span:first-child .icon, .node-emoji .icon { width: 22px; height: 22px; }
.mini-emoji.big .icon { width: 28px; height: 28px; }
.node-emoji .icon { width: 30px; height: 30px; }
.language-options .flag, .option-button .flag { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 7px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); display: inline-block; margin-bottom: 4px; }

/* Mòbil: el botó de parlar queda sota l'avatar, no a sobre de la cara */
@media (max-width: 720px) {
  .home-hero .hero-art { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .home-hero .hero-art .avatar-3d { width: min(210px, 62%); aspect-ratio: 1; }
  .home-hero .hero-art .hero-talk { position: static; transform: none; }
  .home-hero .hero-art .hero-talk:hover { transform: none; }
}
@media (max-width: 720px) { .home-hero .hero-art { position: relative; right: auto; bottom: auto; left: auto; width: 100%; margin: 12px 0 0; } }

/* Presentacions: càmera local, estadístiques i entrenador amb IA */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.pr-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #1a1530; display: grid; place-items: center; }
.pr-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.pr-stage.on video { display: block; }
.pr-nocam { text-align: center; color: #e9e4ff; padding: 24px; display: grid; gap: 8px; justify-items: center; }
.pr-nocam .icon { width: 34px; height: 34px; opacity: .8; }
.pr-nocam small { opacity: .7; max-width: 320px; }
.pr-hud { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.pr-timer { background: #0009; color: #fff; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-rec { background: #0009; color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; gap: 7px; align-items: center; }
.pr-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; animation: pr-pulse 1.1s infinite; }
@keyframes pr-pulse { 50% { opacity: .3; } }
.pr-live { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #000a; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; min-height: 0; max-height: 76px; overflow: hidden; }
.pr-live:empty { display: none; }
.pr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pr-result { margin-top: 18px; display: grid; gap: 12px; }
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pr-stat { background: var(--surface-soft); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.pr-stat small { color: var(--muted); font-weight: 600; }
.pr-stat strong { font-size: 24px; letter-spacing: -.5px; }
.pr-stat em { font-style: normal; color: var(--muted); font-size: 12px; }
.pr-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pr-transcript summary { cursor: pointer; font-weight: 600; }
.pr-setup { display: grid; gap: 12px; }
.pr-setup .field { display: grid; gap: 5px; font-weight: 600; font-size: 13px; }
.pr-setup input, .pr-setup select, .pr-setup textarea { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.pr-ai { margin-top: 18px; display: grid; gap: 12px; }
.pr-ai-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-ai-head h2 { display: flex; gap: 8px; align-items: center; }
.pr-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pr-mode { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px; display: grid; gap: 4px; color: var(--ink); }
.pr-mode:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-soft); }
.pr-mode small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.pr-busy { color: var(--muted); }
.pr-coach { display: grid; gap: 12px; }
.pr-summary { font-size: 16px; font-weight: 600; }
.pr-score { display: inline-flex; align-items: baseline; gap: 4px; }
.pr-score strong { font-size: 34px; color: var(--purple); }
.pr-block { background: var(--surface-soft); border-radius: 16px; padding: 14px 16px; }
.pr-block h3 { margin-bottom: 8px; }
.pr-quote { font-style: italic; line-height: 1.55; }
.pr-phrases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-phrases li { display: grid; }
.pr-phrases small { color: var(--muted); }
.pr-q { border-top: 1px solid var(--line); padding: 8px 0; }
.pr-q summary { cursor: pointer; font-weight: 600; }
.pr-q p { margin-top: 6px; color: var(--muted); }
@media (max-width: 860px) { .pr-grid { grid-template-columns: 1fr; } .pr-stage { aspect-ratio: 4 / 3; } }

/* Blau (cara 3D de la Luna): omple sempre el seu contenidor */
.avatar-3d { position: relative; }
.avatar-3d > talking-avatar { position: absolute; inset: 0; display: block; }
.avatar-3d > talking-avatar canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 720px) { .home-hero .hero-art .avatar-3d { width: 220px; height: 220px; aspect-ratio: auto; } }

/* Premium al perfil */
.insta-photo { position: relative; }
.premium-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd45e, #f5a524); color: #6b4200; box-shadow: 0 4px 12px #f5a52466; }
.premium-crown .icon { width: 18px; height: 18px; }
.premium-pill { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #ffe39a, #ffc24d); color: #5e3b00; font-weight: 700; }
.premium-pill .icon { width: 14px; height: 14px; }

/* Bit, el mini robot assistent */
#bit-robot { position: fixed; z-index: 40; left: calc(100vw - 96px); top: calc(100vh - 170px); width: 74px; transition: left var(--bit-ms, 900ms) cubic-bezier(.4, 0, .2, 1), top var(--bit-ms, 900ms) cubic-bezier(.4, 0, .2, 1); }
#bit-robot[hidden] { display: none; }
.bit-body { all: unset; cursor: pointer; display: block; width: 74px; position: relative; filter: drop-shadow(0 8px 12px #2a1a5a33); }
.bit-body:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: 18px; }
.bit-body svg { width: 74px; height: auto; display: block; }
.bit-head { fill: #fdfcff; stroke: #cfc6f5; stroke-width: 2; }
.bit-screen { fill: #231a4d; }
.bit-eye { fill: #7be8ff; transform-box: fill-box; transform-origin: center; }
.bit-mouth { fill: none; stroke: #7be8ff; stroke-width: 2.4; stroke-linecap: round; }
.bit-sleep-eyes { fill: none; stroke: #7be8ff; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.bit-torso { fill: #7958ed; } .bit-light { fill: #ffd45e; } .bit-arm { fill: #cfc6f5; transform-box: fill-box; transition: transform .4s; }
.bit-ant { stroke: #b6a9ee; stroke-width: 2.4; } .bit-bulb { fill: #ff6aa8; } .bit-shadow { fill: #2a1a5a22; }
#bit-robot[data-state="sleep"] .bit-eyes, #bit-robot[data-state="sleep"] .bit-mouth { opacity: 0; }
#bit-robot[data-state="sleep"] .bit-sleep-eyes { opacity: 1; }
#bit-robot[data-state="sleep"] .bit-bulb, #bit-robot[data-state="sleep"] .bit-light { fill: #8c84b3; }
#bit-robot[data-state="sleep"] .bit-body { transform: translateY(6px) scale(.9); }
#bit-robot[data-state="sleep"] .bit-body svg { animation: bit-breathe 3.6s ease-in-out infinite; }
.bit-z { position: absolute; right: -6px; top: -8px; font-weight: 800; color: #7958ed; font-size: 15px; display: none; pointer-events: none; }
.bit-z i, .bit-z b { font-style: normal; position: absolute; left: 10px; top: -10px; font-size: 12px; opacity: 0; } .bit-z b { left: 20px; top: -20px; font-size: 10px; }
#bit-robot[data-state="sleep"] .bit-z { display: block; animation: bit-z 3s infinite; }
#bit-robot[data-state="sleep"] .bit-z i { animation: bit-z 3s .6s infinite; } #bit-robot[data-state="sleep"] .bit-z b { animation: bit-z 3s 1.2s infinite; }
#bit-robot[data-state="awake"] .bit-body svg { animation: bit-hover 2.4s ease-in-out infinite; }
#bit-robot[data-state="awake"] .bit-eye { animation: bit-blink 4.5s infinite; }
#bit-robot[data-talking] .bit-mouth { animation: bit-talk .28s infinite alternate; }
#bit-robot[data-pose="point"] .bit-arm.r { transform: translate(2px, -14px) rotate(-60deg); }
.bit-bubble { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 40px #2a1a5a2e; padding: 12px; display: grid; gap: 8px; }
.bit-bubble[hidden] { display: none; }
.bit-log { max-height: 190px; overflow: auto; display: grid; gap: 6px; }
.bit-msg { margin: 0; padding: 8px 11px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bit-msg.bit { background: var(--purple-soft); border-bottom-left-radius: 4px; }
.bit-msg.me { background: var(--surface-soft); justify-self: end; border-bottom-right-radius: 4px; }
.bit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bit-chips button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.bit-chips button:hover { border-color: var(--purple); background: var(--purple-soft); }
.bit-chips button.go { background: var(--purple); color: #fff; border-color: var(--purple); }
.bit-form { display: flex; gap: 6px; }
.bit-form input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bit-form button { border: 0; background: var(--purple); color: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 16px; }
.bit-nap { all: unset; cursor: pointer; justify-self: end; font-size: 11.5px; color: var(--muted); text-decoration: underline; }
.bit-spot { outline: 3px solid #ffd45e; outline-offset: 4px; border-radius: 16px; animation: bit-spot 1s ease-in-out infinite; }
@keyframes bit-spot { 50% { outline-color: #ff6aa8; } }
@keyframes bit-z { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px); } }
@keyframes bit-breathe { 50% { transform: scale(1.04); } }
@keyframes bit-hover { 50% { transform: translateY(-5px); } }
@keyframes bit-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes bit-talk { to { transform: scaleY(1.6); } }
@media (prefers-reduced-motion: reduce) { #bit-robot *, .bit-spot { animation: none !important; } }
@media (max-width: 720px) { #bit-robot { width: 62px; } .bit-body, .bit-body svg { width: 62px; } .bit-bubble { right: -8px; } }
.bit-bubble { background: #fff; }
:root[data-theme="dark"] .bit-bubble { background: #26242f; }
:root[data-theme="dark"] .bit-head { fill: #e9e6f5; }

/* ============ Mòbil: scroll fluid, menys alçada i millor organització ============ */
@media (max-width: 760px) {
  /* Rendiment del scroll: res de desenfocament ni fons animat mentre es fa scroll */
  body::before { animation: none; display: none; }
  .panel, .game-card, .avatar-card, .mini-card, .arcade-card, .song-card, .track-row { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .top-nav, .space-tabs, .dock { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .top-nav { background: var(--bg); }
  .dock { background: var(--surface); box-shadow: 0 6px 22px #2a1a5a26; }
  .space-tabs { background: var(--surface); box-shadow: 0 2px 10px #2a1a5a14; }
  .hero-art .avatar-svg, .hero-bubbles span, .arcade-card, .game-card, .today-card { animation: none; }
  .game-card:hover, .mini-card:hover, .today-card:hover, .arcade-card:hover { transform: none; }
  html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; overflow-x: hidden; }

  /* Capçaleres: una sola columna (abans es partien en 3 columnes estretes) */
  .page-heading { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .page-heading > .eyebrow { margin-bottom: 0; }
  .page-heading h1 { font-size: 26px; line-height: 1.15; }
  .page-heading p { font-size: 13px; margin-top: 4px; }

  /* Menys alçada: targetes compactes en horitzontal en lloc de blocs enormes */
  .games-page .cards-grid, .cards-grid { gap: 10px; }
  .games-page .game-card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: 1fr auto; border-radius: 18px; }
  .games-page .game-art { grid-row: 1 / 3; min-height: 0; height: 100%; }
  .games-page .game-art svg { height: 100%; min-height: 108px; width: 100%; object-fit: cover; }
  .games-page .game-body { padding: 12px 14px 6px; gap: 4px; }
  .games-page .game-body h2, .games-page .game-body h3 { font-size: 16px; }
  .games-page .game-body p { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .games-page .game-footer { padding: 8px 14px 12px; font-size: 12px; }
  .arcade-card { min-height: 0; padding: 14px; gap: 10px; border-radius: 20px; }
  .arcade-card p { font-size: 12.5px; }
  .avatar-portrait { height: 150px !important; }
  .avatar-portrait .avatar-3d, .avatar-portrait .face { width: 150px; height: 150px; }
  .avatar-card { padding: 16px; }
  .music-banner, .method-hero, .conversation-banner { padding: 18px; border-radius: 20px; }
  .music-banner h2, .method-hero h1 { font-size: 22px; }
  .panel { padding: 16px; border-radius: 20px; }
  .method-steps { gap: 10px; }
  .method-step { padding: 14px; }
  .plan-row { padding: 10px 12px; font-size: 13px; }
  .pr-stage { aspect-ratio: 4 / 3; }

  /* Fila de pestanyes: es pot lliscar i s'enganxa a cada opció */
  .space-tabs { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .space-tabs::-webkit-scrollbar { display: none; }
  .space-tabs a { scroll-snap-align: center; flex: 0 0 auto; }

  /* Capçalera més neta: només el que cal */
  .top-actions .premium-link span, .top-actions .install-btn span { display: none; }

  /* El contingut no queda amagat sota la barra inferior */
  .workspace { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

  /* Bit: petit, al marge dret, i s'esvaeix mentre fas scroll perquè no tapi res */
  #bit-robot { width: 46px; }
  #bit-robot .bit-body, #bit-robot .bit-body svg { width: 46px; }
  #bit-robot[data-state="sleep"] { opacity: .85; }
  #bit-robot.bit-scrolling { opacity: .25; pointer-events: none; transition: opacity .15s; }
  #bit-robot[data-state="awake"] { width: 56px; }
  #bit-robot[data-state="awake"] .bit-body, #bit-robot[data-state="awake"] .bit-body svg { width: 56px; }
}
@media (max-width: 760px) {
  .arcade-card { grid-template-columns: auto 1fr auto !important; grid-template-rows: auto !important; align-items: center; padding: 14px !important; }
  .arcade-card-body { gap: 3px; } .arcade-card strong { font-size: 18px; } .arcade-card small { font-size: 12px; line-height: 1.4; }
  .arcade-card-emoji { width: 40px; height: 40px; }
  .arcade-card-play { position: static !important; width: 36px; height: 36px; }
  .mini-card { padding: 14px; gap: 12px; }
  /* Barres fixes totalment opaques: el contingut no es transparenta en passar per sota */
  .dock, .space-tabs { background: #fff; }
  :root[data-theme="dark"] .dock, :root[data-theme="dark"] .space-tabs, :root[data-theme="dark"] .top-nav { background: #1f1c2b; }
}
@media (max-width: 760px) {
  .home-hero { min-height: 0; padding: 20px; }
  .home-hero h2 { font-size: 28px; }
  .home-hero .hero-art { flex-direction: row !important; justify-content: flex-start; align-items: center; gap: 12px; margin-top: 12px; }
  .home-hero .hero-art .avatar-3d { width: 104px !important; height: 104px !important; flex: 0 0 104px; }
  .method-hero p { font-size: 15px; line-height: 1.5; }
  .method-pills span { font-size: 12px; padding: 6px 10px; }
  .music-banner p, .conversation-banner p { font-size: 13px; }
}

/* Legal, consentiment i dades personals */
.legal-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 4px 0 22px; font-size: 12.5px; }
.legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.landing-footer .legal-links { padding: 0; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); margin: 2px 0; }
.check-row input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--purple); }
.check-row a { color: var(--purple); }
.forgot-link { justify-self: start; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; }
.privacy-panel { margin-top: 18px; display: grid; gap: 10px; }
.privacy-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.blocked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.button.danger, .button.ghost.danger { color: #b4281a; }
.button.danger:not(.ghost) { background: #d83a2a; color: #fff; border-color: #d83a2a; }
.delete-form { display: grid; gap: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.auth-message:empty { display: none; }

/* Paywall i prova gratuïta */
.paywall { display: grid; gap: 14px; padding-top: 6px; }
.paywall h2 { font-size: 24px; line-height: 1.2; }
.paywall ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paywall li { display: flex; gap: 10px; align-items: flex-start; }
.paywall li .icon { color: var(--purple); flex: 0 0 auto; margin-top: 2px; }
.paywall-actions { display: grid; gap: 8px; }
.paywall-note { font-size: 12.5px; text-align: center; }
.trial-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: -2px 0 2px; }
.resume-banner.streak-risk { border-color: #ffb03b; background: #fff6e6; }
.resume-banner.streak-risk .icon { color: #e07b00; }
:root[data-theme="dark"] .resume-banner.streak-risk { background: #3a2c14; }

/* Tres plans: Gratis, Premium i Pro */
.plans-grid { max-width: 1180px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.plan-row { grid-template-columns: 1.5fr .8fr .9fr .9fr; }
@media (max-width: 760px) { .plan-row { grid-template-columns: 1.2fr .7fr .8fr .8fr; font-size: 12px; } .plan-row .txt { font-size: 11.5px; } }

/* Orella i Dictat */
.listen-board, .dictation-board { display: grid; gap: 14px; justify-items: center; align-content: start; padding: 18px; }
.listen-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); }
.listen-option { padding: 16px 12px; font-size: 16px; justify-content: center; text-align: center; }
.listen-option.right { background: #d7f5e5; border-color: #3fae7a; color: #1d6b49; }
.listen-option.wrong { background: #ffe0e0; border-color: #e05a5a; color: #8f2020; }
.dictation-form { display: flex; gap: 10px; width: min(560px, 100%); }
.dictation-form input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.dictation-form input:focus { border-color: var(--purple); outline: none; }
@media (max-width: 520px) { .listen-options { grid-template-columns: 1fr; } .dictation-form { flex-direction: column; } }
.mini-hear { display: inline-grid; place-items: center; color: #fff; }
.mini-hear::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Missions diàries */
.quests-panel { display: grid; gap: 12px; }
.quests-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.freeze-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark); }
.freeze-pill .icon { width: 14px; height: 14px; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quest { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.quest-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--purple-soft); color: var(--purple-dark); }
.quest.done .quest-icon { background: var(--mint); color: var(--mint-ink); }
.quest-body { display: grid; gap: 5px; min-width: 0; }
.quest-body strong { font-size: 13px; font-weight: 650; }
.quest-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.quest-bar i { display: block; height: 100%; background: var(--purple); border-radius: 999px; transition: width .4s; }
.quest.done .quest-bar i { background: var(--mint-ink); }
.quest small { color: var(--muted); font-variant-numeric: tabular-nums; }
.chest-note { margin: 0; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.chest-note .icon { width: 16px; height: 16px; }

/* ============ Estructura nova: zones, Sala de jocs, guia i tour ============ */
.hub-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 30px; border-radius: 28px; color: #fff; margin-bottom: 22px; background: linear-gradient(135deg, #6d4dff, #b44dff 60%, #ff4fa3); box-shadow: 0 20px 50px #6d4dff33; }
.hub-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); margin: 6px 0 8px; }
.hub-hero p { color: #ffffffdd; max-width: 620px; margin: 0; }
.hub-hero .eyebrow { color: #ffffffcc; display: inline-flex; gap: 6px; align-items: center; }
.hub-hero > div { max-width: 700px; }
.play-hero { background: linear-gradient(135deg, #1a1336, #3b2a8f 55%, #6d4dff); }
.learn-hero { background: linear-gradient(135deg, #3f5bff, #6d4dff 55%, #b44dff); }
.speak-hero { background: linear-gradient(135deg, #ff7a45, #ff4fa3 60%, #b44dff); }
.hub-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hub-stats span { background: #ffffff1f; border: 1px solid #ffffff2e; padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.hub-stats strong { font-size: 16px; margin-right: 3px; }
.section-head { margin: 28px 0 14px; } .section-head h2 { display: flex; gap: 10px; align-items: center; font-size: 22px; } .section-head h2 .icon { color: var(--purple); width: 24px; height: 24px; } .section-head p { margin-top: 4px; }

/* targetes de joc grans */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.game-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.game-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.game-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px #2a1a5a26; }
.game-cover { position: relative; min-height: 190px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.game-cover::before, .game-cover::after { content: ''; position: absolute; border-radius: 50%; background: #ffffff22; }
.game-cover::before { width: 220px; height: 220px; right: -60px; top: -80px; } .game-cover::after { width: 150px; height: 150px; left: -40px; bottom: -70px; }
.game-cover-icon { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; background: #ffffff2e; color: #fff; box-shadow: 0 10px 30px #0003; }
.game-cover-icon .icon { width: 50px; height: 50px; }
.game-new { position: absolute; top: 14px; right: 14px; z-index: 2; background: #fff; color: #d6336c; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; }
.game-info { padding: 20px 22px 22px; display: grid; gap: 10px; flex: 1; align-content: start; }
.game-info h3 { font-size: 22px; } .game-info p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.game-tags { display: flex; flex-wrap: wrap; gap: 6px; } .game-tags span { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); } .game-tags .icon { width: 13px; height: 13px; }
.game-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; } .game-foot small { color: var(--muted); }
.game-tile.featured { flex-direction: row; } .game-tile.featured .game-cover { min-height: 260px; flex: 0 0 38%; } .game-tile.featured .game-info { padding: 28px; align-content: center; } .game-tile.featured h3 { font-size: 28px; }
.tone-lilac { --c1: #6d4dff; --c2: #b44dff; } .tone-mint { --c1: #19b894; --c2: #3f9bff; } .tone-peach { --c1: #ff7a45; --c2: #ff4fa3; } .tone-sky { --c1: #3f9bff; --c2: #6d4dff; }
.wide-card { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 14px 34px #2a1a5a2a; }
.wide-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #ffffff2e; flex: 0 0 auto; } .wide-icon .icon { width: 34px; height: 34px; }
.wide-card h3 { color: #fff; font-size: 20px; } .wide-card p { color: #ffffffdd; margin: 4px 0 0; font-size: 14px; } .wide-go { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ffffff2e; flex: 0 0 auto; }

/* pàgines d'entrada de zona */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.zone-card { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; align-items: start; }
.zone-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px #2a1a5a26; }
.zone-cover { width: 110px; height: 110px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; } .zone-cover .icon { width: 52px; height: 52px; }
.zone-body { display: grid; gap: 8px; min-width: 0; } .zone-body h3 { font-size: 24px; } .zone-body p { color: var(--muted); margin: 0; font-size: 14.5px; line-height: 1.5; }
.zone-cost { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); } .zone-cost .pro { color: var(--purple); font-weight: 700; }
.zone-go { position: absolute; right: 22px; bottom: 20px; font-weight: 700; color: var(--purple); display: inline-flex; gap: 6px; align-items: center; } .zone-go .icon { width: 16px; height: 16px; }
.zone-card { padding-bottom: 52px; }

/* portada: les 4 zones */
.zones-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; margin-bottom: 8px; }
.zone-big { display: grid; gap: 6px; padding: 22px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 14px 34px #2a1a5a2a; transition: transform .25s; }
.zone-big:hover { transform: translateY(-4px); }
.zone-big-icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: #ffffff2e; margin-bottom: 6px; } .zone-big-icon .icon { width: 30px; height: 30px; }
.zone-big strong { font-size: 22px; } .zone-big small { color: #ffffffd9; font-size: 13.5px; } .zone-big em { font-style: normal; font-size: 12.5px; font-weight: 700; background: #ffffff26; padding: 5px 10px; border-radius: 999px; justify-self: start; margin-top: 6px; }

/* primers passos i caixes d'ajuda */
.first-steps { margin-bottom: 18px; } .first-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.first-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.first-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-soft); font-weight: 650; } .first-list a .icon:last-child { margin-left: auto; color: var(--muted); width: 18px; height: 18px; }
.first-list .done a { opacity: .6; text-decoration: line-through; }
.first-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; color: #fff; } .first-list .done .first-check { background: var(--mint-ink); border-color: var(--mint-ink); } .first-check .icon { width: 14px; height: 14px; }
.page-help { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--purple-soft); border: 1px solid #d9cffb; margin-bottom: 20px; }
.page-help-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--purple); color: #fff; flex: 0 0 auto; }
.page-help p { margin: 4px 0; font-size: 14px; } .page-help ul { margin: 6px 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 2px; } .page-help-cost { color: var(--purple-dark); font-weight: 650; font-size: 13px !important; } .page-help > .button { margin-left: auto; flex: 0 0 auto; }
:root[data-theme="dark"] .page-help { background: #2b2540; border-color: #433a66; }

/* guia */
.guide-group { margin: 30px 0; } .guide-group h2 { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .guide-group h2 .icon { color: var(--purple); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.guide-card { padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; } .guide-card h3 { display: flex; gap: 8px; align-items: center; } .guide-card h3 .icon { color: var(--purple); } .guide-card p { margin: 0; color: var(--muted); font-size: 14px; } .guide-card ol { margin: 0; padding-left: 20px; font-size: 14px; display: grid; gap: 3px; }
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin: 0; } .glossary > div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .glossary dt { font-weight: 800; } .glossary dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* tour */
.tour { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 10px 4px 4px; max-width: 460px; }
.tour-icon { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(135deg, #6d4dff, #ff4fa3); color: #fff; } .tour-icon .icon { width: 50px; height: 50px; }
.tour h2 { font-size: 26px; line-height: 1.2; } .tour p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.tour-dots { display: flex; gap: 7px; } .tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .tour-dots i.on { background: var(--purple); width: 22px; border-radius: 999px; }
.tour-actions { display: flex; gap: 10px; justify-content: space-between; width: 100%; margin-top: 6px; } .tour-actions .button { flex: 1; justify-content: center; }

@media (max-width: 760px) {
  .hub-hero { padding: 22px; border-radius: 22px; }
  .game-tile.featured { flex-direction: column; } .game-tile.featured .game-cover { flex: none; min-height: 190px; }
  .game-cover { min-height: 170px; } .game-cover-icon { width: 80px; height: 80px; } .game-info h3 { font-size: 20px; }
  .zone-card { grid-template-columns: 76px 1fr; gap: 14px; padding: 18px 18px 50px; } .zone-cover { width: 76px; height: 76px; border-radius: 22px; } .zone-cover .icon { width: 38px; height: 38px; } .zone-body h3 { font-size: 20px; } .zone-go { right: 18px; bottom: 16px; }
  .zones-big { grid-template-columns: 1fr 1fr; gap: 10px; } .zone-big { padding: 16px; } .zone-big strong { font-size: 19px; } .zone-big small { font-size: 12px; }
  .page-help { flex-wrap: wrap; } .page-help > .button { margin-left: 52px; }
  .wide-card { padding: 16px; gap: 14px; }
}

/* Files de jocs: tantes columnes com jocs (màx. 3) */
@media (min-width: 900px) { .game-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.zones-big { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

.mobile-quests { display: none; }
@media (max-width: 960px) { .mobile-quests { display: block; margin: 18px 0 4px; } .rail-quests { display: none; } }

/* ============ Conversa en directe ============ */
.live-main { min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 90% at 50% 0%, #2b1f6b 0%, #120d2b 60%, #0a0719 100%); color: #fff; }
.live-screen { --a: #8a6bff; --b: #ff4fa3; position: relative; max-width: 720px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); gap: 12px; }
.live-screen[data-mood="listening"] { --a: #19d3b0; --b: #3f9bff; }
.live-screen[data-mood="thinking"] { --a: #b9a2ff; --b: #6d4dff; }
.live-screen[data-mood="speaking"] { --a: #ff7a45; --b: #ff4fa3; }
.live-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; opacity: .9; }
.live-clock { font-variant-numeric: tabular-nums; background: #ffffff1f; padding: 4px 12px; border-radius: 999px; font-size: 14px; }
.live-stage { flex: 1; display: grid; place-items: center; align-content: center; gap: 22px; min-height: 280px; }
.live-orb { position: relative; width: min(56vw, 260px); aspect-ratio: 1; transform: scale(calc(1 + var(--level, 0) * .3)); transition: transform .08s linear; }
.live-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9, var(--a) 40%, var(--b) 100%); filter: blur(.4px); animation: orb-breathe 4s ease-in-out infinite; }
.live-orb i:nth-child(2) { inset: -14%; opacity: .35; filter: blur(22px); animation-delay: -1.3s; }
.live-orb i:nth-child(3) { inset: -32%; opacity: .18; filter: blur(46px); animation-delay: -2.6s; }
.live-screen[data-mood="thinking"] .live-orb i { animation-duration: 1.6s; }
.live-screen[data-mood="listening"] .live-orb i { animation-duration: 2.4s; }
@keyframes orb-breathe { 50% { transform: scale(1.06); } }
.live-status { margin: 0; font-size: 17px; font-weight: 650; opacity: .92; min-height: 1.4em; }
.live-captions { text-align: center; display: grid; gap: 8px; min-height: 96px; align-content: end; }
.live-captions.off { visibility: hidden; }
.live-user { margin: 0; font-size: 14px; color: #ffffff99; min-height: 1.2em; }
.live-bot { margin: 0; font-size: clamp(18px, 3.4vw, 24px); line-height: 1.4; font-weight: 600; }
.live-quick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.live-quick button { border: 1px solid #ffffff33; background: #ffffff14; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.live-quick button:hover { background: #ffffff26; }
.live-controls { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 6px; }
.live-btn { display: grid; justify-items: center; gap: 6px; border: 0; background: none; color: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.live-btn .icon { width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: #ffffff1f; transition: background .2s; }
.live-btn.on .icon { background: #ffffff; color: #1a1336; }
.live-btn.end .icon { background: #e5384e; width: 68px; height: 68px; padding: 20px; }
.live-warning { color: #ffd2d2; background: #5a1d2b; padding: 10px 14px; border-radius: 12px; font-size: 14px; text-align: center; margin: 0; }
.live-intro { margin: auto; display: grid; gap: 16px; justify-items: center; text-align: center; padding: 30px 0; }
.live-intro h1 { color: #fff; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0; }
.live-intro p { color: #ffffffcc; margin: 0; max-width: 520px; line-height: 1.55; }
.live-intro .eyebrow { color: #ffffffb3; display: inline-flex; gap: 6px; align-items: center; }
.live-orb.idle { width: 150px; margin: 10px 0 14px; animation: none; transform: none; }
.live-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; color: #ffffffdd; }
.live-points li { display: flex; gap: 10px; align-items: flex-start; } .live-points .icon { color: #19d3b0; flex: 0 0 auto; margin-top: 2px; }
.button.big { padding: 16px 28px; font-size: 17px; }
.live-end { margin: auto; display: grid; gap: 14px; justify-items: center; text-align: center; }
.live-end h1 { color: #fff; margin: 0; } .live-end p { color: #ffffffcc; margin: 0; }
.live-end-icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: #19d3b0; color: #07322a; } .live-end-icon .icon { width: 44px; height: 44px; }
.live-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.live-banner { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 26px; margin-bottom: 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #4a2a9a, #1a1336 60%); box-shadow: 0 18px 44px #2a1a5a40; flex-wrap: wrap; }
.live-banner h2 { color: #fff; margin: 4px 0; font-size: 24px; } .live-banner p { color: #ffffffcc; margin: 0; max-width: 560px; font-size: 14.5px; } .live-banner .eyebrow { color: #ffffffb3; display: inline-flex; gap: 6px; align-items: center; }
.live-banner > div { flex: 1; min-width: 220px; } .live-banner .button { margin-left: auto; }
.live-banner-orb { position: relative; width: 78px; height: 78px; flex: 0 0 auto; } .live-banner-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9, #ff7a45 45%, #ff4fa3); animation: orb-breathe 3.4s ease-in-out infinite; } .live-banner-orb i:last-child { inset: -18%; opacity: .3; filter: blur(14px); }
@media (prefers-reduced-motion: reduce) { .live-orb i, .live-banner-orb i { animation: none; } }
.live-back { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 18px; color: #ffffffcc; display: inline-flex; gap: 6px; align-items: center; font-weight: 650; z-index: 2; }
.live-back .icon { width: 18px; height: 18px; }

/* Diagnòstic de Spotify */
.spotify-diag { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-soft); font-size: 13.5px; }
.spotify-diag summary { cursor: pointer; font-weight: 700; }
.spotify-diag ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.redirect-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.redirect-uri { padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; word-break: break-all; user-select: all; }
.spotify-error { background: #fff0f0; color: #8f2020; border: 1px solid #f2c3c3; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
:root[data-theme="dark"] .spotify-error { background: #3a1d22; color: #ffc9c9; border-color: #5a2a31; }

/* ============ Configuració ============ */
.settings-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 90px; display: grid; gap: 4px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.settings-nav button { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 0; border-radius: 14px; background: none; color: var(--ink); font-weight: 650; text-align: left; cursor: pointer; }
.settings-nav button .icon { width: 20px; height: 20px; color: var(--muted); }
.settings-nav button:hover { background: var(--surface-soft); }
.settings-nav button.active { background: var(--purple-soft); color: var(--purple-dark); } .settings-nav button.active .icon { color: var(--purple); }
.settings-body { display: grid; gap: 16px; min-width: 0; }
.set-card { padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px; }
.set-card h2 { font-size: 20px; } .set-card p { margin: 0; }
.set-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .set-row:last-of-type { border-bottom: 0; } .set-row span { color: var(--muted); } .set-row strong { text-align: right; word-break: break-all; }
.set-form { display: grid; gap: 14px; }
.set-save { display: flex; justify-content: flex-end; padding-top: 4px; }
.set-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.set-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .set-points li { display: flex; gap: 10px; align-items: flex-start; } .set-points .icon { color: var(--mint-ink); margin-top: 2px; }
.set-links { display: flex; gap: 18px; flex-wrap: wrap; } .set-links a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.meters { display: grid; gap: 12px; }
.meter-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; } .meter-top small { color: var(--muted); font-variant-numeric: tabular-nums; }
.meter-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .meter-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), #ff4fa3); }
.set-card .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
@media (max-width: 860px) {
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding: 6px; scrollbar-width: none; } .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { flex: 0 0 auto; padding: 10px 14px; } .settings-nav button span { white-space: nowrap; }
  .set-card { padding: 18px; }
}

/* Venda suau */
.upsell { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; margin: 16px 0; background: linear-gradient(120deg, #2a1a5a, #6d4dff 70%, #b44dff); color: #fff; box-shadow: 0 14px 34px #6d4dff30; }
.upsell.pro { background: linear-gradient(120deg, #1d1a2e, #3b2a8f 60%, #ff4fa3); }
.upsell-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #ffffff26; flex: 0 0 auto; }
.upsell strong { color: #fff; } .upsell p { margin: 4px 0 0; color: #ffffffd9; font-size: 13.5px; line-height: 1.45; }
.upsell > div { flex: 1; min-width: 0; } .upsell .button { flex: 0 0 auto; }
.upsell.compact { margin: 12px 0; }
.premium-link.pro-link { background: linear-gradient(135deg, #ffd45e, #f5a524); color: #5e3b00; }
.premium-badge.pro { background: linear-gradient(135deg, #ffd45e, #f5a524); color: #5e3b00; }
@media (max-width: 640px) { .upsell { flex-wrap: wrap; } .upsell .button { width: 100%; justify-content: center; } }

/* ============ Comunitat redissenyada ============ */
.comm-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px; border-radius: 28px; margin-bottom: 22px; color: #fff; background: linear-gradient(135deg, #19b894, #3f9bff 55%, #6d4dff); box-shadow: 0 20px 50px #3f9bff33; }
.comm-hero-me { display: flex; gap: 18px; align-items: center; min-width: 0; flex: 1 1 320px; }
.comm-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 38px); margin: 4px 0; } .comm-hero p { margin: 0; color: #ffffffdd; max-width: 480px; font-size: 14.5px; }
.comm-hero .eyebrow { color: #ffffffcc; display: inline-flex; gap: 6px; align-items: center; }
.comm-hero .user-face.lg { width: 84px; height: 84px; border: 3px solid #ffffffaa; box-shadow: 0 8px 24px #0003; flex: 0 0 auto; }
.comm-hero-side { display: grid; gap: 12px; justify-items: end; } .comm-stats { display: flex; gap: 8px; flex-wrap: wrap; } .comm-stats span { background: #ffffff24; border: 1px solid #ffffff30; padding: 7px 14px; border-radius: 999px; font-size: 13px; } .comm-stats strong { font-size: 16px; }
.comm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.comm-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.comm-main { display: grid; gap: 18px; min-width: 0; } .comm-side { display: grid; gap: 16px; position: sticky; top: 140px; }
.side-card { padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; } .side-card h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; } .side-card h3 .icon { color: var(--purple); width: 18px; height: 18px; } .side-card p { margin: 0; font-size: 13.5px; }
.side-head { display: flex; justify-content: space-between; align-items: center; }
.me-card { grid-template-columns: auto 1fr auto; align-items: center; } .me-card small { display: block; color: var(--muted); }
.mini-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .mini-rank li { display: grid; grid-template-columns: 22px 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; font-size: 13.5px; } .mini-rank li.me { background: var(--purple-soft); } .mini-rank b { color: var(--muted); } .mini-rank strong { font-size: 12.5px; }
.invite-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .invite-row code { padding: 7px 12px; border-radius: 10px; background: var(--surface-soft); font-weight: 700; }
.comm-rules { font-size: 12px; } .comm-rules a { text-decoration: underline; }
/* mur */
.composer-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--muted); font-size: 15px; box-shadow: var(--shadow); } .composer-card:hover { border-color: var(--purple); } .composer-card > span:first-of-type { flex: 1; } .composer-tools { color: var(--purple); }
.story-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; } .story-row::-webkit-scrollbar { display: none; }
.story { display: grid; gap: 6px; justify-items: center; border: 0; background: none; color: var(--ink); flex: 0 0 auto; width: 72px; cursor: pointer; } .story small { font-size: 12px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring { width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ff7a45, #ff4fa3, #6d4dff); display: grid; place-items: center; } .story-ring .user-face { width: 100%; height: 100%; border: 2px solid var(--surface); }
.story-ring.add { background: var(--purple-soft); color: var(--purple); border: 2px dashed var(--purple); }
.feed-tabs.pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-soft); justify-self: start; } .feed-tabs.pills button { border: 0; background: none; padding: 8px 18px; border-radius: 999px; font-weight: 700; color: var(--muted); cursor: pointer; } .feed-tabs.pills button.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px #2a1a5a1f; }
.post-card { margin: 0; padding: 4px 0 0; border-radius: 24px; box-shadow: var(--shadow); }
.post-head { padding: 14px 18px 4px; } .post-meta { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; } .lang-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark); }
.post-text { margin: 8px 18px 12px; font-size: 15.5px; line-height: 1.55; } .post-text.big { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.2px; }
.post-bar { display: flex; gap: 8px; padding: 4px 14px 10px; flex-wrap: wrap; }
.post-act { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 14px; border-radius: 999px; font-weight: 650; font-size: 13.5px; cursor: pointer; } .post-act .icon { width: 17px; height: 17px; } .post-act.liked { color: #e5384e; border-color: #f5b5bd; background: #fff1f3; } .post-act > span { font-size: 17px; line-height: 1; }
.post-comments { padding: 0 18px 4px; display: grid; gap: 4px; font-size: 13.5px; } .post-comments p { margin: 0; }
.comment-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); margin-top: 8px; } .comment-form input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); }
.post-more { margin: 0 18px; }
/* buit i accés */
.comm-empty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 24px; border-radius: 24px; border: 2px dashed var(--line); background: var(--surface); } .comm-empty .icon { width: 40px; height: 40px; color: var(--purple); } .comm-empty h3 { font-size: 20px; } .comm-empty p { margin: 0; color: var(--muted); max-width: 420px; } .comm-empty.small { padding: 20px; }
.comm-gate { max-width: 560px; margin: 30px auto; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 34px 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .comm-gate h1 { font-size: 30px; } .comm-gate p { margin: 0; color: var(--muted); } .comm-gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; } .comm-gate li { display: flex; gap: 10px; } .comm-gate li .icon { color: var(--mint-ink); }
.comm-gate-icon { width: 78px; height: 78px; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(135deg, #19b894, #6d4dff); color: #fff; } .comm-gate-icon .icon { width: 40px; height: 40px; }
/* amics */
.comm-search { display: grid; gap: 12px; margin-bottom: 20px; } .search-row.big { display: flex; gap: 10px; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); align-items: center; } .search-row.big input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; padding: 10px 6px; color: var(--ink); outline: none; } .search-icon { color: var(--muted); padding-left: 10px; display: grid; }
.search-results { padding: 6px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.comm-block { display: grid; gap: 14px; } .comm-block-head h2 { display: flex; gap: 10px; align-items: center; font-size: 20px; } .comm-block-head h2 .icon { color: var(--purple); } .count { font-size: 13px; background: var(--purple-soft); color: var(--purple-dark); padding: 2px 10px; border-radius: 999px; }
.comm-block.requests { padding: 18px; border-radius: 22px; background: #fff7e6; border: 1px solid #ffd9a0; margin-bottom: 20px; } :root[data-theme="dark"] .comm-block.requests { background: #3a2c14; border-color: #5a4320; }
.request-grid { display: grid; gap: 10px; } .request-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); } .request-card small { display: block; color: var(--muted); }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.friend-card { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 20px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s; } .friend-card:hover { transform: translateY(-3px); }
.friend-face { cursor: pointer; margin-bottom: 4px; } .friend-face .user-face { width: 72px; height: 72px; } .friend-card small { color: var(--muted); } .friend-meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 6px 0; } .friend-actions { display: flex; gap: 10px; align-items: center; }
.rank-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); }
/* classificació */
.rank-summary { padding: 14px 18px; border-radius: 18px; background: var(--purple-soft); margin-bottom: 18px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin: 8px 0 22px; max-width: 640px; }
.podium-slot { display: grid; gap: 4px; justify-items: center; text-align: center; } .podium-slot small { color: var(--muted); font-weight: 700; }
.podium-slot .user-face { width: 76px; height: 76px; border: 3px solid var(--line); } .podium-slot.place-1 .user-face { width: 96px; height: 96px; border-color: #f5b400; box-shadow: 0 0 0 4px #ffd45e66; }
.podium-medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #b9bcc8; } .place-1 .podium-medal { background: #f5b400; } .place-2 .podium-medal { background: #9aa6b8; } .place-3 .podium-medal { background: #c97b42; }
.podium-bar { width: 100%; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--purple-soft), transparent); } .place-1 .podium-bar { height: 70px; } .place-2 .podium-bar { height: 46px; } .place-3 .podium-bar { height: 30px; } .podium-slot.me strong { color: var(--purple); }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 640px; } .rank-list li { display: grid; grid-template-columns: 30px auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .rank-list li.me { background: var(--purple-soft); border-color: var(--purple); } .rank-list b { color: var(--muted); } .rank-list small { display: block; color: var(--muted); }
@media (max-width: 960px) { .comm-columns { grid-template-columns: 1fr; } .comm-side { position: static; } .comm-hero-side { justify-items: start; } .comm-actions { justify-content: flex-start; } }
@media (max-width: 640px) { .comm-hero { padding: 20px; border-radius: 22px; } .comm-hero .user-face.lg { width: 64px; height: 64px; } .request-card { grid-template-columns: auto 1fr; } .request-card .row-actions { grid-column: 1 / -1; } .rank-list li { grid-template-columns: 24px auto 1fr auto; } .rank-list .rank-chip { display: none; } .podium-slot .user-face { width: 60px; height: 60px; } .podium-slot.place-1 .user-face { width: 74px; height: 74px; } }
.user-face.md { width: 46px; height: 46px; } .user-face.lg { width: 72px; height: 72px; }
@media (max-width: 640px) {
  .comm-hero { gap: 14px; } .comm-hero p { display: none; } .comm-hero-me { flex-basis: 100%; } .comm-hero h1 { font-size: 26px; }
  .comm-stats span { padding: 5px 11px; font-size: 12px; } .comm-hero-side { width: 100%; } .comm-actions .button { width: 100%; justify-content: center; }
  .composer-card { font-size: 14px; }
}
.rank-you { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 18px; background: var(--purple-soft); border: 2px solid var(--purple); max-width: 640px; margin: 4px 0 14px; } .rank-you b { font-size: 22px; color: var(--purple); } .rank-you small { display: block; color: var(--muted); }
.rank-note { padding: 12px 16px; border-radius: 14px; background: var(--surface-soft); margin: 0 0 14px; font-size: 14px; }
.rank-fine { font-size: 12.5px; margin-top: 18px; } .rank-fine a { text-decoration: underline; }
.rank-list.world li { grid-template-columns: 38px auto 1fr auto auto; }
.podium-crown { color: #f5b400; display: grid; } .podium-crown .icon { width: 28px; height: 28px; }
.rank-scopes { max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px; } .rank-scopes button { white-space: nowrap; }
.bot-chip { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); border: 1px dashed var(--line); vertical-align: middle; }

/* ============ Rutina diària ============ */
.routine-panel { display: grid; gap: 14px; margin-bottom: 18px; border: 2px solid var(--purple-soft); box-shadow: 0 14px 34px #6d4dff1f; }
.routine-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .routine-head h2 { font-size: 22px; } .routine-head p { margin: 2px 0 0; }
.routine-head .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.routine-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface-soft); border: 2px solid transparent; }
.step.next { background: var(--surface); border-color: var(--purple); box-shadow: 0 8px 22px #6d4dff26; }
.step.done { opacity: .62; } .step.done strong { text-decoration: line-through; }
.step-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); font-weight: 800; font-size: 14px; border: 2px solid var(--line); } .step.next .step-num { background: var(--purple); color: #fff; border-color: var(--purple); } .step.done .step-num { background: var(--mint-ink); color: #fff; border-color: var(--mint-ink); } .step-num .icon { width: 16px; height: 16px; }
.step-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--purple-soft); color: var(--purple-dark); } .step-icon .icon { width: 22px; height: 22px; }
.step-body { display: grid; gap: 3px; min-width: 0; } .step-body small { color: var(--muted); font-size: 12px; font-weight: 600; } .step-body strong { font-size: 15px; }
.step.free { grid-template-columns: 34px 1fr auto; background: transparent; border: 2px dashed var(--line); }
.free-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .free-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; cursor: pointer; } .free-chip .icon { width: 14px; height: 14px; color: var(--purple); } .free-chip:hover { border-color: var(--purple); }
.step-check { color: var(--mint-ink); }
.routine-bar { position: sticky; top: 62px; z-index: 19; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 auto 8px; max-width: 760px; border-radius: 18px; background: linear-gradient(120deg, #2a1a5a, #6d4dff 80%); color: #fff; box-shadow: 0 10px 28px #6d4dff40; }
.routine-bar > span { flex: 1; min-width: 0; display: grid; } .routine-bar small { color: #ffffffcc; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine-dots { display: flex; gap: 5px; } .routine-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff40; } .routine-dots i.on { background: #19d3b0; }
.routine-x { border: 0; background: #ffffff24; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } .routine-x .icon { width: 14px; height: 14px; }
.routine-intro { display: grid; gap: 12px; max-width: 460px; } .routine-intro h2 { font-size: 26px; } .routine-intro p { margin: 0; } .routine-intro .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.routine-intro ol { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; } .routine-intro li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); } .routine-intro li.free { border: 2px dashed var(--line); background: none; } .routine-intro li small { display: block; color: var(--muted); }
.routine-intro-actions { display: grid; gap: 8px; margin-top: 4px; }
@media (max-width: 640px) { .step { grid-template-columns: 30px 1fr auto; } .step-icon { display: none; } .routine-bar { top: 58px; margin: 0 0 8px; } .routine-dots { display: none; } .routine-bar .button { padding: 8px 12px; } }
.step-icon .icon, .step-num .icon { max-width: 22px; max-height: 22px; }
.step .button { white-space: nowrap; }

/* ============ Prova inicial, entrar amb Google/Apple i verificació ============ */
.trial-main { min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 90% at 50% 0%, #4a2a9a 0%, #1a1336 55%, #0d0a1f 100%); color: #fff; }
.trial { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 18px 28px; display: flex; flex-direction: column; }
.trial-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .trial-brand { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; } .trial-brand img { width: 28px; height: 28px; border-radius: 9px; }
.trial-xp { display: inline-flex; gap: 6px; align-items: center; background: #ffffff1f; padding: 5px 12px; border-radius: 999px; font-weight: 800; } .trial-xp .icon { width: 15px; height: 15px; color: #ffd45e; }
.trial-pick, .trial-done { display: grid; gap: 14px; justify-items: center; text-align: center; margin: auto 0; }
.trial h1 { color: #fff; font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin: 0; } .trial p { color: #ffffffcc; margin: 0; }
.trial-avatar { width: 190px; height: 190px; } .trial-avatar.small { width: 96px; height: 96px; flex: 0 0 auto; } .trial-avatar .avatar-3d, .trial-avatar .face { width: 100%; height: 100%; }
.trial-langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.trial-lang { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 2px solid #ffffff2e; background: #ffffff14; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: transform .15s, border-color .15s; } .trial-lang:hover { transform: translateY(-2px); border-color: #fff; } .trial-lang b { font-size: 12px; background: #ffffff26; padding: 4px 8px; border-radius: 8px; }
.trial-login .text-link, .trial .text-link { color: #ffffffcc; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.trial-play { display: grid; gap: 18px; align-content: start; margin-top: 6px; }
.trial-dots { display: flex; gap: 8px; justify-content: center; } .trial-dots i { flex: 1; max-width: 70px; height: 8px; border-radius: 999px; background: #ffffff26; } .trial-dots i.done { background: #19d3b0; } .trial-dots i.now { background: #fff; }
.trial-stage { display: flex; gap: 12px; align-items: center; } .trial-bubble { background: #fff; color: #1a1336; padding: 12px 16px; border-radius: 18px 18px 18px 4px; font-weight: 700; }
.trial-q { font-size: 22px; font-weight: 800; color: #fff !important; text-align: center; }
.trial-options { display: grid; gap: 10px; } .trial-option { padding: 16px; border-radius: 18px; border: 2px solid #ffffff2e; background: #ffffff14; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; } .trial-option.right { background: #19d3b033; border-color: #19d3b0; } .trial-option.wrong { background: #e5384e33; border-color: #e5384e; }
.trial-play > .button, .trial-play .trial-actions { justify-self: center; }
.trial-meaning { text-align: center; } .trial-say { text-align: center; font-size: 26px; font-weight: 800; color: #fff !important; line-height: 1.3; }
.trial-heard { background: #ffffff1a; padding: 10px 14px; border-radius: 14px; text-align: center; }
.trial-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; } .trial-listening { color: #ff9aa9; font-weight: 800; }
.trial .order-answer, .trial .order-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 52px; } .trial .order-answer { padding: 10px; border-radius: 16px; background: #ffffff14; border: 2px dashed #ffffff40; }
.trial .order-tile { padding: 10px 16px; border-radius: 12px; border: 0; background: #fff; color: #1a1336; font-weight: 700; font-size: 16px; cursor: pointer; } .trial .order-tile.used { opacity: .25; } .trial .order-empty { color: #ffffff99; }
.trial .result-stats { display: flex; gap: 22px; justify-content: center; } .trial .result-stats small { color: #ffffffb3; display: block; } .trial .result-stats strong { font-size: 26px; }
.social-auth { display: grid; gap: 12px; justify-items: center; margin-bottom: 14px; } .google-slot { min-height: 44px; display: grid; justify-items: center; width: 100%; }
.apple-btn { display: inline-flex; gap: 10px; align-items: center; justify-content: center; width: min(360px, 100%); height: 44px; border-radius: 999px; border: 1px solid #000; background: #000; color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; } :root[data-theme="dark"] .apple-btn { background: #fff; color: #000; border-color: #fff; }
.social-legal { font-size: 12px; color: var(--muted); text-align: center; margin: 0; } .social-legal a { text-decoration: underline; }
.or-line { width: 100%; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; } .or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.verify-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 18px; background: #fff3d6; color: #5e3b00; border-bottom: 1px solid #ffd9a0; font-size: 14px; } .verify-banner span { flex: 1; min-width: 220px; } .verify-banner .icon { width: 20px; height: 20px; }
:root[data-theme="dark"] .verify-banner { background: #3a2c14; color: #ffe2a8; border-color: #5a4320; }

/* Nivells */
.level-banner { display: grid; gap: 14px; padding: 22px; border-radius: 24px; margin-bottom: 22px; background: linear-gradient(135deg, #1a1336, #3b2a8f 70%, #6d4dff); color: #fff; box-shadow: 0 16px 40px #3b2a8f40; }
.level-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .level-head h2 { color: #fff; font-size: 44px; line-height: 1; margin-top: 4px; } .level-banner .eyebrow { color: #ffffffb3; display: inline-flex; gap: 6px; align-items: center; }
.level-ladder { display: flex; gap: 6px; } .lvl { min-width: 40px; text-align: center; padding: 7px 10px; border-radius: 12px; background: #ffffff1a; font-weight: 800; font-size: 13px; color: #ffffffa0; } .lvl.past { background: #19d3b033; color: #19d3b0; } .lvl.now { background: #fff; color: #1a1336; box-shadow: 0 0 0 3px #ffffff40; }
.level-banner .meter-top { color: #fff; } .level-banner .meter-top small { color: #ffffffb3; } .level-banner .meter-bar { background: #ffffff26; }
.level-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: #ffffffdd; } .level-facts li { display: flex; gap: 10px; align-items: flex-start; } .level-facts .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: #ffd45e; }
.level-banner .muted { color: #ffffffb3; } .level-banner small { display: block; }
.levelup { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 440px; overflow: hidden; padding: 8px 4px; }
.levelup-burst { position: absolute; inset: -40% -20% auto; height: 260px; background: radial-gradient(circle, #ffd45e88, transparent 65%); animation: lv-pulse 2.4s ease-in-out infinite; pointer-events: none; } @keyframes lv-pulse { 50% { transform: scale(1.15); opacity: .7; } }
.levelup-badge { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-radius: 26px; background: linear-gradient(135deg, #6d4dff, #ff4fa3); color: #fff; box-shadow: 0 14px 34px #6d4dff55; } .levelup-badge small { font-size: 22px; opacity: .7; font-weight: 800; } .levelup-badge strong { font-size: 52px; line-height: 1; } .levelup-badge .icon { width: 26px; height: 26px; }
.levelup h2 { font-size: 28px; position: relative; } .levelup p { margin: 0; color: var(--muted); } .levelup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; position: relative; } .levelup li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .levelup li .icon { color: var(--mint-ink); flex: 0 0 auto; margin-top: 2px; }
.game-foot-actions { display: flex; gap: 12px; align-items: center; } .game-foot-actions .text-link { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; } .game-foot-actions .icon { width: 15px; height: 15px; }
.rank-list.game-rank { grid-template-columns: none; } .rank-list.game-rank li { grid-template-columns: 34px 1fr auto; }
.wide-rank { color: #fff; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; margin-top: 4px; }

/* ============ Cofres ============ */
.chest-hero { background: linear-gradient(135deg, #f5a524, #ff7a45 50%, #b44dff); }
.chest-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 12px 0 8px; }
.chest-slot { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px 10px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); min-height: 210px; align-content: center; } .chest-slot small { color: var(--muted); } .chest-slot p { margin: 0; font-size: 12px; color: var(--muted); }
.chest-slot.empty { border-style: dashed; } .slot-empty { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-soft); color: var(--muted); }
.chest-slot.ready { box-shadow: 0 0 0 3px #ffd45e, 0 14px 30px #f5a52444; } .chest-timer { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.rar-bg-common { background: linear-gradient(180deg, #f2f4f8, var(--surface)); } .rar-bg-rare { background: linear-gradient(180deg, #e4f0ff, var(--surface)); } .rar-bg-epic { background: linear-gradient(180deg, #f1e4ff, var(--surface)); } .rar-bg-legendary { background: linear-gradient(180deg, #fff1cc, var(--surface)); }
:root[data-theme="dark"] .chest-slot[class*="rar-bg"] { background: var(--surface); }
.rar-common { color: #6b7280; } .rar-rare { color: #2f7bd8; } .rar-epic { color: #9a4dd6; } .rar-legendary { color: #d98a00; }
.chest-art { position: relative; display: block; width: 74px; height: 66px; --c1: #9aa6b8; --c2: #6d7a90; }
.chest-rare { --c1: #5aa3ff; --c2: #2f6fc4; } .chest-epic { --c1: #b86cf0; --c2: #7a2fb8; } .chest-legendary { --c1: #ffd45e; --c2: #e08a00; }
.chest-body { position: absolute; left: 4px; right: 4px; bottom: 0; height: 40px; border-radius: 6px 6px 12px 12px; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 -6px 0 #0003; }
.chest-lid { position: absolute; left: 0; right: 0; top: 4px; height: 30px; border-radius: 40px 40px 6px 6px; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 -5px 0 #0003; transform-origin: left bottom; transition: transform .5s; z-index: 2; }
.chest-lock { position: absolute; left: 50%; top: 30px; width: 14px; height: 16px; margin-left: -7px; border-radius: 4px; background: #ffe07a; box-shadow: 0 0 0 2px #0003; z-index: 3; }
.chest-glow { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, #ffe07a88, transparent 65%); opacity: 0; z-index: 0; }
.chest-art.shake { animation: chest-shake 1.2s ease-in-out infinite; } .chest-art.shake .chest-glow { opacity: 1; } @keyframes chest-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.chest-art.opening { animation: chest-shake .5s ease-in-out 3; } .chest-art.opening .chest-lid { animation: lid-pop 1.4s .9s forwards; } .chest-art.opening .chest-glow { animation: glow-burst 1.4s .9s forwards; } .chest-art.opening .chest-lock { animation: fade-out .3s .9s forwards; }
@keyframes lid-pop { to { transform: rotate(-70deg) translateY(-8px); } } @keyframes glow-burst { 0% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; } 100% { opacity: .5; transform: scale(2.2); } } @keyframes fade-out { to { opacity: 0; } }
.chest-note { margin: 0 0 18px; font-size: 13px; }
.chest-perks { padding: 16px 18px; border-radius: 20px; background: var(--surface-soft); margin-bottom: 20px; } .chest-perks h3 { margin-bottom: 8px; } .chest-perks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .chest-perks li { display: flex; gap: 10px; align-items: flex-start; } .chest-perks .icon { color: var(--purple); flex: 0 0 auto; margin-top: 2px; }
.weekly-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 20px; background: linear-gradient(120deg, #1d1a2e, #3b2a8f); color: #fff; margin-bottom: 18px; flex-wrap: wrap; } .weekly-banner div { flex: 1; min-width: 200px; } .weekly-banner p { margin: 2px 0 0; color: #ffffffcc; font-size: 13px; } .weekly-banner .icon { color: #ffd45e; width: 26px; height: 26px; }
.chest-strip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 2px solid var(--purple-soft); margin: 0 0 18px; box-shadow: var(--shadow); } .chest-strip small { display: block; color: var(--muted); } .chest-go { margin-left: auto; color: var(--muted); }
.strip-slots { display: flex; gap: 6px; } .strip-slot { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-soft); display: grid; place-items: center; overflow: hidden; } .strip-slot.ready { background: #fff1cc; } .strip-slot .chest-art { transform: scale(.5); }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cos-card { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 10px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; } .cos-card small { color: var(--muted); font-weight: 700; } .cos-card.unowned { opacity: .45; cursor: default; filter: grayscale(.8); } .cos-card.equipped { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); } .cos-card em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--purple); display: inline-flex; gap: 4px; align-items: center; } .cos-card em .icon { width: 13px; height: 13px; }
.cos-card.rar-rare { border-color: #bcd8ff; } .cos-card.rar-epic { border-color: #dcc0f5; } .cos-card.rar-legendary { border-color: #ffd98a; }
.cos-preview { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--purple-soft); } .cos-preview.cos-title { width: auto; min-width: 70px; height: auto; border-radius: 999px; padding: 8px 12px; } .cos-preview.cos-banner { width: 100%; height: 56px; border-radius: 12px; }
.cos-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); }
/* marcs de foto (es veuen a tot arreu) */
.user-face.frame-sprout { box-shadow: 0 0 0 3px #6fcf97, 0 0 0 5px #ffffff; } .user-face.frame-ocean { box-shadow: 0 0 0 3px #4fa3ff, 0 0 0 5px #fff; } .user-face.frame-sunset { box-shadow: 0 0 0 3px #ff9a5a, 0 0 0 6px #ff5c8a; } .user-face.frame-aurora { box-shadow: 0 0 0 3px #19d3b0, 0 0 0 6px #7a5cff; } .user-face.frame-neon { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ff2fb4, 0 0 14px 4px #ff2fb4aa; } .user-face.frame-flame { box-shadow: 0 0 0 3px #ffd45e, 0 0 0 6px #ff6a2f, 0 0 16px 4px #ff6a2faa; } .user-face.frame-gold { box-shadow: 0 0 0 3px #fff3c4, 0 0 0 6px #f5b400, 0 0 18px 5px #f5b400aa; } .user-face.frame-cosmos { box-shadow: 0 0 0 3px #1a1336, 0 0 0 6px #8a6bff, 0 0 20px 6px #b44dffaa; }
.cos-frame .cos-dot { box-shadow: 0 0 0 3px #fff; } .cos-frame.frame-sprout .cos-dot { box-shadow: 0 0 0 4px #6fcf97; } .cos-frame.frame-ocean .cos-dot { box-shadow: 0 0 0 4px #4fa3ff; } .cos-frame.frame-sunset .cos-dot { box-shadow: 0 0 0 3px #ff9a5a, 0 0 0 6px #ff5c8a; } .cos-frame.frame-aurora .cos-dot { box-shadow: 0 0 0 3px #19d3b0, 0 0 0 6px #7a5cff; } .cos-frame.frame-neon .cos-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ff2fb4, 0 0 12px #ff2fb4; } .cos-frame.frame-flame .cos-dot { box-shadow: 0 0 0 3px #ffd45e, 0 0 0 6px #ff6a2f; } .cos-frame.frame-gold .cos-dot { box-shadow: 0 0 0 3px #fff3c4, 0 0 0 6px #f5b400, 0 0 12px #f5b400; } .cos-frame.frame-cosmos .cos-dot { box-shadow: 0 0 0 3px #1a1336, 0 0 0 6px #8a6bff, 0 0 14px #b44dff; }
/* títols */
.title-chip { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin: 0 6px; vertical-align: middle; background: var(--surface-soft); } .title-chip.rar-rare { background: #e4f0ff; color: #2f7bd8; } .title-chip.rar-epic { background: #f1e4ff; color: #9a4dd6; } .title-chip.rar-legendary { background: linear-gradient(90deg, #ffe39a, #ffc24d); color: #5e3b00; }
.cos-title b { font-size: 12px; }
/* fons de perfil */
.banner-dawn, .cos-banner.banner-dawn { background: linear-gradient(120deg, #ffd6a5, #ffadad) !important; } .banner-forest, .cos-banner.banner-forest { background: linear-gradient(120deg, #b8e0c2, #5aa17f) !important; } .banner-city, .cos-banner.banner-city { background: linear-gradient(120deg, #1a1336, #3b2a8f, #ff4fa3) !important; } .banner-galaxy, .cos-banner.banner-galaxy { background: radial-gradient(circle at 30% 30%, #b44dff, #1a1336 70%) !important; } .banner-royal, .cos-banner.banner-royal { background: linear-gradient(120deg, #5b2a86, #f5b400) !important; }
.insta-head[class*="banner-"] { padding: 22px; border-radius: 26px; color: #fff; } .insta-head[class*="banner-"] .insta-bio, .insta-head[class*="banner-"] .muted { color: #ffffffdd; }
/* obertura */
.opening { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 22px 12px 10px; border-radius: 22px; max-width: 520px; } .opening-chest { transform: scale(1.8); margin: 26px 0 18px; }
.rewards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .reward { display: grid; gap: 4px; justify-items: center; width: 118px; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); opacity: 0; transform: translateY(14px) scale(.8); animation: reward-in .5s var(--d, 1s) forwards; } .reward small { color: var(--muted); font-weight: 700; font-size: 11.5px; } .reward.xp span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #6d4dff, #ff4fa3); color: #fff; } .reward.xp strong { color: var(--purple); }
.reward.rar-rare { border-color: #7fb4ff; } .reward.rar-epic { border-color: #b86cf0; box-shadow: 0 0 16px #b86cf055; } .reward.rar-legendary { border-color: #f5b400; box-shadow: 0 0 22px #f5b40088; }
@keyframes reward-in { to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .chest-slots { grid-template-columns: 1fr 1fr; } .chest-strip { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .chest-art, .chest-art *, .reward { animation: none !important; } .reward { opacity: 1; transform: none; } }

/* ============ El teu company (creador) i company acompanyant ============ */
.comp-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.comp-preview { position: sticky; top: 90px; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px; border-radius: 28px; background: radial-gradient(120% 90% at 50% 0%, #4a2a9a, #1a1336 70%); color: #fff; }
.comp-stage { width: 100%; aspect-ratio: 1; max-width: 300px; } .comp-stage .avatar-3d, .comp-stage .face { width: 100%; height: 100%; }
.comp-name { color: #fff; font-size: 28px; } .comp-preview .muted { color: #ffffffb3; } .comp-preview-actions { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.comp-form { display: grid; gap: 16px; min-width: 0; }
.comp-name-row { display: grid; gap: 6px; } .comp-name-row input { font: inherit; font-size: 18px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); max-width: 360px; } .comp-name-row input:focus { border-color: var(--purple); outline: none; }
.comp-bases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .comp-base { position: relative; display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: center; } .comp-base small { color: var(--muted); font-size: 11.5px; } .comp-base.on { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); } .comp-base.locked { opacity: .55; } .comp-base em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--purple); display: inline-flex; gap: 4px; align-items: center; } .comp-base em .icon { width: 12px; height: 12px; }
.comp-base-face { width: 76px; height: 76px; display: block; } .comp-base-face .avatar-3d, .comp-base-face .face { width: 100%; height: 100%; }
.comp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .comp-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .comp-opt .icon { width: 22px; height: 22px; color: var(--purple); flex: 0 0 auto; margin-top: 2px; } .comp-opt small { display: block; color: var(--muted); margin-top: 2px; font-style: italic; } .comp-opt.on { border-color: var(--purple); background: var(--purple-soft); }
.comp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .comp-chip { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; } .comp-chip.on { border-color: var(--purple); background: var(--purple-soft); color: var(--purple-dark); }
.comp-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .comp-note { font-size: 12.5px; }
#companion-widget { position: fixed; left: 12px; bottom: 104px; z-index: 38; display: grid; gap: 8px; justify-items: start; } #companion-widget[hidden] { display: none; }
.cw-face { all: unset; cursor: pointer; display: block; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #6d4dff55, #1a133688); border: 3px solid #fff; box-shadow: 0 10px 26px #2a1a5a55; } .cw-face:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; } .cw-face .avatar-3d, .cw-face .face { width: 100%; height: 100%; display: block; }
#companion-widget.talking .cw-face { animation: cw-bounce .6s ease; } @keyframes cw-bounce { 40% { transform: translateY(-8px); } }
.cw-bubble { max-width: min(260px, 70vw); padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: #fff; color: #1a1336; box-shadow: 0 12px 30px #2a1a5a40; display: grid; gap: 8px; } .cw-bubble[hidden] { display: none; } .cw-bubble p { margin: 0; font-weight: 650; font-size: 14px; line-height: 1.4; } .cw-talk { border: 0; background: var(--purple); color: #fff; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; justify-self: start; }
@media (max-width: 860px) { .comp-layout { grid-template-columns: 1fr; } .comp-preview { position: static; } #companion-widget { bottom: 96px; left: 8px; } .cw-face { width: 64px; height: 64px; } }

/* Pràctica infinita */
.endless-hero { background: linear-gradient(135deg, #0f9d8a, #3f9bff 55%, #6d4dff); }
.endless-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.endless-tile { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); flex-wrap: wrap; } .endless-tile > div { flex: 1; min-width: 220px; } .endless-tile h3 { font-size: 20px; } .endless-tile p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.endless-tile.daily { border-color: #ffb03b; background: linear-gradient(120deg, #fff7e6, var(--surface)); } .endless-tile.daily.done { border-color: var(--mint-ink); background: var(--surface); }
:root[data-theme="dark"] .endless-tile.daily { background: linear-gradient(120deg, #3a2c14, var(--surface)); }
.endless-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #6d4dff, #ff4fa3); color: #fff; flex: 0 0 auto; } .endless-ic .icon { width: 28px; height: 28px; }
.endless-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .endless-top h1 { font-size: 26px; } .endless-top .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.endless-stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .endless-stats span { display: inline-flex; gap: 6px; align-items: center; background: var(--surface-soft); padding: 6px 12px; border-radius: 999px; font-size: 13px; } .endless-stats .icon { width: 15px; height: 15px; color: var(--purple); }
.endless-dots { margin: 0 0 14px; } .endless-dots i { background: var(--line); } .endless-dots i.done { background: var(--mint-ink); } .endless-dots i.now { background: var(--purple); }
.endless-card { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; } .endless-card .lesson-options { display: grid; gap: 10px; }
.endless-feedback { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; font-weight: 700; flex-wrap: wrap; } .endless-feedback.ok { background: #d7f5e5; color: #1d6b49; } .endless-feedback.bad { background: #ffe0e0; color: #8f2020; } .endless-feedback .button { margin-left: auto; } .endless-feedback .icon { width: 20px; height: 20px; }

/* L'avatar dins l'orb de la conversa en directe */
.live-orb.with-avatar { width: min(72vw, 340px); }
.live-orb.with-avatar > i { opacity: .55; }
.live-avatar { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff6, transparent 70%); }
.live-avatar .avatar-3d { position: absolute; inset: 0; display: block; }
.live-orb.with-avatar { transform: scale(calc(1 + var(--level, 0) * .05)); }

/* ===== Mòbil professional: tipografia mesurada, menys soroll, res no es talla ===== */
h1, h2, h3, .hero h2, .hero-copy h2 { word-spacing: .04em; }
h1 { letter-spacing: -.5px; } h2 { letter-spacing: -.3px; } .hero h2 { letter-spacing: -.6px; }
@media (max-width: 720px) {
  body { font-size: 15px; }
  h1 { font-size: 25px; line-height: 1.2; letter-spacing: -.4px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
  .workspace { padding: 0 16px 120px; }
  .topbar { min-height: 60px; margin-bottom: 14px; gap: 8px; }
  .topbar-right { gap: 8px; }
  #companion-widget { display: none !important; }
  #bit-robot { left: auto !important; right: 10px !important; top: auto !important; bottom: 104px !important; width: 52px; }
  #bit-robot .bit-body, #bit-robot .bit-body svg { width: 52px; }
  .space-tabs { top: 62px; margin: 0 -16px 16px; width: auto; max-width: none; border-radius: 0; padding: 6px 12px; border-left: 0; border-right: 0; box-shadow: none; background: var(--surface); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .space-tabs a { padding: 8px 14px; font-size: 13px; }
  .hero, .hero.aurora { min-height: 0; padding: 20px; border-radius: 22px; }
  .hero h2, .hero.aurora h2 { font-size: 26px; line-height: 1.15; margin: 10px 0; }
  .hero p { font-size: 14px; line-height: 1.5; }
  .hero.aurora .hero-copy, .hero-copy { max-width: 100%; }
  .hero-actions { gap: 8px; flex-wrap: wrap; } .hero-actions .button { padding: 12px 16px; font-size: 14px; }
  .hero-art { display: flex; align-items: center; gap: 12px; margin-top: 14px; position: static; }
  .hero-art .avatar-3d, .hero-art .face { width: 72px; height: 72px; }
  .hero-talk { position: static; }
  .hero-bubbles, .hero::after { display: none; }
  .page-help { padding: 12px 14px; gap: 10px; border-radius: 16px; flex-wrap: wrap; margin-bottom: 14px; }
  .page-help-icon { width: 30px; height: 30px; border-radius: 10px; }
  .page-help ul { display: none; } .page-help p { font-size: 13px; margin: 2px 0; } .page-help h3 { font-size: 15px; }
  .page-help > .button { margin-left: 0; padding: 8px 14px; font-size: 13px; }
  .panel, .card, .stat-card { border-radius: 18px; }
  .dock { left: 10px; right: 10px; transform: none; justify-content: space-around; gap: 0; padding: 6px 8px; border-radius: 24px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .dock-item { min-width: 0; flex: 1; padding: 6px 4px 5px; } .dock-item:hover { transform: none; }
  .dock-icon { width: 34px; height: 34px; } .dock-label { font-size: 10px; }
  .dock-item.main { margin: 0; flex: 1.1; } .dock-item.main .dock-icon { width: 50px; height: 50px; margin-top: -22px; border-radius: 18px; }
  .live-banner, .upsell, .conversation-banner { border-radius: 20px; padding: 18px; }
  .button { min-height: 44px; }
}
@media (max-width: 720px) {
  .install-pill, .language-pill { display: none !important; }
  .top-actions { gap: 8px; margin-left: auto; }
  .premium-link span { display: none; } .premium-link { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .rank-pill .rank-text small { display: none; }
  .page-help { flex-wrap: nowrap; align-items: center; } .page-help > div { flex: 1; min-width: 0; } .page-help > .button { flex: 0 0 auto; }
  .page-help-icon { flex: 0 0 auto; }
  .hero-art { margin-left: 0; } .hero-art > * { margin: 0; }
  .hero-art .avatar-3d, .hero-art .face, .hero-art .avatar-portrait { width: 64px !important; height: 64px !important; flex: 0 0 64px; }
}
@media (max-width: 720px) {
  .hero.aurora .hero-art, .hero-art { position: static !important; width: auto !important; transform: none !important; right: auto; bottom: auto; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
  .hero.aurora .hero-art .face, .hero-art .face, .hero-art .avatar-3d { width: 64px !important; max-width: 64px !important; height: 64px !important; margin: 0 !important; }
  .hero-art .avatar-3d canvas { border-radius: 50%; }
}
@media (max-width: 720px) {
  .hero-art .avatar-3d, .hero-art .face { aspect-ratio: 1 / 1; height: 72px !important; width: 72px !important; max-width: 72px !important; border-radius: 50%; overflow: hidden; flex: 0 0 72px; }
  .comp-preview .comp-stage, .comp-preview .avatar-3d, .comp-preview .face { max-width: 200px; margin-left: auto; margin-right: auto; }
  .comp-preview { padding: 18px; }
}

/* ===== Mòbil: més aire entre elements ===== */
@media (max-width: 720px) {
  .workspace { padding: 0 20px 132px; }
  .topbar { margin-bottom: 22px; }
  .page-frame > * + *, .home-layout > * + *, main > * + * { margin-top: 24px; }
  .cards-grid, .avatar-grid, .endless-grid, .zone-grid, .home-zones, .plans-grid, .play-grid, .stats-grid { gap: 20px !important; }
  .panel, .card, .stat-card, .zone-card, .game-card, .play-card { padding: 20px; }
  .hero, .hero.aurora { padding: 26px 22px; }
  .hero-actions { margin-top: 18px; gap: 12px; }
  .hero p { margin: 12px 0 0; line-height: 1.6; }
  h1 { margin-bottom: 10px; } h1 + p, .page-heading p { line-height: 1.6; margin-bottom: 8px; }
  h2 { margin-top: 28px; margin-bottom: 14px; } h3 { margin-bottom: 6px; }
  p { line-height: 1.6; }
  .page-heading { margin: 8px 0 22px; gap: 12px; }
  .space-tabs { margin-bottom: 22px; }
  .page-help { padding: 16px; margin-bottom: 22px; }
  .filter-row { gap: 10px; margin: 14px 0 20px; }
  .button + .button { margin-top: 10px; }
  .check-list li, .perk-list li, .plan-features li { margin-bottom: 8px; }
  .dock { left: 14px; right: 14px; }
  .live-banner, .upsell, .conversation-banner { padding: 22px; margin: 24px 0; }
  .hub-hero, .play-hero { padding: 26px 22px; }
}
@media (max-width: 720px) {
  .hero-art .avatar-3d { display: block; position: relative; }
  .hero-art .avatar-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  .hero-art .avatar-3d .face, .hero-art .avatar-3d svg { width: 100% !important; height: 100% !important; }
}
@media (max-width: 720px) { .home-hero .hero-art .avatar-3d, .home-hero .hero-art .face { width: 84px !important; height: 84px !important; max-width: 84px !important; flex: 0 0 84px !important; aspect-ratio: 1 / 1 !important; } }

/* ===== Lliga setmanal ===== */
.league-head { display: flex; gap: 18px; align-items: center; padding: 22px; margin: 16px 0; border-radius: 24px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, #1a1230), color-mix(in srgb, var(--c) 55%, #2a1c5e)); box-shadow: 0 18px 40px color-mix(in srgb, var(--c) 30%, transparent); }
.league-head h2 { margin: 4px 0 6px; color: #fff; } .league-head p { margin: 0 0 10px; color: #ffffffdd; } .league-head .eyebrow { color: #ffffffcc; }
.league-badge { width: 74px; height: 74px; flex: 0 0 74px; display: grid; place-items: center; border-radius: 22px; background: #ffffff26; border: 1px solid #ffffff40; } .league-badge .icon { width: 38px; height: 38px; }
.league-meta { display: flex; flex-wrap: wrap; gap: 8px; } .league-meta span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: #00000026; font-size: 13px; font-weight: 700; } .league-meta .icon { width: 15px; height: 15px; }
.league-steps { display: flex; gap: 8px; justify-content: center; margin: 4px 0 16px; } .league-step { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2, #f1eefb); opacity: .55; } .league-step i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); } .league-step.on { opacity: 1; box-shadow: 0 0 0 3px var(--c); } .league-step.done { opacity: .85; }
.league-last { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; background: var(--purple-soft); font-size: 14px; } .league-last.promoted { background: #dff7ec; color: #11553b; } .league-last.demoted { background: #ffe9e4; color: #7a2c1c; } .league-last .icon { width: 20px; height: 20px; flex: 0 0 20px; }
.league-list li.up b { color: #17a06b; } .league-list li.down b { color: #d9573a; }
.league-sep { list-style: none; display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .league-sep::before, .league-sep::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: .3; } .league-sep.up { color: #17a06b; } .league-sep.down { color: #d9573a; }
@media (max-width: 720px) { .league-head { padding: 18px; gap: 14px; flex-direction: column; align-items: flex-start; } .league-badge { width: 56px; height: 56px; flex-basis: 56px; border-radius: 18px; } }

/* ===== Duels ===== */
.duel-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 16px 0; }
.duel-player { display: grid; gap: 4px; justify-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-align: center; } .duel-player.you { border-color: var(--purple); box-shadow: 0 8px 24px #6d4dff22; }
.duel-face .user-face, .duel-face .face { width: 52px; height: 52px; } .duel-player small { color: var(--muted); font-weight: 700; }
.duel-bar { width: 100%; height: 7px; border-radius: 999px; background: var(--purple-soft); overflow: hidden; } .duel-bar i { display: block; height: 100%; background: var(--grad); transition: width .4s; }
.duel-vs { font-weight: 900; font-size: 18px; color: var(--muted); }
.duel-hero.win { background: linear-gradient(135deg, #12a06b, #3ac1a0); } .duel-hero.loss { background: linear-gradient(135deg, #3a2b6b, #6a4fcf); } .duel-hero.draw { background: linear-gradient(135deg, #6a4fcf, #ff6fa0); }
.duel-count { margin: 18px auto 0; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; font-size: 48px; font-weight: 900; background: #ffffff22; border: 2px solid #ffffff55; color: #fff; }
.duel-radar { position: relative; width: 120px; height: 120px; margin: 18px 0 4px; } .duel-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ffffff88; animation: duel-ping 2.4s ease-out infinite; } .duel-radar i:nth-child(2) { animation-delay: .8s; } .duel-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes duel-ping { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.duel-top { margin-top: 8px; }
@media (max-width: 720px) { .duel-board { grid-template-columns: 1fr 1fr; } .duel-vs { display: none; } }

.zone-big.feature { grid-column: 1 / -1; min-height: 150px; background: linear-gradient(135deg, #3b2a8f, #7b4dff 55%, #ff6fa0); color: #fff; box-shadow: 0 18px 44px #6d4dff40; } .zone-big.feature strong { font-size: 24px; } .zone-big.feature small, .zone-big.feature em { color: #ffffffdd; } .zone-big.feature .zone-big-icon { background: #ffffff26; color: #fff; }

/* ===== Notificacions ===== */
.push-prompt { display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin: 0 0 18px; border-radius: 20px; background: linear-gradient(135deg, #fff4e0, #ffe3ef); border: 1px solid #ffd2a8; } .push-prompt strong { display: block; } .push-prompt p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.push-ic { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; background: var(--grad); color: #fff; } .push-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.toggle-list { display: grid; gap: 4px; margin-top: 12px; } .toggle-list .toggle-row small { display: block; color: var(--muted); font-weight: 500; }
@media (max-width: 720px) { .push-prompt { flex-wrap: wrap; } .push-actions { margin-left: 0; width: 100%; } }

/* ===== Especialistes: colors addicionals ===== */
.ruby-card { --card-grad: linear-gradient(135deg, #ff5a7a, #c42b5a); } .gold-card { --card-grad: linear-gradient(135deg, #ffc84a, #ff8f3a); } .violet-card { --card-grad: linear-gradient(135deg, #9b5cf0, #5b4dff); }
.mint-card { --card-grad: linear-gradient(135deg, #3ad6a8, #19a7c6); } .rose-card { --card-grad: linear-gradient(135deg, #ff7eb6, #c63b78); } .slate-card { --card-grad: linear-gradient(135deg, #6f86b8, #3a4a7a); } .teal-card { --card-grad: linear-gradient(135deg, #2ec4b6, #168aad); }
.mind-topic { font-weight: 800; color: var(--purple); }

/* ===== Duels estil Clash: arena, torres, corones ===== */
.duel-lobby { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; overflow: hidden; padding: 28px; border-radius: 30px; color: #fff; background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 24px 60px color-mix(in srgb, var(--c2) 40%, transparent); }
.duel-lobby h1, .duel-lobby p, .duel-lobby .eyebrow { color: #fff; } .duel-lobby p { opacity: .9; margin: 6px 0 14px; }
.duel-lobby-art { position: relative; display: grid; place-items: center; min-height: 190px; } .duel-lobby-art i { position: absolute; border-radius: 50%; background: #ffffff1f; } .duel-lobby-art i:nth-of-type(1) { width: 210px; height: 210px; } .duel-lobby-art i:nth-of-type(2) { width: 150px; height: 150px; background: #ffffff26; } .duel-lobby-art i:nth-of-type(3) { width: 96px; height: 96px; background: #ffffff33; }
.duel-lobby-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; filter: drop-shadow(0 10px 18px #0003); } .duel-lobby-icon .icon { width: 70px; height: 70px; stroke-width: 1.6; }
.duel-trophy-big { display: flex; align-items: baseline; gap: 8px; } .duel-trophy-big .icon { width: 30px; height: 30px; align-self: center; color: #ffe27a; } .duel-trophy-big strong { font-size: 46px; line-height: 1; letter-spacing: -1px; } .duel-streak { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #0003; font-size: 13px; font-weight: 800; }
.duel-progress { height: 12px; margin: 12px 0 6px; border-radius: 999px; background: #0003; overflow: hidden; } .duel-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffe27a, #fff); }
.duel-next { opacity: .9; } .duel-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; } .duel-left { font-weight: 700; opacity: .9; }
.duel-battle { }
.button.duel-battle { min-height: 60px; padding: 0 38px; font-size: 22px; font-weight: 900; letter-spacing: .06em; color: #4a2a00; background: linear-gradient(180deg, #ffe27a, #ffb21f); border: 0; border-bottom: 5px solid #c77f00; border-radius: 18px; box-shadow: 0 10px 24px #c77f0055; animation: duel-pulse 1.6s ease-in-out infinite; } .button.duel-battle:active { transform: translateY(3px); border-bottom-width: 2px; } .button.duel-battle .icon { width: 24px; height: 24px; }
@keyframes duel-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.duel-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; } .duel-stats-row div { padding: 14px; text-align: center; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); } .duel-stats-row strong { display: block; font-size: 26px; } .duel-stats-row small { color: var(--muted); font-weight: 700; }
.duel-top h3 { display: flex; gap: 8px; align-items: center; } .duel-top .rank-list li strong { display: inline-flex; gap: 4px; align-items: center; } .duel-top .icon { width: 16px; height: 16px; }
.duel-search { display: grid; place-items: center; min-height: 60vh; } .duel-search-card { text-align: center; max-width: 440px; } .duel-radar { position: relative; width: 150px; height: 150px; margin: 22px auto; display: grid; place-items: center; } .duel-radar i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--purple); animation: duel-ping 2.4s ease-out infinite; } .duel-radar i:nth-child(2) { animation-delay: .8s; } .duel-radar i:nth-child(3) { animation-delay: 1.6s; } .duel-radar b { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; } .duel-radar b .icon { width: 32px; height: 32px; }
.duel-vs-screen { min-height: 62vh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 24px; border-radius: 30px; color: #fff; background: radial-gradient(circle at 50% 50%, #ffffff22, transparent 60%), linear-gradient(140deg, var(--c1), var(--c2)); text-align: center; }
.duel-vs-side { display: grid; justify-items: center; gap: 8px; animation: duel-slide-l .6s ease-out; } .duel-vs-side.opp { animation-name: duel-slide-r; } .duel-vs-side .user-face, .duel-vs-side .face { width: 96px; height: 96px; } .duel-vs-side small { display: inline-flex; gap: 4px; align-items: center; opacity: .9; } .duel-vs-side small .icon { width: 14px; height: 14px; }
.duel-vs-mid b { display: block; font-size: 54px; font-style: italic; text-shadow: 0 4px 0 #0004; } .duel-count { margin: 10px auto 0; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; font-size: 48px; font-weight: 900; background: #ffffff26; border: 3px solid #fff; animation: duel-beat 1s ease-in-out infinite; }
@keyframes duel-slide-l { from { transform: translateX(-60px); opacity: 0; } } @keyframes duel-slide-r { from { transform: translateX(60px); opacity: 0; } } @keyframes duel-beat { 50% { transform: scale(1.12); } }
.duel-arena { position: relative; display: grid; gap: 0; margin: 8px 0 12px; border-radius: 26px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--c2) 70%, #000); background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--c1) 22%, #1c4a36) 0 25%, color-mix(in srgb, var(--c1) 12%, #20563f) 0 50%) 0 0 / 56px 56px; box-shadow: 0 16px 40px #0003; }
.duel-side { position: relative; padding: 12px 14px 8px; } .duel-side.opp { background: linear-gradient(180deg, #ff6f8a30, transparent); } .duel-side.you { background: linear-gradient(0deg, #6d4dff30, transparent); }
.duel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #fff; font-weight: 800; text-shadow: 0 1px 2px #0006; } .duel-head .user-face, .duel-head .face { width: 34px; height: 34px; } .duel-trophies { display: inline-flex; gap: 3px; align-items: center; padding: 2px 8px; border-radius: 999px; background: #0004; font-size: 13px; } .duel-trophies .icon { width: 13px; height: 13px; color: #ffe27a; }
.duel-crowns { display: inline-flex; gap: 2px; } .duel-crowns i { display: grid; opacity: .28; filter: grayscale(1); } .duel-crowns i.on { opacity: 1; filter: none; color: #ffd34d; animation: duel-pop .5s; } .duel-crowns .icon { width: 18px; height: 18px; }
@keyframes duel-pop { 0% { transform: scale(.2) rotate(-20deg); } 70% { transform: scale(1.4); } 100% { transform: scale(1); } }
.duel-emote { margin-left: auto; padding: 4px 10px; font-size: 24px; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px #0004; animation: duel-pop .35s; }
.duel-towers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; justify-items: center; padding: 4px 6px 0; }
.duel-tower { position: relative; width: 72px; transition: transform .2s; } .duel-tower.king { width: 88px; } .duel-tower svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px #0004); }
.duel-hp { height: 7px; margin-top: 2px; border-radius: 99px; background: #0006; overflow: hidden; } .duel-hp i { display: block; height: 100%; background: linear-gradient(90deg, #7cff6b, #3ad06b); transition: width .5s; } .duel-side.opp .duel-hp i { background: linear-gradient(90deg, #ff9a6b, #ff4d6b); }
.duel-tower.destroyed .duel-hp { visibility: hidden; } .duel-tower.hit { animation: duel-shake .5s; } .duel-tower.hit svg { filter: drop-shadow(0 0 14px #fff) brightness(1.4); }
@keyframes duel-shake { 20%, 60% { transform: translateX(-4px) rotate(-2deg); } 40%, 80% { transform: translateX(4px) rotate(2deg); } }
.duel-river { position: relative; height: 38px; display: grid; place-items: center; background: repeating-linear-gradient(90deg, #4fb7ff 0 28px, #6fd0ff 28px 56px); box-shadow: inset 0 4px 0 #ffffff55, inset 0 -4px 0 #0a5fa855; } .duel-vs { font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 2px 0 #0a5fa8; letter-spacing: .1em; }
.duel-fx { position: absolute; inset: -140px 0 -140px 0; pointer-events: none; z-index: 5; }
.duel-bolt { position: absolute; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd34d 60%, transparent 72%); box-shadow: 0 0 16px 6px #ffd34d88; animation-duration: .65s; animation-timing-function: ease-in; animation-fill-mode: forwards; } .duel-bolt.from-you { top: calc(100% - 20px); animation-name: duel-bolt-up; } .duel-bolt.from-opp { top: 20px; animation-name: duel-bolt-down; background: radial-gradient(circle, #fff, #ff6b8a 60%, transparent 72%); box-shadow: 0 0 16px 6px #ff6b8a88; }
@keyframes duel-bolt-up { to { top: 14px; opacity: .2; } } @keyframes duel-bolt-down { to { top: calc(100% - 14px); opacity: .2; } }
.duel-float { position: absolute; margin-left: -26px; width: 52px; text-align: center; font-weight: 900; font-size: 24px; color: #fff; text-shadow: 0 2px 0 #b52a41, 0 0 8px #000a; animation: duel-float 1.1s ease-out forwards; } .duel-float.on-opp { top: 12px; } .duel-float.on-you { bottom: 12px; color: #ffd0d8; }
@keyframes duel-float { from { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: 1; transform: translateY(-8px) scale(1.25); } to { transform: translateY(-46px) scale(1); opacity: 0; } }
.duel-qbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; } .duel-qnum { font-weight: 800; font-size: 13px; color: var(--muted); white-space: nowrap; }
.duel-timer { flex: 1; height: 12px; border-radius: 99px; background: var(--purple-soft); overflow: hidden; border: 2px solid var(--line); } .duel-timer i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6d4dff, #b24dff); transition: width .1s linear; } .duel-timer i.low { background: linear-gradient(90deg, #ff9a3c, #ff3d57); animation: duel-urgent .5s infinite alternate; } @keyframes duel-urgent { to { filter: brightness(1.3); } }
.duel-combo { padding: 3px 10px; border-radius: 99px; font-weight: 900; font-size: 13px; color: #7a2c00; background: linear-gradient(180deg, #ffe27a, #ffb21f); animation: duel-pop .4s; }
.duel-card { padding-bottom: 22px; }
.duel-emotes { position: fixed; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: 8px; } .duel-emote-toggle { width: 52px; height: 52px; font-size: 26px; border-radius: 50%; border: 3px solid #fff; background: var(--grad); box-shadow: 0 8px 20px #0004; cursor: pointer; } .duel-emote-list { display: none; gap: 6px; padding: 6px 10px; border-radius: 99px; background: var(--surface); box-shadow: 0 8px 24px #0003; } .duel-emotes.open .duel-emote-list { display: flex; } .duel-emote-list button { font-size: 26px; background: none; border: 0; cursor: pointer; transition: transform .15s; } .duel-emote-list button:hover { transform: scale(1.3); }
.duel-result { padding: 30px 22px; text-align: center; border-radius: 30px; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); } .duel-result.loss { background: linear-gradient(150deg, #5b5a7a, #2c2b4a); } .duel-result.draw { background: linear-gradient(150deg, #7a6cf0, #ff7eb6); }
.duel-result h1 { color: #fff; font-size: clamp(38px, 8vw, 64px); font-style: italic; letter-spacing: .03em; text-shadow: 0 4px 0 #0004; animation: duel-pop .6s; }
.duel-result-crowns { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0; } .duel-result-crowns > div { display: grid; gap: 4px; justify-items: center; font-weight: 800; } .duel-result-crowns b { font-size: 30px; } .duel-result-crowns .icon { width: 34px; height: 34px; }
.duel-reward-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0; } .duel-reward { min-width: 120px; padding: 14px 18px; border-radius: 20px; background: #0003; display: grid; gap: 2px; justify-items: center; animation: duel-slide-l .5s backwards; } .duel-reward:nth-child(2) { animation-delay: .15s; } .duel-reward:nth-child(3) { animation-delay: .3s; } .duel-reward strong { font-size: 30px; } .duel-reward .icon { width: 26px; height: 26px; } .duel-reward.plus strong { color: #b6ff9a; } .duel-reward.minus strong { color: #ffb0b0; } .duel-reward.chest { background: linear-gradient(180deg, #ffe27a, #ffb21f); color: #4a2a00; }
.duel-arena-up { display: inline-flex; gap: 10px; align-items: center; padding: 10px 18px; margin-bottom: 14px; border-radius: 99px; background: #ffffff26; font-weight: 700; } .duel-arena-up .icon { width: 22px; height: 22px; color: #ffe27a; }
@media (max-width: 720px) { .duel-lobby { grid-template-columns: 1fr; padding: 22px; } .duel-lobby-art { min-height: 130px; } .duel-lobby-art i:nth-of-type(1) { width: 150px; height: 150px; } .duel-lobby-art i:nth-of-type(2) { width: 110px; height: 110px; } .duel-lobby-art i:nth-of-type(3) { width: 72px; height: 72px; } .duel-stats-row { grid-template-columns: repeat(2, 1fr); } .duel-vs-screen { grid-template-columns: 1fr; min-height: 70vh; } .duel-tower { width: 58px; } .duel-tower.king { width: 72px; } .duel-emotes { bottom: calc(100px + env(safe-area-inset-bottom)); } .button.duel-battle { width: 100%; } }
@media (max-width: 720px) { .duel-tower { width: 46px; } .duel-tower.king { width: 58px; } .duel-side { padding: 8px 10px 6px; } .duel-river { height: 26px; } .duel-head .user-face, .duel-head .face { width: 28px; height: 28px; } .duel-arena { margin: 4px 0 8px; } }
@media (max-width: 720px) { .mind-feature { grid-template-columns: 84px 1fr; gap: 14px; padding: 16px; border-radius: 22px; align-items: start; } .mind-feature .mind-face.large, .mind-feature .mind-face .face { width: 84px; height: 84px; } .mind-feature h2 { font-size: 18px; margin: 2px 0; } .mind-feature p { font-size: 13.5px; margin: 4px 0; } .mind-actions { flex-wrap: wrap; gap: 8px; } .mind-actions .button { padding: 8px 14px; min-height: 40px; } .minds-grid { gap: 14px; } }
.landing-copy h1, .landing-hero h1 { letter-spacing: -1px; word-spacing: .08em; }
@media (max-width: 720px) { .landing-copy h1, .landing-hero h1 { letter-spacing: -.6px; word-spacing: .1em; } }

/* ===== Conversa en directe: PRO PRO ===== */
.pro-glow { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3a2470, transparent 60%), radial-gradient(100% 120% at 100% 100%, #8a5a00, transparent 55%), linear-gradient(135deg, #14102a, #1f1744 55%, #2b1a0a); border: 1px solid #ffd34d66; box-shadow: 0 0 0 1px #ffd34d22, 0 20px 50px #ffb21f33, inset 0 1px 0 #ffffff22; }
.pro-glow::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #ffe27a22 48%, transparent 60%); transform: translateX(-100%); animation: pro-shine 4.5s ease-in-out infinite; }
@keyframes pro-shine { 55%, 100% { transform: translateX(100%); } }
.pro-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: #4a2a00; background: linear-gradient(180deg, #ffe27a, #ffb21f); box-shadow: 0 4px 14px #ffb21f66; } .pro-badge .icon { width: 14px; height: 14px; }
.live-banner.pro-glow h2 { margin: 8px 0 4px; } .live-banner.pro-glow p strong { color: #ffe27a; }
.pro-why { list-style: none; display: grid; gap: 6px; margin: 12px 0 8px; padding: 0; } .pro-why li { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; color: #fff; } .pro-why .icon { width: 16px; height: 16px; color: #ffd34d; }
.pro-note { color: #ffffffa8; display: block; } .pro-cta { color: #4a2a00; font-weight: 900; background: linear-gradient(180deg, #ffe27a, #ffb21f); border: 0; border-bottom: 4px solid #c77f00; box-shadow: 0 8px 22px #ffb21f55; }
.pro-why-card { padding: 20px; margin: 18px 0; border-radius: 24px; text-align: left; } .pro-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; } .pro-why-grid > div { display: grid; gap: 4px; padding: 12px; border-radius: 16px; background: #ffffff10; } .pro-why-grid .icon { width: 22px; height: 22px; color: #ffd34d; } .pro-why-grid small { color: #ffffffb8; line-height: 1.4; }
.space-tabs a[href='#live'] { color: #b87a00; font-weight: 900; } .space-tabs a[href='#live'].active { color: #4a2a00; background: linear-gradient(180deg, #ffe27a, #ffb21f); box-shadow: 0 6px 16px #ffb21f55; }
@media (max-width: 720px) { .pro-why-grid { grid-template-columns: 1fr; } .live-banner.pro-glow { flex-wrap: wrap; } .live-banner.pro-glow .button { width: 100%; margin-left: 0; } }

.plan-card li.not-included { opacity: .8; color: var(--muted); } .plan-card li.not-included .icon { color: #d9a000; }

/* ===== PRO = DIAMANT: gel i cristall, clarament per sobre de Premium (or/violeta) ===== */
:root { --diamond: linear-gradient(135deg, #e9fcff 0%, #7fe8ff 38%, #8fa8ff 72%, #e8d9ff 100%); --diamond-ink: #08304a; --diamond-glow: #6fe3ff; }
.pro-glow { background: radial-gradient(120% 140% at 0% 0%, #0f3a73, transparent 60%), radial-gradient(100% 120% at 100% 100%, #5b3fd1, transparent 55%), linear-gradient(135deg, #071a3a, #0c2a58 55%, #1a1a55); border: 1px solid #7fe8ff88; box-shadow: 0 0 0 1px #7fe8ff33, 0 20px 60px #35b8ff40, inset 0 1px 0 #ffffff33; }
.pro-glow::after { background: linear-gradient(115deg, transparent 35%, #cffaff30 48%, transparent 60%); }
.pro-badge { color: var(--diamond-ink); background: var(--diamond); box-shadow: 0 4px 16px #6fe3ff77, inset 0 1px 0 #fff; text-shadow: 0 1px 0 #ffffff88; }
.live-banner.pro-glow p strong { color: #9ef0ff; } .pro-why .icon, .pro-why-grid .icon { color: #8fe8ff; }
.pro-cta { color: var(--diamond-ink); background: var(--diamond); border-bottom: 4px solid #4aa8d8; box-shadow: 0 8px 24px #6fe3ff66; }
.space-tabs a[href='#live'] { color: #1a7aa8; } .space-tabs a[href='#live'].active { color: var(--diamond-ink); background: var(--diamond); box-shadow: 0 6px 18px #6fe3ff66; }
.premium-badge.pro { background: var(--diamond); color: var(--diamond-ink); box-shadow: 0 0 0 2px #fff, 0 0 14px #6fe3ff; animation: gem-glint 3.2s ease-in-out infinite; } .premium-link.pro-link { background: var(--diamond); color: var(--diamond-ink); }
@keyframes gem-glint { 50% { box-shadow: 0 0 0 2px #fff, 0 0 22px #9ef0ff; filter: brightness(1.12); } }
.profile-dot.tier-pro { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #6fe3ff, 0 0 18px #6fe3ff; } .profile-dot.tier-premium { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffc94d; }
.plan-card .eyebrow .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.plans-grid .plan-card:last-child { background: linear-gradient(160deg, #0b2450, #14306b 60%, #2a2377); color: #fff; border: 1px solid #7fe8ff88; box-shadow: 0 16px 50px #35b8ff33; } .plans-grid .plan-card:last-child h3, .plans-grid .plan-card:last-child .price strong, .plans-grid .plan-card:last-child .price-alt, .plans-grid .plan-card:last-child li { color: #fff; } .plans-grid .plan-card:last-child .eyebrow { color: #9ef0ff; } .plans-grid .plan-card:last-child li .icon { color: #8fe8ff; }
.plan-table .pro-col:last-child { background: #7fe8ff18; }

.pro-pill { color: var(--diamond-ink); background: var(--diamond); box-shadow: 0 0 14px #6fe3ff66; border: 0; font-weight: 900; } .premium-crown.pro-gem { background: var(--diamond); color: var(--diamond-ink); box-shadow: 0 0 0 2px #fff, 0 0 14px #6fe3ff; }

.plan-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-weight: 800; font-size: 14px; color: var(--purple); text-decoration: none; } .plan-more .icon { width: 16px; height: 16px; } .plans-grid .plan-card:last-child .plan-more { color: #9ef0ff; }

.tier-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 900; letter-spacing: .02em; text-decoration: none; white-space: nowrap; } .tier-chip .icon { width: 17px; height: 17px; } .tier-chip b { font-weight: 900; }
.tier-chip.premium { color: #4a2a00; background: linear-gradient(135deg, #ffe27a, #ffb21f); box-shadow: 0 4px 14px #ffb21f55; }
.tier-chip.pro { color: var(--diamond-ink); background: var(--diamond); box-shadow: 0 0 0 2px #fff, 0 0 14px #6fe3ff; animation: gem-glint 3.2s ease-in-out infinite; }
@media (max-width: 420px) { .tier-chip { padding: 0 11px; } .tier-chip b { font-size: 12px; } }

/* Jugant: sense menú inferior, robot ni company flotant (no tapen el joc) */
body.in-game .dock, body.in-game #bit-robot, body.in-game #companion-widget { display: none !important; }
body.in-game .workspace { padding-bottom: 28px; }
/* Mini explicació de cada joc */
.howto { text-align: center; padding: 6px 4px 4px; } .howto-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: var(--grad); margin-bottom: 8px; } .howto-ic .icon { width: 32px; height: 32px; }
.howto ol { text-align: left; margin: 16px auto; padding-left: 24px; max-width: 420px; display: grid; gap: 8px; font-weight: 600; } .howto-tip { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 12px 0 18px; padding: 10px 14px; border-radius: 14px; background: var(--purple-soft); font-size: 14px; } .howto-tip .icon { width: 18px; height: 18px; color: var(--purple); flex: 0 0 auto; }

/* ===== Xenoleap: més espectacular (diamant, ona de veu, rellotge circular, resum) ===== */
.live-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; margin: 14px 0 2px; } .live-wave i { width: 5px; border-radius: 99px; height: calc(6px + var(--level, 0) * (14 + (var(--i) * 13 % 34)) * 1px); background: linear-gradient(180deg, #e9fcff, #6fe3ff 60%, #8fa8ff); box-shadow: 0 0 10px #6fe3ff66; transition: height .09s linear; opacity: calc(.45 + var(--level, 0)); }
.live-screen[data-mood='speaking'] .live-orb i { box-shadow: 0 0 60px #6fe3ff99; } .live-screen[data-mood='listening'] .live-wave i { filter: hue-rotate(-30deg); }
.live-clock.live-ring { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#6fe3ff calc(var(--p, 0) * 1%), #ffffff22 0); position: relative; } .live-clock.live-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0c1d3f; } .live-clock.live-ring b { position: relative; font-size: 13px; font-variant-numeric: tabular-nums; color: #fff; }
.live-topics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; align-items: center; } .live-topics > .muted { width: 100%; text-align: center; } .live-topic { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #cfe9ff; background: #ffffff14; border: 1px solid #ffffff26; cursor: pointer; } .live-topic .icon { width: 15px; height: 15px; } .live-topic.on { color: var(--diamond-ink); background: var(--diamond); border-color: transparent; box-shadow: 0 6px 18px #6fe3ff55; }
.live-end.pro-glow { padding: 28px 22px; border-radius: 28px; text-align: center; max-width: 520px; margin: 0 auto; } .live-end.pro-glow h1 { color: #fff; margin: 10px 0; }
.live-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; } .live-summary > div { padding: 14px 8px; border-radius: 18px; background: #ffffff12; animation: duel-slide-l .5s backwards; } .live-summary > div:nth-child(2) { animation-delay: .12s; } .live-summary > div:nth-child(3) { animation-delay: .24s; } .live-summary strong { display: block; font-size: 28px; color: #9ef0ff; } .live-summary small { color: #ffffffb0; }
.live-said { text-align: left; padding: 14px 16px; border-radius: 18px; background: #ffffff10; margin-bottom: 14px; } .live-said h3 { display: flex; gap: 8px; align-items: center; color: #fff; margin: 0 0 8px; font-size: 15px; } .live-said .icon { width: 16px; height: 16px; color: #8fe8ff; } .live-said ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #e6f4ff; font-size: 14px; } .live-said .muted { color: #ffffff99; margin: 8px 0 0; font-size: 12.5px; }

/* ===== Trivial Xeno ===== */
.trivial-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding: 28px; border-radius: 30px; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #6d4dff, transparent 60%), linear-gradient(140deg, #2a1c6b, #7b3fe4 60%, #ff5fa0); box-shadow: 0 24px 60px #6d4dff44; } .trivial-intro h1, .trivial-intro .eyebrow, .trivial-intro p { color: #fff; }
.trivial-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .trivial-legend span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--c); box-shadow: 0 4px 12px #0003; } .trivial-legend .icon { width: 15px; height: 15px; }
.trivial-wheel-wrap { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 0 auto; } .trivial-pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 4; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #fff; filter: drop-shadow(0 4px 6px #0006); }
.trivial-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 4px #ffffff55, 0 18px 40px #0005, inset 0 0 30px #0003; transform: rotate(var(--rot, 0deg)); } .trivial-wheel.spinning { transition: transform 3s cubic-bezier(.12, .7, .1, 1); }
.trivial-seg { position: absolute; top: 50%; left: 50%; width: 90px; margin: -22px 0 0 -45px; display: grid; justify-items: center; gap: 1px; color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 1px 3px #0007; text-align: center; } .trivial-seg .icon { width: 24px; height: 24px; } .trivial-seg b { font-size: 11px; line-height: 1.1; }
.trivial-hub { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #6d4dff; box-shadow: 0 4px 14px #0005; font-style: normal; font-weight: 900; } .trivial-hub .icon { width: 30px; height: 30px; }
.trivial-play { max-width: 760px; margin: 0 auto; } .trivial-play.shake { animation: duel-shake .5s; }
.trivial-hud { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin: 6px 0 14px; padding: 10px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); } .trivial-lives { display: inline-flex; gap: 4px; } .trivial-lives i { display: grid; color: #d3cfe6; } .trivial-lives i.on { color: #ff4d6d; animation: duel-pop .4s; } .trivial-lives .icon { width: 24px; height: 24px; fill: currentColor; }
.trivial-score { text-align: right; } .trivial-score strong { display: block; font-size: 26px; line-height: 1; } .trivial-score small { color: var(--muted); font-weight: 700; }
.trivial-pie { position: relative; width: 58px; height: 58px; border-radius: 50%; background: #e9e6f5; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 8px #0002; } .trivial-pie i { position: absolute; inset: 0; background: conic-gradient(from var(--a), transparent 0 0deg, transparent 0 360deg); opacity: .22; } .trivial-pie i.on { opacity: 1; background: conic-gradient(from var(--a), var(--c) 0deg 72deg, transparent 72deg 360deg); animation: duel-pop .6s; } .trivial-pie b { position: absolute; inset: 16px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 12px; }
.trivial-spin { text-align: center; padding: 10px 0 20px; } .trivial-spin h2 { margin: 6px 0 22px; }
.trivial-card { padding: 18px; border-radius: 26px; background: var(--surface); border: 3px solid var(--c); box-shadow: 0 14px 40px color-mix(in srgb, var(--c) 30%, transparent); } .trivial-cat { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--c); font-size: 18px; } .trivial-cat .icon { width: 26px; height: 26px; } .trivial-want, .trivial-have { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; } .trivial-want { background: var(--c); color: #fff; animation: duel-pulse 1.4s infinite; } .trivial-have { background: var(--purple-soft); color: var(--muted); }
.trivial-q { margin-top: 12px; } .trivial-quote { margin: 8px 0 14px; padding: 14px 16px; border-left: 5px solid #a855f7; border-radius: 14px; background: #f5ecff; font-size: 18px; font-weight: 700; line-height: 1.45; }
.trivial-who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .trivial-who-card { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; transition: transform .15s; } .trivial-who-card:hover:not(:disabled) { transform: translateY(-3px); border-color: #a855f7; } .trivial-who-card.right { border-color: #17a06b; background: #dff7ec; } .trivial-who-card.wrong { border-color: #d9573a; background: #ffe9e4; } .trivial-who-face .face { width: 64px; height: 64px; } .trivial-who-card small { color: var(--muted); }
.trivial-over { text-align: center; padding: 30px 20px; border-radius: 30px; color: #fff; background: linear-gradient(150deg, #7b3fe4, #ff5fa0); } .trivial-over.lose { background: linear-gradient(150deg, #4a4a78, #2a2a4e); } .trivial-over h1 { color: #fff; animation: duel-pop .6s; } .trivial-over .trivial-pie { margin: 10px auto; width: 96px; height: 96px; } .trivial-over .trivial-pie b { inset: 28px; font-size: 18px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 2px; animation: confetti-fall var(--t) ease-in var(--d) forwards; } @keyframes confetti-fall { to { transform: translateY(110vh) rotate(var(--r)); opacity: .9; } }
@media (max-width: 720px) { .trivial-intro { grid-template-columns: 1fr; padding: 22px; } .trivial-who { grid-template-columns: 1fr 1fr; } }

.spec-lock { text-align: center; padding: 6px; display: grid; gap: 10px; justify-items: center; } .spec-lock-face .face { width: 96px; height: 96px; } .spec-lock-trial { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--purple-soft); } .spec-lock-trial .icon { width: 20px; height: 20px; color: var(--purple); flex: 0 0 auto; }

/* ===== MÒBIL (només ≤720px, estil Duolingo): barra de dalt mínima, 5 pestanyes, Camí vertical. L'ordinador no canvia. ===== */
.m-top, .m-tabs, .m-seg, .m-screen { display: none; }
@media (max-width: 720px) {
  body.m-on #bit-robot, body.m-on #companion-widget, body.m-on .space-tabs, body.m-on .help-banner, body.m-on .footer-note { display: none !important; }
  body { background: var(--bg, #fff); }
  .m-top { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--surface, #fff); border-bottom: 2px solid rgba(0,0,0,.06); }
  .m-flag { border: 2px solid rgba(0,0,0,.08); background: transparent; border-radius: 12px; padding: 4px 8px; font-size: 22px; line-height: 1; }
  .m-stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 16px; }
  .m-stat svg { width: 22px; height: 22px; }
  .m-stat.flame { color: #ff9600; } .m-stat.xeno { color: #8b5cf6; }
  .m-tier { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; text-decoration: none; background: linear-gradient(135deg,#ffd34d,#ff9f1c); color: #4a2f00; }
  .m-tier svg { width: 16px; height: 16px; } .m-tier.pro { background: linear-gradient(135deg,#7dd3fc,#a78bfa); color: #0b1b3a; }
  .m-tier.free { background: rgba(255,159,28,.15); color: #b36b00; }
  .m-seg { display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
  .m-seg a { flex: 1 0 auto; text-align: center; padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(0,0,0,.08); font-weight: 800; font-size: 14px; text-decoration: none; color: inherit; }
  .m-seg a.on { background: #58cc02; border-color: #58cc02; color: #fff; }
  .m-screen { display: block; padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
  .m-screen.m-full { padding: 0; max-width: none; }
  .m-screen h1.m-h1 { font-size: 26px; margin: 4px 0 14px; }
  .m-page-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
  .m-page-head h1 { font-size: 22px; margin: 0; }
  .m-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(0,0,0,.08); color: inherit; }
  .m-back svg { width: 22px; height: 22px; }
  .m-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface, #fff); border-top: 2px solid rgba(0,0,0,.08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .m-tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 14px; text-decoration: none; color: #8a8f98; border: 2px solid transparent; }
  .m-tabs a span svg { width: 26px; height: 26px; } .m-tabs a b { font-size: 11px; letter-spacing: .02em; }
  .m-tabs a.on { color: #1cb0f6; background: rgba(28,176,246,.12); border-color: rgba(28,176,246,.35); }
  body.in-game .m-tabs, body.in-game .m-top { display: none; }
  body.in-game .m-screen { padding-bottom: 20px; }

  /* Inici: objectiu + accessos + Camí */
  .m-goal { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid rgba(0,0,0,.08); border-radius: 18px; }
  .m-goal strong { display: block; } .m-goal small { opacity: .7; }
  .m-ring { --p: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#58cc02 calc(var(--p) * 1%), rgba(0,0,0,.08) 0); position: relative; }
  .m-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface, #fff); }
  .m-ring b { position: relative; font-size: 12px; }
  .m-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 8px; }
  .m-shortcuts a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border: 2px solid rgba(0,0,0,.08); border-radius: 16px; text-decoration: none; color: inherit; }
  .m-shortcuts a > span { position: relative; } .m-shortcuts svg { width: 26px; height: 26px; } .m-shortcuts small { font-size: 12px; font-weight: 700; }
  .m-badge { position: absolute; top: -6px; right: -10px; background: #ff4b4b; color: #fff; border-radius: 999px; font-size: 11px; font-style: normal; padding: 1px 6px; font-weight: 800; }
  .m-level { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; padding: 10px 14px; border-radius: 16px; background: #58cc02; color: #fff; }
  .m-level b { font-size: 18px; } .m-level span { font-size: 13px; opacity: .9; }
  .m-path { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; }
  .m-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0; transform: translateX(var(--dx)); width: 150px; text-align: center; }
  .m-node small { font-size: 12px; font-weight: 700; opacity: .75; line-height: 1.2; }
  .m-node-btn { width: 70px; height: 64px; border-radius: 50%; border: 0; background: #58cc02; color: #fff; box-shadow: 0 6px 0 #46a302; display: grid; place-items: center; }
  .m-node-btn svg { width: 30px; height: 30px; }
  .m-node-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #46a302; }
  .m-node.done .m-node-btn { background: #ffc800; box-shadow: 0 6px 0 #d6a600; }
  .m-node.open .m-node-btn { background: #1cb0f6; box-shadow: 0 6px 0 #1590c8; }
  .m-node.locked .m-node-btn { background: #e5e5e5; color: #a5a5a5; box-shadow: 0 6px 0 #cfcfcf; }
  .m-node.current .m-node-btn { width: 82px; height: 74px; animation: m-pulse 1.8s ease-in-out infinite; }
  .m-start { position: absolute; top: -26px; background: #fff; color: #58cc02; border: 2px solid rgba(0,0,0,.1); border-radius: 12px; padding: 3px 10px; font-weight: 900; font-size: 13px; }
  @keyframes m-pulse { 50% { transform: scale(1.06); } }

  /* Parla / Juga / Jo */
  .m-list, .m-tiles, .m-me { display: flex; flex-direction: column; gap: 10px; }
  .m-card, .m-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid rgba(0,0,0,.08); border-bottom-width: 4px; border-radius: 18px; background: var(--surface, #fff); text-decoration: none; color: inherit; text-align: left; font: inherit; width: 100%; }
  .m-card strong, .m-row strong { display: block; font-size: 16px; } .m-card small, .m-row small { display: block; opacity: .7; font-size: 13px; }
  .m-card > div, .m-row > div { flex: 1; min-width: 0; }
  .m-card-ic, .m-row > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(28,176,246,.14); color: #1cb0f6; flex: none; }
  .m-card-ic svg, .m-row > span svg { width: 24px; height: 24px; }
  .m-card.pro .m-card-ic { background: linear-gradient(135deg,#7dd3fc,#a78bfa); color: #0b1b3a; }
  .m-card.big { padding: 18px 14px; border-color: #58cc02; }
  .m-card-face { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; }
  .m-faces { display: flex; } .m-faces i { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin-left: -8px; border: 2px solid var(--surface, #fff); }
  .m-chev svg, .m-row > svg { width: 20px; height: 20px; opacity: .5; flex: none; }
  .m-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; color: #fff; text-decoration: none; min-height: 110px; border-bottom: 5px solid rgba(0,0,0,.2); }
  .m-tile span svg { width: 30px; height: 30px; } .m-tile strong { font-size: 18px; } .m-tile small { opacity: .9; }
  .m-tile.violet { background: #8b5cf6; } .m-tile.red { background: #ff4b4b; } .m-tile.blue { background: #1cb0f6; } .m-tile.pink { background: #ff86d0; }
  .m-h2 { font-size: 16px; margin: 16px 0 4px; opacity: .8; }
  .m-me-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

  /* Menys soroll a les pàgines de dins */
  .m-screen .page-heading { display: none; }
  .m-screen .page-heading + * { margin-top: 0; }
  .m-screen .hub-hero { padding: 16px; }
  .m-screen .button { min-height: 48px; }
}
@media (max-width: 720px) {
  .m-top, .m-tabs { background: #fff; }
  :root[data-theme="dark"] .m-top, :root[data-theme="dark"] .m-tabs { background: #1c1b2e; }
  .m-screen[data-tab="play"] .hub-hero { display: none; }
}

/* Mòbil compacte (estil Instagram/TikTok): text petit, targetes fines, barra només d'icones */
@media (max-width: 720px) {
  .m-screen { font-size: 14px; padding: 10px 12px calc(64px + env(safe-area-inset-bottom)); }
  .m-screen h1, .m-screen .m-h1 { font-size: 20px !important; line-height: 1.2; margin: 2px 0 10px; }
  .m-screen h2 { font-size: 16px !important; } .m-screen h3 { font-size: 14px !important; }
  .m-screen p, .m-screen li, .m-screen label, .m-screen small { font-size: 13px; line-height: 1.35; }
  .m-screen .panel, .m-screen section.panel { padding: 12px !important; border-radius: 14px; margin: 0 0 10px; }
  .m-screen .button { min-height: 40px; font-size: 14px; padding: 8px 14px; }
  .m-screen .eyebrow, .m-screen .pill { font-size: 11px; }
  .m-screen .hub-hero, .m-screen .page-hero { display: none; }
  .m-top { padding: 4px 12px; padding-top: calc(4px + env(safe-area-inset-top)); gap: 6px; }
  .m-flag { font-size: 16px; padding: 2px 6px; border-radius: 10px; }
  .m-stat { font-size: 14px; } .m-stat svg { width: 18px; height: 18px; }
  .m-tier { font-size: 11px; padding: 4px 8px; }
  .m-tabs { padding: 2px 0 calc(2px + env(safe-area-inset-bottom)); border-top-width: 1px; }
  .m-tabs a { padding: 8px 0; border: 0; border-radius: 0; background: none !important; }
  .m-tabs a span svg { width: 26px; height: 26px; }
  .m-tabs a b, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-tabs a.on { color: #111; } .m-tabs a.on svg { stroke-width: 2.6; }
  :root[data-theme="dark"] .m-tabs a.on { color: #fff; }
  .m-seg { padding: 6px 12px 0; } .m-seg a { padding: 5px 12px; font-size: 13px; border-width: 1px; }
  .m-goal { padding: 8px 10px; border-radius: 14px; gap: 10px; } .m-ring { width: 40px; height: 40px; } .m-goal strong { font-size: 14px; }
  .m-shortcuts { gap: 6px; margin: 8px 0 4px; } .m-shortcuts a { padding: 8px 2px; border-radius: 12px; border-width: 1px; }
  .m-shortcuts svg { width: 22px; height: 22px; } .m-shortcuts small { font-size: 11px; }
  .m-level { margin: 14px 0 2px; padding: 6px 12px; border-radius: 12px; } .m-level b { font-size: 15px; }
  .m-node { margin: 8px 0; width: 120px; } .m-node small { font-size: 11px; }
  .m-node-btn { width: 56px; height: 52px; box-shadow: 0 4px 0 #46a302; } .m-node-btn svg { width: 24px; height: 24px; }
  .m-node.current .m-node-btn { width: 64px; height: 58px; }
  .m-start { top: -22px; font-size: 11px; padding: 2px 8px; }
  .m-card, .m-row { padding: 10px 12px; border-radius: 14px; border-width: 1px; border-bottom-width: 2px; gap: 10px; }
  .m-card strong, .m-row strong { font-size: 14px; } .m-card small, .m-row small { font-size: 12px; }
  .m-card-ic, .m-row > span { width: 36px; height: 36px; border-radius: 12px; } .m-card-ic svg, .m-row > span svg { width: 20px; height: 20px; }
  .m-card.big { padding: 12px; } .m-card-face { width: 44px; height: 44px; }
  .m-tile { min-height: 84px; padding: 10px; border-radius: 14px; } .m-tile strong { font-size: 15px; } .m-tile small { font-size: 11px; } .m-tile span svg { width: 24px; height: 24px; }
  .m-h2 { font-size: 13px !important; margin: 10px 0 2px; }
  .m-page-head { margin-bottom: 8px; } .m-page-head h1 { font-size: 17px !important; margin: 0; } .m-back { width: 34px; height: 34px; border-width: 1px; }
}
@media (max-width: 720px) {
  .m-screen .upsell { display: none; }
  .m-screen .featured-game, .m-screen .game-of-day { display: none; }
  .m-tile-grid { gap: 8px; } .m-tile { min-height: 70px; flex-direction: row; flex-wrap: wrap; align-items: center; } .m-tile small { width: 100%; }
}

/* ===== Adaptació al mòbil (≤720px): mateix estil que l'ordinador, però amb mides i marges de telèfon ===== */
@media (max-width: 720px) {
  body { font-size: 14px; }
  h1 { font-size: 24px; letter-spacing: -.8px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
  .top-nav { padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 8px; }
  .top-nav .brand-mark img { width: 32px; height: 32px; }
  .icon-round { width: 38px; height: 38px; } .profile-dot { width: 38px; height: 38px; }
  .page-frame { padding: 12px 14px 110px; }
  .page-heading { margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .page-heading p { margin-top: 4px; font-size: 13px; }
  .panel { padding: 14px; border-radius: 18px; }
  .hero { min-height: 0; padding: 20px; border-radius: 22px; } .hero h2 { font-size: 24px; letter-spacing: -.8px; margin: 10px 0 8px; } .hero p { margin-bottom: 14px; }
  .hero-copy { max-width: 100%; } .hero-art { display: none; } .hero::after { display: none; }
  .button { min-height: 42px; padding: 9px 16px; font-size: 14px; }
  .game-card, .mind-card, .plan-card { border-radius: 18px; }
  .mind-card, .plan-card { padding: 16px; } .plan-card h3 { font-size: 20px; } .plan-card li { font-size: 13px; }
  /* barres de pestanyes: es desplacen, no es tallen */
  .space-tabs { top: 56px; width: auto; margin: 0 -14px 14px; border-radius: 0; padding: 6px 14px; gap: 2px; scrollbar-width: none; }
  .space-tabs::-webkit-scrollbar { display: none; }
  .space-tabs a { padding: 7px 14px; font-size: 13px; }
  /* configuració: les seccions passen a fila desplaçable a dalt */
  .settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; border-radius: 16px; scrollbar-width: none; }
  .settings-nav button { flex: none; padding: 8px 12px; font-size: 13px; gap: 6px; } .settings-nav button .icon { width: 16px; height: 16px; }
  /* barra de baix més fina */
  .dock { gap: 0; padding: 4px 6px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 20px); justify-content: space-around; }
  .dock-item { min-width: 0; flex: 1; padding: 4px 2px; border-radius: 14px; }
  .dock-item .dock-label { font-size: 10px; }
  .dock-item.main { margin: 0 2px; } .dock-item.main .dock-icon { width: 50px; height: 50px; margin-top: -20px; border-radius: 18px; }
  /* el robot no tapa el contingut */
  #bit-robot { transform: scale(.7); transform-origin: bottom right; bottom: calc(88px + env(safe-area-inset-bottom)) !important; right: 4px !important; opacity: .92; }
  .footer-note { font-size: 12px; margin-top: 16px; }
}
@media (max-width: 720px) {
  .dock { box-sizing: border-box; width: calc(100vw - 24px); max-width: 480px; left: 50%; }
  .dock-item .dock-label { white-space: nowrap; }
}
@media (max-width: 720px) {
  .dock { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; margin: 0; }
  .dock-item:hover { transform: none; }
  html, body { overflow-x: hidden; }
  .page-frame, .top-nav { box-sizing: border-box; width: 100%; }
  .page-frame > *, main > * { max-width: 100%; }
  .hero-copy, .page-heading > div { min-width: 0; }
}
@media (max-width: 720px) {
  .space-tabs { width: calc(100% + 28px) !important; max-width: none !important; margin: 0 -14px 14px !important; box-sizing: border-box; justify-content: flex-start; }
  .top-actions { gap: 6px; min-width: 0; }
  .hero h2, .page-heading h1 { overflow-wrap: anywhere; }
}

/* ===== Mòbil: Inici net i bonic (menys coses, més aire) ===== */
@media (max-width: 720px) {
  .home-layout { display: block; }
  .home-main { display: grid; gap: 14px; }
  .home-directory, .structure-details, .home-rail .panel:not(:first-child), .home-hero .hero-actions .glass, .home-hero p, .home-title { display: none; }
  .home-rail { margin-top: 14px; }
  .home-rail .panel { display: block; }
  /* targeta principal: text a l'esquerra, company a la dreta, un sol botó */
  .home-hero { min-height: 0; padding: 22px 18px 20px; border-radius: 26px; box-shadow: 0 18px 40px #7a4dff33; }
  .home-hero .hero-copy { max-width: 62%; }
  .home-hero h2 { font-size: 24px; margin: 8px 0 14px; }
  .home-hero .hero-art { display: block; position: absolute; right: -4px; bottom: 6px; width: 40%; }
  .home-hero .hero-art .hero-talk { display: none; }
  .home-hero .home-progress { margin-top: 14px; }
  .home-hero .hero-actions { display: block; } .home-hero .hero-actions .button { width: 100%; justify-content: center; }
  /* repàs i parla: dues peces compactes */
  .today-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .today-card { padding: 14px; border-radius: 20px; gap: 4px; min-height: 0; }
  .today-card strong { font-size: 15px; line-height: 1.25; } .today-card small { display: none; }
  .today-card .today-emoji { width: 34px; height: 34px; }
  .page-heading h1 { font-size: 26px; } .page-heading p { font-size: 13px; }
  .push-prompt { display: none; }
}
@media (max-width: 720px) {
  .home-hero .hero-copy { max-width: 100%; }
  .hero.aurora.home-hero .hero-art { position: absolute !important; top: 16px; right: 16px; left: auto !important; bottom: auto !important; width: 76px !important; margin: 0 !important; }
  .home-hero .hero-art .face, .home-hero .hero-art .avatar-3d { max-width: 76px; margin: 0; filter: none; }
  .home-hero h2 { padding-right: 70px; }
  .today-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .today-card { display: flex; flex-direction: column; align-items: flex-start; }
  .home-rail { display: block; } .home-rail .panel { width: auto; }
}
@media (max-width: 720px) {
  .hero.aurora.home-hero .hero-art { width: 60px !important; top: 14px; right: 14px; }
  .home-hero .hero-art .face, .home-hero .hero-art .avatar-3d { max-width: 60px; }
  .home-hero .hero-copy h2 { padding-right: 66px; font-size: 22px; }
  .footer-note, .page-frame > .footer-links { display: none; }
  .upsell, .hub-hero { display: none; }
  .page-heading p { display: none; }
}
@media (max-width: 720px) {
  .home-hero .hero-art .avatar-3d { width: 60px !important; height: 60px !important; display: block; }
  .zone-card { padding: 14px; gap: 12px; border-radius: 20px; }
  .zone-card .zone-cover { width: 56px; height: 56px; border-radius: 18px; flex: none; }
  .zone-card .zone-cover svg { width: 26px; height: 26px; }
  .zone-card .zone-body p, .zone-card .zone-body .muted, .zone-card .zone-foot { display: none; }
  .zone-card h3 { font-size: 17px; }
}

/* Mòbil: barra de baix només amb icones (com Instagram) i Comunitat ordenada */
@media (max-width: 720px) {
  .dock .dock-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock { padding: 6px 8px; } .dock-item { padding: 8px 2px; }
  .dock-item .dock-icon { width: 42px; height: 42px; } .dock-item .dock-icon svg { width: 26px; height: 26px; }
  .dock-item.active::after { bottom: 1px; }
  .dock-item.main .dock-icon { margin-top: -22px; }
  /* Mur: capçalera en una fila compacta */
  .comm-hero { padding: 14px; border-radius: 22px; gap: 10px; display: grid; }
  .comm-hero-me { display: flex; align-items: center; gap: 12px; } .comm-hero-me .user-face { width: 52px; height: 52px; flex: none; }
  .comm-hero h1 { font-size: 20px; } .comm-hero p { display: none; }
  .comm-hero-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .comm-stats { display: flex; gap: 6px; flex-wrap: wrap; } .comm-stats span { padding: 6px 10px; font-size: 12px; }
  .story-row { gap: 10px; margin: 8px 0; } .story-ring { width: 56px; height: 56px; } .story-row small { font-size: 11px; }
  /* Perfil estil Instagram: foto i xifres a dalt, botons a sota en una fila */
  .insta-head { display: grid; grid-template-columns: 84px 1fr; gap: 12px 14px; align-items: center; text-align: left; }
  .insta-head .insta-avatar, .insta-head > :first-child { width: 84px; height: 84px; }
  .insta-info { display: contents; }
  .insta-name { grid-column: 2; grid-row: 1; } .insta-name h1 { font-size: 18px; }
  .insta-stats { grid-column: 2; grid-row: 2; gap: 12px; font-size: 12px; margin: 0; }
  .insta-bio { grid-column: 1 / -1; font-size: 13px; margin: 0; }
  .insta-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .insta-actions .button, .insta-actions .text-link { width: 100%; justify-content: center; min-height: 38px; font-size: 13px; padding: 6px 10px; }
  .insta-tabs { margin-top: 8px; }
}
@media (max-width: 720px) {
  .insta-photo { grid-column: 1; grid-row: 1 / 3; width: 84px; height: 84px; position: relative; }
  .insta-photo .photo-ring, .insta-photo .user-face { width: 84px !important; height: 84px !important; }
  .insta-photo .photo-edit { width: 24px; height: 24px; right: -2px; bottom: -2px; } .insta-photo .photo-edit svg { width: 12px; height: 12px; }
  .insta-name { align-self: end; } .insta-stats { align-self: start; }
  .comm-hero-me > div { min-width: 0; }
  .comm-hero-side { flex-wrap: nowrap; } .comm-stats { flex-wrap: nowrap; gap: 4px; } .comm-stats span { padding: 5px 8px; font-size: 11px; white-space: nowrap; }
  .comm-hero-side .button { min-height: 36px; padding: 6px 12px; font-size: 13px; flex: none; }
  .story-ring, .story .story-ring.add { width: 52px; height: 52px; } .story { width: 64px; }
  .story-row { margin: 4px 0 8px; }
}
@media (max-width: 720px) { .insta-photo .photo-ring { padding: 3px; box-sizing: border-box; overflow: visible; } .insta-photo .photo-ring .user-face { width: 100% !important; height: 100% !important; } }

/* Mòbil · Sala de jocs com una app store: icones quadrades, nom i botó Juga */
@media (max-width: 720px) {
  .game-section, .game-day { margin: 0 0 6px; }
  .section-head { margin: 18px 0 10px; } .section-head h2 { font-size: 18px; gap: 8px; } .section-head h2 .icon { width: 20px; height: 20px; } .section-head p { display: none; }
  .game-grid, .game-grid.two { grid-template-columns: repeat(3, 1fr) !important; gap: 14px 10px; }
  .game-tile { background: none; border: 0; box-shadow: none; border-radius: 0; flex-direction: column; align-items: center; text-align: center; gap: 6px; overflow: visible; }
  .game-tile:hover { transform: none; box-shadow: none; }
  .game-tile .game-cover { width: 100%; aspect-ratio: 1; min-height: 0; flex: none; border-radius: 22%; display: grid; place-items: center; position: relative; box-shadow: 0 8px 18px #4b2fd633; }
  .game-tile .game-cover-icon svg { width: 38%; height: 38%; min-width: 30px; min-height: 30px; }
  .game-tile .game-info { padding: 0; display: grid; gap: 6px; width: 100%; justify-items: center; }
  .game-tile h3 { font-size: 13px; line-height: 1.2; }
  .game-tile .game-info p, .game-tile .game-tags, .game-tile .game-foot small, .game-tile .game-foot .text-link { display: none; }
  .game-tile .game-foot, .game-tile .game-foot-actions { display: block; width: 100%; padding: 0; margin: 0; }
  .game-tile .game-foot .button { width: 100%; min-height: 30px; padding: 4px 8px; font-size: 12px; border-radius: 999px; justify-content: center; }
  .game-tile .game-foot .button svg { display: none; }
  .game-new { top: -4px; right: -4px; font-size: 10px; padding: 2px 6px; }
  /* joc del dia: fila destacada */
  .game-tile.featured { flex-direction: row; text-align: left; gap: 14px; padding: 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
  .game-tile.featured .game-cover { width: 84px; flex: none; min-height: 0; }
  .game-tile.featured .game-info { justify-items: start; }
  .game-tile.featured h3 { font-size: 16px; } .game-tile.featured .game-info p { display: block; font-size: 12px; }
  .game-tile.featured .game-foot .button { width: auto; padding: 6px 18px; }
  /* «Més per jugar»: llista com a una app store */
  .wide-card { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .wide-card .wide-icon { width: 48px; height: 48px; border-radius: 14px; flex: none; }
  .wide-card h3 { font-size: 15px; } .wide-card p, .wide-card .wide-rank { display: none; }
  .game-grid.two { display: block; }
  .mini-note { display: none; }
}
@media (max-width: 720px) {
  .wide-card, .wide-card h3, .wide-card .wide-go { color: var(--ink) !important; }
  .wide-card .wide-icon { color: #fff; background: linear-gradient(135deg, #6d4dff, #b44dff); display: grid; place-items: center; }
  .wide-card.tone-peach .wide-icon { background: linear-gradient(135deg, #ff7a45, #ff4fa3); }
  .wide-card.tone-sky .wide-icon { background: linear-gradient(135deg, #3f9bff, #6d4dff); }
  .wide-card .wide-icon svg { width: 24px; height: 24px; }
  .wide-card > div { flex: 1; min-width: 0; } .wide-card .wide-go { margin-left: auto; }
  .game-tile .game-new { right: 2px; top: 2px; }
}

/* Mòbil: sense línies lila al voltant de targetes, barres i pestanyes; només una ombra suau */
@media (max-width: 720px) {
  .panel, .game-card, .mind-card, .plan-card, .zone-card, .today-card, .mini-card, .post-card, .avatar-card, .resume-banner, .conversation-banner,
  .stat-card, .story-feature, .music-banner, .karaoke, .comm-card, .friend-card, .wide-card, .settings-nav, .dock, .space-tabs, .filter-chip, .pill,
  .rank-pill, .insta-head, .upsell, .mini-result, .endless-tile, .duel-card, .chest-card, .setting-row, .plan-row {
    border-color: transparent !important;
  }
  .panel, .zone-card, .today-card, .mind-card, .plan-card, .post-card, .stat-card, .avatar-card { box-shadow: 0 4px 18px #3b2a7a14; }
  .top-nav { border-bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .space-tabs { background: transparent; box-shadow: none; padding: 4px 14px; border-radius: 0; }
  .space-tabs a { background: var(--surface); box-shadow: 0 2px 8px #3b2a7a12; }
  .space-tabs a.active { background: var(--grad); }
  .dock { box-shadow: 0 6px 26px #3b2a7a22; }
  .wide-card { border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent) !important; }
  .insta-tabs { border-top-color: color-mix(in srgb, var(--line) 50%, transparent); }
  hr, .divider { border-color: transparent; }
}
@media (max-width: 720px) {
  .page-help, [class*="-card"], [class*="-tile"], [class*="-banner"], [class*="-panel"], [class*="-shell"]:not(.lesson-shell):not(.mini-shell) { border-color: transparent !important; }
  .page-help { background: var(--purple-soft); padding: 14px; gap: 12px; flex-wrap: wrap; }
  .page-help > .button { margin-left: 0; }
  .filter-chip { box-shadow: 0 2px 8px #3b2a7a12; }
}
@media (max-width: 720px) {
  .page-help.pop { position: fixed; z-index: 70; top: calc(64px + env(safe-area-inset-top)); left: 12px; right: 12px; margin: 0; flex-wrap: nowrap; align-items: center; background: var(--surface-solid, #fff); box-shadow: 0 14px 40px #2a1a5a40; animation: help-pop .35s cubic-bezier(.2,.9,.3,1.2); }
  .page-help.pop ul, .page-help.pop .page-help-cost { display: none; }
  .page-help.pop p { font-size: 13px; margin: 2px 0 0; }
  .page-help.pop .button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
  .page-help.out { opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .35s; }
  @keyframes help-pop { from { opacity: 0; transform: translateY(-18px) scale(.97); } }
}
/* Mòbil: joc a pantalla completa (Trivial, Duels, Infinit, Arcade) */
.m-exit { display: none; }
@media (max-width: 720px) {
  body.m-full .top-nav, body.m-full .space-tabs, body.m-full .dock, body.m-full #bit-robot, body.m-full #companion-widget, body.m-full .footer-note, body.m-full .page-help, body.m-full .verify-banner { display: none !important; }
  body.m-full .page-frame { padding: calc(56px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); min-height: 100vh; box-sizing: border-box; }
  body.m-full.in-game .page-frame { padding-top: calc(14px + env(safe-area-inset-top)); }
  body.m-full .m-exit { display: grid; place-items: center; position: fixed; z-index: 80; top: calc(10px + env(safe-area-inset-top)); left: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px #2a1a5a2e; }
  body.m-full .m-exit svg { width: 22px; height: 22px; }
}
/* Ruleta: gira sola al lobby */
@keyframes wheel-idle { to { transform: rotate(360deg); } }
.trivial-intro .trivial-wheel { animation: wheel-idle 18s linear infinite; }
@media (prefers-reduced-motion: reduce) { .trivial-intro .trivial-wheel { animation: none; } }
@media (max-width: 720px) { body.m-full .legal-links, body.m-full .footer-links, body.m-full .page-frame + p { display: none !important; } }
/* Mòbil: res no se sobreposa */
@media (max-width: 720px) {
  .zone-card { display: flex !important; align-items: center; gap: 12px; position: relative; }
  .zone-card .zone-body { flex: 1; min-width: 0; }
  .zone-card .zone-go { position: static !important; flex: none; margin: 0; font-size: 13px; white-space: nowrap; align-self: flex-end; }
  .zone-card .zone-cost { display: grid; gap: 2px; }
  .home-hero .hero-copy h2 { padding-right: 76px; overflow-wrap: anywhere; }
  .trivial-intro .hub-stats { margin-bottom: 14px; }
  .trivial-intro .duel-battle { margin-top: 6px; }
  .artist-chip { margin: 0 6px 6px 0; }
  .redirect-uri { word-break: break-all; display: block; }
}
@media (max-width: 720px) {
  .hero.aurora.home-hero .hero-art { right: 14px !important; width: 60px !important; height: 60px; overflow: hidden; border-radius: 50%; display: block !important; }
  .home-hero .hero-art > *, .home-hero .hero-art canvas, .home-hero .hero-art .face { width: 60px !important; height: 60px !important; max-width: 60px !important; margin: 0 !important; }
}
/* Mòbil: missions i converses amb avatars a pantalla completa, com un xat */
@media (max-width: 720px) {
  body.m-full .session-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; flex-wrap: nowrap; }
  body.m-full .session-heading h1 { font-size: 18px; } body.m-full .session-heading p { display: none; }
  body.m-full .session-heading-actions { display: flex; gap: 6px; flex: none; } body.m-full .session-heading-actions .button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  body.m-full .session-layout { display: flex; flex-direction: column; gap: 10px; }
  body.m-full .session-companion { display: grid; grid-template-columns: 64px 1fr; gap: 2px 12px; align-items: center; text-align: left; padding: 10px 12px !important; }
  body.m-full .session-companion > :first-child { grid-row: 1 / 4; width: 64px; height: 64px; }
  body.m-full .session-companion .avatar-3d, body.m-full .session-companion .face { width: 64px !important; height: 64px !important; max-width: 64px; }
  body.m-full .session-companion h2 { font-size: 16px; margin: 0; } body.m-full .session-companion .avatar-role { margin: 0; font-size: 12px; } body.m-full .session-companion .quote { display: none; }
  body.m-full .chat-panel { display: flex; flex-direction: column; padding: 10px !important; min-height: calc(100dvh - 210px); }
  body.m-full .chat-toolbar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; } body.m-full .toolbar-controls { display: flex; gap: 4px; flex: none; }
  body.m-full .chat-toolbar .button { min-height: 32px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
  body.m-full .chat-log { flex: 1; overflow-y: auto; }
  body.m-full .message-bubble { font-size: 14px; }
  body.m-full .composer { position: sticky; bottom: calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 18px; padding: 6px; box-shadow: 0 -6px 24px #2a1a5a1f; }
  body.m-full .composer-foot { display: none; }
  /* Trucada */
  .call-person { width: min(180px, 46vw); margin-top: 6px; }
  .call-name { font-size: 22px; } .call-caption p { font-size: 14px; }
}

/* ===== Scroll modern: entrada, parallax, barra de progrés ===== */
.fx { opacity: 0; transform: translateY(34px) scale(.965); transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .85, .25, 1.05) var(--d, 0ms) !important; will-change: opacity, transform; }
.fx.fx-in { opacity: 1; transform: none; }
body::before { content: ''; position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6d4dff, #ff4fa3, #ffb02e); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; opacity: .9; }
body.m-full::before { display: none; }
.top-nav { transition: box-shadow .3s, background .3s; }
body.scrolled .top-nav { box-shadow: 0 10px 34px #2a1a5a22; }
/* Parallax de la targeta principal: el text puja més a poc a poc i s'esvaeix en baixar */
.home-hero .hero-copy { transform: translateY(calc(var(--sy, 0) * .14px)); opacity: calc(1 - var(--sy, 0) / 520); will-change: transform; }
.hero::after { transform: translateY(calc(var(--sy, 0) * -.08px)); }
@media (max-width: 720px) {
  .dock { transition: transform .35s cubic-bezier(.2, .85, .25, 1.05), opacity .3s; }
  body.dock-hide:not(.m-full) .dock { transform: translateY(160%) !important; opacity: 0; }
}
/* Pastilla d'experiència més viva */
.rank-pill { position: relative; }
.rank-ring { background: conic-gradient(from 0deg, #6d4dff calc(var(--p, 0) * 1%), #ffffff22 0); box-shadow: 0 0 0 0 #6d4dff55; animation: xp-glow 3.4s ease-in-out infinite; }
@keyframes xp-glow { 50% { box-shadow: 0 0 0 7px #6d4dff00, 0 0 18px #ff4fa355; } }
@media (prefers-reduced-motion: reduce) { .fx { opacity: 1; transform: none; transition: none !important; } .rank-ring { animation: none; } body::before { display: none; } }
/* Sense contorn lila al voltant de la pàgina: el contingut rep el focus en navegar, però no ha de dibuixar cap anell */
#main, #main:focus, #main:focus-visible, main:focus, main:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible, .page-frame:focus, .page-frame:focus-visible { outline: none !important; box-shadow: none; }
/* Nivell: targeta compacta (insígnia, progrés, escala) en comptes d'un bloc gran */
.level-banner.level-compact { display: grid; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 14px; }
.level-compact .level-row { display: flex; align-items: center; gap: 14px; }
.level-compact .level-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--grad); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 8px 20px #6d4dff40; }
.level-compact .level-main { flex: 1; min-width: 0; } .level-compact .meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.level-compact .meter-bar { height: 8px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; } .level-compact .meter-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.level-compact .level-ladder { display: flex; gap: 6px; flex-wrap: wrap; }
.level-compact .level-ladder .lvl { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-soft); color: var(--muted); }
.level-compact .level-ladder .lvl.now { background: var(--grad); color: #fff; } .level-compact .level-ladder .lvl.past { background: var(--purple-soft); color: var(--purple-dark); }
.level-compact small.muted, .level-compact p.muted { color: var(--muted); font-size: 12px; margin: 0; }
.level-compact .level-more summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--purple-dark); } .level-compact .level-facts { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.level-compact .level-facts li { display: flex; gap: 8px; align-items: flex-start; } .level-compact .level-facts .icon { width: 18px; height: 18px; flex: none; color: var(--purple); }
@media (max-width: 720px) { body:has(.level-compact) .page-heading { display: none; } }
.level-compact, .level-compact .meter-top strong, .level-compact .meter-top small { color: var(--ink); } .level-compact .meter-top small { color: var(--muted); }
@media (max-width: 720px) { .path-node > *:not(.node-button), .level-banner { border-color: transparent !important; } .level-banner.level-compact { box-shadow: 0 4px 18px #3b2a7a14; } }
/* Mòbil: cap línia lila en cap contenidor (les caselles de text i els botons es queden com són) */
@media (max-width: 720px) {
  :where(main, .page-frame) :where(div, section, article, aside, a, details, summary, li, nav, header):not(.selected):not(.active):not(.on):not(.right):not(.wrong):not(.current):not(.pro):not(.m-exit) { border-color: transparent !important; }
  .path-node, .level-banner { border-color: transparent !important; }
  .path-node { box-shadow: 0 4px 18px #3b2a7a12; }
}
/* Mòbil: qualsevol joc en marxa (Astro-paraules, Blocs, Serp…) ocupa tota la pantalla */
.m-exit { cursor: pointer; border: 0; }
@media (max-width: 720px) {
  body.m-full.in-game .page-frame { padding: 0; min-height: 100dvh; max-width: none; }
  body.m-full.in-game .mini-shell, body.m-full.in-game .arcade-shell { min-height: 100dvh; margin: 0; border-radius: 0; box-sizing: border-box; padding: calc(60px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
  body.m-full.in-game .mini-title { margin-bottom: 8px; } body.m-full.in-game .mini-title h1 { font-size: 18px; }
  body.m-full.in-game .m-exit { top: calc(10px + env(safe-area-inset-top)); left: auto; right: 12px; }
  body.m-full.in-game .m-exit svg { width: 18px; height: 18px; }
  body.m-full.in-game #mini-root, body.m-full.in-game .arcade-layout { width: 100%; }
}
@media (max-width: 720px) {
  body.m-full.in-game .mini-shell, body.m-full.in-game .arcade-shell { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; }
}
/* Mòbil: introducció i portada ben enquadrades (res més ample que la pantalla) */
@media (max-width: 720px) {
  .intro, .intro-main, .landing, .landing-main { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
  .intro > *, .intro-copy, .intro-stage { max-width: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0; }
  .intro-cast { flex-wrap: wrap; max-width: 300px; margin: 28px auto 22px; gap: 14px 12px; }
  .intro-face { width: 58px; height: 58px; }
  .intro h1, .intro-title { font-size: clamp(34px, 11vw, 46px); letter-spacing: -1px; }
  .intro p, .intro-copy p { padding: 0 20px; text-align: center; }
  .intro-actions, .intro-cta { flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
}
@media (max-width: 720px) {
  .intro-cast { row-gap: 30px; }
  .intro-skip, .intro [data-action="intro-skip"] { padding: 8px 16px; width: auto; white-space: nowrap; }
  .land-nav, .landing-nav, .land-top { gap: 8px; flex-wrap: nowrap; padding-left: 14px; padding-right: 14px; }
  .land-nav a, .landing-nav a, .land-top a { white-space: nowrap; font-size: 13px; }
  .land-nav a[href="#plans"], .landing-nav a[href="#plans"], .land-top a[href="#plans"] { display: none; }
}
@media (max-width: 720px) {
  .landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
  .landing-nav nav { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
  .landing-nav .text-link { white-space: nowrap; font-size: 13px; } .landing-nav .text-link[data-action="landing-plans"] { display: none; }
  .landing-nav .brand span { font-size: 17px; } .landing-nav .brand img { width: 32px; height: 32px; }
  .landing-nav .button { min-height: 38px; padding: 6px 14px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .auth-main { display: block !important; min-height: 0 !important; padding: calc(18px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)) !important; box-sizing: border-box; max-width: 100vw; }
  .auth-main > *, .auth-main .panel, .auth-main .auth-card { margin: 0 auto; width: 100%; max-width: 480px; box-sizing: border-box; }
  .auth-main h1 { font-size: 26px; }
  .landing-nav { padding-right: 12px; } .landing-nav nav .button { padding: 6px 12px; }
}
@media (max-width: 720px) { .auth-main form, .auth-main .field-grid { gap: 10px; } .auth-main .field { gap: 4px; margin: 0; } .auth-main input { min-height: 46px; padding: 8px 14px; } .auth-main .panel, .auth-main .auth-card { padding: 20px 18px; } }
/* Mòbil: sense barra de dalt (logo, xenos, pla, perfil): tot això ja és a les pestanyes de baix */
@media (max-width: 720px) {
  .top-nav { display: none !important; }
  .page-frame { padding-top: calc(16px + env(safe-area-inset-top)); }
  .space-tabs { top: calc(6px + env(safe-area-inset-top)); }
  .page-help.pop { top: calc(12px + env(safe-area-inset-top)); }
}
/* Mòbil: les paraules del món convergeixen des de dins de la pantalla (abans sortien massa lluny) i les lletres cauen igual que a l'ordinador */
@media (max-width: 720px) {
  .intro-word { font-size: clamp(20px, 6vw, 30px); transform: translate(calc(var(--x) * .55), calc(var(--y) * .5)) rotate(var(--r)) scale(1.2); }
  .intro-title span { animation-duration: .7s; }
}
/* Si el telèfon té «reduir moviment», es manté una versió suau (només aparèixer en fosa) en comptes de saltar tota la introducció */
@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-title span, .intro-line, .intro-face, .intro-cta, .intro-proof, .intro-def { animation: fade-in .9s ease both !important; opacity: 0; }
  .intro-title span { animation-delay: calc(var(--i, 0) * .08s) !important; } .intro-def { animation-delay: .9s !important; } .intro-line { animation-delay: 1.4s !important; } .intro-face { animation-delay: 1.8s !important; } .intro-cta { animation-delay: 2.3s !important; } .intro-proof { animation-delay: 2.6s !important; }
}

/* ===== MÒBIL · COMUNITAT estil Instagram/TikTok: pestanyes subratllades, capçalera mínima, publicacions a pantalla ampla ===== */
@media (max-width: 720px) {
  /* pestanyes de la zona social: text amb subratllat, com Instagram */
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs { background: var(--surface); margin: 0 -14px 12px !important; padding: 0 14px !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent); justify-content: space-around; position: sticky; top: 0; }
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs a { flex: 1; text-align: center; background: none !important; box-shadow: none !important; border-radius: 0; padding: 13px 4px; color: var(--muted); border-bottom: 2px solid transparent; }
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
  /* capçalera de comunitat → una línia fina */
  .comm-hero { background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
  .comm-hero .eyebrow, .comm-hero p, .comm-hero-me .user-face, .comm-hero .comm-stats { display: none; }
  .comm-hero h1 { color: var(--ink) !important; font-size: 22px; }
  .comm-hero-me { display: block; } .comm-hero-side { display: block; } .comm-hero-side .button { min-height: 36px; padding: 6px 16px; }
  /* històries i publicacions */
  .story-row { padding: 4px 0 10px; gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .story-ring { width: 62px; height: 62px; padding: 3px; background: linear-gradient(135deg, #ff4fa3, #ffb02e, #6d4dff); border-radius: 50%; } .story-row small { font-size: 11px; }
  .feed-layout, .comm-columns { display: block; }
  .comm-side { display: none; }
  .post-card { border-radius: 0 !important; margin: 0 -14px 6px; box-shadow: none !important; background: var(--surface); }
  .post-card .post-image { margin: 0; width: 100%; max-height: 70vh; object-fit: cover; }
  .post-head { padding: 10px 14px; } .post-bar { padding: 8px 14px; gap: 16px; } .post-bar svg { width: 26px; height: 26px; }
  .post-comments { padding: 0 14px 10px; }
  /* perfil: foto gran, xifres en fila, botons a sota, graella de publicacions */
  .insta-head { background: none !important; box-shadow: none !important; padding: 0 !important; display: grid !important; grid-template-columns: 88px 1fr; gap: 10px 18px; }
  .insta-stats { display: flex; justify-content: space-around; text-align: center; font-size: 12px; }
  .insta-stats span { display: grid; gap: 0; } .insta-stats strong { font-size: 18px; }
  .insta-actions { grid-template-columns: 1fr 1fr; }
  .insta-grid { margin: 0 -14px; gap: 2px; }
  .insta-tabs { border-top: 1px solid var(--line); margin: 12px -14px 0; justify-content: center; }
  /* classificació i amics: files netes, sense targetes */
  .rank-list > *, .friend-row, .request-card, .room-row { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 10px 2px !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent) !important; }
  .league-head { border-radius: 20px; padding: 16px; } .league-head h2 { font-size: 20px; }
  .podium { transform: scale(.92); transform-origin: top center; }
}
@media (max-width: 720px) {
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs { display: grid !important; grid-template-columns: repeat(4, 1fr); overflow: visible; width: calc(100% + 28px) !important; }
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs a { font-size: 13px; padding: 14px 2px; white-space: nowrap; }
  .comm-hero { flex-direction: row; gap: 10px; } .comm-hero-me { flex: 1; } .comm-hero-side { flex: none; }
  .comm-empty { padding: 18px 12px; background: none; box-shadow: none; } .comm-empty h3 { font-size: 16px; } .comm-empty svg { width: 34px; height: 34px; }
  .rank-list > *, .rank-list li { display: flex; align-items: center; gap: 10px; min-height: 0; }
  .rank-list .user-face, .rank-list .rank-face { width: 38px !important; height: 38px !important; flex: none; }
  .rank-list strong { font-size: 14px; } .bot-chip { font-size: 9px; padding: 1px 6px; }
  .league-head { display: grid; gap: 6px; padding: 14px; } .league-head .league-badge { width: 44px; height: 44px; }
  .league-steps { margin: 8px 0; transform: scale(.85); transform-origin: left center; }
  .rank-summary { display: none; }
  .side-card.me-card { display: none; }
}
@media (max-width: 720px) {
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs { grid-template-columns: 1fr 1fr 1.5fr 1fr; }
  body:has(.comm-hero, .insta-head, .rank-list, .friend-row, .request-grid, .room-list) .space-tabs a { font-size: 12.5px; padding: 14px 0; justify-content: center; letter-spacing: -.2px; }
  .comm-hero { flex-wrap: nowrap !important; } .comm-hero-me { flex: 1 1 0; min-width: 0; width: auto; } .comm-hero-side { flex: none; width: auto; }
  .comm-hero-side .button { white-space: nowrap; }
}
.insta-corner, .insta-friends { display: none; }
@media (max-width: 720px) {
  /* Perfil: lupa i engranatge negres a dalt a la dreta; fora «Configuració» i «Tanca la sessió» (és a dins de Configuració) */
  .insta-head { position: relative; }
  .insta-corner { display: flex; gap: 4px; position: absolute; top: -4px; right: -6px; z-index: 2; }
  .insta-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #111 !important; cursor: pointer; }
  :root[data-theme="dark"] .insta-icon { color: #fff !important; } .insta-icon svg { width: 24px; height: 24px; }
  .insta-actions [data-action="settings"], .insta-actions [data-action="logout"] { display: none !important; }
  .insta-actions { grid-template-columns: 1fr 1fr; } .insta-actions .glow, .insta-actions .secondary { min-height: 38px; }
  .insta-name { padding-right: 90px; }
  /* Text sempre visible al perfil, també si hi ha un fons de color */
  .insta-head, .insta-head .insta-name h1, .insta-head .insta-stats, .insta-head .insta-stats *, .insta-head .insta-bio, .insta-head .insta-bio * { color: var(--ink) !important; }
  .insta-head .insta-bio .muted, .insta-head .insta-stats span { color: var(--muted) !important; } .insta-head .insta-stats strong { color: var(--ink) !important; }
  .insta-head .button.glow { color: #fff !important; }
  /* Amics del perfil: secció que es desplega */
  .insta-friends { display: block; margin: 10px 0 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
  .insta-friends summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; font-weight: 700; cursor: pointer; list-style: none; color: var(--ink); }
  .insta-friends summary::-webkit-details-marker { display: none; } .insta-friends summary svg { width: 20px; height: 20px; color: var(--purple); } .insta-friends summary b { margin-left: auto; color: var(--muted); }
  .insta-friends summary::after { content: '›'; transform: rotate(90deg); color: var(--muted); font-size: 18px; } .insta-friends[open] summary::after { transform: rotate(-90deg); }
  .insta-friend-list { display: grid; gap: 2px; padding-bottom: 8px; }
  .insta-friend { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 6px 2px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
  .insta-friend .user-face { width: 40px; height: 40px; flex: none; } .insta-friend strong { display: block; font-size: 14px; } .insta-friend small { color: var(--muted); }
  /* Mur: el quadre d'escriure sense quadrat estrany */
  .composer-card { padding: 10px 12px; gap: 10px; border-radius: 16px; }
  .composer-card .user-face { width: 36px !important; height: 36px !important; flex: none; border-radius: 50%; }
  .composer-card > span:nth-child(2) { flex: 1; font-size: 13.5px; color: var(--muted); }
  .composer-tools { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; flex: none; } .composer-tools svg { width: 17px; height: 17px; }
  /* Inici: sense l'avís «La teva conversa t'espera» */
  .resume-banner:not(.streak-risk) { display: none; }
  /* Classificació: sense punts de colors i amb un sol color */
  .league-steps { display: none !important; }
  .league-head, [class*="league-"][class*="tone"], .league-head[style] { background: var(--grad) !important; }
  /* Cerca d'amics més petita */
  .comm-search .search-row.big { padding: 4px 4px 4px 12px; border-radius: 14px; gap: 6px; } .comm-search .search-row input { font-size: 14px; min-height: 34px; padding: 0; }
  .comm-search .search-row .button { min-height: 32px; padding: 4px 14px; font-size: 13px; }
}
@media (max-width: 720px) { .league-head, .league-head * { color: #fff !important; } .league-head .league-badge { background: #ffffff33; } }
@media (max-width: 720px) {
  .composer-card > :first-child, .composer-card > :first-child * { width: 36px !important; height: 36px !important; max-width: 36px; flex: none; border-radius: 50%; }
  .composer-card > :first-child { overflow: hidden; display: block; }
  .comm-search .search-row input { min-width: 0; }
}
@media (max-width: 720px) {
  .insta-friends, .insta-friend-list { display: none !important; }
  .landing-nav { box-sizing: border-box; width: 100%; max-width: 100vw; padding: 10px 12px; gap: 6px; }
  .landing-nav .brand span { display: none; }
  .landing-nav nav { margin-left: auto; gap: 8px; min-width: 0; } .landing-nav nav .button { padding: 6px 12px; flex: none; }
  .landing-nav .text-link { font-size: 13px; }
  .landing, .landing-main, .landing > * { max-width: 100vw; box-sizing: border-box; }
}
@media (max-width: 720px) {
  .trial-main { display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; }
  .trial-main > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
  .trial-pick { margin: 0; align-content: start; gap: 12px; padding-top: 4px; }
  .trial-avatar { width: 110px; height: 110px; } .trial-avatar > *, .trial-avatar .avatar-3d { width: 110px !important; height: 110px !important; }
  .trial-pick h1 { font-size: 24px; }
  .trial-langs { gap: 8px; }
  .trial-lang { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 10px; min-height: 54px; font-size: 14px; text-align: left; line-height: 1.15; }
  .trial-lang > :first-child { flex: none; min-width: 38px; text-align: center; }
}
.world-xp { display: grid; gap: 6px; } .world-xp .meter-bar { height: 8px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; } .world-xp .meter-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.world-xp small { display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 700; } .world-xp small svg { width: 14px; height: 14px; }
.post-comments .comment { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.post-comments .is-reply { margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--line); }
.reply-to { color: var(--purple); font-size: 12px; font-weight: 700; }
.reply-btn { border: 0; background: none; padding: 0 2px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.reply-btn:hover { color: var(--purple); }
/* Sense la línia/anell que creuava la pantalla a la introducció */
.intro-burst { display: none !important; }
/* Modes de cant */
.karaoke-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.karaoke-modes button { display: grid; gap: 2px; text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.karaoke-modes button strong { font-size: 14px; } .karaoke-modes button small { color: var(--muted); font-size: 11px; line-height: 1.25; }
.karaoke-modes button.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px #6d4dff40; } .karaoke-modes button.active small { color: #ffffffd0; }
.karaoke-lines.lyrics-only .karaoke-line { pointer-events: none; }
.lyrics-box { margin-top: 10px; } .lyrics-box summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; } .lyrics-box summary svg { width: 18px; height: 18px; }
.lyrics-box textarea { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); font: inherit; resize: vertical; }
@media (max-width: 720px) { .karaoke-modes { gap: 6px; } .karaoke-modes button { padding: 8px 4px; } .karaoke-modes button small { display: none; } }
.karaoke-modes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.karaoke-lines.bilingual .bi-line { display: grid; gap: 4px; text-align: left; }
.karaoke-lines.bilingual .line-text { font-size: 18px; font-weight: 800; } .karaoke-lines.bilingual .bi-meaning { color: #ffd166; font-size: 15px; }
.karaoke-lines.bilingual .bi-meaning em { opacity: .6; }
@media (max-width: 720px) { .karaoke-modes { grid-template-columns: 1fr 1fr; } .karaoke-modes button small { display: none; } }
/* Música: cercador modern al centre i pantalla «Aprèn amb aquesta cançó» */
body::before { display: none !important; }
.music-search-hero { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 38px 8px 22px; overflow: hidden; }
.music-search-hero h1 { font-size: clamp(28px, 6vw, 42px); letter-spacing: -1px; max-width: 14ch; }
.music-orb { position: absolute; z-index: -1; top: -40px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, #6d4dff44, #ff4fa322 55%, transparent 70%); filter: blur(18px); }
.music-search { display: flex; align-items: center; gap: 8px; width: min(560px, 100%); padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 50px #6d4dff2e, 0 0 0 6px #6d4dff10; }
.music-search:focus-within { box-shadow: 0 20px 60px #6d4dff55, 0 0 0 6px #6d4dff26; }
.music-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); } .music-search-icon svg { width: 22px; height: 22px; color: var(--muted); }
.music-search .button { border-radius: 999px; }
.music-search-hero .artist-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; }
.learn-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .learn-head > div { flex: 1; min-width: 0; } .learn-head h1 { font-size: 24px; } .learn-head img, .track-ph.big { width: 76px; height: 76px; border-radius: 18px; flex: none; object-fit: cover; display: grid; place-items: center; font-size: 30px; background: var(--purple-soft); color: var(--purple); }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.method-card { display: grid; gap: 6px; text-align: left; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s; } .method-card:hover { transform: translateY(-3px); }
.method-card strong { font-size: 16px; } .method-card small { color: var(--muted); line-height: 1.35; }
.method-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--grad); color: #fff; } .method-ic svg { width: 22px; height: 22px; }
.lyrics-paste textarea { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); font: inherit; resize: vertical; }
.lyrics-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.spotify-player { margin: 0 0 14px; }
@media (max-width: 720px) { .music-search-hero { padding-top: 18px; } .music-search { padding-left: 14px; } .music-search input { font-size: 15px; } .method-grid { gap: 10px; } .method-card { padding: 14px; } .method-card small { font-size: 12px; } .music-search .button { padding: 8px 16px; min-height: 40px; } }
/* Mode lliure: toca un vers i es fa gran */
.karaoke-lines.lyrics-only .karaoke-line { pointer-events: auto; cursor: pointer; opacity: .55; transition: transform .35s, opacity .35s, font-size .35s; }
.karaoke-lines.lyrics-only .karaoke-line.current { opacity: 1; transform: scale(1.04); }
.karaoke-lines.lyrics-only .karaoke-line.current .line-text { font-size: clamp(26px, 5vw, 38px); line-height: 1.2; }
.karaoke-lines.lyrics-only .karaoke-line .line-text { transition: font-size .35s; }
/* Cercador de Música: gran, al mig i espectacular */
.music-search-hero { min-height: calc(100dvh - 260px); align-content: center; gap: 22px; padding: 30px 12px 40px; }
.music-search-hero h1 { font-size: clamp(38px, 9vw, 72px); line-height: 1.02; letter-spacing: -2px; max-width: 12ch; background: linear-gradient(110deg, var(--ink) 30%, #6d4dff 60%, #ff4fa3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.music-orb { width: 560px; height: 560px; top: 50%; left: 50%; transform: translate(-50%, -55%); animation: orb-float 8s ease-in-out infinite; }
@keyframes orb-float { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.music-search { width: min(720px, 100%); padding: 12px 12px 12px 26px; position: relative; box-shadow: 0 30px 80px #6d4dff40, 0 0 0 8px #6d4dff12; }
.music-search::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), #6d4dff, #ff4fa3, #ffb02e, #19c6a7, #6d4dff); animation: spin-ang 5s linear infinite; filter: blur(.5px); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @keyframes spin-ang { to { --ang: 360deg; } }
.music-search input { font-size: 22px; padding: 14px 4px; } .music-search-icon svg { width: 28px; height: 28px; color: var(--purple); }
.music-search .button { padding: 16px 30px; font-size: 18px; }
.music-notes-float { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .music-notes-float i { position: absolute; font-style: normal; font-size: 28px; opacity: .25; animation: note-rise 9s linear infinite; left: var(--x); bottom: -30px; animation-delay: var(--d); }
@keyframes note-rise { to { transform: translateY(-110vh) rotate(25deg); opacity: 0; } }
@media (max-width: 720px) { .music-search-hero { min-height: calc(100dvh - 220px); } .music-search { padding: 8px 8px 8px 16px; } .music-search input { font-size: 17px; } .music-search .button { padding: 12px 18px; font-size: 15px; } .music-search-icon svg { width: 22px; height: 22px; } .music-orb { width: 420px; height: 420px; } }
@media (prefers-reduced-motion: reduce) { .music-orb, .music-search::before, .music-notes-float i { animation: none; } }
.assess-words { margin: 10px 0; } .assess-words p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .assess-words .word.miss { padding: 2px 8px; border-radius: 999px; background: #ff4d6d22; color: #ff8aa0; }
.karaoke-modes { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
/* Mode bilingüe: dues columnes, la cançó i la traducció */
.karaoke-lines.bilingual { display: grid; gap: 8px; }
.karaoke-lines.bilingual .bi-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 4px; color: #ffffffb0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.karaoke-lines.bilingual .bi-line { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; text-align: left; }
.karaoke-lines.bilingual .bi-col { min-width: 0; overflow-wrap: anywhere; } .karaoke-lines.bilingual .line-text { font-size: 17px; font-weight: 800; } .karaoke-lines.bilingual .bi-meaning { color: #ffd166; font-size: 15px; font-weight: 600; }
.karaoke-lines.bilingual .bi-line.current { outline: 2px solid #ffd16688; }
@media (max-width: 720px) { .karaoke-lines.bilingual .line-text { font-size: 15px; } .karaoke-lines.bilingual .bi-meaning { font-size: 13px; } .karaoke-lines.bilingual .bi-line { gap: 10px; padding: 12px; } }
/* Mòbil · Música a pantalla completa, compacta i còmoda amb el polze */
@media (max-width: 720px) {
  body.m-full .page-frame:has(.karaoke, .learn-head) { padding: calc(10px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)); }
  body.m-full .session-heading { margin-bottom: 8px; } body.m-full .session-heading h1 { font-size: 18px; }
  .learn-head { gap: 10px; margin-bottom: 10px; } .learn-head h1 { font-size: 19px; } .learn-head img, .track-ph.big { width: 56px; height: 56px; border-radius: 14px; } .learn-head .button { min-width: 40px; min-height: 40px; padding: 0 10px; }
  .spotify-player { margin: 0 0 10px; } .spotify-player iframe { height: 80px; border-radius: 14px; }
  .method-grid { grid-template-columns: 1fr; gap: 8px; }
  .method-card { grid-template-columns: 44px 1fr; grid-template-areas: "ic t" "ic s"; align-items: center; column-gap: 12px; padding: 12px; } .method-card .method-ic { grid-area: ic; } .method-card strong { grid-area: t; font-size: 15px; } .method-card small { grid-area: s; font-size: 12px; }
  .lyrics-paste { padding: 14px !important; } .lyrics-paste h2 { font-size: 17px; } .lyrics-paste textarea { min-height: 38vh; font-size: 15px; }
  .lyrics-actions .button { flex: 1; justify-content: center; min-height: 46px; }
  .karaoke { padding: 12px !important; border-radius: 20px; }
  .karaoke-modes { display: flex !important; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 -2px 10px; padding: 2px; }
  .karaoke-modes button { flex: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } .karaoke-modes button strong { font-size: 13px; }
  .karaoke-lines { max-height: none; gap: 6px; } .karaoke-line { padding: 10px 12px; border-radius: 14px; } .karaoke-line .line-text { font-size: 16px; }
  .karaoke-lines.lyrics-only .karaoke-line.current .line-text { font-size: 24px; }
  .karaoke-controls { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 8px; padding: 8px; margin: 10px -4px 0; background: #14102bf0; backdrop-filter: blur(10px); border-radius: 18px; justify-content: center; flex-wrap: wrap; }
  .karaoke-controls .button { flex: 1 1 auto; justify-content: center; min-height: 46px; font-size: 14px; }
  .karaoke-hint { font-size: 12px; } .assess { padding: 12px; }
  .music-search-hero .artist-row { gap: 6px; } .song-card { padding: 12px; } 
  .track-row { padding: 10px 12px; }
}
/* Mòbil · portada: l'avatar es veu d'entrada, sense baixar, i menys text */
@media (max-width: 720px) {
  .landing-hero { display: flex !important; flex-direction: column; min-height: calc(100dvh - 70px); gap: 4px; justify-content: center; padding: 0 4px 14px; }
  .landing-stage { order: 1; width: min(78vw, 300px); max-width: none; margin: 0 auto; flex: none; }
  .landing-copy { order: 2; text-align: center; display: grid; justify-items: center; }
  .landing-copy .pill, .landing-copy > p, .landing-copy small { display: none; }
  .landing-copy h1 { font-size: clamp(26px, 8vw, 34px); letter-spacing: -1px; margin: 6px 0 14px; line-height: 1.08; }
  .landing-copy .hero-actions { display: grid; gap: 8px; width: 100%; max-width: 340px; } .landing-copy .hero-actions .button { width: 100%; justify-content: center; }
  .landing-nav { padding-top: calc(8px + env(safe-area-inset-top)); }
  .stage-bubble { font-size: 12px; padding: 8px 12px; top: -2%; }
}
/* Mòbil · «Quin idioma vols parlar?»: caselles iguals, centrat a tota la pantalla */
@media (max-width: 720px) {
  .trial { min-height: 100dvh; justify-content: flex-start; }
  .trial-pick { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; margin: 0; padding: 6px 0 18px; }
  .trial-avatar, .trial-avatar > *, .trial-avatar .avatar-3d { width: 96px !important; height: 96px !important; }
  .trial-pick h1 { font-size: 26px; margin: 4px 0 0; } .trial-pick > p { font-size: 14px; margin: 0 0 6px; max-width: 280px; }
  .trial-langs { grid-template-columns: 1fr 1fr; grid-auto-rows: 84px; gap: 10px; width: 100%; max-width: 380px; }
  .trial-lang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; min-height: 0; height: 100%; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.15; border-radius: 18px; }
  .trial-lang > b { min-width: 0; width: auto; padding: 3px 12px; font-size: 14px; border-radius: 999px; background: #ffffff26; }
  .trial-lang > span { display: block; overflow-wrap: anywhere; }
  .trial-login { margin-top: 6px; }
}
.mod-card { display: grid; gap: 10px; margin-bottom: 12px; } .mod-card.flagged { border-color: #ffb03b; }
.mod-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .mod-card header small { color: var(--muted); } .mod-sus { color: #d4264a; }
.mod-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .mod-img { max-width: 100%; max-height: 320px; border-radius: 14px; object-fit: cover; }
.mod-card footer { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Paraula del dia ===== */
.wordle, .wordle-na { max-width: 460px; margin: 0 auto; display: grid; gap: 12px; justify-items: center; text-align: center; }
.wordle-head { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; } .wordle-head h1 { font-size: 26px; }
.wordle-streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #ff9600; } .wordle-streak svg { width: 22px; height: 22px; }
.wordle-hint { font-size: 13px; margin: 0; }
.wordle-grid { display: grid; gap: 6px; }
.wordle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wordle-cell { display: grid; place-items: center; width: clamp(46px, 14vw, 62px); aspect-ratio: 1; border: 2px solid var(--line); border-radius: 12px; font-size: clamp(22px, 7vw, 30px); font-weight: 800; background: var(--surface); color: var(--ink); text-transform: uppercase; }
.wordle-cell.filled { border-color: var(--purple); transform: scale(1.04); transition: transform .1s; }
.wordle-cell.ok { background: #2ea84a; border-color: #2ea84a; color: #fff; } .wordle-cell.near { background: #e0a100; border-color: #e0a100; color: #fff; } .wordle-cell.no { background: #6b6784; border-color: #6b6784; color: #fff; }
.wordle-cell.flip { animation: wordle-flip .5s ease both; animation-delay: calc(var(--i) * .12s); }
@keyframes wordle-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wordle-row.shake { animation: shake-x .4s; } @keyframes shake-x { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.wordle-msg { font-weight: 700; color: var(--purple-dark); margin: 0; }
.wordle-keys { display: grid; gap: 6px; width: 100%; margin-top: 6px; }
.wordle-keys-row { display: flex; justify-content: center; gap: 5px; }
.wordle-key { flex: 1 1 0; max-width: 42px; min-width: 0; height: 52px; border: 0; border-radius: 10px; background: var(--surface-soft); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.wordle-key.wide { flex: 1.6 1 0; max-width: 64px; font-size: 12px; } .wordle-key svg { width: 20px; height: 20px; }
.wordle-key.ok { background: #2ea84a; color: #fff; } .wordle-key.near { background: #e0a100; color: #fff; } .wordle-key.no { background: #6b6784; color: #fff; opacity: .7; }
.wordle-end { display: grid; gap: 10px; justify-items: center; padding: 16px; width: 100%; box-sizing: border-box; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.wordle-end h2 { font-size: 22px; } .wordle-answer strong { font-size: 24px; letter-spacing: 2px; color: var(--purple); } .wordle-end blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--purple); background: var(--surface-soft); border-radius: 10px; text-align: left; font-weight: 650; } .wordle-end blockquote small { display: block; color: var(--muted); font-weight: 500; margin-top: 4px; }
.m-tile.green { background: #2ea84a; }
@media (max-width: 720px) { body.m-full .wordle { padding-top: 4px; } .wordle-key { height: 48px; } .wordle-head h1 { font-size: 22px; } }
.wordle-xp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark); font-weight: 800; } .wordle-xp svg { width: 18px; height: 18px; }
.wordle.done .wordle-cell { width: clamp(34px, 10vw, 44px); font-size: 18px; border-radius: 9px; } .wordle.done .wordle-grid, .wordle.done .wordle-row { gap: 4px; } .wordle.done .wordle-hint { display: none; }
.wordle-end { gap: 6px; padding: 12px; } .wordle-end h2 { font-size: 20px; } .wordle-end p { margin: 0; } .wordle-end .comm-actions { margin: 0; }
.wordle-clue { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 8px 14px; border-radius: 14px; background: var(--purple-soft); color: var(--purple-dark); } .wordle-clue svg { width: 18px; height: 18px; } .wordle-clue strong { font-size: 17px; }
.wordle-row { grid-template-columns: repeat(var(--n, 5), 1fr); } .wordle-cell { font-size: clamp(22px, 7vw, 32px); text-transform: none; }
.wordle-keys-row.wrap { flex-wrap: wrap; } .wordle-key.tile { flex: 0 0 calc(25% - 6px); max-width: none; height: 54px; font-size: 24px; }
/* Troba l'intrús */
.intrus, .intrus-intro, .intrus-end { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; }
.intrus-head { display: flex; align-items: center; gap: 12px; width: 100%; font-weight: 800; } .intrus-head svg { width: 16px; height: 16px; vertical-align: -2px; } .intrus-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; } .intrus-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width .3s; }
.intrus-sentence { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; align-items: center; font-size: clamp(22px, 6vw, 30px); font-weight: 750; line-height: 1.6; padding: 6px; }
.intrus-word { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 4px 12px; font: inherit; cursor: pointer; transition: transform .15s, background .2s; } .intrus-word:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--purple); }
.intrus-word.wrong-word { background: #ff4d6d22; border-color: #ff4d6d; color: #d4264a; text-decoration: line-through; } .intrus-word.missed { background: var(--surface-soft); opacity: .6; } .intrus-sep { white-space: pre; }
.intrus-fb { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 16px; width: 100%; box-sizing: border-box; background: var(--surface); box-shadow: var(--shadow); } .intrus-fb.ok svg { color: #2ea84a; } .intrus-fb.bad svg { color: #d4264a; } .intrus-fb svg { width: 26px; height: 26px; flex: none; } .intrus-fb p { margin: 2px 0; font-weight: 650; } .intrus-fb small { color: var(--muted); }
.intrus-score { font-size: 28px; margin: 0; } .intrus-score strong { font-size: 52px; color: var(--purple); }
.m-tile.orange { background: #ff8a3d; }
@media (max-width: 720px) { body.m-full .intrus { padding-top: 8px; } }
/* Mode viatge */
.travel { max-width: 680px; margin: 0 auto; display: grid; gap: 14px; }
.travel-head { display: grid; gap: 8px; } .travel-head h1 { font-size: clamp(26px, 6vw, 38px); letter-spacing: -1px; }
.travel-place { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); } .travel-place svg { width: 20px; height: 20px; color: var(--purple); } .travel-place input { flex: 1; border: 0; outline: 0; background: none; font: inherit; color: var(--ink); min-width: 0; }
.travel-kits { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } .travel-kits::-webkit-scrollbar { display: none; }
.travel-kit { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .travel-kit svg { width: 18px; height: 18px; } .travel-kit.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px #6d4dff40; }
.travel-progress { display: grid; gap: 4px; } .travel-progress .meter-bar { height: 8px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; } .travel-progress .meter-bar i { display: block; height: 100%; background: var(--grad); } .travel-progress small { color: var(--muted); }
.travel-list { display: grid; gap: 10px; }
.travel-card { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); } .travel-card.learned { opacity: .72; }
.travel-say { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; padding: 0; } .travel-say-text { font-size: clamp(18px, 4.6vw, 22px); font-weight: 800; line-height: 1.3; } .travel-say svg { width: 22px; height: 22px; color: var(--purple); flex: none; }
.travel-meaning { margin: 0; color: var(--muted); }
.travel-hear summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--purple-dark); } .travel-hear-line { display: flex; gap: 8px; align-items: center; border: 0; background: var(--surface-soft); padding: 8px 12px; border-radius: 12px; margin-top: 6px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; } .travel-hear-line svg { width: 16px; height: 16px; flex: none; color: var(--purple); }
.travel-know { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .travel-know svg { width: 14px; height: 14px; } .travel-know.on { background: #2ea84a22; color: #2ea84a; border-color: #2ea84a; }
@media (max-width: 720px) { body.m-full .travel { padding-top: 0; } }
/* Jocs destacats a dalt de Juga */
.quick-games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 8px; }
.quick-game { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 20px; color: #fff; text-decoration: none; box-shadow: 0 10px 24px #3b2a7a2e; border-bottom: 5px solid #0003; transition: transform .2s; } .quick-game:hover { transform: translateY(-3px); }
.quick-game span svg { width: 30px; height: 30px; } .quick-game strong { font-size: 16px; line-height: 1.2; } .quick-game small { opacity: .9; }
.qg-green { background: #2ea84a; } .qg-orange { background: #ff8a3d; } .qg-violet { background: #8b5cf6; } .qg-red { background: #ff4b4b; }
@media (max-width: 720px) { .quick-games { grid-template-columns: 1fr 1fr; gap: 10px; } .quick-game { padding: 12px; border-radius: 16px; min-height: 88px; } .quick-game strong { font-size: 14px; } .quick-game span svg { width: 24px; height: 24px; } .quick-game small { font-size: 11px; } }
/* 9 jocs en una graella 3×3 */
.quick-games { grid-template-columns: repeat(3, 1fr) !important; }
.quick-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0 0 2px; } .quick-title svg { width: 22px; height: 22px; color: var(--purple); } .quick-title small { font-size: 12px; color: var(--muted); font-weight: 600; }
button.quick-game { border: 0; font: inherit; text-align: left; cursor: pointer; }
.quick-game { align-content: center; min-height: 104px; } .quick-game small { display: none; }
.qg-blue { background: #1e90ff; } .qg-pink { background: #ec4899; } .qg-teal { background: #0ea5a5; } .qg-gold { background: #e0a100; } .qg-indigo { background: #5b5bd6; }
@media (max-width: 720px) { .quick-games { gap: 8px; } .quick-game { min-height: 84px; padding: 10px; border-radius: 14px; } .quick-game strong { font-size: 13px; } .quick-title { font-size: 17px; } .quick-title small { display: block; } }
/* Històries curtes */
.story, .story-hub, .story-end { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; }
.story-hub, .story-end { justify-items: center; text-align: center; }
.story-list { display: grid; gap: 10px; width: 100%; } .story-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); text-align: left; font: inherit; color: var(--ink); cursor: pointer; } .story-card > span:nth-child(2) { flex: 1; } .story-card strong { display: block; font-size: 17px; } .story-card small { color: var(--muted); } .story-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; } .story-ic svg { width: 24px; height: 24px; } .story-card > svg { width: 20px; height: 20px; color: var(--muted); }
.story-intro { text-align: center; color: var(--muted); font-style: italic; margin: 0; }
.story-thread { display: grid; gap: 8px; }
.story-line { max-width: 84%; padding: 10px 14px; border-radius: 18px; line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; } .story-line small { display: block; color: var(--muted); font-weight: 500; margin-top: 3px; }
.story-line.them { justify-self: start; background: var(--surface); box-shadow: var(--shadow); border-bottom-left-radius: 4px; } .story-line.me { justify-self: end; background: var(--purple-soft); color: var(--purple-dark); border-bottom-right-radius: 4px; }
.story-line.current { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; font-size: 18px; } .story-line.current small { flex-basis: 100%; }
.story-say { border: 0; background: var(--grad); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; } .story-say svg { width: 18px; height: 18px; }
.story-options { display: grid; gap: 10px; }
.story-option { text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s; } .story-option:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--purple); } .story-option small { display: block; color: var(--muted); font-weight: 500; margin-top: 3px; }
.story-option.good { background: #2ea84a22; border-color: #2ea84a; } .story-option.bad { background: #ff4d6d22; border-color: #ff4d6d; }
.story-recap { display: grid; gap: 8px; width: 100%; text-align: left; }
@media (max-width: 720px) { body.m-full .story { padding-top: 8px; } .story-line { max-width: 92%; } }
.story, .story-hub, .story-end { width: 100%; box-sizing: border-box; }
.story small, .story-hub small, .story-end small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
.story-line, .story-option, .intrus-fb { box-sizing: border-box; } .intrus-fb > div { flex: 1; min-width: 0; }
.story-options { justify-items: stretch; } .story-option { width: 100%; }
.story-line.them.current { width: 100%; max-width: none; }

/* Cant: el botó principal sempre a la vista; la lletra té el seu propi scroll */
.karaoke { display: flex; flex-direction: column; }
.karaoke-lines { max-height: max(220px, calc(100dvh - 380px)) !important; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; }
.karaoke-controls { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 8; background: #14102bf2; backdrop-filter: blur(10px); padding: 10px; border-radius: 18px; margin-top: 10px; box-shadow: 0 -6px 24px #0006; }
.karaoke-controls .button { min-height: 48px; }
.karaoke-lines .karaoke-line.current { scroll-margin: 40px; }
@media (max-width: 720px) { .karaoke-lines { max-height: max(200px, calc(100dvh - 400px)) !important; } }
/* Idiomes al perfil */
.insta-langs { display: grid; gap: 8px; margin: 10px 0 4px; }
.insta-langs p { margin: 0; display: grid; gap: 6px; } .insta-langs p > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .insta-langs p > span:first-child svg { width: 14px; height: 14px; color: var(--purple); }
.insta-learned-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-chip-big { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark); font-weight: 700; font-size: 13px; } .lang-chip-big b { padding: 1px 6px; border-radius: 6px; background: var(--purple); color: #fff; font-size: 11px; } .lang-chip-big small { color: var(--muted); font-weight: 600; }
.insta-learned.poly > span:first-child { color: #b36b00; } .insta-learned.poly .lang-chip-big { background: linear-gradient(135deg, #fff3d6, #ffe3f0); color: #7a3d00; }
@media (max-width: 720px) { .insta-langs { grid-column: 1 / -1; } .insta-head .insta-info { display: contents; } }