:root {
  color-scheme: light;
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-soft: #f0effb;
  --text: #181724;
  --muted: #6e6a7c;
  --line: #e4e1ec;
  --brand: #6d4aff;
  --brand-deep: #4d2ed3;
  --brand-soft: #eee9ff;
  --lime: #c8ff5a;
  --pink: #ff6596;
  --cyan: #48d8e8;
  --danger: #d83663;
  --success: #149c6b;
  --shadow: 0 20px 60px rgba(48, 37, 93, .10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11101a;
  --surface: #1b1927;
  --surface-soft: #242136;
  --text: #f5f3ff;
  --muted: #aaa5ba;
  --line: #343046;
  --brand: #9379ff;
  --brand-deep: #b4a3ff;
  --brand-soft: #2d2750;
  --shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 100; transform: translateY(-150%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); backdrop-filter: blur(16px); }
.header-inner { min-height: 74px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 700; white-space: nowrap; }
.brand strong { color: var(--brand); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px 12px 12px 4px; background: var(--brand); color: #fff; font-weight: 800; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 35%, transparent); }
.main-nav { display: flex; align-items: center; gap: 24px; margin-inline-end: auto; }
.main-nav a, .site-footer nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 700; }
.main-nav a:hover, .site-footer nav a:hover { color: var(--brand); }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 50%; cursor: pointer; font-size: 20px; }

