/* ===================================================================
   DEMOFIN GAMES — DESIGN SYSTEM
   Nordic Premium · Editorial · Glassmorphism
   Signature motif: the faceted crystal, used as logo, coin, badge,
   loader and hover-shimmer across the whole product.
=================================================================== */

/* ---------- Tokens ---------- */
:root{
  --color-primary: #C91F28;
  --color-primary-dark: #8E141C;
  --color-accent: #E53935;
  --color-bg: #FAFAFA;
  --color-card: #FFFFFF;
  --color-text: #202020;
  --color-text-muted: #6B6B6B;
  --color-gray: #D9D9D9;
  --color-line: #ECECEC;
  --color-tint: #FDEDEC;
  --color-tint-strong: #FBDADA;

  --shadow-sm: 0 2px 10px rgba(32,32,32,.05);
  --shadow-md: 0 12px 30px rgba(201,31,40,.10), 0 2px 8px rgba(32,32,32,.04);
  --shadow-lg: 0 30px 60px rgba(201,31,40,.14), 0 8px 20px rgba(32,32,32,.06);
  --shadow-glow: 0 0 0 1px rgba(201,31,40,.08), 0 20px 45px rgba(201,31,40,.16);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --font-display: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1200px;
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  /* Product intentionally stays light/premium regardless of OS theme */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; font-size: 1rem; }