.hero { min-height: 510px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; padding-block: 70px 50px; }
.eyebrow { color: var(--brand); font-weight: 800; font-size: 13px; letter-spacing: .04em; margin: 0 0 14px; }
.hero h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.12; letter-spacing: -.045em; margin: 0; }
.hero h1 span { color: var(--brand); }
.hero-text { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.9; margin: 22px 0 30px; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-radius: 13px; padding: 13px 20px; text-decoration: none; font-weight: 800; cursor: pointer; }
.primary-button { background: var(--brand); color: #fff; box-shadow: 0 12px 25px color-mix(in srgb, var(--brand) 28%, transparent); }
.primary-button:hover { background: var(--brand-deep); transform: translateY(-1px); }
.primary-button.compact { padding: 10px 18px; }
.secondary-button { background: var(--brand-soft); color: var(--brand-deep); }
.secondary-button:hover { filter: brightness(.97); }

.hero-visual { position: relative; height: 370px; border-radius: 46% 54% 56% 44% / 53% 43% 57% 47%; background: linear-gradient(145deg, var(--brand), #865eff 62%, #a789ff); box-shadow: 0 34px 80px rgba(104, 74, 255, .28); overflow: hidden; isolation: isolate; }
.hero-visual::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.12); bottom: -60px; left: 30px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.orbit-one { width: 300px; height: 300px; top: 35px; right: 70px; }
.orbit-two { width: 220px; height: 220px; top: 75px; right: 110px; }
.hero-tile { position: absolute; display: grid; place-items: center; width: 86px; height: 86px; color: #161126; font-size: 46px; font-weight: 800; border-radius: 25px; box-shadow: 0 18px 36px rgba(28, 19, 78, .25); transform: rotate(-8deg); }
.tile-gamepad { background: var(--lime); top: 62px; right: 54px; }
.tile-x { background: #fff; top: 108px; left: 64px; transform: rotate(9deg); }
.tile-o { background: var(--pink); bottom: 42px; right: 155px; transform: rotate(4deg); color: #fff; }
.hero-score { position: absolute; bottom: 28px; left: 38px; z-index: 2; background: rgba(255,255,255,.94); color: #181724; padding: 14px 19px; border-radius: 16px; box-shadow: 0 14px 34px rgba(29, 20, 73, .19); transform: rotate(-3deg); }
.hero-score span { display: block; font-size: 11px; color: #716b80; }
.hero-score strong { font-size: 23px; }



.games-section { padding-block: 66px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.025em; }
.section-heading > p { color: var(--muted); max-width: 390px; line-height: 1.8; margin: 0; }
.game-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.game-tab { display: flex; align-items: center; gap: 14px; text-align: right; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); padding: 17px; cursor: pointer; transition: .2s ease; }
.game-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.game-tab.is-active { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.game-tab span:last-child { display: grid; gap: 4px; }
.game-tab strong { font-size: 15px; }
.game-tab small { color: var(--muted); font-size: 12px; }
.tab-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; font-size: 24px; font-weight: 800; }
.memory-icon { background: color-mix(in srgb, var(--lime) 70%, var(--surface)); color: #384e00; }
.xo-icon { background: color-mix(in srgb, var(--pink) 25%, var(--surface)); color: var(--danger); }
.reaction-icon { background: color-mix(in srgb, var(--cyan) 25%, var(--surface)); color: #087684; }

.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }
.game-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.game-panel { min-height: 580px; padding: 24px; }
.game-toolbar { display: flex; align-items: center; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.game-toolbar > div { min-width: 82px; }
.game-toolbar span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.game-toolbar strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.game-toolbar button { margin-inline-start: auto; }
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(520px, 100%); margin: 28px auto 14px; }
.memory-card { position: relative; aspect-ratio: 1; border: 0; background: transparent; padding: 0; cursor: pointer; perspective: 700px; }
.memory-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s ease; }
.memory-card.is-flipped .memory-card-inner, .memory-card.is-matched .memory-card-inner { transform: rotateY(180deg); }
.memory-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 17px; backface-visibility: hidden; }
.memory-front { background: linear-gradient(145deg, var(--brand), #8d6dff); color: rgba(255,255,255,.82); font-size: 26px; }
.memory-front::after { content: "؟"; }
.memory-back { transform: rotateY(180deg); background: var(--surface-soft); border: 1px solid var(--line); font-size: clamp(25px, 5vw, 38px); }
.memory-card.is-matched .memory-back { background: color-mix(in srgb, var(--lime) 35%, var(--surface)); border-color: color-mix(in srgb, var(--lime) 80%, var(--line)); }
.game-message { min-height: 28px; text-align: center; color: var(--success); font-weight: 800; }
.side-column { display: grid; gap: 20px; }
.tips-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.tips-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); font-size: 24px; }
.tips-card h3 { margin: 16px 0 8px; font-size: 16px; }
.tips-card p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }

.turn-indicator { text-align: center; color: var(--muted); font-weight: 800; margin: 24px 0 16px; }
.xo-board { width: min(430px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xo-cell { aspect-ratio: 1; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 19px; color: var(--brand); font-size: clamp(40px, 8vw, 72px); font-weight: 800; cursor: pointer; }
.xo-cell:hover:empty { border-color: var(--brand); }
.xo-cell.is-o { color: var(--pink); }
.xo-cell.is-win { background: color-mix(in srgb, var(--lime) 40%, var(--surface)); }

.reaction-toolbar { justify-content: center; }
.reaction-zone { width: min(620px, 100%); min-height: 360px; margin: 30px auto 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; border: 0; border-radius: 26px; cursor: pointer; transition: background .18s ease, transform .18s ease; color: #fff; padding: 30px; }
.reaction-zone:active { transform: scale(.992); }
.reaction-zone.is-idle { background: linear-gradient(145deg, var(--brand), #8a67ff); }
.reaction-zone.is-waiting { background: linear-gradient(145deg, #da486e, #fe7198); }
.reaction-zone.is-ready { background: linear-gradient(145deg, #09a96f, #4fd58c); }
.reaction-zone.is-result { background: linear-gradient(145deg, #177f9b, #44c5d8); }
.reaction-symbol { font-size: 64px; margin-bottom: 10px; }
.reaction-zone strong { font-size: clamp(23px, 4vw, 36px); }
.reaction-zone small { font-size: 14px; opacity: .9; }

.smart-games { padding-block: 50px 80px; }
.smart-game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.smart-game-card { position: relative; min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border-radius: var(--radius-lg); padding: 28px; text-decoration: none; color: #fff; box-shadow: var(--shadow); isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; }
.smart-game-card:hover { transform: translateY(-5px); box-shadow: 0 26px 70px rgba(48, 37, 93, .18); }
.smart-game-card::after { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; left: -80px; bottom: -100px; box-shadow: 0 0 0 38px rgba(255,255,255,.04), 0 0 0 76px rgba(255,255,255,.03); }
.game-2048-card { background: linear-gradient(145deg, #5b3ee4, #8768ff); }
.sudoku-card { background: linear-gradient(145deg, #087b8e, #32b9ca); }
.words-card { background: linear-gradient(145deg, #c63c68, #f06d94); }
.road-card { background: linear-gradient(145deg, #25354f, #476a91); }
.arrows-card { background: linear-gradient(145deg, #68421e, #b36d24); }
.penalty-card { background: linear-gradient(145deg, #14724f, #29aa72); }
.battle-card { background: linear-gradient(145deg, #772f73, #b74ba8); }
.strategy-card { background: linear-gradient(145deg, #27354f, #526d98); }
.smart-game-number { align-self: stretch; display: grid; place-items: center; min-height: 112px; margin-bottom: 24px; border-radius: 22px; background: rgba(255,255,255,.14); font-size: 48px; font-weight: 800; letter-spacing: -.04em; backdrop-filter: blur(8px); }
.sudoku-symbol, .words-symbol { font-size: 38px; }
.smart-game-meta { font-size: 11px; opacity: .82; }
.smart-game-card h3 { font-size: 24px; margin: 7px 0 9px; }
.smart-game-card p { margin: 0 0 22px; font-size: 13px; line-height: 1.8; opacity: .88; }
.smart-game-action { margin-top: auto; font-weight: 800; font-size: 13px; }
.smart-game-action b { margin-inline-start: 7px; }


.mines-card { background: linear-gradient(145deg, #334a6a, #668bb8); }
.progress-hub { padding-block: 10px 70px; }
.progress-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.progress-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.progress-card span { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }
.progress-card strong { display:block; font-size:clamp(22px,4vw,34px); }
.progress-card a { color:var(--brand); font-weight:800; text-decoration:none; }
.progress-card.daily { grid-column:span 2; }
.progress-card .daily-state { margin-top:8px; color:var(--muted); font-size:12px; }
@media (max-width:900px){.progress-grid{grid-template-columns:repeat(2,1fr)}.progress-card.daily{grid-column:span 2}}
@media (max-width:520px){.progress-grid{grid-template-columns:1fr}.progress-card.daily{grid-column:span 1}}

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block: 20px 80px; }
.features article { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-top: 1px solid var(--line); }
.features article > span { color: var(--brand); font-size: 28px; }
.features h3 { margin: 0 0 7px; font-size: 15px; }
.features p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 42px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 30px; }
.footer-brand { margin-bottom: 12px; }
.footer-inner > div > p { color: var(--muted); margin: 0; font-size: 12px; }
.site-footer nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.copyright { color: var(--muted); font-size: 12px; }

.consent-banner { position: fixed; z-index: 50; inset-inline: 20px; bottom: 20px; max-width: 940px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 70px rgba(0,0,0,.24); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.consent-banner p { color: var(--muted); margin: 6px 0 0; font-size: 12px; line-height: 1.7; }
.consent-banner p a { color: var(--brand); }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.content-page { padding-block: 70px 90px; }
.page-hero { max-width: 760px; margin-bottom: 38px; }
.page-hero h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 16px; letter-spacing: -.035em; }
.page-hero p { color: var(--muted); line-height: 1.9; font-size: 17px; }
.prose-card { max-width: 860px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 5vw, 48px); box-shadow: var(--shadow); }
.prose-card h2 { margin: 34px 0 10px; font-size: 22px; }
.prose-card h2:first-child { margin-top: 0; }
.prose-card p, .prose-card li { color: var(--muted); line-height: 2; }
.prose-card a { color: var(--brand); }
.contact-form { display: grid; gap: 16px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 12px; padding: 13px 14px; }
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; text-align: center; padding-top: 55px; }
  .hero-text { margin-inline: auto; }
  .hero-visual { width: min(560px, 100%); margin-inline: auto; }
  .play-layout { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr 1fr; }
  .ad-unit-box { min-height: 180px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { justify-content: center; }
  .smart-game-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 24px, 1160px); }
  .header-inner { gap: 14px; }
  .main-nav { display: none; }
  .icon-button { margin-inline-start: auto; }
  .hero { min-height: auto; padding-block: 44px 30px; }
  .hero-visual { height: 310px; }
  .game-tabs { grid-template-columns: 1fr; }
  .game-tab { padding: 13px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 12px; }
  .game-panel { min-height: 520px; padding: 16px; }
  .game-toolbar { gap: 15px; flex-wrap: wrap; }
  .game-toolbar > div { min-width: 60px; flex: 1; }
  .game-toolbar button { width: 100%; margin: 0; }
  .memory-board { gap: 8px; }
  .memory-face { border-radius: 12px; }
  .side-column { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; gap: 0; padding-bottom: 45px; }
  .smart-game-grid { grid-template-columns: 1fr; }
  .smart-game-card { min-height: 320px; }
  .reaction-toolbar { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
  .reaction-zone { min-height: 300px; }
  .consent-banner { align-items: stretch; flex-direction: column; gap: 14px; }
  .consent-actions > * { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* بطاقات ألعاب الذكاء الجديدة */
.chess-card { background: linear-gradient(145deg, #343241, #6e687d); }
.checkers-card { background: linear-gradient(145deg, #7a3340, #bd5667); }
.maze-card { background: linear-gradient(145deg, #236d61, #3ca08c); }

.galaxy-card { background: linear-gradient(145deg, #10143f, #294c80); }


/* GameHub AI suggestion hub */
.suggestion-hub{margin-block:34px}.suggestion-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start;padding:24px;border:1px solid var(--border-color,#334155);border-radius:20px;background:var(--surface,#172033)}.suggestion-card h2{margin:.25rem 0 .6rem}.suggestion-form{display:grid;gap:12px}.suggestion-form label{display:grid;gap:6px;font-weight:700}.suggestion-form input,.suggestion-form textarea{width:100%;padding:12px 14px;border:1px solid var(--border-color,#475569);border-radius:12px;background:var(--background,#0f172a);color:inherit;font:inherit;resize:vertical}.suggestion-form input:focus,.suggestion-form textarea:focus{outline:2px solid #60a5fa;outline-offset:2px}.form-status{min-height:1.4em;margin:0;opacity:.85}@media(max-width:720px){.suggestion-card{grid-template-columns:1fr;padding:18px}}

/* GameHub AI connection status */
.ai-connection-status { margin-top: 8px; font-size: .92rem; opacity: .9; }
.ai-connection-status[data-state="online"] { font-weight: 700; }
.ai-connection-status[data-state="offline"] { opacity: .72; }

/* GameHub v13 — Accounts & Cloud Save */
.account-button{border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:999px;padding:.62rem .9rem;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}.account-button:hover{border-color:var(--brand)}
.account-modal[hidden]{display:none!important}.account-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:rgba(4,8,18,.72);backdrop-filter:blur(8px)}
.account-dialog{width:min(520px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.account-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.account-dialog-head h2{margin:.2rem 0 0}.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.account-tabs .is-active{outline:2px solid var(--brand)}
.account-form{display:grid;gap:12px}.account-form label{display:grid;gap:6px;font-weight:700}.account-form input{width:100%;border:1px solid var(--line);background:var(--surface-soft);color:inherit;border-radius:12px;padding:.8rem .9rem;font:inherit}.account-form input:focus{outline:2px solid var(--brand);outline-offset:1px}
.account-warning{border:1px solid rgba(245,158,11,.45);border-radius:12px;padding:10px 12px;margin-bottom:12px;background:rgba(245,158,11,.09)}.account-guest-button{width:100%;margin-top:12px;border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.account-profile{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:14px;margin:10px 0}.account-profile strong{font-size:1.35rem}.account-profile small{opacity:.65;direction:ltr;text-align:right}.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.account-actions>*{flex:1 1 130px}
@media(max-width:680px){.header-inner{gap:8px}.account-button{padding:.55rem .72rem;font-size:.9rem}.account-dialog{border-radius:16px;padding:16px}}


/* GameHub v13.2 — Site maintenance/update notice */
.site-announcements-wrap[hidden]{display:none!important}.site-announcements-wrap{position:relative;z-index:90;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 97%,transparent);padding:10px 0}.site-announcements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}.site-maintenance-banner{min-width:0;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,#f59e0b 10%);color:var(--text);padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.maintenance-inner{min-height:74px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.maintenance-copy{display:flex;align-items:flex-start;gap:10px;min-width:0}.maintenance-copy>div{min-width:0}.maintenance-copy strong{display:block;font-size:1rem;overflow-wrap:anywhere}.maintenance-copy p{margin:.25rem 0 0;opacity:.82;overflow-wrap:anywhere}.maintenance-kind{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:.28rem .58rem;font-size:.78rem;font-weight:800;white-space:nowrap}.maintenance-time{text-align:left;display:grid;gap:3px;min-width:max-content}.maintenance-time span{font-size:.8rem;opacity:.72}.maintenance-time strong{font-size:.86rem;font-variant-numeric:tabular-nums}.site-maintenance-banner[data-kind="update"]{background:color-mix(in srgb,var(--surface) 91%,#3b82f6 9%)}.site-maintenance-banner[data-kind="notice"]{background:color-mix(in srgb,var(--surface) 94%,#8b5cf6 6%)}
.account-confirmation{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}.account-confirmation p{margin:.55rem 0}.account-confirmation-tip{font-size:.9rem;opacity:.72}
@media(max-width:700px){.site-announcements-grid{grid-template-columns:1fr}.maintenance-inner{align-items:flex-start;flex-direction:column;gap:9px}.maintenance-time{text-align:right;min-width:0}.maintenance-copy{width:100%}}


/* v13.3.5 — Homepage visual refresh only. No gameplay/account/AI logic changes. */
.hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-secondary-link { color:var(--muted); font-size:13px; font-weight:800; text-underline-offset:5px; }
.hero-secondary-link:hover { color:var(--brand); }
.hero-stats { display:flex; align-items:stretch; gap:10px; margin-top:28px; flex-wrap:wrap; }
.hero-stats > span { min-width:112px; display:grid; gap:3px; padding:11px 14px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--surface) 82%, transparent); box-shadow:0 9px 26px rgba(48,37,93,.05); }
.hero-stats strong { font-size:14px; color:var(--text); }
.hero-stats small { font-size:10px; color:var(--muted); }
.section-count { flex:0 0 auto; align-self:center; padding:8px 12px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep); font-size:11px; font-weight:800; }
.smart-game-grid { gap:16px; }
.smart-game-card { min-height:310px; padding:22px; border:1px solid rgba(255,255,255,.10); }
.smart-game-card::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(255,255,255,.055), transparent 44%); pointer-events:none; }
.smart-game-card:hover { transform:translateY(-4px) scale(1.005); }
.smart-game-number { align-self:flex-start; width:76px; min-height:76px; margin-bottom:18px; border-radius:20px; font-size:34px; background:rgba(255,255,255,.15); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.sudoku-symbol, .words-symbol { font-size:29px; }
.smart-game-meta { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px; background:rgba(10,10,20,.14); font-size:10px; opacity:.96; }
.smart-game-card h3 { font-size:22px; margin:10px 0 7px; }
.smart-game-card p { font-size:12px; line-height:1.75; margin-bottom:18px; opacity:.9; }
.smart-game-action { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:11px; background:rgba(255,255,255,.12); backdrop-filter:blur(7px); }
.smart-game-card:hover .smart-game-action { background:rgba(255,255,255,.19); }
.progress-card { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.progress-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 38%,var(--line)); }

@media (max-width:900px){
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center}
  .section-count{display:none}
}
@media (max-width:520px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:7px}
  .hero-stats>span{min-width:0;padding:10px 7px;text-align:center}
  .hero-stats strong{font-size:12px}
  .hero-stats small{font-size:9px}
  .smart-game-card{min-height:270px;padding:19px}
  .smart-game-number{width:66px;min-height:66px;font-size:30px}

}

#games,
#smart-games {
  scroll-margin-top: 100px;
}

/* v13.3.6 — Player account & statistics visual upgrade only. */
.account-dialog{width:min(760px,100%)}
.account-profile-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface));padding:16px}
.account-avatar{width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:18px;background:color-mix(in srgb,var(--brand) 14%,var(--surface-soft));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));font-size:28px}
.account-profile-copy{display:grid;gap:3px;min-width:0}.account-profile-copy strong{font-size:1.45rem}.account-profile-copy small{opacity:.68;overflow-wrap:anywhere}
.account-custom-title{justify-self:start;display:inline-flex;align-items:center;max-width:100%;margin:2px 0 1px;padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand) 36%,var(--line));background:color-mix(in srgb,var(--brand) 10%,var(--surface-soft));color:var(--brand);font-size:.78rem;font-weight:900;line-height:1.25;overflow-wrap:anywhere}.account-custom-title[hidden]{display:none}
.account-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.account-stat-card{display:grid;align-content:center;gap:5px;min-height:86px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.account-stat-card span{font-size:.78rem;color:var(--muted)}.account-stat-card strong{font-size:1.18rem;line-height:1.25}.account-stat-card strong b{font:inherit}.account-stat-wide strong{font-size:1rem}
.account-records{margin:12px 0;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);overflow:hidden}.account-records summary{cursor:pointer;font-weight:800;padding:12px 14px;user-select:none}.account-records[open] summary{border-bottom:1px solid var(--line)}
.account-records-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:4px 12px 10px}.account-records-grid>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 3px;border-bottom:1px dashed var(--line)}.account-records-grid span{font-size:.84rem;color:var(--muted)}.account-records-grid strong{font-size:.9rem}
.account-sync-status{margin:10px 0 0}.account-logout-button{border-color:color-mix(in srgb,#ef4444 35%,var(--line))}
@media(max-width:680px){.account-dialog{width:min(560px,100%)}.account-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-stat-card{min-height:78px}.account-records-grid{grid-template-columns:1fr}.account-profile-hero{align-items:flex-start}.account-avatar{width:50px;height:50px;border-radius:15px;font-size:24px}}


/* v13.3.7 — Achievement system: 8 persistent, cloud-synced achievements. */
.account-achievements{margin:12px 0;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);overflow:hidden}
.account-achievements summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-weight:800;padding:12px 14px;user-select:none}
.account-achievements[open] summary{border-bottom:1px solid var(--line)}
.account-achievements summary span{font-size:.82rem;color:var(--brand);font-variant-numeric:tabular-nums}
.account-achievement-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px}
.account-achievement{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--surface) 82%,transparent);opacity:.72}
.account-achievement.is-unlocked{opacity:1;border-color:color-mix(in srgb,var(--brand) 38%,var(--line));background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.account-achievement-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:var(--surface);font-size:19px;border:1px solid var(--line)}
.account-achievement-copy{display:grid;gap:5px;min-width:0;flex:1}.account-achievement-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.account-achievement-title strong{font-size:.91rem}.account-achievement-title span{font-size:.72rem;color:var(--muted);white-space:nowrap}.account-achievement-copy small{font-size:.75rem;color:var(--muted);line-height:1.45}
.account-achievement-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.7rem;color:var(--muted)}.account-achievement-meta span:first-child{font-weight:800;color:var(--brand)}
.account-achievement-bar{height:5px;border-radius:999px;background:color-mix(in srgb,var(--line) 72%,transparent);overflow:hidden}.account-achievement-bar i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .25s ease}
@media(max-width:680px){.account-achievement-list{grid-template-columns:1fr;padding:10px}.account-achievement{padding:10px}.account-achievement-title{align-items:flex-start;flex-direction:column;gap:2px}}
.connect-four-card { background: linear-gradient(145deg, #314b9d, #6e45c7); }

.snake-card { background: linear-gradient(145deg, #176f55, #31aa78); }

/* Game Pack 1 card accents */
.breakout-card .smart-game-number{color:#e9783d}.simon-card .smart-game-number{color:#7654df}.whack-card .smart-game-number{color:#e6a12b}

/* Game Feel Core v13.3.8.10.5 — صوت ومؤثرات خفيفة بدون ملفات وسائط */
.game-feel-toggle {
  position: fixed;
  z-index: 1200;
  inset-inline-start: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.game-feel-toggle:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.game-feel-toggle:active { transform: scale(.96); }
.game-feel-toggle[aria-pressed="true"] { opacity: .72; }

.game-feel-fx-layer { position: fixed; inset: 0; z-index: 1190; pointer-events: none; overflow: hidden; }
.game-feel-screen-flash { position: absolute; inset: 0; opacity: 0; animation: gameFeelFlash .58s ease-out both; }
.game-feel-screen-flash.is-win, .game-feel-screen-flash.is-success { background: radial-gradient(circle at center, rgba(71,214,144,.22), transparent 58%); }
.game-feel-screen-flash.is-loss { background: radial-gradient(circle at center, rgba(239,71,111,.20), transparent 60%); }
.game-feel-screen-flash.is-draw { background: radial-gradient(circle at center, rgba(245,183,71,.16), transparent 58%); }

.game-feel-particle { position: absolute; width: 8px; height: 8px; border-radius: 3px; transform: translate(-50%,-50%); animation: gameFeelParticle .78s cubic-bezier(.12,.68,.24,1) forwards; background: var(--brand); box-shadow: 0 0 9px currentColor; }
.game-feel-particle.is-win, .game-feel-particle.is-success { background: #47d690; color: #47d690; }
.game-feel-particle.is-loss { background: #ef476f; color: #ef476f; }
.game-feel-particle:nth-child(3n) { background: #f3ad3f; color: #f3ad3f; border-radius: 50%; }
.game-feel-particle:nth-child(4n) { background: #8b6cf4; color: #8b6cf4; }

.game-feel-pop { position: absolute; transform: translate(-50%,-50%); font-size: clamp(16px,3vw,24px); font-weight: 1000; text-shadow: 0 3px 12px rgba(0,0,0,.28); animation: gameFeelPop .72s ease-out forwards; white-space: nowrap; }
.game-feel-pop.is-score, .game-feel-pop.is-success { color: #47d690; }
.game-feel-pop.is-error { color: #ef476f; }

.game-feel-pulse { animation: gameFeelPulse .34s ease-out !important; }
.game-feel-shake { animation: gameFeelShake .36s ease-in-out !important; }

@keyframes gameFeelFlash { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
@keyframes gameFeelParticle { 0%{opacity:1; transform:translate(-50%,-50%) scale(.9) rotate(0)} 100%{opacity:0; transform:translate(calc(-50% + var(--fx-x)),calc(-50% + var(--fx-y))) scale(.35) rotate(var(--fx-r))} }
@keyframes gameFeelPop { 0%{opacity:0; transform:translate(-50%,-20%) scale(.78)} 18%{opacity:1; transform:translate(-50%,-55%) scale(1.08)} 100%{opacity:0; transform:translate(-50%,-145%) scale(.96)} }
@keyframes gameFeelPulse { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes gameFeelShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

@media (max-width: 620px) {
  .game-feel-toggle { min-height: 40px; padding: 8px 10px; }
  .game-feel-toggle span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .game-feel-screen-flash, .game-feel-particle, .game-feel-pop, .game-feel-pulse, .game-feel-shake { animation: none !important; }
}

/* v13.3.8.10.14 — Player Progression Core */
.progression-card small{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;line-height:1.35}
.progress-level-bar,.account-xp-bar{height:7px;margin-top:10px;border-radius:999px;background:color-mix(in srgb,var(--line) 76%,transparent);overflow:hidden}
.progress-level-bar i,.account-xp-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#fff));transition:width .35s ease}
.account-level-panel{display:flex;align-items:center;gap:13px;padding:13px 14px;margin:12px 0;border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line));border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface-soft)),var(--surface-soft))}
.account-level-badge{width:58px;height:58px;display:grid;place-items:center;align-content:center;flex:0 0 auto;border-radius:16px;border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line));background:color-mix(in srgb,var(--brand) 12%,var(--surface));box-shadow:0 8px 28px color-mix(in srgb,var(--brand) 13%,transparent)}
.account-level-badge span{font-size:.62rem;letter-spacing:.12em;color:var(--muted);line-height:1}.account-level-badge strong{font-size:1.55rem;line-height:1.1;color:var(--brand)}
.account-level-copy{min-width:0;flex:1}.account-level-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.account-level-head strong{font-size:1rem}.account-level-head span{font-size:.8rem;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}.account-level-copy small{display:block;margin-top:6px;color:var(--muted);font-size:.74rem}
@media(max-width:520px){.account-level-panel{align-items:flex-start}.account-level-badge{width:52px;height:52px}.account-level-head{align-items:flex-start;flex-direction:column;gap:2px}}

/* v13.3.8.10.38 — public dynamic leaderboard */
.leaderboard-hub{padding-top:26px;padding-bottom:34px;scroll-margin-top:90px}
.leaderboard-panel{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.leaderboard-metrics{display:flex;gap:7px;padding:14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.leaderboard-metric{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft);color:var(--text);padding:.62rem .9rem;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;white-space:nowrap}
.leaderboard-metric:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.leaderboard-metric.is-active{background:color-mix(in srgb,var(--brand) 13%,var(--surface));border-color:color-mix(in srgb,var(--brand) 55%,var(--line));color:var(--brand)}
.leaderboard-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-soft) 55%,transparent)}
.leaderboard-filters label{display:grid;gap:5px;min-width:170px;color:var(--muted);font-size:.76rem;font-weight:800}.leaderboard-filters select{min-height:42px;border:1px solid var(--line);border-radius:11px;padding:0 11px;background:var(--surface);color:var(--text);font:inherit;font-weight:700}.leaderboard-filters .secondary-button{min-height:42px}
.leaderboard-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}.leaderboard-summary strong{font-size:.94rem}.leaderboard-summary span{font-size:.78rem;color:var(--muted)}
.leaderboard-list{display:grid}.leaderboard-row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(110px,auto);align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);transition:background .16s ease}.leaderboard-row:last-child{border-bottom:0}.leaderboard-row:hover{background:var(--surface-soft)}.leaderboard-row.is-me{background:color-mix(in srgb,var(--brand) 9%,var(--surface));box-shadow:inset -3px 0 0 var(--brand)}
.leaderboard-rank{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);font-weight:900;font-variant-numeric:tabular-nums}
.leaderboard-player{display:grid;gap:4px;min-width:0}.leaderboard-player-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.leaderboard-player-head strong{font-size:.96rem;overflow-wrap:anywhere}.leaderboard-player small{color:var(--muted);font-size:.75rem}.leaderboard-title-badge{display:inline-flex;max-width:100%;padding:3px 7px;border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--brand) 9%,var(--surface-soft));color:var(--brand);font-size:.68rem;font-weight:900;overflow-wrap:anywhere}
.leaderboard-value{display:grid;justify-items:end;gap:3px;text-align:left;white-space:nowrap}.leaderboard-value strong{font-size:.94rem;color:var(--brand);font-variant-numeric:tabular-nums}.leaderboard-value small{font-size:.68rem;color:var(--muted)}.leaderboard-me-badge{display:inline-flex;padding:2px 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:.64rem;font-weight:900}
.leaderboard-empty{padding:28px 18px;text-align:center;color:var(--muted)}.leaderboard-my-rank{padding:12px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--brand) 7%,var(--surface-soft))}.leaderboard-my-rank>span{display:block;margin:0 2px 7px;color:var(--brand);font-size:.75rem;font-weight:900}.leaderboard-my-rank .leaderboard-row{border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:14px;background:var(--surface)}
.leaderboard-note{margin:0;padding:10px 16px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:.73rem;line-height:1.55}
@media(max-width:680px){.leaderboard-filters{align-items:stretch}.leaderboard-filters label{flex:1 1 140px;min-width:0}.leaderboard-filters .secondary-button{flex:1 1 100%}.leaderboard-row{grid-template-columns:44px minmax(0,1fr);gap:9px;padding:11px 12px}.leaderboard-rank{width:36px;height:36px}.leaderboard-value{grid-column:2;justify-items:start;text-align:right;white-space:normal;margin-top:-2px}.leaderboard-summary{align-items:flex-start;flex-direction:column;gap:4px}.leaderboard-heading{align-items:flex-start}}

/* v13.3.8.10.39 — Password reset OTP */
.account-forgot-button{width:100%}
#account-recovery-view .account-form{margin-top:10px}
#account-recovery-view>[hidden]{display:none!important}

/* v13.3.8.10.40 — player engagement hub */
.engagement-hub{margin-top:2.2rem}.engagement-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:1rem}.engagement-panel{background:var(--surface,#fff);border:1px solid var(--line);border-radius:18px;padding:1rem;box-shadow:0 10px 30px rgba(10,20,40,.05)}.engagement-panel-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}.engagement-panel-title h3,.engagement-panel h4{margin:0}.engagement-panel-title span{font-size:.82rem;color:var(--muted,#667085)}.engagement-panel h4{margin-top:1rem;margin-bottom:.55rem;font-size:.95rem}.engagement-game-list{display:flex;flex-wrap:wrap;gap:.55rem}.engagement-game-chip{border:1px solid var(--line);background:var(--surface-soft);border-radius:999px;padding:.55rem .8rem;cursor:pointer;color:inherit}.engagement-game-wrap{position:relative;display:inline-flex}.engagement-remove-favorite{position:absolute;inset-inline-start:-5px;top:-6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--surface,#fff);cursor:pointer;line-height:1}.engagement-empty{margin:.3rem 0;color:var(--muted,#667085);font-size:.9rem}.engagement-challenge-list{display:grid;gap:.7rem}.engagement-challenge{border:1px solid var(--line);border-radius:14px;padding:.75rem;background:var(--surface-soft)}.engagement-challenge.is-done{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.engagement-challenge-head{display:flex;justify-content:space-between;gap:.5rem}.engagement-challenge-head span{font-weight:700;color:var(--brand)}.engagement-challenge p{margin:.35rem 0 .55rem;color:var(--muted,#667085);font-size:.88rem}.engagement-progress{height:7px;border-radius:999px;background:rgba(127,127,127,.16);overflow:hidden}.engagement-progress i{display:block;height:100%;background:var(--brand);border-radius:inherit}.engagement-challenge small{display:block;margin:.35rem 0}.engagement-challenge button{width:100%;padding:.45rem}.smart-game-card{position:relative}.favorite-toggle{position:absolute;top:.65rem;inset-inline-start:.65rem;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(10,14,22,.72);color:#fff;font-size:1.25rem;cursor:pointer;backdrop-filter:blur(5px)}.favorite-toggle.is-favorite{color:#ffd34d}.public-profile-modal{position:fixed;inset:0;background:rgba(6,10,18,.7);z-index:10000;display:grid;place-items:center;padding:1rem}.public-profile-modal[hidden]{display:none}.public-profile-dialog{position:relative;width:min(620px,96vw);max-height:88vh;overflow:auto;background:var(--surface,#fff);color:var(--text,#111827);border-radius:22px;padding:1.25rem;box-shadow:0 24px 80px rgba(0,0,0,.3)}.public-profile-close{position:absolute;top:.8rem;inset-inline-end:.8rem}.public-profile-hero{display:flex;align-items:center;gap:1rem;padding:.8rem 2.2rem .9rem .2rem}.public-profile-hero h2{margin:.1rem 0}.public-profile-hero p{margin:.25rem 0;color:var(--muted,#667085)}.public-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.8rem}.public-profile-stats>div{border:1px solid var(--line);border-radius:14px;padding:.75rem;background:var(--surface-soft);color:var(--text)}.public-profile-stats span{display:block;color:var(--muted,#667085);font-size:.82rem}.public-profile-stats strong{display:block;margin-top:.2rem;font-size:1.05rem;color:var(--text)}.public-profile-note{color:var(--muted,#667085);font-size:.84rem;margin-bottom:0}.leaderboard-player-head strong{cursor:pointer}.account-personal-stats{margin-top:.8rem}
@media(max-width:900px){.engagement-grid{grid-template-columns:1fr}.public-profile-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.public-profile-stats{grid-template-columns:1fr 1fr}.engagement-panel{padding:.8rem}.favorite-toggle{width:31px;height:31px}}

/* v13.3.8.10.41 — Events & Cosmetic Store */
.event-hub{margin-top:28px;margin-bottom:28px}.event-store-panel,.event-compact-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:24px}.event-store-panel{padding:24px}.event-heading{align-items:center}.event-heading select{min-width:220px;background:var(--surface-soft);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.event-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.7fr) minmax(160px,.55fr);gap:16px;align-items:stretch}.event-hero>div{background:var(--surface-soft);border:1px solid var(--line);border-radius:18px;padding:18px}.event-state{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(245,158,11,.14);font-size:.78rem;font-weight:800}.event-state.is-active{background:rgba(34,197,94,.14)}.event-hero h3{font-size:1.55rem;margin:8px 0}.event-hero p{color:var(--muted);margin:0}.event-rule-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.event-rule-list span{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 9px;font-size:.78rem}.event-clock,.event-wallet-card{display:flex;flex-direction:column;justify-content:center;gap:6px}.event-clock strong,.event-wallet-card strong{font-size:1.8rem;letter-spacing:.02em}.event-clock small,.event-wallet-card small{color:var(--muted)}.event-store-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:22px 2px 12px}.event-store-head h3{margin:0}.event-store-head span{color:var(--muted);font-size:.86rem}.event-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.event-item{border:1px solid var(--line);background:var(--surface-soft);border-radius:18px;padding:14px;display:grid;grid-template-columns:72px 1fr;gap:12px;min-width:0}.event-item-visual{width:72px;height:72px;border-radius:16px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}.event-item-asset{width:100%;height:100%;object-fit:contain}.event-item-fallback{font-size:2rem}.event-item-copy h4{margin:3px 0 5px}.event-item-copy p{margin:0 0 8px;color:var(--muted);font-size:.88rem}.event-rarity{text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;color:var(--muted)}.event-item-actions{grid-column:1/-1;display:flex;justify-content:flex-end}.event-item-actions button{min-width:110px}.event-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:14px;padding:20px;text-align:center;color:var(--muted)}.event-compact-card{padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center}.event-compact-card>div:first-child{display:flex;align-items:center;gap:9px;min-width:0}.event-compact-card strong{white-space:nowrap}.event-compact-card small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-compact-time,.event-compact-wallet{display:flex;flex-direction:column;gap:2px}.event-compact-time span,.event-compact-wallet span{font-size:.72rem;color:var(--muted)}.event-compact-time strong{font-variant-numeric:tabular-nums}.event-store-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:10000;background:var(--text);color:var(--surface);padding:11px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s}.event-store-toast.show{opacity:1;transform:translate(-50%,0)}.public-profile-cosmetics{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.public-cosmetic-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-soft);border-radius:999px;padding:6px 10px}.public-cosmetic-image{width:26px;height:26px;object-fit:contain}.public-cosmetic-badge b{font-size:.8rem}.rarity-rare{box-shadow:inset 0 0 0 1px rgba(59,130,246,.12)}.rarity-epic{box-shadow:inset 0 0 0 1px rgba(168,85,247,.14)}.rarity-legendary{box-shadow:inset 0 0 0 1px rgba(245,158,11,.18)}
@media(max-width:820px){.event-hero{grid-template-columns:1fr}.event-store-head{align-items:flex-start;flex-direction:column}.event-compact-card{grid-template-columns:1fr 1fr}.event-compact-card>a{grid-column:2;grid-row:2}.event-compact-card>div:first-child{grid-column:1/-1;flex-wrap:wrap}.event-heading{align-items:flex-start}.event-heading select{width:100%;min-width:0}.event-store-panel{padding:16px}}
@media(max-width:520px){.event-item{grid-template-columns:58px 1fr}.event-item-visual{width:58px;height:58px}.event-compact-card{gap:10px}.event-compact-time strong{font-size:.95rem}}
.account-avatar{position:relative;overflow:visible}.equipped-avatar-frame{position:absolute;inset:-11px;width:calc(100% + 22px);height:calc(100% + 22px);object-fit:contain;pointer-events:none;z-index:3}.equipped-profile-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.account-profile-hero.has-event-bg,.public-profile-hero.has-event-bg{background-size:cover;background-position:center;border-radius:18px}.account-profile-hero.has-event-bg .account-profile-copy,.public-profile-hero.has-event-bg>div:nth-child(2){backdrop-filter:blur(4px);background:color-mix(in srgb,var(--surface) 72%,transparent);border-radius:12px;padding:6px 9px}


/* v13.3.8.10.42.2 — navigation, event progress, favorite spotlight */
#gamehub-event-hub,#progress-focus,#engagement-hub,#favorite-spotlight,#leaderboard{scroll-margin-top:92px}
.main-nav-menu{position:relative}
.main-nav-menu>summary{list-style:none;cursor:pointer;color:var(--muted);font-weight:700;padding:.5rem .7rem;border-radius:12px;user-select:none}
.main-nav-menu>summary::-webkit-details-marker{display:none}
.main-nav-menu>summary::after{content:' ▾';font-size:.78em;opacity:.75}
.main-nav-menu[open]>summary,.main-nav-menu>summary:hover{color:var(--text);background:var(--surface-soft)}
.main-nav-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:190px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.2);display:grid;gap:3px}
.main-nav-menu-panel a{padding:10px 12px;border-radius:10px;white-space:nowrap}
.main-nav-menu-panel a:hover{background:var(--surface-soft)}
.event-rule-list{display:flex;flex-wrap:wrap;gap:8px}
.event-rule-progress{min-width:180px;display:grid!important;gap:5px;padding:8px 10px!important}
.event-rule-progress b{font-size:.84rem}
.event-rule-progress small{font-size:.74rem;color:var(--muted)}
.event-rule-progress>i{display:block;height:5px;border-radius:999px;overflow:hidden;background:var(--surface-soft)}
.event-rule-progress>i>em{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .25s ease}
.event-rule-progress.is-complete{border-color:rgba(55,190,140,.42)}
.favorite-spotlight{margin-top:28px;margin-bottom:14px}
.favorite-spotlight-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--surface),var(--surface-soft))}
.favorite-spotlight-card h2{margin:.15rem 0 .35rem;font-size:clamp(1.35rem,2.4vw,2rem)}
.favorite-spotlight-card p{margin:0;color:var(--muted)}
.favorite-spotlight-card #favorite-spotlight-text strong{color:var(--text)}
@media(max-width:860px){
  .main-nav>a:not(:first-child){display:none}
  .main-nav-menu{display:block}
  .main-nav-menu-panel{position:fixed;top:64px;right:12px;left:12px;min-width:0}
  .favorite-spotlight-card{align-items:stretch;flex-direction:column}
  .favorite-spotlight-card .primary-button{width:100%}
}

@media(max-width:700px){
  .main-nav{display:flex;gap:8px;margin-inline-end:auto}
  .main-nav>a{display:none!important}
  .main-nav-menu{display:block}
  .main-nav-menu>summary{padding:.45rem .65rem;background:var(--surface-soft)}
}


/* v13.3.8.10.43 — Wardrobe / profile appearance */
.account-wardrobe{margin-top:.9rem;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft);overflow:hidden}.account-wardrobe>summary{cursor:pointer;padding:14px 16px;font-weight:800;display:flex;justify-content:space-between;gap:10px}.account-wardrobe>summary span{font-weight:500;color:var(--muted);font-size:.8rem}.wardrobe-preview-note{padding:0 16px 12px;color:var(--muted);font-size:.83rem}.wardrobe-groups{display:grid;gap:12px;padding:0 14px 14px}.wardrobe-group{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}.wardrobe-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.wardrobe-group-head small{color:var(--muted)}.wardrobe-options{display:flex;gap:9px;overflow:auto;padding:3px 2px 7px}.wardrobe-option{min-width:82px;max-width:92px;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);border-radius:12px;padding:7px;cursor:pointer;display:grid;gap:5px;place-items:center}.wardrobe-option.is-selected{outline:2px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface-soft))}.wardrobe-thumb{width:58px;height:58px;display:grid;place-items:center;border-radius:10px;overflow:hidden}.wardrobe-img{width:100%;height:100%;object-fit:contain}.wardrobe-option small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wardrobe-none>span{font-size:1.8rem;height:58px;display:grid;place-items:center}.wardrobe-empty{margin:auto 8px;color:var(--muted);font-size:.82rem;white-space:nowrap}.wardrobe-actions{display:flex;gap:8px;padding:0 14px 14px}.equipped-avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}.equipped-avatar-frame{z-index:3}.account-avatar.has-custom-avatar{color:transparent;overflow:visible}.public-profile-hero .account-avatar{flex:0 0 auto}.account-profile-hero.has-event-bg,.public-profile-hero.has-event-bg{min-height:132px;background-position:center}.account-profile-hero.has-event-bg .account-profile-copy,.public-profile-hero.has-event-bg>div:nth-child(2){text-shadow:0 1px 10px rgba(0,0,0,.38)}
@media(max-width:560px){.wardrobe-option{min-width:74px}.wardrobe-thumb{width:52px;height:52px}.wardrobe-actions{flex-direction:column}.wardrobe-actions button{width:100%}}

/* v13.3.8.10.43.1 — compact fallback for legacy text-only cosmetics */
.cosmetic-text-symbol{display:grid;place-items:center;line-height:1;font-weight:900;color:var(--text);font-style:normal}
.public-cosmetic-badge .cosmetic-text-symbol{width:18px;height:18px;font-size:1rem;flex:0 0 18px}
.wardrobe-thumb .cosmetic-text-symbol{width:100%;height:100%;font-size:1.55rem;background:color-mix(in srgb,var(--brand) 8%,var(--surface-soft))}

/* v13.3.8.10.44.3 — Dropdown above admin announcements
   Keep the navigation dropdown interactive and visually above site notices. */
.site-header{z-index:1000}
.main-nav{position:relative;z-index:1001}
.main-nav-menu{z-index:1002}
.main-nav-menu-panel{z-index:1010}
.site-announcements-wrap{z-index:90}


/* v13.3.8.10.44.8 — Events/store layout + mobile navigation */
/* Keep the dedicated Events link visible on desktop, but move it into the dropdown on phones. */
.mobile-nav-only{display:none!important}
.page-nav-menu{display:none}

/* Event hub: tighter desktop composition and store cards that do not stretch across the whole page. */
.event-hub{margin-top:32px;margin-bottom:32px}
.event-store-panel{padding:clamp(18px,2.2vw,28px);overflow:hidden}
.event-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}
.event-heading h2{margin:.15rem 0 0;font-size:clamp(2rem,4vw,3.35rem);line-height:1.05}
.event-heading select{max-width:300px}
.event-hero{grid-template-columns:minmax(0,1.7fr) minmax(180px,.62fr) minmax(180px,.62fr);gap:14px}
.event-hero>div{min-width:0;padding:17px}
.event-hero>div:first-child{display:flex;flex-direction:column;justify-content:center}
.event-hero h3{font-size:clamp(1.3rem,2vw,1.75rem);margin:7px 0}
.event-clock,.event-wallet-card{min-height:150px;text-align:center;align-items:center}
.event-clock strong,.event-wallet-card strong{font-size:clamp(1.55rem,2.6vw,2rem)}
.event-clock small,.event-wallet-card small{line-height:1.55}
.event-rule-list{margin-top:15px}
.event-rule-progress{flex:1 1 190px;max-width:280px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.event-store-head{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.event-items{grid-template-columns:repeat(auto-fill,minmax(280px,340px));justify-content:start;align-items:stretch}
.event-item{height:100%;grid-template-columns:78px minmax(0,1fr);padding:15px;align-content:start}
.event-item-visual{width:78px;height:78px}
.event-item-copy{min-width:0}
.event-item-copy h4{font-size:1.05rem}
.event-item-copy p{line-height:1.55}
.event-item-actions{margin-top:auto}
.event-item-actions button{width:100%}

@media(max-width:860px){
  /* Override the older rule that hid the entire navigation around tablet/mobile widths. */
  .main-nav{display:flex;align-items:center;gap:8px;margin-inline-end:auto}
  .main-nav>a{display:none!important}
  .main-nav-menu{display:block}
  .page-nav-menu{display:block}
  .mobile-nav-only{display:block!important}
  .main-nav-menu-panel{position:fixed;top:66px;right:12px;left:12px;min-width:0;max-height:calc(100dvh - 82px);overflow:auto}

  .event-store-panel{padding:16px;border-radius:20px}
  .event-heading{align-items:stretch;flex-direction:column;gap:12px}
  .event-heading h2{font-size:clamp(1.85rem,8vw,2.55rem)}
  .event-heading select{width:100%;max-width:none;min-width:0}
  .event-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .event-hero>div:first-child{grid-column:1/-1;min-height:0}
  .event-clock,.event-wallet-card{min-height:116px;padding:13px;text-align:center}
  .event-clock strong,.event-wallet-card strong{font-size:1.35rem}
  .event-clock small,.event-wallet-card small{font-size:.78rem}
  .event-store-head{align-items:flex-start;flex-direction:column;gap:5px;margin-top:18px;padding-top:14px}
  .event-items{grid-template-columns:1fr;justify-content:stretch}
  .event-item{grid-template-columns:68px minmax(0,1fr);padding:13px}
  .event-item-visual{width:68px;height:68px}
}

@media(max-width:560px){
  .event-hub{margin-top:18px;margin-bottom:22px;padding-inline:10px}
  .event-store-panel{padding:13px;border-radius:18px}
  .event-heading{margin-bottom:12px}
  .event-heading .eyebrow{font-size:.72rem}
  .event-heading h2{font-size:2rem}
  .event-hero>div{border-radius:15px}
  .event-hero>div:first-child{padding:14px}
  .event-hero h3{font-size:1.25rem}
  .event-hero p{font-size:.88rem;line-height:1.55}
  .event-state{font-size:.7rem}
  .event-rule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  .event-rule-progress{min-width:0;max-width:none;width:100%;padding:8px!important}
  .event-rule-progress b{font-size:.78rem}
  .event-rule-progress small{font-size:.68rem;line-height:1.35}
  .event-clock,.event-wallet-card{min-height:104px}
  .event-clock strong,.event-wallet-card strong{font-size:1.18rem}
  .event-wallet-card small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .event-store-head h3{font-size:1.2rem}
  .event-store-head span{font-size:.78rem;line-height:1.45}
  .event-item{grid-template-columns:60px minmax(0,1fr);gap:10px;border-radius:15px}
  .event-item-visual{width:60px;height:60px;border-radius:13px}
  .event-item-copy h4{font-size:1rem}
  .event-item-copy p{font-size:.8rem;margin-bottom:6px}
  .event-item-actions button{min-height:44px}
}

@media(max-width:380px){
  .event-rule-list{grid-template-columns:1fr}
  .event-hero{grid-template-columns:1fr}
  .event-hero>div:first-child{grid-column:auto}
  .event-clock,.event-wallet-card{min-height:90px}
}


/* v44.10 — News & Content Hub */
.news-content-hub{padding-block:42px 24px;scroll-margin-top:90px}
.news-content-heading{align-items:end}
.news-content-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.news-filter{border:1px solid var(--line,#334155);background:var(--card,#111827);color:inherit;border-radius:999px;padding:9px 15px;font:inherit;font-weight:700;cursor:pointer}
.news-filter.is-active{background:var(--accent,#2563eb);color:#fff;border-color:transparent}
.news-content-state{padding:20px;border:1px dashed var(--line,#334155);border-radius:16px;text-align:center;opacity:.8}
.news-content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.news-content-card{border:1px solid var(--line,#334155);background:var(--card,#111827);border-radius:18px;padding:18px;min-width:0;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.news-content-card.is-featured{outline:1px solid color-mix(in srgb,var(--accent,#2563eb) 55%,transparent)}
.news-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.78rem;opacity:.82}
.news-kind,.news-game{display:inline-flex;border-radius:999px;padding:4px 9px;background:rgba(127,127,127,.12)}
.news-card-meta time{margin-inline-start:auto}
.news-content-card h3{font-size:1.12rem;margin:12px 0 8px;line-height:1.5}
.news-excerpt{line-height:1.8;margin:0 0 10px;opacity:.88}
.news-read-more{border:0;background:transparent;color:var(--accent,#3b82f6);font:inherit;font-weight:800;cursor:pointer;padding:7px 0}
.news-full-body{white-space:pre-wrap;line-height:1.9;border-top:1px solid var(--line,#334155);padding-top:12px;margin-top:4px}
@media(max-width:980px){.news-content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  .desktop-nav-only{display:none!important}
  .news-content-hub{padding-block:28px 14px}
  .news-content-heading{display:block}
  .news-content-heading>p{margin-top:8px}
  .news-content-toolbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:thin}
  .news-filter{flex:0 0 auto;min-height:42px}
  .news-content-grid{grid-template-columns:1fr;gap:12px}
  .news-content-card{padding:15px;border-radius:15px}
  .news-content-card h3{font-size:1.05rem}
  .news-read-more{min-height:42px;min-width:96px;text-align:right}
}

/* v13.3.8.10.44.15 — Profile Header Responsive Polish
   Presentation-only pass for equipped profile backgrounds/frames.
   Keeps the existing account, cloud-save, inventory and event logic untouched. */
.account-profile-hero.has-event-bg,
.public-profile-hero.has-event-bg{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  min-height:180px;
  aspect-ratio:3.446 / 1;
  padding:clamp(16px,2.2vw,22px);
  gap:10px;
  align-items:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -42px 70px rgba(3,6,15,.16);
}

/* Background-to-identity blend: darken only the identity side and softly
   fade toward the artwork instead of putting a hard card over the image. */
.account-profile-hero.has-event-bg::before,
.public-profile-hero.has-event-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(270deg,
      rgba(5,8,18,.74) 0%,
      rgba(7,10,22,.60) 25%,
      rgba(8,12,24,.30) 48%,
      rgba(8,12,24,.08) 70%,
      transparent 88%),
    linear-gradient(0deg,rgba(4,7,16,.22),transparent 52%);
}
.account-profile-hero.has-event-bg::after,
.public-profile-hero.has-event-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 86% 50%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 34%);
  opacity:.7;
}
.account-profile-hero.has-event-bg > *,
.public-profile-hero.has-event-bg > *{
  position:relative;
  z-index:2;
}

/* Identity glass: visually belongs to the background while preserving text contrast. */
.account-profile-hero.has-event-bg .account-profile-copy,
.public-profile-hero.has-event-bg > div:nth-child(2){
  max-width:min(360px,72%);
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(9,12,27,.74),rgba(12,15,31,.48));
  -webkit-backdrop-filter:blur(8px) saturate(1.08);
  backdrop-filter:blur(8px) saturate(1.08);
  box-shadow:0 10px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);
  text-shadow:0 1px 4px rgba(0,0,0,.38);
}
.account-profile-hero.has-event-bg .account-profile-copy > span:first-child,
.public-profile-hero.has-event-bg .eyebrow{
  color:rgba(255,255,255,.82);
}
.account-profile-hero.has-event-bg .account-profile-copy strong,
.account-profile-hero.has-event-bg .account-profile-copy small,
.public-profile-hero.has-event-bg h2,
.public-profile-hero.has-event-bg p{
  color:#fff;
}
.account-profile-hero.has-event-bg .account-profile-copy small,
.public-profile-hero.has-event-bg p{
  opacity:.78;
}
.account-profile-hero.has-event-bg .account-custom-title,
.public-profile-hero.has-event-bg .account-custom-title{
  background:color-mix(in srgb,var(--brand) 24%,rgba(10,12,25,.68));
  border-color:color-mix(in srgb,var(--brand) 56%,rgba(255,255,255,.16));
  color:#f3edff;
}

/* Avatar/frame stays crisp and gains a small halo so it joins the identity block. */
.account-profile-hero.has-event-bg .account-avatar,
.public-profile-hero.has-event-bg .account-avatar{
  width:64px;
  height:64px;
  border-radius:19px;
  background:rgba(8,11,25,.62);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 24px color-mix(in srgb,var(--brand) 18%,transparent);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
.account-profile-hero.has-event-bg .equipped-avatar-image,
.public-profile-hero.has-event-bg .equipped-avatar-image{
  border-radius:inherit;
}
.account-profile-hero.has-event-bg .equipped-avatar-frame,
.public-profile-hero.has-event-bg .equipped-avatar-frame{
  inset:-13px;
  width:calc(100% + 26px);
  height:calc(100% + 26px);
}

/* The general dialog keeps breathing room around the banner. */
#account-user-view > .account-profile-hero.has-event-bg{margin:10px 0 14px}
.public-profile-hero.has-event-bg{margin-top:.25rem}

@media(max-width:680px){
  .account-profile-hero.has-event-bg,
  .public-profile-hero.has-event-bg{
    aspect-ratio:auto;
    min-height:168px;
    padding:14px;
    gap:8px;
    align-items:center;
    background-position:50% 50%;
    border-radius:17px;
  }
  .account-profile-hero.has-event-bg::before,
  .public-profile-hero.has-event-bg::before{
    background:
      linear-gradient(270deg,
        rgba(5,8,18,.82) 0%,
        rgba(7,10,22,.68) 34%,
        rgba(8,12,24,.34) 62%,
        rgba(8,12,24,.10) 82%,
        transparent 100%),
      linear-gradient(0deg,rgba(4,7,16,.28),transparent 58%);
  }
  .account-profile-hero.has-event-bg::after,
  .public-profile-hero.has-event-bg::after{
    background:radial-gradient(circle at 82% 50%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 42%);
  }
  .account-profile-hero.has-event-bg .account-profile-copy,
  .public-profile-hero.has-event-bg > div:nth-child(2){
    max-width:calc(100% - 62px);
    padding:9px 11px;
    border-radius:14px;
    -webkit-backdrop-filter:blur(7px) saturate(1.06);
    backdrop-filter:blur(7px) saturate(1.06);
  }
  .account-profile-hero.has-event-bg .account-profile-copy strong,
  .public-profile-hero.has-event-bg h2{font-size:1.18rem}
  .account-profile-hero.has-event-bg .account-profile-copy small,
  .public-profile-hero.has-event-bg p{font-size:.75rem;line-height:1.45}
  .account-profile-hero.has-event-bg .account-avatar,
  .public-profile-hero.has-event-bg .account-avatar{
    width:54px;
    height:54px;
    border-radius:16px;
  }
  .account-profile-hero.has-event-bg .equipped-avatar-frame,
  .public-profile-hero.has-event-bg .equipped-avatar-frame{
    inset:-10px;
    width:calc(100% + 20px);
    height:calc(100% + 20px);
  }
  .equipped-profile-badges{gap:4px;margin-top:4px}
  .public-cosmetic-badge{padding:4px 7px;gap:5px}
  .public-cosmetic-image{width:22px;height:22px}
}

@media(max-width:420px){
  .account-profile-hero.has-event-bg,
  .public-profile-hero.has-event-bg{
    min-height:160px;
    padding:12px 10px;
    background-position:50% 50%;
  }
  .account-profile-hero.has-event-bg .account-profile-copy,
  .public-profile-hero.has-event-bg > div:nth-child(2){
    max-width:calc(100% - 54px);
    padding:8px 9px;
  }
  .account-profile-hero.has-event-bg .account-avatar,
  .public-profile-hero.has-event-bg .account-avatar{
    width:50px;
    height:50px;
  }
}

/* v13.3.8.10.44.20 — Competitive Events Player UI */
.event-competition-panel{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--surface-soft),var(--surface));overflow:hidden}
.competition-head,.competition-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.competition-kicker{display:block;color:var(--accent,#38bdf8);font-size:.76rem;font-weight:850;margin-bottom:4px}.competition-head h3,.competition-ranking-wrap h4,.competition-prizes-wrap h4,.competition-my-awards h4{margin:0}.competition-head p{margin:5px 0 0;color:var(--muted);font-size:.86rem}.competition-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.competition-phase{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;font-weight:850;background:var(--surface)}.phase-live{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.3)}.phase-finalized{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.3)}.phase-ended{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.competition-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.competition-stat{padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);display:flex;flex-direction:column;gap:3px;min-width:0}.competition-stat span{font-size:.74rem;color:var(--muted)}.competition-stat strong{font-size:1.12rem}.competition-stat small{color:var(--muted);font-size:.76rem;line-height:1.45}.competition-prizes-wrap,.competition-ranking-wrap{margin-top:16px}.competition-prizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-top:9px}.competition-prize{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;border:1px solid var(--line);border-radius:15px;padding:10px;background:var(--surface)}.competition-place{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--surface-soft);font-weight:900}.competition-prize>div{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}.competition-prize b{font-size:.88rem}.competition-prize small{display:block;color:var(--muted);font-size:.7rem}.competition-prize-icon{font-size:1.15rem}.competition-prize-item-art{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;overflow:hidden;background:var(--surface-soft)}.competition-prize-item-art img{width:100%;height:100%;object-fit:contain}.competition-plus{font-style:normal;color:var(--muted)}
.competition-section-head{align-items:center;margin-bottom:8px}.competition-section-head span{font-size:.76rem;color:var(--muted)}.competition-ranking{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface)}.competition-rank-header,.competition-rank-row{display:grid;grid-template-columns:52px minmax(0,1fr) 140px;gap:8px;align-items:center;padding:9px 12px}.competition-rank-header{background:var(--surface-soft);font-size:.72rem;color:var(--muted);font-weight:800}.competition-rank-row{border-top:1px solid var(--line);min-height:46px}.competition-rank-row:first-of-type{border-top:0}.competition-rank-row.is-me{background:rgba(14,165,233,.09);box-shadow:inset 3px 0 0 rgba(14,165,233,.6)}.competition-rank-row>span{display:flex;flex-direction:column;min-width:0}.competition-rank-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.competition-rank-row small{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.competition-empty{padding:18px;text-align:center;color:var(--muted)}.competition-my-awards{margin-top:14px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.07);border-radius:15px;padding:13px}.competition-my-awards>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.competition-my-awards span{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.competition-my-awards small{color:var(--muted);font-size:.72rem}
@media(max-width:820px){.competition-head{flex-direction:column}.competition-head-actions{width:100%;justify-content:space-between}.competition-overview{grid-template-columns:1fr}.competition-rank-header,.competition-rank-row{grid-template-columns:42px minmax(0,1fr) 95px}.event-competition-panel{padding:14px}}
@media(max-width:520px){.competition-prizes{grid-template-columns:1fr}.competition-rank-header,.competition-rank-row{padding:8px 9px}.competition-head-actions .secondary-button{min-height:40px;padding-inline:12px}}
.competition-switcher-wrap{margin:12px 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.competition-switcher-wrap label{font-size:.78rem;color:var(--muted);font-weight:800}.competition-switcher-wrap select{min-width:min(360px,100%);max-width:100%;min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:8px 12px;font:inherit}.competition-switcher-wrap select:focus{outline:2px solid rgba(56,189,248,.22);border-color:rgba(56,189,248,.55)}
@media(max-width:520px){.competition-switcher-wrap{align-items:stretch;flex-direction:column}.competition-switcher-wrap select{width:100%}}


/* v13.3.8.10.44.22 — Competition Player Experience V1 */
.competition-browser{margin:14px 0 4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:12px}
.competition-browser-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.competition-browser-head h4{margin:0}.competition-browser-head small{color:var(--muted);font-size:.74rem}
.competition-filters{display:flex;gap:6px;flex-wrap:wrap}.competition-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);border-radius:999px;padding:7px 10px;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.competition-filter span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--surface);font-size:.68rem}.competition-filter.is-active{border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.12)}
.competition-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:8px}.competition-card{appearance:none;width:100%;text-align:right;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);border-radius:14px;padding:11px 12px;font:inherit;cursor:pointer;transition:.16s ease}.competition-card:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.35)}.competition-card.is-selected{border-color:rgba(56,189,248,.7);box-shadow:inset 0 0 0 1px rgba(56,189,248,.25);background:rgba(56,189,248,.08)}
.competition-card-top,.competition-card-foot{display:flex;align-items:center;justify-content:space-between;gap:9px}.competition-card-top b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.competition-card-phase{font-style:normal;font-size:.67rem;font-weight:850;border:1px solid var(--line);border-radius:999px;padding:4px 7px;white-space:nowrap}.competition-card-meta{display:block;color:var(--muted);font-size:.7rem;margin:8px 0}.competition-card-foot small{color:var(--muted)}.competition-card-foot strong{font-size:.72rem}
.competition-card-phase.phase-live{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}.competition-card-phase.phase-upcoming{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3)}.competition-card-phase.phase-finalized{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}.competition-card-phase.phase-ended{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.competition-result-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 2px;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface)}.competition-result-banner b{font-size:.84rem}.competition-result-banner span{font-size:.74rem;color:var(--muted)}.competition-result-banner.result-live{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.06)}.competition-result-banner.result-finalized{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.07)}.competition-result-banner.result-ended{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.07)}.competition-result-banner.result-upcoming{border-color:rgba(139,92,246,.28);background:rgba(139,92,246,.07)}
.competition-awards-empty{color:var(--muted);font-size:.8rem;padding-top:7px}.competition-browser-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px}
@media(max-width:820px){.competition-browser-head{align-items:flex-start;flex-direction:column}.competition-result-banner{align-items:flex-start;flex-direction:column}.competition-filters{width:100%}.competition-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.competition-cards{grid-template-columns:1fr}.competition-filter{flex:1;justify-content:center;min-width:calc(50% - 4px)}}