::selection{ background: var(--color-primary); color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--color-primary); color:#fff; padding:.8em 1.4em; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.section{ padding: 96px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin: 0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-primary); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background: var(--color-primary); border-radius:2px; }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.15; }
.section-head p{ margin-top:14px; color: var(--color-text-muted); font-size:1.05rem; }
.text-muted{ color: var(--color-text-muted); }
.tabular{ font-variant-numeric: tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* ---------- Glass & cards ---------- */
.glass{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
}
.card{
  background: var(--color-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-hover:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-pad{ padding: 32px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 28px; border-radius: var(--radius-full);
  font-weight:700; font-size:.98rem; border:none; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary{
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary-dark));
  color:#fff; box-shadow: 0 10px 24px rgba(201,31,40,.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(201,31,40,.36); }
.btn-secondary{
  background:#fff; color: var(--color-text); border:1.5px solid var(--color-gray);
}
.btn-secondary:hover{ border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn-ghost{ background:transparent; color: var(--color-text); padding: 12px 18px; }
.btn-ghost:hover{ color: var(--color-primary); }
.btn-sm{ padding:10px 18px; font-size:.86rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.icon{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-fill{ fill:currentColor; stroke:none; }

/* ---------- Forms ---------- */
.field{ margin-bottom: 20px; text-align:left; }
.field label{ display:block; font-size:.88rem; font-weight:700; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--color-gray); background:#fff; color:var(--color-text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-tint); outline:none;
}
.field.invalid input{ border-color: var(--color-primary); }
.field-error{ display:none; color: var(--color-primary); font-size:.82rem; margin-top:6px; font-weight:600; }
.field.invalid .field-error{ display:block; }
.field-hint{ color: var(--color-text-muted); font-size:.82rem; margin-top:6px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; margin: 18px 0; }
.checkbox-row input{ margin-top:3px; width:18px; height:18px; accent-color: var(--color-primary); flex-shrink:0; }
.checkbox-row a{ color: var(--color-primary); font-weight:700; }

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  font-size:.78rem; font-weight:700; background: var(--color-tint); color: var(--color-primary);
}
.chip-gray{ background: #F2F2F2; color: var(--color-text-muted); }

.crystal-badge{
  width:56px; height:56px; display:grid; place-items:center; position:relative; flex-shrink:0;
}
.crystal-badge svg{ width:100%; height:100%; }
.crystal-badge.locked svg{ filter: grayscale(1) opacity(.35); }
.crystal-badge.locked::after{
  content:""; position:absolute; inset:0; display:grid; place-items:center;
}

.ach-icon{ width:64px; height:64px; border-radius:50%; background: var(--color-tint); color: var(--color-primary); display:grid; place-items:center; position:relative; flex-shrink:0; }
.ach-icon svg{ width:30px; height:30px; }
.ach-icon.locked{ background:#F2F2F2; color:#C7C7C7; }
.ach-icon .lock-overlay{ position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.5); display:grid; place-items:center; }
.ach-icon .lock-overlay svg{ width:18px; height:18px; color:#8A8A8A; }
.ach-icon.sm{ width:48px; height:48px; }
.ach-icon.sm svg{ width:22px; height:22px; }

/* ---------- Toast ---------- */
#toast-stack{
  position:fixed; bottom:24px; right:24px; z-index:1000;
  display:flex; flex-direction:column; gap:10px; max-width: min(360px, 90vw);
}
.toast{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:16px; background:#fff;
  box-shadow: var(--shadow-lg); border:1px solid var(--color-line);
  font-size:.92rem; font-weight:600;
  animation: toastIn .4s var(--ease);
}
.toast .icon{ color: var(--color-primary); width:20px; height:20px; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
.toast.leaving{ animation: toastOut .3s var(--ease) forwards; }
@keyframes toastOut{ to{ opacity:0; transform: translateX(30px); } }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:200; height: var(--nav-h);
  background: rgba(250,250,250,.78);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--color-line);
}
.site-header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:1.35rem; font-weight:600; }
.brand svg{ width:34px; height:34px; }
.brand span{ color: var(--color-primary); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:10px 16px; border-radius: var(--radius-full); font-weight:700; font-size:.94rem;
  color: var(--color-text-muted); transition: color .2s, background .2s;
}
.nav-links a:hover{ color: var(--color-text); background:#F1F1F1; }
.nav-links a.active{ color: var(--color-primary); background: var(--color-tint); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.auth-buttons{ display:flex; gap:10px; }

.user-chip{
  display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px;
  border-radius: var(--radius-full); background:#fff; border:1px solid var(--color-line);
  cursor:pointer; position:relative;
}
.avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary-dark));
  color:#fff; font-weight:800; font-size:.9rem; flex-shrink:0;
}
.avatar.lg{ width:88px; height:88px; font-size:1.8rem; border:4px solid var(--color-tint); }
.user-chip .u-meta{ text-align:left; line-height:1.2; }
.user-chip .u-name{ font-size:.86rem; font-weight:800; }
.user-chip .u-level{ font-size:.72rem; color: var(--color-text-muted); font-weight:700; }

.bell-btn{
  width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--color-line);
  display:grid; place-items:center; position:relative; color: var(--color-text);
}
.bell-dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background: var(--color-primary); border:2px solid #fff; }

.dropdown{
  position:absolute; top: calc(100% + 12px); right:0; width:280px;
  background:#fff; border-radius:18px; border:1px solid var(--color-line); box-shadow: var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: all .22s var(--ease); z-index:60;
}
.dropdown.open{ opacity:1; visibility:visible; transform:none; }
.dropdown a, .dropdown button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 14px; border-radius:12px; background:none; border:none; font-weight:700; font-size:.9rem; color:var(--color-text);
}
.dropdown a:hover, .dropdown button:hover{ background: var(--color-tint); color: var(--color-primary); }
.dropdown hr{ border:none; border-top:1px solid var(--color-line); margin:6px 4px; }
.dropdown .drop-title{ padding:10px 14px 4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-muted); font-weight:800; }
.notif-item{ display:flex; gap:10px; padding:10px 14px; font-size:.82rem; align-items:flex-start; }
.notif-item .icon{ color: var(--color-primary); margin-top:2px; }

.menu-toggle{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--color-line); background:#fff; align-items:center; justify-content:center; }
.mobile-drawer{
  position:fixed; inset:0; background: rgba(20,20,20,.4); z-index:300; opacity:0; visibility:hidden; transition: opacity .3s;
}
.mobile-drawer.open{ opacity:1; visibility:visible; }
.mobile-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px,84vw); background:#fff;
  padding:24px; transform: translateX(100%); transition: transform .35s var(--ease);
  display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open .mobile-drawer-panel{ transform:none; }