/* v13.3.8.10.44.23 — Competition History & Results */
.competition-history{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.competition-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.competition-history-head h4{margin:0}.competition-history-head small,.competition-history-head>span{color:var(--muted);font-size:.74rem}.competition-history-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.competition-history-stats>div{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.competition-history-stats span{font-size:.69rem;color:var(--muted)}.competition-history-stats strong{font-size:1rem}
.competition-history-list{display:flex;flex-direction:column;gap:7px}.competition-history-row{appearance:none;width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:12px;align-items:center;text-align:right;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);padding:10px 12px;font:inherit;cursor:pointer}.competition-history-row:hover,.competition-history-row.is-selected{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.06)}.competition-history-main,.competition-history-result{display:flex;flex-direction:column;gap:3px;min-width:0}.competition-history-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.competition-history-main small,.competition-history-result small{color:var(--muted);font-size:.7rem}.competition-history-result strong{font-size:.79rem}.competition-history-open{font-size:.72rem;font-weight:850;color:var(--accent,#38bdf8);white-space:nowrap}.competition-history-archive{display:inline-flex;width:max-content;padding:2px 6px;border:1px solid rgba(148,163,184,.28);border-radius:999px;color:var(--muted);font-size:.63rem;font-weight:800}.competition-history-empty{padding:16px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted);font-size:.78rem}
@media(max-width:820px){.competition-history-stats{grid-template-columns:1fr 1fr}.competition-history-row{grid-template-columns:1fr auto}.competition-history-result{grid-column:1/-1}.competition-history-open{grid-row:1;grid-column:2}}
@media(max-width:520px){.competition-history-head{flex-direction:column}.competition-history-stats{grid-template-columns:1fr 1fr}.competition-history-row{grid-template-columns:1fr}.competition-history-open{grid-row:auto;grid-column:auto}.competition-history-result{grid-column:auto}}