.mobile-drawer a{ padding:14px 10px; font-weight:700; border-bottom:1px solid var(--color-line); }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (max-width: 640px){
  .auth-buttons .btn-secondary{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{ background:#171414; color:#EDEDED; padding: 80px 0 28px; margin-top: 120px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .brand{ color:#fff; }
.footer-brand .brand span{ color: var(--color-accent); }
.footer-brand p{ color:#B9B4B4; margin-top:16px; max-width:320px; font-size:.92rem; }
.footer-contact{ margin-top:18px; font-size:.86rem; color:#B9B4B4; line-height:1.9; }
.footer-col h4{ font-family: var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:#8A8585; margin-bottom:18px; }
.footer-col a{ display:block; color:#DAD6D6; font-size:.92rem; padding:6px 0; transition: color .2s; }
.footer-col a:hover{ color: var(--color-accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:.82rem; color:#8A8585; flex-wrap:wrap; gap:12px; }
.footer-disclaimer{ font-size:.78rem; color:#6E6969; max-width:900px; margin-top:18px; line-height:1.7; }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ---------- Hero (home) ---------- */
.hero{ padding: 64px 0 40px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; }
.hero h1{ font-size: clamp(2.4rem, 5vw, 4rem); line-height:1.05; }
.hero h1 em{ font-style:normal; color: var(--color-primary); }
.hero-lead{ margin-top:22px; font-size:1.15rem; color: var(--color-text-muted); max-width: 460px; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:52px; }
.hero-stats div strong{ display:block; font-family: var(--font-display); font-size:1.7rem; }
.hero-stats div span{ font-size:.8rem; color: var(--color-text-muted); font-weight:700; }

.hero-scene{ position:relative; aspect-ratio: 1/1; }
.hero-scene .orb{
  position:absolute; inset:6%; border-radius:50%; overflow:hidden;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--color-tint) 45%, #fff 100%);
  box-shadow: inset 0 0 0 1px rgba(201,31,40,.08), var(--shadow-lg);
}
.hero-scene .orb-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:multiply; opacity:.94;
}
.hero-scene .crystal{ position:absolute; filter: drop-shadow(0 18px 26px rgba(201,31,40,.28)); animation: floatY 6s ease-in-out infinite; }
.hero-scene .crystal.c1{ width:34%; top:8%; left:6%; animation-delay:0s; }
.hero-scene .crystal.c2{ width:20%; bottom:12%; left:16%; animation-delay:1.4s; }
.hero-scene .crystal.c3{ width:26%; top:20%; right:4%; animation-delay:.7s; }
.hero-scene .crystal.c4{ width:16%; bottom:22%; right:16%; animation-delay:2.1s; }
.hero-scene .ring{ position:absolute; inset:16%; border:1.5px dashed rgba(201,31,40,.25); border-radius:50%; animation: spin 40s linear infinite; }
@keyframes floatY{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-16px) rotate(6deg);} }
@keyframes spin{ to{ transform: rotate(360deg);} }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-scene{ max-width:340px; margin: 40px auto 0; }
}

/* ---------- Feature / game cards ---------- */
.game-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.game-card .thumb{ height:190px; position:relative; display:grid; place-items:center; }
.game-card .thumb .crystal-icon{ width:70px; height:70px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); }
.game-card .thumb.tone-1{ background: linear-gradient(150deg,#FFF4F4,#FFE1E1); }
.game-card .thumb.tone-2{ background: linear-gradient(150deg,#FFF7F0,#FCE3DA); }
.game-card .thumb.tone-3{ background: linear-gradient(150deg,#FFEFEF,#F6D3D3); }
.game-card .body{ padding: 26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.game-card h3{ font-size:1.25rem; }
.game-card .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.game-card .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }

/* ---------- Progress / XP ---------- */
.xp-bar{ height:10px; border-radius: var(--radius-full); background: var(--color-gray); overflow:hidden; }
.xp-bar > span{ display:block; height:100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-accent), var(--color-primary-dark)); transition: width .8s var(--ease); }
.xp-bar.sm{ height:6px; }
.level-hex{
  width:52px; height:52px; display:grid; place-items:center; position:relative; flex-shrink:0;
  color:#fff; font-weight:800; font-size:1rem;
}
.level-hex svg{ position:absolute; inset:0; width:100%; height:100%; }
.level-hex span{ position:relative; z-index:1; }

/* ---------- Progress widget / stat grid ---------- */
.stat-card{ padding:24px; display:flex; flex-direction:column; gap:6px; }
.stat-card strong{ font-family: var(--font-display); font-size:1.9rem; }
.stat-card span{ font-size:.82rem; color: var(--color-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Daily challenge cards ---------- */
.challenge-card{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.challenge-card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.challenge-card .reward{ display:flex; align-items:center; gap:6px; font-weight:800; color: var(--color-primary); font-size:.86rem; }
.challenge-progress-track{ height:8px; background:var(--color-gray); border-radius:var(--radius-full); overflow:hidden; }
.challenge-progress-track > span{ display:block; height:100%; background: linear-gradient(90deg,var(--color-accent),var(--color-primary-dark)); }

/* ---------- Leaderboard ---------- */
.leaderboard-head{ display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:48px; }
.trophy-visual{
  flex-shrink:0; width:220px; aspect-ratio: 3/2; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-lg); transform: rotate(2deg);
}
.trophy-visual img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){ .trophy-visual{ display:none; } }
.leaderboard-table{ width:100%; border-collapse:separate; border-spacing:0; }
.leaderboard-table th{ text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); padding:14px 18px; border-bottom:1px solid var(--color-line); }
.leaderboard-table td{ padding:16px 18px; border-bottom:1px solid var(--color-line); font-size:.94rem; }
.leaderboard-table tr.me{ background: var(--color-tint); }
.rank-pill{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:#F2F2F2; color:var(--color-text-muted); }
.rank-pill.gold{ background:#F6D77A; color:#6B4E00; }
.rank-pill.silver{ background:#DADADA; color:#4A4A4A; }
.rank-pill.bronze{ background:#E3B48C; color:#5A3212; }
.player-cell{ display:flex; align-items:center; gap:12px; font-weight:700; }
@media (max-width: 760px){
  .leaderboard-table thead{ display:none; }
  .leaderboard-table, .leaderboard-table tbody, .leaderboard-table tr, .leaderboard-table td{ display:block; width:100%; }
  .leaderboard-table tr{ padding:14px 4px; border-bottom:1px solid var(--color-line); }
  .leaderboard-table td{ border:none; padding:4px 4px; }
}

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--color-line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 4px; background:none; border:none; text-align:left; font-weight:700; font-size:1.02rem; }
.faq-q .icon{ transition: transform .3s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q .icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a p{ padding: 0 4px 22px; color: var(--color-text-muted); max-width:640px; }

/* ---------- Newsletter ---------- */
.newsletter{
  border-radius: var(--radius-lg); padding:56px; text-align:center;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color:#fff; position:relative; overflow:hidden;
}
.newsletter h2{ color:#fff; font-size: clamp(1.5rem,3vw,2.1rem); }
.newsletter p{ color: rgba(255,255,255,.82); margin-top:12px; }
.newsletter-form{ display:flex; gap:10px; max-width:440px; margin:28px auto 0; }
.newsletter-form input{ flex:1; padding:14px 18px; border-radius: var(--radius-full); border:none; }
.newsletter-form .btn{ background:#fff; color: var(--color-primary); box-shadow:none; }
.newsletter-form .btn:hover{ transform: translateY(-2px); }
@media (max-width:560px){ .newsletter{ padding:36px 22px; } .newsletter-form{ flex-direction:column; } }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height: calc(100vh - var(--nav-h) - 340px); display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; }
.auth-visual{ background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary)); position:relative; display:flex; align-items:center; justify-content:center; padding:60px; }
.auth-visual .quote{ color:#fff; max-width:380px; position:relative; z-index:2; }
.auth-visual .quote h3{ color:#fff; font-size:1.6rem; line-height:1.3; }
.auth-visual .quote p{ color:rgba(255,255,255,.8); margin-top:16px; }
.auth-visual-photo{
  position:absolute; right:-26px; bottom:-26px; width:230px;
  border-radius: var(--radius-lg); overflow:hidden; z-index:1;
  box-shadow: 0 30px 55px rgba(0,0,0,.38); border:4px solid rgba(255,255,255,.85);
  transform: rotate(-6deg);
}
.auth-visual-photo img{ display:block; width:100%; height:auto; }
@media (max-width: 1150px){ .auth-visual-photo{ width:170px; right:-18px; bottom:-18px; } }
.auth-form-col{ display:flex; align-items:center; justify-content:center; padding: 70px 24px; }
.auth-card{ width:100%; max-width:420px; }
.auth-card .eyebrow{ }
.auth-card h1{ font-size:2rem; margin-bottom:8px; }
.auth-switch{ text-align:center; margin-top:22px; font-size:.92rem; color:var(--color-text-muted); }
.auth-switch a{ color: var(--color-primary); font-weight:800; }
@media (max-width: 900px){ .auth-visual{ display:none; } .auth-wrap{ grid-template-columns:1fr; } }

/* ---------- Profile dashboard ---------- */
.profile-hero{ display:flex; gap:26px; align-items:center; padding:34px; flex-wrap:wrap; }
.profile-hero .meta{ flex:1; min-width:220px; }
.profile-hero h1{ font-size:1.7rem; }
.profile-hero .reg-date{ color: var(--color-text-muted); font-size:.86rem; margin-top:4px; }
.profile-hero .xp-row{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.profile-hero .xp-row .xp-bar{ flex:1; }
.profile-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:28px; margin-top:28px; }
@media (max-width: 900px){ .profile-grid{ grid-template-columns:1fr; } }
.mini-ach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mini-ach{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.mini-ach span{ font-size:.72rem; font-weight:700; color: var(--color-text-muted); }
.activity-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--color-line); align-items:center; }
.activity-row:last-child{ border-bottom:none; }
.activity-row .dot{ width:38px; height:38px; border-radius:50%; background: var(--color-tint); color:var(--color-primary); display:grid; place-items:center; flex-shrink:0; }
.activity-row .when{ margin-left:auto; font-size:.78rem; color:var(--color-text-muted); white-space:nowrap; }
.empty-state{ text-align:center; padding:60px 24px; }
.empty-state .crystal-icon{ width:64px; height:64px; margin:0 auto 18px; opacity:.5; }

/* ---------- Achievements page ---------- */
.ach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .ach-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ach-grid{ grid-template-columns:1fr; } }
.ach-card{ padding:26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.ach-card h4{ font-size:1rem; }
.ach-card p{ font-size:.84rem; color: var(--color-text-muted); }
.ach-card .prog{ width:100%; margin-top:6px; }
.ach-card.unlocked{ border-color: var(--color-tint-strong); }

/* ---------- Game shell ---------- */
.game-shell{ padding: 32px 0 90px; }
.game-banner{
  position:relative; height:200px; border-radius: var(--radius-lg); overflow:hidden;
  margin-bottom:26px; box-shadow: var(--shadow-md);
}
.game-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.game-banner-scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(32,32,32,.32), rgba(32,32,32,0) 55%);
}
@media (max-width:640px){ .game-banner{ height:140px; } }
.game-hud{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 24px; border-radius: var(--radius-lg); margin-bottom:22px;
}
.game-hud .hud-item{ display:flex; flex-direction:column; }
.game-hud .hud-item strong{ font-family:var(--font-display); font-size:1.4rem; }
.game-hud .hud-item span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:700; }
.game-stage{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:480px;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
}
.game-controls-hint{ text-align:center; margin-top:18px; color:var(--color-text-muted); font-size:.86rem; }
.game-overlay{
  position:absolute; inset:0; background: rgba(20,10,10,.6); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:20; opacity:0; visibility:hidden; transition: all .3s;
}
.game-overlay.show{ opacity:1; visibility:visible; }
.game-overlay .panel{ background:#fff; border-radius: var(--radius-lg); padding:40px; text-align:center; max-width:420px; width:92%; animation: scaleIn .35s var(--ease); }
@keyframes scaleIn{ from{ transform:scale(.9); opacity:0;} to{ transform:scale(1); opacity:1;} }
.game-overlay .panel .result-score{ font-family: var(--font-display); font-size:3rem; color:var(--color-primary); margin: 12px 0; }
.game-overlay .panel .reward-row{ display:flex; gap:18px; justify-content:center; margin: 18px 0 26px; }
.game-overlay .reward-pill{ display:flex; align-items:center; gap:8px; font-weight:800; background: var(--color-tint); color:var(--color-primary); padding:10px 16px; border-radius: var(--radius-full); font-size:.9rem; }
.game-overlay .panel .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Crystal Quest specific */
.cq-stage{ background: linear-gradient(180deg,#EAF3FB 0%, #FDEEEE 60%, #FCE0DD 100%); cursor:none; touch-action:none; }
.cq-player{
  position:absolute; width:46px; height:46px; z-index:5;
  border-radius:50%; background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 55%, var(--color-primary-dark));
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.18), 0 0 0 4px rgba(255,255,255,.55), 0 10px 16px rgba(0,0,0,.22);
}
.cq-crystal{ position:absolute; width:34px; height:34px; animation: cqSpin 3s linear infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.cq-obstacle{
  position:absolute; width:40px; height:40px;
  background: linear-gradient(160deg,#54504f,#242020);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow: 0 8px 12px rgba(0,0,0,.28);
}
@keyframes cqSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.cq-cloud{ position:absolute; opacity:.6; }
.cq-start-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:16px; z-index:10; }

/* Memory Match specific */
.mm-board{ display:grid; gap:14px; width:100%; max-width:560px; padding:20px; }
.mm-card{ aspect-ratio:1; perspective:800px; }
.mm-card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform .5s var(--ease); }
.mm-card.flipped .mm-card-inner, .mm-card.matched .mm-card-inner{ transform: rotateY(180deg); }
.mm-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; display:grid; place-items:center; }
.mm-front{ background: linear-gradient(145deg,var(--color-primary-dark),var(--color-accent)); }
.mm-front svg{ width:34%; height:34%; opacity:.5; }
.mm-back{ background:#fff; border:2px solid var(--color-line); transform: rotateY(180deg); }
.mm-back svg{ width:56%; height:56%; }
.mm-card.matched .mm-back{ border-color: var(--color-primary); background: var(--color-tint); }
.mm-card:not(.flipped):not(.matched) .mm-card-inner:hover{ transform: translateY(-4px); }

/* Color Dash specific */
.cd-target-row{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom: 26px; }
.cd-target-swatch{ width:64px; height:64px; border-radius:20px; box-shadow: var(--shadow-md); }
.cd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; width:100%; max-width:420px; padding: 0 20px; }
.cd-tile{ aspect-ratio:1; border-radius:20px; border:none; box-shadow: var(--shadow-sm); transition: transform .12s; }
.cd-tile:active{ transform: scale(.92); }
.cd-tile.wrong{ animation: cdShake .35s; }
@keyframes cdShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.cd-combo{ position:absolute; top:16px; right:20px; font-family: var(--font-display); font-size:1.4rem; color: var(--color-primary); opacity:0; transition: opacity .2s; }
.cd-combo.show{ opacity:1; }

/* ---------- Editorial / legal pages ---------- */
.article{ max-width:760px; margin:0 auto; }
.article h1{ font-size: clamp(2rem,4vw,2.8rem); margin-bottom:20px; }
.article .updated{ color:var(--color-text-muted); font-size:.88rem; margin-bottom:40px; }
.article h2{ font-size:1.35rem; margin: 44px 0 14px; }
.article p, .article li{ color:#3B3B3B; font-size:1rem; line-height:1.85; margin-bottom:14px; }
.article ul{ list-style: disc; padding-left:22px; }
.article ul li{ margin-bottom:8px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{ display:flex; flex-direction:column; gap:22px; }
.contact-info-row{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-row .dot{ width:40px; height:40px; border-radius:12px; background:var(--color-tint); color:var(--color-primary); display:grid; place-items:center; flex-shrink:0; }
.contact-info-row strong{ display:block; }
.contact-info-row span{ color:var(--color-text-muted); font-size:.92rem; }

/* ---------- Page transition ---------- */
.page-fade{ animation: pageFade .5s var(--ease); }
@keyframes pageFade{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- Loading ---------- */
.loader-crystal{ width:52px; height:52px; margin: 60px auto; animation: cqSpin 1.1s linear infinite; }